/* ============================================================================
   HEALTH INFORMATICS LAB — Shared Stylesheet
   Kathmandu University
   ----------------------------------------------------------------------------
   A clean, professional theme for a research lab website.

   HOW TO EDIT THIS FILE
   ---------------------
   • Almost everything (colors, fonts, spacing, corners, shadows) is controlled
     by the "Design Tokens" in the :root block just below. Change a value there
     once and it updates consistently across every page.
   • Each section of this file is clearly labelled. Use the TABLE OF CONTENTS
     to jump to the part you want.
   • Component styles are grouped by the HTML block they style, so you can find
     the rule for any element quickly.

   TABLE OF CONTENTS
   -----------------
   1.  Design Tokens (colors, spacing, fonts) ....... edit these first
   2.  Reset & Base
   3.  Typography Helpers
   4.  Layout (container + grids)
   5.  Utilities (spacing, alignment)
   6.  Navigation Bar
   7.  Mobile Menu
   8.  Buttons & Links
   9.  Sections & Headings
   10. Hero (home page)
   11. Page Hero (inner pages)
   12. Cards (research areas, info)
   13. Project Cards & Project Figures
   14. About the PI
   15. Team / Member Cards
   16. Research Work List
   17. News Cards
   18. Join Us — Positions & Steps
   19. Call-to-action Banner
   20. Footer
   21. Reveal-on-scroll Animation
   ============================================================================ */


/* ============================================================================
   1. DESIGN TOKENS  —  EDIT THESE TO RE-SKIN THE WHOLE SITE
   ============================================================================ */
:root {
    /* --- Brand colors --- */
    --color-primary:        #1D4ED8;   /* main brand blue (buttons, links)     */
    --color-primary-dark:   #1E3A8A;   /* darker blue for hovers               */
    --color-accent:         #3B82F6;   /* lighter blue for small accents       */
    --color-primary-soft:   rgba(29,78,216,0.08);  /* faint blue fill          */

    /* --- Text colors --- */
    --color-ink:            #0B2545;   /* headings / strong text (dark navy)   */
    --color-body:           #45556C;   /* normal paragraph text                */
    --color-muted:          #64748B;   /* secondary / meta text                */
    --color-faint:          #94A3B8;   /* subtle labels                        */

    /* --- Surfaces & backgrounds --- */
    --color-bg:             #F7F9FC;   /* page background                      */
    --color-surface:        #FFFFFF;   /* cards, nav, panels                   */
    --color-surface-2:      #EEF3FA;   /* subtle inset background (image slots)*/

    /* --- Borders & dividers --- */
    --color-border:         rgba(11,37,69,0.08);
    --color-border-strong:  rgba(11,37,69,0.14);

    /* --- Corner radius --- */
    --radius-sm:   8px;
    --radius:      14px;
    --radius-lg:   20px;
    --radius-pill: 9999px;

    /* --- Shadows --- */
    --shadow-sm: 0 1px 2px rgba(11,37,69,0.04);
    --shadow:    0 6px 24px rgba(11,37,69,0.06);
    --shadow-lg: 0 18px 48px rgba(11,37,69,0.10);

    /* --- Layout --- */
    --container-width: 1200px;
    --section-space:   96px;    /* vertical padding of a section (mobile)      */
    --section-space-lg:128px;   /* vertical padding of a section (desktop)     */

    /* --- Typography --- */
    --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}


/* ============================================================================
   2. RESET & BASE
   ============================================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    background: var(--color-bg);
    color: var(--color-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a   { text-decoration: none; color: inherit; }

/* Headings default to the dark "ink" color; individual components can override */
h1, h2, h3, h4, h5, h6 { color: var(--color-ink); line-height: 1.2; }

