/* ==========================================================================
   1. BASE STYLES & VARIABLES
   ========================================================================== */

:root {
  /* Modular Spacing Scale with 1.5 ratio */
  --s-2: 0.5rem;
  --s-1: 0.8rem;
  --s0: 1rem;
  --s1: 1.5rem;
  --s2: 2.25rem;
  --s3: 3.375rem;
  --s4: 5.063rem;
  --s5: 7.594rem;

  /* Font Stacks */
  --font-heading: "Cinzel", serif;
  --font-body: "Inter", sans-serif;

  /* ACCESSIBILITY TUNED COLORS */
  --color-gold: #8a6d3b; /* Darkened for 4.5:1 contrast */
  --color-gold-rgb: 138, 109, 59; /* For rgba() usage */
  --color-gold-light: #dcb97a; /* Kept for hover states on dark backgrounds */
  --color-dark: #1a1a1a;
  --color-white: #ffffff;
  --color-muted: #666666;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  line-height: 1.5;
  color: #333;
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05ch;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
@media (max-width: 45rem) {
  html:has(.dashboard-page) {
    scroll-padding-top: 170px;
  }
}
body {
  height: 100%;
  overflow-y: auto;
}

/* Ensure the scrollytelling section also respects it */
.project-rhythm-scroll {
  background-color: #000;
}
/* ==========================================================================
   2. GLOBAL LAYOUT PATTERNS (Every Layout Primitives)
   ========================================================================== */

/* The Center: Keeps content in a readable middle column */
.l-center {
  box-sizing: content-box;
  margin-inline: auto;
  max-width: 80rem;
  padding-inline: var(--s1);
}

/* The Sidebar: General layout tool */
.l-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.l-sidebar > :first-child {
  flex-basis: 20rem;
  flex-grow: 1;
}

.l-sidebar > :last-child {
  flex-basis: 30rem;
  flex-grow: 999;
}

/* The Reel: Horizontal scrolling logic */
.l-reel {
  display: flex;
  overflow-x: auto;
  gap: var(--s1);
  padding-bottom: var(--s1);
  scroll-snap-type: x mandatory;
}

.l-reel > * {
  flex: 0 0 85%;
  scroll-snap-align: start;
}

@media (min-width: 60rem) {
  .l-reel > * {
    flex: 0 0 calc(33.333% - var(--s1));
  }
}

/* The Switcher Pattern */
.l-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.l-switcher > * {
  flex-grow: 1;
  /* If container < threshold, basis becomes huge and forces wrap */
  flex-basis: calc((var(--threshold, 40rem) - 100%) * 999);
}
/* --- THE STACK --- */
/* Injects vertical space between siblings */
/* Lobotomised Owl */
.l-stack > * + * {
  margin-top: var(--space, var(--s1));
}

.l-stack--small {
  --space: var(--s-1);
}
.l-stack--large {
  --space: var(--s4);
}

/* --- THE BOX --- */
.box {
  padding: var(--s1);
  border: 1px solid transparent;
}

/* Unified Invert: The "Card" standard for the whole site */
.box.invert {
  background-color: #1a1a1a;
  color: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(201, 164, 94, 0.3);
  overflow: hidden;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.3),
    0 40px 60px -15px rgba(0, 0, 0, 0.4);
}
.l-frame {
  aspect-ratio: var(--aspect-ratio, 16/9);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* ==========================================================================
   3. GLOBAL COMPONENTS (Header, Footer, Buttons)
   ========================================================================== */

/* --- THE HEADER WRAPPER --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1100;
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #eee;
  width: 100%;
}
/* Landscape mode */
@media (max-height: 450px) and (orientation: landscape) {
  .site-header {
    padding: 0.25rem 0;
  }

  .site-header img {
    height: 30px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
  }

  .brand-name {
    font-size: 0.9rem;
  }
}
.header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  padding: var(--s0) 0;
}

@media (min-width: 45rem) {
  .header-inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Active State for Nav */
header nav a[aria-current="page"] {
  color: var(--color-gold);
  font-weight: 700;
  border-bottom: 2px solid var(--color-gold);
}

.brand-name {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.1ch;
  color: #1a1a1a;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05ch;
}

header nav ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  list-style: none;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
}

header nav a {
  font-family: var(--font-body);
  font-size: var(--s0);
  font-weight: 505;
  color: #444;
  transition: color 0.2s;
  padding: 0.5rem;
  text-decoration: none;
}

