/* =====================================================================
   YABAAA · DOG BREED PAGES · styles_breed_1.css
   Stylesheet for dog-breed article pages only. Every other page type
   keeps using styles_local_1.css.

   Mobile-first. Breakpoints:
     21.25rem (340px)  smallest phones: Fast Facts go to one column
     40rem    (640px)  large phones / small tablets
     48rem    (768px)  hero grid switches to 4 columns (image + facts)
     50rem    (800px)  main nav: hamburger -> full menu
     56.25rem (900px)  image + text sections sit side by side
     64rem    (1024px) two-column article header, wider gutters

   IMPORTANT: the hero <img sizes="..."> attribute in the HTML template
   mirrors the .hero-facts geometry below (gutters, gaps, 1200px max).
   If you change --page-max, --gutter or --gap, update that attribute.

   Contents
     1. Fonts
     2. Design tokens
     3. Base
     4. Utilities
     5. Site navigation
     6. Breadcrumb + reading-time badge
     7. Article header (H1, hero description, jump links, snippet)
     8. Hero grid: image + 10 Fast Facts
     9. Table of contents
    10. Article body
    11. Side media carousel
    12. FAQ
    13. Footer
    14. Script-generated UI (progress bar, floating ToC, lightbox)
    15. Reduced motion + print
   ===================================================================== */


/* =====================================================================
   1. FONTS
   Three files only: Playfair Display 700 for headings, Source Sans 3
   400/600 for everything else. The metric-matched fallbacks keep text
   from reflowing (CLS) when the web fonts swap in.
   ===================================================================== */

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/playfair-display-v40-cyrillic_latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+2190-2199;
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/source-sans-3-v19-cyrillic_latin-regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+2190-2199;
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/source-sans-3-v19-cyrillic_latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+2190-2199;
}

@font-face {
    font-family: 'Playfair Display Fallback';
    src: local('Georgia'), local('Times New Roman');
    size-adjust: 97%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Source Sans 3 Fallback';
    src: local('Arial'), local('Helvetica Neue');
    size-adjust: 94%;
    ascent-override: 104%;
    descent-override: 27%;
    line-gap-override: 0%;
}


/* =====================================================================
   2. DESIGN TOKENS
   ===================================================================== */

:root {
    --c-ink: #1F2937;
    --c-ink-soft: #374151;
    --c-muted: #4B5563;
    --c-navy: #1A3A52;
    --c-blue: #2C5F8D;
    --c-blue-light: #7BA7D1;
    --c-blue-soft: #B8CFE6;
    --c-tint: #F3F7FB;
    --c-green: #2A6B47;
    --c-green-soft: #D6EFE0;
    --c-line: #E5E7EB;
    --c-bg: #FAFAFA;
    --c-surface: #FFFFFF;
    --c-focus: #E8A33D;

    --font-head: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif;
    --font-body: 'Source Sans 3', 'Source Sans 3 Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    --page-max: 75rem;   /* 1200px content width */
    --measure: 46rem;    /* comfortable reading column */
    --gutter: 1rem;      /* side padding, grows with the screen */
    --gap: 0.75rem;      /* gap between hero grid cells */
    --nav-h: 50px;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 4px 14px rgba(26, 58, 82, 0.10);
}

@media (min-width: 40rem) {
    :root { --gutter: 1.5rem; }
}

@media (min-width: 64rem) {
    :root {
        --gutter: 2rem;
        --gap: 1rem;
    }
}


/* =====================================================================
   3. BASE
   ===================================================================== */

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

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Anchor jumps land below the sticky nav */
    scroll-padding-top: calc(var(--nav-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--c-ink);
    background: var(--c-bg);
    overflow-x: clip;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

h1,
h2,
h3 {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--c-navy);
    line-height: 1.2;
    text-wrap: balance;
}

h2 {
    font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem);
}

h3 {
    font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.45rem);
}

p,
li,
dd {
    text-wrap: pretty;
}

ul,
ol {
    padding-left: 1.25rem;
}

strong {
    font-weight: 600;
}

a {
    color: var(--c-blue);
    text-decoration-thickness: from-font;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--c-navy);
}

:focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
}


/* =====================================================================
   4. UTILITIES
   ===================================================================== */

