/* ============================================================================
 * jobhustl - main.css  (ROOT LEVEL - flattened per project rule)
 * ----------------------------------------------------------------------------
 * THE ONE STYLESHEET for the whole site (frontend + admin panel), per the
 * project rules. It is organized as a small standard library of elements:
 *
 *   FONTS     - Reddit Sans (headings/body) + local monospacefont1.ttf
 *               (Noto Sans Mono Medium) with a Google Fonts fallback.
 *   TOKENS    - design colors, radii, spacing (cream bg, navy text, orange)
 *   TEXT      - 5 types: .h-display, .h-page, .text-body, .text-soft, .mono
 *   BUTTONS   - 4 types: .btn-primary, .btn-wire, .btn-ghost, .btn-danger
 *               (+ .btn-sm small size). All are pills.
 *   PILLS     - 5 types: .pill-orange, .pill-blue, .pill-gray, .pill-chip,
 *               .pill-salary
 *   PANELS    - 4 types: .panel (card), .panel-soft (tinted), .panel-outline
 *               (dashed), .panel-accent (orange-left border)
 *   LAYOUT    - .topbar, .container (max 950px), .grid helpers
 *   COMPONENTS- job cards, forms, tables (admin), stat blocks, footer
 *   VARIANTS  - extra classes used only by index2/3/4 (split, banner, grid)
 *
 * 2026-11 UPDATE 1: overall font sizes were increased roughly 10-15% across
 * the whole site (the page read too small). Base body copy went from 16px
 * to 17.5px, job summaries from 14.5px to 16.5px, pills from 11.5px to
 * 13px, and so on. Also: every pill row is now pinned to the LEFT edge
 * (section 5a) so keyword chips never look stretched or "justified".
 *
 * 2026-11 UPDATE 2 (HERO + MARQUEE):
 *   - This file now lives at the ROOT level (was css/main.css) - no nested
 *     css/ folder. All pages link it as <link rel="stylesheet" href="/main.css">.
 *   - The home hero now shows the SVG logo (.hero-logo) and the switching
 *     marquee headline (.switch-marquee with .marquee-line spans): three
 *     statements rotate every 6 seconds, fading out at the end of each
 *     6-second window while gently sliding 20px to the right, then the
 *     next one fades in back at the left-aligned start position. Pure CSS,
 *     no JavaScript needed.
 *   - Both the marquee headline and the hero logo are sized per breakpoint
 *     in ALL 7 responsive tiers (see sections 7a and 15).
 *   - New logo slots: .brand-logo (small logo in the sticky topbar) and
 *     .footer-logo (logo above the footer links).
 *
 * 2026-11 UPDATE 3 (TOPBAR REDESIGN, achocodes style):
 *   - One pill SEARCH BAR now lives in the topbar between the logo and
 *     the buttons: rounded full-pill input with a circular orange GO
 *     button (magnifier SVG) tucked inside its right end.
 *   - Every nav pill and account button carries an inline SVG icon.
 *   - .ico class: sizing/behavior for the inline SVG icons.
 *   - .btn is now inline-flex (icon + label center inside buttons).
 *     (UPDATE 3's original 3-tier phone/tablet/desktop arrangement is
 *     superseded by UPDATE 4 below.)
 *
 * 2026-11 UPDATE 4 (HEADER FINAL PASS):
 *   - Guests get ONE account button, "Sign Up" -> /signin ("Sign In" +
 *     "Get Started" never appear at the same time; "Get Started" is
 *     gone). Nav pills + account buttons carry stable classes
 *     (nav-jobs / nav-matches / nav-pricing / nav-contact / acc-*),
 *     and .topbar-nav gets the "user-in" state class when signed in.
 *   - THE ONE-ROW TOPBAR now starts at 1024px (not 1280px): logo,
 *     search growing in the middle, then the nav pills with the account
 *     pinned FAR right (spread out). The topbar may run past the 950px
 *     content column: up to 1100px at 1024-1279, then 1200px from
 *     1280px. Buttons never stack on large monitors; if a very wide
 *     signed-in set ever needs more room, the account group wraps to
 *     its own line pinned right (graceful fallback, rare).
 *   - 768-1023px keeps the TWO-ROW design: logo + search on row 1,
 *     all buttons on row 2 (nav left, account right).
 *   - THE CONDENSED SET (7f): below 768px only the buttons that matter
 *     stay visible. Guests: Jobs, Best Matches, Go Pro, Sign Up (plus
 *     Pricing + Contact from 601px). Signed-in: Jobs, My Profile,
 *     PRO/Go Pro, Sign Out (Best Matches joins from 601px).
 *   - THE FLAT BUTTON BAR (7e, <=550px): row 2 becomes a segmented
 *     strip of rectangular, evenly divided cells - no pill radius, no
 *     icons, hairline 1px vertical separators between cells and a 1px
 *     line across the top of the row, all in var(--border). The cell
 *     font scales with the viewport (clamp) so labels always fit.
 *   - The phone search bar sits NEXT TO the small logo on row 1 at
 *     every width (no separate search row).
 *
 * RESPONSIVENESS: 7 tiers. Mobile-first base, then:
 *   >=480px   big phones (Samsung Note 10 class)
 *   >=600px   phablets
 *   >=768px   small tablets
 *   >=900px   (variants only) split layout gains its rail
 *   >=1024px  iPads / small laptops
 *   >=1280px  regular laptops and desktops
 *   >=1600px  2.5k monitors and above (a touch more breathing room)
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
 * 1. FONTS - the only two permitted anywhere on jobhustl.
 * -------------------------------------------------------------------------*/
