/* SteveBailey.me components — header + footer. Scoped, safe to load anywhere. */

/* ===== SteveBailey.me — hero header component =====================
   Everything is scoped under .sb-hero and prefixed sbh-, so it cannot
   collide with a WordPress theme or a plugin's stylesheet.            */
.sb-hero{
  --sb-navy:#16376B; --sb-navy-deep:#0F2650; --sb-cream:#FCF5E7; --sb-sun:#FFC24D;
  --sb-frame:1600/760;
  position:relative; width:100%; aspect-ratio:var(--sb-frame);
  background:var(--sb-navy); overflow:hidden; display:flex; align-items:center;
  font-family:'Nunito',system-ui,sans-serif;
}
.sb-hero__art{position:absolute; inset:0; z-index:1; line-height:0}
.sb-hero__art svg{width:100%; height:100%; display:block}
.sb-hero__scrim{position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg,rgba(15,38,80,.95) 0%,rgba(15,38,80,.88) 20%,
    rgba(15,38,80,.6) 36%,rgba(15,38,80,.22) 50%,rgba(15,38,80,0) 62%)}
.sb-hero__copy{position:relative; z-index:3; width:100%; padding:6% 0}
.sb-hero__inner{max-width:1140px; margin:0 auto; padding:0 28px}
.sb-hero__inner > *{max-width:50%}
.sb-hero__title{font-family:'Anton',Impact,sans-serif; font-weight:400;
  font-size:clamp(28px,4.4vw,68px); line-height:.92; margin:0; color:var(--sb-cream)}
.sb-hero__title em{font-style:normal; color:var(--sb-sun)}
.sb-hero__sub{font-size:clamp(14px,1.15vw,18px); color:rgba(252,245,231,.9); margin:14px 0 0}

/* Stacked below the narrow breakpoint. The frame is identical either side of it,
   so only the layout moves — the picture never re-zooms. */
@media(max-width:1139px){
  .sb-hero{aspect-ratio:auto; display:block}
  .sb-hero__art{position:relative; inset:auto; width:100%; aspect-ratio:var(--sb-frame)}
  .sb-hero__scrim{display:none}
  .sb-hero__copy{padding:26px 0 32px; background:var(--sb-navy)}
  .sb-hero__inner > *{max-width:100%}
}

/* ---- ambient motion ---- */
@keyframes sbh-radiate{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.075);opacity:1}}
@keyframes sbh-drift{from{transform:translateX(-300px)}to{transform:translateX(1900px)}}
@keyframes sbh-paddle{from{transform:translateX(-200px)}to{transform:translateX(1800px)}}
@keyframes sbh-bob{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-5px) rotate(1.4deg)}}
@keyframes sbh-swayA{0%,100%{transform:translateX(-12px)}50%{transform:translateX(12px)}}
@keyframes sbh-swayB{0%,100%{transform:translateX(10px)}50%{transform:translateX(-10px)}}
@keyframes sbh-shimmer{0%,100%{opacity:.5}50%{opacity:.95}}
@keyframes sbh-flick1{0%,100%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(1.17) scaleX(.92)}}
@keyframes sbh-flick2{0%,100%{transform:scaleY(1.1) scaleX(.95)}50%{transform:scaleY(.9) scaleX(1.07)}}
@keyframes sbh-ember{0%{transform:translateY(0) scale(1);opacity:.9}100%{transform:translateY(-80px) scale(.35);opacity:0}}

