/* =============================================================
   LSN THEME
   The shared look for every page: colours, type, the LSNRP word
   wall, buttons, the nav and the footer. Page-specific layout
   lives in its own file (home.css for the homepage, and so on).

   The style comes from the banner art: a purple-to-magenta plaster
   wall, cream lettering, and everything leaning at the same angle
   as the "Leonida" wordmark.
   ============================================================= */

/* ---------- 1. Colours and settings ----------
   Change a colour here and it changes everywhere. */
:root {
  --night:   #14021F;   /* page background                       */
  --night-2: #1E0630;   /* slightly raised areas (menus, panels) */
  --violet:  #5B017D;   /* top of the banner gradient            */
  --magenta: #CC48B4;   /* bottom of the banner gradient         */
  --neon:    #E040FB;   /* the glow ring on both logos           */
  --peach:   #F2C38B;   /* sunset inside the Leonida disc        */
  --orange:  #E8874A;   /* brand sunset orange                   */
  --coral:   #E06B5A;   /* the stripes across the logo's sun     */
  --cream:   #FFF5C8;   /* brand cream: headings                 */
  --text:    #EADCF2;   /* body text                             */
  --muted:   #A994B8;   /* secondary text                        */
  --line:    rgba(255, 245, 200, .14);

  /* the wordmark's tilt, reused for buttons, edges and tags */
  --lean: -6deg;
  --skew: -12deg;

  /* the two signature backgrounds */
  --sunset: linear-gradient(180deg, var(--peach) 0%, var(--orange) 40%, var(--coral) 70%, var(--magenta) 100%);
  /* The banner's own gradient, sampled from the artwork, top to bottom. */
  --wall: linear-gradient(180deg, #711083 0%, #731584 25%, #82228B 40%, #8B2A8F 50%, #983295 60%, #AB3F9D 75%, #C24EA8 90%, #CC53AB 100%);
  /* The banner's plaster, as one large image (logo removed) laid over
     the gradient. Shown once and scaled to fit, never tiled, so the
     texture doesn't repeat or mirror. */
  --plaster:
    url("logos/plaster.webp") center / cover no-repeat,
    var(--wall);

  --nav-h: 4.75rem;
  --gutter: clamp(1rem, 5vw, 4rem);

  /* The content width. Every section lines its content up to this,
     including the full-bleed coloured ones, so nothing drifts to the
     edges on a wide monitor. --edge is the space either side of it. */
  --content: 74rem;
  --edge: max(1rem, (100% - var(--content)) / 2);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* Page scale. Every size is in rem, a multiple of this number. It is
   16px up to a 1860px-wide window and then grows with the screen (to a
   26px ceiling), so a big monitor shows the same layout larger instead
   of a small layout stranded in the middle. */
html { scroll-behavior: smooth; font-size: clamp(16px, .86vw, 26px); }
body {
  background: var(--night);
  color: var(--text);
  font: 400 1.0625rem/1.65 Saira, system-ui, sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}
img { display: block; max-width: 100%; height: auto; }
/* Anything marked hidden stays hidden, even if a layout rule gives it
   display: flex or grid. Without this, the page header stayed visible
   after an application was submitted. */
[hidden] { display: none !important; }
a { color: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }

/* The word wall: "LSNRP" tiled in slanted outline type behind
   every page, at 5% strength. It's drawn in CSS as an SVG, so it
   costs no download. */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  transform: rotate(var(--lean));
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='90'%3E%3Ctext x='0' y='64' font-family='Arial Black,Arial,sans-serif' font-weight='900' font-style='italic' font-size='68' fill='none' stroke='%23FFF5C8' stroke-width='1.5'%3ELSNRP%3C/text%3E%3C/svg%3E");
  background-size: 300px 90px;
  pointer-events: none;
}

/* ---------- 3. Type ----------
   .display is the big slanted heading face. Saira Extra Condensed
   has no italic of its own, so the browser slants it for us, which
   is exactly the lean we want. */
.display {
  font-family: "Saira Extra Condensed", sans-serif;
  font-style: italic;
  font-weight: 900;
  line-height: .92;
  color: var(--cream);
}
h2.display { font-size: clamp(2.6rem, 6vw, 4.6rem); margin-bottom: 1.25rem; }
.lead { font-size: 1.2rem; max-width: 34em; }
p + p { margin-top: 1em; }

/* ---------- 4. Layout helpers ---------- */
.wrap { width: min(var(--content), 100% - 2rem); margin: 0 auto; }
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; position: relative; }

/* ---------- 5. Buttons ----------
   The box is skewed to lean like the wordmark; the label inside is
   skewed back so the text stays upright. */
.btn {
  display: inline-block;
  padding: .85rem 1.9rem;
  font-weight: 700;
  text-decoration: none;
  transform: skewX(var(--skew));
  transition: background .2s, color .2s;
}
.btn > span { display: inline-block; transform: skewX(12deg); }
.btn-hot { background: var(--cream); color: var(--violet); }
.btn-hot:hover { background: var(--peach); }
.btn-line { box-shadow: inset 0 0 0 2px var(--cream); color: var(--cream); }
.btn-line:hover { background: rgba(255,245,200,.12); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.text-link { color: var(--peach); font-weight: 600; }
.text-link:hover { color: var(--cream); }

/* ---------- 6. Nav ----------
   Built by site.js. It floats over the top of the page and picks up
   a dark backing once you scroll (site.js adds .is-scrolled). */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 2.25rem;
  padding: 0 var(--gutter);
  transition: background .25s, box-shadow .25s;
}
nav.is-scrolled {
  background: rgba(20, 2, 31, .92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
}
.nav-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 700; color: var(--cream); letter-spacing: .02em; }
.nav-logo img { width: 40px; height: 40px; }
.nav-logo b { color: var(--peach); font-weight: 700; }

