/* Mobile-first responsive styles */
@font-face{
  font-family:'Awkwardstra';
  src:url('../assets/Awkwardstra.otf') format('opentype');
}

:root{
  /* Corporate colour palette: magenta, green-yellow, yellow */
  --bg:#000000;
  --card:#081018;
  --accent:#ff00fe; /* magenta */
  --accent2:#52ff05; /* greenyellow */
  --accent3:#ffff09; /* yellow */
  --muted:#fdf9fc;
  --text:#e6eef8;
  --max-width:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);background:#000000;
}
.container{max-width:var(--max-width);margin:0 auto;padding:1.25rem}
.header-inner{display:flex;gap:1rem;align-items:center;justify-content:space-between}
.logo{font-weight:700;color:var(--accent);text-decoration:none;display:flex;align-items:center}
.logo-img{width:48px;height:auto;margin-right:0.5rem;border-radius:6px}
.logo-text{font-weight:700}
.site-nav{display:none;gap:1rem}
.site-nav a{color:var(--text);text-decoration:none;padding:0.4rem 0.6rem;border-radius:6px;transition:color 180ms ease, text-decoration-color 180ms ease}
.site-nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.nav-toggle{background:transparent;border:1px solid transparent;color:white;font-size:1.25rem;padding:0.35rem 0.6rem;border-radius:6px}

