/*
Theme Name: Enchanted Forest Keep
Theme URI: https://enchantedforestkeep.com
Author: The Keepers
Description: Custom brand theme for Enchanted Forest Keep — parchment and canopy bands, Cormorant/Alegreya type, twig separators. Content is managed as native blocks; the theme carries design only.
Version: 1.0.6
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: enchanted-forest-keep
*/

/* ============ TOKENS ============ */
:root{
  --ink:#202b23; --forest:#33473a; --parchment:#f3ecdb; --kraft:#c8a97e;
  --gold:#c3922e; --oxblood:#6e2f28;
  --parchment-deep:#eadfc6;
  --font-display:"Cormorant Garamond",Georgia,serif;
  --font-body:"Alegreya",Georgia,serif;
  --measure:66rem; --wide:1180px;
}

/* ============ BASE ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{margin:0;background:var(--parchment);color:var(--ink);font-family:var(--font-body);font-size:1.125rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--oxblood);text-decoration-color:rgba(110,47,40,.35);text-underline-offset:3px;transition:color .2s ease}
a:hover{color:var(--gold)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.12;color:inherit;margin:0 0 .5em}
h1{font-size:clamp(2.6rem,6vw,4.2rem);letter-spacing:.01em}
h2{font-size:clamp(1.9rem,4vw,2.7rem)}
h3{font-size:clamp(1.35rem,2.6vw,1.7rem)}
p{margin:0 0 1.1em}

/* eyebrow label — add class "efk-eyebrow" to a paragraph block */
.efk-eyebrow{font-family:var(--font-body);font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:.9em}

/* ============ LAYOUT / BANDS ============ */
.site-content{display:block}
.entry-content>*{max-width:var(--measure);margin-left:auto;margin-right:auto;padding-left:1.25rem;padding-right:1.25rem}
.entry-content>.alignwide{max-width:var(--wide)}
.entry-content>.alignfull{max-width:none;padding-left:0;padding-right:0}

/* Band groups — add class to a full-width Group block */
.efk-band{padding:5rem 1.25rem}
/* 1.0.2 ROOT-CAUSE FIX: WP renders each Group's content inside a legacy
   .wp-block-group__inner-container wrapper. The old `.efk-band>*` rule was
   clamping that wrapper itself to reading width, trapping everything inside
   it — including alignwide rows. Exclude the wrapper from the clamp and let
   it span the band; WP's own emitted layout rules (from the block packages'
   contentSize/wideSize) then size the actual content correctly. */
/* Override WP's per-block contentSize so ONE variable (--measure) governs prose width
   site-wide. Targets top-level band content at both markup levels (direct child, and
   classic-theme inner-container child); excludes alignwide/alignfull so images and card
   grids keep --wide. !important is required to beat WP's inline constrained-layout CSS. */
.efk-band>:where(:not(.wp-block-group__inner-container):not(.alignwide):not(.alignfull)),.efk-band>.wp-block-group__inner-container>:where(:not(.alignwide):not(.alignfull)){max-width:var(--measure)!important;margin-left:auto!important;margin-right:auto!important}
.efk-band>.wp-block-group__inner-container{max-width:none;margin:0;padding:0}
.efk-band>.alignwide,.efk-band .wp-block-group__inner-container>.alignwide{max-width:var(--wide)}

/* Fallback widths for band content in case a package omits layout sizes */
.efk-band .alignwide.alignwide{max-width:var(--wide);margin-left:auto;margin-right:auto}
.efk-band .alignfull.alignfull{max-width:none}
.entry-content .alignwide.alignwide{max-width:var(--wide)}
.efk-band--dark{background:var(--ink);color:var(--parchment)}
.efk-band--dark a{color:var(--kraft)}
.efk-band--dark a:hover{color:var(--gold)}
.efk-band--dark .efk-eyebrow{color:var(--kraft)}
.efk-band--deep{background:var(--parchment-deep)}
.efk-band--forest{background:var(--forest);color:var(--parchment)}
.efk-band--forest a{color:var(--kraft)}

