/*
Theme Name: Clover Lane
Theme URI: https://www.cloverlanebees.com
Author: Clover Lane
Description: A warm, hand-crafted theme for Clover Lane Bees — a small apiary selling bees, honey, wax, and beekeeping classes. Honey-gold and orchard-green palette with an EB Garamond / Lato type pairing, built to match the Clover Lane badge logos. Activating the theme sets up the Home, Honey, Bees, Wax, Classes, and Contact pages and the main menu automatically.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clover-lane
*/

:root{
  --cream:#FBF3E4; --cream-2:#F4EAD6; --paper:#FFFCF6;
  --honey:#E3982F; --honey-dark:#B9762A; --amber:#E8A33D;
  --brown:#3D2B1F; --brown-2:#5F3E22; --brown-soft:#6B4A2E;
  --green:#5C8C47; --green-dark:#4C7A3C; --green-light:#79A85C;
  --crab:#CF4438; --ink:#2B2018; --muted:#7a6a58;
  --serif:'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Lato','Helvetica Neue', Arial, sans-serif;
  --wrap:1120px; --r:14px;
  --shadow:0 1px 2px rgba(61,43,31,.06), 0 8px 26px rgba(61,43,31,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
a{color:var(--honey-dark); text-decoration:none}
a:hover{color:var(--brown)}
h1,h2,h3,h4{font-family:var(--serif); color:var(--brown); font-weight:600; line-height:1.15; margin:0 0 .5em}
h1{font-size:clamp(2.4rem,5vw,3.6rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
h3{font-size:1.4rem}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.eyebrow{font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em;
  font-size:.74rem; font-weight:700; color:var(--honey-dark); margin:0 0 .9rem}
.lead{font-size:1.18rem; color:var(--brown-2)}
.center{text-align:center}

/* Buttons */
.btn{display:inline-block; font-family:var(--sans); font-weight:700; font-size:.95rem;
  letter-spacing:.02em; padding:.85em 1.6em; border-radius:999px; cursor:pointer;
  border:2px solid var(--honey-dark); transition:transform .15s ease, background .15s ease, color .15s ease}
.btn-primary{background:var(--honey); color:var(--brown)}
.btn-primary:hover{background:var(--honey-dark); color:var(--cream); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--brown)}
.btn-ghost:hover{background:var(--brown); color:var(--cream); border-color:var(--brown); transform:translateY(-2px)}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:rgba(251,243,228,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid rgba(185,118,42,.25)}
.site-header .bar{display:flex; align-items:center; gap:18px; padding:12px 24px;
  max-width:var(--wrap); margin:0 auto}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto}
.brand img{height:54px; width:auto}
.brand .name{font-family:var(--serif); font-weight:600; color:var(--brown);
  font-size:1.35rem; line-height:1.05}
.brand .name small{display:block; font-family:var(--sans); font-weight:700;
  text-transform:uppercase; letter-spacing:.2em; font-size:.6rem; color:var(--honey-dark)}
.nav{display:flex; align-items:center; flex-wrap:wrap}
.nav > a,.nav > .btn{margin:2px}
.nav a{font-family:var(--sans); font-weight:700; font-size:.86rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--brown); padding:.55em .8em; border-radius:8px; position:relative}
.nav a::after{content:""; position:absolute; left:.8em; right:.8em; bottom:.3em; height:2px;
  background:var(--honey); transform:scaleX(0); transform-origin:left; transition:transform .18s ease}
.nav a:hover::after,.nav a.current::after{transform:scaleX(1)}
.nav .btn{text-transform:uppercase; padding:.55em 1.1em; color:var(--brown)}
.nav .btn::after{display:none}
.menu-toggle{display:none; background:none; border:0; color:var(--brown); cursor:pointer; padding:8px}

/* Hero */
.hero{padding:72px 0 60px; position:relative; overflow:hidden}
.hero .wrap{display:flex; flex-wrap:wrap; align-items:center; margin:0 -24px}
.hero .wrap > *{margin:0 24px; flex:1 1 360px}
.hero-text{flex:1 1 460px}
.hero.solo .wrap{display:block; max-width:780px; text-align:center; margin-left:auto; margin-right:auto}
.hero.solo .eyebrow{margin-left:auto; margin-right:auto}
.hero-badge img{margin:0 auto; width:min(360px,80%); filter:drop-shadow(0 12px 30px rgba(61,43,31,.18))}
.hero h1{margin-bottom:.3em}
.hero .lead{max-width:46ch}
.hero-cta{display:flex; flex-wrap:wrap; margin-top:1.4rem}
.hero-cta > *{margin:0 14px 8px 0}
.hero.solo .hero-cta{justify-content:center}

/* Honeycomb divider */
.comb{height:26px; background-color:var(--honey);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='26' viewBox='0 0 56 26'%3E%3Cpath fill='%23000' d='M14 0l14 8v10l-14 8L0 18V8z' opacity='.0'/%3E%3Cg fill='%23000'%3E%3Cpath d='M14 2l12 7v8l-12 7-12-7V9z'/%3E%3Cpath d='M42 2l12 7v8l-12 7-12-7V9z'/%3E%3C/g%3E%3C/svg%3E") repeat-x center/56px 26px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='26' viewBox='0 0 56 26'%3E%3Cg fill='%23000'%3E%3Cpath d='M14 2l12 7v8l-12 7-12-7V9z'/%3E%3Cpath d='M42 2l12 7v8l-12 7-12-7V9z'/%3E%3C/g%3E%3C/svg%3E") repeat-x center/56px 26px;
  opacity:.5; margin:0}

