/* ════════════════════════════════════════════════════════════════════════
   isp6 KB, alignment overlay
   ────────────────────────────────────────────────────────────────────────
   Additive layer on top of kb/docs/css/extra.css. References the brand
   tokens already declared there (--isp6-dark-blue, --isp6-orange, etc.)
   plus the Material variables. Safe to load after extra.css; nothing here
   redeclares existing tokens.

   Roughly what it adds:
     · navy-dyed header in both light and slate schemes
     · orange "Sign up" CTA styling (paired with overrides/partials/header.html)
     · breadcrumb strip showing Section → Article in mono caps
     · .toc-card: in-article table of contents in a bordered card
     · .mermaid container surface treatment
     · Multi-column footer reskin in navy with mono section heads
   ════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════
   Header, dye navy in both schemes
   ══════════════════════════════════════════ */

[data-md-color-scheme="default"] {
  /* Override the light-mode header colours so the header is navy with
     white text, matching the main isp6 marketing template. */
  --md-primary-fg-color:        var(--isp6-dark-blue-deep);
  --md-primary-fg-color--light: var(--isp6-dark-blue);
  --md-primary-fg-color--dark:  #081a30;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: #eaeaea;
}

.md-header {
  background: var(--isp6-dark-blue-deep) !important;
  color: #ffffff !important;
  border-bottom: 3px solid var(--isp6-dark-blue) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
              0 4px 16px -8px rgba(0, 0, 0, 0.35);
}

[data-md-color-scheme="slate"] .md-header {
  background: #060f22 !important;
  border-bottom-color: var(--isp6-baby-blue) !important;
}

.md-header__title,
.md-header__topic,
.md-header__inner,
.md-header__button,
.md-search__input {
  color: #ffffff;
}

.md-header__title {
  font-family: 'Roboto Slab', serif;
  letter-spacing: -0.01em;
}

/* ──────────────────────────────────────────
   Header search, near-white pill with leading
   magnifier glyph and a "/" keyboard-hint badge.
   Zensical renders search as a single
   <button class="md-search__button"> that opens
   a modal; there is no inline input. We hide
   the standalone search-icon label and restyle
   the button as the pill from the mockup.
   ────────────────────────────────────────── */

/* Hide the duplicate standalone magnifier <label>; its icon now lives
   inside the pill itself, rendered via ::before on the button. */
.md-header__button.md-icon[for="__search"] {
  display: none !important;
}

.md-search {
  flex: 0 0 14rem;
  min-width: 0;
  margin-left: auto;
  margin-right: 0.75rem;
}

.md-search__button {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  width: 100%;
  height: 2.25rem;
  padding: 0 2rem 0 2.1rem;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-family: 'Roboto Slab', serif;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  color: transparent !important;
  cursor: text;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04) inset;
  transition: background 150ms var(--isp6-ease),
              box-shadow 150ms var(--isp6-ease);
}

/* Magnifier glyph, inlined SVG via background-image (lucide-search). */
.md-search__button::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%230f2d52' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='m21 21-4.34-4.34'/><circle cx='11' cy='11' r='8'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.85;
}

/* Replace the i18n "Search" text with our placeholder while keeping
   the button accessible (its real text is screen-reader-only). */
.md-search__button::after {
  content: "Search the docs";
  position: absolute;
  left: 2.1rem;
  right: 2.7rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Roboto Slab', serif;
  font-size: 0.85rem;
  color: var(--isp6-accessible-muted);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "/" keyboard hint badge, separate element via a wrapper sibling. */
.md-search::after {
  content: "/";
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Roboto Mono', monospace;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--isp6-border);
  border-radius: 5px;
  color: var(--isp6-accessible-muted);
  background: var(--isp6-surface);
  pointer-events: none;
}
.md-search { position: relative; }

.md-search__button:hover {
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(247, 148, 29, 0.18);
}
.md-search__button:focus,
.md-search__button:focus-visible {
  outline: none;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(247, 148, 29, 0.35);
}

/* Slate scheme, keep the pill near-white for legibility against navy. */
[data-md-color-scheme="slate"] .md-search__button {
  background: rgba(255, 255, 255, 0.92) !important;
}

@media (max-width: 600px) {
  /* On mobile, drop the placeholder text and slash badge, just show
     the icon-only pill so the burger + CTA still fit. */
  .md-search { flex: 0 0 2.5rem; min-width: 0; margin: 0 0.5rem; }
  .md-search__button { padding: 0; width: 2.5rem; }
  .md-search__button::after,
  .md-search::after { display: none; }
  .md-search__button::before { left: 50%; transform: translate(-50%, -50%); }
}

/* ══════════════════════════════════════════
   Header, orange "Sign up" CTA
   ──────────────────────────────────────────
   Injected by overrides/partials/header.html. Styled here so the
   partial stays minimal. The element is <a class="md-header__cta">.
   ══════════════════════════════════════════ */

.md-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.25rem;
  padding: 0 1rem;
  margin: 0 0.75rem 0 0.5rem;
  background: var(--isp6-orange);
  color: var(--isp6-dark-blue-deep) !important;
  border-radius: 8px;
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 150ms var(--isp6-ease),
              transform 150ms var(--isp6-ease);
}

