/* =========================================================
   Ganga Jamuna Ex Student Nepal — custom design layer
   Works alongside Tailwind utility classes (see header.php).

   COLOR SYSTEM: only 7 colors are used anywhere on this site.
   Every variable below maps onto one of these 7 — nothing else
   should ever be introduced without updating this block first.
   ========================================================= */

:root{
  --font-body: 'Noto Sans', 'Noto Sans Devanagari', sans-serif;
  --font-display: 'DM Serif Display', serif;
  /* ---- the only 7 colors in use ---- */
  --c-navy: #1F3048;
  --c-navy-dark: #1E2431;
  --c-burgundy: #982234;
  --c-gold: #EAA426;
  --c-cream: #F7F4ED;
  --c-white: #FFFFFF;
  --c-text-muted: #5D6B7A;

  /* ---- legacy variable names, remapped onto the 7 above ----
     Every existing var(--old-name) across the whole site keeps
     working unchanged; only what it points to has changed. */
  --navy: var(--c-navy);
  --navy-deep: var(--c-navy-dark);
  --navy-soft: var(--c-navy-dark);
  --paper: var(--c-cream);
  --paper-soft: var(--c-white);
  --paper-line: rgba(31,48,72,.15);        /* navy at 15% opacity — no gray exists in the 7 */
  --marigold: var(--c-gold);
  --marigold-dark: #C9861A;                 /* gold, darkened ~15% — hover state, not a new color */
  --rust: var(--c-burgundy);
  --prayer-blue: var(--c-navy-dark);        /* old blue accent retired; collapses into navy-dark */
  --pine: var(--c-navy);                    /* old "success" green retired; reads as navy instead */
  --ink: var(--c-navy);
  --ink-soft: var(--c-text-muted);

  --shadow-card:0 1px 2px rgba(31,48,72,.06), 0 8px 24px -12px rgba(31,48,72,.18);
  --shadow-card-hover:0 4px 8px rgba(31,48,72,.08), 0 20px 36px -16px rgba(31,48,72,.28);
}

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  /* background:var(--paper); */
  color:var(--ink);
  font-family:'Noto Sans', 'Noto Sans Devanagari', sans-serif;
}

:lang(ne), .lang-np{
  font-family:'Noto Sans Devanagari', 'Noto Sans', sans-serif;
}

/* Devanagari glyphs (matras, conjuncts) commonly read visually smaller
   than Latin text at the same declared font-size, even though Noto's
   official metrics claim to match. Bumping the root size specifically
   while Nepali is active scales every rem-based Tailwind class site-wide
   (headings, body text, buttons, nav) automatically. */
html:lang(ne) {
  font-size: 112%;
}

:focus-visible{ outline:3px solid var(--marigold); outline-offset:2px; border-radius:2px; }

/* Flag strip under top bar */
.flag-strip{ display:flex; width:100%; height:6px; }
.flag-strip span{ flex:1; }
.flag-strip .c1{ background:var(--prayer-blue); }
.flag-strip .c2{ background:var(--paper); }
.flag-strip .c3{ background:var(--rust); }
.flag-strip .c4{ background:var(--pine); }
.flag-strip .c5{ background:var(--marigold); }

/* Image fallback: graceful placeholder instead of a broken icon */
.media{ position:relative; overflow:hidden; background:linear-gradient(135deg, var(--navy-soft), var(--prayer-blue)); }
.media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.media.broken img{ display:none; }
.media.broken::after{
  content:attr(data-label);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:16px; font-size:.75rem; letter-spacing:.02em;
  color:rgba(255,255,255,.85); background:linear-gradient(135deg, var(--navy-soft), var(--prayer-blue));
}

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* Hero */
.hero-scrim{
  background:linear-gradient(180deg, rgba(30,36,49,.55) 0%, rgba(30,36,49,.74) 55%, rgba(30,36,49,.95) 100%);
}

/* Eyebrow label */
.eyebrow{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rust);
  display:inline-flex; align-items:center; gap:.6em; margin-bottom:14px; font-weight:600;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; display:inline-block; }
.on-navy .eyebrow{ color:var(--marigold); }

/* Cards */
.card-hover{ transition:transform .25s ease, box-shadow .25s ease; box-shadow:var(--shadow-card); }
.card-hover:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card-hover); }
.card-hover:hover .media img{ transform:scale(1.06); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem;
  padding:13px 26px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--marigold); color:var(--navy-deep); }