/* Text selection + scrollbar tinted with the brand color */
::selection { background: var(--color-primary-soft); color: var(--color-ink); }
::-webkit-scrollbar        { width: 8px; }
::-webkit-scrollbar-track  { background: var(--color-surface-2); }
::-webkit-scrollbar-thumb  { background: #C7D2FE; border-radius: 4px; }


/* ============================================================================
   3. TYPOGRAPHY HELPERS
   ============================================================================ */
/* Gradient text used on big page titles */
.gradient-text {
    background: linear-gradient(90deg, var(--color-ink), var(--color-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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


/* ============================================================================
   4. LAYOUT  (container + reusable grids)
   ============================================================================ */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}
@media (min-width: 768px) { .container { padding: 0 48px; } }

/* Two-column grid (stacks on small screens) */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
}
.grid-2.gap-lg { gap: 64px; }
@media (max-width: 767px) { .grid-2 { grid-template-columns: 1fr; } }

/* Three-column grid (2-up on tablets, 1-up on phones) */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 991px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-3 { grid-template-columns: 1fr; } }


/* ============================================================================
   5. UTILITIES  (small spacing / alignment helpers used inline in the HTML)
   ============================================================================ */
.mb-4  { margin-bottom: 16px; }
.mb-8  { margin-bottom: 32px; }
.mb-16 { margin-bottom: 64px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.max-w-3xl { max-width: 48rem; }

/* Small brand accent bar shown above headings */
.accent-line {
    width: 36px;
    height: 3px;
    border-radius: 3px;
    background: var(--color-primary);
}


/* ============================================================================
   6. NAVIGATION BAR
   ============================================================================ */
.nav-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    height: 64px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
}

.nav-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    height: 100%;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (min-width: 768px) { .nav-inner { padding: 0 48px; } }

/* Logo cluster (left side) */
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-primary);
    font-size: 20px;
}
.nav-logo-text { font-size: 15px; font-weight: 600; color: var(--color-ink); }
.nav-logo-badge {
    font-size: 10px; font-weight: 600; color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 5px; padding: 2px 6px;
    display: none;
}
@media (min-width: 640px) { .nav-logo-badge { display: inline; } }

/* Center links (hidden on mobile — replaced by the menu button) */
.nav-links { display: none; align-items: center; gap: 32px; }
@media (min-width: 768px) { .nav-links { display: flex; } }
.nav-link {
    position: relative;
    font-size: 13px; font-weight: 500;
    color: var(--color-body);
    transition: color 0.2s;
}
.nav-link:hover { color: var(--color-primary); }
/* Underline highlight for the current page */
.nav-link.active { color: var(--color-primary); }
.nav-link.active::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -22px;
    height: 2px; background: var(--color-primary);
}

/* Right-side actions */
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-cta {
    display: none; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
    background: var(--color-primary); color: #fff;
    padding: 9px 18px; border-radius: var(--radius-pill);
    border: none; cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background 0.2s, transform 0.2s;
}
.nav-cta:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
@media (min-width: 768px) { .nav-cta { display: inline-flex; } }

/* Hamburger button (mobile only) */
.nav-menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: none; border: none;
    color: var(--color-ink); cursor: pointer; font-size: 22px;
}
@media (min-width: 768px) { .nav-menu-btn { display: none; } }


/* ============================================================================
   7. MOBILE MENU  (full-screen overlay, toggled by the hamburger button)
   ============================================================================ */
.mobile-menu {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(10px);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 28px;
    transform: translateX(100%);      /* hidden off-screen by default */
    transition: transform 0.3s ease;
}
.mobile-menu.open { transform: translateX(0); }   /* .open is added by JS */
.mobile-menu-close {
    position: absolute; top: 20px; right: 24px;
    background: none; border: none;
    color: var(--color-ink); cursor: pointer; font-size: 26px;
}
.mobile-menu-close:hover { color: var(--color-primary); }
.mobile-menu a { font-size: 22px; font-weight: 500; color: var(--color-ink); }
.mobile-menu a:hover,
.mobile-menu a.mm-active { color: var(--color-primary); }
.mobile-menu-cta {
    margin-top: 12px;
    font-size: 15px !important; font-weight: 600 !important;
    background: var(--color-primary); color: #fff !important;
    padding: 12px 26px; border-radius: var(--radius-pill);
}


/* ============================================================================
   8. BUTTONS & INLINE LINKS
   ============================================================================ */
.btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600;
    background: var(--color-primary); color: #fff;
    padding: 12px 28px; border-radius: var(--radius-pill);
    border: none; cursor: pointer;
    box-shadow: var(--shadow);
    transition: background 0.2s, transform 0.2s;
}
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); }

.btn-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 500;
    color: var(--color-body); background: var(--color-surface);
    padding: 12px 28px; border-radius: var(--radius-pill);
    border: 1px solid var(--color-border); cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.btn-secondary:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* Text link with a trailing arrow that nudges on hover */
