/*
 * shared.css — khurram.online
 * Nav, footer, cursor, mobile menu, reveal animation.
 * Consumed by all pages that use site-widgets.js.
 * Page-specific styles stay in each page's own <style> block.
 */

/* ── CSS VARIABLES ──────────────────────────────────── */
:root {
  --linen:        #FAF7F2;
  --amber:        #C89B3C;
  --amber-light:  #E2BB6A;
  --terracotta:   #B06A4A;
  --ink:          #1E1E2E;
  --warm-paper:   #F5F0E8;
  --cream-border: #E8E0D0;
  --sage:         #6B7B6E;
  --ai-blue:      #2A6496;
  --font-head:    'Cormorant Garamond', Georgia, serif;
  --font-body:    'Lora', Georgia, serif;
  --font-quote:   'Dancing Script', cursive;
  --font-mono:    'JetBrains Mono', monospace;
}

/* ── CURSOR ─────────────────────────────────────────── */
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--amber); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
}
.cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 32px; height: 32px;
  border: 1.5px solid var(--amber); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform 0.12s ease, opacity 0.3s;
  opacity: 0.6;
}
body.hovering .cursor-ring {
  transform: translate(-50%, -50%) scale(1.5);
  opacity: 0.3;
}
@media (max-width: 900px) {
  .cursor-dot, .cursor-ring { display: none; }
  body { cursor: auto !important; }
}

/* ── NAV ────────────────────────────────────────────── */
nav#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 3rem;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
nav#navbar.scrolled {
  border-color: var(--cream-border);
  box-shadow: 0 2px 20px rgba(30, 30, 46, 0.08);
}
/* Use nav#navbar prefix throughout for specificity — beats old inline article CSS */
nav#navbar .nav-brand {
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 600;
  color: var(--ink); text-decoration: none; letter-spacing: 0.02em;
  display: flex; align-items: center; flex-shrink: 0;
}
nav#navbar .nav-brand span { color: var(--amber); }

nav#navbar .nav-links {
  list-style: none; display: flex; gap: 1.4rem; align-items: center;
}
nav#navbar .nav-links a {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 500;
  color: var(--ink); text-decoration: none; letter-spacing: 0.06em;
  text-transform: uppercase; opacity: 0.72;
  transition: opacity 0.2s, color 0.2s;
  white-space: nowrap;
}
nav#navbar .nav-links a:hover { opacity: 1; color: var(--amber); }
nav#navbar .nav-links a.active { opacity: 1; color: var(--amber); }

/* ── Portrait dropdown (desktop) ────────────────────── */
.nav-portrait-wrap {
  position: relative;
  display: flex; align-items: center;
  list-style: none;
}
.nav-portrait-wrap > button {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 500;
  color: var(--ink); letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0.72; background: none; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; gap: 0.25rem; white-space: nowrap;
  transition: opacity 0.2s, color 0.2s;
}
.nav-portrait-wrap > button:hover,
.nav-portrait-wrap:hover > button,
.nav-portrait-wrap:focus-within > button { opacity: 1; color: var(--amber); }
.nav-portrait-wrap > button.active { opacity: 1; color: var(--amber); }
.nav-caret {
  font-size: 0.55rem; opacity: 0.6;
  transition: transform 0.2s;
  display: inline-block;
}
.nav-portrait-wrap:hover .nav-caret,
.nav-portrait-wrap:focus-within .nav-caret { transform: rotate(180deg); }

.nav-portrait-dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 150px;
  background: var(--ink);
  border: 1px solid rgba(200,155,60,0.28);
  border-radius: 10px; padding: 8px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.45);
  z-index: 1001;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.nav-portrait-wrap:hover .nav-portrait-dropdown,
