/* ============================================================
   shared.css
   Imported by every page. Edit here to change the whole site.
   ============================================================ */


/* ============================================================
   GOOGLE FONTS
   Orbitron  — futuristic display font for logo & headings
   Rajdhani  — clean modern font for nav labels & body
   EB Garamond — elegant serif for long-form body copy
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Rajdhani:wght@300;400;500;600&family=EB+Garamond:ital,wght@0,400;1,400&display=swap');


/* ============================================================
   CSS VARIABLES
   Change these to retheme the entire site at once.
   ============================================================ */
:root {
  --gold:        #c9a84c;   /* primary accent colour     */
  --gold-light:  #e8c97a;   /* hover / lighter accent    */
  --dark:        #0a0a0a;   /* deepest black             */
  --darker:      #050505;   /* page background           */
  --mid:         #111111;   /* card / alt section bg     */
  --white:       #f0ede8;   /* off-white text colour     */
  --nav-height:  72px;      /* nav bar height            */
}


/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background:  var(--darker);
  color:       var(--white);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  overflow-x:  hidden;
  /* no padding-top here — sections handle their own nav clearance */
}


/* ============================================================
   NAVIGATION BAR
   Fixed at the top on every page.
   Three zones: logo | links | social icons
   ============================================================ */
nav {
  position:   fixed;
  top: 0; left: 0; right: 0;
  z-index:    300;
  height:     var(--nav-height);
  display:    flex;
  align-items: center;
  justify-content: space-between;
  padding:    0 48px;
  background: rgba(5, 5, 5, 0.97);
  /* gold accent line under the nav */
  border-bottom: 1px solid rgba(201, 168, 76, 0.25);
}


/* ---- LOGO ----------------------------------------- */
.nav-logo {
  font-family:  'Orbitron', sans-serif;
  font-weight:  900;
  font-size:    20px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:        var(--white);
  text-decoration: none;
  /* subtle glow on hover */
  transition:   color 0.2s, text-shadow 0.2s;
}
.nav-logo:hover {
  color:       var(--gold);
  text-shadow: 0 0 12px rgba(201, 168, 76, 0.4);
}


/* the logo image — sized to fit neatly inside the nav height */
.nav-logo-img {
  display:    block;
  height:     44px;      /* fits within the 72px nav bar with breathing room */
  width:      auto;      /* preserves the rectangle aspect ratio             */
  object-fit: contain;
}
.nav-links {
  display:    flex;
  gap:        28px;
  list-style: none;
}

.nav-links a {
  font-family:  'Rajdhani', sans-serif;
  font-size:    13px;
  font-weight:  600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:        rgba(240, 237, 232, 0.65);
  text-decoration: none;
  /* underline grows in from left on hover */
  padding-bottom: 4px;
  border-bottom:  2px solid transparent;
  transition:     color 0.2s, border-color 0.2s;
}
.nav-links a:hover {
  color:        var(--gold);
  border-bottom-color: var(--gold);
}
/* the current page link is highlighted */
.nav-links a.active {
  color:        var(--gold);
  border-bottom-color: var(--gold);
}


/* ---- SOCIAL ICONS (SVG icons pulled from CDN) ----- */
.nav-social {
  display:    flex;
  gap:        18px;
  align-items: center;
}

/* each social icon link */
.nav-social a {
  display:        flex;
  align-items:    center;
  justify-content: center;
  width:          32px;
  height:         32px;
  color:          rgba(240, 237, 232, 0.45);
  text-decoration: none;
  transition:     color 0.2s, transform 0.15s;
}
.nav-social a:hover {
  color:     var(--gold);
  transform: translateY(-2px);
}
/* the SVG inside each link */
.nav-social svg {
  width:  18px;
  height: 18px;
  fill:   currentColor;
}


/* ============================================================
   SHARED LAYOUT HELPERS
   Used across all page templates.
   ============================================================ */

/* centred max-width wrapper */
.container {
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 48px;
}

/* standard section vertical padding — includes nav clearance at top */
section { padding: var(--nav-height) 0 80px; }

/* decorative gold rule above section titles */
.gold-line {
  width:         60px;
  height:        2px;
  background:    var(--gold);
  margin-bottom: 20px;
}

/* small uppercase label above a heading */
.section-label {
  font-family:    'Orbitron', sans-serif;
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  12px;
}

/* large section heading */
.section-title {
  font-family:    'Orbitron', sans-serif;
  font-size:      clamp(28px, 3.5vw, 48px);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height:    1.1;
  margin-bottom:  24px;
  color:          var(--white);
}

/* body copy under headings */
.section-body {
  font-family: 'EB Garamond', serif;
  font-size:   18px;
  line-height: 1.8;
  color:       rgba(240, 237, 232, 0.65);
  margin-bottom: 32px;
}