/* The site's mono face: the file you place in the web root, monospacefont1.ttf
 * (Noto Sans Mono Medium). If the file is missing, the Google Fonts copy of
 * Noto Sans Mono is used, then system monospace. Nothing else is ever used. */
@font-face {
    font-family: "jobhustl-mono";
    src: url("/monospacefont1.ttf") format("truetype");
    font-weight: 500;
    font-display: swap;
}

:root {
    --font-sans: "Reddit Sans", "Segoe UI", Arial, sans-serif;
    --font-mono: "jobhustl-mono", "Noto Sans Mono", "SF Mono", Consolas, monospace;

    /* ---- 2. DESIGN TOKENS (from the reference screenshots) ---- */
    --bg: #FAF7F1;
    /* warm gentle cream page background */
    --bg-soft: #F4EFE4;
    /* slightly deeper cream for insets */
    --card: #FDFCFA;
    /* card/panel surface */
    --text: #001F47;
    --text2: #002F6D;
    --text3: #4D6D99;
    --text4: #92A6C0;
    /* dark navy blue - headings, job titles */
    --button1: #131F3F;
    --text-soft: #3A4562;
    /* body text */
    --muted: #6B7280;
    /* secondary text */
    --muted-2: #9CA3AF;
    /* faint text */
    --border: #E8E2D4;
    /* warm hairline borders */
    --orange: #F97316;
    /* light orange accent - match numbers, PRO */
    --orange-deep: #9A3412;
    /* orange text on soft-orange pills */
    --orange-soft: #FED7AA;
    /* soft orange pill background */
    --chip-bg: #EEF2FE;
    /* blue keyword chip background */
    --chip-text: #3B4FD8;
    /* blue keyword chip text */
    --radius-pill: 999px;
    --radius-card: 14px;
    --radius-sm: 9px;
}

/* ---------------------------------------------------------------------------
 * 3. RESET + BASE
 * -------------------------------------------------------------------------*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 17.5px;
    /* was 16px - overall size bump */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}


/* ---- 3a. HOME HERO: LOGO + SWITCHING MARQUEE -------------------------------
 * The hero shows the SVG logo, then an H2-sized rotating headline in
 * --text3. Three statements take turns; each one:
 *   - fades in at its start (left-aligned, no offset),
 *   - slowly slides 20px to the right over its full 6 seconds on screen,
 *   - fades out right at the 6-second mark, as the next one fades in.
 * Pure CSS: the three .marquee-line spans are stacked in one grid cell
 * (grid-area 1/1) so the box is always as tall as the tallest line and
 * the layout NEVER jumps between statements. One 18s keyframe cycle
 * (3 lines x 6 seconds) is shared by all lines, staggered by
 * animation-delay. Sizing per breakpoint lives in section 15.
 * --------------------------------------------------------------------------*/
.hero-logo {
    /* Base width (small phones). Resized again in every responsive tier. */
    width: 240px;
    height: auto;
    display: block;
    margin: 26px 0 6px;
}

