/* ----------------------------------------------------------
   Arlington High School Band Boosters — styles v1.4
   Structure:
     0) Root / tokens
     1) Base / typography / helpers
     2) Global layout (shell, masthead, header rows)
     3) Navigation
     4) Hero (home page)
     5) Buttons
     6) Toolbar tiles
     7) Footer
     8) Utility cards (hero-panel)
     9) Page: Calendar (page--calendar)
    10) Responsive tweaks
---------------------------------------------------------- */


/* 0) ROOT / TOKENS ------------------------------------------------------- */
:root{
  /* Masthead (banner behind brand row) */
  --masthead-image: url('../img/hero.jpg');
  --masthead-opacity: .28;
  --masthead-blur: 2px;
  --masthead-brightness: .85;
  --masthead-tint: rgba(30,55,109,.65);

  /* Brand */
  --brand-blue:#1e376d;
  --brand-gold:#d2b58b;
  --brand-black:#FFFFFF;

  /* Theme */
  --bg:var(--brand-blue);
  --text:#f5f8ff;
  --text-dim:#d3ddf3;
  --surface:rgba(255,255,255,.06);
  --surface-hover:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.18);
  --shadow:0 10px 30px rgba(0,0,0,.35);

  /* Hero controls */
  --hero-position:center 38%;
  --hero-overlay-rgb:30,55,109;
  --hero-overlay-alpha:.65;
  --hero-bottom-fade:.45;

  /* Shared sizes for the logo tile & row */
  --logo-size: clamp(160px, 18vw, 240px);
  --logo-pad: clamp(8px, 4%, 14px);

  /* Hero caption card */
  --hero-card-bg: rgba(255,255,255,.72);
  --hero-card-border: rgba(255,255,255,.35);
  --hero-card-text: #0e1a34;
}


/* 1) BASE / TYPE / HELPERS ---------------------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@font-face{font-family:Outfit;src:local('Outfit');font-display:swap}
@font-face{font-family:Inter;src:local('Inter');font-display:swap}

a{color:var(--text);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{opacity:.9}

.container{max-width:1280px;margin:0 auto;padding:0 1rem}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:10px;width:auto;height:auto;background:var(--brand-gold);color:#1d1b16;padding:.5rem .75rem;border-radius:.5rem;outline:2px solid #000}


/* 2) GLOBAL LAYOUT (SHELL, MASTHEAD, HEADER ROWS) ------------------------ */
.shell{
  display:grid;
  grid-template-columns: minmax(200px, 300px) 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "logo brand brand"
    "nav  nav   nav"
    "hero hero  hero"
    "footer footer footer";
  gap:16px;
  padding:16px 0 24px;
  position: relative;
}

/* A1: Logo */
.logo-tile{ grid-area: logo; display:flex; align-items:center; }
.brand-logo-badge{
  width: var(--logo-size); height: var(--logo-size);
  border-radius: 16px; background:#fff;
  border: 3px solid rgba(210,181,139,.97);
  box-shadow: 0 16px 34px rgba(0,0,0,.3), 0 0 0 6px rgba(255,255,255,.06);
  padding: var(--logo-pad);
}
.brand-logo{ width:100%; height:100%; object-fit:contain; object-position:center; border-radius:10px; display:block; }

/* B1+C1: Brand */
.brand-block{
  grid-area: brand; display:flex; align-items:center;
  min-height: var(--logo-size); padding-top:0;
}
.brand-title{
  margin:0; font-family:Outfit, Inter, system-ui, sans-serif;
  font-size:clamp(1.8rem, 4.5vw, 2.6rem); font-weight:800; letter-spacing:.2px; text-wrap:balance;
  line-height:1.08; text-shadow:0 1px 0 rgba(0,0,0,.28);
}

.brand-title .brand-line{display:block}
.brand-title .brand-line:first-child{font-weight:700;opacity:.98}

/* Masthead banner behind top row */
.masthead{
  grid-column: 1 / -1; grid-row: 1 / 2;
  min-height: var(--logo-size); border-radius: 18px;
  position: absolute; inset: 0 1rem auto 1rem; z-index: 0;
  overflow:hidden; pointer-events:none; border:1px solid var(--border);
}
.masthead::before{
  content:""; position:absolute; inset:0;
  background: var(--masthead-image) center/cover no-repeat;
  filter: blur(var(--masthead-blur)) brightness(var(--masthead-brightness));
  opacity: var(--masthead-opacity);
}
.masthead::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.18)), var(--masthead-tint);
  mix-blend-mode: multiply;
}
.logo-tile, .brand-block{ position: relative; z-index: 1; }