/* Sections */
.section{padding:64px 0}
.section.tint{background:var(--cream-2)}
.section.paper{background:var(--paper)}
.section-head{max-width:680px; margin:0 0 36px}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}

/* Feature grid (home) */
.features{display:flex; flex-wrap:wrap; margin:-11px}
.feature{background:var(--paper); border:1px solid rgba(185,118,42,.22); border-radius:var(--r);
  padding:26px 22px 24px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column; flex:1 1 210px; margin:11px}
.feature:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(61,43,31,.14)}
.feature .hex{width:48px; height:48px; margin-bottom:14px}
.feature h3{margin-bottom:.3em}
.feature p{font-size:.98rem; color:var(--brown-2); flex:1}
.feature .more{font-weight:700; font-size:.84rem; text-transform:uppercase; letter-spacing:.08em; margin-top:10px}

/* Two-column specimen rows */
.rows{display:block}
.row{display:flex; flex-wrap:wrap; align-items:center; margin:0 -23px 54px}
.row > *{flex:1 1 320px; margin:0 23px}
.row.flip .media{order:2}
.media{background:var(--paper); border:1px solid rgba(185,118,42,.22); border-radius:var(--r);
  padding:30px; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center}
.media img{width:min(320px,86%)}

/* Cards / lists */
.cards{display:flex; flex-wrap:wrap; margin:-11px}
.card{background:var(--paper); border:1px solid rgba(185,118,42,.22); border-radius:var(--r);
  padding:26px 24px; box-shadow:var(--shadow); flex:1 1 280px; margin:11px}