.switch-marquee {
    /* The rotating headline itself (an <h2> in index.php). */
    display: grid;
    font-weight: 800;
    font-size: 29px;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--text3);
    margin: 6px 0 20px;
}

.marquee-line {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateX(0);
    animation: marquee-cycle 18s linear infinite;
    animation-delay: 0s;
    will-change: opacity, transform;
    pointer-events: none;
}

/* Stagger the three lines: line 1 starts immediately, line 2 takes over
 * at 6s, line 3 at 12s, then line 1 again at 18s - forever. */
.marquee-line:nth-child(2) {
    animation-delay: 6s;
}

.marquee-line:nth-child(3) {
    animation-delay: 12s;
}

/* One cycle = 18s. 1% = 0.18s. Each line's visible window is its first
 * 33.33% (6 seconds): fade in by 2.8% (0.5s), stay fully visible until
 * 30.6% (5.5s), fade out by 33.33% (6s) - while translateX tweens 0px
 * -> 20px LINEARLY across the whole window, then the line hides. */
@keyframes marquee-cycle {
    0% {
        opacity: 0;
        transform: translateX(0);
    }

    2.8% {
        opacity: 1;
    }

    30.6% {
        opacity: 1;
    }

    33.33% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 0;
        transform: translateX(20px);
    }
}

/* Accessibility: visitors who ask the OS to reduce motion get a static
 * headline (the first statement) instead of the rotation. */
@media (prefers-reduced-motion: reduce) {
    .marquee-line {
        animation: none;
        opacity: 0;
    }

    .marquee-line:nth-child(1) {
        opacity: 1;
    }
}

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

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
}

/* ---- TEXT: the 5 permitted text types ------------------------------------- */
.h-display {
    /* 1. hero/section display heading */
    font-weight: 800;
    font-size: clamp(42px, 6.5vw, 70px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text);
}

.h-page {
    /* 2. light page/form heading: "Sign In" etc. */
    font-weight: 300;
    font-size: clamp(30px, 4.5vw, 46px);
    letter-spacing: -0.01em;
    color: var(--text);
    opacity: 0.85;
}

.text-body {
    /* 3. standard body copy */
    font-size: 17px;
    color: var(--text-soft);
    line-height: 1.65;
}

.text-soft {
    /* 4. muted helper copy */
    font-size: 15.5px;
    color: var(--muted);
}

.mono {
    /* 5. monospace - meta, stats, labels */
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 14px;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.eyebrow {
    /* small orange kicker above headings */
    font-family: var(--font-mono);
    font-size: 13.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 14px;
}

/* ---------------------------------------------------------------------------
 * 4. BUTTONS - exactly 4 types, all pill-shaped. Wire = outline.
 * -------------------------------------------------------------------------*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--text);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.btn:hover {
    text-decoration: none;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
}

/* NEW 2026-11: inline SVG icons inside buttons (Sign In, Get Started,
 * Go Pro, Sign Out). .ico sizing for plain nav pills lives in section 7. */
.btn .ico {
    width: 14px;
    height: 14px;
}

.btn-primary {
    background: var(--text);
    color: #FFFFFF;
}

/* 1: filled */
.btn-primary:hover {
    background: #085191;
    border-color: #085191;
}

.btn-wire {
    background: transparent;
    color: var(--text);
}

/* 2: outline */
.btn-wire:hover {
    background: var(--text);
    color: #FFFFFF;
}

.btn-ghost {
    /* 3: quiet */
    border-color: var(--border);
    background: transparent;
    color: var(--text-soft);
}

.btn-ghost:hover {
    border-color: var(--text-soft);
    color: var(--text);
}

.btn-danger {
    /* 4: destructive */
    border-color: #B4233B;
    background: transparent;
    color: #B4233B;
}

.btn-danger:hover {
    background: #B4233B;
    border-color: #B4233B;
    color: #fff;
}

/* ---------------------------------------------------------------------------
 * 5. PILLS / LABELS - 5 types, all pill-shaped.
 * -------------------------------------------------------------------------*/
.pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 13px;
    /* was 11.5px - chips now readable */
    letter-spacing: 0.06em;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.pill-orange {
    background: var(--orange-soft);
    color: var(--orange-deep);
}

.pill-blue {
    background: var(--chip-bg);
    color: var(--chip-text);
}

.pill-gray {
    background: var(--bg-soft);
    color: var(--text-soft);
}

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

.pill-salary {
    background: var(--bg-soft);
    color: var(--text-soft);
}

/* ---- 5a. PILL ROW ALIGNMENT ----------------------------------------------
 * Every row that holds pills (job type, salary, keyword chips) starts at
 * the LEFT edge and wraps left. Without this, wide rows can read as
 * "justified"/stretched. Both flex containers that carry pills are pinned
 * here so the chips always hug the left margin.
 * -------------------------------------------------------------------------*/
.job-card-meta,
.job-card-tags {
    justify-content: flex-start;
    text-align: left;
}

/* Match score: bold light-orange number, e.g. 56 / 78 / 95 */
.match-badge {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 26px;
    color: var(--orange);
    line-height: 1;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
 * 6. PANELS - 4 containers for content.
 * -------------------------------------------------------------------------*/
.panel {
    /* 1: standard white card */
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 24px;
}

.panel-soft {
    /* 2: subtle tinted panel (very subtle bg) */
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 24px;
}

.panel-outline {
    /* 3: dashed outline - empty states, upsells */
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--radius-card);
    padding: 28px;
    text-align: center;
}

.panel-accent {
    /* 4: orange-edged callout ("go pro" nudges) */
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--orange);
    border-radius: var(--radius-card);
    padding: 24px;
}

