/* Dedicated About page styles (distinct from indexstyle.css)
   Warm maroon accent, different layout treatments to separate it visually.
*/
:root{ --bg:#fff; --text:#071317; --muted:#6b6b6b; --accent:#267a3a; --accent-2:#66b26b; }
html,body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial; color:var(--text); background:var(--bg); }
/* keep room for fixed top nav like the rest of the site */
body{ padding-top:64px; }

/* header */
.top-nav{ position:fixed; left:0; right:0; top:0; height:64px; background:#ffffff; border-bottom:1px solid rgba(10,40,20,0.06); display:flex; align-items:center; z-index:1000; }
.top-nav .nav-inner{ max-width:1200px; margin:0 auto; width:100%; padding:0 1rem; display:flex; align-items:center; justify-content:space-between; }
.nav-logo{ width:40px; height:40px; object-fit:contain; margin-right:10px; }
.brand{ display:flex; align-items:center; }
.brand .nav-title{ margin-left:6px; font-weight:700; color:#0b2b1a; }
.primary-nav{ display:flex; align-items:center; }
.primary-nav a{ margin-left:18px; color:#0b2b1a; text-decoration:none; font-weight:600; font-size:14px; opacity:0.95; }
.primary-nav a:hover{ opacity:1; color:#196738; }

/* Dropdown menu (Concert Band) — same behavior as index page */
.nav-item{ position:relative; margin-left:14px; }
.drop-toggle{
  background:none;
  border:0;
  color:#0b2b1a;
  font-weight:600;
  cursor:pointer;
  font-size:14px;
  padding:6px 4px;
}
.drop-toggle:focus{ outline:2px solid rgba(10,40,20,0.12); border-radius:4px; }
.dropdown-menu{
  position:absolute;
  left:0;
  top:100%; /* align directly beneath the toggle to avoid a mouse gap */
  background:#ffffff;
  min-width:200px;
  border-radius:6px;
  box-shadow:0 8px 20px rgba(24,28,32,0.06);
  list-style:none;
  padding:8px 0;
  margin:0;
  z-index:1000;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: opacity .18s cubic-bezier(.2,.9,.2,1), transform .18s cubic-bezier(.2,.9,.2,1), visibility .12s linear;
}
.dropdown-menu li a{
  display:block;
  padding:10px 16px;
  color:#0b2b1a;
  text-decoration:none;
  font-size:14px;
}
.dropdown-menu li a:hover{ background:rgba(26,115,66,0.06); }

.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu,
.nav-item.open .dropdown-menu{
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* page layout */
.page-container{ max-width:980px; margin:84px auto 48px; display:grid; grid-template-columns:1fr; gap:18px; padding:0 18px; position:relative; padding-bottom:120px; }

/* socials: placed as a compact horizontal row docked at the bottom of the page */
.left-column .socials{
  /* docked inside the page container so it appears above the footer */
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:12px;
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  z-index:1001;
}
.left-column .socials h2{ display:none; margin:0; font-size:0; }
.left-column .socials a{ margin:0; display:inline-flex; }
.social-icon{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin:0; border-radius:50%; background:#f3f3f3; color:#0b2b1a; font-size:16px; border:1px solid rgba(0,0,0,0.04); transition:transform .12s ease, background .12s ease, color .12s ease; }
.social-icon:hover{ transform:translateY(-4px); background:#1e6c36; color:#fff; }

/* center content */
.center-column{ display:flex; flex-direction:column; gap:18px; }
.hero h1{ font-size:34px; margin:0; color:var(--accent); }
.lead{ color:var(--muted); max-width:720px; }

.card-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.about-card, .events-card{ background:#fff; padding:18px; border-radius:12px; border:1px solid rgba(0,0,0,0.04); box-shadow:0 8px 28px rgba(0,0,0,0.04); }
.about-card h2, .events-card h3{ color:var(--accent); }
.about-card ul{ padding-left:18px; }
.accent{ display:block; height:6px; width:72px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:6px; margin-bottom:12px; }

.right-column .image-container{ border-radius:12px; overflow:hidden; border:1px solid rgba(0,0,0,0.04); box-shadow:0 8px 28px rgba(0,0,0,0.04); margin-top:8px; }
.right-column img{ width:100%; display:block; max-height:420px; object-fit:cover; }

/* footer */
.portal-footer{ text-align:center; padding:24px 0; color:var(--muted); border-top:1px solid rgba(0,0,0,0.04); }

/* responsive */
@media (min-width:900px){
  /* keep card grid two columns on wider screens */
  .card-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px){
  .page-container{ grid-template-columns:1fr; margin-top:88px; }
  .card-grid{ grid-template-columns:1fr; }
  .right-column{ order:2; }
  /* mobile: make socials sit inline in the flow below content */
  .left-column .socials{
    position:static;
    transform:none;
    margin:12px auto;
    border-radius:12px;
    padding:10px;
    width:100%;
    max-width:520px;
    box-shadow:0 6px 18px rgba(0,0,0,0.04);
    justify-content:center;
  }
  .left-column .socials h2{ display:block; font-size:16px; margin-right:8px; }
  .social-icon{ width:44px; height:44px; }
}