/* ============================================================
   BUTTONS
   ============================================================ */

/* filled gold button */
.btn-primary {
  display:     inline-block;
  font-family: 'Orbitron', sans-serif;
  font-size:   11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:       var(--dark);
  background:  var(--gold);
  padding:     14px 36px;
  text-decoration: none;
  border:      none;
  cursor:      pointer;
  transition:  background 0.2s, transform 0.15s;
}
.btn-primary:hover  { background: var(--gold-light); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0) scale(0.97); }

/* outlined ghost button */
.btn-outline {
  display:     inline-block;
  font-family: 'Orbitron', sans-serif;
  font-size:   11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:       var(--white);
  border:      1px solid rgba(240, 237, 232, 0.4);
  padding:     13px 36px;
  text-decoration: none;
  cursor:      pointer;
  margin-left: 16px;
  transition:  border-color 0.2s, color 0.2s, transform 0.15s;
}
.btn-outline:hover  { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn-outline:active { transform: translateY(0) scale(0.97); }


/* ============================================================
   SCROLL-REVEAL ANIMATION
   Add class="reveal" to any element.
   JS IntersectionObserver adds .visible when scrolled into view,
   triggering the CSS transition below.
   ============================================================ */
.reveal {
  opacity:    0;
  transform:  translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity:   1;
  transform: none;
}

/* stagger: children animate in one-by-one */
.reveal-stagger > * {
  opacity:    0;
  transform:  translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-stagger.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay: 0s;    }
.reveal-stagger.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay: 0.12s; }
.reveal-stagger.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay: 0.24s; }
.reveal-stagger.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay: 0.36s; }
.reveal-stagger.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay: 0.48s; }
.reveal-stagger.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay: 0.60s; }


/* ============================================================
   FOOTER — injected by nav.js into every page
   Contains a full navigation bar (logo | links | social)
   mirroring the top nav, so users never have to scroll back up.
   ============================================================ */
footer {
  background:  #030303;
  border-top:  1px solid rgba(201, 168, 76, 0.25); /* matches top nav border */
  padding:     0 0 28px;
  margin-top:  80px;  /* breathing room above the footer */
}


/* ---- FOOTER NAV ROW ------------------------------------
   Same three-zone layout as the top nav bar:
   logo on the left | page links in the centre | social on the right.
   Uses the same .nav-logo, .nav-links, .nav-social classes
   so hover styles are inherited automatically from above.
---- */
.footer-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 48px;
  height:          var(--nav-height);           /* matches top nav height */
  border-bottom:   1px solid rgba(255, 255, 255, 0.06); /* subtle divider */
}

/* footer nav links are slightly dimmer than the top nav —
   active page is still highlighted in gold via .active class */
.footer-nav .nav-links a {
  color: rgba(240, 237, 232, 0.45);
}

/* footer social icons are slightly dimmer too */
.footer-nav .nav-social a {
  color: rgba(240, 237, 232, 0.35);
}


/* ---- FOOTER BOTTOM ROW ---------------------------------
   Copyright line on the left, legal links on the right.
---- */
.footer-bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 48px 0;
}

.footer-copy {
  font-size:      12px;
  letter-spacing: 1px;
  color:          rgba(240, 237, 232, 0.2);
}

.footer-legal { display: flex; gap: 24px; }

.footer-legal a {
  font-size:       11px;
  color:           rgba(240, 237, 232, 0.2);
  text-decoration: none;
  transition:      color 0.2s;
}
.footer-legal a:hover { color: var(--gold); }


/* ---- HIDE FOOTER NAV ON MOBILE -------------------------
   On small screens the footer nav would be too cramped.
   We hide the links and social row and show only the
   copyright bar — keeping mobile clean.
---- */
@media (max-width: 900px) {
  .footer-nav { display: none; }
  .footer-bottom { padding: 20px; }
}


/* ============================================================
   RESPONSIVE — mobile breakpoint
   ============================================================ */
@media (max-width: 900px) {
  nav            { padding: 0 20px; }
  .nav-links     { display: none; }   /* replaced by drawer on mobile */
  .nav-social    { display: none; }   /* replaced by drawer on mobile */
  .container     { padding: 0 20px; }
  section        { padding: 50px 0; }
  footer         { margin-top: 48px; }
}


/* ============================================================
   MENU BUTTON
   Shows the word "MENU" on mobile and non-desktop screens.
   Changes to "CLOSE" when the drawer is open (via JS class).
   Hidden on desktop — the full nav links show instead.
   ============================================================ */