.wrap {
    width: min(100% - 2 * var(--gutter), var(--page-max));
    margin-inline: auto;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 0.5rem;
    z-index: 10002;
    padding: 0.75rem 1.25rem;
    background: var(--c-navy);
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
}

.skip-link:focus {
    top: 0;
    color: #FFFFFF;
}


/* =====================================================================
   5. SITE NAVIGATION
   Scoped to .site-nav so the breadcrumb, jump links and ToC (also
   <nav> elements) are not affected. Markup and class names match what
   universal_1.js expects (showSidebar / hideSidebar, .sidebar).
   ===================================================================== */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 10000;
    background: var(--c-blue);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.site-nav li {
    height: var(--nav-h);
}

.site-nav a,
.site-nav button {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.site-nav a:hover,
.site-nav button:hover {
    background-color: var(--c-navy);
    color: #FFFFFF;
}

.site-nav svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.site-nav__bar > li:first-child {
    margin-right: auto;
}

.back-arrow a {
    padding: 0 1rem;
}

.menu-button {
    display: none;
}

@media (max-width: 49.99rem) {
    .hideOnMobile { display: none; }
    .menu-button { display: block; }
}

/* Mobile slide-in menu (opened by showSidebar() in universal_1.js) */
.site-nav .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: min(280px, 100%);
    height: 100vh;
    height: 100dvh;
    z-index: 999;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: rgba(26, 58, 82, 0.97);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.25);
}

.site-nav .sidebar li {
    width: 100%;
    height: auto;
}

.site-nav .sidebar a {
    height: 56px;
    padding: 0 1.5rem;
}

.site-nav .sidebar a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.site-nav .sidebar button {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    margin: 8px 8px 8px auto;
    border-radius: 6px;
}


/* =====================================================================
   6. BREADCRUMB + READING-TIME BADGE
   The breadcrumb always stays on one line (a long breed name is
   truncated with "..."), so its height is predictable. min-height
   reserves room for the reading-time badge that universal_1.js adds
   inside it, so the page does not jump when the badge appears.
   ===================================================================== */

.breadcrumb {
    min-height: 84px;
    padding: 0.5rem var(--gutter);
    background: #F3F4F6;
    border-bottom: 1px solid var(--c-line);
    font-size: 0.9rem;
    line-height: 1.5;
}

.breadcrumb ol {
    list-style: none;
    padding: 0;
    max-width: var(--page-max);
    margin-inline: auto;
    display: flex;
    align-items: center;
    min-width: 0;
}

.breadcrumb li {
    flex: none;
    white-space: nowrap;
    color: var(--c-muted);
}

.breadcrumb li + li::before {
    content: "›";
    margin-inline: 0.5rem;
    color: #9CA3AF;
}

.breadcrumb li:last-child {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reading-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.4rem 0 0.1rem;
    padding: 0.25rem 0.75rem;
    background: var(--c-surface);
    color: var(--c-navy);
    border: 1px solid var(--c-blue-soft);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
}

.reading-time-badge svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* Lines the badge up with the page content on wide screens */
.breadcrumb .reading-time-badge {
    margin-left: max(0px, (100% - var(--page-max)) / 2);
}


/* =====================================================================
   7. ARTICLE HEADER
   Source order = reading order on every screen:
   eyebrow -> H1 -> hero description -> jump links -> snippet -> byline.
   Desktop (64rem+): two columns, snippet box on the right, so the hero
   image starts higher on the screen.
   ===================================================================== */

.article-head {
    display: grid;
    gap: 0.9rem;
    padding-block: 1rem 1.25rem;
}

.article-head__main,
.article-head__aside {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    min-width: 0;
}

.article-head__eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-blue);
}

.article-head h1 {
    font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
    line-height: 1.12;
}

/* Hero description */
.article-head__dek {
    font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);
    line-height: 1.5;
    color: var(--c-ink-soft);
    padding-left: 0.85rem;
    border-left: 3px solid var(--c-blue-soft);
}

/* Featured-snippet answer */
.article-head__answer {
    padding: 0.85rem 1rem;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
    background: var(--c-tint);
    border: 1px solid var(--c-blue-soft);
    border-left: 4px solid var(--c-blue);
    border-radius: var(--radius-sm);
    line-height: 1.65;
}

