/*
Author: Damien Faust
Date: 10-12-2025
File Name: styles.css
*/

/* ==============================
   reset / base  — keep layout predictable
============================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body, header, nav, main, footer, h1, h2, h3, p, ul, li, div, img, figure, figcaption, section {
  margin: 0; padding: 0; border: 0;
}
img { display: block; max-width: 100%; height: auto; }
iframe { display: block; border: 0; }
a { text-decoration: none; color: inherit; }

/* ==============================
   theme tokens  — colors + fonts (fonts loaded in HTML)
============================== */
:root{
  --brand-cyan:   #00FFD1;     /* neon accent */
  --brand-purple: #C299FF;     /* headings / focus ring */

  /* purple gradient (lighter -> darker) */
  --bg-1: #3A015C;
  --bg-2: #1B0024;

  --font-display: 'Orbitron', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body:    'Roboto',   system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

/* ==============================
   global  — mobile-first baseline
============================== */
body{
  background-color: var(--bg-2);
  color: #FFFFFF;
  font-family: var(--font-body);
  line-height: 1.6;
}

/* mobile/default */
header{ background: var(--bg-2); border-bottom: 2px solid var(--brand-cyan); }
main{ background: var(--bg-2); padding: 2%; font-size: 1.15em; }

/* ==============================
   header / nav  — mobile: stacked menu under logo
============================== */
.main-header{
  display: flex;
  flex-direction: column;     /* stack on phones */
  align-items: stretch;
  gap: 10px;
  padding: 12px 16px;
}

.logo-link{ display: inline-flex; align-items: center; align-self: center; }
.logo-img{
  height: clamp(54px, 14vw, 64px);   /* smooth scaling on small screens */
  width: auto;
  filter: drop-shadow(0 0 3px var(--brand-cyan));
}

.primary-nav ul{
  list-style: none;
  display: block;              /* stacked list on mobile */
}

/* each nav item full-width, easy taps */
.primary-nav li{
  display: block;
  border-top: 1px solid var(--brand-cyan);
}
.primary-nav li:last-child{ border-bottom: 1px solid var(--brand-cyan); }

/* link style + brand font */
.primary-nav a,
nav ul li a{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(14px, 1.05vw + .25rem, 18px);
  line-height: 1;
  display: block;
  width: 100%;
  text-align: center;
  padding: .75em 1em;
  color: #FFFFFF;
  transition: color .2s ease, background-color .2s ease, outline-offset .2s ease, text-shadow .2s ease;
}

/* accessible hover/focus across sizes */
.primary-nav a:hover,
.primary-nav a:focus,
nav ul li a:hover,
nav ul li a:focus{
  color: #111;
  background-color: var(--brand-cyan);
  text-shadow: none;
}
.primary-nav a:focus-visible,
nav ul li a:focus-visible{
  outline: 2px solid var(--brand-purple);
  outline-offset: 2px;
}

/* separators appear on tablet+ */
.nav-sep li{ border-right: none; }

/* ==============================
   type
============================== */
h1, h2, h3{ font-family: var(--font-display); text-align: center; }
h1{ font-size: 2em; margin: .5em 0; }
h2, h3{ color: var(--brand-purple); }

/* ==============================
   links / buttons
============================== */
.external-link{ color: var(--brand-cyan); font-weight: 700; }
.external-link:hover{ text-shadow: 0 0 6px var(--brand-cyan); }

.button-link{
  display: inline-block;
  padding: .5em .9em;
  border: 1px solid var(--brand-cyan);
  border-radius: 6px;
  color: var(--brand-cyan);
  transition: background-color .3s, color .3s, box-shadow .3s;
}
.button-link:hover{ color:#000; background-color: var(--brand-cyan); box-shadow: 0 0 8px var(--brand-cyan); }

/* high-contrast form button (contact page) */
.button-primary{
  background-color: var(--brand-cyan);
  color: #111;
  border: 2px solid var(--brand-cyan);
  font-weight: 700;
}
.button-primary:hover,
.button-primary:focus{ background-color: #33FFE5; color: #111; }
.button-primary:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.button-primary:active{ transform: translateY(1px); }

/* ==============================
   media: video — uniform 16:9 wrappers
============================== */
.video-container{
  position: relative;
  width: 100%;
  max-width: 960px;              /* 960×540 default; responsive */
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #10061A;           /* deep purple while loading */
  border: 1px solid rgba(255,255,255,.08);
}
.video-container > iframe,
.video-container > video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* simple responsive grid reused for galleries */
.video-grid{
  display: grid;
  grid-template-columns: 1fr;     /* one column on phones */
  gap: 28px;
  align-items: start;
}

/* ==============================
   footer
============================== */
footer{
  margin-top: 40px;
  padding: 20px 16px;
  text-align: center;
  font-size: .95rem;
  border-top: 2px solid var(--brand-cyan);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); /* purple gradient */
}
footer p{ margin: 6px 0; }
footer a{ color: var(--brand-cyan); }
footer a:hover{ text-decoration: underline; }

/* ==============================
   visibility helpers (optional)
============================== */
.mobile{ display: block; }
.tablet-desktop{ display: none; }

/* assignment requirement: hide <p> body copy on mobile; show later */
main p{ display: none; }

/* ==============================
   tablet (≥630px) — reverse gradient; horizontal nav
============================== */
@media screen and (min-width: 630px), print {

  /* reverse purple gradient on larger viewports */
  header{ background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); }
  main  { background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); }

  .tablet-desktop{ display: block; }
  .mobile{ display: none; }

  .main-header{
    flex-direction: row;
    align-items: center;
  }

  .primary-nav ul{
    display: flex;
    flex-wrap: wrap;               /* can wrap to 2 lines on tablet */
    justify-content: flex-end;
    gap: clamp(10px, 1.6vw, 24px);
  }
  .primary-nav li{
    display: inline-block;
    border-top: 0;
  }
  .primary-nav li:last-child{ border-bottom: 0; }
  .primary-nav a{
    display: inline-block;
    width: auto;
    text-align: left;
    padding: .45em .75em;
  }

  /* bring separators back on tablet+ */
  .primary-nav ul.nav-sep li{ border-right: 1px solid var(--brand-cyan); }
  .primary-nav ul.nav-sep li:last-child{ border-right: 0; }

  /* grid grows on tablet */
  .video-grid{
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }

  /* logo feels a bit bigger on tablet */
  .logo-img{
    height: clamp(60px, 7vw, 72px);
    filter: drop-shadow(0 0 4px var(--brand-cyan));
  }

  /* show body copy again on tablet+ */
  main p{ display: block; }
} /* end tablet */

/* ==============================
   desktop (≥1015px) — single-line nav; final scale
============================== */
@media screen and (min-width: 1015px), print {

  .primary-nav ul{
    flex-wrap: nowrap;             /* one clean line */
    gap: clamp(12px, 2vw, 28px);
  }

  .logo-img{
    height: 80px;                  /* balanced with one-line nav */
    filter: drop-shadow(0 0 6px var(--brand-cyan));
  }

  /* explicit desktop hover (rubric pseudo-class) */
  .primary-nav a:hover{ color:#111; background-color: var(--brand-cyan); }
} /* end desktop */

/* ==============================
   very large (≥1921px) — small type bump
============================== */
@media screen and (min-width: 1921px){
  body{ font-size: 18px; }
} /* end very large */

/* ==============================
   print — flat white for paper
============================== */
@media print{
  body{ background: #FFF; color:#000; }
  header, main{ background: none; }
} /* end print */