header nav a:hover {
  color: var(--color-gold);
  text-decoration: underline;
}

/* The Inner: Handles the centering and the flex layout */
.header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  padding: var(--s0) 0; /* Vertical padding only, l-center handles horizontal */

  /* No max-width here; .l-center utility handles it */
}

@media (min-width: 45rem) {
  .header-inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* CTA Button */
.cta-button {
  display: inline-block;
  background-color: #b38b3f; /* Gold */
  color: #000000; /* Black for maximum contrast */
  padding: 1rem 2rem;
  text-align: center;
  text-decoration: none;
  border-radius: 2px;
  font-family:
    "Cinzel", serif; /* Using the display font for buttons feels more premium */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition:
    transform 0.2s ease,
    background-color 0.3s;
  margin-top: var(--s1);
  min-height: 48px; /* Ensures it's always large enough for touch */
}

.cta-button:hover {
  background-color: var(
    --color-gold-light
  ); /* A lighter gold for the hover state */
  transform: translateY(-2px); /* A subtle 'lift' effect */
}

/* Button Feedback */
.cta-button:active,
.file-indicator:active {
  transform: translateY(1px) scale(0.98);
  filter: brightness(0.9);
}

/* Global Focus Style */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
}

/* Footer */
.footer-slim {
  margin-top: var(--s1);
  padding: 1.5rem 0 1rem; /* Very tight vertical padding */
  background-color: #1a1a1a;
  border-top: 1px solid rgba(201, 164, 94, 0.2);
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s1);
  margin-bottom: 1rem;
}

/* Footer Button */
.footer-btn {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1ch;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.footer-btn:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: rgba(201, 164, 94, 0.05);
}

/* Column Alignment */
.footer-col-left {
  flex: 1;
  text-align: right;
}
.footer-col-center {
  flex: 1;
  text-align: center;
}
.footer-col-right {
  flex: 1;
  text-align: left;
}

/* Social Icons */
.social-group {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

.social-icon {
  color: #b3b3b3;
  width: 44px;
  height: 44px;
  transition: all 0.3s ease;
}

.social-icon:hover {
  color: var(--color-gold);
  transform: translateY(-2px);
}

.copyright {
  font-size: 0.8rem;
  opacity: 1;
  color: #a0a0a0;
  text-align: center;
  margin: 0;
}

/* Mobile: Stack nicely and swap button order */
@media (max-width: 45rem) {
  .footer-grid {
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Assign order to columns */
  .footer-col-right {
    order: 1; /* Moves "Top ↑" to the first position */
  }

  .footer-col-center {
    order: 2; /* Keeps social icons in the middle */
  }

  .footer-col-left {
    order: 3; /* Moves "Member Login" to the bottom */
  }

  /* Reset text alignment for mobile stacking */
  .footer-col-left,
  .footer-col-right {
    width: 100%;
    text-align: center;
  }
}

/* Custom Scrollbar */

/* Custom Scrollbar for Chrome/Safari/Edge */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a; /* Match your body background */
}

::-webkit-scrollbar-thumb {
  background: var(--color-gold); /* Gold scroll thumb */
  border-radius: 10px;
  border: 3px solid #1a1a1a; /* Creates a 'floating' look */
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold-light); /* Brighter gold on hover */
}
/* ==========================================================================
   4. PAGE-SPECIFIC SECTIONS
   ========================================================================== */

/* --- HOME PAGE: Hero --- */
.hero-cover {
  display: flex;
  flex-direction: column;
  min-height: 80vh;
  padding: var(--s1);
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/hero_image_clent_consort.jpg") center/cover;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  overflow: hidden;
}

.hero-cover h1 {
  font-size: clamp(2.5rem, 10vw, 5rem);
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-cover p {
  font-size: 1.4rem;
  max-width: 60ch;
  margin-inline: auto;
}

/* --- ABOUT PAGE: Mission & Cycle --- */
.mission-cover {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("../images/cathedral_choir.webp") center 25% / cover;
  min-height: 50vh;
  color: white;
  text-align: center;
  padding: var(--s1);
}

.mission-cover p {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 40ch;
  line-height: 1.2;
}

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  padding: var(--s2) var(--s1);
  max-width: 80rem;
  margin-inline: auto;
}

.sidebar-image {
  flex-basis: 15rem;
  flex-grow: 1;
}

