/* =========================================================
   American Priority Project — local recreation
   Shared stylesheet
   ========================================================= */

:root{
  --navy:#0f2741;
  --navy-dark:#0a1c30;
  --red:#b11116;
  --red-dark:#8e0d11;
  --gold:#b7902e;
  --gold-light:#f4e9d3;
  --gray:#f4f5f7;
  --gray-mid:#e3e6ea;
  --text:#242b33;
  --muted:#5d6671;
  --white:#ffffff;
  --maxw:1180px;
  --radius:8px;
  --shadow:0 6px 24px rgba(15,39,65,.10);
  --font:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  line-height:1.6;
  background:var(--white);
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--red);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{color:var(--navy);line-height:1.2;margin:0 0 .5em;}
h1{font-size:2.4rem;}
h2{font-size:1.9rem;}
h3{font-size:1.4rem;}
p{margin:0 0 1em;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.text-center{text-align:center;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  background:var(--red);
  color:var(--white)!important;
  padding:12px 26px;
  border-radius:var(--radius);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  border:none;
  cursor:pointer;
  font-size:.95rem;
  transition:background .2s ease;
}
.btn:hover{background:var(--red-dark);text-decoration:none;}
.btn-navy{background:var(--navy);}
.btn-navy:hover{background:var(--navy-dark);}
.btn-outline{
  background:transparent!important;border:2px solid #fff;color:#fff!important;
}
.btn-outline:hover{background:#fff;color:var(--navy)!important;}
.hero .btn-navy{background:transparent;border:2px solid #fff;}
.hero .btn-navy:hover{background:#fff;color:var(--navy)!important;}

/* ---------- Top announcement bar ---------- */
.topbar{
  background:var(--red);
  color:#fff;
  text-align:center;
  font-weight:700;
  font-size:.95rem;
  padding:7px 10px;
  letter-spacing:.4px;
}

/* ---------- Header / Nav ---------- */
.site-header{
  background:var(--navy);
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:var(--shadow);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:10px 20px;
  max-width:var(--maxw);
  margin:0 auto;
}
.nav__logo{flex:none;display:flex;align-items:center;gap:10px;}
.nav__logo img{height:46px;width:auto;}
.nav__logo-text{
  color:#fff;font-weight:800;font-size:1.05rem;line-height:1.15;
  white-space:nowrap;letter-spacing:.2px;
}
.nav__menu{
  display:flex;
  align-items:center;
  gap:20px;
  list-style:none;
  margin:0;padding:0;
}
.nav__menu > li{position:relative;}
.nav__menu a{
  color:#fff;
  font-weight:600;
  font-size:.88rem;
  text-decoration:none;
  padding:6px 0;
  display:inline-block;
}
.nav__menu a:hover{color:#ffd2d3;text-decoration:none;}
.nav__menu .has-sub > a::after{content:" ▾";font-size:.75rem;}
.submenu{
  position:absolute;
  top:100%;left:0;
  background:var(--navy-dark);
  min-width:230px;
  list-style:none;
  margin:0;padding:8px 0;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:none;
}
.nav__menu .has-sub:hover .submenu,
.nav__menu .has-sub:focus-within .submenu{display:block;}
.submenu a{display:block;padding:8px 18px;font-weight:500;font-size:.88rem;}
.submenu a:hover{background:var(--red);}
.nav__cta{display:flex;align-items:center;gap:16px;}
.nav__mobile-cta{display:none;}
.nav__toggle{
  display:none;background:none;border:none;cursor:pointer;
  flex-direction:column;gap:5px;padding:6px;
}
.nav__toggle span{display:block;width:26px;height:3px;background:#fff;border-radius:2px;}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(rgba(15,39,65,.78),rgba(15,39,65,.78));
  background-color:var(--navy);
  color:#fff;
  text-align:center;
  padding:64px 20px;
}
.hero h1{color:#fff;font-size:2.7rem;max-width:900px;margin:0 auto .4em;}
.hero h2{color:#ffd2d3;font-weight:500;font-size:1.4rem;max-width:760px;margin:0 auto;}
.hero--image{padding:0;}
.hero--image img{width:100%;}

/* Homepage hero: campus photo background behind the gradient */
.hero--photo{
  background-image:url("../images/home-hero-bg.jpg");
  background-size:cover;
  background-position:center 30%;
  padding:96px 20px;
}
.hero__box{
  display:inline-block;
  background:rgba(10,28,48,.82);
  padding:40px 48px;
  border-radius:var(--radius);
}

/* ---------- Service highlight strip (3 icons) ---------- */
.feature-strip{background:var(--gray);padding:40px 0;}
.feature-strip .grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.feature-card{
  background:#fff;border-radius:var(--radius);padding:24px;text-align:center;
  box-shadow:var(--shadow);
}
.feature-card img{height:90px;width:auto;margin:0 auto 14px;border-radius:12px;}
.feature-card h3{margin:0 0 6px;font-size:1.15rem;}
.feature-card h3 a{color:var(--navy);}
.feature-card .sub{color:var(--muted);font-size:.85rem;}

/* ---------- Generic content section ---------- */
.section{padding:56px 0;}
.section.alt{background:var(--gray);}
.section__eyebrow{
  text-transform:uppercase;letter-spacing:2px;color:var(--red);
  font-weight:700;font-size:.85rem;margin-bottom:6px;text-align:center;
}
.section h2.center,.section h3.center{text-align:center;}

/* two-column image + text */
.media{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  margin-bottom:40px;
}
.media:last-child{margin-bottom:0;}
.media.reverse .media__img{order:2;}
.media__img img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;}
.media__body h3,.media__body h4{margin-top:0;}

/* Masked/floating photos — pre-shaped PNGs with their own baked-in border;
   no card background, shadow follows the shape instead of a rectangle. */
.media__img--masked img{
  border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 16px 22px rgba(15,39,65,.28));
  max-width:440px;
  margin:0 auto;
}

/* Square photo with an offset solid-color block behind it, standing in for
   a shadow. No card background — the block is the only backing shape. */
.media__img--framed{
  position:relative;
  max-width:400px;
  margin:0 auto;
  padding:0 0 22px 22px;
}
.media__img--framed::before{
  content:"";
  position:absolute;
  top:22px;left:0;
  width:100%;height:100%;
  background:var(--navy);
  border-radius:var(--radius);
  z-index:0;
}
.media__img--framed.offset-alt::before{background:var(--gold);}
.media__img--framed img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:none;
}

/* service cards (home "select a service") */
.service-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.service-cards a.card{
  display:block;background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);text-decoration:none;transition:transform .2s ease;
}
.service-cards a.card:hover{transform:translateY(-4px);text-decoration:none;}
.service-cards img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.service-cards .card__label{
  padding:16px;text-align:center;font-weight:700;color:var(--navy);font-size:1.05rem;
}

/* ---------- FAQ accordion ---------- */
.faq{max-width:840px;margin:0 auto;}
.faq__item{border-bottom:1px solid var(--gray-mid);}
.faq__q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font-size:1.1rem;font-weight:700;color:var(--navy);
  padding:18px 40px 18px 0;position:relative;
}
.faq__q::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;color:var(--red);
}
.faq__item.open .faq__q::after{content:"–";}
.faq__a{display:none;padding:0 0 18px;color:var(--muted);}
.faq__item.open .faq__a{display:block;}

/* ---------- Breadcrumbs ---------- */
.breadcrumb{
  background:var(--gray);padding:12px 0;font-size:.85rem;color:var(--muted);
}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:6px;color:var(--gray-mid);}
.breadcrumb a{color:var(--muted);font-weight:600;}
.breadcrumb li:last-child{color:var(--navy);font-weight:700;}

