/* ============================================================================
   Grace Fills the Gaps — Blocksy child styles (gracefillsthegaps.com)
   Family style of SteveBailey.me. Mirrors blog.stevebailey.me's child theme,
   with the "lane to the lake" hero. SEO is handled by the sb-seo plugin.
   PALETTE: navy #16376B · navy-deep #0F2650 · lake #2E86C8 · sky-pale #CFE9F6
            cream #FCF5E7 · cream-2 #EFE2CC · sun #FFC24D · coral #E9633C
            fern #5FA872 · pine #1F6152 · ink #1B2A3A
   TYPE: Anton (display, 400, sentence case) + Nunito (body 400 / labels 700-800)
   SECTIONS: 0 fonts · A hero · B motion · 1 wash · 2 desktop menu · 3 mobile menu
             · 4 single post/page · 5 journal roll + sidebar · 6 footer
   ============================================================================ */

/* ===== 0. SELF-HOSTED FONTS (no Google hotlink) ===== */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/anton-latin-400.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/nunito-latin.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:italic;font-weight:400 800;font-display:swap;src:url('fonts/nunito-latin-italic.woff2') format('woff2');}

/* sensible family defaults (also set Blocksy → Customize → Typography to match) */
body{font-family:'Nunito',system-ui,sans-serif;}
h1,h2,h3,.entry-title,.wp-block-heading{font-family:'Anton',Impact,sans-serif;font-weight:400;}


/* ============================================================================
   A. HERO MASTHEAD — "the lane to the lake"
   Bottom-anchored slice, so the foreground always fills; copy sits left over a
   soft cream scrim (dark navy text). Scoped under .sb-hero.
   ============================================================================ */