.sidebar-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 2px;
  filter: sepia(20%) contrast(105%);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.sidebar-text {
  flex-basis: 0;
  flex-grow: 999;
  min-width: 50%;
}

/* --- PROJECT RHYTHM REFACTOR (PURE CSS SWIPE) --- */

.project-rhythm-swipe-wrapper {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
}

.project-rhythm-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  height: calc(100vh - 100px);
  /* Hide scrollbars */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.project-rhythm-scroll::-webkit-scrollbar {
  display: none;
}

.rhythm-slide {
  flex: 0 0 100%;
  width: 100vw;
  height: 100%;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-margin-top: 0;
}

/* Nav Dots */
.swipe-nav {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 1rem;
  width: auto;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 50px;
  border: 1px solid rgba(201, 164, 94, 0.3);
}

.swipe-nav a {
  text-decoration: none;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.1ch;
  text-transform: uppercase;
  padding: 0.6rem 1.2rem;
  border-radius: 25px;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.swipe-nav a span {
  color: var(--color-gold);
  font-weight: bold;
}

.swipe-nav a:hover {
  background: rgba(201, 164, 94, 0.2);
  color: var(--color-gold);
}

/* Ensure Videos behave in the new layout */
.slide-bg,
.slide-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* On Mobile, we shrink it back to dots so it doesn't crowd the screen */
@media (max-width: 48rem) {
  .swipe-nav {
    background: none;
    border: none;
    bottom: 1.5rem;
  }
  .swipe-nav a {
    width: 12px;
    height: 12px;
    padding: 0;
    font-size: 0;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid var(--color-gold);
  }
}
@media (max-height: 450px) and (orientation: landscape) {
  .swipe-nav {
    left: auto;
    right: 1rem;
    bottom: 5rem;
    transform: none;
    flex-direction: column;
  }
}
/* The Video Background */
.slide-bg,
.slide-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.slide-bg video {
  object-fit: cover;
  filter: brightness(0.5) contrast(1.1);
}

/* The Text Content */
.slide-content {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
  max-width: 65ch;
  padding: var(--s2);

  /* Scroll-Driven Reveal Animation */
  view-timeline-name: --slide-reveal;
  view-timeline-axis: block;
  animation: reveal-content linear both;
  animation-timeline: --slide-reveal;
}

@keyframes reveal-content {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  50% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50px) scale(0.95);
  }
}

.step-number {
  font-family: var(--font-heading);
  color: var(--color-gold);
  font-size: var(--s3);
  margin-bottom: var(--s-1);
  display: block;
}

.spotify-about-playlist {
  border: 0;
  border-radius: 12px;
  width: 100%;
}

/* --- EVENTS PAGE: Featured, Reel, Archive --- */
.featured-event .invert {
  background-color: #1a1a1a;
  color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.featured-event .event-image {
  aspect-ratio: 16 / 9;
}

.featured-event .event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 50.1rem) {
  .featured-event .event-image {
    aspect-ratio: auto;
    min-height: 100%;
  }
}

.featured-event .event-details {
  padding: var(--s2);
}

.featured-event h1 {
  color: var(--color-gold);
  margin-top: 0;
  line-height: 1.1;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}

.featured-event .label {
  color: var(--color-gold);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.2ch;
  display: block;
  margin-bottom: var(--s-1);
}

.featured-event ul {
  list-style: none;
  padding: 0;
  margin: var(--s1) 0;
}

.featured-event ul li {
  color: #e0e0e0;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s0);
  align-items: flex-start;
  margin-bottom: var(--s-1);
  width: 100%;
}

.featured-event ul li strong {
  color: var(--color-gold);
  flex-shrink: 0;
  min-width: 4.5rem;
}

.featured-event ul li span {
  flex-grow: 1;
}

.event-card {
  background: white;
  padding: var(--s2);
  border: 1px solid #eee;
  border-top: 4px solid var(--color-gold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.event-card h3 {
  color: #1a1a1a;
  margin-top: 0;
}

.event-card time,
.archive-item time {
  color: #36454f;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.event-archive h2 {
  border-bottom: 2px solid #eee;
  padding-bottom: var(--s0);
  margin-bottom: var(--s1);
}

.archive-item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s0) var(--s2);
  padding: var(--s1) 0;
  border-bottom: 1px solid #eee;
  align-items: baseline;
}

.archive-item time {
  flex-basis: 10rem;
  flex-grow: 1;
}

