/* STFM Search Results Page (V2)
   Tokens come from STFMPageV2.css (:root) -- --stfm-primary, --stfm-secondary,
   --stfm-tertiary, --stfm-heading-font, --stfm-body-font.

   Two layers below:
     1. Page chrome (.stfm-search*) -- fully ours.
     2. Google CSE output (.gsc-* / .gs-*) -- Google renders the result list itself, so
        these are influence-only. Everything is scoped under .stfm-search both to win
        specificity against Google's injected stylesheet and to avoid leaking onto any
        other page that embeds a CSE. */

/* ======================================================================
   1. PAGE CHROME
   ====================================================================== */

.stfm-search {
    background-color: #ffffff;
    padding: 2.5rem 0 4rem;
    min-height: 55vh;
}

.stfm-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.stfm-search-header {
    background-color: #f8f9fa;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1.75rem;
    margin-bottom: 2rem;
}

/* Heading block sits below the search bar, mirroring the V1 page's
   "Search Results" / "Searching for: ..." wording. */

.stfm-search-heading {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(0, 150, 210, 0.12);
}

.stfm-search-title {
    font-family: var(--stfm-heading-font);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--stfm-primary);
    margin-bottom: 0.4rem;
}

.stfm-search-bar {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.stfm-search-input {
    flex: 1;
    min-width: 0;
    font-family: var(--stfm-body-font);
    font-size: 1rem;
    color: var(--stfm-text);
    background-color: #ffffff;
    border: 1px solid var(--stfm-border-gray);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .stfm-search-input::placeholder {
        color: #8a949e;
    }

    .stfm-search-input:focus {
        outline: none;
        border-color: var(--stfm-tertiary);
        box-shadow: 0 0 0 3px rgba(0, 150, 210, 0.15);
    }

.stfm-search-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--stfm-heading-font);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
    background-color: var(--stfm-secondary);
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    .stfm-search-button:hover {
        background-color: #d97b1c;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(239, 141, 43, 0.3);
    }

    .stfm-search-button:focus-visible {
        outline: 3px solid rgba(239, 141, 43, 0.4);
        outline-offset: 2px;
    }

.stfm-search-term {
    margin: 0;
    font-family: var(--stfm-body-font);
    font-size: 1.1rem;
    font-weight: 300;
    color: #555;
}

.stfm-search-term-value {
    font-weight: 600;
    color: var(--stfm-primary);
    /* User-supplied text: keep long strings from blowing out the layout. */
    overflow-wrap: anywhere;
}

/* Empty state -- shown when /search-results is opened with no q parameter. */

.stfm-search-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.stfm-search-empty-icon {
    font-size: 2.5rem;
    color: var(--stfm-tertiary);
    opacity: 0.3;
    margin-bottom: 1rem;
}

.stfm-search-empty-text {
    margin: 0;
    font-size: 1rem;
}

/* ======================================================================
   2. GOOGLE CSE OUTPUT -- influence only
   ------------------------------------------------------------------
   VERIFY THESE AGAINST THE LIVE DOM. Google's markup varies by CSE
   configuration and changes without notice; these target the classes
   that have been stable longest. Anything here that does not match the
   rendered output is simply inert, not harmful.
   ====================================================================== */

/* Strip the CSE container's own border and padding so it sits flush in our card. */
.stfm-search .gsc-control-cse {
    padding: 0;
    border: none;
    background-color: transparent;
    font-family: var(--stfm-body-font);
}

.stfm-search .gsc-above-wrapper-area {
    border-bottom: none;
    padding: 0 0 0.75rem;
}

/* --- Refinement tabs -------------------------------------------------
   Confirmed in use on the live site: All results / About / Conferences /
   Advocacy / Foundation / Awards & Scholarships / Teaching Resources /
   Faculty Development / Publications & Research / News. */

.stfm-search .gsc-tabsArea {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 1rem;
    overflow-x: auto;
    white-space: nowrap;
}

.stfm-search .gsc-tabHeader {
    font-family: var(--stfm-body-font);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.6rem 0.9rem;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.stfm-search .gsc-tabHeader.gsc-tabhInactive {
    color: #6c757d;
}

.stfm-search .gsc-tabHeader.gsc-tabhInactive:hover {
    color: var(--stfm-primary);
}

.stfm-search .gsc-tabHeader.gsc-tabhActive {
    color: var(--stfm-primary);
    border-bottom: 3px solid var(--stfm-tertiary);
}

/* --- Result count and sort-by strip ---------------------------------- */

.stfm-search .gsc-result-info {
    padding: 0 0 0.5rem;
    color: #6c757d;
    font-size: 0.85rem;
}

.stfm-search .gsc-orderby-container,
.stfm-search .gsc-orderby-label,
.stfm-search .gsc-selected-option-container {
    font-family: var(--stfm-body-font);
    font-size: 0.85rem;
    color: #6c757d;
}

.stfm-search .gsc-selected-option-container {
    border-color: var(--stfm-border-gray);
    border-radius: 6px;
}

/* --- Per-result labels ("Labeled Awards ...") ------------------------ */

.stfm-search .gs-per-result-labels,
.stfm-search .gs-per-result-labels a {
    font-size: 0.8rem;
    color: #6c757d;
}

.stfm-search .gs-per-result-labels a {
    color: var(--stfm-tertiary);
    font-weight: 600;
    text-decoration: none;
}

    .stfm-search .gs-per-result-labels a:hover {
        text-decoration: underline;
    }

/* Individual result. */
.stfm-search .gsc-webResult .gsc-result {
    border: none;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    padding: 1.15rem 0;
    background-color: transparent;
}

.stfm-search .gsc-webResult .gsc-result:last-child {
    border-bottom: none;
}

.stfm-search .gsc-webResult.gsc-result:hover {
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.1);
}

/* Result title. */
.stfm-search .gs-title,
.stfm-search .gs-title b {
    font-family: var(--stfm-heading-font);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--stfm-primary) !important; /* CSE sets link colour inline-ish; needs the override */
    text-decoration: none;
}

