/* SK Consult — Hub Page Depth
   Uses the design-system tokens (--skd-*) with safe fallbacks so the block
   renders correctly even if the design system stylesheet loads later.

   Typography note: on internal pages skconsult-design-system sets
     body.skd-internal .entry-content h2 / h3  -> Georgia, 50px / 32px, !important
     body.skd-internal .entry-content p  / li  -> #4e5c69,             !important
   This block deliberately does NOT fight those rules. Deferring to them is what
   keeps it visually identical to the service-depth block and to the rest of the
   site. The homepage carries body.skd-homepage instead, where those !important
   rules do not apply, so the homepage context is tuned separately at the end of
   this file. */

.skhb {
  --skhb-navy: var(--skd-navy, #0c1b2b);
  --skhb-navy-2: var(--skd-navy-2, #132b42);
  --skhb-steel: var(--skd-steel, #294766);
  --skhb-gold: var(--skd-gold, #c4a15a);
  --skhb-gold-b: var(--skd-gold-bright, #d8ae58);
  --skhb-paper: var(--skd-paper, #f7f4ee);
  --skhb-white: var(--skd-white, #fffefd);
  --skhb-ink: var(--skd-ink, #10243a);
  --skhb-muted: var(--skd-muted, #64707c);
  --skhb-line: var(--skd-line, rgba(16, 36, 58, 0.15));
  --skhb-radius: var(--skd-radius, 10px);
  --skhb-shell: var(--skd-shell, 1240px);

  background: var(--skhb-white);
  color: var(--skhb-ink);
  padding: 0;
  width: 100%;
  max-width: none;
}

/* The block theme caps direct children of .entry-content at the theme
   contentSize (840px). Our bands are full-width sections that carry their
   own shell, so the cap must not apply. Higher specificity than
   `.entry-content > *`, no !important needed. */
.entry-content > .skhb,
.wp-block-post-content > .skhb {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.skhb *,
.skhb *::before,
.skhb *::after { box-sizing: border-box; }

/* Long unbroken tokens (URLs, long RU/UA compounds) must never force
   horizontal scrolling on narrow viewports. */
.skhb p,
.skhb li,
.skhb h2,
.skhb h3,
.skhb summary,
.skhb span { overflow-wrap: break-word; }

/* Grid children default to min-width:auto, which lets wide content push the
   track wider than the container. Forcing min-width:0 keeps every grid
   inside its shell. */
.skhb__cards > *,
.skhb__matters > *,
.skhb__related > * { min-width: 0; }

/* 1240px + 15px side padding reproduces the Kubio section gutter exactly,
   so headings in this block line up with the existing sections above and
   below it instead of sitting a few pixels inboard. */
.skhb__shell {
  max-width: var(--skhb-shell);
  margin: 0 auto;
  padding: 0 15px;
}

/* ---------- typography ---------- */

.skhb__h2 {
  font-size: clamp(23px, 2.4vw, 31px);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--skhb-navy);
  margin: 0 0 18px;
  padding-bottom: 14px;
  position: relative;
}
.skhb__h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 3px;
  background: var(--skhb-gold);
  border-radius: 2px;
}
.skhb__h2--sm { font-size: clamp(20px, 1.8vw, 24px); }
.skhb__h2--lede { font-size: clamp(25px, 2.8vw, 35px); }

.skhb p { margin: 0 0 16px; }
.skhb__lede-p,
.skhb__intro {
  font-size: 17px;
  line-height: 1.72;
  color: var(--skhb-steel);
  max-width: 62em;
}
.skhb__lede-p:first-of-type {
  font-size: 18.5px;
  color: var(--skhb-ink);
}

/* Bands are full-width siblings, each with its own inner shell. No negative
   margins and no viewport units, so a tinted band can never escape the
   viewport or be broken by a shorthand `padding` override further down. */
.skhb__band {
  padding-top: 46px;
  padding-bottom: 46px;
}
.skhb__band--lede { padding-top: 52px; padding-bottom: 8px; }
.skhb__band--flush { padding-top: 0; padding-bottom: 0; }
.skhb__band--alt { background: var(--skhb-paper); }

/* Hairline only where two untinted bands meet; aligned to the content column. */
.skhb__band--rule { padding-top: 0; }
.skhb__band--rule > .skhb__shell {
  border-top: 1px solid var(--skhb-line);
  padding-top: 46px;
}

/* ---------- scope cards ---------- */

.skhb__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr));
  gap: 18px;
  margin-top: 26px;
}
.skhb__card {
  position: relative;
  background: var(--skhb-white);
  border: 1px solid var(--skhb-line);
  border-radius: var(--skhb-radius);
  padding: 24px 22px 20px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.skhb__card:hover {
  border-color: rgba(196, 161, 90, 0.55);
  box-shadow: 0 10px 28px rgba(12, 27, 43, 0.08);
  transform: translateY(-2px);
}
.skhb__num {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--skhb-gold);
  margin-bottom: 10px;
}
.skhb__card-t {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--skhb-navy);
  margin: 0 0 9px;
}
.skhb__card-d {
  font-size: 15px;
  line-height: 1.62;
  color: var(--skhb-muted);
  margin: 0;
}

/* ---------- removed in 0.1.2 ----------
   The rules for .skhb__who*, .skhb__steps / .skhb__step*, .skhb__chip,
   .skhb__note, the jurisdictions table, the dark .skhb__band--warn band,
   .skhb__pitfalls, .skhb__two and .skhb__list--dot were inherited from the
   service-page stylesheet this file was derived from. The hub renderer emits
   none of those classes, so they were dead weight on every hub page.
   If a future hub band ever needs a table, a process ladder or a dark
   warning band, copy the rule back from
   skconsult-service-depth/assets/service-depth.css instead of keeping an
   unused block here.
   -------------------------------------- */

/* ---------- what matters ---------- */

.skhb__matters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 22px 34px;
  margin-top: 24px;
}
.skhb__matter-t {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--skhb-navy);
  margin: 0 0 7px;
  padding-left: 20px;
  position: relative;
}
.skhb__matter-t::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  background: var(--skhb-gold);
  transform: rotate(45deg);
}
.skhb__matter-d {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--skhb-steel);
  margin: 0;
  padding-left: 20px;
}

