/* Arlington High School Band Boosters — v1.3 */
/* Color system */
:root{
  /* Masthead (banner behind the brand row) */
  --masthead-image: url('../img/hero.jpg'); /* drop masthead.jpg later if you want */
  --masthead-opacity: .28;   /* how visible the image is behind the text */
  --masthead-blur: 2px;      /* softens details so text/white logo pop */
  --masthead-brightness: .85;/* lower = darker */
  --masthead-tint: rgba(30,55,109,.65); /* blue tint layer */

  --brand-blue:#1e376d;
  --brand-gold:#d2b58b;
  --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 logo tile and brand row */
  --logo-size: clamp(160px, 18vw, 240px);
  --logo-pad: clamp(8px, 4%, 14px); /* % scales with the square tile width */
	
  --hero-card-bg: rgba(255,255,255,.52);
  --hero-card-border: rgba(255,255,255,.35);
  --hero-card-text: #0e1a34; /* dark navy text on light panel */
}

*{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}

/* ===== Grid layout ===== */
.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;
}

/* A1: Logo */
.logo-tile{
  grid-area: logo;
  display: flex;
  align-items: center;           /* was flex-start */
}


.brand-logo-badge{
  /* replace the --size rule with width/height from the shared var */
  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);      /* was 10px */
}


.brand-logo{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  display: block;
}

/* B1+C1: Brand (two-line) */
.brand-block{
  grid-area: brand;
  display: flex;
  align-items: center;          /* was flex-end */
  min-height: var(--logo-size); /* ensures the row matches the logo tile height */
  padding-top: 0;               /* remove the extra top padding */
}

.brand-title{
  margin:0;font-family:Outfit, Inter, system-ui, sans-serif;
  font-size:clamp(3.6rem, 3.2vw, 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}

/* Row 2: Nav spanning */
.nav{grid-area:nav}
.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{
  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}
@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}
}

/* Row 3: Hero */
.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,.00) 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)));
}

@media (max-width: 720px){
  .hero{ min-height: clamp(300px, 42vh, 520px); }
}
@media (max-width: 560px){
  .hero{
    min-height: clamp(280px, 40vh, 480px);
  }
  /* a bit of inner padding so text never hugs edges when fully collapsed */
  .hero-inner{ padding: 14px; gap: .5rem; }
}

.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)}
.hero-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.5rem}
.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-gold:hover{filter:brightness(.95)}
@media (max-width:520px){.hero-cta{display:grid;grid-template-columns:1fr;gap:.6rem}.btn,.btn-gold{width:100%}}

/* High-contrast hero toolbar */
.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))}
/* Documents: blue fill + gold outline + gold text */
.toolbar-tile.docs{
  min-width:164px;
  color:var(--brand-gold);
  background:rgba(30,55,109,.92); /* blue */
  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)}

/* 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}}

/* Mobile whitespace tightening */
@media (max-width: 980px){.shell{gap:10px;padding:8px 0 16px}.brand-block{padding-top:0}}

@media (max-width: 980px){
  .brand-block{ min-height: auto; }
}

/* a light, translucent card that sits on the photo */
.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);
}

/* dark text on the light panel; remove heavy white text-shadows */
.hero-panel .hero-title,
.hero-panel .hero-sub{
  color: var(--hero-card-text);
  text-shadow: none;
}

/* keep buttons tidy on the panel */
.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;
}
@media (max-width: 560px){
  .hero-panel{ padding: .85rem 1rem; }
}


/* ===== Masthead banner (framing the top row) ===== */
.shell{ position: relative; }
.masthead{
  grid-column: 1 / -1;
  grid-row: 1 / 2;                     /* only behind the top brand row */
  min-height: var(--logo-size, clamp(160px, 18vw, 240px));
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;                 /* let clicks hit logo/nav */
  border:1px solid var(--border);
}
/* image + tint layers */
.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)), /* soft contrast */
    var(--masthead-tint);                                     /* blue tint */
  mix-blend-mode: multiply;
  opacity: 1;
}
/* Lift logo + brand above banner */
.logo-tile, .brand-block{ position: relative; z-index: 1; }


@media (max-width: 720px){
  .shell{
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "brand"
      "nav"
      "hero"
      "footer";
	  grid-template-rows: auto auto auto auto auto;
    gap: 10px;                 /* tighter vertical spacing */
  }

  .logo-tile{ justify-content: center; }

  .brand-block{
    min-height: auto;          /* don’t force tall row when stacked */
    align-items: center;       /* center the two-line title vertically */
    text-align: center;
    padding: 6px 12px;         /* ← small, consistent padding around the text */
  }

  /* If you added the masthead banner earlier, let it span both rows */
  .masthead{ grid-row: 1 / 3; min-height: calc(var(--logo-size, 180px) + 90px); }
}