.hero{padding:4rem 0;color:var(--text);text-align:center}
.hero h1{font-family:'Awkwardstra',sans-serif}
.hero .lead{color:var(--muted);max-width:60ch;margin:0.5rem auto}
.hero-image{max-width:100%;height:auto;margin-top:2rem;border-radius:8px}
.btn{background:var(--accent);color:#ffffff;padding:0.65rem 1.15rem;border-radius:10px;text-decoration:none;border:none;cursor:pointer;display:inline-block;font-weight:700;font-size:1rem}
.btn:hover{filter:brightness(0.95);transform:translateY(-1px)}
.btn:focus{outline:3px solid rgba(125,211,252,0.25);outline-offset:3px}
a.btn{color:#ffffff !important;text-decoration:none !important}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.08);}

.features{display:grid;grid-template-columns:1fr;gap:1.25rem;padding:2rem 0}
.feature{background:rgba(255,255,255,0.02);padding:1.25rem;border-radius:10px;text-align:center}
.feature-graphic{width:64px;height:64px;margin-bottom:0.5rem}

.about,.contact,.info-section{padding:2rem 0}
.conductor-tile{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:16px;overflow:hidden;display:grid;grid-template-columns:1fr;gap:0;box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.conductor-tile-image{overflow:hidden;border-radius:16px 16px 0 0}
.conductor-tile-image img{width:100%;height:auto;display:block;object-fit:cover}
.conductor-tile-content{padding:2rem;display:flex;flex-direction:column;justify-content:center}
.conductor-tile-content h2{margin-top:0;margin-bottom:1rem;font-family:'Awkwardstra',sans-serif;color:var(--accent)}
.conductor-tile-content p{margin:0.75rem 0;line-height:1.6;color:var(--text)}
.conductor-tile-content ul{line-height:1.8;color:var(--muted);margin:0.75rem 0;padding-left:1.5rem}
.conductor-tile-content a{color:var(--accent);text-decoration:underline}
.info-section h2{color:var(--accent2);margin-top:2rem;margin-bottom:1rem;font-family:'Awkwardstra',sans-serif}
.info-section h3{color:var(--accent);margin-top:1.5rem;margin-bottom:0.75rem;font-family:'Awkwardstra',sans-serif}
.info-section ul{line-height:1.8;color:var(--muted)}
.info-section a{color:var(--accent);text-decoration:underline}
/* Make the "About Us" link a consistent magenta across the site */
a[href="about-us.html"]{
  color:var(--accent);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-color:var(--accent);
  font-weight:600;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}

/* Make the "Support Us" link a consistent magenta across the site */
a[href="support-us.html"]{
  color:var(--accent);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-color:var(--accent);
  font-weight:600;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}

.carousel-container {
  overflow: hidden;
  position: relative;
}

.carousel-container img {
  transition: opacity 0.5s ease-in-out;
  will-change: opacity;
  display: block;
  width: 100%;
  height: auto;
}
/* Make the "Our Conductor" link a consistent magenta across the site */
a[href="our-conductor.html"]{
  color:var(--accent3);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-color:var(--accent3);
  font-weight:600;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}

/* Make the "Contact" link a consistent magenta across the site */
a[href="contact.html"]{
  color:var(--accent3);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-color:var(--accent3);
  font-weight:600;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}

/* Make the "More Information" link a consistent greenyellow across the site */
a[href="more-information.html"]{
  color:var(--accent2);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-color:var(--accent2);
  font-weight:600;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}


/* Make the "Gallery" link styled the same as More Information */
a[href="gallery.html"]{
  color:var(--accent2);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-color:var(--accent2);
  font-weight:600;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}

.site-footer{padding:1rem 0;border-top:1px solid rgba(255,255,255,0.03);text-align:center;color:var(--muted)}
.footer-support{margin-top:1rem;display:flex;flex-direction:column;gap:0.5rem;align-items:center;justify-content:center}
.footer-support p{margin:0;font-size:0.95rem;color:#ff8c00}
.vrcc-logo{height:80px;width:auto;object-fit:contain}

/* Gallery grid */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.gallery-grid figure{margin:0;background:rgba(255,255,255,0.02);padding:0.5rem;border-radius:10px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 4px 14px rgba(0,0,0,0.25)}
.gallery-grid .gallery-link{display:block;color:inherit;text-decoration:none;position:relative}
.gallery-grid img{width:100%;height:100%;aspect-ratio:1;border-radius:8px;object-fit:cover;display:block;transition:transform 180ms ease, box-shadow 180ms ease}
.gallery-grid figcaption{margin-top:0.5rem;font-size:0.95rem;color:var(--muted);line-height:1.4;text-align:center}
.gallery-grid .gallery-link:hover img{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,0.35)}

.gallery-grid .gallery-link::after{
  content:'⤢';
  position:absolute;top:8px;right:8px;
  background:rgba(0,0,0,0.55);
  color:#fff;
  font-size:0.9rem;
  line-height:1;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 4px 10px rgba(0,0,0,0.35);
  opacity:0.92;
}

@media(min-width:900px){
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
}

/* Horizontal scroll gallery for 2025 rehearsals */
.gallery-strip{display:flex;gap:1rem;overflow-x:auto;padding:0.25rem 0.25rem 0.75rem;scroll-snap-type:x mandatory}
.gallery-strip::-webkit-scrollbar{height:8px}
.gallery-strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18);border-radius:999px}
.gallery-strip::-webkit-scrollbar-track{background:rgba(255,255,255,0.04)}
.gallery-strip .gallery-item{flex:0 0 auto;width:260px;scroll-snap-align:start;margin:0;background:rgba(255,255,255,0.02);padding:0.5rem;border-radius:10px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 4px 14px rgba(0,0,0,0.25)}
.gallery-strip .rehearsal-link{display:block;position:relative;transition:transform 180ms ease, box-shadow 180ms ease}
.gallery-strip img{width:100%;height:320px;border-radius:8px;object-fit:cover;display:block;transition:transform 180ms ease, box-shadow 180ms ease}
.gallery-strip .rehearsal-link:hover{transform:translateY(-3px)}
.gallery-strip .rehearsal-link:hover img{box-shadow:0 10px 26px rgba(0,0,0,0.4)}
.gallery-strip .rehearsal-link::after{
  content:'⤢';
  position:absolute;top:8px;right:8px;
  background:rgba(0,0,0,0.55);
  color:#fff;
  font-size:0.9rem;
  line-height:1;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 4px 10px rgba(0,0,0,0.35);
  opacity:0.92;
}

/* Map container for embedded maps */
.map-container{margin-top:1rem}
.map-container iframe{width:100%;height:360px;border:0;border-radius:8px}

/* Larger screens */
@media(min-width:760px){
  .site-nav{display:flex}
  .nav-toggle{display:none}
  .features{grid-template-columns:repeat(3,1fr)}
  .hero{padding:6rem 0}
  .conductor-tile{grid-template-columns:1fr 1fr;align-items:stretch}
  .conductor-tile-image{border-radius:16px 0 0 16px;display:flex;align-items:center;justify-content:center;padding:1rem}
  .conductor-tile-image img{max-height:420px;width:auto;max-width:100%;height:auto;object-fit:contain;border-radius:8px}
}

/* Contact cards */
.contact-cards{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
.card{display:flex;gap:0.75rem;align-items:center;background:rgba(255,255,255,0.02);padding:1rem;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
.card .icon{width:56px;height:56px;flex:0 0 56px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#00121a}
.card .icon svg{width:24px;height:24px}
.card .card-body h4{margin:0;font-size:1rem;font-family:'Awkwardstra',sans-serif}
.card .card-body a{color:var(--text);text-decoration:none}
.card .card-body a:hover{text-decoration:underline}

/* Use corporate accents for contact card icons (cycle through colours) */
.contact-cards article:nth-child(1) .icon{background:var(--accent)}
.contact-cards article:nth-child(2) .icon{background:var(--accent2)}
.contact-cards article:nth-child(3) .icon{background:var(--accent3)}
.contact-cards article:nth-child(4) .icon{background:var(--accent)}

/* Social media tiles in footer */
.footer-socials{margin-top:1.5rem;display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap}
.social-tile{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1.25rem;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:var(--text);text-decoration:none;transition:all 0.3s ease;font-size:0.95rem}
.social-tile svg{width:24px;height:24px;color:var(--accent)}
.social-tile:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.media_icon {
    height: 32px;
    width: 32px;
    margin-right: 5px;
    margin-left: 5px;
}

/* Committee photo styling */
.committee-figure{margin:1.5rem 0;padding:0.25rem;border-radius:12px;overflow:hidden;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04)}
.committee-figure img{width:100%;height:auto;display:block;object-fit:cover;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.03)}
.committee-figure figcaption{padding:0.75rem 1rem;color:var(--muted);font-size:0.95rem;line-height:1.4;text-align:center;margin-top:0.5rem}

@media(min-width:760px){
  /* Keep caption underneath the image on larger screens */
  .committee-figure{max-width:900px;margin-left:auto;margin-right:auto}
  .committee-figure img{width:100%;margin:0}
  .committee-figure figcaption{padding:1rem 1.25rem}
}
@media(min-width:720px){
  .contact-cards{grid-template-columns:repeat(2,1fr)}
}

/* Joining tile: place image in a tile beside the Rehearsals content */
.joining-tile{display:grid;grid-template-columns:1fr;gap:1rem;align-items:start;margin-top:1rem;margin-bottom:1rem;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);padding:1rem;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.35)}
.joining-content{min-width:0}
.joining-figure{padding:0;display:flex;align-items:center;justify-content:center}
.joining-figure img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.03);display:block}