.card .price{font-family:var(--serif); font-size:1.7rem; color:var(--honey-dark); font-weight:600}
.card ul{margin:.6rem 0 0; padding:0; list-style:none}
.card li{padding-left:26px; position:relative; margin:.4rem 0; font-size:.97rem; color:var(--brown-2)}
.card li::before{content:""; position:absolute; left:0; top:.45em; width:14px; height:14px;
  background:var(--honey);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath fill='%23000' d='M12 0l10.4 6v12L12 24 1.6 18V6z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath fill='%23000' d='M12 0l10.4 6v12L12 24 1.6 18V6z'/%3E%3C/svg%3E") no-repeat center/contain}
.tag{display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:var(--green-dark); background:rgba(92,140,71,.14);
  padding:.3em .7em; border-radius:999px; margin-bottom:10px}
.note{font-size:.92rem; color:var(--muted)}

/* Class schedule list */
.schedule{display:block}
.slot{display:flex; align-items:center; background:var(--paper);
  border:1px solid rgba(185,118,42,.22); border-radius:var(--r); padding:18px 22px; box-shadow:var(--shadow); margin-bottom:14px}
.slot > *{margin-right:20px}
.slot > *:last-child{margin-right:0}
.slot .when{font-family:var(--serif); font-weight:600; color:var(--brown); min-width:120px}
.slot .what{flex:1}
.slot .what strong{display:block; font-size:1.05rem}
.slot .what span{font-size:.92rem; color:var(--brown-2)}

/* CTA band */
.cta-band{background:var(--brown); color:var(--cream); text-align:center; padding:60px 0}
.cta-band h2{color:var(--cream)}
.cta-band p{color:#e9dcc6; max-width:52ch; margin:0 auto 1.4rem}
.cta-band .btn-primary{border-color:var(--amber)}

/* Story strip */
.story{display:flex; flex-wrap:wrap; align-items:center; margin:0 -23px}
.story > *{flex:1 1 320px; margin:0 23px}
.story .media img{width:min(300px,80%)}

/* Contact */
.contact-grid{display:flex; flex-wrap:wrap; margin:0 -20px}
.contact-grid > *{flex:1 1 320px; margin:0 20px 20px}
.field{margin-bottom:16px}
.field label{display:block; font-weight:700; font-size:.85rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--brown); margin-bottom:6px}
.field input,.field textarea{width:100%; font-family:var(--sans); font-size:1rem;
  padding:12px 14px; border:1px solid rgba(107,74,46,.35); border-radius:10px; background:var(--paper); color:var(--ink)}
.field textarea{min-height:130px; resize:vertical}
.info-line{display:flex; margin:.4rem 0; color:var(--brown-2)}
.info-line b{color:var(--brown); margin-right:12px; min-width:78px}

/* Footer */
.site-footer{background:var(--brown); color:#e9dcc6; padding:54px 0 30px; margin-top:0}
.foot-grid{display:flex; flex-wrap:wrap; align-items:flex-start; margin:0 -18px}
.foot-grid > *{flex:1 1 200px; margin:0 18px 18px}
.foot-grid > *:first-child{flex:1 1 300px}
.site-footer .brand .name{color:var(--cream)}
.site-footer img{height:64px}
.site-footer h4{color:var(--amber); font-family:var(--sans); text-transform:uppercase;
  letter-spacing:.16em; font-size:.78rem; margin:0 0 14px}
.site-footer a{color:#e9dcc6}
.site-footer a:hover{color:var(--amber)}
.site-footer ul{list-style:none; margin:0; padding:0}
.site-footer li{margin:.35rem 0}
.foot-bottom{border-top:1px solid rgba(233,220,198,.18); margin-top:36px; padding-top:20px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.85rem; color:#c9b89c}

/* Page intro for inner pages */
.page-hero{padding:64px 0 10px; text-align:center}
.page-hero .lead{max-width:60ch; margin-left:auto; margin-right:auto}

/* Accessibility */
a:focus-visible,.btn:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--green-dark); outline-offset:2px}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:12px; top:12px; background:var(--paper); padding:10px 16px; border-radius:8px; z-index:100}

/* Responsive */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; text-align:center}
  .hero-badge{order:-1}
  .hero .lead{margin-left:auto; margin-right:auto}
  .hero-cta{justify-content:center}
  .features{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .row,.row.flip .media,.story,.contact-grid{grid-template-columns:1fr}
  .row.flip .media{order:0}
  .story .media,.row .media{order:-1}
}
@media (max-width:680px){
  .menu-toggle{display:block}
  .nav{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    align-items:stretch; background:var(--cream); border-bottom:1px solid rgba(185,118,42,.3); padding:10px 18px 18px}
  .nav.open{display:flex}
  .nav a{padding:.7em .4em}
  .features{grid-template-columns:1fr}
  .slot{flex-direction:column; align-items:flex-start; gap:6px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important; transition:none !important}
}

/* WordPress nav menu list items */
.nav ul{list-style:none; margin:0; padding:0; display:flex; align-items:center; flex-wrap:wrap}
.nav li{list-style:none}
.nav .current-menu-item > a::after,.nav .current_page_item > a::after{transform:scaleX(1)}
@media (max-width:680px){ .nav ul{flex-direction:column; align-items:stretch; width:100%} }

/* WordPress core helpers */
.wp-block-image img{border-radius:var(--r)}
.aligncenter{margin-left:auto; margin-right:auto}
.screen-reader-text{position:absolute; left:-9999px}