/*
 * imperience.css — Site-wide custom CSS for the Imperience site
 * Design system: "Deep Focus" — forest green + warm gold + stone backgrounds
 *
 * WHEN TO USE THIS FILE vs TAILWIND CLASSES IN TEMPLATES:
 *   - Tailwind utility classes in templates handle:  layout, spacing,
 *     colors, typography, flex/grid, padding, margin, borders, etc.
 *   - This file handles things Tailwind can't do cleanly:
 *       • Complex hover transitions that need both transform + box-shadow
 *       • Animations (like the mobile menu slide-down using max-height)
 *       • Pseudo-elements and complex CSS selectors
 *
 * COLOR REFERENCE (literal Deep Focus palette behind the tokens below):
 *   Forest:   #1B4332 (900) · #2D6A4F (800) · #40916C (700) · #52B788 (600)
 *             #74C69D (500) · #95D5B2 (400) · #B7E4C7 (200) · #D8F3DC (50)
 *   Gold:     #92742C (700) · #B8960C (500) · #D4A843 (400) · #FBF3DC (100)
 *   Stone:    #FEFCF8 (50)  · #F8F5F0 (100) · #F0EBE3 (200) · #E5DDD4 (300)
 *   Espresso: #1C1410 (900) · #3D352E (700) · #6B5E54 (500) · #A8998F (300)
 */


/* ══════════════════════════════════════════════════════════════════
   SKINNABLE DESIGN TOKENS — Imperience "Deep Focus"
   ══════════════════════════════════════════════════════════════════
   Same semantic custom-property names that sriramchandra.css defines,
   consumed via the shared Tailwind utilities (bg-surface, text-ink,
   text-accent, bg-band, flame, …) in tailwind.config.js. Because an
   Imperience page loads THIS stylesheet (not sriramchandra.css), the
   same utility classes resolve to the forest/gold Deep Focus palette
   instead of the blue/lamplight one — one shared vocabulary, two
   independent skins. A skin is one block of values:
     :root      → Deep Focus  (forest on warm stone — daylight)
     html.dark  → Forest Night (deep evergreen + gold lamp)
   ══════════════════════════════════════════════════════════════════ */
:root {
    --ground:#F8F5F0;  --surface:#FEFCF8;  --surface-2:#F0EBE3;
    --ink:#1C1410;     --ink-soft:#6B5E54; --rule:#E5DDD4;
    --accent:#2D6A4F;  --accent-deep:#1B4332;
    --band:#1B4332;    --band-2:#2D6A4F;
    --band-ink:#FEFCF8; --band-ink-soft:#95D5B2;
    --band-line:rgba(255,255,255,.12); --band-accent:#D4A843;
    --flame:#92742C;   --flame-soft:#B8960C;
    --glow:rgba(45,106,79,.08);
}
html.dark {
    --ground:#0D1B14;  --surface:#162B22;  --surface-2:#0F2018;
    --ink:#E5DDD4;     --ink-soft:#A8998F; --rule:rgba(229,221,212,.12);
    --accent:#74C69D;  --accent-deep:#95D5B2;
    --band:#071210;    --band-2:#162B22;
    --band-ink:#FEFCF8; --band-ink-soft:#74C69D;
    --band-line:rgba(255,255,255,.08); --band-accent:#D4A843;
    --flame:#D4A843;   --flame-soft:#E0C56E;
    --glow:rgba(116,198,157,.10);
}


/* ─── Smooth scrolling ─── */
/*
  Makes anchor links (e.g. href="#section") scroll smoothly instead of jumping.
  Also benefits the scroll-to-top button (supplemented by JS smooth option).
*/
html {
    scroll-behavior: smooth;
}

/* ─── Prevent image overflow ─── */
/*
  Ensures images never exceed their container's width.
  height: auto preserves the image's aspect ratio.
*/
img {
    max-width: 100%;
    height: auto;
}