.article-head__answer strong {
    color: var(--c-navy);
}

.article-head__byline {
    font-size: 0.9rem;
    color: var(--c-muted);
}

.article-head__byline time {
    white-space: nowrap;
}

/* 3 jump links to the most important sections */
.jump ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.jump a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.5rem;
    padding: 0.3rem 0.85rem;
    background: var(--c-surface);
    border: 1px solid var(--c-blue-soft);
    border-radius: 999px;
    color: var(--c-blue);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

@media (min-width: 40rem) {
    .jump a {
        min-height: 2.75rem;
        padding-inline: 1rem;
        font-size: 0.95rem;
    }
}

.jump a::after {
    content: "↓" / "";
}

.jump a:hover {
    background: var(--c-tint);
    border-color: var(--c-blue);
    color: var(--c-navy);
}

@media (min-width: 64rem) {
    .article-head {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        column-gap: 3rem;
        align-items: start;
        padding-block: 2rem 1.75rem;
    }

    .article-head__main {
        padding-top: 0.25rem;
    }
}


/* =====================================================================
   8. HERO GRID: IMAGE + 10 FAST FACTS

   Phone (< 48rem)          Tablet & desktop (48rem+)
   [ image       ]          [f1 ][   image    ][f2 ]
   [f1 ][f2 ]               [f3 ][f4  ][f5  ][f6 ]
   [f3 ][f4 ]  ...          [f7 ][f8  ][f9  ][f10]

   The <dl> uses subgrid, so cards line up with the image on the same
   tracks. Its ::before reserves the image cells, so the 10 cards
   auto-flow around the image in source order. No per-card rules.

   Image: 4:3, sized by width; width/height attributes reserve its box
   before it loads (no layout shift). On 48rem+ it fills its cell
   (object-fit: cover) in case a card makes row 1 taller.
   ===================================================================== */

.hero-facts {
    display: grid;
    gap: var(--gap);
    margin-bottom: 2.25rem;
}

.hero-facts__media {
    overflow: hidden;
    border-radius: var(--radius);
    background: #DCE6EF;
    box-shadow: var(--shadow);
}

.hero-facts__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.hero-facts__hint {
    display: none;
}

.hero-facts__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
}

.fact {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.9rem;
    background: var(--c-surface);
    border: 1px solid var(--c-blue-soft);
    border-top: 4px solid var(--c-green);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.fact__label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-ink-soft);
}

.fact__icon {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.45rem;
    border-radius: 9px;
    background: var(--c-green-soft);
    fill: none;
    stroke: var(--c-green);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fact__value {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--c-navy);
    overflow-wrap: break-word;
}

.fact__value a {
    color: var(--c-blue);
}

/* Smallest phones: one card per row */
@media (max-width: 21.24rem) {
    .hero-facts__list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Optional mobile slider: add class "hero-facts--slider" to the section
   (and tabindex="0" to the <dl>). CSS scroll-snap only, no JavaScript. */
@media (max-width: 39.99rem) {
    .hero-facts--slider .hero-facts__hint {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--c-muted);
    }

    .hero-facts--slider .hero-facts__list {
        display: flex;
        gap: var(--gap);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        margin-inline: calc(-1 * var(--gutter));
        padding: 0.25rem var(--gutter) 1rem;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }

    .hero-facts--slider .hero-facts__list::-webkit-scrollbar {
        display: none;
    }

    .hero-facts--slider .fact {
        flex: 0 0 min(78%, 18rem);
        scroll-snap-align: start;
    }
}

@media (min-width: 48rem) {
    .hero-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas:
            ".  img img ."
            ".  .   .   ."
            ".  .   .   .";
    }

    .hero-facts__media {
        grid-area: img;
        z-index: 1;
    }

    .hero-facts__img {
        height: 100%;
    }

    .hero-facts__list {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
    }

    .hero-facts__list::before {
        content: "";
        grid-area: img;
    }

    /* The two cards beside the image: centered, a little larger */
    .fact:nth-child(-n + 2) {
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 1.25rem 1rem;
    }

    .fact:nth-child(-n + 2) .fact__label {
        align-items: center;
    }

    .fact:nth-child(-n + 2) .fact__icon {
        width: 3rem;
        height: 3rem;
        padding: 0.6rem;
        border-radius: 12px;
    }

    .fact:nth-child(-n + 2) .fact__value {
        font-size: 1.15rem;
    }
}

