/* ==========================================================================
   CauseCircuit shared design system
   Loaded on every page after main.css and before any page-specific <style>
   block. Owns: tokens, header/nav, hero shell, particles, section/container
   layout, buttons, opportunity cards, popup, footer, scrollbar.
   ========================================================================== */

:root {
    --ink: #2c3e50;
    --ink-soft: #34495e;
    --surface-deep: #0f172a;
    --surface: #1e293b;
    --surface-soft: #334155;
    --panel-blue: #4C5C96;
    --panel-alt: #45558D;
    --border-soft: rgba(148, 163, 184, 0.18);
    --text-muted: #cbd5e1;
    --accent: #3b82f6;
    --accent-dark: #1d4ed8;
    --accent-light: #60a5fa;
    --success: #10b981;
    --success-dark: #059669;

    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-display: Raleway, var(--font-body);

    /* Spacing scale */
    --space-xs: 8px;
    --space-sm: 14px;
    --space-md: 22px;
    --space-lg: 40px;
    --space-xl: 52px;
    --space-2xl: 64px;

    /* Type scale */
    --text-xs: 0.8rem;
    --text-sm: 0.92rem;
    --text-md: 1rem;
    --text-lg: 1.22rem;
    --text-xl: 1.6rem;
    --text-2xl: 2rem;
    --text-3xl: clamp(2.6rem, 5vw, 3.75rem);
}

html {
    font-size: 16px;
}

body,
input,
select,
textarea {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #1e293b;
}

/* main.css's legacy template forces h1-h6 to Raleway, uppercase, and
   letter-spaced — override so Inter is the real default everywhere
   the design doesn't explicitly call for Raleway body copy. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: normal;
    color: inherit;
}

html {
    scroll-padding-top: 90px;
}

body {
    background: #d7e6f9;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Header ---------- */
#header {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    z-index: 50 !important;
    background: rgba(215, 230, 249, 0.85) !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid #b9d2f0 !important;
    box-sizing: border-box !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    padding-left: max(32px, calc((100% - 1180px) / 2)) !important;
    padding-right: max(32px, calc((100% - 1180px) / 2)) !important;
}

#header h1 {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    line-height: 1 !important;
}

#header h1 a {
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    font-size: 1.12rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.header-logo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin-right: 11px;
    object-fit: cover;
}

#header #nav ul.links li a {
    color: #64748b !important;
    font-weight: 500;
    font-size: 0.92rem;
    padding: 0;
    border: none;
    border-radius: 0;
    text-transform: none;
    letter-spacing: normal;
}

#header #nav ul.links li a:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: #0f172a !important;
}

#header #nav ul.links li a.active {
    color: #0f172a !important;
    font-weight: 600 !important;
}

#header #mobile-menu-toggle {
    color: #0f172a !important;
    width: 44px;
    height: 44px;
    margin: -6px -6px -6px 0;
    box-sizing: border-box;
}

/* The hamburger is an inline SVG rather than the template's `icon solid
   fa-bars` span. That glyph did render - main.css pulled in Font Awesome
   with an @import - but it was the only one on the site, so the whole
   icon font was loading for a single 24px shape. */
#header #mobile-menu-toggle .menu-icon {
    width: 24px;
    height: 24px;
    display: block;
}

@media screen and (max-width: 980px) {
    #header #mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* ---------- Mobile menu & scroll lock ---------- */
body.nav-open,
body.modal-open {
    overflow: hidden;
}

/* main.css's legacy template ships a flat dark #1e1e1e panel with white
   text and a red hover - restyle it to match the site's light header
   palette (same tokens used by the desktop #nav links) instead of the
   template default. */
#mobile-menu {
    background: #eef4fb !important;
    border-left: 1px solid #b9d2f0;
    box-shadow: -18px 0 48px rgba(15, 23, 42, 0.22);
}

#mobile-menu h2 {
    color: var(--ink) !important;
}

#mobile-menu .inner {
    position: relative;
}

#mobile-menu .close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    margin-top: 0 !important;
    box-sizing: border-box;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--ink);
    text-decoration: none;
    border-bottom: none !important;
}

#mobile-menu a {
    margin-top: 0 !important;
    padding: 14px 0 !important;
    min-height: 44px;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    color: #64748b !important;
    font-weight: 500;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

#mobile-menu a:hover {
    color: var(--accent-dark) !important;
}

#mobile-menu .mobile-nav-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    padding: 13px 20px !important;
    border-radius: 9px;
    background: #2563eb;
    color: #fff !important;
    font-weight: 600;
    border-bottom: none !important;
}

#nav a.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #2563eb;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    padding: 9px 18px !important;
    border-radius: 9px !important;
    border: none !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.22);
    text-decoration: none;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-left: 8px;
    transition: all 0.25s var(--ease);
}

