/* ==========================================================================
   Design tokens — "Charcoal & Gold" palette from the homepage design handoff.
   Derived values (dark card, footer, borders, tints) follow the handoff's
   mixing formulas so the shipped page matches the prototype exactly.
   ========================================================================== */
:root {
    --ink: #1c1c1c;
    --page: #efefec;
    --dark: #141414;
    --dark-card: #272727;
    --footer-bg: #121212;
    --gold: #c9a02c;
    --gold-light: #e9d9ab;
    --slate: #556063;
    --rust: #8a3b2e;
    --header-bg: rgba(20, 20, 20, 0.94);
    --border: #d1d1cf;
    --border-soft: #dededb;
    --text-soft: #575756;
    --text-faint: #70706f;
    --faint-on-page: #969695;
    --card-tint: #f9f9f8;
    --badge-bg: rgba(138, 59, 46, 0.18);
    --font-display: "Sora", sans-serif;
    --font-body: "IBM Plex Sans", sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--page);
    color: var(--ink);
}

::selection {
    background: #d9c9a3;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
}

a {
    text-decoration: none;
    color: var(--rust);
}
a:hover {
    text-decoration: underline;
}

.section-inner {
    max-width: 1180px;
    margin: 0 auto;
}

/* Keep anchor targets clear of the sticky header when nav links jump to them. */
#explore,
#faq,
#resources {
    scroll-margin-top: 70px;
}

.kicker {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    margin: 0 0 10px;
}

/* ==========================================================================
   Sticky header
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    /* Promote the header to its own compositor layer. The logo's write-on
       animation otherwise gets layered above later stacking contexts by
       software rasterizers, letting hero content paint over the header. */
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px clamp(20px, 4vw, 48px);
    background: var(--header-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wordmark {
    display: inline-flex;
    align-items: center;
}
.wordmark:hover {
    text-decoration: none;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 3vw, 32px);
}

.site-nav-link {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    font-weight: 500;
}
.site-nav-link:hover {
    color: #fff;
    text-decoration: none;
}

.lang-pill {
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    overflow: hidden;
}

.lang-pill-option {
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
}
.lang-pill-option:hover {
    text-decoration: none;
}
.lang-pill-option.active {
    background: rgba(255, 255, 255, 0.18);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    position: relative;
    /* Own stacking context below the sticky header (z-index 30), so the
       search bar and overlay always slide underneath it. */
    z-index: 1;
    width: 100%;
    min-height: min(720px, 85vh);
    overflow: hidden;
    display: flex;
}

.hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* Darkest at the top, where the heading and search bar sit, darkening
       again toward the bottom where the explore section overlaps the photo. */
    background: linear-gradient(
        180deg,
        rgba(20, 20, 20, 0.55) 0%,
        rgba(20, 20, 20, 0.25) 50%,
        rgba(20, 20, 20, 0.5) 100%
    );
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 36px clamp(20px, 4vw, 48px) 48px;
}

.hero-kicker {
    /* Brightened terracotta so the brand accent stays warm but reads clearly
       against the photo; the shadow lifts the thin uppercase letters off the
       image the same way the headline and subtitle sit on the overlay. */
    color: #f0a890;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(20, 20, 20, 0.55);
}

.hero h1 {
    font-weight: 700;
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    line-height: 1.12;
    color: #fff;
    margin: 0 0 14px;
    max-width: 680px;
}

.hero-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.88);
    max-width: 560px;
    margin: 0 0 22px;
}

.hero-search {
    display: flex;
    gap: 10px;
    max-width: 620px;
}

.hero-search-field {
    position: relative;
    flex: 1;
}

.hero-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    opacity: 0.5;
}

.hero-search input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px 16px 46px;
    border-radius: 100px;
    border: none;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.45);
}
.hero-search input::placeholder {
    color: #8b9089;
}

.hero-search-button {
    padding: 0 28px;
    border: none;
    border-radius: 100px;
    background: var(--gold);
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.98rem;
    white-space: nowrap;
    cursor: pointer;
}
.hero-search-button:hover {
    background: #b8922a;
}

/* ==========================================================================
   Gateway strip ("Around the village")
   ========================================================================== */
.gateway {
    /* Overlap the hero photo so the page content starts right below the
       search bar instead of after the full-height image. The background
       fades to solid dark exactly where the hero's bottom edge passes
       underneath, so there is no visible seam. */
    --hero-overlap: 260px;
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--hero-overlap));
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.35) 0%, var(--dark) var(--hero-overlap));
    padding: 40px clamp(20px, 4vw, 48px) 64px;
}

