/* -------------------------------------------------------------------------
     Shared utilities (css/utils.css)

     Purpose:
     - Central site-wide CSS utilities and baseline rules used by multiple pages.
     - Keeps reset, header/nav, common components (meme reveal, project cards)
         and accessibility helpers in one place so page styles can remain focused
         and small.

     Guidelines:
     - Do not set page-specific background colors here; pages control their own
         backgrounds (dark-mode is default, light-mode overrides live in
         `css/light_mode.css`).
     - Keep selectors generic and low-specificity; pages may override when
         required using page-scoped CSS files.
------------------------------------------------------------------------- */

/* -----------------------------
    Reset & Base
    ----------------------------- */
/* Box sizing reset */
*{ box-sizing: border-box; }

/* Base typography and body settings (do not set background here; pages may
   choose dark or light backgrounds and light_mode.css will override when
   enabled). */
body{
    min-height: 100%;
    margin: 0;
    font-family: 'Arial', sans-serif;
    font-size: 2vh;
    letter-spacing: 0.08vh;
    line-height: 1.5;
}

/* Footer baseline (color may be overridden per page) */
footer{ text-align: center; margin: 0; padding: 28px 0; }

/* -----------------------------
   Header & Navigation
   - fixed, translucent header shared across pages
   ----------------------------- */
header{
    color: white;
    padding: 1rem 2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0; left: 0;
    z-index: 10;
    transition: background-color 180ms ease, backdrop-filter 180ms ease;
    /* subtle translucent header with blur to create dimmed navbar effect */
    background-color: rgba(0, 0, 0, 0.437);
    backdrop-filter: blur(8px);
}



/* Site-wide mobile header adjustments: move logo to left, reduce header
   padding, make the logo slightly smaller and narrow the navbar spacing so
   mobile headers feel tighter across all pages. These are site-wide defaults
   and can be overridden by page-scoped CSS when necessary. */
@media screen and (max-width: 768px){
    header{
        padding: 0.6rem 1rem !important; /* narrower header */
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .logo{ height: 6vh !important; width: auto !important; }

    .logo-container{ margin-left: 0 !important; }

    /* Narrow the inline nav spacing so the visible navbar area is tighter */
    nav{ gap: 1rem !important; margin-right: 2vw !important; }

    /* Ensure hamburger remains absolutely positioned to the right and vertically centered */
    .hamburger{ display: block !important; position: absolute !important; right: 1rem !important; top: 50% !important; transform: translateY(-50%) !important; }
}

.hamburger{ display: none; background: transparent; border: 0; padding: 6px; width: 32px; height: 32px; position: relative; cursor: pointer; z-index: 50; }
.hamburger .bar{ display: block; height: 2px; background: white; width: 86%; transition: transform 240ms ease, opacity 180ms ease, top 200ms ease; position: absolute; left: 50%; transform: translateX(-50%); }
.hamburger .bar1{ top: 4px; } .hamburger .bar2{ top: 50%; transform: translateX(-50%) translateY(-50%); } .hamburger .bar3{ bottom: 4px; }
.hamburger.open .bar1{ top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); }
.hamburger.open .bar2{ opacity: 0; transform: translateX(-50%) translateY(-50%) scaleX(0); }
.hamburger.open .bar3{ top: 50%; transform: translateX(-50%) translateY(-50%) rotate(-45deg); }

header.nav-open{ background-color: rgba(0,0,0,0.42); backdrop-filter: blur(6px); }

/* When mobile nav opens, slide-in nav panel overlay behavior should dim the page;
   these baseline rules are used by pages that implement the mobile nav. */
/* Ensure open-state uses the site-wide mobile nudge so pages render the
   same expanded nav layout. Pages may override, but this baseline keeps
   behavior consistent across the site. */
header.nav-open nav{
    transform: translateX(15px);
    opacity: 1;
    pointer-events: auto;
}

