@import url('tokens.css');

/* ============================================================
   Hilltop GIP — Prototype shared styles
   Token-bound utilities + section primitives that every page
   uses. Tailwind via CDN handles layout; this file owns the
   design-system-bound classes (typography, color, components).
   ============================================================ */

/* --- Token-bound atoms --- */
.font-display {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 144;
    font-weight: 400;
}

.numeral-wonk {
    font-variation-settings: "opsz" 144, "WONK" 1;
}

/* --- Discipline rows (Three Disciplines section) --- */
.discipline-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2.25rem 0 2.5rem;
    border-bottom: 1px solid var(--color-border);
    position: relative;
    transition: background var(--motion-ui);
}

.discipline-row__num {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 144;
    font-size: 14px;
    letter-spacing: 0.18em;
    color: var(--color-muted);
    font-weight: 500;
}

.discipline-row__title h3,
.discipline-row__metric {
    color: var(--color-fg);
}

.discipline-row__prose p {
    max-width: 48ch;
}

@media (min-width: 768px) {
    .discipline-row {
        grid-template-columns: 0.5fr 3fr 3fr 4.5fr;
        gap: 2.5rem;
        padding: 2.75rem 0 3rem;
        align-items: start;
    }

    .discipline-row__num {
        padding-top: 0.4rem;
        font-size: 13px;
    }
}

.font-body {
    font-family: var(--font-body);
}

.text-fg {
    color: var(--color-fg);
}

.text-muted {
    color: var(--color-muted);
}

.text-accent {
    color: var(--color-accent);
}

.text-success {
    color: var(--color-success);
}

.text-warning {
    color: var(--color-warning);
}

.text-error {
    color: var(--color-error);
}

.text-cream {
    color: var(--color-bg);
}

.bg-bg {
    background: var(--color-bg);
}

.bg-surface {
    background: var(--color-surface);
}

.bg-navy {
    background: var(--color-fg);
}

.bg-tint {
    background: #E8EEF1;
}
/* pale teal-blue band — Why GIP / Who participates */
.bg-teal {
    background: #2D5F66;
}
/* stewardship band */
.bg-charcoal {
    background: #1A1D24;
}
/* News & Notices */

.border-rule {
    border-color: var(--color-border);
}

.border-rule-dark {
    border-color: rgba(255,255,255,0.12);
}

/* Type scale */
.eyebrow {
    font-size: var(--type-label);
    letter-spacing: var(--type-label-tracking);
    text-transform: uppercase;
    font-weight: var(--type-label-weight);
    color: var(--color-muted);
}

.eyebrow-on-dark {
    color: rgba(246, 241, 231, 0.65);
}

.display-lg {
    font-size: var(--type-display-lg);
    line-height: var(--type-display-lh-lg);
    letter-spacing: var(--type-display-tracking-lg);
}

.display-md {
    font-size: var(--type-display-md);
    line-height: var(--type-display-lh-md);
    letter-spacing: var(--type-display-tracking-md);
}

.display-sm {
    font-size: var(--type-display-sm);
    line-height: var(--type-display-lh-sm);
    letter-spacing: var(--type-display-tracking-sm);
}

/* --- Buttons --- */
.btn-primary {
    background: var(--color-fg);
    color: var(--color-bg);
    padding: 14px 24px;
    border-radius: var(--radius-md);
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background var(--motion-ui);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-primary:hover {
        background: #1A2D4D;
    }

.btn-primary-onnavy {
    background: var(--color-bg);
    color: var(--color-fg);
    padding: 14px 24px;
    border-radius: var(--radius-md);
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background var(--motion-ui);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-primary-onnavy:hover {
        background: #FFFFFF;
    }

.btn-secondary {
    background: transparent;
    color: var(--color-fg);
    border: 1px solid var(--color-border);
    padding: 13px 23px;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: border-color var(--motion-ui), color var(--motion-ui);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-secondary:hover {
        border-color: var(--color-fg);
    }

.btn-pill {
    background: var(--color-fg);
    color: var(--color-bg);
    padding: 10px 20px;
    border-radius: var(--radius-full);
    font-weight: 500;
    font-size: 14px;
    transition: background var(--motion-ui);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .btn-pill:hover {
        background: #1A2D4D;
    }

/* --- Header / utility bar --- */
.utility-bar {
    background: #0A1628;
    color: rgba(246, 241, 231, 0.72);
    font-size: 13px;
}

    .utility-bar a {
        color: var(--color-bg);
    }

        .utility-bar a:hover {
            color: #FFFFFF;
        }

.site-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

    .site-header .nav-link {
        color: var(--color-fg);
        font-weight: 500;
        font-size: 15px;
        transition: color var(--motion-ui);
    }

        .site-header .nav-link:hover, .site-header .nav-link[aria-current="page"] {
            color: var(--color-accent);
        }

/* --- Stat tile (rate-board cell — most important component) --- */
.stat-tile {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
}

[data-count] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: var(--font-feature-tabular);
}

/* --- Reveal motion --- */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--motion-reveal), transform var(--motion-reveal);
}

    .reveal.in {
        opacity: 1;
        transform: none;
    }

/* --- Sections --- */
.section-pad {
    padding-top: var(--section-pad-y-mobile);
    padding-bottom: var(--section-pad-y-mobile);
    padding-left: var(--section-pad-x-mobile);
    padding-right: var(--section-pad-x-mobile);
}

@media (min-width: 768px) {
    .section-pad {
        padding-top: var(--section-pad-y-desktop);
        padding-bottom: var(--section-pad-y-desktop);
        padding-left: var(--section-pad-x-desktop);
        padding-right: var(--section-pad-x-desktop);
    }
}

.container {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
}

/* --- Hero diagonal texture (SVG-as-data-uri so no extra request) --- */
.hero-texture {
    position: relative;
    overflow: hidden;
}

    .hero-texture::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 60%;
        height: 60%;
        background-image: repeating-linear-gradient( 135deg, rgba(14, 31, 58, 0.04) 0, rgba(14, 31, 58, 0.04) 1px, transparent 1px, transparent 12px );
        pointer-events: none;
        mask-image: radial-gradient(ellipse at top left, black 0%, transparent 70%);
        -webkit-mask-image: radial-gradient(ellipse at top left, black 0%, transparent 70%);
    }