.gateway-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}

.gateway-head h2 {
    font-weight: 700;
    font-size: 1.6rem;
    margin: 0;
    color: #fff;
}

.gateway-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
}

.gateway-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 8px 16px;
}

.gateway-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: #fff;
}
.gateway-card:hover {
    text-decoration: none;
    border-color: rgba(255, 255, 255, 0.2);
}

.gateway-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.gateway-icon-gold {
    background: var(--gold);
}
.gateway-icon-slate {
    background: var(--slate);
}
.gateway-icon-rust {
    background: var(--rust);
}

.gateway-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 4px 9px;
    border-radius: 100px;
    background: var(--badge-bg);
    color: var(--rust);
}

.gateway-card-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.02rem;
}

.gateway-card-desc {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.45;
}

/* ==========================================================================
   New resident panel
   ========================================================================== */
.newres {
    background: var(--page);
    padding: 56px clamp(20px, 4vw, 48px);
}

.newres-card {
    background: var(--gold);
    border-radius: 20px;
    padding: clamp(28px, 4vw, 44px);
    display: grid;
    grid-template-columns: minmax(200px, 320px) 1fr;
    gap: 32px;
    align-items: center;
}

.newres-kicker {
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    color: var(--gold-light);
}

.newres-intro h2 {
    font-weight: 700;
    font-size: 1.7rem;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.2;
}

.newres-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    margin: 0;
}

.newres-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.newres-step {
    margin: 0;
}

.newres-step-num {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.newres-step-title {
    display: block;
    font-weight: 600;
    color: #fff;
    font-size: 0.94rem;
    margin-bottom: 4px;
}

.newres-step-desc {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.84rem;
    line-height: 1.4;
}

@media (max-width: 760px) {
    .newres-card {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   FAQ (primary section)
   ========================================================================== */
.faq-section {
    background: #fff;
    padding: 64px clamp(20px, 4vw, 48px) 8px;
}

.faq-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.faq-kicker {
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 8px;
}

.faq-head h2 {
    font-weight: 700;
    font-size: 2rem;
    margin: 0;
    color: var(--ink);
}

.faq-actions {
    display: flex;
    gap: 10px;
}

.pill-button {
    padding: 9px 16px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.pill-button:hover {
    border-color: var(--ink);
}

.faq-pills {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 28px;
}

.faq-pill {
    flex-shrink: 0;
    padding: 9px 18px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.faq-pill.active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

.faq-no-results {
    text-align: center;
    padding: 48px 0;
    color: var(--text-faint);
    margin: 0;
}

#faqs {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding-bottom: 56px;
}

/* Each category block carries its accent color as a custom property, set by
   scripts.js when the API data renders (colors cycle gold/slate/rust). */
.faq-category {
    --cat-accent: var(--gold);
}

.faq-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.faq-category-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cat-accent);
    flex-shrink: 0;
}

.faq-category-header h3 {
    font-weight: 600;
    font-size: 1.15rem;
    margin: 0;
    white-space: nowrap;
    color: var(--cat-accent);
}

.faq-category-line {
    flex: 1;
    height: 1px;
    background: var(--border-soft);
}

.faq-category-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    background: var(--card-tint);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--cat-accent);
    border-radius: 10px;
    overflow: hidden;
    scroll-margin-top: 80px; /* Keep deep-linked questions clear of the sticky header. */
}

.faq-item-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px;
    border: none;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.faq-item-question {
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--ink);
}
.faq-item-question > * {
    margin: 0;
}

.faq-item .arrow {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--cat-accent);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.faq-item.open .arrow {
    transform: rotate(180deg);
}

.faq-answer {
    display: none;
    padding: 0 20px 18px;
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1.6;
}
.faq-item.open .faq-answer {
    display: block;
}

