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

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

  background: var(--skdp-white);
  color: var(--skdp-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 > .skdp,
.wp-block-post-content > .skdp {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

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

/* Long unbroken tokens (URLs, long RU/UA compounds) must never force
   horizontal scrolling on narrow viewports. */
.skdp p,
.skdp li,
.skdp h2,
.skdp h3,
.skdp summary,
.skdp 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. */
.skdp__cards > *,
.skdp__who > *,
.skdp__matters > *,
.skdp__two > *,
.skdp__pitfalls > *,
.skdp__related > *,
.skdp__tr > * { 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. */
.skdp__shell {
  max-width: var(--skdp-shell);
  margin: 0 auto;
  padding: 0 15px;
}

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

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

.skdp p { margin: 0 0 16px; }
.skdp__lede-p,
.skdp__intro {
  font-size: 17px;
  line-height: 1.72;
  color: var(--skdp-steel);
  max-width: 62em;
}
.skdp__lede-p:first-of-type {
  font-size: 18.5px;
  color: var(--skdp-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. */
.skdp__band {
  padding-top: 46px;
  padding-bottom: 46px;
}
.skdp__band--lede { padding-top: 52px; padding-bottom: 8px; }
.skdp__band--flush { padding-top: 0; padding-bottom: 0; }
.skdp__band--alt { background: var(--skdp-paper); }

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

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

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

/* ---------- audience ---------- */

.skdp__who {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 26px;
  margin-top: 24px;
}
.skdp__who-item {
  border-left: 3px solid var(--skdp-gold);
  padding-left: 18px;
}
.skdp__who-t {
  font-size: 17px;
  font-weight: 600;
  color: var(--skdp-navy);
  margin: 0 0 8px;
}
.skdp__who-d {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--skdp-steel);
  margin: 0;
}

/* ---------- process ---------- */

.skdp__steps {
  list-style: none;
  counter-reset: skdp-step;
  margin: 26px 0 0;
  padding: 0;
}
.skdp__step {
  counter-increment: skdp-step;
  position: relative;
  padding: 0 0 26px 60px;
  border-left: 1px solid var(--skdp-line);
  margin-left: 17px;
}
.skdp__step:last-child { border-left-color: transparent; padding-bottom: 0; }
.skdp__step::before {
  content: counter(skdp-step);
  position: absolute;
  left: -17px;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--skdp-navy);
  color: var(--skdp-gold-b);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.skdp__step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 7px;
  min-height: 34px;
}
.skdp__step-t {
  font-size: 17.5px;
  font-weight: 600;
  color: var(--skdp-navy);
  margin: 0;
}
.skdp__chip {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--skdp-steel);
  background: rgba(196, 161, 90, 0.14);
  border: 1px solid rgba(196, 161, 90, 0.4);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}
.skdp__step-d {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--skdp-steel);
  margin: 0;
  max-width: 60em;
}
.skdp__note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--skdp-muted);
  font-style: italic;
  margin: 26px 0 0;
  padding-left: 60px;
}

/* ---------- jurisdictions table ---------- */

.skdp__table {
  margin-top: 24px;
  border: 1px solid var(--skdp-line);
  border-radius: var(--skdp-radius);
  overflow: hidden;
  background: var(--skdp-white);
}
.skdp__tr {
  display: grid;
  grid-template-columns: 1.05fr 1.25fr 2.7fr;
  gap: 18px;
  padding: 15px 20px;
  border-top: 1px solid var(--skdp-line);
  align-items: start;
}
.skdp__tr:first-child { border-top: 0; }
.skdp__tr--head {
  background: var(--skdp-navy);
  color: var(--skdp-white);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skdp__td { font-size: 15px; line-height: 1.6; color: var(--skdp-steel); }
.skdp__td--j { font-weight: 600; color: var(--skdp-navy); }
.skdp__td--r { color: var(--skdp-muted); }

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

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

/* ---------- pitfalls ---------- */

.skdp__band--warn {
  background: var(--skdp-navy);
  color: var(--skdp-white);
}

/* The design system sets global typography colours on the block-theme
   content wrapper, and it sets them !important:
     body.skd-internal .entry-content h2, ... h3  -> var(--skd-ink) !important
     body.skd-internal .entry-content p,  ... li  -> #4e5c69        !important
   On every light band that is harmless (and in fact desirable — it keeps
   this block consistent with the rest of the site). On the dark navy band
   it paints navy text on navy: ~1.1:1, effectively invisible.
   An !important declaration can only be beaten by another !important one,
   so specificity tricks do not work here. These four selectors are the
   only place in this stylesheet where !important is used, and they are
   scoped to the dark band so nothing else in the theme is affected. */
.skdp__band--warn.skdp__band--warn .skdp__shell h2,
.skdp__band--warn.skdp__band--warn .skdp__shell h3 {
  color: var(--skdp-white) !important;
}
.skdp__band--warn.skdp__band--warn .skdp__shell p,
.skdp__band--warn.skdp__band--warn .skdp__shell li {
  color: rgba(255, 254, 253, 0.86) !important;
}
.skdp__pitfalls {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 16px 32px;
}
.skdp__pitfalls li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255, 254, 253, 0.86);
}
.skdp__pitfalls li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--skdp-gold-b);
  border-radius: 50%;
}
.skdp__pitfalls li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  width: 2px;
  height: 8px;
  background: var(--skdp-gold-b);
}

/* ---------- two columns: docs + cost ---------- */

.skdp__two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 44px;
}
.skdp__list { list-style: none; margin: 20px 0 0; padding: 0; }
.skdp__list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 11px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--skdp-steel);
}
.skdp__list--check li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 6px;
  height: 11px;
  border: solid var(--skdp-gold);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.skdp__list--dot li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--skdp-gold);
  border-radius: 50%;
}

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

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

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

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

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

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

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

/* Longhand padding only, so band modifiers are never reset by a shorthand. */
@media (max-width: 860px) {
  .skdp__tr { grid-template-columns: 1fr; gap: 4px; padding: 15px 17px; }
  .skdp__tr--head { display: none; }
  .skdp__td--j { font-size: 16px; }
  .skdp__td--r { font-size: 13.5px; letter-spacing: 0.02em; }
  .skdp__band { padding-top: 36px; padding-bottom: 36px; }
  .skdp__band--lede { padding-top: 40px; padding-bottom: 6px; }
  .skdp__band--flush { padding-top: 0; padding-bottom: 0; }
  .skdp__band--rule { padding-top: 0; }
  .skdp__band--rule > .skdp__shell { padding-top: 36px; }
}

@media (max-width: 560px) {
  .skdp__shell { padding-left: 18px; padding-right: 18px; }
  .skdp__step { padding-left: 46px; }
  .skdp__note { padding-left: 46px; }
  .skdp__pitfalls { grid-template-columns: 1fr; }
  .skdp__two { gap: 32px; }
  .skdp__lede-p:first-of-type { font-size: 17px; }
}