.arrow-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 600; color: var(--color-primary);
}
.arrow-link .iconify-arrow { transition: transform 0.2s; }
.arrow-link:hover .iconify-arrow { transform: translate(2px, -2px); }


/* ============================================================================
   9. SECTIONS & HEADINGS
   ============================================================================ */
.section {
    padding: var(--section-space) 0;
    border-top: 1px solid var(--color-border);
}
@media (min-width: 768px) { .section { padding: var(--section-space-lg) 0; } }

/* Small uppercase label above a group of items */
.section-label {
    font-size: 11px; font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 28px;
}

.section-title {
    font-size: 26px; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.15;
    color: var(--color-ink);
    margin-bottom: 16px;
}
@media (min-width: 768px) { .section-title { font-size: 38px; } }

.section-desc    { font-size: 17px; font-weight: 400; color: var(--color-body); line-height: 1.7; }
.section-desc-sm { font-size: 15px; font-weight: 400; color: var(--color-body); line-height: 1.7; }


/* ============================================================================
   10. HERO  (home page — large photo banner with overlay)
   ============================================================================ */
.hero {
    position: relative;
    padding: 128px 0 80px;
    text-align: center;
    background-size: cover;
    background-position: center;
}
@media (min-width: 768px) { .hero { padding: 200px 0 128px; } }

.hero h1 { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
@media (min-width: 640px) { .hero h1 { font-size: 52px; } }
@media (min-width: 768px) { .hero h1 { font-size: 72px; } }

/* Soft glow behind the hero content */
.hero-glow {
    position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
    width: 900px; height: 520px;
    background: radial-gradient(ellipse, rgba(59,130,246,0.18) 0%, transparent 70%);
    filter: blur(120px);
    pointer-events: none; z-index: 0;
}

/* --- Photo-background variant used on the home hero --- */
.hero.hero-bg {
    /* EDIT: change the image below to swap the hero background photo */
    background-image: linear-gradient(rgba(11,37,69,0.72), rgba(11,37,69,0.55)),
                      url('images/KU_main.jpg');
    color: #fff;
}
.hero.hero-bg .container { position: relative; z-index: 2; }
/* Scroll-reactive darkening overlay (opacity is driven by JS via --overlay-opacity) */
.hero.hero-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
                rgba(11,37,69,var(--overlay-opacity, 0.35)),
                rgba(11,37,69,0.15));
    pointer-events: none;
    transition: background 0.15s linear;
}
/* On the photo hero, force all text/buttons to be light so they read on the image */
.hero-bg .gradient-text {
    background: none; -webkit-text-fill-color: #fff; color: #fff;
}
.hero-bg h1,
.hero-bg .section-desc { color: #fff; }

/* Small pulsing dot used in the "Kathmandu University" hero badge */
.ping-dot { animation: ping 1.6s cubic-bezier(0,0,0.2,1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }


/* ============================================================================
   11. PAGE HERO  (inner pages: Research / Projects / News / Join Us)
   ============================================================================ */
.page-hero {
    padding: 140px 0 56px;
    border-bottom: 1px solid var(--color-border);
    background:
        radial-gradient(60% 120% at 100% 0%, var(--color-primary-soft) 0%, transparent 60%),
        var(--color-surface);
}
@media (min-width: 768px) { .page-hero { padding: 180px 0 72px; } }
.page-hero h1 { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
@media (min-width: 768px) { .page-hero h1 { font-size: 56px; } }


/* ============================================================================
   12. CARDS  (research areas, generic info cards)
   ============================================================================ */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}
.card-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    margin-bottom: 18px;
}
.card h3 { font-size: 18px; font-weight: 600; color: var(--color-ink); margin-bottom: 10px; }
.card p  { font-size: 14px; font-weight: 400; color: var(--color-body); line-height: 1.65; }


/* ============================================================================
   13. PROJECT CARDS (home preview) & PROJECT FIGURES (projects page)
   ============================================================================ */
/* Compact project cards on the home page */
.project-card { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.project-card::before {           /* top accent bar that fades in on hover */
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    opacity: 0; transition: opacity 0.3s;
}
.project-card:hover::before { opacity: 1; }
.project-card-tags {
    margin-top: 24px; padding-top: 16px;
    border-top: 1px solid var(--color-border);
    font-size: 10px; font-weight: 600; color: var(--color-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
}

/* Large figure block on the projects detail page */
.project-figure {
    aspect-ratio: 16 / 7;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
}
.project-figure img { width: 100%; height: 100%; object-fit: cover; }
/* Branded gradient placeholder shown when a project has no photo */
.project-figure-art {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, #0EA5E9 100%);
    color: rgba(255,255,255,0.9);
    font-size: 72px;
}

/* Thin divider between stacked project blocks */
.sep { border: none; height: 1px; background: var(--color-border); margin: 0; }

/* Small keyword chips shown under a project description */
.tag {
    font-size: 11px; color: var(--color-muted);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    padding: 6px 12px; border-radius: var(--radius-sm);
}

/* "Active Project" status label above a project title */
.project-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    padding: 5px 12px; border-radius: var(--radius-pill);
    margin-bottom: 16px;
}


/* ============================================================================
   14. ABOUT THE PI  (photo + floating name badge)
   ============================================================================ */
.pi-photo-wrap {
    aspect-ratio: 4 / 5;
    max-width: 340px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
}
.grid-2 .pi-photo-wrap { justify-self: start; }
.pi-photo { width: 100%; height: 100%; object-fit: cover; }

/* The little "Prof. Rabindra Bista, PhD" chip that overlaps the photo corner */
.pi-badge {
    position: absolute; bottom: -14px; right: -14px;
    display: flex; align-items: center; gap: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px 16px;
    font-size: 12px; font-weight: 600; color: var(--color-ink);
}
.pi-badge .iconify { color: var(--color-primary); font-size: 16px; }


/* ============================================================================
   15. TEAM / MEMBER CARDS
   ============================================================================ */
/* Group photo banner above the team grids */
.group-photo {
    width: 100%;
    max-height: 600px;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border);
}
.group-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Standard member card (photo on top, details below) */
.team-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.team-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}
.team-img-wrap { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-2); }
.team-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s; }
.team-card:hover .team-img { transform: scale(1.04); }   /* gentle zoom on hover */