/* Default footer: dark background, light text. light_mode.css will invert this. */
footer{ background: #000000; color: #ffffff; text-align: center; margin: 0; padding: 28px 0; }

/* Page-level dim overlay when header nav is open (keeps header above content) */
.page-wrapper::before{
    content: '';
    position: fixed;
    inset: 0;
    /* Use a CSS variable to control dim opacity when the mobile nav opens */
    background: rgba(0,0,0,var(--page-dim-opacity));
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    z-index: 9;
}
header.nav-open ~ .page-wrapper::before{ opacity: 1; pointer-events: auto; }

/* Logo and nav basics */
.logo-container{ display: flex; align-items: center; gap: 0.8rem; }
.logo{ height: 8vh; width: auto; }
nav{ display: flex; align-items: center; gap: 2vw; margin-right: 4vw; }
nav a{ color: white; text-decoration: none; font-weight: bold; transition: color 0.3s ease; }
nav a:hover{ color: #feda4a; }

/* Theme toggle placed in the nav. Small pill button that matches nav aesthetic. */
nav .theme-toggle{
    background: rgba(255,255,255,0.04);
    color: white;
    border: 1px solid rgba(254,218,74,0.18);
    padding: 10px 10px;
    border-radius: 100%;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    margin-left: 0.6rem;
    /* center the SVG icon vertically and horizontally */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    line-height: 1;
}
/* Disabled state for theme toggle (homepage uses a disabled toggle during the intro) */
nav .theme-toggle[disabled],
nav .theme-toggle[aria-disabled="true"]{
    opacity: 0.45 !important;
    pointer-events: none !important;
    cursor: default !important;
}
/* SVGs are block-level inside the button so flex centering works reliably */
nav .theme-toggle svg{ display: block; }
nav .theme-toggle:hover{ box-shadow: 0 0 0.2rem rgba(254,218,74,0.35); transition: 200ms ease;}

/* On very small screens where nav collapses, hide the inline toggle in the
   header and surface it as the first item inside the slide-in mobile nav panel
   when the menu is opened. This keeps the header clean (only hamburger)
   while making the theme toggle easily available in the mobile menu. */
@media (max-width: 768px){
    /* hide the standalone toggle in the header bar */
    nav .theme-toggle{ display: none !important; }

    /* when the mobile nav panel is open, show the toggle as the first item */
    header.nav-open nav .theme-toggle{
        display: inline-flex !important;
        order: -1; /* place at the top */
        margin-bottom: 0.6rem;
        width: auto;
        align-items: center;
        justify-content: flex-start;
    }
}

/* -----------------------------
   Media / Images / Headings
   ----------------------------- */
/* Basic inline image helper */
img{ vertical-align: middle; max-width: 100%; display: inline-block; }

/* Gradient headings (used on hero/intro sections) */
h2{
    font-size: 8vh;
    background: linear-gradient(to right, gold, #ee0979);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Light-mode: slightly darker gradient for h2 headings so they read well on
   bright backgrounds while preserving the clipped-text effect and behavior. */
body.light-mode h2{
    background: linear-gradient(to right, #c79b2f, #c40066);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Homepage hero heading (intro) — ensure the light-mode gradient matches other
   light-mode h2 headings even if the element has an inline background. */
body.light-mode .intro-text h2,
body.light-mode .intro-section .intro-text h2{
    background: -webkit-linear-gradient(to right, #c79b2f, #c40066) !important;
    background: linear-gradient(to right, #c79b2f, #c40066) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.inline-block{ max-width: 100%; display: inline-block; }

.page-wrapper{ z-index: 0; position: relative; }

/* Meme reveal overlay styles (shared) */
/* -----------------------------
   Meme reveal component
   - shared overlay and reveal button used on timeline & research pages
   ----------------------------- */
.meme-wrapper{
    position: relative;
    display: block;
    max-width: 640px;
    margin: 0 auto;
}

.meme-wrapper img.timeline-hero-image{
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer; /* show pointer when hovering the image */
}

.meme-overlay{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* slightly darker backdrop dim + small blur for subtle softening */
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    transition: opacity 300ms ease, visibility 300ms ease;
    opacity: 1;
    visibility: visible;
}

.meme-overlay.revealed{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Reveal button base styling used in dark mode; pages may override in
   light mode. */
.reveal-btn{
    background: rgba(255,255,255,0.06);
    color: white;
    border: 2px solid transparent;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.reveal-btn:focus,
.reveal-btn:hover{
    box-shadow: 0 0 0.2rem rgba(254, 218, 74, 0.8);
    background: rgba(160, 138, 65, 0.179);
    transition: transform 0.15s ease, background 0.3s ease, box-shadow 0.3s ease, border 0.15s ease;

}

/* Hero image used under the main timeline heading */
.timeline-hero-image{
    display: block;
    max-width: 640px;
    width: 100%;
    height: auto;
    margin: 1.2rem auto 0 auto;
}

/* -----------------------------
    Layout helpers
    ----------------------------- */
.container{ width: 90vw; max-width: 1360px; margin-left: auto; margin-right: auto; }

.margin-bottom-medium{ margin-bottom: 4vh; }
.paragraph-large{ letter-spacing: -0.02em; font-size: 20px; }
.padding-vertical-xlarge{ padding-top: 120px; padding-bottom: 120px; }

@media screen and (max-width: 768px){
    h2{ font-size: 40px; }
    .paragraph-large{ font-size: 18px; }
    .padding-vertical-xlarge{ padding-top: 80px; padding-bottom: 50px; }
    .hamburger{ display: block; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }

    /* Mobile slide-in nav panel (hidden by default, slides in when
       header.nav-open is set by the hamburger script). This mirrors the
       vertical nav used on timeline.html. */
    nav{
        /* panel overlay anchored to the right; use the same visual
           layout on every page so the mobile experience is consistent. */
        position: fixed;
        top: 0;
        /* offset by header horizontal padding so the panel sits flush
           with the page edge */
        right: calc(-2vw);
        height: 100vh;
        width: 82vw;
        max-width: 360px;
        background: rgba(6,6,6,0.98);
        transform: translateX(100%);
        transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease;
        opacity: 0;
        pointer-events: none;
        display: flex;
        flex-direction: column;
        align-items: center; /* center items horizontally */
        justify-content: flex-start;
          padding: 8vh 4vw;
          /* Reduce vertical spacing between nav items on phones so the opened
              navigation menu shows more items without excessive scrolling. */
          gap: 0.3rem;
        z-index: 40;
        text-align: center;
    }

    /* Show the panel when nav is opened. The 20px translate nudges the
       expanded panel slightly to the right to visually align with the
       header and page edges. */
    header.nav-open nav{
        transform: translateX(15px);
        opacity: 1;
        pointer-events: auto;
    }

    /* Make nav links vertical, larger tappable targets; remove underline
       decoration (no border-bottom) and center the link text. */
    nav a{
        display: block;
        /* slightly reduced vertical padding to tighten item spacing on phones */
        padding: 0.6rem 0;
        font-size: 1.02rem;
        color: white;
        text-decoration: none;
        border-bottom: none;
        width: 100%;
        text-align: center;
    }
    nav a:hover{ color: #feda4a; }

    /* Theme toggle: hidden in the header bar, revealed as the first item
       inside the slide-in panel using order so the DOM order need not change.
       Make it look identical to the desktop pill (same background, padding,
       and circular shape) and center it inside the panel. */
    nav .theme-toggle{ display: none !important; }
    header.nav-open nav .theme-toggle{
        display: inline-flex !important;
        order: -1; /* place at the top */
        margin: 0 auto 0.8rem auto;
        width: auto;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.04);
        color: white;
        border: 1px solid rgba(254,218,74,0.18);
        padding: 10px 10px;
        border-radius: 100%;
        font-weight: 700;
        font-size: 0.9rem;
        gap: 0.4rem;
    }
}

/* Mobile-friendly heading size consistency */
@media (max-width: 520px){
    h2.intro-heading, h2{ font-size: 5.2vh !important; }
    /* Reduce the base body font-size slightly on very small screens so
       paragraph/body text is less large and more comfortable to read. */
    body{ font-size: 1.6vh; }
}

/* Project card defaults (dark-mode) — page rules may override for light-mode */
body:not(.light-mode) .project-card{
    background: #0f0f10 !important;
    border: 1px solid #232325 !important;
    color: #e6e6e6 !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.6) !important;
}

body:not(.light-mode) .project-title{ color: #ffffff !important; }
body:not(.light-mode) .project-subtitle{ color: #cfcfcf !important; }

/* Accessibility helper: visually hidden text for screen readers */
.sr-only{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}