.nav-portrait-wrap:focus-within .nav-portrait-dropdown {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* nav#navbar prefix raises specificity to 0,2,2 — beats nav#navbar .nav-links a (also 0,2,2)
   because this declaration appears LATER in the file. Also resets opacity so the 0.72
   from .nav-links a does not bleed into the dark-background dropdown. */
nav#navbar .nav-portrait-dropdown a {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(250,247,242,0.78); text-decoration: none;
  padding: 0.65rem 0.9rem; border-radius: 6px; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  opacity: 1; /* reset: nav#navbar .nav-links a sets opacity:0.72 */
}
nav#navbar .nav-portrait-dropdown a:hover,
nav#navbar .nav-portrait-dropdown a.active {
  background: rgba(200,155,60,0.16); color: var(--amber-light);
}

/* ── MOBILE SAFETY NET ──────────────────────────────── */
@media (max-width: 640px) {
  html, body { overflow-x: hidden !important; max-width: 100vw; }
  img, svg, video, iframe { max-width: 100% !important; height: auto; }
  [style*="min-width"] { min-width: 0 !important; }
  p, span, a, div, li, h1, h2, h3, h4, blockquote { overflow-wrap: break-word; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* ── MOBILE MENU ────────────────────────────────────── */
.m-menu { display: none; }

@media (max-width: 900px) {
  nav#navbar .nav-links { display: none !important; }

  .m-menu {
    display: block; position: relative; margin-left: auto;
  }
  .m-menu summary {
    list-style: none; cursor: pointer;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(200,155,60,0.4); border-radius: 7px;
    background: rgba(200,155,60,0.05);
  }
  .m-menu summary::-webkit-details-marker { display: none; }
  .m-bars {
    position: relative; display: block;
    width: 20px; height: 2px;
    background: var(--amber); border-radius: 2px;
  }
  .m-bars::before, .m-bars::after {
    content: ''; position: absolute; left: 0;
    width: 20px; height: 2px;
    background: var(--amber); border-radius: 2px;
  }
  .m-bars::before { top: -6px; }
  .m-bars::after  { top:  6px; }
  .m-menu[open] summary {
    background: rgba(200,155,60,0.16); border-color: var(--amber);
  }
  .m-panel {
    position: absolute; top: calc(100% + 12px); right: 0;
    min-width: 210px; background: var(--ink);
    border: 1px solid rgba(200,155,60,0.28); border-radius: 10px;
    padding: 8px; display: flex; flex-direction: column; gap: 2px;
    box-shadow: 0 16px 44px rgba(0,0,0,0.45); z-index: 1000;
  }
  .m-panel a {
    font-family: var(--font-mono); font-size: 0.72rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(250,247,242,0.78); text-decoration: none;
    padding: 0.72rem 0.95rem; border-radius: 6px; white-space: nowrap;
  }
  .m-panel a:hover, .m-panel a.active {
    background: rgba(200,155,60,0.16); color: var(--amber-light);
  }

  /* Portrait nested group inside hamburger.
     All selectors prefixed with .m-menu to reach specificity 0,2,1 (21).
     This beats both:
       .m-menu summary          (0,1,1 = 11) — width/height/border/background
       .m-menu[open] summary    (0,2,1 = 21) — background/border-color (same spec, but
                                                 our rules are declared later → win on tie) */
  .m-portrait-group { width: 100%; }
  .m-menu .m-portrait-group > summary {
    width: 100%; height: auto; border: none; background: transparent;
    list-style: none; cursor: pointer;
    font-family: var(--font-mono); font-size: 0.72rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(250,247,242,0.78);
    padding: 0.72rem 0.95rem; border-radius: 6px;
    display: flex; justify-content: space-between; align-items: center;
    transition: background 0.15s, color 0.15s;
  }
  .m-menu .m-portrait-group > summary::-webkit-details-marker { display: none; }
  .m-menu .m-portrait-group > summary::after {
    content: '▾'; font-size: 0.6rem; opacity: 0.6;
    transition: transform 0.2s;
  }
  .m-menu .m-portrait-group[open] > summary::after { transform: rotate(180deg); }
  .m-menu .m-portrait-group > summary:hover,
  .m-menu .m-portrait-group > summary.active { background: rgba(200,155,60,0.10); color: var(--amber-light); }
  .m-portrait-panel {
    display: flex; flex-direction: column; gap: 1px;
    padding: 4px 0 6px 0.5rem;
    margin-left: 0.95rem;
    border-left: 2px solid rgba(200,155,60,0.2);
  }
  .m-portrait-panel a {
    font-family: var(--font-mono); font-size: 0.66rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(250,247,242,0.6); text-decoration: none;
    padding: 0.55rem 0.8rem; border-radius: 5px;
    transition: background 0.15s, color 0.15s;
  }
  .m-portrait-panel a:hover,
  .m-portrait-panel a.active { background: rgba(200,155,60,0.12); color: var(--amber-light); }
}

/* ── FOOTER ─────────────────────────────────────────── */
footer#site-footer {
  background: var(--ink);
  color: rgba(250,247,242,0.45);
  padding: 2.5rem 2rem;
  text-align: center;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
}
.footer-nav {
  display: flex; flex-wrap: wrap; gap: 0.55rem 1.4rem;
  justify-content: center; align-items: center;
  max-width: 720px; margin: 0 auto 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(200,155,60,0.18);
}
.footer-link {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(250,247,242,0.55); text-decoration: none;
  transition: color 0.2s;
}
.footer-link:hover, .footer-link.active { color: var(--amber-light); }
.footer-copy { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; }
.footer-copy a { color: var(--amber); text-decoration: none; }

/* ── REVEAL ANIMATION ───────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ── AMBIENT CORNER GLOW ────────────────────────────── */
/* Two soft radial glows (top-left, bottom-right) that breathe — expand and
   shrink — while crossfading through the design-system palette:
   amber (the craft) → terracotta (the warmth) → sage (the calm).
   Injected by site-widgets.js; pointer-events none; sits above section
   backgrounds (z-index 1) but below nav (1000) and all positioned content. */
.ambient-glow {
  position: fixed; width: 40vmax; height: 40vmax;
  border-radius: 50%; pointer-events: none; z-index: 1;
  will-change: transform;
}
.ambient-glow::before, .ambient-glow::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
}
.ambient-glow.tl { top: -14vmax; left: -14vmax; animation: glowBreathe 14s ease-in-out infinite; }
.ambient-glow.br { bottom: -14vmax; right: -14vmax; animation: glowBreathe 19s ease-in-out infinite reverse; }