/* --- Hero with full-bleed building image --- */
.hero-image {
    position: relative;
    isolation: isolate;
    min-height: 78vh;
    min-height: 640px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--color-fg);
}

.hero-image__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 40%;
    z-index: 0;
}

.hero-image__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 22, 40, 0.45) 0%, rgba(10, 22, 40, 0.15) 35%, rgba(10, 22, 40, 0.85) 100%), linear-gradient(90deg, rgba(10, 22, 40, 0.55) 0%, rgba(10, 22, 40, 0.10) 55%, transparent 100%);
    z-index: 1;
}

.hero-image__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: clamp(80px, 14vh, 140px);
    padding-bottom: clamp(56px, 10vh, 96px);
}

.btn-pill-light {
    background: var(--color-bg);
    color: var(--color-fg);
    padding: 12px 22px;
    border-radius: var(--radius-full);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.01em;
    transition: background var(--motion-ui), transform var(--motion-ui);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .btn-pill-light:hover {
        background: #FFFFFF;
    }

@media (max-width: 767px) {
    .hero-image {
        min-height: 560px;
    }

    .hero-image__overlay {
        background: linear-gradient(180deg, rgba(10, 22, 40, 0.55) 0%, rgba(10, 22, 40, 0.30) 35%, rgba(10, 22, 40, 0.90) 100%);
    }
}

/* --- Cards (Why GIP) --- */
.feature-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-7) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: box-shadow var(--motion-ui), transform var(--motion-ui);
}

    .feature-card:hover {
        box-shadow: var(--shadow-md);
    }

    .feature-card .num {
        font-family: var(--font-display);
        font-size: 14px;
        color: var(--color-accent);
        letter-spacing: 0.04em;
    }

/* --- Link-arrow ("Learn More →") --- */
.link-arrow {
    color: var(--color-accent);
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap var(--motion-ui);
}

    .link-arrow:hover {
        gap: 10px;
    }

.link-arrow-on-dark {
    color: var(--color-bg);
}

    .link-arrow-on-dark:hover {
        color: #FFFFFF;
    }

/* --- News card (charcoal section) --- */
.news-card {
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding: var(--space-6) 0;
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: var(--space-5);
    align-items: baseline;
    color: var(--color-bg);
}

    .news-card:first-of-type {
        border-top: 1px solid rgba(255,255,255,0.12);
    }

    .news-card time {
        font-size: 13px;
        color: rgba(246, 241, 231, 0.6);
        letter-spacing: 0.04em;
    }

    .news-card .news-title {
        font-family: var(--font-display);
        font-size: 22px;
        line-height: 1.3;
        color: var(--color-bg);
    }

@media (max-width: 640px) {
    .news-card {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
}

/* --- Logo wall --- */
.logo-wall {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7) var(--space-6);
    align-items: center;
    justify-items: center;
}

@media (min-width: 768px) {
    .logo-wall {
        grid-template-columns: repeat(4, 1fr);
    }
}

.logo-wall .logo-tile {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--color-fg);
    text-align: center;
    letter-spacing: -0.01em;
    line-height: 1.2;
    opacity: 0.7;
    transition: opacity var(--motion-ui);
}

    .logo-wall .logo-tile:hover {
        opacity: 1;
    }

    .logo-wall .logo-tile small {
        display: block;
        font-family: var(--font-body);
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-muted);
        margin-top: 4px;
        font-weight: 500;
    }

