/* ==========================================================
   CpE-1108 SECTION WEBSITE · style.css
   Contents
   1. Theme colors (light + dark)
   2. Base
   3. Header and navigation
   4. Dark/light toggle
   5. Hero
   6. Shared section styles
   7. About (facts)
   8. Schedule
   9. Officers
   10. Members
   11. Gallery
   12. Footer
   13. Mobile
   14. Reduced motion
   ========================================================== */


/* ==========================================================
   1. THEME COLORS
   Change the colors here and the whole site updates.
   ========================================================== */

/* Horizon font. Horizon is not on Google Fonts, so put your font file in a
   "fonts" folder next to this file and name it horizon.otf (or horizon.ttf).
   Until the file is there, the site falls back to Syne. */
@font-face {
  font-family: 'Horizon';
  src: url('fonts/horizon.otf') format('opentype'),
       url('fonts/horizon.ttf') format('truetype');
  font-weight: 100 900; /* Horizon has one weight; this stops the browser faking bold */
  font-style: normal;
  font-display: swap;
}

/* Light mode (default) */
:root {
  --bg: #f3f8ff;
  --fg: #06122b;
  --muted: #4a5f85;
  --card: #ffffff;
  --line: #cfe0f7;

  --blue: #1f5bff;
  --sky: #8fd0ff;
  --navy: #0a2a6b;

  --glow: 0.35;

  --display: 'Syne', 'Trebuchet MS', sans-serif;
  --title: 'Horizon', 'Syne', 'Trebuchet MS', sans-serif; /* section titles only */
  --body: 'Figtree', 'Segoe UI', sans-serif;

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Dark mode when the device is set to dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #040a1a;
    --fg: #f2f7ff;
    --muted: #9db3d8;
    --card: #0a1630;
    --line: #173060;
    --glow: 0.55;
  }
}

/* Dark mode when the toggle button is used */
:root[data-theme="dark"] {
  --bg: #040a1a;
  --fg: #f2f7ff;
  --muted: #9db3d8;
  --card: #0a1630;
  --line: #173060;
  --glow: 0.55;
}


/* ==========================================================
   2. BASE
   ========================================================== */

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px));
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background 0.5s, color 0.5s;
}

/* The glow shapes stick out past the screen edges. Clip them sideways only,
   so they can't make the page wider (that's what allowed zooming out).
   Up and down they stay unclipped, so nothing gets cut at the hero edges. */
main {
  overflow-x: clip;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
}


/* ==========================================================
   3. HEADER AND NAVIGATION
   ========================================================== */

header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px clamp(16px, 4vw, 48px);
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1);
}

/* Menu (hamburger) button: only shown on phones */
.menu-btn {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  cursor: pointer;
}

.menu-btn i,
.menu-btn i::before,
.menu-btn i::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s, background 0.3s;
}

.menu-btn i {
  position: relative;
}

.menu-btn i::before,
.menu-btn i::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-btn i::before { top: -6px; }
.menu-btn i::after { top: 6px; }

.menu-btn[aria-expanded="true"] i { background: transparent; }
.menu-btn[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i::after { transform: translateY(-6px) rotate(-45deg); }

/* Slides the header up out of view (added by script.js while scrolling down) */
header.header-hidden {
  transform: translateY(calc(-100% - env(safe-area-inset-top, 0px)));
}

/* Never leave a hidden header when someone tabs into it with a keyboard */
header.header-hidden:focus-within {
  transform: none;
}

.logo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  text-decoration: none;
}

nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
}

/* Wrapper around the section links (spacing between them lives here) */
.links {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
}

nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

nav a:hover {
  color: var(--blue);
}


/* ==========================================================
   4. DARK/LIGHT TOGGLE
   ========================================================== */

#theme {
  position: relative;
  width: 52px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--card);
  cursor: pointer;
}

/* The sliding circle */
#theme::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  transition: transform 0.35s cubic-bezier(0.6, -0.3, 0.3, 1.3);
}