.sb-hero{position:relative;overflow:hidden;
  background:#CFE9F6;font-family:'Nunito',system-ui,sans-serif;}
/* full-width band locked to the scene aspect (tall, fills screen); svg fills it (whole scene) */
.sb-hero__art{position:relative;z-index:1;line-height:0;width:100%;aspect-ratio:1600/760;}
.sb-hero__art svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.sb-hero__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(95deg,rgba(15,38,80,.96) 0%,rgba(15,38,80,.9) 24%,rgba(15,38,80,.66) 42%,rgba(15,38,80,.28) 56%,rgba(15,38,80,0) 68%);}
.sb-hero__copy{position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;justify-content:center;}
.sb-hero__inner{max-width:1140px;margin:0 auto;padding:0 28px;width:100%;}
.sb-hero .eyebrow{font-weight:800;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:#FFC24D;margin:0 0 16px;display:flex;align-items:center;gap:12px;}
.sb-hero .eyebrow::before{content:"";width:34px;height:3px;background:#E9633C;border-radius:2px;display:inline-block;}
.sb-hero__title{font-family:'Anton',Impact,sans-serif;font-weight:400;color:#FCF5E7;
  font-size:clamp(44px,6.4vw,96px);line-height:.9;margin:0;max-width:15ch;text-wrap:balance;letter-spacing:.005em;}
.sb-hero__sub{margin:22px 0 0;font-size:clamp(17px,2vw,20px);color:rgba(252,245,231,.92);max-width:36ch;line-height:1.55;}
.sb-hero__sub b{color:#FFC24D;font-weight:800;}
/* below 1000px the copy drops UNDER the art (navy band) instead of overlaying it */
@media (max-width:1000px){
  .sb-hero__scrim{display:none;}
  .sb-hero__copy{position:static;background:#0F2650;padding:30px 0 34px;}
  .sb-hero .eyebrow{color:#FFC24D;}
  .sb-hero__title{color:#FCF5E7;}
  .sb-hero__sub{color:rgba(252,245,231,.92);}
  .sb-hero__sub b{color:#FFC24D;}
}

/* ===== B. AMBIENT MOTION (subtle; scoped; reduced-motion safe) ===== */
@media (prefers-reduced-motion:no-preference){
  .sb-hero .cloud1{animation:grh-drift 52s ease-in-out infinite;}
  .sb-hero .cloud2{animation:grh-drift 68s ease-in-out infinite reverse;}
  .sb-hero .shafts{animation:grh-glowo 9s ease-in-out infinite, grh-sdrift 15s ease-in-out infinite;}
  .sb-hero .shimmer{animation:grh-driftx 6s ease-in-out infinite;}
  .sb-hero .shimmer2{animation:grh-driftx2 8.5s ease-in-out infinite;}
  .sb-hero .bird{animation:grh-drift 44s ease-in-out infinite;}
  .sb-hero .grass{transform-box:fill-box;transform-origin:center bottom;animation:grh-grass 6s ease-in-out infinite;}
  .sb-hero .grass2{transform-box:fill-box;transform-origin:center bottom;animation:grh-grass 7.6s ease-in-out infinite .6s;}
}
@keyframes grh-drift{0%,100%{transform:translateX(0);}50%{transform:translateX(92px);}}
@keyframes grh-driftx{0%,100%{transform:translateX(0);}50%{transform:translateX(16px);}}
@keyframes grh-driftx2{0%,100%{transform:translateX(0);}50%{transform:translateX(-13px);}}
@keyframes grh-sdrift{0%,100%{transform:translateX(0);}50%{transform:translateX(-16px);}}
@keyframes grh-glowo{0%,100%{opacity:.7;}50%{opacity:1;}}
@keyframes grh-grass{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}
@media(prefers-reduced-motion:reduce){.sb-hero *{animation:none!important;}}


/* ============================================================================
   1. SITE-WIDE WASH + BASE (sky-pale → cream, like the hub)
   ============================================================================ */
body{
  background:linear-gradient(180deg,#CFE9F6 0%,#FCF5E7 42%) no-repeat fixed;
  background-color:#FCF5E7;
  color:#1B2A3A;
}
#main, .ct-container, .entry-content, .site-main{ background:transparent; }


/* ============================================================================
   2. NAVY DESKTOP MENU ROW (Blocksy "middle" header row)
   If your bar doesn't change, inspect the white bar and swap "middle" for its data-row.
   ============================================================================ */
#header [data-row="middle"]{ background-color:#16376B !important; }
#header [data-row="middle"] a,
#header [data-row="middle"] .ct-menu-link,
#header [data-row="middle"] .site-title a,
#header [data-row="middle"] .ct-toggle-close,
#header [data-row="middle"] svg{ color:#FCF5E7 !important; fill:#FCF5E7 !important; }
#header [data-row="middle"] a:hover,
#header [data-row="middle"] .ct-menu-link:hover,
#header [data-row="middle"] .current-menu-item > a,
#header [data-row="middle"] .current_page_item > a{ color:#FFC24D !important; }


/* ============================================================================
   3. NAVY MOBILE / OFF-CANVAS MENU
   ============================================================================ */
#header[data-device="mobile"] [data-row="middle"],
#header [data-row="mobile_offcanvas"]{ background-color:#16376B !important; }
#offcanvas, #offcanvas .ct-panel-inner, .ct-panel.ct-header{ background-color:#16376B !important; }
#offcanvas a, #offcanvas .ct-menu-link, #offcanvas .site-title a,
#header[data-device="mobile"] .site-title a{ color:#FCF5E7 !important; }
#offcanvas a:hover, #offcanvas .ct-menu-link:hover,
#offcanvas .current-menu-item > a, #offcanvas .current_page_item > a{ color:#FFC24D !important; }
#header .ct-header-trigger, #header .ct-header-trigger svg,
#header[data-device="mobile"] svg,
#offcanvas .ct-toggle-close, #offcanvas .ct-toggle-close svg, #offcanvas svg{
  color:#FCF5E7 !important; fill:#FCF5E7 !important; }


/* ============================================================================
   4. SINGLE POST / PAGE — cropped hero + article body
   Crop the hero to a short foreground strip on posts & pages (NOT the home),
   hide the headline; then style the article body as a white "paper" card.
   ============================================================================ */
:is(.single-post, .page:not(.home)) .sb-hero{ height:340px !important; }
:is(.single-post, .page:not(.home)) .sb-hero__art{ top:0 !important; bottom:auto !important; height:auto !important; }
:is(.single-post, .page:not(.home)) .sb-hero__art svg{ height:auto !important; }
:is(.single-post, .page:not(.home)) .sb-hero__copy{ display:none !important; }
@media(max-width:700px){ :is(.single-post, .page:not(.home)) .sb-hero{ height:230px !important; } }

.single-post .entry-content{
  background:#fff; border:1px solid #EFE2CC; border-top:5px solid #E9633C; border-radius:0;
  padding:34px clamp(22px,4vw,48px) 44px; max-width:760px; margin:32px auto 0;
}
.single-post .entry-title, .single-post h1.entry-title, .single-post .page-title{
  font-family:'Anton',Impact,sans-serif !important; font-weight:400 !important; line-height:1.03; color:#1B2A3A; }
.single-post .entry-content p, .single-post .entry-content li{
  font-family:'Nunito',system-ui,sans-serif; font-size:17.5px; line-height:1.7; color:#1B2A3A; }
.single-post .entry-content h2, .single-post .entry-content h3{
  font-family:'Anton',Impact,sans-serif; font-weight:400; color:#1B2A3A; }
.single-post .entry-content a{ color:#E9633C; }
.single-post .entry-content blockquote{
  border-left:4px solid #E9633C; background:#FCF5E7; padding:14px 20px; margin:24px 0; }


/* ============================================================================
   5. JOURNAL ROLL — Blocksy native blog (News layout) + sidebar
   Cards = article.entry-card inside .entries; sidebar = .ct-sidebar.
   ============================================================================ */
.entries{ gap:24px !important; }
.entries .entry-card{
  background:#fff !important; border:1px solid #EFE2CC !important; border-top:5px solid #E9633C !important;
  border-radius:0 !important; box-shadow:none !important; padding:22px !important; overflow:hidden;
  transition:transform .34s cubic-bezier(.22,.61,.36,1), box-shadow .34s cubic-bezier(.22,.61,.36,1); }
.entries .entry-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(22,55,107,.18) !important; }
.entries .entry-card:nth-child(6n+1){ border-top-color:#E9633C !important; }
.entries .entry-card:nth-child(6n+2){ border-top-color:#5FA872 !important; }
.entries .entry-card:nth-child(6n+3){ border-top-color:#16376B !important; }
.entries .entry-card:nth-child(6n+4){ border-top-color:#FFC24D !important; }
.entries .entry-card:nth-child(6n+5){ border-top-color:#2E86C8 !important; }
.entries .entry-card:nth-child(6n+6){ border-top-color:#1F6152 !important; }

.entry-card ul.entry-meta{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.entry-card ul.entry-meta:first-of-type{ margin:0 0 10px; }
.entry-card ul.entry-meta:last-of-type{ margin:14px 0 0; }
.entry-card .meta-categories a{
  display:inline-block; background:#E9633C; color:#FCF5E7 !important; font-family:'Nunito',sans-serif;
  font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:10.5px;
  padding:4px 9px; border-radius:2px; text-decoration:none; }
.entry-card .meta-categories a:hover{ background:#16376B; }
.entry-card .entry-title{
  font-family:'Anton',Impact,sans-serif !important; font-weight:400 !important;
  font-size:22px !important; line-height:1.08 !important; margin:0 0 14px !important; }
.entry-card .entry-title a{ color:#1B2A3A !important; text-decoration:none; }
.entry-card .entry-title a:hover{ color:#16376B !important; }
.entry-card .ct-media-container{ margin:0 0 16px !important; }
.entry-card .ct-media-container img{ width:100%; display:block; object-fit:cover; }
.entry-card .entry-excerpt p{
  font-family:'Nunito',system-ui,sans-serif; color:rgba(27,42,58,.62); font-size:15px; line-height:1.6; margin:0; }
.entry-card .meta-author, .entry-card .meta-date, .entry-card .meta-author a{
  font-family:'Nunito',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  font-size:10.5px; color:rgba(27,42,58,.55) !important; text-decoration:none; }

/* sidebar */
.ct-sidebar .ct-widget{ margin-bottom:34px; }
.ct-sidebar .ct-widget h2, .ct-sidebar .wp-block-heading, .ct-sidebar .widget-title{
  font-family:'Anton',Impact,sans-serif !important; font-weight:400 !important; font-size:20px !important;
  color:#1B2A3A !important; margin:0 0 16px !important; padding-bottom:8px !important;
  border-bottom:2px solid #E9633C !important; }
.ct-sidebar .wp-block-search__input{ border:1px solid #EFE2CC !important; border-radius:0 !important; background:#fff; }
.ct-sidebar .wp-block-search__button{ background:#E9633C !important; color:#fff !important; border:0 !important; border-radius:0 !important; }
.ct-sidebar .wp-block-latest-posts__list{ list-style:none; margin:0; padding:0; }
.ct-sidebar .wp-block-latest-posts__list li{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.ct-sidebar .wp-block-latest-posts__featured-image img{ width:56px; height:56px; object-fit:cover; display:block; }
.ct-sidebar .wp-block-latest-posts__post-title{
  font-family:'Nunito',sans-serif; font-weight:800; font-size:14px; color:#1B2A3A !important;
  text-decoration:none; line-height:1.25; }
.ct-sidebar .wp-block-latest-posts__post-date, .ct-sidebar .wp-block-latest-posts time{ font-size:11px; color:rgba(27,42,58,.55); }
.ct-sidebar .wp-block-categories li{ margin-bottom:8px; list-style:none; }
.ct-sidebar .wp-block-categories a{ color:#1B2A3A; text-decoration:none; }
.ct-sidebar .wp-block-categories a:hover{ color:#E9633C; }
.ct-sidebar .wp-block-quote{ background:#16376B; border:0 !important; border-left:5px solid #FFC24D !important; padding:22px 24px !important; margin:0; }
.ct-sidebar .wp-block-quote p{ font-family:'Nunito',sans-serif; color:#FCF5E7; font-size:16px; }
.ct-sidebar .wp-block-quote cite, .ct-sidebar .wp-block-quote .wp-block-quote__citation{ color:#FFC24D !important; font-style:normal; }
.ct-pagination .page-numbers{ border-radius:0 !important; }
.ct-pagination .page-numbers.current, .ct-pagination a.page-numbers:hover{ background:#E9633C !important; color:#fff !important; }


/* ============================================================================
   6. FOOTER (family footer — connective tissue)
   ============================================================================ */
.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 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-mark{width:54px; height:54px; margin:0 auto 14px; line-height:0}
.sb-footer .sbf-mark svg{width:100%; height:100%; display:block}
.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}