/* ---------- Stats bar (trust strip) ---------- */
.stats-bar{background:var(--navy-dark);padding:34px 0;}
.stats-bar .grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;
}
.stat strong{
  display:block;color:#fff;font-size:2rem;font-weight:800;line-height:1.1;
}
.stat strong .accent{color:var(--gold-light);}
.stat span{display:block;color:#b9c3d0;font-size:.85rem;margin-top:6px;line-height:1.35;}

/* ---------- Credential callout (in-page trust box) ---------- */
.credential-callout{
  display:flex;gap:18px;align-items:center;background:var(--gold-light);
  border-left:4px solid var(--gold);border-radius:var(--radius);
  padding:20px 24px;margin:32px 0;
}
.credential-callout img{
  width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;box-shadow:var(--shadow);
}
.credential-callout p{margin:0;color:var(--navy);font-size:.98rem;}
.credential-callout a{font-weight:700;}

/* ---------- Value / pillar cards (About) ---------- */
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:30px;}
.value-card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:24px 20px;text-align:center;
}
.value-card .glyph{
  width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
  font-size:1.4rem;font-weight:800;
}
.value-card h4{margin:0 0 8px;font-size:1.05rem;}
.value-card p{margin:0;color:var(--muted);font-size:.92rem;}

/* ---------- Team page ---------- */
.team-lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:30px;}
.team-lead{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column;
}
.team-lead__photo{aspect-ratio:4/3;overflow:hidden;}
.team-lead__photo img{width:100%;height:100%;object-fit:cover;object-position:top;}
.team-lead__body{padding:24px;flex:1;display:flex;flex-direction:column;}