/* Circle moves right in dark mode (toggle button) */
:root[data-theme="dark"] #theme::after {
  transform: translateX(24px);
  background: var(--sky);
}

/* Circle moves right in dark mode (device setting) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #theme::after {
    transform: translateX(24px);
    background: var(--sky);
  }
}


/* ==========================================================
   5. HERO
   ========================================================== */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 88vh;
  min-height: 88svh;
  padding: 60px 20px;
  text-align: center;
}

.hero-in {
  position: relative;
  z-index: 2;
}

.hero small {
  display: block;
  margin-bottom: 14px;
  font-size: 1.05rem;
  color: var(--muted);
}

.tag {
  max-width: 34ch;
  margin: 26px auto 0;
  font-size: 1.2rem;
  color: var(--muted);
}

/* Big title: letters rise in one by one */
h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.2rem, 12vw, 11rem);
  line-height: 0.92;
  white-space: nowrap;
  letter-spacing: -0.03em;
}

h1 .word {
  display: inline-block;
  white-space: nowrap;
}

h1 .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%) rotate(6deg);
  animation: rise 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
  animation-delay: calc(var(--i) * 70ms);
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Floating blurry blue shapes */
.orb {
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  filter: blur(70px);
  opacity: var(--glow);
  animation: drift 14s ease-in-out infinite alternate;
}

.o1 {
  width: 46vmax;
  height: 46vmax;
  left: -12vmax;
  top: -10vmax;
  background: var(--blue);
}

.o2 {
  width: 36vmax;
  height: 36vmax;
  right: -10vmax;
  bottom: -12vmax;
  background: var(--sky);
  animation-delay: -6s;
}

@keyframes drift {
  to {
    transform: translate(8vmax, 6vmax) scale(1.15);
  }
}

/* Expanding pulse circles */
.ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20vmin;
  height: 20vmin;
  margin: -10vmin;
  border: 2px solid var(--blue);
  border-radius: 50%;
  opacity: 0;
  animation: pulse 5s ease-out infinite;
}

.ring:nth-child(4) {
  animation-delay: 1.6s;
}

.ring:nth-child(5) {
  animation-delay: 3.2s;
}

@keyframes pulse {
  0% {
    opacity: 0.7;
    transform: scale(0.4);
  }
  100% {
    opacity: 0;
    transform: scale(4.2);
  }
}


/* ==========================================================
   6. SHARED SECTION STYLES
   ========================================================== */

section {
  max-width: 1200px;
  margin: auto;
  padding: clamp(60px, 10vw, 120px) clamp(16px, 5vw, 64px);
}

h2 {
  margin-bottom: 12px;
  font-family: var(--title);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: -0.02em;
}

.lead {
  max-width: 60ch;
  margin-bottom: 36px;
  color: var(--muted);
}


/* ==========================================================
   7. ABOUT (FACTS)
   ========================================================== */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.fact {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
}

.fact b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--blue);
}


/* ==========================================================
   8. SCHEDULE (calendar)
   Desktop: a weekly grid, one column per day, classes placed by time.
   Phones: each day becomes a section with its classes stacked.
   ========================================================== */

.cal {
  --hr: 56px;      /* height of one hour */
  --head: 44px;    /* height of the day names row */
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
}

.cal-times {
  position: relative;
  height: calc(var(--hours) * var(--hr));
  margin-top: var(--head);
}

.cal-times span {
  position: absolute;
  top: calc(var(--i) * var(--hr));
  right: 8px;
  font-size: 0.75rem;
  color: var(--muted);
  transform: translateY(-50%);
}

.cal-day {
  min-width: 0;
  border-left: 1px solid var(--line);
}

.cal-day h3 {
  display: grid;
  place-items: center;
  height: var(--head);
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}

.cal-day.today h3 {
  color: var(--blue);
}

.d-full {
  display: none;
}

