/* =========================================================================
   ISRME — SHARED DESIGN SYSTEM
   -------------------------------------------------------------------------
   Brand palette, typography, global reset, site header & navigation,
   mobile drawer menu, and footer.

   Page-specific layout, hero, and component styles live in each .php file.

   To update the navigation: edit isrme-header.php
   To add a new menu item:   edit isrme-header.php (one file, all pages)
   To change a color:        edit the :root variables below
   ========================================================================= */


/* ── DESIGN TOKENS ──────────────────────────────────────────────────────── */
:root {
  /* Brand palette (ISRME style guide literal) */
  --blue:    #218da6;
  --blue-dk: #196e83;   /* derived darker for hover */
  --mist:    #abccd3;
  --mango:   #cb822a;
  --mango-dk:#a86422;   /* derived darker for hover */
  --lassi:   #ebd4a8;
  --spider:  #e6e6e6;
  --grey:    #808080;
  --black:   #1a1a1a;
  --white:   #ffffff;
  /* Typography */
  --sans:  'Lato', sans-serif;
  --serif: 'EB Garamond', Georgia, serif;
}


/* ── GLOBAL RESET ───────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html  { scroll-behavior:smooth; overflow-x:hidden; }
body  { font-family:var(--serif); font-size:16px; color:var(--black); background:var(--white); line-height:1.65; overflow-x:hidden; }
a     { color:inherit; text-decoration:none; }
img   { display:block; max-width:100%; }


/* ── SITE HEADER ────────────────────────────────────────────────────────────
   Structural rules only — shared by every page.
   The visual treatment (background, position, border-bottom, box-shadow)
   is defined per-page in each .php file's own <style> block.            */
.site-header {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:1.35rem;
  height:88px;
  z-index:100;
}
.site-logo { display:flex; align-items:center; padding:0; flex:0 0 auto; }
.site-logo img {
  height:60px; width:auto; display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}
.site-header > nav { display:flex; align-items:center; flex:1; padding-right:1.5rem; }
.site-header > nav ul { list-style:none; display:flex; align-items:center; width:100%; }
.site-header > nav ul li a {
  font-family:var(--sans); font-size:0.76rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--white);
  padding:0.5rem 0.85rem;
  text-shadow:0 1px 3px rgba(0,0,0,0.5);
  transition:color 0.15s;
}
.site-header > nav ul li a:hover          { color:var(--lassi); }
.site-header > nav ul li.active a         { color:var(--lassi); border-bottom:2px solid var(--mango); }

.nav-login { margin-left:auto; }
.nav-login a {
  background:var(--blue)!important; color:var(--white)!important;
  margin-left:0.4rem; padding:0.42rem 1.1rem!important; border-radius:1px;
  text-shadow:none;
}
.nav-login a:hover { background:var(--blue-dk)!important; }


/* ── HAMBURGER BUTTON (desktop: hidden) ─────────────────────────────────────
   Appears at ≤700 px, immediately to the left of Login, so the two
   right-side controls feel like an intentional pair.                     */
.nav-hamburger { display:none; }
.nav-hamburger button {
  background:none; border:none; cursor:pointer;
  font-size:2.4rem; line-height:1;
  color:var(--mango);
  text-shadow:0 1px 3px rgba(0,0,0,0.5);
  padding:0.35rem 0.6rem;
  transition:color 0.15s;
}
.nav-hamburger button:hover { color:var(--mango-dk); }


/* ── MOBILE BACKDROP ────────────────────────────────────────────────────────
   Semi-transparent overlay behind the drawer. Always in the DOM;
   hidden with opacity + pointer-events so it can animate smoothly.      */
.mobile-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.55);
  z-index:200;
  opacity:0; pointer-events:none;
  transition:opacity 0.22s ease-out;
}
.mobile-overlay.is-visible { opacity:1; pointer-events:auto; }


/* ── MOBILE DRAWER ───────────────────────────────────────────────────────────
   Right-side slide-in panel. Visual language matches the spotlight card:
   translucent dark background, mango left-border accent, blurred glass.  */
.mobile-drawer {
  position:fixed; top:0; right:0; bottom:0;
  width:75%; max-width:225px;
  background:rgba(14,14,14,0.97);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-left:3px solid var(--mango);
  z-index:210;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  visibility:hidden;
  /* On close: slide out over 0.22 s, then hide at 0.22 s (after animation) */
  transition:transform 0.22s ease-out, visibility 0s linear 0.22s;
}
.mobile-drawer.is-open {
  transform:translateX(0);
  visibility:visible;
  /* On open: show immediately (0 s delay), then slide in */
  transition:transform 0.22s ease-out, visibility 0s linear 0s;
}

/* Close (✕) button in top-right corner of drawer */
.drawer-close {
  position:absolute; top:1.1rem; right:1.1rem;
  background:none; border:none; cursor:pointer;
  color:var(--white); font-size:1.25rem; line-height:1;
  padding:0.3rem; opacity:0.65; transition:opacity 0.15s;
}
.drawer-close:hover { opacity:1; }

/* Scrollable nav list area */
.drawer-nav { flex:1; overflow-y:auto; padding-top:4.5rem; }
.drawer-nav ul { list-style:none; }
.drawer-nav ul li a {
  display:flex; align-items:center;
  height:52px; padding:0 1.5rem;
  font-family:var(--sans); font-size:0.78rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--white);
  border-bottom:1px solid rgba(255,255,255,0.07);
  transition:background 0.15s, color 0.15s;
  text-shadow:none;
}
.drawer-nav ul li a:hover         { background:rgba(255,255,255,0.06); color:var(--lassi); }
.drawer-nav ul li.active a {
  color:var(--lassi);
  border-left:3px solid var(--mango);
  padding-left:calc(1.5rem - 3px);
}

/* Login button at the bottom of the drawer */
.drawer-login {
  padding:1.25rem 1.5rem 2.25rem;
  border-top:1px solid rgba(255,255,255,0.1);
}
.drawer-login-btn {
  display:block; text-align:center;
  background:var(--blue); color:var(--white)!important;
  font-family:var(--sans); font-size:0.74rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:0.65rem 1rem; border-radius:1px;
  transition:background 0.15s;
  text-shadow:none;
}
.drawer-login-btn:hover { background:var(--blue-dk); }


/* ── FOOTER ─────────────────────────────────────────────────────────────── */
footer { background:var(--blue); padding:1.65rem 2rem; text-align:center; }
footer p { font-family:var(--sans); font-size:0.78rem; font-weight:300; letter-spacing:0.07em; color:var(--white); }
footer a { color:var(--lassi); }
footer a:hover { color:var(--white); }


/* ── RESPONSIVE — SHARED HEADER RULES ──────────────────────────────────── */
@media(max-width:700px) {
  /* Transparent — lets per-page hero imagery show through on mobile.
     !important overrides per-page background rules which appear later
     in document order.                                                 */
  .site-header   { height:80px; background:transparent !important; }
  .site-logo img { height:60px; }
  /* Hide desktop nav links and login pill; reveal hamburger.
     Login is accessible inside the mobile drawer. */
  .site-header > nav ul li:not(.nav-hamburger) { display:none; }
  .nav-hamburger { display:block; margin-left:auto; }
}
@media(max-width:600px) {
  .site-logo img { height:50px; }
}