/*
Theme Name: Grace Blue
Theme URI: https://example.com/
Author: James
Description: A fast, mobile-first block theme for churches. Deep blue, white and night tones with a gold accent. Works with any plugin (events, sermons, giving, forms).
Requires at least: 6.1
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: grace-blue
*/

:root{
  --gb-blue:#0B1F4B;
  --gb-royal:#1E3A8A;
  --gb-night:#070B17;
  --gb-gold:#D9A441;
  --gb-mist:#F3F6FC;
  --gb-slate:#5B6785;
  --gb-line:rgba(11,31,75,.14);
}

html{scroll-behavior:smooth}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--gb-gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ---------- Base ---------- */
h1,h2,h3,h4,h5,h6{color:var(--gb-blue)}
.wp-site-blocks>*+*{margin-block-start:0}
.wp-site-blocks .home-main>*{margin-block:0}
.page-main{padding-block:clamp(2.5rem,6vw,4.5rem)}

/* ---------- Header ---------- */
header.wp-block-template-part{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 1px 0 var(--gb-line)}
.admin-bar header.wp-block-template-part{top:32px}
@media (max-width:782px){.admin-bar header.wp-block-template-part{top:46px}}
.header-row{padding-block:.8rem;gap:1rem}
.header-row .wp-block-site-title a{color:var(--gb-blue);text-decoration:none;font-family:var(--wp--preset--font-family--heading)}
.header-row .wp-block-navigation a{color:var(--gb-blue);font-weight:600;text-decoration:none}
.header-row .wp-block-navigation a:hover{color:var(--gb-royal);text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--gb-gold);text-decoration-thickness:2px}
.header-cta .wp-block-button__link{padding:.6rem 1.2rem}
@media (max-width:600px){.header-cta{display:none}}