.cal-col {
  position: relative;
  height: calc(var(--hours) * var(--hr));
  background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--hr));
}

.cal-day.today .cal-col {
  background-color: color-mix(in srgb, var(--blue) 6%, transparent);
}

.ev {
  position: absolute;
  left: 3px;
  right: 3px;
  top: calc(var(--s) * var(--hr) + 2px);
  height: calc(var(--l) * var(--hr) - 4px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  overflow: hidden;
  border-left: 3px solid hsl(var(--h) 90% 60%);
  border-radius: 10px;
  background: hsl(var(--h) 90% 60% / 0.18);
  font-size: 0.78rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.ev b {
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 600;
}

.ev span,
.ev small {
  color: var(--muted);
}

/* Time text only shows on tall blocks (2+ hours) so short ones don't get cramped */
.ev small {
  display: none;
}

.ev.long small {
  display: block;
}

.cal-none {
  display: none;
}


/* ==========================================================
   9. OFFICERS
   ========================================================== */

/* Outer panel behind the whole officers area.
   Big rounded corners, a soft blue tint that fades toward the edges,
   and an outer glow so it blends into the page instead of ending in a hard box. */
#officers {
  position: relative;
  isolation: isolate;
  padding-block: clamp(40px, 6vw, 72px);
}

#officers::before {
  content: "";
  position: absolute;
  inset: 0 8px;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--sky) 45%, transparent);
  border-radius: 56px;
  background:
    radial-gradient(circle 380px at 18% 30%, color-mix(in srgb, var(--blue) 40%, transparent), transparent 70%),
    radial-gradient(circle 340px at 85% 75%, color-mix(in srgb, var(--sky) 45%, transparent), transparent 70%),
    color-mix(in srgb, var(--card) 35%, transparent);
  box-shadow: 0 0 90px 8px color-mix(in srgb, var(--blue) 22%, transparent);
}

/* 3 columns, 9 officers, no gaps:
   row 1  President (wide) + Vice President
   row 2  Secretary, Treasurer, Assistant Treasurer
   row 3  Auditor, Public Information Officer, Peace Officer
   row 4  Representative (full width, content centered)
   On tablets (2 columns) the President takes a full row and the rest pair up. */
.officers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 20px;
}

/* Officer card: frosted glass, photo on the left, details on the right */
.off {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--sky) 40%, var(--line));
  border-radius: 28px;
  background: color-mix(in srgb, var(--card) 45%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 24px 48px -28px rgba(10, 42, 107, 0.5);
  transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.off:hover {
  transform: translateY(-8px) rotate(-1.2deg);
}

/* The last officer (Representative) closes the grid with a full-width row */
.off:last-child {
  grid-column: 1 / -1;
  justify-content: center;
}

/* The first officer (President) gets the wide card and bigger photo */
.off:first-child {
  grid-column: span 2;
  gap: 28px;
  padding: 24px;
}

.off-photo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 116px;
  height: 116px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--blue) 22%, transparent) center / cover no-repeat;
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.6rem;
  color: var(--blue);
}

.off:first-child .off-photo {
  width: clamp(130px, 14vw, 160px);
  height: clamp(130px, 14vw, 160px);
  border-radius: 26px;
  font-size: 3.6rem;
}

.off small {
  font-weight: 500;
  color: var(--muted);
}

.off h3 {
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.15;
}

.off:first-child h3 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
}


/* ==========================================================
   10. MEMBERS
   ========================================================== */

/* Scrolling name strip */
.marq {
  margin-bottom: 28px;
  padding: 20px 0;
  overflow: hidden;
  border-block: 1px solid var(--line);
}

.track {
  display: flex;
  gap: 44px;
  width: max-content;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  color: var(--blue);
  animation: scroll 40s linear infinite;
}

.marq:hover .track {
  animation-play-state: paused;
}

@keyframes scroll {
  to {
    transform: translateX(-50%);
  }
}