/* Browsers without subgrid (pre-2023): image on top, cards 4 across */
@supports not (grid-template-columns: subgrid) {
    @media (min-width: 48rem) {
        .hero-facts {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas: none;
        }

        .hero-facts__media {
            grid-area: auto;
        }

        .hero-facts__img {
            height: auto;
        }

        .hero-facts__list {
            grid-column: auto;
            grid-row: auto;
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .hero-facts__list::before {
            content: none;
        }
    }
}


/* =====================================================================
   9. TABLE OF CONTENTS
   (class name kept from the old template for universal_1.js)
   ===================================================================== */

.toc-seo {
    margin-bottom: 0.5rem;
    padding: 1rem 1.25rem;
    background: var(--c-tint);
    border: 1px solid var(--c-blue-soft);
    border-left: 4px solid var(--c-blue);
    border-radius: 8px;
}

.toc-seo__title {
    margin-bottom: 0.35rem;
    font-weight: 600;
    color: var(--c-navy);
}

.toc-seo ol {
    margin: 0;
    padding-left: 1.4rem;
}

.toc-seo li {
    break-inside: avoid;
}

.toc-seo li + li {
    margin-top: 0.15rem;
}

.toc-seo a {
    display: inline-block;
    padding-block: 0.2rem;
}

@media (min-width: 48rem) {
    .toc-seo ol {
        columns: 2;
        column-gap: 2.5rem;
    }
}


/* =====================================================================
   10. ARTICLE BODY
   ===================================================================== */

.content-section {
    padding-block: 2.25rem;
    border-top: 1px solid var(--c-line);
}

.toc-seo + .article-body > .content-section:first-child {
    border-top: 0;
}

.content-section h2 {
    margin-bottom: 1rem;
}

.text-content {
    max-width: var(--measure);
    margin-inline: auto;
}

.text-content > * + * {
    margin-top: 1rem;
}

.text-content h3 {
    margin-top: 1.75rem;
}

.text-content h3 + * {
    margin-top: 0.5rem;
}

.text-content ul,
.text-content ol {
    padding-left: 1.4rem;
}

.text-content li + li {
    margin-top: 0.35rem;
}

/* Disclaimer at the end of the article */
.article-note {
    max-width: var(--measure);
    margin: 0 auto 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--c-line);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--c-muted);
}

/* Full-width text: add class "full-width" next to "text-content" */
.text-content.full-width,
.article-note {
    max-width: none;
}

/* Comparison table: on phones it scrolls sideways and the
   first column stays visible */
.table-scroll {
    overflow-x: auto;
    background: var(--c-surface);
    border: 1px solid var(--c-blue-soft);
    border-radius: var(--radius-sm);
}

.compare-table {
    width: 100%;
    min-width: 42rem;
    border-collapse: collapse;
    font-size: 0.95rem;
    line-height: 1.5;
}

.compare-table caption {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--c-navy);
}

.compare-table th,
.compare-table td {
    padding: 0.65rem 0.9rem;
    border-top: 1px solid var(--c-line);
    text-align: left;
    vertical-align: top;
}

.compare-table thead th {
    background: var(--c-tint);
    color: var(--c-navy);
}

.compare-table tbody th {
    color: var(--c-ink-soft);
}

.compare-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 9.5rem;
    background: var(--c-surface);
    box-shadow: 1px 0 0 var(--c-line);
}

.compare-table thead th:first-child {
    background: var(--c-tint);
}

/* In-text photos that open in the lightbox (desktop) */
@media (min-width: 56.25rem) {
    .zoomable img {
        cursor: zoom-in;
    }
}

/* =====================================================================
   11. SIDE MEDIA CAROUSEL
   Text on one side, a cross-fading image stack on the other (1-4
   slides, rotated by universal_1.js via .is-active). Without JS the
   first slide simply stays visible.
   ===================================================================== */

.side-media-carousel {
    display: grid;
    gap: 1.75rem;
    align-items: start;
}

.side-media-carousel__eyebrow {
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-blue);
}

.side-media-carousel__text p + p {
    margin-top: 1rem;
}