/* ---------------------------------------------------------------------------
 * 7. LAYOUT: topbar (logo + pill search + buttons), container (NEVER wider
 *    than 950px), footer.
 *
 * THE TOPBAR (2026-11 final pass). Below 1024px the .topbar-inner is a CSS
 * GRID with TWO rows: row 1 = logo + pill search side by side, row 2 =
 * every button. From 1024px up it becomes ONE flex row (see section 15):
 * logo / search growing in the middle / nav pills + account spread out.
 * The search is a full-pill input with a circular orange GO button
 * (magnifier SVG) inside its right end. All icons are inline SVGs with
 * stroke="currentColor", sized by the .ico class below.
 * -------------------------------------------------------------------------*/
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 247, 241, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}

/* Phones first: row 1 = logo + search side by side, row 2 = buttons.
 * (At <=550px the button row becomes THE FLAT BAR - see 7e.) */
.topbar-inner {
    max-width: 950px;
    margin: 0 auto;
    padding: 12px 20px;
    display: grid;
    grid-template-columns: auto minmax(150px, 1fr);
    grid-template-areas:
        "brand search"
        "nav nav";
    gap: 10px 18px;
    align-items: center;
}

/* ---- 7a. THE PILL SEARCH BAR ----------------------------------------------
 * Rounded full-pill input; the circular orange GO button sits inside the
 * right end (padding 3px keeps it snug like the achocodes search box).
 * The whole pill glows softly orange via :focus-within. -------------------*/
.topbar-search {
    grid-area: search;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 3px 3px 3px 18px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.topbar-search:focus-within {
    border-color: var(--text4);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.09);
}

.topbar-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 15.5px;
    font-weight: 500;
    color: var(--text);
    padding: 8px 0;
}

.topbar-search input::placeholder {
    color: var(--muted);
    opacity: 0.9;
}

/* The circular orange GO button - the search's signature move. */
.search-go {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--orange);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.search-go:hover {
    background: #FB923C;
    transform: scale(1.06);
}

.search-go:active {
    transform: scale(0.96);
}

.search-go .ico {
    width: 17px;
    height: 17px;
    stroke-width: 2.4;
}

/* ---- 7b. INLINE SVG ICONS --------------------------------------------------
 * Every icon (nav pills, buttons, search) is an inline <svg class="ico">
 * with stroke="currentColor", so it inherits the text color of whatever
 * it sits in. ----------------------------------------------------------------*/
.ico {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* ---- 7c. BRAND -------------------------------------------------------------
 * The SVG logo (.brand-logo); the old wordmark styles (.brand-dot) stay
 * for any leftover page. -----------------------------------------------------*/
.brand {
    grid-area: brand;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.brand:hover {
    text-decoration: none;
}

/* Small topbar copy of the logo (the big hero copy is .hero-logo).
 * Very small on phones; grows per tier in section 15. */
.brand-logo {
    width: 92px;
    height: auto;
    display: block;
}

.brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--orange);
    display: inline-block;
}