/* Compact variant — smaller, portrait-framed, inset toward center (used on Home) */
.team-lead-grid--compact{max-width:760px;margin-left:auto;margin-right:auto;}
.team-lead-grid--compact .team-lead__photo{aspect-ratio:3/4;}
.team-lead__body h3{margin:0 0 2px;font-size:1.3rem;}
.team-lead__title{color:var(--red);font-weight:700;font-size:.92rem;margin-bottom:14px;display:block;}
.team-lead__highlights{margin:0 0 16px;padding-left:18px;color:var(--muted);font-size:.94rem;}
.team-lead__highlights li{margin-bottom:6px;}
.team-lead details{
  margin-top:auto;border-top:1px solid var(--gray-mid);padding-top:14px;
}
.team-lead summary{
  cursor:pointer;font-weight:700;color:var(--navy);list-style:none;
  display:flex;align-items:center;gap:8px;font-size:.94rem;
}
.team-lead summary::before{content:"+";color:var(--red);font-size:1.2rem;line-height:1;}
.team-lead details[open] summary::before{content:"\2013";}
.team-lead summary::-webkit-details-marker{display:none;}
.team-lead details ul{margin:14px 0 0;padding-left:18px;color:var(--muted);font-size:.92rem;}
.team-lead details ul li{margin-bottom:7px;}

.support-team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px;}
.support-card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;text-align:center;
}
.support-card img{
  width:130px;height:130px;border-radius:50%;object-fit:cover;margin:0 auto 16px;box-shadow:var(--shadow);
}
.support-card h4{margin:0 0 4px;font-size:1.1rem;}
.support-card .cred{display:block;color:var(--red);font-weight:700;font-size:.85rem;margin-bottom:10px;}
.support-card p{margin:0;color:var(--muted);font-size:.9rem;}
.support-card .phone{display:block;margin-top:10px;font-weight:700;color:var(--navy);}

/* ---------- Service areas tags (no dead links) ---------- */
.area-region{margin-bottom:30px;}
.area-region h3{margin-bottom:12px;}
.area-tags{display:flex;flex-wrap:wrap;gap:10px;}
.area-tag{
  background:#fff;border:1px solid var(--gray-mid);border-radius:30px;
  padding:8px 18px;font-size:.92rem;font-weight:600;color:var(--navy);
  display:inline-block;text-decoration:none!important;transition:background .15s ease,border-color .15s ease;
}
a.area-tag:hover{background:var(--gray);border-color:var(--red);color:var(--red);}

/* ---------- Blog: flagship / index ---------- */
.blog-feature{
  display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:44px;
}
.blog-feature img{width:100%;height:100%;object-fit:cover;}
.blog-feature__body{padding:32px;}
.blog-feature__tag{color:var(--red);text-transform:uppercase;font-weight:700;font-size:.8rem;letter-spacing:1px;}
.blog-card.upcoming{opacity:.75;border-style:dashed;}
.blog-card .topic-tag{
  display:inline-block;background:var(--gray);color:var(--muted);font-size:.75rem;
  text-transform:uppercase;letter-spacing:.5px;font-weight:700;padding:4px 10px;border-radius:20px;margin-bottom:6px;
}

/* ---------- Article (blog post) body ---------- */
.article{max-width:780px;margin:0 auto;}
.article h2{margin-top:1.4em;}
.article ul,.article ol{padding-left:22px;}
.article ul li,.article ol li{margin-bottom:8px;}
.article__meta{color:var(--muted);font-size:.9rem;margin-bottom:6px;}