.side-media-carousel__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    background: var(--c-tint);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Portrait photos (~2:3). Capped width on phones/tablets so a tall
   photo never fills the whole screen. */
.side-media-carousel__media--portrait {
    aspect-ratio: 3 / 4;
    max-width: 28rem;
    margin-inline: auto;
}

.side-media-carousel__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-in-out;
}

.side-media-carousel__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.side-media-carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dot indicators, added by universal_1.js */
.side-media-carousel__dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: 0.65rem;
    cursor: default;
}

.side-media-carousel__dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.side-media-carousel__dot:hover {
    background: #FFFFFF;
}

.side-media-carousel__dot:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

.side-media-carousel__dot.is-active {
    width: 32px;
    border-radius: 7px;
    background: #FFFFFF;
}

@media (min-width: 56.25rem) {
    .side-media-carousel {
        grid-template-columns: minmax(0, 1fr) 400px;
        gap: 3rem;
    }

    .side-media-carousel--reverse {
        grid-template-columns: 400px minmax(0, 1fr);
    }

    .side-media-carousel--reverse .side-media-carousel__text {
        order: 2;
    }

    .side-media-carousel__media {
        position: sticky;
        top: calc(var(--nav-h) + 1.5rem);
        cursor: zoom-in; /* click-to-enlarge is desktop-only in universal_1.js */
    }

    .side-media-carousel__media--portrait {
        aspect-ratio: 2 / 3;
        max-width: none;
    }
}


/* =====================================================================
   12. FAQ
   Native <details>: no JavaScript, answers stay in the HTML (crawlable).
   The visible Q&A must match the FAQPage JSON-LD word for word.
   ===================================================================== */

.faq {
    display: grid;
    gap: 0.6rem;
}

.faq__item {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
}

.faq__item summary {
    position: relative;
    display: block;
    min-height: 2.75rem;
    padding: 0.85rem 2.75rem 0.85rem 1rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--c-navy);
    cursor: pointer;
    list-style: none;
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

.faq__item summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.1rem;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--c-blue);
    border-bottom: 2px solid var(--c-blue);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
}

.faq__item[open] summary::after {
    transform: translateY(-30%) rotate(-135deg);
}

.faq__item summary:hover {
    background: var(--c-tint);
    border-radius: var(--radius-sm);
}

.faq__answer {
    padding: 0 1rem 1rem;
}

.faq__answer > * + * {
    margin-top: 0.75rem;
}


/* =====================================================================
   13. FOOTER
   ===================================================================== */

.site-footer {
    padding: 1.25rem var(--gutter);
    background: var(--c-navy);
    color: #FFFFFF;
    border-top: 3px solid var(--c-blue);
    font-size: 0.875rem;
}

.footer-languages {
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    font-size: 0.85rem;
}

.footer-languages a {
    display: inline-block;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
}

.footer-languages a:hover {
    color: var(--c-blue-light);
    background: rgba(255, 255, 255, 0.1);
}

.footer-languages .separator,
.footer-center .separator {
    margin: 0 0.25rem;
    color: rgba(255, 255, 255, 0.4);
}

.footer-container {
    max-width: var(--page-max);
    margin-inline: auto;
    display: grid;
    gap: 0.75rem;
    justify-items: center;
    text-align: center;
}

.footer-left {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-left a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 8px;
    color: #FFFFFF;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.footer-left a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--c-blue-light);
}

.footer-left svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
}

.footer-center a {
    color: #FFFFFF;
    text-decoration: none;
}

.footer-center a:hover {
    color: var(--c-blue-light);
}

@media (min-width: 64rem) {
    .footer-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
}


/* =====================================================================
   14. SCRIPT-GENERATED UI
   Elements created by universal_1.js: scroll progress bar, floating
   ToC + back-to-top buttons, slide-out ToC panel, lightbox.
   ===================================================================== */

/* Scroll progress bar: sits above the sticky nav */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10001;
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, var(--c-blue-light), var(--c-green));
    pointer-events: none;
}

/* Floating buttons */
.floating-buttons {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.float-btn {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-navy) 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(26, 58, 82, 0.3);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
}

.float-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(26, 58, 82, 0.35);
}

.float-btn:focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
}

.float-btn svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.5;
}