/* ══════════════════════════════════════════════════════════════════
   STICKY NAV SURFACE
   ══════════════════════════════════════════════════════════════════
   Applied to the sticky <header> via class="glass" (name kept so the
   markup is untouched). The frosted-glass blur was removed — a solid
   surface reading from the active skin's --surface token is calmer and
   avoids the templated glassmorphism look. The hairline bottom rule is
   supplied by the header's own border utility.
*/
.glass {
    background: var(--surface);
}


/* ══════════════════════════════════════════════════════════════════
   NAVIGATION DROPDOWNS — CSS-only, hover-triggered
   ══════════════════════════════════════════════════════════════════
   HOW IT WORKS:
   The HTML structure in base.html is:
     <div class="nav-item relative">
       <a href="...">Training ▾</a>
       <div class="nav-dropdown ...">   ← hidden by default
         <a>Sub-link 1</a>
         <a>Sub-link 2</a>
       </div>
     </div>

   When you hover over .nav-item, the CSS rule below reveals
   the .nav-dropdown child inside it. No JavaScript needed!

   WHY DISPLAY INSTEAD OF OPACITY/VISIBILITY?
   For accessibility, display:none completely removes the element from
   the tab order, so keyboard users won't accidentally tab into a
   hidden dropdown. opacity:0 or visibility:hidden would still be
   focusable by keyboard, creating confusion.
*/
.nav-dropdown {
    display: none;
}
.nav-item:hover .nav-dropdown {
    display: block;
}


/* ══════════════════════════════════════════════════════════════════
   FLOAT CARD — Gentle hover lift effect
   ══════════════════════════════════════════════════════════════════
   Applied to card elements throughout the site.
   On hover: the card lifts 6px upward and gains a deeper shadow,
   creating a satisfying "picking up" interaction feel.

   The transition makes the change smooth (0.3s ease = slow start,
   fast middle, slow end — like natural physical movement).

   Box-shadow color uses forest-900 at 10% opacity for a warm green
   shadow rather than the default cool gray shadow.
*/
.float-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.float-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(27, 67, 50, 0.08);
}


/* ══════════════════════════════════════════════════════════════════
   READING CARD — Content wrapper for text-heavy inner pages
   ══════════════════════════════════════════════════════════════════
   Used on About, Research, Training, and other text-heavy pages.
   Wraps the main readable content in a warm off-white card with a
   subtle shadow, preventing text from floating on the open background.

   Background: #FDFBF7 — a slightly warmer tone than the stone-50
   background, creating a gentle lift off the page.

   The responsive padding changes:
     Mobile: 2rem top/bottom, 1.5rem sides (comfortable for small screens)
     Desktop: 2.5rem top/bottom, 3rem sides (more generous reading margins)
*/
.reading-card {
    background: var(--surface);
    border-radius: 0.25rem;   /* editorial — barely-there rounding */
    border: 1px solid var(--rule);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 2rem 1.5rem;
    color: var(--ink);
}
@media (min-width: 768px) {
    .reading-card {
        padding: 2.75rem 3.25rem;
    }
}


/* ══════════════════════════════════════════════════════════════════
   DOT GRID HERO PATTERN
   ══════════════════════════════════════════════════════════════════
   Applied to the hero <section> element via class="hero-pattern".

   HOW IT WORKS:
   A tiny SVG data-URI (embedded directly in the CSS, no image file
   needed) draws a single dot at the center of a 24×24px tile.
   background-size: 24px 24px repeats this tile across the whole
   element, creating an infinite dot grid.

   The dot color (#40916C) is forest-700 at only 12% opacity
   (fill-opacity="0.12"), so it reads as subtle texture rather than
   an obvious pattern. The gradient sits behind it (z-index stacking).

   WHY DATA-URI INSTEAD OF AN IMAGE FILE?
   No extra HTTP request, no file to manage, always available.
   The SVG is URL-encoded (spaces → %20, # → %23, etc.) so it works
   as a CSS url() value.
*/
.hero-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%2340916C' fill-opacity='0.12'/%3E%3C/svg%3E");
    background-size: 24px 24px;
}