.archive-item span {
  color: #555;
  font-weight: 500;
  flex-basis: 15rem;
  flex-grow: 999;
}
/* Repertoire Section */
.repertoire-section {
  padding-block: var(--s4);
  border-top: 1px solid #eee;
}

.repertoire-header {
  text-align: center;
}

/* Center the paragraph inside the header if it has a max-width */
.repertoire-header .u-measure {
  margin-inline: auto;
}

.repertoire-grid {
  align-items: stretch;
}

/* The 'Season' Info Box */
.repertoire-grid > :first-child {
  flex-basis: 30rem;
  flex-grow: 1;
  /* Add these to ensure the meta box behaves correctly */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The Playlist Container */
.repertoire-grid > :last-child {
  flex-basis: 20rem;
  flex-grow: 999;
}

.playlist-container {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background: #000;
  overflow: hidden; /* Keeps the iframe corners rounded */
}

.repertoire-section .box.invert {
  border-left: 4px solid #c9a45e;
}
/* --- CONTACT PAGE --- */

/* 1. Layout & Constraints */
.contact-hero {
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}

.contact-forms-layout {
  --threshold: 60rem;
  max-width: 75rem;
  margin-inline: auto;
  gap: var(--s2);
  align-items: flex-start;
}

/* 2. The Form Card Container */
.contact-form-container {
  color: var(--color-muted);
  opacity: 1;
  flex: 1 1 25rem;
  max-width: 35rem;
}

/* 3. Elements & Typography */
.contact-form-container h2 {
  color: var(--color-gold);
  margin-top: 0;
  border-bottom: 1px solid rgba(201, 164, 94, 0.2);
  padding-bottom: var(--s-1);
}

.contact-form-container .form-group label {
  color: var(--color-gold);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1ch;
  margin-bottom: 0.5rem;
  display: block;
}

/* 4. White Well Inputs & Buttons */
.contact-form-container input,
.contact-form-container select,
.contact-form-container textarea {
  width: 100%;
  padding: var(--s0);
  background-color: #ffffff;
  border: 1px solid #ccc;
  color: var(--color-dark);
  font-family: var(--font-body);
  border-radius: 4px;
}

.contact-form-container input:focus,
.contact-form-container textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201, 164, 94, 0.2);
}

.contact-form-container .cta-button {
  width: 100%;
  border: 1px solid #ccc; /* Adds definition to the white button */
  cursor: pointer;
  background-color: #ffffff;
  color: #1a1a1a;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  padding: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1ch;
}

.contact-form-container .cta-button:hover {
  background-color: var(--color-gold);
  color: #ffffff;
  border-color: var(--color-gold);
  transform: translateY(-2px); /* Physical lift on hover */
  box-shadow: 0 5px 15px rgba(201, 164, 94, 0.4); /* Gold glow */
}

/* Members Resource Area */

/* --- Logistics Card Header --- */
.logistics-card-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s1);
  padding-bottom: var(--s0);
}