/* ---------- checklist ---------- */

.skhb__list { list-style: none; margin: 20px 0 0; padding: 0; }
.skhb__list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 11px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--skhb-steel);
}
.skhb__list--check li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 6px;
  height: 11px;
  border: solid var(--skhb-gold);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* ---------- FAQ ---------- */

.skhb__faq { margin-top: 24px; }
.skhb__qa {
  border: 1px solid var(--skhb-line);
  border-radius: var(--skhb-radius);
  background: var(--skhb-white);
  margin-bottom: 12px;
  overflow: hidden;
}
.skhb__q {
  cursor: pointer;
  list-style: none;
  padding: 17px 52px 17px 20px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--skhb-navy);
  position: relative;
  line-height: 1.45;
}
.skhb__q::-webkit-details-marker { display: none; }
.skhb__q::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 24px;
  width: 9px;
  height: 9px;
  border: solid var(--skhb-gold);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.skhb__qa[open] .skhb__q::after { transform: rotate(-135deg); top: 27px; }
.skhb__a {
  padding: 0 20px 18px;
  border-top: 1px solid var(--skhb-line);
  padding-top: 15px;
}
.skhb__a p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--skhb-steel);
}

/* ---------- related ---------- */

.skhb__related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 14px;
  margin-top: 20px;
}
.skhb__rel {
  display: block;
  border: 1px solid var(--skhb-line);
  border-radius: var(--skhb-radius);
  padding: 17px 19px;
  text-decoration: none;
  /* Without this the anchor keeps the UA default link blue. Every visible
     string sits in .skhb__rel-t / .skhb__rel-d, so nothing renders blue
     today, but an unwrapped label would. Set it so it can never regress. */
  color: var(--skhb-navy);
  background: var(--skhb-white);
  transition: border-color .2s ease, background .2s ease;
}
.skhb__rel:hover { border-color: var(--skhb-gold); background: var(--skhb-paper); }
.skhb__rel:hover .skhb__rel-t { color: var(--skhb-steel); }
.skhb__rel-t {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--skhb-navy);
  margin-bottom: 4px;
}
.skhb__rel-d {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--skhb-muted);
}

/* ---------- disclaimer ---------- */

.skhb__disclaimer {
  font-size: 13px;
  line-height: 1.6;
  color: var(--skhb-muted);
  border-top: 1px solid var(--skhb-line);
  padding: 20px 0 42px;
  margin: 0;
}

/* ---------- responsive ---------- */

/* Longhand padding only, so band modifiers are never reset by a shorthand. */
@media (max-width: 860px) {
  .skhb__band { padding-top: 36px; padding-bottom: 36px; }
  .skhb__band--lede { padding-top: 40px; padding-bottom: 6px; }
  .skhb__band--flush { padding-top: 0; padding-bottom: 0; }
  .skhb__band--rule { padding-top: 0; }
  .skhb__band--rule > .skhb__shell { padding-top: 36px; }
}

@media (max-width: 560px) {
  .skhb__shell { padding-left: 18px; padding-right: 18px; }
  .skhb__lede-p:first-of-type { font-size: 17px; }
}

/* ---------- facts strip ---------- */

/* A single hairline grid: the 1px gap plus the 1px outer border are painted by
   the container background, so cell dividers stay exactly 1px on every zoom
   level and never double up. minmax(min(...,100%),1fr) stops a long RU/UA
   label from widening a track beyond the shell. */
.skhb__band--facts { padding-top: 30px; padding-bottom: 30px; }
.skhb__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 1px;
  margin-top: 4px;
  background: var(--skhb-line);
  border: 1px solid var(--skhb-line);
  border-radius: var(--skhb-radius);
  overflow: hidden;
}
.skhb__fact {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  padding: 24px 22px;
  background: var(--skhb-white);
}
.skhb__fact-n {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 2.5vw, 34px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--skhb-navy);
}
.skhb__fact-t {
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--skhb-muted);
}