.faq-answer button {
    display: block;
    margin: 10px auto;
    padding: 8px 12px;
    background-color: var(--gold);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.faq-answer button:hover {
    background-color: #b8922a;
}

/* ==========================================================================
   References & User Manuals
   ========================================================================== */
.resources-section {
    background: var(--page);
    padding: 56px clamp(20px, 4vw, 48px);
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.resources-grid h3 {
    font-weight: 600;
    font-size: 1.2rem;
    margin: 0 0 14px;
    color: var(--ink);
}

.resource-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.resource-list li {
    margin: 0;
}

.resource-list a {
    color: var(--ink);
    font-size: 0.92rem;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.resource-list .resource-arrow {
    color: var(--faint-on-page);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    background: var(--footer-bg);
}

.footer-grid {
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px clamp(20px, 4vw, 48px) 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
}

.footer-logo {
    margin: 0 0 10px;
}

.footer-disclaimer {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 320px;
    margin: 0;
}

.footer-heading {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0 0 12px;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links li {
    margin: 0;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
}

.footer-contact {
    color: var(--rust);
    font-size: 0.85rem;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 18px clamp(20px, 4vw, 48px);
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
}
.footer-bottom p {
    margin: 0;
}

/* ==========================================================================
   FAQ answer content — classes used by the HTML stored in the database.
   The answers render inside the light FAQ cards, so these are styled for a
   light background.
   ========================================================================== */
.inline-span {
    display: inline-block;
    margin-right: 10px;
}

.copy-confirmation {
    color: var(--rust);
}

.spaced-list {
    margin-top: 20px;
}

.indented {
    margin-left: 15px;
}

li {
    margin-bottom: 10px;
}

#calendar-copy-message {
    display: none;
    color: var(--rust);
    margin-top: 10px;
    text-align: center;
}

.main-item {
    margin: 20px 0 5px 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
}

.faq-warning {
    background-color: #ffe0e0;
    color: #b00000;
    border: 1px solid #b00000;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    margin: 15px 0;
}

.faq-flex-container {
    display: flex;
    flex-direction: row; /* Default layout: text and image side by side */
    gap: 15px;
    align-items: flex-start;
}

@media (max-width: 640px) {
    div.faq-flex-container {
        flex-direction: column; /* Stack text and images vertically */
    }
    div.faq-image-section {
        margin-top: 0; /* Remove the margin when displayed below */
        margin-bottom: 20px;
    }
    img.faq-image-right {
        display: none; /* Hide the image when the page is narrow */
    }
    img.faq-image-inline {
        display: block; /* Show the image when the page is narrow */
    }
    iframe.faq-video-right {
        display: none; /* Hide the video when the page is narrow */
    }
    iframe.faq-video-inline {
        display: block; /* Show the video when the page is narrow */
    }
}

.faq-text-content {
    flex: 1;
}

.faq-image-section {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px; /* Default margin for when it's displayed to the right */
}

.faq-image-right {
    width: 100%;
    max-width: 360px;
    min-width: 180px;
    height: auto;
    display: block;
    border-radius: 8px;
}

.faq-image-inline {
    display: none; /* Hide the image by default */
    width: 80%;
    max-width: 360px;
    height: auto;
    border-radius: 8px;
    margin: 0 auto; /* Center the image */
}

.faq-video-right {
    width: 180px;
    height: 320px;
    display: block;
    border-radius: 8px;
}

.faq-video-inline {
    display: none; /* Hide the video by default */
    width: 180px;
    height: 320px;
    border-radius: 8px;
    margin: 0 auto; /* Center the video */
}

.faq-image-center {
    display: block;
    width: 80%;
    max-width: 360px;
    height: auto;
    border-radius: 8px;
    margin: 0 auto; /* Center the image */
}

.small-icon {
    width: 50px; /* Set width */
    height: auto; /* Maintain aspect ratio */
}

.expandable-lines {
    width: 100%;
    margin: 0 auto 25px;
    border: 1px solid var(--border);
    border-radius: 5px;
    overflow: hidden;
}

.expandable-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border);
    position: relative;
    background-color: #f4f4f1;
    transition: background-color 0.3s ease;
    color: var(--ink);
    align-self: flex-start; /* Align the text to the top */
    flex-direction: column; /* Stack the elements vertically */
    margin-bottom: 10px; /* Add some spacing between expandable lines */
}

.expandable-header {
    display: flex;
    align-items: center; /* Vertically center text and codes */
    gap: 10px; /* Add spacing between the code and description */
    justify-content: flex-start; /* Align content to the left */
    text-align: left; /* Ensure text within is left-aligned */
    width: 100%; /* Ensure the header spans the full width */
}

.expandable-line:hover {
    background-color: #ececea;
}

.error-code {
    font-weight: bold;
    color: var(--rust);
}

.error-description {
    flex-grow: 1; /* Allows the description to take remaining horizontal space */
}

.expandable-content {
    display: none;
    margin: 10px 0;
    padding: 10px 15px;
    font-size: 14px;
    color: var(--text-soft);
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.expandable-line.expanded .expandable-content {
    display: block;
}

.expandable-line::after {
    content: "▶";
    position: absolute;
    right: 15px;
    font-size: 14px;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.expandable-line.expanded::after {
    content: "▶";
    transform: rotate(90deg);
}

/* ==========================================================================
   Error page (error.html)
   ========================================================================== */
.error-container {
    text-align: center;
    padding: 50px;
    max-width: 600px;
    margin: auto;
}

.error-image {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
}

.small-text {
    font-size: 12px;
    color: var(--text-faint);
}

.error-container button {
    background-color: var(--gold);
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
}
.error-container button:hover {
    background-color: #b8922a;
}

/* ==========================================================================
   Loading placeholders (skeleton screens) shown while API data is in flight.
   Content-shaped blocks that shimmer, so the page reads as "content on the
   way" rather than broken or empty. Both the FAQ and resources sections have
   light backgrounds, so the placeholders use light grays.
   ========================================================================== */
@keyframes un17-shimmer {
    0% {
        background-position: -450px 0;
    }
    100% {
        background-position: 450px 0;
    }
}

.skeleton {
    background-color: #e6e6e2;
    background-image: linear-gradient(90deg, #e6e6e2 0px, #f2f2ef 45px, #e6e6e2 90px);
    background-size: 600px 100%;
    background-repeat: no-repeat;
    border-radius: 4px;
    animation: un17-shimmer 1.4s ease-in-out infinite;
}

.skeleton-category {
    padding: 10px 0;
}

.skeleton-category-header {
    height: 1.4rem;
    margin: 10px 0 15px;
}

.skeleton-faq-item {
    width: 100%;
    height: 52px;
    margin: 10px 0;
    border-radius: 10px;
}

.skeleton-list-item {
    list-style: none;
}

.skeleton-line {
    height: 1rem;
}

/* Respect users who prefer reduced motion: keep the placeholder shape but
   drop the animated sweep. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .skeleton {
        animation: none;
        background-image: none;
    }
}

/* Message shown in the content sections when the API could not be reached. */
.load-error {
    color: var(--text-soft);
    font-style: italic;
    list-style: none;
}

/* ==========================================================================
   Search results panel — grouped, typed results from /api/search, rendered in
   a floating panel anchored under the hero search field.
   ========================================================================== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.search-results {
    position: fixed;
    /* Above the gateway (2) and hero (1); below the sticky header (30). */
    z-index: 25;
    max-height: min(62vh, 520px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.5);
}
.search-results[hidden] {
    display: none;
}

.search-group + .search-group {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--border-soft);
}

.search-group-heading {
    padding: 8px 12px 4px;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.search-result {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
}
.search-result.active,
.search-result:hover {
    background: var(--card-tint);
}

.search-result-badge {
    flex: none;
    margin-top: 2px;
    padding: 3px 8px;
    border-radius: 100px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}
.badge-faq {
    background: var(--gold);
}
.badge-reference {
    background: var(--slate);
}
.badge-manual {
    background: var(--rust);
}

.search-result-body {
    flex: 1;
    min-width: 0;
}
.search-result-title {
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}
.search-result-snippet {
    margin-top: 2px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-soft);
    /* Cap long answers at a two-line preview so rows stay scannable. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.search-result-meta {
    margin-top: 4px;
    font-size: 0.76rem;
    color: var(--text-faint);
}
.search-result mark {
    padding: 0 1px;
    border-radius: 3px;
    background: rgba(201, 160, 44, 0.28);
    color: inherit;
}
.search-result-arrow {
    flex: none;
    align-self: center;
    color: var(--text-faint);
}

.search-message {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 14px;
    font-size: 0.95rem;
    color: var(--text-soft);
}
.search-message-error {
    color: var(--rust);
}

.search-spinner {
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: un17-spin 0.7s linear infinite;
}
@keyframes un17-spin {
    to {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .search-spinner {
        animation-duration: 2s;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 640px) {
    .site-nav-link {
        display: none; /* Keep the header to wordmark + language toggle on phones. */
    }

    .hero-content {
        padding-top: 24px;
        padding-bottom: 36px;
    }

    .gateway {
        /* Phones have less spare photo below the search bar. */
        --hero-overlap: 140px;
    }

    .hero-search {
        flex-wrap: wrap;
    }

    .hero-search-button {
        padding: 12px 28px;
    }
}