/* Row 2: Nav spanning */
.nav{ grid-area:nav; }


/* 3) NAVIGATION ---------------------------------------------------------- */
.nav-links{
  display:flex; gap:.4rem; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border); border-radius:1rem; padding:.35rem;
}
.nav-links a{
  position:relative;
  text-decoration:none; border:1px solid transparent; border-radius:.8rem;
  padding:.6rem 1rem; white-space:nowrap; font-weight:600; background:transparent;
}
.nav-links a:hover{ background:var(--surface-hover); border-color:var(--border); }
.nav-links .cta-link{ background:var(--brand-gold); color:#231a12; border-color:transparent; }

/* Active-state helper: add aria-current="page" on the current page link */
.nav-links a[aria-current="page"]{
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border-radius: .8rem;
  border-color: rgba(210,181,139,.7);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}


@media (max-width: 760px){
  .nav-links{ display:grid; grid-template-columns:1fr; gap:.5rem; justify-items:stretch; padding:.6rem; background:transparent; border:0; }
  .nav-links a{ display:block; width:100%; text-align:center; background:var(--surface); border:1px solid var(--border); min-height:46px; }
  .nav-links .cta-link{ background:var(--brand-gold); color:#231a12; border-color:transparent; }
}

/* Small screen grid adjustment */
@media (max-width: 580px){
  .shell{
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "brand"
      "nav"
      "hero"
      "footer";
  }
  .logo-tile{ justify-content: center; }
  .brand-block{ text-align: center; justify-content: center; padding: 0 1rem; }
  .brand-title{ font-size: clamp(1.5rem, 8vw, 2rem); }
  .masthead{ grid-row: 1 / 3; min-height: 320px; }
  --logo-size: clamp(120px, 28vw, 160px);
}

/* 4) HERO (HOME PAGE) ---------------------------------------------------- */
.hero{ grid-area:hero; position:relative; border-radius:1rem; overflow:hidden;
  min-height: clamp(320px, 44vh, 560px); box-shadow:var(--shadow); }
.hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--hero-position); }
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,var(--hero-bottom-fade)) 62%, rgba(0,0,0,var(--hero-bottom-fade)) 100%),
    linear-gradient(rgba(var(--hero-overlay-rgb), var(--hero-overlay-alpha)), rgba(var(--hero-overlay-rgb), var(--hero-overlay-alpha)));
}
.hero-inner{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:.75rem; padding:2rem; color:#fff; }
.hero-title{ margin:0; font-family:Outfit, Inter, system-ui, sans-serif; font-size:clamp(2rem, 5vw, 3.2rem); font-weight:800; letter-spacing:.2px;
  text-shadow:0 3px 18px rgba(0,0,0,.65), 0 6px 28px rgba(0,0,0,.45); }
.hero-sub{ margin:0; max-width:60ch; color:#eef3ff; text-shadow:0 2px 12px rgba(0,0,0,.55); }
@media (max-width:720px){ .hero{min-height:clamp(300px,42vh,520px);} }
@media (max-width:560px){ .hero{min-height:clamp(280px,40vh,480px);} .hero-inner{padding:14px; gap:.5rem;} }


/* 5) BUTTONS ------------------------------------------------------------- */
.btn{
  display:inline-block; padding:.7rem 1rem; border-radius:.9rem;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  text-decoration:none; font-weight:700; backdrop-filter:saturate(1.1) blur(2px);
}
.btn:hover{ background:var(--surface-hover); }
.btn-gold{ background:var(--brand-gold); color:#231a12; border-color:transparent; }
.btn-gold2{ background:var(--brand-black); color:#231a12; border-color:transparent; }
.btn-gold:hover{ filter:brightness(.95); }
@media (max-width:520px){ .btn,.btn-gold{ width:100%; } }


/* 6) TOOLBAR TILES ------------------------------------------------------- */
.hero-toolbar{ position:absolute; top:14px; right:14px; z-index:2; display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.toolbar-tile{
  height:56px; min-width:56px; padding:0 14px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  color:#fff; font-weight:800; text-decoration:none;
  background:rgba(6,12,30,.86);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 12px 30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter:saturate(1.25) blur(2px);
}



.toolbar-tile svg{ width:22px; height:22px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.toolbar-tile.docs{
  min-width:164px; color:var(--brand-gold);
  background:rgba(30,55,109,.92); border:2px solid var(--brand-gold);
  box-shadow:0 12px 30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05);
  text-shadow:0 1px 0 rgba(0,0,0,.55);
}
.toolbar-tile:focus{ outline:2px solid #fff; outline-offset:2px; }
.toolbar-tile.docs:focus{ outline:2px solid rgba(0,0,0,.75); }

/* Mobile: toolbar sits below hero card, smaller and centered */
@media (max-width: 700px){
  .hero-toolbar{
    position: static;
    margin-top: .75rem;
    margin-bottom: .25rem;
    align-self: stretch;
    justify-content: center;
    flex-wrap: wrap;
  }

  .toolbar-tile{
    height: 44px;
    min-width: 44px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: .8rem;
  }

  .toolbar-tile svg{
    width: 18px;
    height: 18px;
  }

  .toolbar-tile.docs{
    min-width: auto;
    padding: 0 16px;
  }
}
/* 7) FOOTER -------------------------------------------------------------- */
footer{ grid-area:footer; background:linear-gradient(180deg, rgba(12,24,58,.82), rgba(8,18,48,.92)); border-top:1px solid var(--border); border-radius:1rem; padding:1rem; }
.footer-inner{ display:grid; gap:1rem; grid-template-columns:1fr; }
.footer-top{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.footer-logo{ width:100px; height:100px; border-radius:10px; background:#fff; border:2px solid rgba(210,181,139,.95); overflow:hidden; display:grid; place-items:center; box-shadow:var(--shadow); padding:6px; }
.footer-logo img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; }
address{ font-style:normal; opacity:.96; line-height:1.5; }
.footer-meta{ display:flex; gap:.75rem; flex-wrap:wrap; opacity:.9; }
.footer-meta a{ color:var(--text); text-decoration:underline; }
@media (min-width:880px){ .footer-inner{ grid-template-columns:1fr auto; } .footer-right{ justify-self:end; text-align:right; } }


/* 8) UTILITY CARD (hero-panel) ------------------------------------------ */
.hero-panel{
  background: var(--hero-card-bg);
  border: 1px solid var(--hero-card-border);
  border-radius: 14px;
  backdrop-filter: saturate(1.1) blur(3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  color: var(--hero-card-text);
  padding: 1rem 1.25rem;
  max-width: min(92%, 760px);
}
.hero-panel .hero-title, .hero-panel .hero-sub{ color: var(--hero-card-text); text-shadow: none; }
.hero-panel .hero-title{ font-size: clamp(1.75rem, 4.5vw, 2.8rem); line-height: 1.15; margin-bottom: .5rem; }
.hero-panel .hero-sub{ font-size: clamp(0.95rem, 2vw, 1.1rem); line-height: 1.5; }
.hero-panel .btn{ background: rgba(17,23,41,.08); border-color: rgba(17,23,41,.18); color: var(--hero-card-text); }
.hero-panel .btn-gold{ background: var(--brand-gold); color:#231a12; border-color:transparent; }
.hero-cta{ display: flex; gap: .65rem; flex-wrap: wrap; margin-top: .75rem; }
@media (max-width:560px){ 
  .hero-panel{ padding:.85rem 1rem; }
  .hero-cta{ flex-direction: column; }
  .hero-cta .btn{ width: 100%; text-align: center; }
}


/* 9) PAGE: CALENDAR — rail-locked and aligned */
.page--calendar{
  /* identical padding for both columns (no viewport growth = no drift) */
  --page-pad-x: 16px;
  --page-pad-y: 14px;
}

/* Sidebar (left column) card */
.page-header{
	
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75), rgba(23,42,82,.65));
  color:#fff;
  border:1px solid rgba(210,181,139,.25);
  border-radius:1.1rem;
  margin:1rem 0 0;
  box-shadow: 0 0 0 1px rgba(210,181,139,.15);
}


.page-header-inner{
  padding: var(--page-pad-y) var(--page-pad-x);
}
.page-title{ font-size: clamp(1.5rem, 2.2vw, 2rem); line-height:1.2; margin:0 0 .35rem; }
.page-sub{ opacity:.9; margin:0 0 .75rem; }
.page-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }
.page-header .btn{ border-color: rgba(255,255,255,.2); }
.page-header .btn:hover{ background: rgba(255,255,255,.08); }


/* Make page-actions buttons stack like hero-cta on mobile */
@media (max-width: 580px){
  .page-actions{ 
    flex-direction: column; 
  }
  .page-actions .btn{ 
    width: 100%; 
    text-align: center; 
  }
}

/* Calendar page grid — aligned to site rails (no extra inner padding) */
.page--calendar .page-body{
  grid-area: hero;
  margin: 0;
  padding: 0;
}
.page--calendar .page-grid{
  max-width: 1280px;      /* same as .container */
  margin: 1rem auto 2rem;
  padding: 0;             /* IMPORTANT: no extra horizontal padding */
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(auto, 940px); /* Changed from 1fr */
  column-gap: 16px;       /* matches your shell gap */
  align-items: start;
}
.page--calendar .page-header{ position: sticky; top: .75rem; }

/* Calendar (right column) card */
.calendar-wrap{ margin: 0 0 2rem; }

.calendar-card{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  box-shadow: var(--shadow);
  overflow: hidden;
  max-width: 940px;
  width: 100%;
}

.calendar-card-head{
  padding: var(--page-pad-y) var(--page-pad-x);
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:.75rem;
  background: linear-gradient(135deg, rgba(210,181,139,.25), rgba(210,181,139,.12));
  border-bottom: 2px solid rgba(210,181,139,.35);
}

.calendar-card-title{ font-size: 1rem; margin:0; }
.calendar-legend{ display:flex; align-items:center; gap:.45rem; font-size:.88rem; opacity:.95; }
.calendar-legend .swatch{
  width:.8rem; height:.8rem; border-radius:.2rem; background: var(--sw, #d2b58b);
  display:inline-block; margin-right:.3rem; border:1px solid rgba(0,0,0,.2);
}
.calendar-legend .sep{ opacity:.55; }

/* Responsive iframe wrapper */
.gcal-embed{
  position: relative;
  aspect-ratio: 16 / 10; /* Adjusted ratio */
  max-height: 680px; /* Add max-height constraint */
  min-height: clamp(520px, 60vh, 680px);
}

.gcal-embed iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; background: #0e1a33;
}

/* Softer "you are here" for the menu on this page only (unchanged) */
.page--calendar .nav .nav-links a[aria-current="page"]{
  background: rgba(210,181,139,.16);
  box-shadow: inset 0 0 0 1px rgba(210,181,139,.35);
}
.page--calendar .nav .nav-links a[aria-current="page"]::after{ display:none; }

.calendar-foot{
  padding: var(--page-pad-y) var(--page-pad-x);
  background: rgba(255,255,255,.08);
  border-top: 1px solid rgba(210,181,139,.2);
  font-size: 0.85rem;
  opacity: 0.95;
}


.calendar-mobile-link {
  display: none;
}






/* 9B) GENERIC PAGE CONTENT LAYOUT (Fundraising / Donations / Meetings / Contact) */

.hero--stacked .hero-inner{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:stretch;
  gap:1.25rem;
}

/* Shared main content container inside hero */
.page-main{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

/* Utility: section wrapper for sub-pages */
.page-section{
  background: linear-gradient(180deg, rgba(0,0,0,0.78), rgba(23,42,82,.92));
  border:1px solid rgba(210,181,139,.25);
  border-radius:1rem;
  padding:1rem 1.1rem 1.2rem;
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 12px 30px rgba(0,0,0,.45);
}

/* Page section titles */
.page-section h3{
  margin-top:0;
  margin-bottom:.35rem;
  font-size:1.05rem;
  font-weight:700;
}
.page-section p{
  margin:.15rem 0;
  font-size:.92rem;
  color:var(--text-dim);
}

/* FUNDRAISING EVENT CARDS */
.fundraising-list{
  display:flex;
  flex-direction:column;
  gap:.9rem;
}

.fundraising-card{
  background:rgba(5,10,30,.85);
  border-radius:.9rem;
  border:1px solid rgba(210,181,139,.22);
  padding:.85rem .95rem 1rem;
  box-shadow:0 8px 22px rgba(0,0,0,.55);
}

.fundraising-name{
  margin:0 0 .1rem;
  font-size:1rem;
  font-weight:700;
}

.fundraising-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .75rem;
  font-size:.82rem;
  color:var(--text-dim);
  margin-bottom:.35rem;
}

.fundraising-meta span{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
}

.fundraising-description{
  font-size:.9rem;
  color:var(--text-dim);
  margin:.25rem 0 .35rem;
}

.fundraising-notes{
  font-size:.82rem;
  color:#c7d3f7;
  opacity:.9;
}

/* Small label pill (e.g., "Dine Out", "Car Wash") */
.fundraising-tag{
  display:inline-flex;
  align-items:center;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  padding:.15rem .45rem;
  border-radius:999px;
  border:1px solid rgba(210,181,139,.45);
  background:rgba(210,181,139,.12);
  color:#f9f1de;
  margin-bottom:.25rem;
}

/* DONATIONS / MEETINGS / CONTACT layout tweaks (mostly reuse .page-section) */
.page-main--donations,
.page-main--meetings,
.page-main--contact{
  gap:1rem;
}

/* Meetings cards */
.meeting-card{
  background:rgba(5,10,30,.85);
  border-radius:.9rem;
  border:1px solid rgba(210,181,139,.22);
  padding:.85rem .95rem 1rem;
  box-shadow:0 8px 22px rgba(0,0,0,.55);
}

.meeting-title{
  margin:0 0 .2rem;
  font-size:1rem;
  font-weight:700;
}

.meeting-meta{
  font-size:.82rem;
  color:var(--text-dim);
  margin:0 0 .4rem;
}

.meeting-meta span+span::before{
  content:"•";
  margin:0 .35rem;
  opacity:.6;
}

.meeting-card a{
  font-size:.86rem;
}

/* CONTACT FORM */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.contact-form label{
  font-size:.86rem;
  font-weight:600;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:.55rem .6rem;
  border-radius:.5rem;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(3,7,20,.9);
  color:var(--text);
  font-family:inherit;
  font-size:.9rem;
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline:2px solid rgba(210,181,139,.75);
  outline-offset:1px;
}

.contact-form textarea{
  min-height:140px;
  resize:vertical;
}

/* Simple anti-bot honeypot */
.contact-form .hp-field{
  display:none;
}

/* FLOATING DONATE PILL (on every page) */
.donate-pill{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  z-index:90;
  padding:.6rem 1.1rem;
  border-radius:999px;
  border:1px solid rgba(210,181,139,.5);
  background:var(--brand-gold);
  color:#231a12;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.6);
}

.donate-pill:hover{
  filter:brightness(.95);
}



/* Mobile tweaks for donate pill */
@media (max-width:600px){
  .donate-pill{
    right:.85rem;
    bottom:.85rem;
    padding:.55rem .9rem;
    font-size:.85rem;
  }
}





/* 10) RESPONSIVE (page only) */
@media (max-width: 980px){
  .page--calendar .page-grid { grid-template-columns: 1fr; }
  .page--calendar .page-header { position: static; }
  .page--calendar .gcal-embed { aspect-ratio: 16 / 13; min-height: 560px; }
}

@media (max-width: 760px){
  .gcal-embed {
    display: none;
  }
  .calendar-card-head {
    display: none; /* Hide the header too */
  }
  .calendar-mobile-link {
    display: block;
    padding: 2rem;
    text-align: center;
  }
  .calendar-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 580px){
  .page--calendar .page-grid { 
    margin: 1rem 0 1rem; 
    padding: 0;
  }
  .page--calendar .page-header {
    margin: 0 0 1rem;
  }
  .page--calendar .calendar-card {
    border-radius: 0.8rem;
    max-width: 100%; /* Override the 940px */
  }
  .page--calendar .calendar-wrap {
    margin: 0; /* Remove bottom margin on mobile */
  }
  .page--calendar .gcal-embed { 
    min-height: 480px;
  }
}