.hamburger {
  display:        none;       /* hidden on desktop */
  align-items:    center;
  justify-content: center;
  background:     none;
  border:         1px solid rgba(201, 168, 76, 0.4);   /* gold outline */
  cursor:         pointer;
  padding:        6px 14px;
  transition:     border-color 0.2s, background 0.2s;
}

/* show on mobile */
@media (max-width: 900px) {
  .hamburger { display: flex; }
}

.hamburger:hover {
  border-color: var(--gold);
  background:   rgba(201, 168, 76, 0.08);
}

/* the MENU / CLOSE text label */
.menu-label {
  font-family:    'Orbitron', sans-serif;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 3px;
  color:          var(--white);
  transition:     color 0.2s;
}
.hamburger:hover .menu-label { color: var(--gold); }

/* when JS adds .open — button shows CLOSE in gold */
.hamburger.open {
  border-color: var(--gold);
  background:   rgba(201, 168, 76, 0.08);
}
.hamburger.open .menu-label {
  content: 'CLOSE';   /* CSS can't change text content — JS handles this */
  color:   var(--gold);
}


/* ============================================================
   DRAWER BACKDROP
   Dark semi-transparent layer that covers the page behind
   the open drawer. Clicking it closes the drawer.
   ============================================================ */
.drawer-backdrop {
  position:   fixed;
  inset:      0;
  z-index:    400;
  background: rgba(0, 0, 0, 0.7);
  /* invisible and non-interactive by default */
  opacity:    0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

/* JS adds .open to make it visible */
.drawer-backdrop.open {
  opacity:        1;
  pointer-events: all;
}


/* ============================================================
   MOBILE DRAWER PANEL
   Slides in from the right. Full-screen height.
   Contains: logo + close | large nav links | social icons
   ============================================================ */
.drawer {
  position:   fixed;
  top:        0;
  right:      0;
  bottom:     0;
  z-index:    500;
  width:      min(320px, 85vw);   /* 320px max, 85% on very small screens */
  background: #080808;
  border-left: 1px solid rgba(201, 168, 76, 0.2);
  display:    flex;
  flex-direction: column;
  padding:    0;
  /* starts off-screen to the right */
  transform:  translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;   /* scroll inside drawer if content is very tall */
}

/* JS adds .open to slide it into view */
.drawer.open {
  transform: translateX(0);
}


/* ---- DRAWER TOP ROW: logo left, X close right ------------ */
.drawer-top {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 24px;
  height:          var(--nav-height);
  border-bottom:   1px solid rgba(201, 168, 76, 0.1);
  flex-shrink:     0;   /* don't let this row compress */
}

/* X close button */
.drawer-close {
  background:  none;
  border:      none;
  color:       rgba(240, 237, 232, 0.5);
  font-size:   22px;
  cursor:      pointer;
  padding:     8px;
  line-height: 1;
  transition:  color 0.2s, transform 0.2s;
}
.drawer-close:hover {
  color:     var(--gold);
  transform: rotate(90deg);   /* rotates on hover for a satisfying feel */
}


/* ---- DRAWER NAV LINKS — large, centred, stacked ---------- */
.drawer-links {
  list-style: none;
  padding:    32px 24px;
  flex:       1;   /* takes up all available space between top and social */
}

.drawer-link {
  display:        block;
  font-family:    'Orbitron', sans-serif;
  font-size:      18px;
  font-weight:    600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          rgba(240, 237, 232, 0.7);
  text-decoration: none;
  padding:        18px 0;
  border-bottom:  1px solid rgba(201, 168, 76, 0.08);
  /* slide right slightly on hover */
  transition:     color 0.2s, padding-left 0.2s;
}
.drawer-link:hover {
  color:        var(--gold);
  padding-left: 8px;
}

/* active page link is always gold */
.drawer-link.active { color: var(--gold); }

/* gold arrow indicator on active link */
.drawer-link.active::after {
  content:     ' ›';
  color:       var(--gold);
  margin-left: 8px;
}


/* ---- DRAWER SOCIAL ICONS — larger, row at bottom --------- */
.drawer-social {
  display:         flex;
  gap:             24px;
  align-items:     center;
  justify-content: center;
  padding:         28px 24px;
  border-top:      1px solid rgba(201, 168, 76, 0.1);
  flex-shrink:     0;
}

.drawer-social-icon {
  display:    flex;
  color:      rgba(240, 237, 232, 0.45);
  transition: color 0.2s, transform 0.15s;
}
.drawer-social-icon:hover {
  color:     var(--gold);
  transform: translateY(-3px);
}

/* larger SVG icons in the drawer vs the top nav */
.drawer-social-icon svg {
  width:  26px;
  height: 26px;
  fill:   currentColor;
}