/* ---------- Sections ---------- */
.section{padding-block:clamp(3.5rem,8vw,6.5rem);padding-inline:var(--wp--style--root-padding-left,1.25rem)}
.wrap{max-width:1200px;margin-inline:auto}
.wrap>p{max-width:62ch}
.lead{font-size:clamp(1.1rem,2vw,1.3rem);color:var(--gb-slate)}
.section-mist{background:var(--gb-mist)}
.section-dark,.section-hero,.section-give{color:rgba(255,255,255,.86)}
.section-dark :is(h1,h2,h3,h4,h5,h6),
.section-hero :is(h1,h2,h3,h4,h5,h6),
.section-give :is(h1,h2,h3,h4,h5,h6){color:#fff}
.section-dark .lead,.section-hero .lead,.section-give .lead{color:rgba(255,255,255,.82)}
.section-dark{background:var(--gb-night)}
.section-give{background:var(--gb-royal);border-top:4px solid var(--gb-gold)}

/* Outline buttons work on light and dark sections */
.is-style-outline>.wp-block-button__link{background:transparent;color:var(--gb-blue);border:2px solid var(--gb-blue)}
.is-style-outline>.wp-block-button__link:hover{background:var(--gb-blue);color:#fff}
.section-dark .is-style-outline>.wp-block-button__link,
.section-hero .is-style-outline>.wp-block-button__link,
.section-give .is-style-outline>.wp-block-button__link{color:#fff;border-color:rgba(255,255,255,.7)}
.section-dark .is-style-outline>.wp-block-button__link:hover,
.section-hero .is-style-outline>.wp-block-button__link:hover,
.section-give .is-style-outline>.wp-block-button__link:hover{background:#fff;color:var(--gb-blue)}

/* ---------- Hero ---------- */
.section-hero{position:relative;overflow:hidden;background:var(--gb-blue);
  padding-block:clamp(5rem,13vw,9.5rem) clamp(7.5rem,15vw,11rem)}
.section-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 90% at 100% 0%,rgba(30,58,138,.95),rgba(30,58,138,0) 70%)}
.section-hero::after{content:"";position:absolute;right:clamp(1rem,9vw,10rem);top:50%;
  width:clamp(110px,19vw,270px);aspect-ratio:3/4;transform:translateY(-50%);opacity:.4;
  background:
   linear-gradient(var(--gb-gold),var(--gb-gold)) 50% 0/7% 100% no-repeat,
   linear-gradient(var(--gb-gold),var(--gb-gold)) 50% 30%/100% 5% no-repeat}
@media (max-width:700px){.section-hero::after{opacity:.14}}
.section-hero .wrap{position:relative;z-index:1}
.hero-title{font-size:clamp(2.6rem,7vw,5rem);line-height:1.04;max-width:16ch;letter-spacing:-.01em;margin-bottom:1.25rem}
.hero-lead{font-size:clamp(1.1rem,2vw,1.35rem);max-width:44ch;color:rgba(255,255,255,.86)}

/* ---------- Service times (overlaps hero) ---------- */
.section-strip{display:flow-root;position:relative;z-index:2;padding-block:0 clamp(3rem,6vw,4.5rem);background:#fff}
.section-strip .wrap{position:relative;z-index:3;margin-top:calc(-1 * clamp(3.25rem,6vw,4.75rem))}
.wp-block-columns.strip{gap:0;margin:0;background:#fff;border-radius:6px;
  box-shadow:0 26px 50px -26px rgba(7,11,23,.6)}
.strip .wp-block-column{padding:1.5rem 1.75rem;border-left:1px solid var(--gb-line)}
.strip .wp-block-column:first-child{border-left:0}
.strip .what{margin:0;color:var(--gb-slate);font-size:.95rem;font-weight:600}
.strip .when{margin:.15rem 0 0;font-family:var(--wp--preset--font-family--heading);font-size:1.5rem;font-weight:600;color:var(--gb-blue);line-height:1.2}
@media (max-width:781px){
  .strip .wp-block-column{border-left:0;border-top:1px solid var(--gb-line)}
  .strip .wp-block-column:first-child{border-top:0}
}

/* ---------- Photo slots (replace with real images) ---------- */
.photo-slot{min-height:420px;border-radius:6px;background:var(--gb-royal);color:rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem;font-size:.95rem}
.photo-slot p{margin:0;max-width:28ch}
.video-slot{min-height:0;aspect-ratio:16/9;background:var(--gb-blue)}
.wp-block-image img,.wp-block-post-featured-image img{border-radius:6px}
.split{gap:clamp(2rem,5vw,4.5rem);align-items:center}

/* ---------- Ministries ---------- */
.ministries{gap:2rem;margin-top:2.5rem}
.ministry{border-top:3px solid var(--gb-gold);padding-top:1rem}
.ministry h3{margin-top:0}
.ministry p{color:var(--gb-slate);margin-bottom:0}

/* ---------- Sermons / posts ---------- */
.sermon-grid .wp-block-post-template{gap:2rem}
.post-card .wp-block-post-title{margin:.5rem 0 .4rem;font-size:1.35rem}
.post-card .wp-block-post-title a{color:var(--gb-blue);text-decoration:none}
.post-card .wp-block-post-title a:hover{text-decoration:underline;text-decoration-color:var(--gb-gold);text-underline-offset:5px}
.post-card .wp-block-post-date{color:var(--gb-slate);font-size:.875rem;margin-top:.9rem}
.post-card .wp-block-post-excerpt{color:var(--gb-slate);margin:0}
.wp-block-query-pagination{margin-top:2.5rem;gap:1rem}

/* ---------- Events ---------- */
.event-list{margin-top:2rem;border-bottom:1px solid var(--gb-line)}
.event-row{display:flex;align-items:center;gap:1.75rem;padding-block:1.4rem;border-top:1px solid var(--gb-line)}
.event-row>*{margin:0!important}
.event-date{flex:0 0 4.5rem;text-align:center;background:var(--gb-blue);color:#fff;border-radius:6px;padding:.6rem .4rem}
.event-date p{margin:0!important}
.event-date .day{font-family:var(--wp--preset--font-family--heading);font-size:1.9rem;line-height:1;font-weight:600}
.event-date .month{font-size:.85rem;color:var(--gb-gold);font-weight:700}
.event-info h3{margin:0 0 .15rem;font-size:1.3rem}
.event-info p{margin:0;color:var(--gb-slate)}

/* ---------- Give / prayer ---------- */
.give-cols{gap:2.5rem;align-items:center}
.give-cols .wp-block-buttons{justify-content:flex-start}
@media (min-width:782px){.give-cols .wp-block-buttons{justify-content:flex-end}}

/* ---------- Footer ---------- */
.site-footer{background:var(--gb-night);color:rgba(255,255,255,.75);
  padding:clamp(3rem,7vw,5rem) var(--wp--style--root-padding-left,1.25rem) 1.5rem}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{color:var(--gb-gold);text-decoration:underline}
.site-footer :is(h1,h2,h3,h4,h5,h6){color:#fff;font-size:1.1rem;margin-top:0}
.site-footer p{margin-block:.4rem}
.site-footer .wp-block-site-title{font-family:var(--wp--preset--font-family--heading);font-size:1.6rem}
.footer-cols{gap:2.5rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:2.5rem;padding-top:1.25rem;font-size:.875rem}
.footer-bottom p{margin:0}

/* ---------- WhatsApp button ---------- */
.whatsapp-float{position:fixed;right:1rem;bottom:1rem;z-index:200;display:inline-flex;align-items:center;gap:.5rem;
  background:#25D366;color:#073B1B!important;padding:.7rem 1.05rem;border-radius:999px;font-weight:700;
  text-decoration:none!important;box-shadow:0 10px 26px rgba(0,0,0,.28)}
.whatsapp-float:hover{background:#3BE07B;color:#073B1B!important;text-decoration:none!important}
.whatsapp-float svg{width:22px;height:22px;fill:currentColor}