/* ============================================================
   Lore of Shangrila — global styles (pure HTML + CSS, no JS)
   ============================================================ */

/* ---------- Web fonts ---------- */
/* Path is relative to THIS css file (/css/), so we step out with ../fonts/ */
@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/BebasNeue-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;       /* show fallback text instantly while the font loads */
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #000000;
  --fg: #f2f2f2;
  --muted: #b8b8b8;
  --accent: #c9a24b;        /* warm gold accent — change to match your brand */
  --font-display: "Bebas Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --header-h: 64px;
  --max: 1100px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-display);   /* Bebas Neue, with system-font fallbacks */
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }   /* responsive images, no inline gaps */
a { color: inherit; text-decoration: none; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 1rem; }
main { min-height: 70vh; }
section { padding: 4rem 0; }

/* ---------- Sticky header ---------- */
.site-header {
  position: sticky;            /* pins to the top as the page scrolls */
  top: 0;
  z-index: 1000;               /* keeps it above page content/images */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-inline: 1rem;
  background: rgba(0, 0, 0, .85);
  backdrop-filter: blur(8px);  /* frosted-glass effect over content */
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-header .brand { display: flex; align-items: center; }
.site-header .brand img { height: 44px; width: auto; }   /* logo fits inside the 64px header */

.site-nav ul { display: flex; gap: 1.5rem; list-style: none; }
.site-nav a { color: var(--muted); transition: color .2s; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--accent); }   /* highlight current page */

/* The checkbox that drives the mobile menu — never visible itself */
.nav-toggle-cb { display: none; }

/* Hamburger label — hidden on desktop, shown on mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--fg); transition: .3s; }

/* ---------- Responsive: phones & small tablets ---------- */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }            /* reveal the hamburger label */

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;        /* drop panel sits just below header */
    background: rgba(0, 0, 0, .98);
    transform: translateY(-150%);            /* parked off-screen until opened */
    transition: transform .3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  /* Pure-CSS toggle: when the hidden checkbox is checked, slide the menu in.
     "~" selects the .site-nav that follows the checkbox in the same header. */
  .nav-toggle-cb:checked ~ .site-nav { transform: translateY(0); }

  .site-nav ul { flex-direction: column; gap: 0; padding: 1rem 0; }
  .site-nav li { text-align: center; }
  .site-nav a { display: block; padding: .9rem; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 3rem 1rem;
  text-align: center;
  color: var(--muted);
}
.site-footer .brand { font-weight: 700; color: var(--fg); margin-bottom: 1rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 1rem; }
.footer-nav a:hover { color: var(--accent); }
.socials { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; align-items: center; margin-bottom: 1rem; }
.socials a { display: inline-flex; align-items: center; gap: .5rem; }       /* icon + label + value on one row */
.social-icon { width: 1.15em; height: 1.15em; flex-shrink: 0; }              /* scales with the link's font size */
.social-handle { color: var(--fg); }                                        /* the @handle / email value */
.socials a:hover, .socials a:hover .social-handle { color: var(--accent); } /* hover recolors text + value together */
.copy { font-size: .85rem; }

/* ---------- Hero / page intro ---------- */
.hero { text-align: center; padding: 6rem 1rem 1.5rem; }   /* trimmed bottom gap before grid */
.hero h1 { font-size: clamp(2rem, 6vw, 3.5rem); margin-bottom: 1rem; color: var(--accent); }  /* golden, scales with screen */
.hero p { color: var(--muted); max-width: 45ch; margin-inline: auto; }
.hero .tagline { color: var(--accent); font-size: 1.15rem; font-weight: 600; margin-bottom: .75rem; }

.page-title { text-align: center; margin-bottom: 1.5rem; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.page-body { color: var(--muted); max-width: 65ch; margin-inline: auto; }

/* ---------- Placeholder image grid (home page) ---------- */
.grid-section { padding-top: 2rem; }       /* margin between hero text and grid */

.image-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 4 equal columns on desktop */
  gap: 1.25rem;
}

.image-card {
  aspect-ratio: 1 / 1;                      /* square cards; scale fluidly, ~300x300+ */
  border-radius: 8px;
  overflow: hidden;                         /* clip the image to the rounded corners */
  background: rgba(255, 255, 255, .04);     /* faint placeholder tint while loading */
}
.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;                        /* fill the square without distorting */
  transition: transform .3s ease;
}
.image-card:hover img { transform: scale(1.05); }   /* subtle zoom on hover */
.image-card a { display: block; width: 100%; height: 100%; cursor: zoom-in; }

/* Blank filler card: solid black, no image, not interactive (just evens out the grid) */
.image-card--blank {
  background: #000;
  pointer-events: none;
}

/* Collapse to 2 columns on phones & small tablets */
@media (max-width: 768px) {
  .image-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Lightbox / full-screen modal (pure CSS via :target) ---------- */
.lightbox {
  display: none;                    /* hidden until its id is the URL :target */
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;   /* explicit edges: some mobile browsers ignore `inset` here */
  width: 100%;
  height: 100%;
  z-index: 2000;                    /* above the sticky header */
  align-items: center;              /* flex centering (set vertical + horizontal) */
  justify-content: center;
  padding: 2rem;
  background: rgba(0, 0, 0, .9);    /* dim backdrop */
}
.lightbox:target { display: flex; }                 /* reveal when targeted */

/* Full-area click target behind the image to close on outside click */
.lightbox-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: zoom-out; }

.lightbox img {
  position: relative;               /* sits above the backdrop link */
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;              /* show the whole image, never cropped */
  border-radius: 6px;
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  z-index: 1;                       /* above the backdrop link */
  font-size: 2.5rem;
  line-height: 1;
  color: var(--fg);
  cursor: pointer;
}
.lightbox-close:hover { color: var(--accent); }

/* Long-form text blocks (e.g. History) */
.prose { max-width: 800px; margin-inline: auto; }
.prose p { color: var(--muted); margin-bottom: 1.25rem; text-align: justify; }   /* spacing + justified edges */
.hl { color: var(--accent); font-weight: 600; }            /* highlighted names */