/* --- Footer --- */
.site-footer {
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    color: var(--color-fg);
}

    .site-footer a {
        color: var(--color-fg);
        transition: color var(--motion-ui);
    }

        .site-footer a:hover {
            color: var(--color-accent);
        }

    .site-footer .col-title {
        font-size: 12px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-weight: 500;
        color: var(--color-muted);
        margin-bottom: var(--space-4);
    }

    .site-footer .disclosure {
        font-size: 12px;
        line-height: 1.6;
        color: var(--color-muted);
        max-width: 920px;
    }

/* --- Tables (rates, documents, governance roster) --- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-feature-settings: var(--font-feature-tabular);
}

    .data-table th {
        text-align: left;
        font-size: 12px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-weight: 500;
        color: var(--color-muted);
        padding: var(--space-4) var(--space-4);
        border-bottom: 1px solid var(--color-border);
        background: var(--color-bg);
        position: sticky;
        top: 0;
    }

        .data-table th.numeric, .data-table td.numeric {
            text-align: right;
        }

    .data-table td {
        padding: var(--space-4) var(--space-4);
        border-bottom: 1px solid var(--color-border);
        font-size: 15px;
        color: var(--color-fg);
    }

    .data-table tbody tr:hover {
        background: var(--color-surface);
    }

/* --- Document row --- */
.doc-row {
    display: grid;
    grid-template-columns: 1fr 160px 120px 90px 40px;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--motion-ui);
}

    .doc-row:hover {
        background: var(--color-surface);
        border-radius: var(--radius-sm);
    }

    .doc-row .doc-name {
        font-weight: 500;
        color: var(--color-fg);
    }

    .doc-row .doc-meta {
        font-size: 13px;
        color: var(--color-muted);
        font-variant-numeric: tabular-nums;
    }

    .doc-row .doc-download {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
        color: var(--color-fg);
        transition: background var(--motion-ui), color var(--motion-ui);
    }

        .doc-row .doc-download:hover {
            color: var(--color-accent);
            background: var(--color-bg);
        }

@media (max-width: 768px) {
    .doc-row {
        grid-template-columns: 1fr 36px;
        gap: var(--space-3);
    }

        .doc-row .doc-meta-stack {
            grid-column: 1 / 2;
            display: flex;
            gap: var(--space-3);
            flex-wrap: wrap;
        }

        .doc-row .doc-meta-mobile-hidden {
            display: none;
        }
}

/* --- Filter bar --- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

    .filter-bar select, .filter-bar input[type="search"] {
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        padding: 10px 14px;
        font-family: var(--font-body);
        font-size: 14px;
        color: var(--color-fg);
        transition: border-color var(--motion-ui);
    }

        .filter-bar select:focus, .filter-bar input:focus {
            outline: none;
            border-color: var(--color-accent);
            box-shadow: 0 0 0 3px rgba(181, 85, 46, 0.18);
        }

    .filter-bar input[type="search"] {
        min-width: 240px;
    }

/* --- Pills / badges --- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.pill-aaa {
    background: rgba(31, 107, 58, 0.1);
    color: var(--color-success);
}

.pill-warn {
    background: rgba(138, 90, 0, 0.1);
    color: var(--color-warning);
}

/* --- Form elements (login + contact) --- */
.field-label {
    font-size: var(--type-label);
    letter-spacing: var(--type-label-tracking);
    text-transform: uppercase;
    font-weight: var(--type-label-weight);
    color: var(--color-muted);
    margin-bottom: 8px;
    display: block;
}

.field-input {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-fg);
    transition: border-color var(--motion-ui), box-shadow var(--motion-ui);
    font-variant-numeric: tabular-nums;
}

    .field-input:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px rgba(181, 85, 46, 0.18);
    }

    .field-input.is-error {
        border-color: var(--color-error);
    }

/* --- Focus rings (global) --- */
a:focus-visible, button:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
    border-radius: var(--radius-sm);
}

/* --- Skip link --- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-fg);
    color: var(--color-bg);
    padding: 12px 20px;
    z-index: 100;
}

    .skip-link:focus {
        left: 8px;
        top: 8px;
    }

/* Header logo — never shrink or distort, in either auth state (laptop-width guard) */
.tx-header a[aria-label="TexSTAR home"] {
    flex-shrink: 0;
}

.tx-header .tx-logo-img {
    max-width: none;
    flex-shrink: 0;
}