/* ============ HERO ============ */
.efk-hero{position:relative;min-height:72vh;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--parchment);background:var(--ink);overflow:hidden}
.efk-hero .efk-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;pointer-events:none}
.efk-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(32,43,35,.15) 0%,rgba(32,43,35,.72) 100%)}
/* keep hero/cover overlays click-through so buttons are reachable */
.efk-hero .wp-block-cover__background,.efk-hero .wp-block-cover__image-background{pointer-events:none}
.efk-hero .wp-block-cover__inner-container,.efk-hero-inner{position:relative;z-index:2}
.efk-hero-inner{position:relative;z-index:1;max-width:52rem;padding:6rem 1.5rem}
.efk-hero-inner h1{margin-bottom:.35em}
.efk-hero-sub{font-family:var(--font-display);font-size:clamp(1.2rem,2.4vw,1.55rem);font-style:italic;color:var(--kraft);margin-bottom:1.4em}

/* ============ BUTTONS (core/button) ============ */
.wp-block-button__link,.efk-button{background:transparent;border:1.5px solid var(--kraft);color:var(--kraft);border-radius:2px;padding:.85em 1.9em;font-family:var(--font-body);font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;transition:all .25s ease;display:inline-block}
.wp-block-button__link:hover,.efk-button:hover{background:var(--kraft);color:var(--ink)}
.is-style-fill .wp-block-button__link,.efk-button--solid{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.is-style-fill .wp-block-button__link:hover,.efk-button--solid:hover{background:var(--kraft);border-color:var(--kraft)}
.entry-content .wp-block-buttons{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}

/* light bands: darken button ink */
.efk-band:not(.efk-band--dark):not(.efk-band--forest) .wp-block-button__link{border-color:var(--forest);color:var(--forest)}
.efk-band:not(.efk-band--dark):not(.efk-band--forest) .wp-block-button__link:hover{background:var(--forest);color:var(--parchment)}

/* ============ TWIG SEPARATOR (core/separator) ============ */
hr.wp-block-separator,hr{border:0;height:34px;margin:3.2rem auto;max-width:260px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 34'%3E%3Cg fill='none' stroke='%23c8a97e' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 18 C 60 14, 120 22, 252 16'/%3E%3Cpath d='M56 17 L 44 8'/%3E%3Cpath d='M118 19 L 128 28'/%3E%3Cpath d='M180 16 L 172 7'/%3E%3Cpath d='M44 8 l -6 -3 M44 8 l -2 -7'/%3E%3Cpath d='M172 7 l -6 -2 M172 7 l -1 -6'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.efk-band--dark hr,.efk-band--forest hr{filter:brightness(1.15)}

/* ============ QUOTES (origin story etc.) ============ */
blockquote,.wp-block-quote{border:0;margin:2.2rem auto;padding:0 1rem;font-family:var(--font-display);font-size:1.22em;font-style:italic;color:inherit;text-align:center}
.wp-block-quote cite{font-family:var(--font-body);font-size:.75em;font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* drop cap for the origin story: add class "efk-dropcap" to first paragraph */
.efk-dropcap::first-letter{font-family:var(--font-display);font-size:3.4em;line-height:.8;float:left;padding:.08em .12em 0 0;color:var(--gold)}

/* ============ CARDS (columns) ============ */
.efk-cards .wp-block-column{background:rgba(255,255,255,.42);border:1px solid rgba(32,43,35,.12);border-radius:3px;padding:1.4rem 1.4rem 1.6rem;transition:transform .25s ease,box-shadow .25s ease}
.efk-band--dark .efk-cards .wp-block-column,.efk-band--forest .efk-cards .wp-block-column{background:rgba(243,236,219,.06);border-color:rgba(243,236,219,.18)}
.efk-cards .wp-block-column:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(32,43,35,.14)}
.efk-cards h3{margin-top:.9rem}
.efk-cards img{border-radius:2px}
.efk-species{font-style:italic;color:var(--forest);font-size:.95em}
.efk-band--dark .efk-species{color:var(--kraft)}

/* ============ GALLERY ============ */
.wp-block-gallery{gap:.8rem}
.wp-block-gallery img{border-radius:2px}
.wp-block-image figcaption{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;text-align:center;color:var(--forest);opacity:.85}
.efk-band--dark .wp-block-image figcaption{color:var(--kraft)}

/* ============ HEADER ============ */
.site-header{background:var(--ink);color:var(--parchment);padding:1.1rem 1.5rem;position:relative;border-bottom:1px solid rgba(200,169,126,.25)}
.site-header-inner{max-width:var(--wide);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.site-branding{display:flex;align-items:center;gap:.9rem}
.efk-badge-link{display:inline-flex;line-height:0;flex:none}
.site-branding img{max-height:52px;width:auto;display:block}
.site-title{font-family:var(--font-display);font-weight:600;font-size:1.55rem;margin:0;letter-spacing:.02em}
.site-title a{color:var(--parchment);text-decoration:none}
.site-title a:hover{color:var(--kraft)}
.site-nav ul{list-style:none;display:flex;gap:1.8rem;margin:0;padding:0;flex-wrap:wrap}
.site-nav a{color:var(--parchment);text-decoration:none;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase}
.site-nav a:hover{color:var(--gold)}
.site-nav .current-menu-item>a,.site-nav .current_page_item>a{color:var(--kraft)}

/* ============ FOOTER ============ */
.site-footer{background:var(--ink);color:var(--parchment);text-align:center;padding:4rem 1.5rem 2.5rem;border-top:1px solid rgba(200,169,126,.25)}
.site-footer .efk-badge-link{margin:0 auto 1.1rem}
.site-footer img{margin:0 auto 1.1rem;max-height:96px;width:auto}
.footer-tagline{font-family:var(--font-display);font-style:italic;font-size:1.15rem;color:var(--kraft);margin-bottom:1.6rem}
.footer-nav ul{list-style:none;display:flex;gap:1.6rem;justify-content:center;margin:0 0 1.6rem;padding:0;flex-wrap:wrap}
.footer-nav a{color:var(--parchment);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none}
.footer-nav a:hover{color:var(--gold)}
.footer-small{font-size:.82rem;opacity:.65;max-width:44rem;margin:0 auto}

/* ============ FIELD NOTES (post lists) ============ */
.efk-postlist{max-width:var(--wide);margin:0 auto;padding:4rem 1.25rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem}
.efk-postcard{background:rgba(255,255,255,.42);border:1px solid rgba(32,43,35,.12);border-radius:3px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.efk-postcard:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(32,43,35,.14)}
.efk-postcard img{width:100%;height:220px;object-fit:cover}
.efk-postcard-body{padding:1.3rem 1.4rem 1.6rem}
.efk-postmeta{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.efk-postcard h2{font-size:1.45rem;margin-bottom:.4rem}
.efk-postcard h2 a{color:var(--ink);text-decoration:none}
.efk-postcard h2 a:hover{color:var(--oxblood)}
.page-header{max-width:var(--measure);margin:0 auto;padding:4.5rem 1.25rem 0;text-align:center}

/* single post (1.0.6) — post CONTENT renders on the same width system as pages
   (.entry-content>* → --measure prose, alignwide → --wide, centered). Only the
   header/footer chrome is post-specific, so a Herbal entry pastes as flat blocks
   with NO wrapper group and matches the pages exactly. */
.efk-single{margin:0 auto;padding:2.5rem 0 4rem}
.efk-single-header{max-width:var(--measure);margin:0 auto;padding:1.5rem 1.25rem 2.5rem;text-align:center}
.efk-single-header .efk-postmeta{margin-bottom:.9rem}
.efk-single-header h1{margin:0}
.efk-single .post-thumbnail{max-width:var(--wide);margin:0 auto 1.5rem;padding:0 1.25rem}
.efk-single .post-thumbnail img{border-radius:3px;margin:0 auto}
.efk-single-footer{max-width:var(--measure);margin:2.5rem auto 0;padding:0 1.25rem}
.efk-single-footer .efk-backlink{text-align:center;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase}

/* page title (plain pages) */
.entry-header{padding:4.5rem 1.25rem 1rem;text-align:center}

/* ============ RESPONSIVE ============ */
@media(max-width:720px){
  .efk-band{padding:3.4rem 1.1rem}
  .efk-hero{min-height:62vh}
  .site-header-inner{justify-content:center;text-align:center}
  .entry-content .wp-block-columns{gap:1.2rem}
}