.nav-links { display: flex; gap: 1.75rem; margin-right: auto; }
.nav-links > li { position: relative; }
.nav-links a { text-decoration: none; font-weight: 500; color: rgba(255,245,200,.82); white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--cream); }
.nav-links > li > a.active { box-shadow: 0 2px 0 var(--peach); }
.chev { display: inline-block; width: .45em; height: .45em; margin-left: .35em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.2em) rotate(45deg); }

/* Dropdowns open on hover or keyboard focus. The invisible ::after
   bridges the gap so the menu doesn't close on the way down. */
.dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1rem; }
.dropdown-menu {
  display: none;
  position: absolute; top: calc(100% + 1rem); left: -1rem;
  min-width: 14rem; padding: .5rem 0;
  background: var(--night-2);
  box-shadow: 0 0 0 1px var(--line), 0 20px 40px rgba(0,0,0,.4);
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-menu a { display: block; padding: .5rem 1.1rem; }
.dropdown-menu a:hover { background: rgba(255,245,200,.06); }

.nav-right { display: flex; align-items: center; gap: 1.1rem; }
.nav-apply { padding: .55rem 1.3rem; }
.nav-social img { width: 1.1rem; height: 1.1rem; filter: invert(1); opacity: .6; transition: opacity .2s; }
.nav-social:hover img { opacity: 1; }

/* A social account that isn't live yet: dimmer, no hover, and a
   "coming soon" tooltip from its title attribute. */
.is-soon { cursor: default; }
.is-soon img, .nav-social.is-soon:hover img { opacity: .25; }

/* Hamburger, shown below 1000px */
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 2.5rem; height: 2.5rem; background: none; border: 0; cursor: pointer; margin-left: auto; }
.nav-toggle span { display: block; height: 2px; background: var(--cream); transition: transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1000px) {
  nav { gap: 1rem; }
  .nav-toggle { display: flex; }
  .nav-social { display: none; }   /* socials live in the footer on phones */
  .nav-links {
    display: none;
    position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
    flex-direction: column; gap: 0;
    padding: 1rem var(--gutter) 2rem;
    background: var(--night);
    overflow-y: auto;
  }
  .nav-links.is-open { display: flex; }
  .nav-links > li { border-bottom: 1px solid var(--line); padding: .9rem 0; }
  .nav-links > li > a.active { box-shadow: none; color: var(--peach); }
  .dropdown::after { display: none; }
  .dropdown-menu { display: block; position: static; background: none; box-shadow: none; padding: .4rem 0 0 1rem; min-width: 0; }
  .dropdown-menu a { padding: .35rem 0; color: var(--muted); }
  .nav-links .chev { display: none; }
}

/* ---------- 7. Footer ----------
   Top: the badge and slogan beside three columns of links.
   Below, centred (laid out like Rockstar's): the social icons, the
   legal links, and an age notice in a rating-style box. */
.site-footer { background: #0D0014; border-top: 1px solid var(--line); padding: 4rem var(--gutter) 2.5rem; color: #CFC0DA; }
.footer-inner { width: min(var(--content), 100%); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 2fr; gap: 3rem; }
.footer-logo { width: 4.5rem; height: auto; margin-bottom: 1rem; }
.footer-tag { font: italic 900 1.5rem/1.05 "Saira Extra Condensed"; color: var(--cream); }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer-col h3 { font-size: .95rem; font-weight: 700; color: var(--cream); margin-bottom: .75rem; }
.footer-col a { display: inline-block; padding: .2rem 0; text-decoration: none; color: #CFC0DA; }
.footer-col a:hover { color: var(--cream); }

.footer-base { width: min(var(--content), 100%); margin: 3.5rem auto 0; padding-top: 2.5rem; border-top: 1px solid var(--line); display: grid; justify-items: center; gap: 2rem; text-align: center; }
.footer-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.25rem; }
.footer-social img { width: 1.6rem; height: 1.6rem; filter: invert(1); opacity: .8; transition: opacity .2s; }
.footer-social a:hover img { opacity: 1; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2.25rem; }
.footer-legal a { color: #D9CBE3; text-decoration: none; font-size: 1.05rem; }
.footer-legal a:hover { color: var(--cream); text-decoration: underline; }

.footer-age { display: flex; align-items: center; gap: 1.5rem; text-align: left; max-width: 34rem; }
.age-box {
  flex: none; width: 4.5rem; display: grid; justify-items: center;
  border: 2px solid var(--cream); color: var(--cream); padding: .3rem 0 .25rem; line-height: 1;
}
.age-box span { font-size: .62rem; font-weight: 700; letter-spacing: .06em; }
.age-box strong { font: italic 900 2.3rem/1 "Saira Extra Condensed"; margin: .15rem 0; }
.age-text p { color: #E2D6EA; }
.age-text p + p { margin-top: .4rem; font-size: .95rem; color: #CFC0DA; }
.footer-bottom { font-size: .88rem; color: #B9A8C6; max-width: 46rem; }

@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-social { gap: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}