/* ---------- Team grid (about) ---------- */
.leaders{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:30px;}
.leader{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.leader img{width:100%;object-fit:cover;}
.leader__body{padding:22px;}
.leader__body h4{margin:0 0 12px;font-size:1.25rem;}
.leader__body ul{margin:0;padding-left:18px;color:var(--muted);}
.leader__body ul li{margin-bottom:6px;}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:30px;}
.team-member{text-align:center;}
.team-member img{
  width:170px;height:170px;border-radius:50%;object-fit:cover;margin:0 auto 14px;
  box-shadow:var(--shadow);
}
.team-member strong{display:block;color:var(--navy);font-size:1.1rem;}
.team-member span{display:block;color:var(--muted);font-size:.9rem;}

/* ---------- Service areas grid ---------- */
.areas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.area-card{
  background:#fff;border:1px solid var(--gray-mid);border-radius:var(--radius);
  padding:18px;text-align:center;
}
.area-card .small{display:block;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;}
.area-card a{font-weight:700;font-size:1.05rem;}

/* ---------- Blog grid ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.blog-card{
  background:#fff;border:1px solid var(--gray-mid);border-radius:var(--radius);
  padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;
}
.blog-card h3{font-size:1.15rem;margin:0;}
.blog-card a.more{font-weight:700;align-self:flex-start;}

/* ---------- Contact / form ---------- */
.contact-form{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:32px;max-width:560px;margin:0 auto;width:100%;
}
.contact-form h3{margin-top:0;}
.contact-form label{display:block;font-weight:600;margin:14px 0 6px;font-size:.92rem;}
.contact-form input{
  width:100%;padding:11px 12px;border:1px solid var(--gray-mid);
  border-radius:6px;font-size:1rem;font-family:inherit;
}
.contact-form .consent{display:flex;gap:10px;align-items:flex-start;margin:16px 0;font-size:.85rem;color:var(--muted);}
.contact-form .consent input{width:auto;margin-top:4px;}
.map iframe{width:100%;height:100%;min-height:380px;border:0;border-radius:var(--radius);}
.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:#cdd5df;padding:50px 0 24px;}
.site-footer a{color:#cdd5df;}
.site-footer a:hover{color:#fff;}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:30px;}
.site-footer h4{color:#fff;font-size:1.05rem;margin-bottom:14px;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer ul li{margin-bottom:8px;}
.footer-logo__brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.footer-logo__brand img{height:46px;width:auto;margin-bottom:0;flex:none;}
.footer-logo__brand span{color:#fff;font-weight:800;font-size:1.05rem;line-height:1.15;white-space:nowrap;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);margin-top:34px;padding-top:18px;
  text-align:center;font-size:.85rem;color:#9aa6b3;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero__box{padding:28px 24px;}
  .nav__menu{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--navy-dark);padding:10px 0;
  }
  .nav__menu.open{display:flex;}
  .nav__menu > li{width:100%;}
  .nav__menu a{display:block;padding:12px 20px;width:100%;}
  .submenu{position:static;display:block;box-shadow:none;background:rgba(0,0,0,.25);border-radius:0;}
  .nav__toggle{display:flex;flex:none;}
  .nav__logo img{height:38px;}
  .nav__logo-text{font-size:.92rem;}
  .nav__cta{display:none;}
  .nav{flex-wrap:nowrap;gap:8px;}
  .nav__mobile-cta{display:block!important;padding:14px 20px!important;}
  .nav__mobile-cta a{font-weight:700;color:#ffd2d3!important;}
  .nav__mobile-cta:last-child a{
    display:inline-block;background:var(--red);color:#fff!important;
    padding:10px 22px;border-radius:var(--radius);text-transform:uppercase;font-size:.9rem;
  }
  .feature-strip .grid,
  .service-cards,
  .blog-grid,
  .leaders,
  .media,
  .contact-split,
  .stats-bar .grid,
  .value-grid,
  .team-lead-grid,
  .support-team-grid,
  .blog-feature{grid-template-columns:1fr;}
  .media.reverse .media__img{order:0;}
  .areas-grid,.team-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .hero h1{font-size:2rem;}
  h1{font-size:1.9rem;}
  .stats-bar .grid{gap:26px;}
  .credential-callout{flex-direction:column;text-align:center;}
}
@media (min-width:901px) and (max-width:1100px){
  .service-cards{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:540px){
  .areas-grid,.team-grid,.footer-grid,.value-grid{grid-template-columns:1fr;}
  .nav__logo-text{font-size:.8rem;}
  .nav__logo img{height:32px;}
}