/* =============================================================
   SHOOQA 22 — STYLE CONFIGURATION
   Change colours, fonts, sizing here. Structural CSS lives in
   styles.css and normally does not need editing.
   ============================================================= */

/* Special display face for the "Shooqa 22" navbar item — see --font-accent */
@font-face {
  font-family: "Alien Encounters";
  src: url("../fonts/Alien-Encounters-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

:root {

  /* ---------- Colour palette ---------- */
  --color-bg:            #0d0d0d;   /* base page background (behind the hero, gaps, overscroll) */
  --color-footer:        #0a0a0a;  /* footer background */
  --color-text:          #ffffff;  /* default text */
  --color-text-muted:    #9a9a9a;  /* secondary text */
  --color-accent:        #f3e00b;  /* highlight colour ("Shooqa 22" nav item) */
  --color-hero-overlay:  rgba(0, 0, 0, 0.25);  /* darkening layer over the hero images */

  /* ---------- Section backgrounds ----------
     Every content section (Videos, Concerts, Bio, Photos, Contact) is
     painted with one of these two colours, alternating from top to bottom
     in the order the sections actually appear on the page. main.js assigns
     them after the final section order is known, so the stripes stay
     correct even when sectionOrder (config.js) is changed. The first
     section always uses --section-bg-1. Set both to the same value for a
     single flat background. */
  --section-bg-1:        #0d0d0d;
  --section-bg-2:        #151515;

  /* Hero: fade the bottom of the image into the section that follows it */
  --hero-fade-height:   55%;   /* how far up the fade reaches (0 to disable) */
  --hero-fade-color:    var(--section-bg-1);  /* must match the first section below the hero */

  /* Hero carousel dot selector */
  --hero-dots-margin:        2.8rem;                  /* gap from bottom of screen */
  --hero-dot-gap:            0.55rem;                  /* space between dots */
  --hero-dot-size:           8px;                     /* inactive dot diameter */
  --hero-dot-active-width:   26px;                    /* active dot becomes a pill */
  --hero-dot-color:          rgba(255, 255, 255, 0.45);
  --hero-dot-color-hover:    rgba(255, 255, 255, 0.75);
  --hero-dot-color-active:   #ffffff;

  /* Navbar */
  --navbar-text:            #ffffff;
  --navbar-bg-transparent:  transparent;
  --navbar-bg-scrolled:     rgba(10, 10, 10, 0.92);
  --navbar-height:          72px;

  /* ---------- Typography ---------- */
  --font-heading: "Oswald", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  /* Display font used only for the "Shooqa 22" accent item in the navbar.
     Font file: assets/fonts/Alien-Encounters-Italic.ttf
     (https://www.dafont.com/alien-encounters.font) */
  --font-accent:  "Alien Encounters", var(--font-heading);

  --nav-font-size:        0.95rem;
  --nav-letter-spacing:   0.18em;
  --nav-gap:              2.6rem;   /* space between nav items */

  --accent-font-size:     1.45rem;  /* size of the "Shooqa 22" nav item */
  --accent-letter-spacing: 0.28em;

  --videos-title-size:    2rem;

  /* ---------- Layout ---------- */
  --content-max-width:    1100px;
  --section-padding-y:    6rem;
  --video-max-width:      700px;   /* width of the stacked video column */
  --video-grid-gap:       3rem;    /* vertical space between videos */

  --concerts-max-width:   640px;   /* width of the concert list */
  --concert-divider:      rgba(255, 255, 255, 0.12);  /* row separator lines */

  /* ---------- Bio section ---------- */
  --bio-column-gap:       clamp(2.5rem, 6vw, 6rem);   /* space between text and image (wide screens) */
  --bio-image-width:      38vw;    /* width of the right-hand image column (wide landscape) */
  --bio-image-max-width:  560px;   /* cap so it doesn't get huge on ultra-wide screens */
  --bio-image-ratio:      3 / 4;   /* portrait aspect ratio when the image is stacked (narrow screens) */
  --bio-image-stack-max:  380px;   /* max image width when stacked vertically */

  /* ---------- Social icons ---------- */
  --social-icon-size:     22px;
  --social-icon-color:    #cfcfcf;
  --social-icon-hover:    var(--color-accent);
  --social-gap:           1.6rem;

  /* ---------- Photos / gallery ----------
     The gallery lays photos of any shape into flush "justified" rows
     (like Flickr / Google Photos): each row is scaled so its photos keep
     their real aspect ratio and the row fills the width edge to edge.
     `rowHeight` / `gap` below are the *targets* — actual heights vary a
     little per row so the edges stay flush. Both can also be overridden
     per site in config.js (`photos.rowHeight`, `photos.gap`).            */
  --gallery-max-width:    1320px;  /* wider than the other sections on purpose */
  --gallery-row-height:   190px;   /* target row height on wide screens (also set photos.rowHeight in config.js) */
  --gallery-gap:          10px;    /* space between photos */
  --gallery-radius:       4px;
  --gallery-caption-color:#ffffff;

  --lightbox-bg:          rgba(6, 6, 6, 0.95);  /* full-screen photo viewer backdrop */
}