.md-header__cta:hover {
  background: #ffa83e;
  color: var(--isp6-dark-blue-deep) !important;
  transform: translateY(-1px);
}

.md-header__cta svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

@media (max-width: 600px) {
  /* Drop the CTA off the mobile header to keep the burger + search visible. */
  .md-header__cta { display: none; }
}


/* ══════════════════════════════════════════
   Breadcrumb strip
   ──────────────────────────────────────────
   Zensical renders the page path as <nav class="md-path"> inside the
   content column. Promote it visually to a section/article breadcrumb
   row in mono caps with an orange active underline.
   ══════════════════════════════════════════ */

.md-path {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--isp6-accessible-muted);
  margin: -0.5rem 0 1.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--isp6-border);
  overflow-x: auto;
  white-space: nowrap;
}

.md-path__item .md-path__link {
  color: var(--isp6-accessible-muted);
  text-decoration: none;
  padding: 0.25rem 0;
}
.md-path__item .md-path__link:hover {
  color: var(--isp6-dark-blue);
}
.md-path__item:last-child .md-path__link,
.md-path__item[aria-current] .md-path__link {
  color: var(--isp6-dark-blue);
  border-bottom: 2px solid var(--isp6-orange);
  padding-bottom: 0.55rem;
}

[data-md-color-scheme="slate"] .md-path {
  border-bottom-color: var(--isp6-dark-blue-tint1);
}
[data-md-color-scheme="slate"] .md-path__item:last-child .md-path__link {
  color: var(--isp6-baby-blue);
}


/* ══════════════════════════════════════════
   .toc-card, in-article table of contents
   ──────────────────────────────────────────
   Usage in markdown:

     <aside class="toc-card">
       <div class="toc-card__head">Table of contents</div>
       <ol>
         <li><a href="#1-introduction">Introduction</a></li>
         <li><a href="#2-why-ipv6-exists">Why IPv6 exists</a></li>
         ...
       </ol>
     </aside>
   ══════════════════════════════════════════ */

.md-typeset .toc-card {
  background: var(--isp6-surface);
  border: 1px solid var(--isp6-border);
  border-radius: var(--isp6-radius-lg);
  box-shadow: var(--isp6-shadow-sm);
  padding: 1.1rem 1.4rem;
  margin: 1.5rem 0 2rem;
  counter-reset: tocn;
}

.md-typeset .toc-card__head {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--isp6-accessible-muted);
  margin-bottom: 0.6rem;
}