#nav a.nav-cta:hover {
    background-color: #1d4ed8;
    color: #fff !important;
    border-color: transparent !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.32);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #2563eb;
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
}

.text-link:hover {
    color: #1d4ed8;
}

.text-link-teal {
    color: #0d9488;
}

.text-link-teal:hover {
    color: #0f766e;
}

/* ---------- Hero shell ---------- */
.hero-section {
    background: linear-gradient(160deg, #bcd6f5 0%, #d7e6f9 60%, #d7e6f9 100%);
    min-height: 40vh;
    padding: var(--space-xl) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: none;
}

.hero-content {
    color: #0f172a;
    max-width: 780px;
    padding: 0 20px;
    animation: fadeInUp 1.2s var(--ease);
    position: relative;
    z-index: 1;
}

.hero-content h1 {
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-bottom: var(--space-sm);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #0f172a;
}

.hero-content p {
    font-size: 1.2rem;
    opacity: 1;
    line-height: 1.65;
    font-family: var(--font-display);
    font-weight: 300;
    color: #5b6472;
}

.logo {
    margin-bottom: var(--space-md);
}

.logo-img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
}

/* ---------- Particles ---------- */
.particle {
    position: absolute;
    background: rgba(37, 99, 235, 0.28);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
    pointer-events: none;
}

.particle-1 { top: 20%; left: 10%; width: 8px;  height: 8px;  animation-delay: 0s; }
.particle-2 { top: 60%; left: 85%; width: 12px; height: 12px; animation-delay: 2s; }
.particle-3 { top: 80%; left: 20%; width: 6px;  height: 6px;  animation-delay: 4s; }
.particle-4 { top: 30%; left: 75%; width: 10px; height: 10px; animation-delay: 1s; }
.particle-5 { top: 70%; left: 60%; width: 8px;  height: 8px;  animation-delay: 3s; }

/* ---------- Layout primitives ---------- */
.content-section {
    padding: var(--space-2xl) 0;
    position: relative;
    background: transparent;
}

.section-alt {
    background: #c5dbf5;
    border-top: 1px solid #b9d2f0;
    border-bottom: 1px solid #b9d2f0;
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
}

.section-eyebrow {
    display: inline-block;
    color: #2563eb;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-xl);
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.section-header.animate {
    opacity: 1;
    transform: translateY(0);
}

.section-header h2 {
    font-size: var(--text-2xl);
    color: #0f172a;
    margin-bottom: var(--space-sm);
    font-weight: 800;
    letter-spacing: -0.02em;
    position: relative;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: #2563eb;
    border-radius: 2px;
}

.section-header p {
    font-size: var(--text-lg);
    color: #5b6472;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
    font-family: var(--font-display);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--text-sm);
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: all 0.25s var(--ease);
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: white !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.36);
}

.btn-success {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
    color: white !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.28);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.4);
}

.btn-light {
    background: white;
    color: var(--ink);
    border: 1px solid #e3e8ef;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.btn-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
    background: #2563eb;
    color: white !important;
    border-color: #2563eb;
}

.btn-ghost {
    background: linear-gradient(135deg, #eaf2fc 0%, #d7e6f9 100%);
    color: var(--ink);
    border: 1px solid #b9d2f0;
}

.btn-ghost:hover {
    background: linear-gradient(135deg, #d7e6f9 0%, #c3daf5 100%);
    border-color: #9dc0ee;
}

/* ---------- Opportunity cards (shared: index + opportunities pages) ---------- */
/* Fixed column counts rather than auto-fill. auto-fill derives the count from
   the container, so anywhere above ~950px it lands on four tracks while the
   homepage only ever renders six cards - the second row then sits half empty,
   and dragging the window makes the grid jump between three and four columns.
   Three columns keeps six cards as two even rows at every desktop width. */
.opportunities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-xs);
}

@media (max-width: 980px) {
    .opportunities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.opportunity-card {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
    opacity: 0;
    transform: translateY(28px);
    position: relative;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    border: 1px solid #b9d2f0;
}

.opportunity-card.animate {
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.5s var(--ease), box-shadow 0.35s var(--ease), opacity 0.5s var(--ease);
}

.opportunity-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16);
}

.card-image-container {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: #eef1f5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.opportunity-card img {
    width: 100%;
    height: 100%;
    /* Org-submitted images vary wildly in aspect ratio (square logos,
       wide banners, tall photos) - contain keeps the whole image legible
       instead of cover cropping the edges/subject off. */
    object-fit: contain;
    transition: transform 0.5s var(--ease);
}

.opportunity-card:hover img {
    transform: scale(1.06);
}

.location-tag {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(10px);
    color: #7dd3fc;
    padding: 6px 13px;
    border-radius: 20px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid rgba(96, 165, 250, 0.28);
    z-index: 2;
}

