/* =====================================================================
   v4: Bluehost-style blog layout, Asap throughout.
   Loaded after style.css (see parts/bluehost.php).
   ===================================================================== */
:root{
  --bh-font:"Asap","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --bh-ink:#16202b; --bh-body:#45505c; --bh-muted:#5f6b77;
  --bh-navy:#0c2f55; --bh-accent:#0090f0; --bh-link:#0077c8;
  --bh-line:#e3e8ee; --bh-soft:#f3f7fb;
  --bh-radius:8px; --bh-max:1240px;
  --cp-page:#fff; --cp-cream:#f3f7fb; --cp-line:#e3e8ee;
  --sh-font:var(--bh-font); --sh-font-head:var(--bh-font);
}

/* One family everywhere (headings, menus, buttons, labels). Code keeps monospace. */
body.sh,
body.sh :is(h1,h2,h3,h4,h5,h6,p,a,li,span,strong,em,label,input,button,select,textarea,time,blockquote,figcaption,td,th),
body.sh :is(.sh-btn,.sh-menu a,.sh-topbar,.cp-filter,.cp-chip,.cp-card__title,.cp-feature__title,.cp-band__title,.ur-search-panel__title,.sh-article__title,.sh-pagehead__title,.sh-prose h2,.sh-prose h3){
  font-family:var(--bh-font);
}
body.sh{background:#fff; color:var(--bh-body); -webkit-font-smoothing:antialiased}
body.sh :is(h1,h2,h3,h4){color:var(--bh-ink); letter-spacing:-.01em}

.bh-container{max-width:var(--bh-max); margin:0 auto; padding:0 var(--sh-gutter,24px)}

/* ---------- Blog sub-bar ---------- */
.bh-subbar{background:#fff; border-bottom:1px solid var(--bh-line); border-top:1px solid var(--bh-line)}
.bh-subbar__inner{display:flex; align-items:center; gap:28px; min-height:64px}
.bh-subbar__label{font-size:22px; font-weight:700; color:var(--bh-ink); text-decoration:none; flex:none}
.bh-subbar__label:hover{color:var(--bh-link)}
.bh-subbar__nav{flex:1; min-width:0; overflow-x:auto; scrollbar-width:none}
.bh-subbar__nav::-webkit-scrollbar{display:none}
.bh-subbar__nav ul{display:flex; gap:4px; list-style:none; margin:0; padding:0; white-space:nowrap}
.bh-subbar__nav a{display:block; padding:8px 12px; font-size:15px; font-weight:500; color:var(--bh-ink); text-decoration:none; border-radius:6px}
.bh-subbar__nav a:hover{color:var(--bh-link); background:var(--bh-soft)}
.bh-subbar__nav a.is-active{color:var(--bh-navy); background:#e6f4fe; font-weight:600}
.bh-subbar__search{position:relative; flex:0 0 260px; margin:0}
.bh-subbar__search input{width:100%; height:42px; padding:0 46px 0 18px; border:1px solid #c9d3de; border-radius:999px; background:#fff; font-size:15px; color:var(--bh-ink)}
.bh-subbar__search input::placeholder{color:var(--bh-muted)}
.bh-subbar__search input:focus{outline:none; border-color:var(--bh-accent); box-shadow:0 0 0 3px rgba(0,144,240,.18)}
.bh-subbar__search button{position:absolute; right:5px; top:5px; width:32px; height:32px; border:0; border-radius:50%; background:#e6f4fe; color:var(--bh-navy); display:grid; place-items:center; cursor:pointer}
.bh-subbar__search button:hover{background:var(--bh-navy); color:#fff}

/* The old header search toggle is replaced by the sub-bar search. */
.sh-header [data-sh-toggle="search"]{display:none}

/* ---------- Sections ---------- */
.bh-section{padding:56px 0; border-top:1px solid var(--bh-line)}
.bh-section--first{border-top:0; padding-top:40px}
.bh-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px}
.bh-head__text{max-width:640px}
.bh-head__title{margin:0; font-size:clamp(28px,3.2vw,38px); line-height:1.12; font-weight:700; color:var(--bh-ink)}
.bh-head__desc{margin:12px 0 0; font-size:17px; line-height:1.55; color:var(--bh-body)}
.bh-viewall{flex:none; display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--bh-link); text-decoration:none; padding-bottom:3px; border-bottom:2px solid currentColor}
.bh-viewall svg{transition:transform .2s}
.bh-viewall:hover{color:var(--bh-navy)}
.bh-viewall:hover svg{transform:translateX(3px)}
.bh-count{margin:-12px 0 24px; font-size:14px; color:var(--bh-muted)}
.bh-section .sh-crumbs{margin-bottom:14px; color:var(--bh-muted)}
.bh-section .sh-crumbs a{color:var(--bh-link)}

/* ---------- Grid & cards ---------- */
.bh-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px 32px}
.bh-card{display:flex; flex-direction:column; min-width:0; background:none; border:0; box-shadow:none; padding:0}
.bh-card__media{display:block; aspect-ratio:16/9; border-radius:var(--bh-radius); overflow:hidden; background:var(--bh-soft)}
.bh-card__media img,.bh-card__media .sh-thumb-fallback{display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.bh-card:hover .bh-card__media img{transform:scale(1.03)}
.bh-card__body{display:flex; flex-direction:column; flex:1; padding-top:16px}
.bh-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.bh-chip{display:inline-block; padding:3px 8px; font-size:12px; line-height:1.4; font-weight:500; color:var(--bh-link); background:#fff; border:1px solid var(--bh-accent); border-radius:4px; text-decoration:none}
.bh-chip:hover{background:var(--bh-navy); border-color:var(--bh-navy); color:#fff}
.bh-card__title{margin:0; font-size:21px; line-height:1.25; font-weight:700}
.bh-card__title a{color:var(--bh-ink); text-decoration:none}
.bh-card__title a:hover{color:var(--bh-link)}
.bh-card__excerpt{margin:10px 0 0; font-size:16px; line-height:1.55; color:var(--bh-body); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.bh-byline{display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:16px; font-size:14px; color:var(--bh-muted)}
.bh-avatar{flex:none; width:34px; height:34px; border-radius:50%; background:var(--bh-navy); color:#fff; font-size:12px; font-weight:700; display:grid; place-items:center; letter-spacing:.02em}
.bh-byline__text{display:flex; flex-direction:column; gap:2px; line-height:1.3}
.bh-byline__name{color:var(--bh-body)}
.bh-byline__name strong{color:var(--bh-ink); font-weight:600}
.bh-byline__meta{display:inline-flex; align-items:center; gap:8px}
.bh-dot{width:4px; height:4px; border-radius:50%; background:#9aa5b1}
.bh-byline--compact{padding-top:8px; font-size:13px}

/* ---------- Featured block: one large story + compact list ---------- */
.bh-feature{display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:40px; align-items:start}
.bh-card--lead .bh-card__title{font-size:clamp(24px,2.4vw,30px); line-height:1.2}
.bh-card--lead .bh-card__excerpt{font-size:17px; -webkit-line-clamp:3}
.bh-feature__list{display:flex; flex-direction:column; gap:24px}
.bh-card--mini{display:grid; grid-template-columns:160px minmax(0,1fr); gap:16px; align-items:start}
.bh-card--mini + .bh-card--mini{padding-top:24px; border-top:1px solid var(--bh-line)}
.bh-card--mini .bh-card__media{aspect-ratio:4/3; border-radius:6px}
.bh-card--mini .bh-card__body{padding-top:0}
.bh-card--mini .bh-chips{margin-bottom:8px}
.bh-card--mini .bh-chip{font-size:11px; padding:2px 6px}
.bh-card--mini .bh-card__title{font-size:16px; line-height:1.3}

/* ---------- Pagination ---------- */
.bh-section .cp-pagination{margin-top:48px}

/* ---------- Single posts & pages: Asap headings (banner styles below) ---------- */
.sh-article__title,.sh-pagehead__title{font-size:clamp(30px,4vw,44px); line-height:1.12; font-weight:700}
.sh-article__media img{border-radius:var(--bh-radius)}
.sh-prose{font-size:18px; line-height:1.7; color:var(--bh-body)}
.sh-prose :is(h2,h3,h4){color:var(--bh-ink); font-weight:700; line-height:1.2}
.sh-prose a{color:var(--bh-link)}
.sh-section--soft{background:var(--bh-soft)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .bh-subbar__search{flex-basis:200px}
  .bh-feature{grid-template-columns:1fr}
}
@media (max-width:900px){
  .bh-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 24px}
}
@media (max-width:760px){
  .bh-subbar__inner{flex-wrap:wrap; gap:8px 16px; padding-top:12px; padding-bottom:10px}
  .bh-subbar__label{font-size:20px}
  .bh-subbar__search{flex:1 1 auto; order:2}
  .bh-subbar__nav{order:3; flex-basis:100%; margin:0 -8px}
  .bh-subbar__nav a{padding:6px 8px; font-size:14px}
  .bh-section{padding:40px 0}
  .bh-section--first{padding-top:28px}
  .bh-head{flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:24px}
  .bh-head__desc{font-size:16px}
  .bh-grid{grid-template-columns:1fr; gap:36px}
  .bh-card__title{font-size:20px}
  .bh-card--mini{grid-template-columns:112px minmax(0,1fr); gap:14px}
}

/* =====================================================================
   v4.1: knowledge-hub hero (background photo) and category cards
   ===================================================================== */
.bh-hero{position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; min-height:440px; padding:88px var(--sh-gutter,24px) 96px; text-align:center; color:#fff; background-color:#0c2f55; background-image:var(--bh-hero-img,none); background-size:cover; background-position:center; overflow:hidden}
.bh-hero::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse 55% 65% at 50% 48%,rgba(8,31,57,.55),rgba(8,31,57,0) 75%), linear-gradient(180deg,rgba(8,31,57,.82) 0%,rgba(12,47,85,.66) 50%,rgba(8,31,57,.88) 100%)}
.bh-hero{background-position:center 45%}
.bh-hero__inner{width:100%; max-width:820px}
body.sh .bh-hero__title{margin:0; color:#fff; font-size:clamp(34px,5vw,58px); line-height:1.08; font-weight:700; letter-spacing:-.02em; text-wrap:balance}
.bh-hero__lead{margin:18px auto 0; max-width:620px; font-size:clamp(16px,1.6vw,19px); line-height:1.55; color:rgba(255,255,255,.88)}
.bh-hero__search{position:relative; max-width:640px; margin:36px auto 0}
.bh-hero__search input{width:100%; height:64px; padding:0 84px 0 28px; border:0; border-radius:999px; background:#fff; color:var(--bh-ink); font-size:17px; box-shadow:0 18px 40px rgba(4,16,31,.35)}
.bh-hero__search input::placeholder{color:#6b7682}
.bh-hero__search input:focus{outline:none; box-shadow:0 0 0 4px rgba(0,144,240,.45),0 18px 40px rgba(4,16,31,.35)}
.bh-hero__search button{position:absolute; right:7px; top:7px; width:50px; height:50px; border:0; border-radius:50%; background:var(--bh-navy); color:#fff; display:grid; place-items:center; cursor:pointer; transition:background .2s, transform .2s}
.bh-hero__search button:hover{background:var(--bh-link); transform:scale(1.04)}
.home .bh-subbar__search{display:none}

.bh-cats{padding:72px 0 64px}
body.sh .bh-cats__title{margin:0 0 40px; text-align:center; font-size:clamp(28px,3.4vw,40px); line-height:1.12; font-weight:700}
.bh-cats__title span{color:var(--bh-accent)}
.bh-cats__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; list-style:none; margin:0; padding:0}
.bh-cat{display:flex; flex-direction:column; height:100%; padding:26px 26px 22px; background:#fff; border:1px solid var(--bh-line); border-radius:12px; text-decoration:none; color:var(--bh-body); box-shadow:0 2px 6px rgba(12,47,85,.04); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.bh-cat:hover{transform:translateY(-4px); border-color:#b9dcf7; box-shadow:0 16px 36px rgba(12,47,85,.12)}
.bh-cat__top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--bh-line)}
.bh-cat__name{font-size:19px; font-weight:700; color:var(--bh-ink)}
.bh-cat:hover .bh-cat__name{color:var(--bh-link)}
.bh-cat__icon{flex:none; color:var(--bh-accent)}
.bh-cat__desc{flex:1; font-size:15px; line-height:1.55}
.bh-cat__count{align-self:flex-start; margin-top:18px; padding:4px 10px; font-size:13px; font-weight:600; color:var(--bh-navy); background:#e6f4fe; border-radius:4px}

@media (max-width:900px){
  .bh-cats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .bh-hero{min-height:0; padding:64px 20px 72px}
  .bh-hero__search{margin-top:28px}
  .bh-hero__search input{height:56px; padding-left:22px; font-size:16px}
  .bh-hero__search button{width:42px; height:42px}
  .bh-cats{padding:48px 0 40px}
  .bh-cats__grid{grid-template-columns:1fr; gap:16px}
  .bh-cat{padding:22px 20px 18px}
}
@media (prefers-reduced-motion:reduce){ .bh-cat,.bh-hero__search button{transition:none} .bh-cat:hover{transform:none} }

/* =====================================================================
   v4.2: photo banner on every inside page (archives, search, posts,
   pages, 404) and the footer call to action
   ===================================================================== */
body.sh :is(.bh-banner,.sh-article__head,.sh-pagehead){position:relative; isolation:isolate; overflow:hidden; color:#fff; border:0; padding:64px 0 72px; background-color:#0c2f55; background-image:var(--bh-hero-img,none); background-size:cover; background-position:center 45%}
body.sh :is(.bh-banner,.sh-article__head,.sh-pagehead)::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(8,31,57,.94) 0%,rgba(8,31,57,.84) 45%,rgba(12,47,85,.62) 100%)}
body.sh :is(.bh-banner__title,.sh-article__title,.sh-pagehead__title){margin:10px 0 0; color:#fff; font-size:clamp(30px,4vw,46px); line-height:1.1; font-weight:700; letter-spacing:-.015em; max-width:860px; text-wrap:balance}
body.sh :is(.bh-banner__lead,.sh-article__lead,.sh-pagehead__lead){margin:14px 0 0; max-width:680px; font-size:clamp(16px,1.5vw,18px); line-height:1.55; color:rgba(255,255,255,.86)}
body.sh .bh-banner__meta{display:inline-block; margin:20px 0 0; padding:5px 12px; font-size:13px; font-weight:600; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); border-radius:4px}
body.sh :is(.bh-banner,.sh-article__head,.sh-pagehead) .sh-crumbs{margin:0; color:rgba(255,255,255,.7); font-size:14px}
body.sh :is(.bh-banner,.sh-article__head,.sh-pagehead) .sh-crumbs a{color:#fff; text-decoration:none}
body.sh :is(.bh-banner,.sh-article__head,.sh-pagehead) .sh-crumbs a:hover{text-decoration:underline}
body.sh .sh-article__head .sh-chip--light{display:inline-block; margin-top:16px; padding:4px 10px; font-size:13px; font-weight:600; color:#fff; background:rgba(0,144,240,.22); border:1px solid rgba(255,255,255,.4); border-radius:4px; text-decoration:none}
body.sh .sh-article__head .sh-chip--light:hover{background:#fff; color:var(--bh-navy)}
body.sh .sh-article__head .sh-meta--light{margin-top:20px; color:rgba(255,255,255,.82); font-size:14px}
body.sh .sh-article__head .sh-chip--light + .sh-article__title{margin-top:14px}
/* Search field inside a banner */
body.sh :is(.bh-banner,.sh-pagehead) .sh-search{max-width:620px; margin-top:24px; background:#fff; border-radius:999px; box-shadow:0 14px 32px rgba(4,16,31,.35)}
body.sh .sh-pagehead--center :is(.sh-pagehead__title,.sh-pagehead__lead){margin-inline:auto}
body.sh .sh-pagehead--center .sh-eyebrow{color:rgba(255,255,255,.8)}
body.sh .sh-pagehead .sh-pills a{color:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.08)}
body.sh .sh-pagehead .sh-pills a:hover{background:#fff; color:var(--bh-navy)}
/* Posts: the featured image keeps a little overlap with the banner */
body.sh .sh-article__head{padding-bottom:96px}

/* ---------- Footer call to action ---------- */
body.sh .sh-prefooter{position:relative; isolation:isolate; overflow:hidden; background:#0c2f55; background-image:var(--bh-hero-img,none); background-size:cover; background-position:center 60%}
body.sh .sh-prefooter::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(8,31,57,.96) 0%,rgba(8,31,57,.9) 50%,rgba(12,47,85,.8) 100%)}
body.sh .sh-prefooter__inner{max-width:var(--bh-max); padding:56px var(--sh-gutter,24px); gap:32px}
body.sh .sh-prefooter h2{margin:0 0 8px; color:#fff; font-size:clamp(26px,3vw,36px); line-height:1.15; font-weight:700}
body.sh .sh-prefooter p{margin:0; max-width:520px; color:rgba(255,255,255,.88); font-size:17px; line-height:1.55}
body.sh .sh-prefooter__actions{gap:12px}
body.sh .sh-prefooter .sh-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 22px; font-size:15px; font-weight:600; border-radius:6px; border:1px solid transparent; text-decoration:none; transition:background .2s, color .2s, border-color .2s}
body.sh .sh-prefooter .sh-btn svg{width:18px; height:18px}
body.sh .sh-prefooter .sh-btn--dark{background:#fff; color:var(--bh-navy) !important; border-color:#fff}
body.sh .sh-prefooter .sh-btn--dark:hover{background:#e6f4fe; border-color:#e6f4fe; color:var(--bh-navy) !important}
body.sh .sh-prefooter .sh-btn--ghost-light{background:transparent; color:#fff !important; border-color:rgba(255,255,255,.55)}
body.sh .sh-prefooter .sh-btn--ghost-light:hover{background:#fff; color:var(--bh-navy) !important; border-color:#fff}

@media (max-width:760px){
  body.sh :is(.bh-banner,.sh-article__head,.sh-pagehead){padding:40px 0 48px}
  body.sh .sh-article__head{padding-bottom:64px}
  body.sh :is(.bh-banner,.sh-article__head,.sh-pagehead)::before{background:rgba(8,31,57,.88)}
  body.sh .sh-prefooter__inner{padding:44px 20px}
}
/* v4.2 fixes: readable category tag in post banners; featured image overlaps the banner by a fixed 64px */
body.sh .sh-article__head .sh-chip--light{color:#fff !important}
body.sh .sh-article__head .sh-chip--light:hover{color:var(--bh-navy) !important}
body.sh .sh-article__head{padding-bottom:112px}
body.sh .sh-article__layout{margin-top:-64px}
@media (max-width:760px){ body.sh .sh-article__head{padding-bottom:96px} body.sh .sh-article__layout{margin-top:-56px} }

/* =====================================================================
   v5: cPanel-blog style header (announcement strip + logo / menu / buttons)
   ===================================================================== */
.hd-strip{background:linear-gradient(270deg,#0f5e9d 0%,#0c2f55 55%,#081f39 100%); color:#fff}
.hd-strip__inner{display:flex; align-items:center; justify-content:center; gap:14px; min-height:50px; padding:6px var(--sh-gutter,24px); text-align:center}
.hd-strip__spark{flex:none; color:#ffd36a}
body.sh .hd-strip__msg{margin:0; color:#fff; font-size:15px; font-weight:700}
body.sh .hd-strip__btn{flex:none; display:inline-flex; align-items:center; min-height:32px; padding:0 18px; font-size:14px; font-weight:700; color:var(--bh-navy); background:#fff; border-radius:4px; text-decoration:none; transition:background .2s}
body.sh .hd-strip__btn:hover{background:#e6f4fe; color:var(--bh-navy)}

body.sh .sh-header.hd{background:#fff; backdrop-filter:none; border-bottom:1px solid var(--bh-line); box-shadow:0 2px 14px rgba(12,47,85,.05)}
.hd__inner{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; max-width:var(--bh-max); min-height:84px; margin:0 auto; padding:0 var(--sh-gutter,24px)}
.hd__logo img{height:38px; width:auto}
.hd__nav{display:flex; justify-content:center; min-width:0}
body.sh .hd .sh-menu a{padding:10px 14px; font-size:16px; font-weight:400; color:#1f2a36; background:transparent}
body.sh .hd .sh-menu a:hover,
body.sh .hd .sh-menu .current-menu-item>a,
body.sh .hd .sh-menu .current-menu-ancestor>a,
body.sh .hd .sh-menu .current-category-ancestor>a,
body.sh .hd .sh-menu .current-post-ancestor>a{color:var(--bh-link); background:transparent}
body.sh .hd .sh-menu .menu-item-has-children>a::after{width:7px; height:7px; margin-left:9px; border-width:0 1.8px 1.8px 0; transform:translateY(-3px) rotate(45deg)}
body.sh .hd .sh-menu .sub-menu{min-width:220px; padding:10px; border:1px solid var(--bh-line); border-radius:8px; box-shadow:0 18px 40px rgba(12,47,85,.14)}
body.sh .hd .sh-menu .sub-menu a{padding:9px 12px; font-size:15px; border-radius:6px}
body.sh .hd .sh-menu .sub-menu a:hover{background:var(--bh-soft)}
.hd__actions{display:flex; align-items:center; gap:12px}
body.sh .hd-btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 22px; font-size:16px; font-weight:700; border-radius:4px; border:1.5px solid var(--bh-navy); text-decoration:none; white-space:nowrap; transition:background .2s, color .2s, border-color .2s}
body.sh .hd-btn--outline{color:var(--bh-navy); background:#fff}
body.sh .hd-btn--outline:hover{color:#fff; background:var(--bh-navy)}
body.sh .hd-btn--solid{color:#fff; background:var(--bh-navy)}
body.sh .hd-btn--solid:hover{color:#fff; background:var(--bh-link); border-color:var(--bh-link)}
body.sh .bh-subbar{border-top:0}

@media (max-width:1180px){
  .hd__inner{grid-template-columns:auto 1fr; min-height:72px}
  .hd__actions{justify-self:end}
  body.sh .hd__cta{display:none}
  body.sh .hd .sh-menu a{padding:14px 10px; font-size:16px}
  body.sh .hd .sh-menu .sub-menu{border:0; box-shadow:none; padding:0 0 0 14px}
  body.sh .sh-nav__mobile-cta .hd-btn{display:flex; width:100%; margin-bottom:10px}
}
@media (max-width:640px){
  .hd-strip__inner{gap:10px; min-height:44px}
  .hd-strip__spark{display:none}
  body.sh .hd-strip__msg{font-size:13px}
  body.sh .hd-strip__btn{min-height:28px; padding:0 12px; font-size:12px}
  .hd__inner{min-height:64px}
  .hd__logo img{height:30px}
}

/* =====================================================================
   v5: single post (split banner, reading layout, share, author, nav)
   ===================================================================== */
.sp-progress{position:fixed; left:0; right:0; top:0; height:3px; z-index:100; pointer-events:none}
.sp-progress span{display:block; height:100%; background:var(--bh-accent); transform:scaleX(0); transform-origin:0 50%}
.admin-bar .sp-progress{top:32px}

body.sh .sh-article__head.sp-head{padding:56px 0 64px}
.sp-head__grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:center}
.sp-head__grid--solo{grid-template-columns:minmax(0,860px)}
.sp-head__media{margin:0}
.sp-head__media img{display:block; width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; border-radius:12px; border:1px solid rgba(255,255,255,.18); box-shadow:0 24px 50px rgba(4,16,31,.45)}
.sp-byline{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:24px}
body.sh .sp-head .bh-byline{padding-top:0; color:rgba(255,255,255,.78)}
body.sh .sp-head .bh-byline__name{color:rgba(255,255,255,.82)}
body.sh .sp-head .bh-byline__name strong{color:#fff}
body.sh .sp-head .bh-avatar{background:#fff; color:var(--bh-navy)}
body.sh .sp-head .bh-dot{background:rgba(255,255,255,.55)}
.sp-updated{padding:4px 10px; font-size:13px; font-weight:600; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:4px}

.sp-layout{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:64px; padding-top:56px; padding-bottom:72px}
.sp-main{min-width:0; max-width:780px}
body.sh .sp .sh-prose{font-size:18px; line-height:1.75; color:#34404c}
body.sh .sp .sh-prose>*+*{margin-top:1.15em}
body.sh .sp .sh-prose h2{margin-top:2em; font-size:clamp(25px,2.6vw,31px); line-height:1.2; scroll-margin-top:120px}
body.sh .sp .sh-prose h3{margin-top:1.7em; font-size:22px; line-height:1.3; scroll-margin-top:120px}
body.sh .sp .sh-prose a{color:var(--bh-link); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
body.sh .sp .sh-prose a:hover{color:var(--bh-navy); text-decoration-thickness:2px}
body.sh .sp .sh-prose :is(ul,ol){padding-left:1.3em}
body.sh .sp .sh-prose li+li{margin-top:.45em}
body.sh .sp .sh-prose li::marker{color:var(--bh-accent); font-weight:700}
body.sh .sp .sh-prose blockquote{margin-left:0; padding:18px 22px; background:var(--bh-soft); border-left:4px solid var(--bh-accent); border-radius:0 8px 8px 0; color:var(--bh-ink)}
body.sh .sp .sh-prose img{border-radius:8px}
body.sh .sp .sh-prose code{padding:2px 6px; font-size:.88em; background:#eef3f8; border-radius:4px; color:#0c2f55}
body.sh .sp .sh-prose pre{padding:18px 20px; background:#0b1d33; color:#e6eef7; border-radius:8px; overflow:auto}
body.sh .sp .sh-prose pre code{background:none; color:inherit; padding:0}
body.sh .sp .sh-prose table{width:100%; border-collapse:collapse; font-size:16px; border:1px solid var(--bh-line); border-radius:8px; overflow:hidden}
body.sh .sp .sh-prose th{background:var(--bh-navy); color:#fff; text-align:left}
body.sh .sp .sh-prose :is(th,td){padding:12px 14px; border-bottom:1px solid var(--bh-line)}

body.sh .sp .sh-tags{margin-top:36px}
.sp-share{display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:36px; padding:20px 0; border-top:1px solid var(--bh-line); border-bottom:1px solid var(--bh-line)}
.sp-share__label{font-size:15px; font-weight:700; color:var(--bh-ink)}
.sp-share ul{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0}
body.sh .sp-share :is(a,button){position:relative; display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--bh-line); border-radius:50%; background:#fff; color:var(--bh-navy); cursor:pointer; transition:background .2s, color .2s, border-color .2s}
body.sh .sp-share :is(a,button):hover{background:var(--bh-navy); border-color:var(--bh-navy); color:#fff}
.sp-copy__done{position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); padding:4px 8px; font-size:12px; font-weight:600; color:#fff; background:var(--bh-ink); border-radius:4px; white-space:nowrap}

.sp-author{display:flex; gap:18px; align-items:flex-start; margin-top:32px; padding:24px; background:var(--bh-soft); border-radius:12px}
body.sh .sp-author__avatar{width:56px; height:56px; font-size:18px}
body.sh .sp-author__name{margin:0; font-size:18px; font-weight:700; color:var(--bh-ink)}
body.sh .sp-author__bio{margin:6px 0 0; font-size:15px; line-height:1.55; color:var(--bh-body)}

.sp-postnav{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:32px}
body.sh .sp-postnav__link{display:flex; flex-direction:column; gap:8px; padding:20px 22px; border:1px solid var(--bh-line); border-radius:12px; text-decoration:none; transition:border-color .2s, box-shadow .2s}
body.sh .sp-postnav__link:hover{border-color:#b9dcf7; box-shadow:0 12px 28px rgba(12,47,85,.1)}
body.sh .sp-postnav__link--next{text-align:right}
.sp-postnav__dir{font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--bh-link)}
body.sh .sp-postnav__link strong{font-size:17px; line-height:1.35; color:var(--bh-ink)}

.sp-aside{min-width:0}
.sp-sticky{position:sticky; top:104px; display:flex; flex-direction:column; gap:20px}
.admin-bar .sp-sticky{top:136px}
.sp-card{padding:22px; background:#fff; border:1px solid var(--bh-line); border-radius:12px}
body.sh .sp-card__title{margin:0 0 12px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--bh-muted)}
body.sh .sp .sh-toc__list{max-height:46vh; overflow:auto; margin:0; padding:0; list-style:none; counter-reset:toc}
body.sh .sp .sh-toc__list li{counter-increment:toc}
body.sh .sp .sh-toc__list a{display:flex; gap:10px; padding:8px 10px; font-size:15px; line-height:1.4; color:var(--bh-body); border-left:2px solid transparent; text-decoration:none}
body.sh .sp .sh-toc__list a::before{content:counter(toc); flex:none; min-width:16px; font-weight:700; color:var(--bh-muted)}
body.sh .sp .sh-toc__list a:hover,body.sh .sp .sh-toc__list a.is-active{color:var(--bh-navy); background:#e6f4fe; border-left-color:var(--bh-accent)}
.sp-promo{position:relative; isolation:isolate; overflow:hidden; padding:28px 24px; border-radius:12px; color:#fff; background:#0c2f55; background-image:var(--bh-hero-img,none); background-size:cover; background-position:center}
.sp-promo::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(8,31,57,.86),rgba(8,31,57,.95))}
body.sh .sp-promo__title{margin:0; font-size:22px; line-height:1.25; font-weight:700; color:#fff}
body.sh .sp-promo__text{margin:10px 0 0; font-size:15px; line-height:1.55; color:rgba(255,255,255,.86)}
body.sh .sp-promo__btn{width:100%; margin-top:20px; background:#fff; color:var(--bh-navy); border-color:#fff}
body.sh .sp-promo__btn:hover{background:#e6f4fe; border-color:#e6f4fe; color:var(--bh-navy)}
.sp-related{background:var(--bh-soft)}

@media (max-width:1024px){
  .sp-head__grid{grid-template-columns:1fr; gap:32px}
  .sp-head__media{max-width:640px}
  .sp-layout{grid-template-columns:1fr; gap:40px}
  .sp-sticky{position:static}
  .sp-main{max-width:none}
}
@media (max-width:640px){
  body.sh .sh-article__head.sp-head{padding:36px 0 44px}
  .sp-layout{padding-top:36px; padding-bottom:48px}
  body.sh .sp .sh-prose{font-size:17px}
  .sp-postnav{grid-template-columns:1fr}
  body.sh .sp-postnav__link--next{text-align:left}
  .sp-author{padding:20px}
}
@media (prefers-reduced-motion:reduce){ .sp-progress{display:none} }

/* v5 header fit: wider bar, tighter menu, outline button only when there is room */
.hd__inner{max-width:1440px}
.hd__logo img{height:34px}
body.sh .hd .sh-menu{gap:0}
body.sh .hd .sh-menu a{padding:10px 10px; font-size:15px}
body.sh .hd .sh-menu .menu-item-has-children>a::after{margin-left:7px}
@media (min-width:1181px) and (max-width:1339px){ body.sh .hd-btn--outline.hd__cta{display:none} }

/* =====================================================================
   v6: one photo per area (falls back to the home hero photo)
   - inside-page banners: server racks close-up
   - footer call to action: Earth at night
   - article sidebar promo: engineer in the data centre
   ===================================================================== */
body.sh :is(.bh-banner,.sh-article__head,.sh-pagehead){background-image:var(--bh-banner-img,var(--bh-hero-img,none)); background-position:center 40%}
body.sh :is(.bh-banner,.sh-article__head,.sh-pagehead)::before{background:linear-gradient(90deg,rgba(8,31,57,.95) 0%,rgba(8,31,57,.86) 45%,rgba(12,47,85,.7) 100%)}

body.sh .sh-prefooter{background-image:var(--bh-cta-img,var(--bh-hero-img,none)); background-position:center 55%}
body.sh .sh-prefooter::before{background:linear-gradient(90deg,rgba(6,20,40,.9) 0%,rgba(6,20,40,.6) 55%,rgba(6,20,40,.35) 100%)}

.sp-promo{min-height:380px; display:flex; flex-direction:column; justify-content:flex-end; background-image:var(--bh-promo-img,var(--bh-hero-img,none)); background-position:72% center}
.sp-promo::before{background:linear-gradient(180deg,rgba(8,31,57,.15) 0%,rgba(8,31,57,.55) 38%,rgba(8,31,57,.94) 72%)}

@media (max-width:760px){
  body.sh .sh-prefooter::before{background:rgba(6,20,40,.8)}
}
@media (max-width:1024px){
  .sp-promo{min-height:320px; background-position:80% 30%}
}

/* =====================================================================
   v7: simple menu with MilesWeb-style dropdown cards
   ===================================================================== */
@media (min-width:1181px){
  body.sh .hd .sh-menu{gap:4px}
  body.sh .hd .sh-menu>li>a{display:flex; align-items:center; padding:9px 14px; font-size:15.5px; font-weight:500; color:#15222e; border-radius:8px; transition:background .15s, color .15s}
  body.sh .hd .sh-menu>li>a:hover,
  body.sh .hd .sh-menu>li:hover>a,
  body.sh .hd .sh-menu>li:focus-within>a{background:#eef4fb; color:var(--bh-navy)}
  body.sh .hd .sh-menu>li.current-menu-item>a,
  body.sh .hd .sh-menu>li.current-menu-ancestor>a,
  body.sh .hd .sh-menu>li.current-category-ancestor>a{color:var(--bh-link)}
  body.sh .hd .sh-menu .menu-item-has-children>a::after{width:6px; height:6px; margin-left:8px; border-width:0 1.6px 1.6px 0; transform:translateY(-2px) rotate(45deg); transition:transform .2s}
  body.sh .hd .sh-menu>li:hover>a::after{transform:translateY(1px) rotate(225deg)}

  /* Dropdown card */
  body.sh .hd .sh-menu>li>.sub-menu{top:calc(100% + 10px); left:50%; width:330px; min-width:0; padding:10px; background:#fff; border:1px solid #e8edf3; border-radius:12px; box-shadow:0 18px 40px rgba(12,47,85,.16); transform:translate(-50%,8px)}
  body.sh .hd .sh-menu>li:hover>.sub-menu,
  body.sh .hd .sh-menu>li:focus-within>.sub-menu{transform:translate(-50%,0)}
  /* Hover bridge so the card does not close while moving the mouse down */
  body.sh .hd .sh-menu>li>.sub-menu::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px}
  body.sh .hd .sh-menu>li:last-child>.sub-menu{left:auto; right:0; transform:translateY(8px)}
  body.sh .hd .sh-menu>li:last-child:hover>.sub-menu,
  body.sh .hd .sh-menu>li:last-child:focus-within>.sub-menu{transform:none}

  body.sh .hd .sh-menu .sub-menu li+li{margin-top:2px}
  body.sh .hd .sh-menu .sub-menu a{display:block; padding:11px 14px; white-space:normal; border-radius:8px; color:var(--bh-ink); background:transparent}
  body.sh .hd .sh-menu .sub-menu a:hover,
  body.sh .hd .sh-menu .sub-menu .current-menu-item>a{background:#f3f7fb}
}
.hd-sub__top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
body.sh .hd-sub__title{font-size:15px; font-weight:600; color:var(--bh-ink)}
body.sh .sh-menu .sub-menu a:hover .hd-sub__title{color:var(--bh-link)}
body.sh .hd-sub__badge{padding:2px 8px; font-size:11px; font-weight:700; letter-spacing:.02em; line-height:1.5; color:#0c2f55; background:#d9f2ff; border-radius:999px}
body.sh .hd-sub__desc{display:block; margin-top:3px; font-size:13.5px; line-height:1.45; font-weight:400; color:var(--bh-muted)}

/* Mobile drawer: same rich items, compact */
@media (max-width:1180px){
  body.sh .hd .sh-menu>li>a{font-weight:600}
  body.sh .hd .sh-menu .sub-menu a{padding:10px 8px; border-bottom:0}
  body.sh .hd-sub__desc{font-size:13px}
}
/* The simpler menu leaves room for both header buttons again */
@media (min-width:1181px) and (max-width:1339px){ body.sh .hd-btn--outline.hd__cta{display:inline-flex} }

/* v7 mobile drawer: above its dim overlay, wrapped text, fold-open sections */
@media (max-width:1180px){
  body.sh-nav-open .sh-header{z-index:70}
  body.sh .hd .sh-menu a{white-space:normal}
  body.sh .hd .sh-menu>li>a{display:flex; align-items:center; justify-content:space-between; padding:15px 6px; font-size:17px; border-bottom:1px solid var(--bh-line)}
  body.sh .hd .sh-menu .menu-item-has-children>a::after{margin-left:auto; transition:transform .2s}
  body.sh .hd .sh-menu>li.is-expanded>a{color:var(--bh-link)}
  body.sh .hd .sh-menu>li.is-expanded>a::after{transform:translateY(2px) rotate(225deg)}
  body.sh .hd .sh-menu>li>.sub-menu{display:none; padding:6px 0 10px 4px}
  body.sh .hd .sh-menu>li.is-expanded>.sub-menu{display:block}
  body.sh .hd .sh-menu .sub-menu a{padding:10px 10px; border-radius:8px}
  body.sh .hd .sh-menu .sub-menu a:active{background:#f3f7fb}
}

/* =====================================================================
   v8: blog sub-bar removed; search lives in the main header
   ===================================================================== */
body.sh .hd .hd-search-btn{display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--bh-line); border-radius:50%; background:#fff; color:var(--bh-navy); cursor:pointer; transition:background .2s, color .2s, border-color .2s}
body.sh .hd .hd-search-btn:hover,
body.sh .hd .hd-search-btn[aria-expanded="true"]{background:var(--bh-navy); border-color:var(--bh-navy); color:#fff}
.hd-search[hidden]{display:none}
.hd-search{border-top:1px solid var(--bh-line); background:#fff; padding:16px var(--sh-gutter,24px)}
.hd-search__form{position:relative; display:flex; gap:10px; max-width:760px; margin:0 auto}
.hd-search__icon{position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--bh-muted); pointer-events:none}
body.sh .hd-search__form input{flex:1; min-width:0; height:48px; padding:0 18px 0 48px; border:1px solid #c9d3de; border-radius:999px; font-size:16px; color:var(--bh-ink); background:#fff}
body.sh .hd-search__form input:focus{outline:none; border-color:var(--bh-accent); box-shadow:0 0 0 3px rgba(0,144,240,.18)}
body.sh .hd-search__form .hd-btn{min-height:48px; border-radius:999px}
@media (max-width:640px){
  body.sh .hd .hd-search-btn{width:40px; height:40px}
  body.sh .hd-search__form .hd-btn{padding:0 16px}
}