.md-typeset .toc-card ol {
  columns: 2;
  column-gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.md-typeset .toc-card li {
  break-inside: avoid;
  padding: 0.2rem 0;
  counter-increment: tocn;
}

.md-typeset .toc-card li::before {
  content: counter(tocn, decimal-leading-zero) " · ";
  font-family: 'Roboto Mono', monospace;
  color: var(--isp6-orange);
  font-size: 0.82em;
  font-weight: 500;
}

.md-typeset .toc-card a {
  color: var(--isp6-dark-grey);
  text-decoration: none;
}
.md-typeset .toc-card a:hover {
  color: var(--isp6-dark-blue);
  text-decoration: underline;
}

[data-md-color-scheme="slate"] .md-typeset .toc-card a {
  color: var(--isp6-dark-grey-tint2);
}
[data-md-color-scheme="slate"] .md-typeset .toc-card a:hover {
  color: var(--isp6-baby-blue);
}

@media (max-width: 600px) {
  .md-typeset .toc-card ol { columns: 1; }
}


/* ══════════════════════════════════════════
   Mermaid diagrams, container surface
   ──────────────────────────────────────────
   Wrap every Mermaid render in the standard isp6 surface card so
   diagrams feel like first-class brand artefacts.
   ══════════════════════════════════════════ */

.md-typeset .mermaid {
  background: var(--isp6-surface);
  border: 1px solid var(--isp6-border);
  border-radius: var(--isp6-radius-lg);
  box-shadow: var(--isp6-shadow-sm);
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.md-typeset .mermaid + p em:only-child,
.md-typeset .mermaid-caption {
  display: block;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--isp6-accessible-muted);
  text-align: center;
  margin-top: 0.6rem;
  font-style: normal;
}

[data-md-color-scheme="slate"] .md-typeset .mermaid {
  background: rgba(255, 255, 255, 0.04);
}


/* ══════════════════════════════════════════
   Footer, multi-column reskin
   ──────────────────────────────────────────
   Replace Material's slim footer with a four-column navy block
   that echoes the main isp6 marketing template footer. The
   Material footer markup remains intact below this block; we
   inject the columns via ::before isn't an option (no content),
   so the recommended pattern is to add a custom <footer> via
   overrides/partials/footer.html. The styles below also work
   if you wrap your own footer markup with class `.isp6-footer`.

   Minimum markup (paste into overrides/partials/footer.html):

     <footer class="md-footer isp6-footer">
       <div class="isp6-footer__cols">
         <div class="isp6-footer__brand">
           <img src="/assets/logo-wide-dark.png" alt="isp6">
           <p>RIPE NCC accredited Local Internet Registry. ...</p>
         </div>
         <div>
           <h4>Knowledge base</h4>
           <ul>
             <li><a href="/ipv6-introduction/">IPv6 Fundamentals</a></li>
             ...
           </ul>
         </div>
         <div>
           <h4>Platform</h4>
           <ul>...</ul>
         </div>
         <div>
           <h4>Company</h4>
           <ul>...</ul>
         </div>
       </div>
       <div class="isp6-footer__legal">
         <span>© 2026 isp6 · RIPE NCC member</span>
         <span><a href="/cookies/">Cookie policy</a></span>
       </div>
     </footer>
   ══════════════════════════════════════════ */

.isp6-footer {
  background: var(--isp6-dark-blue-deep);
  color: rgba(255, 255, 255, 0.78);
  border-top: 3px solid var(--isp6-orange);
  padding: 0;
}

.isp6-footer__cols {
  max-width: 1240px;
  margin: 0 auto;
  padding: 2.25rem 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2rem;
}

.isp6-footer h4 {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 0.8rem;
}

.isp6-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Roboto Slab', serif;
  font-size: 0.9rem;
}

.isp6-footer li { padding: 0.2rem 0; }

.isp6-footer a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}
.isp6-footer a:hover { color: var(--isp6-orange); }

.isp6-footer__brand img {
  height: 2rem;
  width: auto;
  margin-bottom: 0.5rem;
}

.isp6-footer__brand p {
  font-family: 'Roboto Slab', serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 32ch;
}

.isp6-footer__social {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* colour + hover inherited from `.isp6-footer a` (white → orange) */
}

.isp6-footer__social + .isp6-footer__social {
  margin-top: 0.6rem;
}

.isp6-footer__social-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}