/* ---------- homepage context ----------

   On the three homepages the block is spliced inside <main class="skd-home">,
   immediately before the closing <section class="skd-final"> CTA band. That
   container is not the block-theme content wrapper, so the width reset above
   (.entry-content > .skhb) does not reach it, and body.skd-homepage means the
   design system's !important internal-page typography does not apply either.
   Both are re-established here so the homepage block matches its surroundings:
   Georgia headings at the homepage scale, on the homepage paper background. */

.skd-home > .skhb,
.skd-home .skhb {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  background: var(--skhb-paper);
}
.skd-home .skhb__band--alt { background: var(--skhb-white); }
.skd-home .skhb__h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(30px, 3.3vw, 43px);
  letter-spacing: -0.025em;
}
.skd-home .skhb__h2--lede { font-size: clamp(32px, 3.6vw, 46px); }
.skd-home .skhb__h2--sm { font-size: clamp(26px, 2.6vw, 34px); }
.skd-home .skhb__card-t,
.skd-home .skhb__matter-t {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 24px);
  letter-spacing: -0.02em;
}
.skd-home .skhb__q {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* ---------- narrow viewports ---------- */

@media (max-width: 560px) {
  .skhb__fact { padding: 19px 18px; }
  .skhb__band--facts { padding-top: 22px; padding-bottom: 22px; }
}

/* ---------- inline links inside the hub block ---------- */
/* The hub copy carries inline links in lede paragraphs, pillar/detail
   descriptions, list items, FAQ answers and the disclaimer. Without an
   explicit rule these inherit the browser default (#0000EE + default
   underline), which reads as unstyled next to the design system. The
   selector excludes .skhb__rel, which is a card and is styled above. */

.skhb a:not(.skhb__rel) {
  color: var(--skhb-steel, #294766);
  text-decoration: underline;
  text-decoration-color: rgba(196, 161, 90, 0.75);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
  font-weight: 500;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.skhb a:not(.skhb__rel):visited {
  color: var(--skhb-steel, #294766);
}

.skhb a:not(.skhb__rel):hover,
.skhb a:not(.skhb__rel):focus-visible {
  color: var(--skhb-gold, #c4a15a);
  text-decoration-color: var(--skhb-gold, #c4a15a);
}

.skhb a:not(.skhb__rel):focus-visible {
  outline: 2px solid var(--skhb-gold, #c4a15a);
  outline-offset: 2px;
  border-radius: 2px;
}

/* disclaimer sits on muted type — keep the link readable but quiet */
.skhb__disclaimer a {
  color: var(--skhb-steel, #294766);
  text-decoration-color: rgba(41, 71, 102, 0.4);
  font-weight: 500;
}

.skhb__disclaimer a:hover,
.skhb__disclaimer a:focus-visible {
  color: var(--skhb-gold, #c4a15a);
  text-decoration-color: var(--skhb-gold, #c4a15a);
}

/* ---------------------------------------------------------------------
   Site-wide correction 3 — contact strip at very narrow viewports

   The Kubio contact section (#custom-sections / #custom-sections-1, present
   on every page) renders phone, e-mail and address as
   li.wp-block-kubio-iconlistitem inside a flex ul. The items carry no
   min-width:0, so they refuse to shrink below their intrinsic 248px. Their
   column starts 61px from the left edge, so from 248 + 61 = 309px the items
   reach past the viewport whenever the document is narrower than ~309px.

   Measured on /about/ in a 320px frame (clientWidth 305): twelve elements
   with right edge 309 — the last 4px of the phone number, the e-mail and the
   street address were being clipped by the html,body{overflow-x:hidden} rule
   above. There was no horizontal scrolling (scrollWidth === clientWidth),
   so the symptom was silently cut text rather than a shifted page.

   Scoped to max-width:344px, which is the widest viewport where the clipping
   can occur. Verified: at 320px the twelve out-of-bounds elements drop to
   zero; at 360px and 390px the rendered geometry is byte-for-byte identical
   to before, so ordinary phones are untouched.
   --------------------------------------------------------------------- */

@media (max-width: 344px) {
  #custom-sections .wp-block-kubio-iconlist,
  #custom-sections-1 .wp-block-kubio-iconlist { flex-wrap: wrap; }

  #custom-sections .wp-block-kubio-iconlistitem,
  #custom-sections-1 .wp-block-kubio-iconlistitem { max-width: 100%; min-width: 0; }

  #custom-sections .wp-block-kubio-iconlistitem__text-wrapper,
  #custom-sections-1 .wp-block-kubio-iconlistitem__text-wrapper { min-width: 0; }

  #custom-sections .wp-block-kubio-iconlistitem__text,
  #custom-sections-1 .wp-block-kubio-iconlistitem__text { overflow-wrap: anywhere; }
}