.back-to-top-btn {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
}

.back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* Tooltip on the ToC button (desktop) */
.toc-menu-btn::before {
    content: attr(title);
    position: absolute;
    top: 50%;
    right: 100%;
    margin-right: 12px;
    padding: 6px 12px;
    transform: translateY(-50%);
    background: rgba(26, 58, 82, 0.95);
    color: #FFFFFF;
    font-size: 0.875rem;
    white-space: nowrap;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.toc-menu-btn:hover::before {
    opacity: 1;
}

@media (min-width: 48rem) {
    .floating-buttons {
        right: 30px;
        bottom: 30px;
        gap: 12px;
    }

    .float-btn {
        width: 56px;
        height: 56px;
    }

    .float-btn svg {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 47.99rem) {
    .toc-menu-btn::before {
        display: none;
    }
}

/* Slide-out ToC panel */
.floating-toc-panel {
    position: fixed;
    top: 50%;
    right: -380px;
    z-index: 1100;
    width: 360px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(-50%);
    background: #FFFFFF;
    border-radius: 12px 0 0 12px;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-toc-panel.active {
    right: 0;
}

.toc-panel-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-navy) 100%);
    color: #FFFFFF;
}

.toc-panel-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #FFFFFF;
}

.toc-panel-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.toc-panel-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.toc-panel-close svg {
    width: 20px;
    height: 20px;
}

.toc-panel-nav {
    flex: 0 1 auto;
    max-height: calc(85vh - 100px);
    overflow-y: auto;
    padding: 0.75rem 0;
    background: #FFFFFF;
}

.toc-panel-link {
    position: relative;
    display: block;
    padding: 0.7rem 1.5rem;
    border-left: 3px solid transparent;
    color: var(--c-ink);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: underline;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.toc-panel-link:hover {
    background: #F9FAFB;
    color: var(--c-blue);
    border-left-color: var(--c-line);
}

.toc-panel-link.active {
    background: #EEF4FA;
    color: var(--c-blue);
    border-left-color: var(--c-blue);
    font-weight: 600;
}

.toc-panel-link.toc-indent {
    padding: 0.6rem 1.5rem 0.6rem 2.5rem;
    font-size: 0.9375rem;
}

.toc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.toc-backdrop.active {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 47.99rem) {
    .floating-toc-panel {
        right: -100%;
        width: 90%;
        max-width: 320px;
    }

    .toc-panel-header {
        padding: 1rem;
    }

    .toc-panel-link {
        padding: 0.65rem 1rem;
        font-size: 0.9375rem;
    }

    .toc-panel-link.toc-indent {
        padding: 0.55rem 1rem 0.55rem 2rem;
    }
}

/* Old back-to-top button (fallback) */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--c-blue);
    color: #FFFFFF;
    font-size: 22px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

/* Lightbox (click-to-enlarge on desktop) */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.95);
}

.lightbox.active {
    display: flex;
}

.lightbox-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90%;
    max-height: 90vh;
}

.lightbox-content {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 8px;
}

.lightbox-caption-wrap {
    max-width: 640px;
    margin-top: 1.1rem;
    text-align: center;
}

.lightbox-caption-wrap[hidden] {
    display: none;
}

.lightbox-caption {
    margin: 0 0 0.35rem;
    font-family: var(--font-head);
    font-size: 1.1rem;
    font-weight: 700;
    color: #FFFFFF;
}

.lightbox-alt {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 100000;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1.5rem;
}

.lightbox-prev,
.lightbox-next {
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--c-navy);
    font-size: 1.5rem;
    cursor: pointer;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: #FFFFFF;
}


/* =====================================================================
   15. REDUCED MOTION + PRINT
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .site-nav,
    .breadcrumb,
    .jump,
    .toc-seo,
    .scroll-progress,
    .floating-buttons,
    .floating-toc-panel,
    .toc-backdrop,
    .back-to-top,
    .lightbox,
    .site-footer,
    .skip-link {
        display: none !important;
    }

    body {
        background: #FFFFFF;
    }

    .fact,
    .hero-facts__media,
    .side-media-carousel__media {
        box-shadow: none;
    }

    .fact,
    .faq__item,
    .side-media-carousel {
        break-inside: avoid;
    }
}