.stfm-search .gsc-webResult .gs-title:hover,
.stfm-search .gsc-webResult .gs-title:hover b {
    color: var(--stfm-tertiary) !important;
    text-decoration: underline;
}

/* Snippet. */
.stfm-search .gs-snippet {
    font-family: var(--stfm-body-font);
    font-size: 0.95rem;
    line-height: 1.55;
    color: #444;
}

.stfm-search .gs-snippet b {
    color: var(--stfm-primary);
}

/* Visible URL line. */
.stfm-search .gs-visibleUrl,
.stfm-search .gsc-url-top {
    font-size: 0.82rem;
    color: #6c757d;
}

/* Thumbnail, when the CSE is configured to show one. */
.stfm-search .gs-image-box img.gs-image {
    border-radius: 6px;
}

/* Pagination. */
.stfm-search .gsc-cursor-box {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 1.25rem;
    margin-top: 1.25rem;
}

.stfm-search .gsc-cursor-page {
    display: inline-block;
    min-width: 34px;
    text-align: center;
    font-family: var(--stfm-heading-font);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--stfm-primary);
    background-color: #f1f3f5;
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    margin-right: 0.35rem;
    text-decoration: none;
}

.stfm-search .gsc-cursor-page:hover {
    background-color: rgba(0, 150, 210, 0.12);
    text-decoration: none;
}

.stfm-search .gsc-cursor-current-page {
    color: #ffffff;
    background-color: var(--stfm-tertiary);
}

/* Google requires its branding to remain visible -- do not hide .gcsc-branding.
   Only its spacing is adjusted here. */
.stfm-search .gcsc-more-maybe-branding-root {
    margin-top: 1rem;
}

/* --- Full-width results ----------------------------------------------
   CSE's default table layout leaves the result column at roughly half the
   available width. These force the whole chain -- outer control, wrapper,
   results box, expansion area, per-result table and its snippet cell -- to
   fill the container.

   Note: do NOT set overflow-x here. Per the CSS spec, a non-visible value on
   one overflow axis promotes the other from `visible` to `auto`, which turns
   these into scroll containers and produces a stray vertical scrollbar down
   the middle of the results. `overflow: visible` is deliberate. */

.stfm-search .gsc-control-cse,
.stfm-search .gsc-control-wrapper-cse,
.stfm-search .gsc-wrapper,
.stfm-search .gsc-results-wrapper-visible,
.stfm-search .gsc-resultsbox-visible,
.stfm-search .gsc-results,
.stfm-search .gsc-expansionArea,
.stfm-search .gsc-webResult,
.stfm-search .gsc-result {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.stfm-search table.gsc-table-result,
.stfm-search .gsc-table-result tbody,
.stfm-search .gsc-table-result tr,
.stfm-search .gsc-table-cell-snippet-close,
.stfm-search .gsc-table-cell-thumbnail + .gsc-table-cell-snippet-close {
    width: 100%;
    max-width: 100%;
}

/* Titles and snippets inherit the table cell's width; without this they can
   still wrap early against a content-sized cell. */
.stfm-search .gs-title,
.stfm-search .gs-snippet,
.stfm-search .gs-visibleUrl {
    max-width: 100%;
}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */

@media (max-width: 767.98px) {
    .stfm-search {
        padding: 1.5rem 0 2.5rem;
    }

    .stfm-search-header {
        padding: 1.25rem;
    }

    .stfm-search-title {
        font-size: 1.4rem;
    }

    .stfm-search-bar {
        flex-direction: column;
    }

    .stfm-search-button {
        justify-content: center;
    }

    /* CSE's result table can push past the viewport on narrow screens. */
    .stfm-search .gsc-table-result {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stfm-search-button:hover {
        transform: none;
    }
}