.btn-primary:hover{ background:var(--marigold-dark); box-shadow:0 10px 20px -8px rgba(234,164,38,.55); }
.btn-outline-light{ border-color:rgba(255,255,255,.5); color:#fff; }
.btn-outline-light:hover{ background:rgba(255,255,255,.12); }
.btn-outline-dark{ border-color:rgba(31,48,72,.35); color:var(--navy); }
.btn-outline-dark:hover{ background:rgba(31,48,72,.06); }
.btn-text{ font-weight:600; font-size:.92rem; display:inline-flex; align-items:center; gap:6px; color:var(--rust); }
.btn-text svg{ transition:transform .18s ease; }
.btn-text:hover svg{ transform:translateX(4px); }

.tag-pill{
  font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; background:var(--paper-soft);
  color:var(--ink-soft); padding:5px 11px; border-radius:999px; display:inline-block; font-weight:600;
}

/* Sticky header shadow on scroll */
.site-header{ backdrop-filter:blur(8px); }

/* Nav dropdown */
.nav-dropdown{ position:relative; }
.nav-dropdown-menu{
  position:absolute; top:100%; left:0; min-width:190px; background:#fff; border-radius:12px;
  box-shadow:var(--shadow-card-hover); padding:8px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease; z-index:60;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-dropdown-menu a{ display:block; padding:9px 12px; border-radius:8px; font-size:.9rem; }
.nav-dropdown-menu a:hover{ background:var(--paper-soft); }
.nav-underline{ position:relative; padding-bottom:4px; }
.nav-underline::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--marigold);
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.nav-underline:hover::after{ transform:scaleX(1); }

/* Flash notice ticker */
.flash-bar{ background:var(--rust); color:#fff; }
.flash-bar a:hover{ text-decoration:underline; }

/* Prose (rich-text) content — used for blog body, notice body, project description */
.prose-gj{ color:var(--ink-soft); line-height:1.75; }
.prose-gj h2{ font-family:inherit; font-weight:700; font-size:1.5rem; color:var(--navy); margin:1.6em 0 .6em; }
.prose-gj h3{ font-weight:700; font-size:1.2rem; color:var(--navy); margin:1.4em 0 .5em; }
.prose-gj p{ margin:0 0 1em; }
.prose-gj a{ color:var(--rust); text-decoration:underline; }
.prose-gj ul, .prose-gj ol{ margin:0 0 1em 1.4em; }
.prose-gj ul{ list-style:disc; }
.prose-gj ol{ list-style:decimal; }
.prose-gj img{ border-radius:12px; margin:1.2em 0; }
.prose-gj table{ width:100%; border-collapse:collapse; margin:1.2em 0; font-size:.92rem; }
.prose-gj table th, .prose-gj table td{ border:1px solid var(--paper-line); padding:8px 12px; text-align:left; }
.prose-gj table th{ background:var(--paper-soft); }
.prose-gj blockquote{ border-left:3px solid var(--marigold); padding:.4em 1em; background:var(--paper-soft); border-radius:0 8px 8px 0; margin:1.2em 0; font-style:italic; }

.pull-quote{
  padding:22px 24px; background:var(--paper); border-left:3px solid var(--marigold);
  border-radius:0 8px 8px 0;
}

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:12px; }
.gallery-grid .g-tall{ grid-row:span 2; }
.gallery-grid .g-wide{ grid-column:span 2; }
.gallery-cap{
  position:absolute; inset:auto 0 0 0; padding:10px 12px; font-size:.72rem; color:#fff;
  background:linear-gradient(0deg, rgba(30,36,49,.85), transparent); opacity:0; transition:opacity .25s ease;
}
.gallery-grid .media:hover .gallery-cap{ opacity:1; }
@media (max-width:900px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid .g-tall{ grid-row:span 1; }
}

/* Video play button */
.play-btn{
  width:78px; height:78px; border-radius:50%; background:var(--marigold); color:var(--navy-deep);
  display:flex; align-items:center; justify-content:center; cursor:pointer; border:none;
  box-shadow:0 10px 30px -6px rgba(0,0,0,.55); transition:transform .2s ease;
}
.play-btn:hover{ transform:translate(-50%,-50%) scale(1.08); }

/* Stat counters */
.stat-num{ font-weight:700; color:var(--marigold); }

/* Filter buttons */
.filter-btn{
  font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; padding:8px 16px; border-radius:999px;
  border:1px solid var(--paper-line); background:transparent; color:var(--ink-soft); cursor:pointer; transition:.2s;
  font-weight:600;
}
.filter-btn.active, .filter-btn:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* Skip link */
.skip-link{ position:absolute; left:-999px; top:auto; background:var(--navy); color:#fff; padding:10px 18px; border-radius:0 0 8px 0; z-index:100; }
.skip-link:focus{ left:0; top:0; }

/* Language toggle */
.lang-toggle{
  display:inline-flex; align-items:center; border:1px solid rgba(255,255,255,.3); border-radius:999px; overflow:hidden; font-size:.72rem; font-weight:700;
}
.lang-toggle a{ padding:5px 11px; color:rgba(255,255,255,.65); }
.lang-toggle a.active{ background:var(--marigold); color:var(--navy-deep); }