/* ==========================================================================
   Roam Balkan — search page
   A journey-themed search: a navy hero with a drawn "route" line and pins
   (echoing the map-pin motif elsewhere on the site), a topic strip to wander
   into, and results shown as the same story cards as the journal.
   Loads AFTER blog.css, so it reuses the journal card/empty/pill styles and
   only adds what is unique to search.
   ========================================================================== */

/* -----------------------------------
   HERO
   ----------------------------------- */
/* Counts as a hero for the navbar (see custom.css / theme.js): the navbar sits
   TRANSPARENT over this full-cover navy field on load, then gains its solid
   background once scrolled past 40px — same behaviour as the homepage hero.
   The top padding clears the fixed navbar (the body reserves no space for it
   on hero pages), so the eyebrow starts just below the nav. */
.search-hero {
    position: relative;
    overflow: hidden;
    padding: calc(84px + 3.5rem) 0 3.25rem;
    background: linear-gradient(160deg, var(--primary-dark) 0%, #143453 55%, #17395b 100%);
    color: #ffffff;
    text-align: center;
}

/* Soft teal glow behind the search bar for depth */
.search-hero::before {
    content: '';
    position: absolute;
    top: 44%;
    left: 50%;
    width: min(760px, 92vw);
    height: 340px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(0, 168, 181, 0.22) 0%, rgba(0, 168, 181, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.search-hero .container {
    position: relative;
    z-index: 2;
}

.search-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent-teal-bright);
    margin-bottom: 1rem;
}
/* 12px floor for uppercase eyebrows, as elsewhere on phones */
@media (max-width: 767.98px) {
    .search-eyebrow {
        font-size: 0.75rem;
    }
}

.search-title {
    font-size: clamp(2.2rem, 4.5vw + 0.5rem, 3.6rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-wrap: balance;
    margin-bottom: 1rem;
}

.search-subtitle {
    max-width: 560px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
    line-height: 1.65;
}

/* -----------------------------------
   HERO: DECORATIVE ROUTE
   A dashed path with pins that draws itself once on load. Purely decorative
   (aria-hidden); it sits behind the content and never intercepts clicks.
   ----------------------------------- */
.search-route {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.55;
}
.search-route svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
    max-width: none; /* keep the drawn scale; the hero clips the overflow */
    height: auto;
}
.search-route .route-line {
    fill: none;
    stroke: var(--accent-teal-bright);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 6 12;
}
.search-route .route-pin {
    fill: var(--accent-teal-bright);
}
.search-route .route-pin-ring {
    fill: none;
    stroke: var(--accent-teal-bright);
    stroke-width: 2;
    opacity: 0.5;
}

/* The route (dashed line + pins) traces itself in left-to-right via a clip
   wipe. Wiping the whole SVG keeps the resting state identical for everyone:
   with motion it animates in; with reduced motion / no JS the same dashed
   route is simply shown in place — no separate "solid vs dashed" end state. */
@media (prefers-reduced-motion: no-preference) {
    .js .search-route svg {
        animation: route-wipe 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }
}

@keyframes route-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

/* -----------------------------------
   HERO: SEARCH FORM
   ----------------------------------- */
.search-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 640px;
    margin: 2.25rem auto 0;
}
@media (min-width: 576px) {
    .search-form {
        flex-direction: row;
        align-items: stretch;
    }
}

.search-input-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.5rem 0 1.25rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50px;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.search-input-wrap:focus-within {
    background: rgba(255, 255, 255, 0.16);
    border-color: var(--accent-teal-bright);
    box-shadow: 0 0 0 3px rgba(0, 168, 181, 0.35);
}
.search-input-wrap > .bi {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.15rem;
    flex: 0 0 auto;
}

.search-input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    color: #ffffff;
    font-size: 1.05rem;
    padding: 0.95rem 0.5rem;
    line-height: 1.4;
}
.search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}
.search-input:focus {
    outline: none;
    box-shadow: none;
}
/* Tidy up the native clear (×) affordance colour in WebKit */
.search-input::-webkit-search-cancel-button {
    filter: invert(1) opacity(0.6);
    cursor: pointer;
}

.search-form .search-submit {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-inline: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* -----------------------------------
   TOPICS STRIP
   A place to wander in when you do not know the search term yet.
   ----------------------------------- */
.search-topics {
    background: #ffffff;
    border-bottom: 1px solid rgba(15, 42, 74, 0.07);
}
.search-topics-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 0;
}
.search-topics-label {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}
/* pill-scroller + badge-outline come from the shared stylesheet */
.search-topics .pill-scroller {
    flex: 1 1 auto;
}
@media (max-width: 575.98px) {
    .search-topics-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
    /* The edge fades live on .pill-scroller in the shared stylesheet now, keyed
       off the scroll position — every strip that scrolls gets them. */
    .search-topics .pill-scroller {
        width: 100%;
    }
    /* 12px floor for uppercase eyebrows, as elsewhere on phones */
    .search-topics-label {
        font-size: 0.75rem;
    }
}

/* -----------------------------------
   RESULTS
   ----------------------------------- */
.search-results {
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}

.search-results-head {
    margin-bottom: 2rem;
}
/* Rendered as an <h2> for heading order (h1 hero -> h2 summary -> h3 cards),
   but styled as body copy, not a Playfair heading. */
.search-result-summary {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.search-result-count {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--primary-dark);
}
.search-result-query {
    color: var(--accent-teal);
    font-weight: 600;
}

/* Signpost empty state — same shell as .journal-empty, warmer copy layout */
.search-empty h2 {
    font-size: 1.5rem;
    color: var(--primary-dark);
    margin-bottom: 0.75rem;
}
.search-empty p {
    max-width: 420px;
    margin: 0 auto 1.5rem;
}

/* Pager: centred, no card chrome (the old markup wrapped it in a card-footer) */
.search-pager {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}
.search-pager .pagination {
    margin-bottom: 0;
}

/* -----------------------------------
   PRINT
   The shared print block (custom.css) only recolours .hero-* elements, so the
   navy search hero would otherwise print as light-on-white (or a solid ink
   block). Mirror that handling for the search-specific classes.
   ----------------------------------- */
@media print {
    .search-hero {
        background: none !important;
        color: #000;
        padding: 2rem 0;
    }
    .search-title,
    .search-subtitle,
    .search-eyebrow {
        color: #000 !important;
        text-shadow: none;
    }
    .search-route,
    .search-hero::before {
        display: none;
    }
}