.isp6-footer__social:focus-visible {
  outline: 2px solid var(--isp6-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.isp6-footer__legal {
  max-width: 1240px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'Roboto Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.isp6-footer__legal-links a + a::before {
  content: " · ";
  color: rgba(255, 255, 255, 0.35);
  margin: 0 0.35rem;
}

@media (max-width: 720px) {
  .isp6-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}
@media (max-width: 480px) {
  .isp6-footer__cols { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════
   Article body, small adjustments
   ──────────────────────────────────────────
   The existing extra.css already styles h1/h2/h3, blockquotes,
   tables, code blocks, and hr correctly. These rules add only
   the missing touches needed to mirror the marketing template.
   ══════════════════════════════════════════ */

/* Tighten the article's first heading so the eyebrow + h1 read
   as a single brand moment instead of two stacked blocks. */
.md-typeset .eyebrow + h1 {
  margin-top: 0.4rem;
}

/* Material wraps in-article code blocks in a .highlight container.
   Ensure the navy + sky-blue tabbed treatment from the marketing
   template carries through without fighting the existing rules. */
.md-typeset .highlight pre > code {
  background: #0f1a2b;
  color: #e2e8f0;
}
.md-typeset .highlight .filename,
.md-typeset .highlight summary {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--isp6-accessible-muted);
}

/* Cap content column to 70ch readable measure on very wide screens. */
@media (min-width: 1400px) {
  .md-content__inner {
    max-width: 76ch;
  }
}


/* ══════════════════════════════════════════
   Right TOC: "On this page" panel
   ──────────────────────────────────────────
   Material renders the per-page TOC inside
   <nav class="md-nav md-nav--secondary">. Style
   it as a mono-cap "On this page" rail with
   numbered items; the active item gets a
   bold-blue label and an orange left bar.
   ══════════════════════════════════════════ */

.md-sidebar--secondary {
  padding-top: 1.5rem;
}

.md-nav--secondary > .md-nav__title {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--isp6-accessible-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0.2rem;
  margin-bottom: 0.4rem;
}

.md-nav--secondary .md-nav__list {
  counter-reset: tocsec;
  border-left: 1px solid var(--isp6-border);
  padding-left: 0;
  margin-left: 0.2rem;
}

.md-nav--secondary .md-nav__item {
  counter-increment: tocsec;
  position: relative;
  padding: 0;
  margin: 0;
}

.md-nav--secondary .md-nav__link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0.6rem 0.35rem 0.9rem;
  margin: 0;
  font-size: 0.86rem;
  color: var(--isp6-accessible-muted);
  border-left: 2px solid transparent;
  border-radius: 0;
  transition: color 120ms var(--isp6-ease),
              border-color 120ms var(--isp6-ease);
}

.md-nav--secondary .md-nav__link::before {
  content: counter(tocsec) ".";
  font-family: 'Roboto Mono', monospace;
  font-size: 0.78em;
  color: var(--isp6-accessible-muted);
  min-width: 1.3em;
}

.md-nav--secondary .md-nav__link:hover {
  color: var(--isp6-dark-blue);
}

.md-nav--secondary .md-nav__link--active,
.md-nav--secondary .md-nav__link--passed,
.md-nav--secondary .md-nav__link[aria-current="true"] {
  color: var(--isp6-dark-blue) !important;
  font-weight: 700;
  margin-left: -1px;
  border-left: 2px solid var(--isp6-orange);
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link[aria-current="true"] {
  color: var(--isp6-baby-blue) !important;
}

/* Hide nested third-level entries (h3+), the mockup shows only
   top-level section numbers. */
.md-nav--secondary .md-nav .md-nav { display: none; }


/* ══════════════════════════════════════════
   Article body, bring the H1 + audience
   blockquote in line with the mockup.
   ══════════════════════════════════════════ */

/* Subtler H1 underline, baby-blue thin line, no thick bar. */
.md-typeset h1 {
  border-bottom: 1px solid var(--isp6-baby-blue-tint1);
  padding-bottom: 0.35em;
  font-weight: 600;
  letter-spacing: -0.01em;
}

[data-md-color-scheme="slate"] .md-typeset h1 {
  border-bottom-color: var(--isp6-dark-blue-tint1);
}

/* Audience blockquote, soft surface card with a navy left rule.
   Articles open with a > **Audience:** ... > **Last updated:** ...
   blockquote; lift it visually above the article body. */
.md-typeset blockquote {
  background: var(--isp6-surface-2);
  border-left: 4px solid var(--isp6-dark-blue);
  border-radius: 0 var(--isp6-radius) var(--isp6-radius) 0;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0 1.75rem;
  color: var(--isp6-dark-grey);
  font-size: 0.95rem;
}

.md-typeset blockquote strong {
  color: var(--isp6-dark-blue);
  font-weight: 700;
}

[data-md-color-scheme="slate"] .md-typeset blockquote strong {
  color: var(--isp6-baby-blue);
}

/* Brand HR, soften the existing tri-colour gradient rule by half so
   it reads as a divider, not a graphic element. */
.md-typeset hr {
  opacity: 0.35;
}


/* ══════════════════════════════════════════
   Breadcrumb strip, left/right padding inside
   the content column so it reads as a strip
   above the article, not against the gutter.
   ══════════════════════════════════════════ */

.md-path {
  padding-left: 0;
  padding-right: 0;
  margin-top: -1rem;
  margin-bottom: 2rem;
}

.md-path__list {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.md-path__item {
  display: inline-flex;
  align-items: center;
}

.md-path__item + .md-path__item::before {
  content: "/";
  font-family: 'Roboto Mono', monospace;
  color: var(--isp6-accessible-muted);
  margin-right: 0.6rem;
  opacity: 0.6;
}