/*
 * 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)
 *       • Glassmorphism backdrop-filter (not a standard Tailwind utility)
 *       • Pseudo-elements and complex CSS selectors
 *
 * COLOR REFERENCE (copy these into inline styles or Tailwind config):
 *   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)
 */


/* ─── 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;
}


/* ══════════════════════════════════════════════════════════════════
   GLASSMORPHISM — Frosted glass navbar effect
   ══════════════════════════════════════════════════════════════════
   Applied to the sticky <header> element via class="glass".

   HOW IT WORKS:
   - background: rgba(254,252,248, 0.92) — the stone-50 warm color at
     92% opacity so the page content faintly shows through.
   - backdrop-filter: blur(10px) — blurs everything BEHIND the element.
     This is what creates the "frosted glass" look as content scrolls
     behind the navbar.
   - -webkit-backdrop-filter: required for Safari (Apple browsers).

   The result: as you scroll down, the page content blurs behind the
   navbar rather than cutting sharply, making it feel polished.

   NOTE: Pure rgba(255,255,255,...) was avoided here — we use the warm
   stone-50 tint (#FEFCF8) to stay consistent with the no-pure-white rule.
*/
.glass {
    background: rgba(254, 252, 248, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);   /* Safari support */
}


/* ══════════════════════════════════════════════════════════════════
   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(-6px);
    box-shadow: 0 20px 40px rgba(27, 67, 50, 0.10);
}


/* ══════════════════════════════════════════════════════════════════
   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: #FDFBF7;
    border-radius: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
    padding: 2rem 1.5rem;
}
@media (min-width: 768px) {
    .reading-card {
        padding: 2.5rem 3rem;
    }
}


/* ══════════════════════════════════════════════════════════════════
   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: #3D352E;           /* espresso-700 */
    line-height: 1.75;        /* Generous leading for comfortable reading */
}
.prose-imperience h2 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1C1410;           /* espresso-900 — darkest for headings */
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.prose-imperience h3 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #1C1410;
    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: #2D6A4F;           /* forest-800 — readable link color on white */
    text-decoration: underline;
    text-underline-offset: 2px;
}
.prose-imperience a:hover {
    color: #40916C;           /* forest-700 on hover */
}
.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 #40916C;   /* forest-700 accent border */
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: #6B5E54;                   /* espresso-500 — slightly muted */
    font-style: italic;
}


/* ══════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   When <html class="dark"> is set, these rules override the light
   theme for elements that use custom CSS (not Tailwind classes).
   Tailwind dark: variants handle the rest in templates.
   ══════════════════════════════════════════════════════════════════ */
.dark .glass {
    background: rgba(13, 26, 20, 0.90);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dark .reading-card {
    background: #162B22;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dark .float-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.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");
}

.dark .prose-imperience {
    color: #D1CBC4;
}
.dark .prose-imperience h2,
.dark .prose-imperience h3 {
    color: #F0EBE3;
}
.dark .prose-imperience a {
    color: #74C69D;
}
.dark .prose-imperience a:hover {
    color: #95D5B2;
}
.dark .prose-imperience blockquote {
    border-left-color: #52B788;
    color: #A8998F;
}

.dark .nav-dropdown {
    background: #162B22;
    border-color: rgba(255, 255, 255, 0.08);
}