/* --- Refined Large PDF Button --- */
.file-link--large {
  display: inline-flex;
  align-items: center;
  background-color: rgba(var(--color-gold-rgb), 0.1);
  border: 1px solid rgba(var(--color-gold-rgb), 0.4);
  color: var(--color-gold);
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.file-link--large:hover {
  background-color: var(--color-gold);
  color: #1a1a1a;
  border-color: var(--color-gold);
}

/* Resetting the icon so it doesn't double up */
.file-link--large .file-icon {
  background-color: var(--color-gold);
  color: #1a1a1a;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.2rem 0.4rem;
  border-radius: 2px;
  margin-right: 0.75rem;
  transition: background-color 0.2s ease;
}

.file-link--large:hover .file-icon {
  background-color: #1a1a1a;
  color: var(--color-gold);
}

/* Mobile: Stack and center the button */
@media (max-width: 45rem) {
  .logistics-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .file-link--large {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   5. LOGIN PAGE & SECURITY FEEDBACK
   ========================================================================== */

.login-nav {
  display: flex;
  justify-content: flex-start;
  margin-bottom: var(--s-1);
}

.back-link {
  color: #666;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1ch;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.back-link:hover {
  color: var(--color-gold);
  transform: translateX(-5px); /* Subtle physical movement to the left */
}

.login-wrapper {
  margin-top: var(--s2);
}

.login-header {
  text-align: center;
}

.login-header h1,
.login-header p,
.login-footer-text,
.box.invert .form-group label {
  color: var(--color-gold);
}

.login-footer-text {
  font-size: 0.85rem;
  text-align: center;
  opacity: 0.8;
}

/* Fat-Finger Touch Targets */
.box.invert input {
  min-height: 3.5rem; /* Large enough for thumbs */
  font-size: 1.1rem; /* Prevents iOS zoom-on-focus */
  padding: var(--s0);
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 100%;
}

.box.invert .cta-button {
  min-height: 3.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 8px;
  margin-top: var(--s1);
  background-color: #ffffff;
  color: #1a1a1a;
  border: none;
  cursor: pointer;
}

.box.invert .cta-button:hover {
  background-color: var(--color-gold);
  color: #ffffff;
}

/* --- High-Visibility Security Visual Feedback --- */

/* 1. Neutral State: When the box is empty (placeholder is visible) 
   We use a high-specificity selector to force the grey border */
.box.invert input[type="password"] {
  border: 2px solid #444 !important; /* Forces the neutral dark grey */
  transition: all 0.2s ease-in-out;
}

/* 2. The 'Invalid' state: ONLY show red IF the user has started typing 
   AND the input is currently focused */
.box.invert input[type="password"]:not(:placeholder-shown):focus:invalid {
  border-color: #ff4d4d !important;
  box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.4);
}

/* 3. The 'Valid' state: Green Light when it matches perfectly */
.box.invert input[type="password"]:focus:valid {
  border-color: #4caf50 !important;
  box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.4);
}

/* 4. Persistence: Keep it green after they finish and click away */
.box.invert input[type="password"]:valid:not(:placeholder-shown) {
  border-color: #4caf50 !important;
}

/* 5. Suppress the 'Standard' browser red (Firefox especially) */
.box.invert input:invalid {
  box-shadow: none;
}
.form-hint {
  font-size: 0.8rem;
  color: rgba(var(--color-gold-rgb), 0.7); /* Muted gold */
  line-height: 1.4;
  margin-top: 0.25rem;
}

.form-hint strong {
  color: var(--color-gold); /* Brighter gold for the word 'Hint' */
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05ch;
}
/* ==========================================================================
   6. MEMBER DASHBOARD SPECIFICS
   ========================================================================== */

/* --- Layout Settings (Pure CSS Thresholds) --- */
.dashboard-sidebar {
  --gap: var(--s2);
  display: flex;
  flex-wrap: wrap;
}
/* The Main Schedule (First Child) */
.dashboard-sidebar > :first-child {
  /* Start at 40rem and grow to fill almost all available space */
  flex-basis: 40rem;
  flex-grow: 999;
}

/* The Meta Info (Second Child / Aside) */
.dashboard-sidebar > :last-child {
  /* Set a smaller basis so it stays slim */
  flex-basis: 30rem;
  flex-grow: 1;
}

/* Add a vertical divider only on desktop to separate the two sections */
@media (min-width: 50rem) {
  .schedule-meta {
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0;
    padding-left: var(--s2);
  }
}
.dashboard-switcher {
  --threshold: 60rem; /* Stacks sooner to allow full-width reading */
}

.voice-hub-switcher {
  --threshold: 20rem;
}

.login-wrapper {
  --box-padding: var(--s1);
}

@media (min-width: 45rem) {
  .login-wrapper {
    --box-padding: var(--s2); /* Desktop breathing room */
  }
}

/* --- Schedule List Styling --- */
.schedule-list {
  display: flex;
  flex-direction: column;
  gap: var(--s0);
  border-top: 1px solid #444;
  padding-top: var(--s0);
}

.schedule-list div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.schedule-list dt {
  font-family: var(--font-heading);
  color: var(--color-gold);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9rem;
  min-width: 11rem; /* Keeps dates on one line */
  flex-shrink: 0;
}

.schedule-list dd {
  margin: 0;
  color: #fff;
  font-size: 1rem;
}

@media (min-width: 40rem) {
  .schedule-list div {
    flex-direction: row;
    gap: var(--s1);
  }
}

/* --- Music Library & PDF Buttons --- */
.service-title {
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--color-gold);
  border-bottom: 1px solid #444;
  padding-bottom: 0.25rem;
  margin-top: var(--s1);
}

/* --- Music Library: Clickable Rows --- */

.music-list {
  list-style: none;
  padding: 0;
}

