/* ==========================================================
   SEMBEE.CO.UK - SITE-SPECIFIC STYLES
   ==========================================================
   Corporate variation of the shared Sembee template.

   Keep generic layout rules in global.css.
   This file contains only sembee.co.uk colours and genuine
   business-site presentation differences.
   ========================================================== */

:root{
  --site-accent:#395f8a;
  --site-accent-text:#ffffff;
  --site-link:#315f8f;
  --site-link-hover:#24496f;
}


/* ==========================================================
   CORPORATE HEADER
   ========================================================== */

/*
   sembee.co.uk is the main business site rather than a
   technical publication, so the publication band is kept
   slightly more restrained.
*/

.publication-identity{
  background:var(--site-accent);
}

.publication-identity .shell{
  min-height:54px;
}

.publication-title strong{
  font-size:1.25rem;
}


/* ==========================================================
   BUSINESS NAVIGATION
   ========================================================== */

.site-nav{
  gap:28px;
}


/* Slightly wider dropdown for service names */

.nav-dropdown-menu{
  min-width:250px;
}


/* ==========================================================
   BUSINESS CONTENT
   ========================================================== */

/*
   Normal service/about pages benefit from a slightly narrower
   reading width than the technical reference sites.
*/

.article-shell{
  max-width:1050px;
}


/*
   Give business pages a little more breathing room.
*/

.page-introduction{
  padding-bottom:42px;
}

.article-content{
  padding-top:34px;
}

.article-content p{
  margin-bottom:20px;
}


/* ==========================================================
   SEMBEE HOMEPAGE
   ==========================================================
   These classes are available for default.asp when we build
   the new landing page. They do not affect ordinary pages.
   ========================================================== */

.sembee-hero{
  padding:74px 0 64px;
}

.sembee-hero-inner{
  max-width:1050px;
}

.sembee-hero .section-kicker{
  margin-bottom:18px;
}

.sembee-hero h1{
  max-width:850px;
  margin:0 0 24px;
  font-size:clamp(2.4rem,5vw,4.2rem);
  line-height:1.05;
  letter-spacing:-.045em;
}

.sembee-hero-lead{
  max-width:760px;
  margin:0;
  color:#505652;
  font-size:1.2rem;
  line-height:1.65;
}

.sembee-home-section{
  padding:58px 0;
  border-top:1px solid var(--line);
}

.sembee-home-section h2{
  margin:0 0 16px;
  font-size:clamp(1.65rem,3vw,2.25rem);
  line-height:1.2;
  letter-spacing:-.025em;
}

.sembee-home-intro{
  max-width:none;
  margin-bottom:34px;
  color:#555b57;
  font-size:1.05rem;
}

.sembee-service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.sembee-service-card{
  padding:28px;
  background:var(--surface);
  border:1px solid var(--line);
}

.sembee-service-card h3{
  margin:0 0 12px;
  font-size:1.2rem;
  line-height:1.3;
}

.sembee-service-card p{
  margin:0 0 18px;
  color:#555b57;
}

.sembee-service-card a{
  font-weight:650;
  text-decoration:none;
}

.sembee-service-card a:hover,
.sembee-service-card a:focus{
  text-decoration:underline;
}

.sembee-highlight{
  padding:34px;
  background:#ffffff;
  border-left:4px solid var(--site-accent);
}

.sembee-highlight h2{
  margin-top:0;
}

.sembee-core-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
    .sembee-core-services {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:800px){

  .site-nav{
    gap:18px;
  }

  .sembee-hero{
    padding:50px 0 44px;
  }

  .sembee-service-grid{
    grid-template-columns:1fr;
  }

  .sembee-service-card{
    padding:24px;
  }

  .sembee-home-section{
    padding:44px 0;
  }

}