/* ---- 7d. NAV PILLS + ACCOUNT BUTTONS ---------------------------------------
 * .topbar-nav wraps .nav-main + .nav-account. Base sizing is compact
 * (phones); section 15 enlarges from 768px. The stable classes printed
 * by layout.php (nav-jobs, nav-matches, nav-pricing, nav-contact,
 * acc-saved, acc-profile, acc-pro, acc-auth, acc-signout) drive the
 * condensed set in 7f. The account group pins right via margin-left.
 * --------------------------------------------------------------------------*/
.nav-main {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-soft);
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.nav-link .ico {
    width: 14px;
    height: 14px;
    color: var(--text3);
}

.nav-link:hover {
    color: var(--text);
    background: var(--bg-soft);
    text-decoration: none;
}

.nav-link:hover .ico {
    color: var(--text2);
}

.nav-link.active {
    color: var(--text);
    background: var(--bg-soft);
    font-weight: 600;
}

.nav-link.active .ico {
    color: var(--text2);
}

.nav-account {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    margin-left: auto;
}

.topbar-nav {
    grid-area: nav;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---- 7e. THE FLAT BUTTON BAR (phones, <=550px) ------------------------------
 * Row 2 becomes a segmented strip: .nav-main and .nav-account dissolve
 * (display: contents) so every visible button is an equal cell of the
 * strip. Cells are rectangular, centered and icon-free; hairline 1px
 * separators between them and a 1px line across the top of the row,
 * all in var(--border). The strip runs edge to edge and sits flush on
 * the header's bottom border. The cell font grows with the viewport
 * between ~360px and ~540px so labels always fit. ---------------------------*/
@media (max-width: 550px) {
    .topbar-inner {
        padding-bottom: 0;
    }

    .topbar-nav {
        flex-wrap: nowrap;
        gap: 0;
        border-top: 1px solid var(--border);
        margin: 2px -20px 0;
        font-family: var(--font-sans);
        font-size: clamp(11px, 2.6vw, 14px);
    }

    .nav-main,
    .nav-account {
        display: contents;
    }

    .topbar-nav .nav-link,
    .topbar-nav .btn,
    .topbar-nav .pill {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-left: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
        color: var(--text-soft);
        font-family: var(--font-sans);
        font-size: inherit;
        font-weight: 600;
        letter-spacing: 0;
        padding: 11px 4px 12px;
        white-space: nowrap;
        overflow: hidden;
    }

    /* The very first cell (Jobs) has no left separator. */
    .topbar-nav .nav-main > :first-child {
        border-left: 0;
    }

    .topbar-nav .nav-link:hover,
    .topbar-nav .btn:hover {
        background: var(--bg-soft);
        color: var(--text);
    }

    .topbar-nav .nav-link.active {
        color: var(--text);
        background: var(--bg-soft);
    }

    /* No icons in the flat cells. */
    .topbar-nav .ico {
        display: none;
    }
}

/* ---- 7f. THE CONDENSED BUTTON SET (below 768px) ----------------------------
 * Small screens cannot hold every button, so each state keeps only the
 * buttons that matter; everything returns from 768px up (the two-row
 * mid design shows the full set). Controlled by the nav-*/acc-* classes
 * and the "user-in" state class printed by layout.php.
 *   guests  <=600px : Jobs, Best Matches, Go Pro, Sign Up
 *   guests  601-767 : + Pricing, Contact
 *   signed  <=600px : Jobs, My Profile, PRO (or Go Pro), Sign Out
 *   signed  601-767 : + Best Matches
 * --------------------------------------------------------------------------*/
@media (max-width: 767px) {
    /* Signed-in tablets-and-below drop Pricing, Contact and Saved
     * (all still one tap away via /profile and /matches). */
    .user-in .nav-pricing,
    .user-in .nav-contact,
    .user-in .acc-saved {
        display: none;
    }
}

@media (max-width: 600px) {
    .nav-pricing,
    .nav-contact,
    .user-in .nav-matches {
        display: none;
    }
}

.container {
    max-width: 950px;
    margin: 0 auto;
    padding: 40px 20px 72px;
}

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--card);
}