/* ===== Mobile nav panel (all pages) ===== */
.nav-mobile {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(14, 31, 58, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding: 6px 24px 20px;
    z-index: 40;
}

@media (min-width: 768px) {
    .nav-mobile.is-open {
        display: none;
    }
}

.nav-mobile a, .nav-mobile button {
    display: block;
    width: 100%;
    text-align: left;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 14px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: none;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

    .nav-mobile a:active, .nav-mobile a:hover {
        color: #D2A86B;
    }

.nav-mobile__auth {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

    .nav-mobile__auth a:last-child {
        border-bottom: 0;
    }

.nav-mobile .m-auth-in {
    display: none;
}

body.is-logged-in .nav-mobile .m-auth-in {
    display: block;
}

body.is-logged-in .nav-mobile .m-auth-out {
    display: none;
}

/* ================================================
   Header nav lock (2026-07-29) — menu items must never
   wrap/collapse on narrow laptop screens (Dell 125% scaling).
   Links stay one line; gaps and type tighten instead.
   ================================================ */
.tx-header nav[aria-label="Primary"] {
    flex-wrap: nowrap;
}

    .tx-header nav[aria-label="Primary"] a {
        white-space: nowrap;
    }

.tx-header [data-auth-toggle] {
    white-space: nowrap;
}

@media (min-width: 768px) and (max-width: 1279px) {
    .tx-header nav[aria-label="Primary"] {
        gap: 1.1rem;
    }

        .tx-header nav[aria-label="Primary"] a {
            font-size: 12.5px;
            letter-spacing: 0.09em;
        }

    .tx-header [data-auth-toggle] {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
}
/* Very narrow desktop windows (e.g. 1366x768 at 150% scaling ≈ 911px wide):
   drop the logo to its sanctioned mobile size and tighten the row further */
@media (min-width: 768px) and (max-width: 1023px) {
    .tx-header .tx-logo-img {
        height: 48px;
    }

    .tx-header nav[aria-label="Primary"] {
        gap: 0.8rem;
    }

        .tx-header nav[aria-label="Primary"] a {
            font-size: 12px;
            letter-spacing: 0.07em;
        }

    .tx-header [data-auth-toggle] {
        padding: 0.65rem 1rem;
        font-size: 13px;
    }

    .tx-header a[href$="#contact"], .tx-header a[href="#contact"] {
        font-size: 12px;
    }
}

/* Logged-in header on narrow laptop windows (2026-07-29): the extra Participant
   Services item + Transactions/Log out pills overflow small screens (Chrome shows
   a horizontal scroll, Edge overlaps the logo). Tighten the whole row instead. */
@media (min-width: 768px) and (max-width: 1319px) {
    body.is-logged-in .tx-header .tx-logo-img {
        height: 48px;
    }

    body.is-logged-in .tx-header nav[aria-label="Primary"] {
        gap: 0.7rem;
        margin-left: 0.5rem;
    }

        body.is-logged-in .tx-header nav[aria-label="Primary"] a {
            font-size: 11.5px;
            letter-spacing: 0.06em;
        }

    body.is-logged-in .tx-header div:has(> [data-sign-out]) {
        margin-left: 0.5rem;
        gap: 0.4rem;
    }

    body.is-logged-in .tx-header a.rounded-full,
    body.is-logged-in .tx-header button[data-sign-out] {
        font-size: 11px;
        padding: 8px 12px;
    }

    body.is-logged-in .tx-header a[href$="#contact"],
    body.is-logged-in .tx-header a[href="#contact"] {
        font-size: 11px;
    }
}
/* Below ~960px logged-in there is no room left for the Contact Us text link;
   Contact stays reachable via the footer and the home page section */
@media (min-width: 768px) and (max-width: 1079px) {
    body.is-logged-in .tx-header a[href$="#contact"],
    body.is-logged-in .tx-header a[href="#contact"] {
        display: none;
    }

    body.is-logged-in .tx-header nav[aria-label="Primary"] {
        gap: 0.5rem;
    }

        body.is-logged-in .tx-header nav[aria-label="Primary"] a {
            font-size: 11px;
            letter-spacing: 0.04em;
        }

    body.is-logged-in .tx-header a.rounded-full,
    body.is-logged-in .tx-header button[data-sign-out] {
        font-size: 10.5px;
        padding: 7px 10px;
    }
}
/* Narrowest desktop-layout windows (usually reached by zooming in): switch to the
   mobile hamburger header early — guaranteed fit for both auth states */
@media (min-width: 768px) and (max-width: 879px) {
    .tx-header nav[aria-label="Primary"] {
        display: none;
    }

    .tx-header [data-nav-toggle] {
        display: block;
    }

    .tx-header a[href$="#contact"], .tx-header a[href="#contact"] {
        display: none;
    }

    body.is-logged-in .tx-header div:has(> [data-sign-out]) {
        display: none;
    }

    .tx-header [data-auth-toggle] {
        display: inline-flex;
    }

    .nav-mobile.is-open {
        display: flex !important;
    }
}