.team-info { padding: 18px; }
.team-name { font-size: 16px; font-weight: 600; color: var(--color-ink); margin-bottom: 4px; }
.team-role-assistant {
    font-size: 11px; font-weight: 700; color: var(--color-primary);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px;
}
.team-role-other {
    font-size: 11px; font-weight: 600; color: var(--color-muted);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px;
}
.team-desc { font-size: 13px; color: var(--color-body); line-height: 1.6; margin-bottom: 14px; }
.team-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 500; color: var(--color-primary);
}
.team-link:hover { color: var(--color-primary-dark); }

/* Small variant used for Research Assistant cards */
.team-card-small .team-info { padding: 14px; }

/* Compact centered variant used for Research Trainees */
.team-card-compact { text-align: center; padding: 28px 20px; }
.team-card-compact .team-name { font-size: 15px; margin-bottom: 4px; }
.team-social {
    display: inline-flex; color: var(--color-muted); font-size: 18px;
    transition: color 0.2s;
}
.team-social:hover { color: var(--color-primary); }

/* Circular avatar (photo) used on trainee cards */
.team-avatar,
.member-avatar {
    width: 84px; height: 84px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin: 0 auto 16px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
}
.team-avatar img,
.member-avatar-img { width: 100%; height: 100%; object-fit: cover; }

/* Fills a member image slot to its container */
.member-photo { width: 100%; height: 100%; object-fit: cover; }

/* Initials avatar — shown for members who don't have a photo yet.
   Put the person's initials (e.g. "SP") directly inside the div in the HTML. */
.avatar-initials {
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 700; letter-spacing: 0.02em;
    color: var(--color-primary);
    background: var(--color-primary-soft);
}


/* ============================================================================
   16. RESEARCH WORK LIST  (bulleted "Current Works" items)
   ============================================================================ */
.work-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 15px; color: var(--color-body);
}
.work-item:last-child { border-bottom: none; }
.work-dot {
    flex-shrink: 0;
    width: 8px; height: 8px; margin-top: 7px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
}


/* ============================================================================
   17. NEWS CARDS
   ============================================================================ */