.card-content {
    padding: var(--space-md);
    position: relative;
    z-index: 2;
    text-align: left;
}

.card-content h3 {
    font-size: var(--text-lg);
    color: var(--ink);
    margin-bottom: 6px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.card-org {
    margin-bottom: var(--space-xs);
    color: var(--accent-dark);
    font-weight: 600;
    font-size: var(--text-sm);
}

.card-content p {
    color: #5b6472;
    line-height: 1.6;
    margin-bottom: var(--space-sm);
    font-size: var(--text-md);
    font-family: var(--font-body);
}

.card-desc-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 72px;
}

.commitment-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.commitment-tag {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-dark);
    padding: 4px 11px;
    border-radius: 12px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.hours-per-week {
    color: #8792a2;
    font-size: var(--text-sm);
    margin-bottom: var(--space-sm);
}

.card-btn {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: white !important;
    padding: 11px 22px;
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all 0.25s ease;
    cursor: pointer;
    border: none;
    font-size: var(--text-sm);
    gap: 6px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
}

.card-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.36);
}

.card-btn:after {
    content: ' →';
    transition: transform 0.25s ease;
}

.card-btn:hover:after {
    transform: translateX(3px);
}

.empty-state {
    text-align: center;
    color: #5b6472;
    width: 100%;
    grid-column: 1 / -1;
    padding: var(--space-lg) var(--space-md);
}

/* ---------- Popup (shared) ---------- */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 12, 24, 0.72);
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
    z-index: 10001;
    padding: 20px;
}

.popup.active {
    opacity: 1;
    visibility: visible;
}

.popup-content {
    background: #ffffff;
    border: 1px solid #b9d2f0;
    border-radius: 24px;
    max-width: min(90vw, 680px);
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
    transform: scale(0.94) translateY(24px);
    transition: transform 0.35s var(--ease);
    position: relative;
    display: flex;
    flex-direction: column;
}

.popup.active .popup-content {
    transform: scale(1) translateY(0);
}

.popup-header {
    position: relative;
    height: clamp(180px, 28vw, 280px);
    overflow: hidden;
    background: #eef1f5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.popup-header img {
    width: 100%;
    height: 100%;
    /* Match card thumbnails: contain instead of cover so full-size org
       logos/photos of any aspect ratio stay legible, not cropped. */
    object-fit: contain;
}

.popup-location-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(15, 23, 42, 0.85);
    color: var(--accent-light);
    padding: 7px 15px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid rgba(96, 165, 250, 0.28);
    z-index: 2;
}

.popup-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90px;
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.95));
}

.popup-title {
    color: var(--ink);
    padding: 22px 26px 8px;
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.popup-scroll-content {
    overflow-y: auto;
    /* Keeps a flick at the end of the popup's own scroll from continuing
       into the page behind it, which on mobile reads as the modal leaking. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 26px 22px;
    flex: 1;
}

/* Organization name under the title - same treatment as .card-org on the
   tiles, so the tile and the popup it opens read as the same object. */
.popup-host {
    margin: 0 0 10px;
    color: var(--accent-dark);
    font-weight: 600;
    font-size: var(--text-sm);
}

/* Category / format / organization type as pills rather than three more
   label-and-value rows: they are short categorical answers that frame
   everything below, and they cost one line here instead of three. Mirrors
   .commitment-tag on the tiles. */
.popup-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: var(--space-sm);
}

.popup-meta-tag {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--accent-dark);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}

/* One bordered card per group of related facts. A dozen fields in a single
   panel read as an undifferentiated wall; About / Schedule / Location /
   Eligibility / Contact each get their own box so the popup can be skimmed
   for the one thing the reader came for. */
.popup-section {
    background: #ffffff;
    border: 1px solid #dce8f7;
    border-radius: var(--radius-md);
    padding: 14px 16px 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.popup-section:last-child {
    margin-bottom: 0;
}

/* Accent tick + uppercase label, echoing the bar under .section-header h2
   so the popup belongs to the same design system as the pages behind it. */
.popup-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--accent-dark);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.popup-section-title::before {
    content: '';
    width: 16px;
    height: 3px;
    flex-shrink: 0;
    border-radius: 2px;
    background: var(--accent);
}

.popup-about {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.7;
    font-size: var(--text-md);
}

.popup-empty-note {
    margin: 0;
    color: #8792a2;
    font-size: var(--text-sm);
    line-height: 1.6;
}

/* auto-fit rather than a fixed column count: the same rule gives two columns
   in the 680px desktop popup and one on a phone, with no breakpoint to keep
   in sync. min(100%, 220px) stops the track from ever exceeding the
   container and forcing a horizontal scroll on narrow screens. */
.popup-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 10px;
}