/* top-left: amber breathing into terracotta */
.ambient-glow.tl::before {
  background: radial-gradient(circle, rgba(200,155,60,0.17) 0%, rgba(200,155,60,0.06) 42%, transparent 70%);
  animation: glowFadeA 14s ease-in-out infinite;
}
.ambient-glow.tl::after {
  background: radial-gradient(circle, rgba(176,106,74,0.14) 0%, rgba(176,106,74,0.05) 42%, transparent 70%);
  animation: glowFadeB 14s ease-in-out infinite;
}
/* bottom-right: sage breathing into amber */
.ambient-glow.br::before {
  background: radial-gradient(circle, rgba(124,140,114,0.15) 0%, rgba(124,140,114,0.05) 42%, transparent 70%);
  animation: glowFadeA 19s ease-in-out infinite;
}
.ambient-glow.br::after {
  background: radial-gradient(circle, rgba(200,155,60,0.14) 0%, rgba(200,155,60,0.05) 42%, transparent 70%);
  animation: glowFadeB 19s ease-in-out infinite;
}

@keyframes glowBreathe {
  0%, 100% { transform: scale(0.92); }
  50%      { transform: scale(1.12); }
}
@keyframes glowFadeA {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@keyframes glowFadeB {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

@media (max-width: 640px) {
  .ambient-glow { width: 56vmin; height: 56vmin; }
  .ambient-glow.tl { top: -22vmin; left: -22vmin; }
  .ambient-glow.br { bottom: -22vmin; right: -22vmin; }
}

/* ── ACCESSIBILITY ──────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10001;
  background: var(--ink); color: var(--linen);
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.85rem 1.4rem; text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
  body { cursor: auto !important; }
  .ambient-glow, .ambient-glow::before, .ambient-glow::after { animation: none !important; }
}