.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 767px) { .news-grid { grid-template-columns: 1fr; } }

.news-card {
    display: flex; flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.news-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}
/* A featured story spans the full width of the grid */
.news-featured { grid-column: 1 / -1; }

.news-card-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface-2); }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s; }
.news-card:hover .news-card-img img { transform: scale(1.03); }
.news-featured .news-card-img { aspect-ratio: 21 / 9; }

.news-card-body { padding: 22px; }
.news-card-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.news-card-date { font-size: 12px; color: var(--color-muted); }
.news-card-tag {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    padding: 3px 10px; border-radius: var(--radius-pill);
}
.news-card-title { font-size: 18px; font-weight: 600; color: var(--color-ink); line-height: 1.35; margin-bottom: 10px; }
.news-featured .news-card-title { font-size: 22px; }
.news-card-excerpt { font-size: 14px; color: var(--color-body); line-height: 1.65; }


/* ============================================================================
   18. JOIN US  —  POSITION CARDS & "HOW TO APPLY" STEPS
   ============================================================================ */
.position-card {
    display: flex; flex-direction: column; align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.position-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow); }

/* Status pill: use class "open" (green) or "closed" (grey) in the HTML */
.position-type {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 4px 10px; border-radius: var(--radius-pill);
    margin-bottom: 16px;
}
.position-type.open   { color: #047857; background: rgba(16,185,129,0.10); }
.position-type.closed { color: var(--color-muted); background: rgba(100,116,139,0.10); }
.position-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: currentColor; }

.position-title { font-size: 18px; font-weight: 600; color: var(--color-ink); margin-bottom: 10px; }
.position-desc  { font-size: 14px; color: var(--color-body); line-height: 1.65; margin-bottom: 18px; }
.position-meta  { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.position-meta span {
    font-size: 11px; color: var(--color-muted);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    padding: 5px 12px; border-radius: var(--radius-pill);
}

/* Numbered steps in the "How to Apply" list */
.step-number {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary); color: #fff;
    font-size: 15px; font-weight: 700;
}
.step-content h3 { font-size: 16px; font-weight: 600; color: var(--color-ink); margin-bottom: 4px; }
.step-content p  { font-size: 14px; color: var(--color-body); line-height: 1.65; }


/* ============================================================================
   19. CALL-TO-ACTION BANNER
   ============================================================================ */
.cta-banner {
    text-align: center;
    padding: 64px 32px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(70% 130% at 50% 0%, var(--color-primary-soft) 0%, transparent 70%),
        var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
}


/* ============================================================================
   20. FOOTER
   ============================================================================ */
.footer {
    background: var(--color-surface);
    color: var(--color-body);
    padding: 56px 0 28px;
    border-top: 1px solid var(--color-border);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 240px;
    gap: 32px;
    align-items: start;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand p { font-size: 14px; color: var(--color-muted); line-height: 1.7; margin-top: 14px; max-width: 360px; }
.footer-brand .nav-logo-text { color: var(--color-ink); }
.footer-col h4 { font-size: 13px; font-weight: 600; color: var(--color-ink); margin-bottom: 16px; }
.footer-col a  { display: block; font-size: 14px; color: var(--color-muted); margin-bottom: 10px; transition: color 0.2s; }
.footer-col a:hover,
.footer-col a.f-active { color: var(--color-primary); }

.footer-social { display: flex; gap: 12px; font-size: 20px; }
.footer-social a { color: var(--color-muted); transition: color 0.2s; }
.footer-social a:hover { color: var(--color-primary); }

.footer-bottom {
    margin-top: 40px; padding-top: 24px;
    border-top: 1px solid var(--color-border);
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 13px; color: var(--color-muted);
}
@media (max-width: 900px) { .footer-bottom { flex-direction: column; gap: 6px; } }


/* ============================================================================
   21. REVEAL-ON-SCROLL ANIMATION
   ----------------------------------------------------------------------------
   Elements with class "reveal" start faded/shifted down and animate in when
   they scroll into view (the "active" class is added by the JS on each page).
   Add d1 / d2 / d3 / d4 to stagger the timing of items in a group.
   ============================================================================ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.active { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }

/* Respect users who prefer reduced motion — show everything immediately */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .ping-dot { animation: none; }
}