/* ══════════════════════════════════════════════════════════════════
   MOBILE MENU — Animated expand/collapse
   ══════════════════════════════════════════════════════════════════
   The mobile nav (#mobile-menu) uses a max-height animation trick:
   - "closed" state: max-height: 0, overflow hidden → completely hidden
   - "open" state:   max-height: 2000px → fully visible

   WHY MAX-HEIGHT AND NOT DISPLAY OR HEIGHT?
   CSS cannot animate from display:none to display:block (no transition).
   CSS cannot animate from height:0 to height:auto (auto is not animatable).
   But CSS CAN animate from max-height:0 to max-height:2000px, which
   creates the smooth slide-down/slide-up effect.

   2000px is large enough to fit all menu items even on tiny screens.
   The actual rendered height is controlled by the content, not this value.

   transition: max-height 0.35s ease
   The 0.35s duration feels snappy on mobile without being jarring.
   "ease" = slow in, fast middle, slow out (matches natural motion).
*/
#mobile-menu {
    transition: max-height 0.35s ease;
    overflow: hidden;
}
#mobile-menu.closed {
    max-height: 0;
}
#mobile-menu.open {
    max-height: 2000px;   /* Large enough for all nav items */
}

/*
   Mobile sub-menus (nested under Training, Research sections).
   Simple display:none/block toggle via JS.
   No animation here — the parent max-height animation covers the
   visual expansion; inner sub-menus appear/disappear instantly
   within the already-expanding container.
*/
.mobile-sub {
    display: none;
}
.mobile-sub.open {
    display: block;
}


/* ══════════════════════════════════════════════════════════════════
   SEMINAR ROW HOVER — Left border accent enhancement
   ══════════════════════════════════════════════════════════════════
   Seminar archive rows have a colored left border (forest or gold).
   On hover, we slightly increase the left padding to give the
   impression the row "leans in" toward the content.
   Combine with Tailwind's hover:shadow-md for a subtle lift effect.
*/
.seminar-row {
    transition: padding-left 0.2s ease, box-shadow 0.2s ease;
}
.seminar-row:hover {
    padding-left: 1.75rem;   /* Slightly more than the default 1.5rem (px-6) */
}


/* ══════════════════════════════════════════════════════════════════
   PILL TAG — Forest and gold variants
   ══════════════════════════════════════════════════════════════════
   Small rounded pill tags used throughout (e.g. "5 papers", SDG refs).
   Base styles here; color variants are applied inline or with Tailwind.
   The hover transition applies universally to any .pill-tag element.
*/
.pill-tag {
    transition: opacity 0.15s ease;
}
.pill-tag:hover {
    opacity: 0.85;
}


/* ══════════════════════════════════════════════════════════════════
   PROSE CONTENT — Rich text typography for reading pages
   ══════════════════════════════════════════════════════════════════
   Wagtail's RichTextField renders HTML (p, h2, h3, ul, blockquote, etc.)
   inside a container. The .prose-imperience class sets comfortable
   reading typography for that rendered HTML.

   These styles target raw HTML elements (not Tailwind-classed elements),
   because Wagtail's rich text editor outputs plain HTML without classes.
*/
.prose-imperience {
    max-width: 65ch;          /* Optimal reading line length (~65 characters) */
    color: var(--ink);        /* skin body ink */
    line-height: 1.75;        /* Generous leading for comfortable reading */
}
.prose-imperience h2 {
    font-family: 'Marcellus', Georgia, serif;   /* shared editorial display — weight 400 only */
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: .005em;
    color: var(--ink);        /* darkest ink for headings */
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.prose-imperience h3 {
    font-family: 'Marcellus', Georgia, serif;
    font-size: 1.28rem;
    font-weight: 400;
    letter-spacing: .005em;
    color: var(--ink);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.prose-imperience p {
    margin-bottom: 1rem;
    font-weight: 500;         /* Source Sans 3 minimum weight to avoid washed-out look */
}
.prose-imperience a {
    color: var(--accent-deep); /* readable forest link on the surface */
    text-decoration: underline;
    text-underline-offset: 2px;
}
.prose-imperience a:hover {
    color: var(--accent);
}
.prose-imperience ul,
.prose-imperience ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}
.prose-imperience li {
    margin-bottom: 0.4rem;
}
.prose-imperience blockquote {
    border-left: 3px solid var(--accent);   /* forest accent border */
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: var(--ink-soft);                 /* slightly muted */
    font-style: italic;
}


/* ══════════════════════════════════════════════════════════════════
   EDITORIAL INNER-PAGE SYSTEM
   ══════════════════════════════════════════════════════════════════
   Shared primitives that bring every inner page in line with the
   sharpened home: Marcellus display + Marcellus SC small-caps eyebrows +
   Spectral body, and the eyebrow → heading → secrule section rhythm.
   The home scopes its own copies under .ihp; these unscoped versions
   style any page that extends base.html. Forest/gold identity is carried
   by the shared skin tokens, so these repaint correctly in dark mode with
   no extra rules.
   ══════════════════════════════════════════════════════════════════ */

/* Eyebrow — Marcellus SC small-caps kicker above a heading */
.eyebrow {
    font-family: 'Marcellus SC', Georgia, serif;
    letter-spacing: .18em;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--accent-deep);
    margin: 0;
}
.eyebrow.on-band { color: var(--band-accent); }   /* on a deep forest band */