.footer-inner {
    max-width: 950px;
    margin: 0 auto;
    padding: 26px 20px;
    font-size: 14px;
    color: var(--muted);
}

/* NEW 2026-11: the SVG logo sits above the footer links.
 * Markup (in includes/layout.php):
 * <img src="/jobhustl_logo_find_jobs_easily.svg" class="footer-logo"
 *      alt="jobhustl - find jobs easily" /> */
.footer-logo {
    width: 128px;
    height: auto;
    display: block;
    margin-bottom: 12px;
    opacity: 0.9;
}

.footer-inner a {
    color: var(--muted);
    margin-right: 4px;
}

/* Two-column helper (profile page, pricing). */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.stat-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.stat {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat .num {
    font-weight: 800;
    font-size: 30px;
    color: var(--orange);
    line-height: 1;
}

.stat .label {
    font-family: var(--font-mono);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

/* ---------------------------------------------------------------------------
 * 8. JOB CARDS
 * -------------------------------------------------------------------------*/
.job-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 22px 24px;
    margin-bottom: 16px;
    transition: border-color 0.15s ease;
}

.job-card:hover {
    border-color: #D6CDB8;
}

.job-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.job-card-title {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 8px;
}

.job-card-title a:hover {
    text-decoration: none;
    border-bottom: 2px solid var(--orange);
}

.job-card-meta {
    margin: 8px 0 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: center;
}

.job-card-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.job-card-desc {
    font-size: 17.5px;
    color: var(--text-soft);
    margin-bottom: 14px;
    font-weight: 500;
}

.job-card-foot {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.job-card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.heart {
    font-family: var(--font-mono);
    font-size: 14px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.heart:hover {
    border-color: var(--orange);
    color: var(--orange-deep);
}

.heart.hearted {
    background: var(--orange-soft);
    color: var(--orange-deep);
    border-color: var(--orange-soft);
}

/* ---------------------------------------------------------------------------
 * 9. FORMS
 * -------------------------------------------------------------------------*/
.form-panel {
    max-width: 520px;
}

.field {
    margin-bottom: 18px;
}

.field label {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field select,
.field textarea,
.field input[type="file"] {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    outline: none;
    transition: border-color 0.15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--text-soft);
}

.field textarea {
    min-height: 110px;
    resize: vertical;
}

.field .hint {
    font-size: 13.5px;
    color: var(--muted-2);
    margin-top: 5px;
}

.check-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 6px 0 16px;
}

.check-row label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    color: var(--text-soft);
    cursor: pointer;
}

.check-row input {
    accent-color: var(--orange);
    width: 16px;
    height: 16px;
}

.flash-ok {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #065F46;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 15.5px;
}

.flash-err {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 15.5px;
}

/* ---------------------------------------------------------------------------
 * 10. PRICING TABLE
 * -------------------------------------------------------------------------*/
.price-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: stretch;
}

.price-card {
    position: relative;
}

.price-card.featured {
    border-color: var(--orange);
}

.price-card .price-num {
    font-weight: 800;
    font-size: 50px;
    color: var(--text);
    line-height: 1;
}

.price-card .price-per {
    color: var(--muted);
    font-size: 15px;
}

.price-list {
    list-style: none;
    margin: 18px 0 22px;
}

.price-list li {
    padding: 7px 0;
    font-size: 16px;
    color: var(--text-soft);
    border-bottom: 1px solid var(--border);
}

.price-list li:last-child {
    border-bottom: none;
}

.price-list li::before {
    content: "* ";
    color: var(--orange);
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * 11. PAGINATION
 * -------------------------------------------------------------------------*/
.pager {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.pager a,
.pager span {
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    font-size: 15px;
    color: var(--text-soft);
    background: var(--card);
}

.pager .current {
    background: var(--text);
    color: #fff;
    border-color: var(--text);
    font-weight: 600;
}

.pager a:hover {
    border-color: var(--text);
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * 12. JOB DETAIL PAGE
 * -------------------------------------------------------------------------*/
.job-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.job-detail-meta {
    margin: 10px 0 16px;
}

.quote-list {
    list-style: none;
    margin: 14px 0;
}

.quote-list li {
    padding: 10px 0 10px 18px;
    border-left: 3px solid var(--orange-soft);
    margin-bottom: 6px;
    color: var(--text);
    font-size: 18.5px;
    line-height: 1.5;
    font-weight: 500;
}

.link-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

/* ---------------------------------------------------------------------------
 * 13. ADMIN PANEL (same file, per project rules)
 * -------------------------------------------------------------------------*/
.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 30px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    background: var(--card);
}

.admin-table th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    padding: 10px 12px;
    border-bottom: 2px solid var(--border);
}

.admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-soft);
    vertical-align: top;
}