/* Member list: flows top to bottom, then continues in the next column */
.members {
  column-width: 300px;
  column-gap: 14px;
}

/* Member card: bigger photo on the left, name on the right */
.mem {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  padding: 12px 22px 12px 12px;
  break-inside: avoid;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.mem:hover {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.mem span {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
}

.mem-photo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--sky) 35%, transparent) center / cover no-repeat;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--blue);
}

.mem:hover .mem-photo {
  color: #fff;
}


/* ==========================================================
   11. GALLERY
   ========================================================== */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 14px;
}

.ph {
  display: grid;
  place-items: end start;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.2, 1), border-radius 0.5s;
}

/* One slide per photo, stacked on top of each other.
   Only the current one is visible; the others fade in and out. */
.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.slide.on {
  opacity: 1;
}

/* Dark fade at the bottom so the caption stays readable on photos */
.ph.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  background: linear-gradient(to top, rgba(4, 10, 26, 0.7), transparent 55%);
  pointer-events: none;
}

.cap {
  position: relative;
  z-index: 11;
}

.ph:hover {
  border-radius: 52px;
  transform: scale(0.97);
}


/* ==========================================================
   12. FOOTER
   ========================================================== */

footer {
  padding: 60px 20px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
}


/* ==========================================================
   13. MOBILE
   ========================================================== */

/* Tablets: officers in 2 columns (President still full width) */
@media (max-width: 900px) {
  .officers {
    grid-template-columns: repeat(2, 1fr);
  }

  .off:last-child {
    grid-column: auto;
    justify-content: flex-start;
  }
}

/* Phones */
@media (max-width: 640px) {
  /* Menu button appears; the links become a dropdown under the header */
  .menu-btn {
    display: grid;
  }

  .links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px clamp(16px, 4vw, 48px) 14px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(14px);
  }

  .links.open {
    display: flex;
  }

  .links a {
    padding: 14px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
  }

  .links a:last-child {
    border-bottom: 0;
  }

  .hero {
    padding: 48px 16px;
  }

  .orb {
    filter: blur(50px);
  }

}

/* Phones: calendar turns into a day-by-day list */
@media (max-width: 760px) {
  .cal {
    display: block;
  }

  .cal-times {
    display: none;
  }

  .cal-day {
    padding: 14px 16px 16px;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .cal-day:last-child {
    border-bottom: 0;
  }

  .cal-day h3 {
    display: block;
    height: auto;
    margin-bottom: 10px;
    border: 0;
    font-size: 1.05rem;
    color: var(--fg);
  }

  .cal-day.today h3 {
    color: var(--blue);
  }

  .d-short {
    display: none;
  }

  .d-full {
    display: inline;
  }

  .cal-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: auto;
    background: none;
  }

  .ev {
    position: static;
    height: auto;
    padding: 10px 14px;
    font-size: 0.95rem;
  }

  .ev b {
    font-size: 1rem;
  }

  .ev small {
    display: block;
  }

  .cal-none {
    display: block;
    color: var(--muted);
    font-size: 0.95rem;
  }
}

/* Touch screens: no hover effects that stay "stuck" after a tap */
@media (hover: none) {
  .off:hover {
    transform: none;
  }

  .ph:hover {
    border-radius: 24px;
    transform: none;
  }

  .mem:hover {
    border-color: var(--line);
    background: var(--card);
    color: var(--fg);
  }

  .mem:hover .mem-photo {
    color: var(--blue);
  }
}

/* Small phones: officers stacked in one column */
@media (max-width: 560px) {
  .officers {
    grid-template-columns: 1fr;
  }

  .off:first-child {
    grid-column: auto;
    gap: 18px;
    padding: 18px;
  }

  .off:first-child .off-photo {
    width: 116px;
    height: 116px;
    font-size: 2.6rem;
  }

  .off:first-child h3 {
    font-size: 1.6rem;
  }
}


/* ==========================================================
   14. REDUCED MOTION
   Turns off animations for people who prefer less movement.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}