@media(min-width:760px){
  .joining-tile{grid-template-columns:1fr 360px}
  .joining-figure{align-self:start}
}

/* Story tile: place image on the left, content on the right */
.story-tile{display:grid;grid-template-columns:1fr;gap:1rem;align-items:start;margin-top:1rem;margin-bottom:1rem;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);padding:1rem;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.35)}
.story-content{min-width:0}
.story-figure{padding:0;display:flex;align-items:center;justify-content:center}
.story-figure img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.03);display:block}

@media(min-width:760px){
  .story-tile{grid-template-columns:360px 1fr}
  .story-figure{align-self:start}
}

/* Values tile: place content on the left, image on the right */
.values-tile{display:grid;grid-template-columns:1fr;gap:1rem;align-items:start;margin-top:1rem;margin-bottom:1rem;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);padding:1rem;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.35)}
.values-content{min-width:0}
.values-figure{padding:0;display:flex;align-items:center;justify-content:center}
.values-figure img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.03);display:block}

@media(min-width:760px){
  .values-tile{grid-template-columns:1fr 360px}
  .values-figure{align-self:start}
}

/* Conductor bio tile: place image on the left, content on the right */
.conductor-bio-tile{display:grid;grid-template-columns:1fr;gap:1rem;align-items:start;margin-top:1rem;margin-bottom:1rem;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);padding:1rem;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.35)}
.conductor-bio-content{min-width:0}
.conductor-bio-figure{padding:0;display:flex;align-items:center;justify-content:center}
.conductor-bio-figure img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.03);display:block}

@media(min-width:760px){
  .conductor-bio-tile{grid-template-columns:360px 1fr}
  .conductor-bio-figure{align-self:start}
}

/* Contact tile: place content on the left, image on the right */
.contact-tile{display:grid;grid-template-columns:1fr;gap:1rem;align-items:start;margin-top:1rem;margin-bottom:1rem;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);padding:1rem;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.35)}
.contact-content{min-width:0}
.contact-figure{padding:0;display:flex;align-items:center;justify-content:center}
.contact-figure img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.03);display:block}

@media(min-width:760px){
  .contact-tile{grid-template-columns:1fr 360px}
  .contact-figure{align-self:start}
}

/* Support tile: place content on the left, image on the right */
.support-tile{display:grid;grid-template-columns:1fr;gap:1rem;align-items:start;margin-top:1rem;margin-bottom:1rem;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);padding:1rem;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.35)}
.support-content{min-width:0}
.support-figure{padding:0;display:flex;align-items:center;justify-content:center}
.support-figure img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.03);display:block}

@media(min-width:760px){
  .support-tile{grid-template-columns:1fr 360px}
  .support-figure{align-self:start}
}

/* Donate tile: place image on the left, content on the right */
.donate-tile{display:grid;grid-template-columns:1fr;gap:1rem;align-items:start;margin-top:1rem;margin-bottom:1rem;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);padding:1rem;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.35)}
.donate-content{min-width:0}
.donate-figure{padding:0;display:flex;align-items:center;justify-content:center}
.donate-figure img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.03);display:block}

@media(min-width:760px){
  .donate-tile{grid-template-columns:360px 1fr}
  .donate-figure{align-self:start}
}