/* 1. The Container: Remove flex here so the link can fill the space */
.music-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* 2. The Link: This is now the 'row' itself */
.music-row-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem var(--s0); /* Slightly more padding for better touch targets */
  text-decoration: none;
  color: #fff;
  transition: background-color 0.2s ease;
}

.music-row-link:hover {
  background-color: rgba(201, 164, 94, 0.05); /* Subtle highlight */
}

/* 3. The Indicator: Retaining 'file-link' styling */
.file-indicator {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  background-color: rgba(var(--color-gold-rgb), 0.1);
  color: var(--color-gold);
  border: 1px solid rgba(var(--color-gold-rgb), 0.5);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  gap: 0.5rem;
}

/* Retaining specific PDF label styling */
.file-indicator::before {
  content: "PDF";
  font-size: 0.6rem;
  padding: 0.1rem 0.3rem;
  background-color: var(--color-gold);
  color: #1a1a1a;
  border-radius: 2px;
}

/* 4. Featured Download: Integrating the new row logic */
.featured-download {
  background: rgba(var(--color-gold-rgb), 0.1);
  border-left: 4px solid var(--color-gold);
  /* Resetting padding here because .music-row-link handles it now */
  padding: 0;
}

.featured-download .music-row-link {
  font-weight: 700;
}

/* --- Sidebar Meta & Voice Hubs --- */
.schedule-meta {
  border-top: 1px solid #333;
  padding-top: var(--s1);
}
.meta-block h4 {
  font-size: 0.75rem;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

@media (min-width: 50rem) {
  .schedule-meta {
    border-top: none;
    border-left: 1px solid #333;
    padding-top: 0;
    padding-left: var(--s2);
  }
}

.tracks-section {
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px dashed rgba(var(--color-gold-rgb), 0.3);
}

.voice-card {
  background: rgba(255, 255, 255, 0.03);
  padding: var(--s1);
  border: 1px solid #333;
  text-align: center;
}
.voice-card h4 {
  color: var(--color-gold);
  font-size: 0.9rem;
  margin: 0;
}
.voice-card .cta-button {
  width: 100%;
  margin-top: var(--s0);
  padding: 0.6rem;
  font-size: 0.8rem;
}

/* --- 1. The Video Primitive (16:9 Aspect Ratio) --- */
.video-responsive {
  position: relative;
  padding-bottom: 56.25%; /* Magic number for 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  border-radius: 4px;
}

.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- 2. The Hub Layout & Card Taming --- */
.video-card,
.video-wrapper {
  max-width: 800px;
  margin: 0 auto; /* Centers the video on wide screens */
}

/* --- 3. Accordion (Details/Summary) Styles --- */
.video-accordion summary {
  list-style: none; /* Modern browsers */
  display: inline-block;
  cursor: pointer;
}

.video-accordion summary::-webkit-details-marker {
  display: none; /* Safari specific */
}

/* Visual state when the video is revealed */
.video-accordion[open] summary {
  margin-bottom: 1.5rem;
  background: transparent;
  border: 1px solid rgba(var(--color-gold-rgb), 0.5);
  color: var(--color-gold);
}

/* Smoothly fade in the video when the details are opened */
.video-accordion[open] .video-responsive {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.external-embed {
  border: 0;
  width: 100%;
  display: block;
  border-radius: 12px;
  aspect-ratio: 16 / 9;
}

/* 404 Page Styles */
.error-content {
  flex: 1; /* Pushes footer down */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertical center */
  align-items: center; /* Horizontal center */

  --stack-space: var(--s3);
  text-align: center;
  padding-block: var(--s5);
}
/* ==========================================================================
   6. ANIMATIONS & UTILITY CLASSES
   ========================================================================== */

@keyframes heroEntrance {
  from {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.hero-cover h1 {
  animation: heroEntrance 1.2s ease-out forwards;
}

.hero-cover p {
  opacity: 0;
  animation: heroEntrance 1.2s ease-out 0.4s forwards;
}

.hero-cover .cta-button {
  opacity: 0;
  animation: heroEntrance 1.2s ease-out 0.8s forwards;
}

/* --- General Utilities --- */
.u-measure {
  max-width: 65ch;
}
.u-muted {
  color: var(--color-muted);
  line-height: 1.6;
  font-size: 0.95rem;
}
.dashboard-footer {
  text-align: center;
  border-top: 1px solid #eee;
  padding-top: var(--s2);
}
.u-text-center {
  text-align: center;
}

.u-margin-inline-auto {
  margin-inline: auto;
}