.sb-hero .sbh-sunGlow{transform-origin:1080px 240px; animation:sbh-radiate 7s ease-in-out infinite}
.sb-hero .sbh-cloudA{animation:sbh-drift 104s linear infinite}
.sb-hero .sbh-cloudB{animation:sbh-drift 148s linear infinite; animation-delay:-58s}
.sb-hero .sbh-cloudC{animation:sbh-drift 124s linear infinite; animation-delay:-96s}
.sb-hero .sbh-canoe{animation:sbh-paddle 88s linear infinite}
.sb-hero .sbh-canoe > g{transform-box:fill-box; transform-origin:center; animation:sbh-bob 4.6s ease-in-out infinite}
.sb-hero .sbh-waveA{animation:sbh-swayA 8s ease-in-out infinite}
.sb-hero .sbh-waveB{animation:sbh-swayB 11.5s ease-in-out infinite}
.sb-hero .sbh-waveC{animation:sbh-swayA 6.4s ease-in-out infinite}
.sb-hero .sbh-sunpath{animation:sbh-shimmer 6s ease-in-out infinite}
.sb-hero .sbh-fO{animation:sbh-flick1 1.15s ease-in-out infinite}
.sb-hero .sbh-fM{animation:sbh-flick2 .82s ease-in-out infinite}
.sb-hero .sbh-fI{animation:sbh-flick1 .64s ease-in-out infinite}
/* transform-box:fill-box is REQUIRED — without it transform-origin resolves
   against the whole viewBox and scaled shapes fly across the drawing. */
.sb-hero .sbh-e1,.sb-hero .sbh-e2,.sb-hero .sbh-e3{transform-box:fill-box; transform-origin:center}
.sb-hero .sbh-e1{animation:sbh-ember 2.6s linear infinite}
.sb-hero .sbh-e2{animation:sbh-ember 3.4s linear infinite; animation-delay:-1.4s}
.sb-hero .sbh-e3{animation:sbh-ember 3s linear infinite; animation-delay:-2.2s}

@media(prefers-reduced-motion:reduce){ .sb-hero *{animation:none!important} }


.sb-footer{
  --sb-navy-deep:#0F2650; --sb-cream:#FCF5E7; --sb-cream-2:#EFE2CC;
  --sb-sun:#FFC24D; --sb-coral:#E9633C;
  background:var(--sb-navy-deep); color:var(--sb-cream);
  font-family:'Nunito',system-ui,sans-serif; font-size:16.5px; line-height:1.62;
  padding:72px 0 34px;
}
.sb-footer *{box-sizing:border-box}
.sb-footer .sbf-wrap{max-width:1140px; margin:0 auto; padding:0 28px}
.sb-footer .sbf-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:34px}
@media(max-width:900px){.sb-footer .sbf-grid{grid-template-columns:repeat(2,1fr); gap:30px}}
@media(max-width:520px){.sb-footer .sbf-grid{grid-template-columns:1fr}}
.sb-footer h4{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:20px;
  margin:0 0 14px; color:var(--sb-cream); display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.sb-footer .sbf-pill{font-family:inherit; font-weight:800; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; background:var(--sb-coral); color:#fff; padding:4px 8px}
.sb-footer ul{list-style:none; margin:0; padding:0}
.sb-footer li{margin-bottom:9px}
.sb-footer a{color:rgba(252,245,231,.8); text-decoration:none; font-size:15px;
  border-bottom:1px solid transparent; transition:color .25s, border-color .25s}
.sb-footer a:hover,.sb-footer a:focus-visible{color:var(--sb-sun); border-bottom-color:var(--sb-sun)}
.sb-footer .sbf-note{font-size:14px; color:rgba(252,245,231,.55); margin:0 0 12px; max-width:34ch}
.sb-footer .sbf-logo{margin-top:54px; padding-top:40px;
  border-top:1px solid rgba(252,245,231,.16); text-align:center}
.sb-footer .sbf-wm{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:30px;
  color:var(--sb-cream); margin-top:10px; line-height:1}
.sb-footer .sbf-wm span{color:var(--sb-sun)}
.sb-footer .sbf-tag{font-weight:800; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(252,245,231,.55); margin-top:10px}
.sb-footer .sbf-bottom{margin-top:34px; padding-top:22px;
  border-top:1px solid rgba(252,245,231,.16); display:flex; justify-content:space-between;
  gap:14px; flex-wrap:wrap; font-size:12.5px; letter-spacing:.06em; color:rgba(252,245,231,.5)}
.sb-footer .sbf-sign{color:var(--sb-sun); font-weight:700}