/* Section rule — short accent bar that anchors a heading */
.secrule {
    width: 46px;
    height: 2px;
    background: var(--accent);
    margin-top: 12px;
}
.secrule.center { margin-left: auto; margin-right: auto; }
.secrule.on-band { background: var(--band-accent); }

/* Marcellus section heading — Marcellus has a single 400 weight; never bold it */
.sec-head {
    font-family: 'Marcellus', Georgia, serif;
    font-weight: 400;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.12;
    letter-spacing: .005em;
    color: var(--ink);
    margin: .2em 0 0;
}
.sec-head.on-band { color: var(--band-ink); }

/* A section-head unit (eyebrow + heading + rule), with sensible bottom gap */
.section-head { margin-bottom: 28px; }
.section-head.center { text-align: center; }
.section-head.center .secrule { margin-left: auto; margin-right: auto; }

/* ── Default inner-page hero ────────────────────────────────────────
   A calm editorial masthead on the page surface (not a heavy gradient
   banner): breadcrumb dateline + eyebrow + Marcellus title + secrule,
   with a faint forest glow bleeding from the top-left — the same hero
   atmosphere as the home, without the lexical entry. */
.ip-hero {
    position: relative;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    background-image: radial-gradient(80% 70% at 12% -20%, var(--glow), transparent 62%);
    background-repeat: no-repeat;
    padding: 48px 0 40px;
}
.ip-hero-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.ip-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    font-family: 'Marcellus SC', Georgia, serif;
    letter-spacing: .12em;
    font-size: 11.5px;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 18px;
}
.ip-crumb a { color: var(--ink-soft); text-decoration: none; transition: color .2s; }
.ip-crumb a:hover { color: var(--accent-deep); }
.ip-crumb .sep { color: var(--rule); }
.ip-crumb .here { color: var(--accent-deep); }
.ip-title {
    font-family: 'Marcellus', Georgia, serif;
    font-weight: 400;
    font-size: clamp(34px, 5.2vw, 56px);
    line-height: 1.02;
    letter-spacing: .01em;
    color: var(--ink);
    margin: .1em 0 0;
}
.ip-lead {
    font-family: 'Spectral', Georgia, serif;
    font-weight: 400;
    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 56ch;
    margin: 18px 0 0;
}


/* ══════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   The skin tokens above already carry their own html.dark values, so
   .glass, .reading-card, and .prose-imperience switch automatically and
   need no hardcoded dark rules here. Only effects the tokens can't reach
   (shadow depth, the hero dot texture) are overridden below.
   ══════════════════════════════════════════════════════════════════ */
.dark .float-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.30);
}

.dark .hero-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%2374C69D' fill-opacity='0.08'/%3E%3C/svg%3E");
}

/* Hover dropdown panel (defined token-aware so it works in both skins). */
.nav-dropdown {
    background: var(--surface);
    border-color: var(--rule);
}