.admin-table tr:hover td {
    background: var(--bg-soft);
}

.admin-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

/* ---- 13a. ADMIN TOPBAR (admin/index.php) --------------------------------
 * The admin panel uses the public topbar structure but with a plain
 * wordmark (brand-dot + text, no SVG logo), no search bar, and 7 tabs.
 * The flat button bar (7e) would squeeze those 7 tabs into equal
 * rectangular cells on phones, which cannot fit; these later rules of
 * higher specificity keep them as wrapping pills at every width, with
 * hairline outlines. The topbar nav also carries the legacy "admin-tabs"
 * class, so its bottom margin is reset (that rule above targets the
 * in-page tab rows, not the chrome). ------------------------------------*/
.admin-brand {
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.02em;
    color: var(--text);
    white-space: nowrap;
}

.topbar-inner.admin-top .topbar-nav.admin-tabs {
    margin-bottom: 0;
}

@media (max-width: 550px) {
    /* Undo 7e (edge-to-edge flat strip) for the admin tabs. */
    .topbar-inner.admin-top {
        padding-bottom: 12px;
    }

    .topbar-nav.admin-tabs {
        flex-wrap: wrap;
        gap: 6px;
        border-top: 0;
        margin: 0;
        font-size: 14px;
    }

    .topbar-nav.admin-tabs .nav-main,
    .topbar-nav.admin-tabs .nav-account {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0;
        padding: 0;
    }

    .topbar-nav.admin-tabs .nav-link,
    .topbar-nav.admin-tabs .btn,
    .topbar-nav.admin-tabs .pill {
        flex: 0 0 auto;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: var(--radius-pill);
        background: transparent;
        color: var(--text-soft);
        font-size: 14px;
        font-weight: 600;
        padding: 6px 10px;
        white-space: nowrap;
        overflow: visible;
    }

    .topbar-nav.admin-tabs .nav-main > :first-child {
        border-left: 1px solid var(--border);
    }
}

/* ---------------------------------------------------------------------------
 * 14. HOME PAGE VARIANTS - classes used only by index2/3/4.php.
 * They reuse the standard elements above; nothing here changes index.php.
 * -------------------------------------------------------------------------*/

/* --- Shared by all variants: the go-pro nudge row at the bottom. --- */
.pro-strip {
    margin-top: 30px;
}

/* --- index2.php "SPLIT VIEW": a left rail (pitch, sign-in, stacked
 * stats) beside the job feed. The rail sticks while the feed scrolls
 * on >=900px screens; on phones everything stacks rail-first. --- */
.home-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: start;
}

