/*
Theme Name: Beacons Coastal
Description: Replacement site draft for Beacons Bible Church.
Version: 1.0.7
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: beacons-coastal
*/
:root{--ink:#132f3a;--deep:#102e3c;--paper:#fcfaf5;--sand:#f0e8da;--gold:#edc68e;--line:#dcd7cc;--wide:1220px}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.65 system-ui,sans-serif}a{color:inherit;text-underline-offset:.25em}a:hover{text-decoration-thickness:2px}:focus-visible{outline:3px solid #b95d20;outline-offset:4px}.hero :focus-visible,.ocean :focus-visible,footer :focus-visible{outline-color:#ffda9d}[hidden]{display:none!important}img{max-width:100%;height:auto}h1,h2,h3{font-family:Georgia,serif;font-weight:400;line-height:1.03;letter-spacing:-.035em;margin:0 0 .35em}h1{font-size:clamp(3rem,8vw,6.5rem)}h2{font-size:clamp(2.25rem,5vw,4.25rem)}h3{font-size:1.65rem}p{margin:0 0 1em;max-width:65ch}.wrap,.band{width:min(var(--wide),100% - 2.5rem);margin-inline:auto}.eyebrow{display:inline-block;font-weight:740;letter-spacing:.18em;font-size:.71rem;text-transform:uppercase}.skip{position:absolute;left:1rem;top:1rem;z-index:10;background:white;padding:.6rem;transform:translateY(-200%)}.skip:focus{transform:none}.top{border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:3}.bar{min-height:82px;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-block:.65rem}.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;font:1.45rem/1 Georgia,serif;white-space:nowrap}.brand small{display:block;font:700 .57rem/1.5 system-ui;letter-spacing:.2em;text-transform:uppercase;margin-top:.25rem}.mark{width:40px;height:40px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:22px}.nav{display:flex;align-items:center;gap:.35rem 1.2rem;flex-wrap:wrap}.nav a{font-size:.87rem;text-decoration:none;display:inline-flex;min-height:44px;align-items:center}.nav a:hover,.nav a[aria-current]{text-decoration:underline}.nav .nav-give{border:1px solid var(--ink);border-radius:2px;padding:0 .95rem}.menu{font:inherit;background:none;color:inherit;border:1px solid currentColor;padding:.5rem .8rem;cursor:pointer}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.65rem 1.2rem;background:var(--deep);color:white;border:1px solid transparent;border-radius:2px;text-decoration:none;font-weight:700;font-size:.91rem;cursor:pointer}.button:hover{text-decoration:underline}.text-link{display:inline-flex;align-items:center;min-height:44px;font-weight:650}.hero{min-height:clamp(470px,66vh,740px);display:grid;align-items:center;position:relative;isolation:isolate;background:#153644;color:white;overflow:hidden}.hero-media,.hero::after{position:absolute;inset:0;width:100%;height:100%;z-index:-2;object-fit:cover;object-position:var(--focus,50% 50%)}.hero::after{content:"";z-index:-1;background:linear-gradient(90deg,rgba(8,27,38,.86),rgba(8,27,38,.56) 55%,rgba(8,27,38,.25))}.hero video{opacity:0}.hero video.ready{opacity:1}.hero .wrap{padding-block:4.2rem}.hero h1{margin:.15em 0 .17em}.hero p{font-size:clamp(1.1rem,2vw,1.45rem);margin-bottom:1.6rem}.hero .eyebrow{color:#ffe0ae}.actions{display:flex;gap:.7rem;flex-wrap:wrap}.hero .button,.ocean .button{background:#f0d1a2;color:#132f3a}.hero .secondary{background:rgba(10,32,44,.55);color:white;border-color:#f7efe2}.hero-control{position:absolute;right:1.25rem;bottom:1rem;min-height:44px;background:#102e3c;color:white;border:1px solid white;padding:.5rem .8rem;cursor:pointer}.strip{background:var(--deep);color:white}.strip .wrap{display:grid;gap:1rem;padding-block:1.2rem}.strip strong{display:block}.strip .eyebrow{color:#f3d1a0}.strip a{justify-self:start}.band{padding-block:clamp(3rem,7vw,6rem)}.band>p:first-child{margin-bottom:.65rem}.band.sand,.band.ocean{width:100%;padding-inline:max(1.25rem,calc((100% - var(--wide))/2));background:var(--sand)}.band.ocean{background:var(--deep);color:white}.band.ocean .eyebrow{color:#f3d1a0}.intro{position:relative}.intro:after{content:'✧';position:absolute;right:6%;top:25%;font:clamp(4rem,12vw,9rem)/1 Georgia;color:#a37a3f;opacity:.36;pointer-events:none}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:1rem;margin-top:1.5rem}.cards article{padding:1.5rem;border:1px solid var(--line);border-top:3px solid #b58c57;background:#fffdf8}.cards article .eyebrow{color:#735430;margin-bottom:1.5rem}.cards article a{font-size:.9rem}.mast{background:var(--deep);color:white;padding-block:clamp(2.5rem,7vw,5rem)}.mast h1{font-size:clamp(2.6rem,7vw,5rem);margin:.15em 0 0}.mast .eyebrow{color:#f3d1a0}.prose{padding-block:3rem 5rem}.prose h2{font-size:clamp(1.8rem,4vw,2.65rem);margin-top:1.35em}.prose h2:first-child{margin-top:0}.prose .button{margin-bottom:1rem}.details{display:grid;gap:.75rem}.details address{font-style:normal}.details a{overflow-wrap:anywhere}.record{margin:1.4rem 0;padding:1.1rem;border:1px solid currentColor;max-width:650px}.record iframe{width:100%;aspect-ratio:16/9;border:0}.event{padding:1rem 0;border-bottom:1px solid var(--line);max-width:700px}.contact-form{display:grid;gap:.65rem;max-width:580px}.contact-form label{display:grid;gap:.25rem;font-weight:650}.contact-form input,.contact-form textarea{width:100%;border:1px solid #687a81;padding:.7rem;font:inherit;background:white;color:var(--ink)}.contact-form textarea{min-height:8rem}.contact-form .button{justify-self:start}.footer{background:#0d2632;color:#fff8ec;padding:2.4rem 0 1.4rem}.footer-grid{display:grid;gap:1.5rem}.footlinks{display:flex;gap:.3rem 1rem;flex-wrap:wrap}.footlinks a{min-height:44px;display:inline-flex;align-items:center}.fine{border-top:1px solid #52636a;margin-top:1.5rem;padding-top:1rem;font-size:.8rem}.form-note{font-size:.93rem}.admin-bar .skip:focus{top:3rem}
@media(min-width:700px){.strip .wrap{grid-template-columns:.75fr 1.25fr auto;align-items:center}.footer-grid{grid-template-columns:1fr 1fr 1fr}}@media(max-width:970px){.nav{width:100%;padding-bottom:.35rem}}@media(min-width:971px){.menu{display:none!important}.nav[hidden]{display:flex!important}}@media(max-width:550px){.intro:after{display:none}.hero::after{background:rgba(8,27,38,.64)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.button:disabled{cursor:not-allowed;background:#5e6d72;color:white}.contact-form [hidden]{display:none}.prose .details{margin-bottom:1.25rem}
.brand-logo{display:block;width:185px;height:auto}.intro:after{display:none}.gathering{margin:1rem 0 0}.gathering img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}.hero::after{background:linear-gradient(90deg,rgba(8,27,38,.89),rgba(8,27,38,.67) 49%,rgba(8,27,38,.30))}.hero-media{object-position:var(--focus,50% 50%)}.hero:not(:has(video.ready)) img{object-position:55% 51%}
@media(min-width:820px){.intro{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto 1fr;column-gap:clamp(2rem,7vw,7rem);align-items:start}.intro>.gathering{grid-area:1/2/5/3;margin:0}.intro>p,.intro>h2,.intro>.text-link{grid-column:1}.intro>.text-link{justify-self:start;align-self:start}.intro>.gathering img{max-height:390px}}
@media(max-width:550px){.hero::after{background:rgba(8,27,38,.70)}.brand-logo{width:156px}}
.hero>picture{position:absolute;inset:0;z-index:-3;pointer-events:none}.hero>picture>.hero-media{z-index:auto}.hero>.wrap{grid-area:1/1}

/* Keep the top of the lighthouse in frame and leave room for the welcome copy. */
.hero {
  min-height: clamp(370px, 33vw, 490px);
  background: #075369;
}
.hero .hero-media {
  object-position: 50% 0;
  filter: saturate(1.18);
}
.hero video.hero-media {
  object-position: var(--hero-x, 50%) top;
}
.hero::after {
  background: linear-gradient(90deg, #062f47 0%, rgba(6, 47, 71, .89) 24%,
    rgba(6, 47, 71, .22) 50%, transparent 73%);
}
.hero > .wrap {
  align-self: end;
  padding-block: 3rem 3.75rem;
}
.hero h1 {
  font-size: clamp(3.1rem, 5.8vw, 5.4rem);
}
.hero .eyebrow { color: #ffe0a1; }
.hero .button:not(.secondary) { background: #ffd071; color: #132e3b; }
.hero .secondary { background: #075369; }
.hero-control { background: #075369; }
.strip { background: #075369; }
.sand { background-color: #fff1d7; }
@media (max-width: 760px) {
  .hero {
    --hero-art-height: clamp(155px, 47vw, 290px);
    min-height: 0;
    align-items: start;
  }
  .hero > picture, .hero > video.hero-media {
    height: var(--hero-art-height);
  }
  .hero::after {
    height: var(--hero-art-height);
    background: linear-gradient(0deg, #075369 0%, transparent 28%);
  }
  .hero > .wrap {
    padding-block: calc(var(--hero-art-height) + .65rem) 4.75rem;
  }
  .hero h1 { font-size: clamp(2.7rem, 8.5vw, 4.25rem); }
  .hero p { margin-bottom: 1rem; }
}

.welcome-video { max-width: 960px; }
.welcome-video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: .75rem;
  background: var(--ink);
}
.welcome-links { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin-top: 1rem; }
.giving-options { display: grid; gap: 1.25rem; margin: 2rem 0; }
.giving-option { padding: 1.25rem; border: 1px solid #d1e3e5; border-radius: .85rem; background: #f4fbfa; }
.giving-option h2 { margin: 0 0 .5rem; font-size: 1.65rem; }
.giving-option img { display: block; width: min(100%, 330px); height: auto; margin-inline: auto; }
.footer-signup { margin: 1.5rem 0; max-width: 34rem; }
.footer-signup h2 { font-size: 1.65rem; margin-bottom: .45rem; }
.footer-signup label { display: block; margin-bottom: .3rem; font-weight: 700; }
.signup-controls { display: flex; flex-wrap: wrap; gap: .5rem; }
.signup-controls input { flex: 1 1 14rem; min-width: 0; padding: .75rem; border-radius: .25rem; border: 1px solid #799ba3; font: inherit; }
.signup-controls .button { background: #ffd071; color: #132e3b; }
#beacon-signup-error { color: #ffe0a1; }
#beacon-signup-error:not(:empty), #beacon-signup-status:not(:empty) { margin-top: .5rem; }
@media (min-width: 800px) { .giving-options { grid-template-columns: repeat(3,minmax(0,1fr)); } }

.hero .hero-church-name {
  margin: .4rem 0 .15rem;
  max-width: 18ch;
  color: #ffe0a1;
  font: 700 clamp(2.2rem, 4.65vw, 4.3rem)/1.05 Georgia, serif;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.hero .hero-church-name + h1 { margin-top: .1em; }
.welcome-links .button { justify-content: center; text-align: center; }
.welcome-links .welcome-primary { background: #ffd071; color: #132e3b; }
.welcome-links .welcome-secondary { background: #075369; color: #fff; border: 1px solid #075369; }
.welcome-links .button:hover { text-decoration: underline; }
.home-ministry-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 195px), 1fr));
}
.ministry-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-top: 3px solid #b58c57;
  background: #fffdf8;
  color: inherit;
  text-decoration: none;
}
.ministry-card:hover { background: #fff3dc; }
.ministry-card:hover h3, .ministry-card:focus-visible h3 { text-decoration: underline; }
.ministry-card-arrow { margin-top: auto; font-size: 1.25rem; }
@media (max-width: 760px) {
  .hero .hero-church-name { font-size: clamp(2rem, 7vw, 3.35rem); }
}
@media (max-width: 600px) {
  .welcome-links { flex-direction: column; align-items: stretch; }
}

/* Homepage controls retain a clear edge, even when filled. */
.home :is(.button, button, .nav-give) {
  border: 1px solid var(--ink);
}
.home :is(.hero .secondary, .hero-control, .welcome-secondary) {
  border-color: #f7efe2;
}
.home .welcome-secondary { border-color: var(--ink); }
.home :is(.button, .nav a, .footlinks a):hover,
.home .ministry-card:hover h3 {
  text-decoration: none;
}
.home .ministry-card:focus-visible h3 {
  text-decoration: underline;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home :is(.button, button, .nav a, .footlinks a, .brand, .ministry-card) {
    transition: transform 160ms ease-out;
  }
  .home :is(.button, button, .nav a, .footlinks a, .brand, .ministry-card):not(:disabled):hover {
    transform: translateY(-2px);
  }
}