.popup-info-row {
    background: #f4f8fd;
    border: 1px solid #e3ecf8;
    border-radius: var(--radius-sm);
    padding: 10px 13px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* Spans every column - for values too long to sit next to a neighbour
   without crowding it (a street address, a URL, an email). */
.popup-info-row--wide {
    grid-column: 1 / -1;
}

.popup-info-label {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.popup-info-value {
    color: var(--ink);
    font-weight: 600;
    font-size: var(--text-sm);
    line-height: 1.45;
    /* Long single-word values (URLs, emails) wrap instead of overflowing or
       clipping - a single-line ellipsis truncated most real addresses. */
    overflow-wrap: anywhere;
}

/* Contact rows are links end to end, so the tap target is the whole card
   rather than one short line of text - the difference between comfortable
   and fiddly on a phone. */
.popup-section--contact .popup-info-grid {
    grid-template-columns: 1fr;
}

/* main.css (the Solid State template) styles every bare <a> with a dotted
   white underline and a `color: #ffffff !important` on hover - meant for the
   dark template chrome, ruinous on a light card. The border shorthand on
   .popup-info-row already outranks its border-bottom; these declarations
   pin the colors so the row does not depend on the label/value spans
   happening to carry their own. */
.popup-contact-row {
    position: relative;
    padding-right: 36px;
    text-decoration: none;
    color: var(--ink);
    border-color: #cfe0f5;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.popup-contact-row:hover {
    color: var(--ink) !important;
}

.popup-contact-row .popup-info-value,
.popup-contact-row:hover .popup-info-value {
    color: var(--accent-dark);
    font-weight: 700;
}

/* Chevron drawn from borders rather than shipped as an icon font/SVG. */
.popup-contact-row::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: translateY(-50%) rotate(-45deg);
}

.popup-contact-row:hover,
.popup-contact-row:focus-visible {
    background: #e8f1fd;
    border-color: #9dc0ee;
}

.popup-contact-row:focus-visible {
    outline: 2px solid var(--accent-dark);
    outline-offset: 2px;
}

.popup-actions {
    padding: var(--space-sm) 26px;
    background: #f4f8fd;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid #dce8f7;
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--surface-deep);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--space-lg) 0;
}

.site-footer .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-weight: 700;
    font-size: var(--text-md);
}

.footer-brand img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.footer-links {
    display: flex;
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color 0.2s ease;
}

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

.footer-copy {
    color: var(--text-muted);
    font-size: var(--text-xs);
    width: 100%;
    text-align: center;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---------- Animations ---------- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

/* ---------- Scrollbar ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(96, 165, 250, 0.3) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.3);
    border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.5);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .hero-section {
        min-height: 300px;
        padding: var(--space-lg) 0;
    }

    .hero-content p {
        font-size: 1.05rem;
    }

    .container {
        padding: 0 var(--space-sm);
    }

    .content-section {
        padding: var(--space-xl) 0;
    }

    .section-header h2 {
        font-size: 1.7rem;
    }

    .opportunities-grid {
        /* Two per row on phones, same as the 980px rule above - only the gap
           tightens here. Stated explicitly so the count cannot drift back to
           three on wider phones the way the old auto-fill minimum did. */
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    .card-image-container {
        height: 130px;
    }

    .card-content {
        padding: 14px 16px 16px;
    }

    /* Phones give the popup almost the whole screen, so the frame around it
       tightens and every fixed band (image, title, actions) gives height
       back to the content that is actually being read. */
    .popup {
        padding: 12px;
    }

    .popup-content {
        max-height: calc(100vh - 24px);
        /* dvh tracks the collapsing browser toolbar; the vh line above stays
           as the fallback for engines that do not support it. */
        max-height: calc(100dvh - 24px);
        border-radius: 18px;
    }

    .popup-header {
        height: 150px;
        padding: 14px;
    }

    .popup-location-tag {
        top: 12px;
        right: 12px;
        padding: 6px 12px;
        font-size: 0.78rem;
    }

    .popup-title {
        padding: 16px 18px 6px;
        font-size: 1.32rem;
    }

    .popup-scroll-content {
        padding: 0 18px 18px;
    }

    .popup-section {
        padding: 13px 14px 14px;
    }

    /* Nudged up from --text-sm: these are the lines a reader is actually
       here for, and 14.7px is small for body copy on a phone. */
    .popup-info-value {
        font-size: 0.95rem;
    }

    .popup-actions {
        padding: 12px 18px;
        flex-direction: column;
    }

    .btn-ghost, .btn-success {
        width: 100%;
        justify-content: center;
    }

    .header-logo {
        width: 34px;
        height: 34px;
        margin-right: 8px;
    }

    .site-footer .container {
        flex-direction: column;
        text-align: center;
    }
}