.home-rail {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.rail-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (min-width: 900px) {
    .home-split {
        grid-template-columns: 330px 1fr;
        gap: 40px;
    }

    .home-rail {
        position: sticky;
        top: 84px;
    }

    .rail-stats {
        grid-template-columns: 1fr;
    }
}

/* --- index3.php "BIG BANNER": centered hero, then ONE wide white card
 * holding the three headline numbers side by side with hairline
 * dividers between them. --- */
.hero-center {
    text-align: center;
    max-width: 740px;
    margin: 0 auto 34px;
}

.stat-banner {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    margin-bottom: 34px;
}

.stat-cell {
    padding: 12px 8px;
}

.stat-cell .num {
    display: block;
    font-weight: 800;
    font-size: 36px;
    color: var(--orange);
    line-height: 1.1;
}

.stat-cell .label {
    font-family: var(--font-mono);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

@media (min-width: 600px) {
    .stat-banner {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .stat-cell+.stat-cell {
        border-left: 1px solid var(--border);
    }
}

/* --- index4.php "CARD GRID": heading and stats share one hero row,
 * then job cards flow into TWO columns on laptop/desktop. --- */
.hero-row {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 30px;
}

.hero-row .stat-row {
    margin-bottom: 0;
}

.job-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* Inside a grid the card's own bottom margin would double the gap,
 * so it is zeroed here and the grid gap does the spacing instead. */
.job-grid .job-card {
    margin-bottom: 0;
}

@media (min-width: 1024px) {
    .hero-row {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .job-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
}

/* ---------------------------------------------------------------------------
 * 15. RESPONSIVE - 7 TIERS (mobile-first; tiers listed in the header comment)
 * -------------------------------------------------------------------------*/

/* Tier 2: big phones, e.g. Samsung Note 10 (>=480px) */
@media (min-width: 480px) {
    .container {
        padding: 48px 24px 80px;
    }

    .stat .num {
        font-size: 34px;
    }

    .hero-logo {
        width: 280px;
    }

    .switch-marquee {
        font-size: 33px;
    }

    /* Topbar: the search GO circle and the logo grow a touch. */
    .search-go {
        width: 40px;
        height: 40px;
    }

    .brand-logo {
        width: 100px;
    }
}

/* Tier 3: phablets / small tablets portrait (>=600px) */
@media (min-width: 600px) {
    .admin-stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .price-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero-logo {
        width: 310px;
    }

    .switch-marquee {
        font-size: 37px;
    }

    .brand-logo {
        width: 108px;
    }
}

/* Tier 4: small tablets / Note-class landscape (>=768px) - the full
 * TWO-ROW mid design: logo + search on row 1, ALL buttons on row 2
 * (nav left, account pinned right). Pills + icons return to full size
 * and the condensed set (7f) stops hiding buttons. */
@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr 1fr;
    }

    .job-card {
        padding: 24px 26px;
    }

    .container {
        padding: 52px 28px 88px;
    }

    .hero-logo {
        width: 340px;
    }

    .switch-marquee {
        font-size: 42px;
    }

    .topbar-inner {
        padding: 14px 20px;
        grid-template-columns: auto minmax(220px, 1fr);
    }

    .nav-link {
        font-size: 15px;
        padding: 7px 12px;
        gap: 7px;
    }

    .nav-link .ico {
        width: 15px;
        height: 15px;
    }
}

/* Tier 5: iPads / small laptops (>=1024px) - THE ONE-ROW TOPBAR begins:
 * logo / search growing in the middle / nav pills + account spread out,
 * account pinned FAR right. The topbar may run past the 950px content
 * column (up to 1100px here, 1200px from 1280px) so the buttons NEVER
 * stack on large monitors. If a very wide signed-in set ever needs more
 * room, the account group wraps to its own line, pinned right. */
@media (min-width: 1024px) {
    .form-panel {
        max-width: 560px;
    }

    .hero-logo {
        width: 370px;
    }

    .switch-marquee {
        font-size: 47px;
    }

    .nav-main {
        gap: 8px;
    }

    .topbar-inner {
        max-width: 1100px;
        padding: 14px 24px;
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .topbar-search {
        flex: 1 1 200px;
        max-width: 480px;
    }

    .topbar-nav {
        flex: 1 1 auto;
        justify-content: space-between;
        gap: 18px;
        margin-left: 6px;
    }

    .topbar-search input {
        font-size: 16px;
    }
}

/* Tier 6: regular laptops and desktops (>=1280px) - same ONE-ROW topbar
 * with more room: the header widens to 1200px; the content column below
 * stays 950px. */
@media (min-width: 1280px) {
    .container {
        padding: 56px 0 96px;
    }

    .topbar-inner {
        max-width: 1200px;
        padding: 14px 0;
    }

    .brand-logo {
        width: 120px;
    }

    .footer-inner {
        padding: 26px 0;
    }

    .hero-logo {
        width: 400px;
    }

    .switch-marquee {
        font-size: 52px;
    }
}

/* Tier 7: 2.5k monitors and above (>=1600px) - keep the 950px content column
 * but scale typography slightly for large, dense screens. The topbar search
 * grows to 520px; the button row is untouched (1200px cap still holds). */
@media (min-width: 1600px) {
    body {
        font-size: 18px;
    }

    .h-display {
        font-size: 74px;
    }

    .hero-logo {
        width: 420px;
    }

    .switch-marquee {
        font-size: 56px;
    }

    .topbar-search {
        max-width: 520px;
    }
}