/* The Shepherd Friends | Phase 1B header and photographic hero.
   Keeps header and hero rules in one dedicated stylesheet (no patch-style overrides). */

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* HEADER */
.site-header { position:sticky; top:0; z-index:60; background:#fff; box-shadow:0 3px 18px rgba(24,47,60,.10); }
.utility-bar { background:var(--deep); color:#e8edf0; }
.utility-inner { min-height:30px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:10px; }
.utility-email { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.utility-email:hover { color:var(--gold); }
.utility-email span { color:var(--gold); font-size:14px; line-height:1; }
.utility-message { color:#d1dcdf; font-size:10px; letter-spacing:.01em; }
.header-inner { min-height:78px; height:78px; display:flex; align-items:center; gap:17px; }
.brand-link { display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; min-width:0; color:var(--deep); }
.brand-emblem { width:67px; height:67px; flex:0 0 67px; object-fit:contain; display:block; }
.brand-wordmark { display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; }
.brand-wordmark strong { display:block; white-space:nowrap; font-size:15.5px; letter-spacing:-.065em; line-height:1.15; font-weight:850; }
.brand-wordmark small { display:block; white-space:nowrap; text-transform:uppercase; font-size:7px; font-weight:740; letter-spacing:.012em; color:#87704a; line-height:1.2; }
.header-controls { display:none; align-items:center; gap:6px; margin-left:auto; }
.mobile-donate { display:none; color:var(--deep); align-items:center; justify-content:center; width:44px; height:44px; }
.mobile-donate:hover { color:#9d7d37; }
.menu-button { display:none; align-items:center; justify-content:center; flex-direction:column; gap:5px; width:44px; height:44px; border:0; background:transparent; color:var(--deep); padding:8px; cursor:pointer; }
.menu-button span { display:block; background:currentColor; width:26px; height:2px; transition:transform .22s,opacity .22s; }
.menu-open .menu-button span:first-child { transform:translateY(7px) rotate(45deg); }
.menu-open .menu-button span:nth-child(2) { opacity:0; }
.menu-open .menu-button span:last-child { transform:translateY(-7px) rotate(-45deg); }

.main-nav { display:flex; align-items:stretch; height:100%; margin-left:auto; gap:14px; min-width:0; }
.main-nav > ul { display:flex; align-items:stretch; height:100%; list-style:none; margin:0; padding:0; }
.main-nav .nav-item { display:flex; align-items:stretch; position:relative; height:100%; }
.nav-item-heading { display:flex; height:100%; align-items:stretch; }
.main-nav .nav-link { display:flex; align-items:center; justify-content:center; height:100%; padding:0 10px; font-size:10.5px; font-weight:800; color:var(--deep); white-space:nowrap; transition:background-color .15s ease,color .15s ease; }
.main-nav .nav-link:hover, .main-nav .nav-item:hover > .nav-item-heading, .main-nav .nav-item:focus-within > .nav-item-heading,
.main-nav .nav-link[aria-current="page"] { background:var(--gold); color:#142f3e; }
.main-nav .nav-item:hover .nav-link, .main-nav .nav-item:focus-within .nav-link { color:#142f3e; }
.submenu-toggle { display:flex; align-items:center; justify-content:center; align-self:stretch; width:20px; padding:0 4px 0 0; border:0; color:var(--deep); background:transparent; cursor:pointer; margin-left:-6px; }
.submenu-toggle svg { transition:transform .18s; }
.nav-item:hover > .nav-item-heading .submenu-toggle, .nav-item:focus-within > .nav-item-heading .submenu-toggle { background:var(--gold); }
.has-submenu:hover .submenu-toggle svg, .has-submenu:focus-within .submenu-toggle svg, .has-submenu.submenu-open .submenu-toggle svg { transform:rotate(180deg); }
.main-nav .submenu { position:absolute; top:100%; left:0; z-index:5; width:270px; height:auto; display:block; list-style:none; margin:0; padding:8px; background:#fff; border-top:3px solid var(--gold); box-shadow:0 16px 38px rgba(18,41,53,.22); opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none; transition:opacity .17s ease,transform .17s ease,visibility .17s; }
.has-submenu:hover > .submenu, .has-submenu:focus-within > .submenu, .has-submenu.submenu-open > .submenu { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.submenu li { display:block; height:auto; }
.submenu a { display:block; padding:13px 14px; color:var(--deep); font-size:12px; font-weight:650; line-height:1.25; transition:background-color .15s,color .15s; }
.submenu a:hover, .submenu a:focus-visible, .submenu a[aria-current="page"] { background:#f4edda; color:#533f17; }
.nav-donate { align-self:center; justify-self:flex-end; flex:0 0 auto; min-height:42px; padding:12px 14px; font-size:10px; gap:9px; }

/* IMAGE-LED THREE-SLIDE HERO */
.hero-carousel { position:relative; isolation:isolate; overflow:hidden; height:clamp(530px,49vw,650px); min-height:530px; background:#1d3a4b; color:#fff; }
.hero-slides, .hero-slide { position:absolute; inset:0; }
.hero-slide { opacity:0; visibility:hidden; pointer-events:none; z-index:0; transition:opacity .65s ease,visibility .65s; }
.hero-slide.is-active { opacity:1; visibility:visible; pointer-events:auto; z-index:1; }
.hero-slide-image { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.94); }
.hero-slide-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(13,35,47,.92) 0%,rgba(17,40,51,.78) 29%,rgba(18,39,50,.42) 58%,rgba(18,39,50,.09) 100%); }
.hero-slide-inner { position:relative; display:flex; align-items:center; height:100%; z-index:1; }
.hero-slide-content { max-width:590px; padding:32px 0 78px; }
.hero-eyebrow { display:block; font-size:11px; letter-spacing:.16em; font-weight:800; color:#f0cd83; margin-bottom:21px; }
.hero-slide h1 { margin:0 0 18px; font-size:clamp(2.8rem,4.8vw,4.6rem); line-height:1.07; max-width:610px; font-weight:800; letter-spacing:-.057em; text-wrap:balance; }
.hero-slide-content p { margin:0 0 27px; max-width:505px; line-height:1.65; font-size:16px; color:#f0f2f0; text-wrap:pretty; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.hero-actions .button { min-height:49px; padding:14px 19px; font-size:11px; letter-spacing:.015em; gap:13px; }
.hero-secondary { color:#fff; background:rgba(13,35,47,.22); border:1px solid rgba(255,255,255,.87); }
.hero-secondary:hover { background:rgba(255,255,255,.16); }
.hero-arrow { position:absolute; z-index:4; top:50%; transform:translateY(-50%); width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid rgba(255,255,255,.74); color:#fff; background:rgba(18,42,53,.28); cursor:pointer; transition:background .18s ease,border-color .18s; }
.hero-arrow:hover { background:rgba(28,54,65,.83); border-color:#fff; }
.hero-arrow-prev { left:18px; }
.hero-arrow-next { right:18px; }
.hero-dots { position:absolute; bottom:28px; left:50%; z-index:4; transform:translateX(-50%); display:flex; gap:9px; align-items:center; }
.hero-dot { display:flex; align-items:center; justify-content:center; border:0; cursor:pointer; border-radius:12px; width:24px; height:24px; background:transparent; padding:0; }
.hero-dot span { display:block; width:9px; height:9px; border-radius:50%; border:1.5px solid #fff; background:rgba(255,255,255,.4); transition:background .2s,width .2s,transform .2s; }
.hero-dot.is-active span, .hero-dot:hover span { width:10px; height:10px; background:var(--gold); border-color:var(--gold); }

@media (max-width:1270px) {
  .header-inner { gap:10px; }
  .brand-emblem { width:59px; height:59px; flex-basis:59px; }
  .brand-wordmark strong { font-size:13.5px; }
  .brand-wordmark small { font-size:6.3px; }
  .main-nav { gap:9px; }
  .main-nav .nav-link { padding-inline:8px; font-size:10px; }
  .nav-donate { padding-inline:11px; }
}
@media (max-width:1100px) {
  .header-inner { height:72px; min-height:72px; }
  .brand-emblem { width:58px; height:58px; flex-basis:58px; }
  .brand-wordmark strong { font-size:15px; }
  .brand-wordmark small { font-size:6.8px; }
  .header-controls { display:flex; }
  .mobile-donate, .menu-button { display:flex; }
  .main-nav { display:none; height:auto; position:absolute; top:100%; left:0; right:0; margin-left:0; max-height:calc(100dvh - 102px); overflow:auto; overscroll-behavior:contain; padding:8px 20px 24px; background:#fff; box-shadow:0 21px 25px rgba(24,49,60,.17); border-top:1px solid var(--line); }
  .menu-open .main-nav { display:block; }
  .main-nav > ul { display:block; height:auto; }
  .main-nav .nav-item { display:block; height:auto; border-bottom:1px solid #e8ece9; }
  .nav-item-heading { display:flex; height:auto; min-height:49px; }
  .main-nav .nav-link { flex:1; justify-content:flex-start; font-size:13px; padding:14px 10px; }
  .main-nav .nav-link[aria-current="page"] { background:#f0e3c1; }
  .main-nav .nav-item:hover > .nav-item-heading, .main-nav .nav-item:focus-within > .nav-item-heading { background:transparent; }
  .main-nav .nav-item:hover .nav-link { color:var(--deep); }
  .submenu-toggle { flex:0 0 47px; width:47px; align-items:center; padding:0; margin:0; background:#f2f3ef; }
  .main-nav .submenu { display:none; position:static; width:auto; margin:0; padding:4px 8px 10px 19px; box-shadow:none; background:#faf9f5; border:0; opacity:1; visibility:visible; transform:none; pointer-events:auto; transition:none; }
  .has-submenu:hover > .submenu, .has-submenu:focus-within > .submenu { display:none; }
  .has-submenu.submenu-open > .submenu, .has-submenu.submenu-open:hover > .submenu { display:block; }
  .submenu a { font-size:12px; padding:12px 13px; }
  .main-nav .nav-donate { display:flex; width:100%; margin-top:18px; justify-content:center; }
  html.nav-lock { overflow:hidden; }
  .hero-carousel { height:590px; }
  .hero-slide-content { padding-left:30px; padding-right:30px; }
  .hero-arrow-prev { left:10px; }
  .hero-arrow-next { right:10px; }
}
@media (max-width:800px) {
  .hero-carousel { height:585px; }
  .hero-slide-shade { background:linear-gradient(0deg,rgba(11,35,48,.96) 0%,rgba(15,38,50,.84) 25%,rgba(19,42,52,.35) 61%,rgba(19,42,52,.08) 100%); }
  .hero-slide-inner { align-items:flex-end; }
  .hero-slide-content { max-width:680px; padding:0 16px 92px; }
  .hero-slide h1 { font-size:clamp(2.4rem,6.2vw,3.8rem); max-width:550px; }
  .hero-slide-content p { max-width:500px; font-size:14px; line-height:1.55; }
  .hero-arrow { top:40%; width:38px; height:38px; }
  .hero-dots { bottom:22px; }
}
@media (max-width:540px) {
  .utility-inner { justify-content:center; }
  .utility-message { display:none; }
  .utility-email { font-size:10px; }
  .header-inner { height:66px; min-height:66px; gap:6px; }
  .brand-link { gap:6px; }
  .brand-emblem { width:48px; height:48px; flex-basis:48px; }
  .brand-wordmark strong { font-size:clamp(12px,3.5vw,15px); letter-spacing:-.063em; }
  .brand-wordmark small { display:none; }
  .header-controls { gap:1px; }
  .mobile-donate, .menu-button { width:38px; height:43px; }
  .menu-button span { width:24px; }
  .main-nav { max-height:calc(100dvh - 96px); }
  .hero-carousel { height:575px; min-height:575px; }
  .hero-slide-content { padding:0 3px 82px; }
  .hero-eyebrow { font-size:9px; letter-spacing:.13em; margin-bottom:13px; }
  .hero-slide h1 { font-size:clamp(2.2rem,9vw,3rem); line-height:1.07; margin-bottom:13px; letter-spacing:-.047em; }
  .hero-slide-content p { font-size:13px; line-height:1.55; margin-bottom:22px; max-width:450px; }
  .hero-actions .button { min-height:45px; padding:11px 13px; font-size:10px; gap:7px; }
  .hero-arrow { width:35px; height:35px; top:38%; background:rgba(15,40,52,.4); }
  .hero-arrow-prev { left:11px; }
  .hero-arrow-next { right:11px; }
  .hero-arrow svg { width:22px; height:22px; }
}
@media (max-width:360px) {
  .brand-emblem { width:42px; height:42px; flex-basis:42px; }
  .brand-wordmark strong { font-size:11.8px; }
  .header-controls { gap:0; }
  .mobile-donate, .menu-button { width:35px; }
  .hero-carousel { height:555px; min-height:555px; }
  .hero-slide h1 { font-size:2.16rem; }
  .hero-actions { gap:7px; }
  .hero-actions .button { padding-inline:10px; font-size:9.5px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-slide, .hero-dot span, .hero-arrow, .submenu-toggle svg { transition:none!important; }
}