/*
Theme Name: Farmly
Theme URI: http://localhost/farmingug
Author: FarmingUG
Description: Classic PHP theme for FarmingUG, ported from the FreshMart design. Built for a large hierarchical library of long-form Ugandan farming guides rather than for commerce: the product, cart and checkout furniture of the source design has been removed and its category, promo and deal blocks carry content instead.
Version: 1.2.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: farmly
Tags: custom-menu, featured-images, translation-ready, two-columns
*/
:root{
  --green:#1f6f1f; --green-d:#185c18; --green-dd:#123f12; --green-l:#e9f5e3; --green-xl:#f4faf0;
  --lime:#8cc63f; --yellow:#fbc524; --ink:#141a14; --text:#3b453b; --muted:#6b756b;
  --line:#e3e8e0; --bg:#f6f8f4; --white:#fff; --radius:12px;
  --shadow:0 4px 18px rgba(20,40,20,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--text);background:var(--bg);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;cursor:pointer;border:0;background:none}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* Top bar */
.topbar{background:var(--green-dd);color:#e7f1e3;font-size:12.5px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:40px;gap:16px}
.topbar .tb-item{display:flex;align-items:center;gap:7px;white-space:nowrap}
.topbar svg.i{width:15px;height:15px}
.topbar .social{display:flex;gap:14px}
.topbar .social a{opacity:.9}.topbar .social a:hover{opacity:1}

/* Header */
header.site{background:#fff;position:sticky;top:0;z-index:50;transition:box-shadow .2s}
header.site.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.08)}
/* One row: logo, navigation, search. The navigation takes the free space between the fixed
   logo and the fixed search box, and never wraps - see nav.main below. */
.hdr-main{display:flex;align-items:center;gap:26px;height:74px}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{width:48px;height:44px;color:var(--green)}
.logo-name{font-size:30px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.5px}
.logo-name span{color:var(--green)}
.logo-tag{font-size:12px;font-weight:600;color:var(--ink);margin-top:4px}
/* An uploaded wordmark replaces the drawn mark and the typeset name, so it carries the brand on its
   own. Height is capped so a large upload cannot grow the header, and width is left to the aspect
   ratio rather than fixed, because the logo file may be replaced with one of different proportions. */
.logo--image{gap:0}
.logo-img{display:block;height:38px;width:auto;max-width:168px;flex:0 0 auto}
.search{flex:0 0 auto;width:286px;display:flex;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;height:42px}
.search input{flex:1;border:0;padding:0 18px;font:inherit;font-size:13.5px;outline:none;color:var(--ink)}
.search select{border:0;border-left:1px solid var(--line);padding:0 14px;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink);background:#fff;outline:none;cursor:pointer}
.search button{width:56px;background:var(--green);color:#fff;display:grid;place-items:center}
.search button:hover{background:var(--green-d)}
.hdr-actions{display:flex;align-items:center;gap:30px;margin-left:auto}
.hdr-act{display:flex;align-items:center;gap:12px;font-size:13px;line-height:1.35;color:var(--ink)}
.hdr-act svg.i{width:28px;height:28px}
.hdr-act b{font-weight:600;display:block}
.cart-ico{position:relative}
.cart-ico .count{position:absolute;top:-6px;right:-8px;background:var(--green);color:#fff;font-size:10.5px;font-weight:600;border-radius:50%;width:18px;height:18px;display:grid;place-items:center}
/* The navigation is the elastic element of the row. min-width:0 lets it shrink rather than
   push the search box off the end, and nowrap keeps every label on one line. */
nav.main{display:flex;height:100%;flex:1 1 auto;min-width:0;justify-content:flex-start}
nav.main a{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:500;color:var(--ink);position:relative;height:100%}
nav.main a.active{color:var(--green);font-weight:600}
nav.main a.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--green);border-radius:2px}
nav.main a:hover{color:var(--green)}
nav.main svg.i{width:14px;height:14px;stroke-width:2.4}
.dd{position:relative;height:100%;display:flex}
.dd-menu{position:absolute;top:100%;left:-16px;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.12);border-radius:10px;padding:10px;min-width:220px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;z-index:60}
.dd:hover .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu a{display:block;height:auto;padding:9px 12px;border-radius:6px;font-size:14px}
.dd-menu a:hover{background:var(--green-xl)}
.flash{margin-left:auto;white-space:nowrap;display:flex;align-items:center;gap:8px;background:var(--green-l);color:var(--green);font-weight:700;font-size:13.5px;padding:10px 16px;border-radius:6px;text-transform:uppercase;letter-spacing:.2px}
.flash svg.i{width:17px;height:17px;fill:var(--green)}
.burger{display:none;margin-left:auto;color:var(--ink);flex:0 0 auto}
.burger svg.i{width:28px;height:28px}

/* Hero */
.hero{background:#f6f9f2;overflow:hidden;position:relative}
.hero .container{display:grid;grid-template-columns:1fr 1.02fr;align-items:center;min-height:490px;position:relative}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--green);font-weight:700;font-size:14.5px;text-transform:uppercase;letter-spacing:.2px}
.eyebrow svg{width:28px;height:22px}
.hero h1{font-size:64px;line-height:1.08;font-weight:700;color:var(--ink);letter-spacing:-1.2px;margin:14px 0 22px}
.hero h1 span{color:var(--green);display:block}
.hero p.lead{font-size:18px;color:#2c342c;max-width:540px}
.btns{display:flex;gap:16px;margin:34px 0 44px}
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 30px;border-radius:7px;font-weight:600;font-size:15px;transition:.2s}
.btn svg.i{width:18px;height:18px;stroke-width:2.2}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-d);transform:translateY(-1px)}
.btn-outline{border:1.5px solid var(--green);color:var(--green-dd);background:#fff}
.btn-outline:hover{background:var(--green-l)}
.btn-yellow{background:var(--yellow);color:var(--ink);height:42px;padding:0 22px;font-size:14px}
.btn-yellow:hover{filter:brightness(.95)}
.perks{display:flex;gap:26px}
.perk{display:flex;align-items:center;gap:10px;white-space:nowrap}
.perk svg.i{width:30px;height:30px;color:var(--green)}
.perk b{display:block;font-size:13px;font-weight:600;color:var(--ink);line-height:1.3}
.perk span{font-size:12px;color:var(--muted)}
.hero-art{position:relative;height:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:-24px}
.hero-art img{width:100%;max-width:560px;height:auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}
.badge-30{position:absolute;left:4%;top:28px;width:126px;height:126px;border-radius:50%;background:var(--green);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;box-shadow:0 10px 25px rgba(31,111,31,.3);z-index:2}
.badge-30 small{font-size:13px;font-weight:600}
.badge-30 strong{font-size:40px;font-weight:700;margin:3px 0}
.badge-30 em{font-style:normal;font-size:14px;font-weight:600}
.badge-30 .leaf{position:absolute;right:-18px;top:44px;width:32px;height:32px;color:var(--lime)}
.hero-arrow{position:absolute;left:4%;top:170px;width:40px;height:40px;color:var(--green)}

/* Section */
section{padding:0}
.block{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:30px 22px 26px}
.sec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;padding:0 8px}
.sec-head h2{font-size:26px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:10px;letter-spacing:-.3px}
.sec-head h2 svg{width:30px;height:30px}
.view-all{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--green)}
.view-all:hover{gap:12px}
.view-all svg.i{width:18px;height:18px;stroke-width:2.2}

/* Categories */
.cats{margin-top:-2px;padding-top:0}
.cat-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.cat{border:1px solid var(--line);border-radius:10px;padding:10px 8px 16px;text-align:center;transition:.2s;background:#fff}
.cat:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:0 8px 20px rgba(31,111,31,.1)}
.cat img{width:100%;aspect-ratio:1.1/1;object-fit:cover;border-radius:10px;margin-bottom:10px}
.cat span{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.3;display:block}

/* Promos */
.promos{display:grid;grid-template-columns:1.72fr 1fr;gap:20px;margin-top:26px}
.promo-a{background:radial-gradient(circle at 70% 40%,#1f5d20 0%,#153f16 60%,#123512 100%);border-radius:16px;overflow:hidden;position:relative;display:flex;align-items:center;min-height:285px;color:#fff}
.promo-a .txt{position:relative;z-index:2;padding:36px 36px;max-width:400px}
.promo-a h3{font-size:46px;font-weight:700;line-height:1.08;letter-spacing:-.6px}
.promo-a h3 span{color:var(--lime);display:block}
.promo-a p{font-size:15.5px;margin:16px 0 22px;color:#e8f3e3;line-height:1.5}
.promo-a .art{position:absolute;right:0;top:0;bottom:0;width:62%}
.promo-a .art img{width:100%;height:100%;object-fit:cover;object-position:left center;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.badge-y{position:absolute;left:44%;top:22px;width:126px;height:126px;border-radius:50%;background:var(--yellow);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;z-index:3;box-shadow:0 10px 25px rgba(0,0,0,.25)}
.badge-y small{font-size:13px;font-weight:700}.badge-y strong{font-size:40px;font-weight:800;margin:3px 0}.badge-y em{font-style:normal;font-size:14px;font-weight:700}
.promo-b{background:linear-gradient(135deg,#eef7e8,#e1f0d8);border-radius:16px;position:relative;overflow:hidden;padding:30px 28px;min-height:285px}
.promo-b h3{font-size:30px;font-weight:600;color:var(--ink);line-height:1.2;letter-spacing:-.3px;position:relative;z-index:2}
.promo-b h3 span{display:block;color:var(--green);font-weight:700;font-size:36px}
.promo-b p{font-size:15px;margin:14px 0 22px;color:#2c342c;max-width:190px;position:relative;z-index:2}
.promo-b .btn{height:46px;padding:0 24px;position:relative;z-index:2}
.promo-b img{position:absolute;right:0;bottom:0;width:46%;max-width:220px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 55% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 70% 70% at 55% 50%,#000 55%,transparent 100%)}

/* Deals */
.deals-sec{margin-top:34px}
.deals-sec .sec-head{padding:0}
.deal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.deal{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:14px 14px 16px;position:relative;transition:.2s;border:1px solid transparent}
.deal:hover{border-color:#cfe4c6;transform:translateY(-3px)}
.off{position:absolute;left:12px;top:12px;background:var(--green);color:#fff;font-size:11.5px;font-weight:600;line-height:1.15;text-align:center;padding:5px 7px;border-radius:5px;z-index:2}
.deal .img{height:140px;overflow:hidden;border-radius:10px;margin:6px 0 12px}
.deal .img img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.deal h4{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.deal .unit{font-size:12.5px;color:var(--muted);margin:2px 0 8px}
.price{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
.price b{font-size:20px;font-weight:700;color:var(--ink)}
.price s{font-size:13px;color:#9aa39a}
.add{width:100%;height:40px;border:1.5px solid var(--green);border-radius:7px;color:var(--green);font-weight:600;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:8px;transition:.2s}
.add svg.i{width:17px;height:17px}
.add:hover,.add.added{background:var(--green);color:#fff}

/* Why */
.why{margin-top:34px;text-align:center}
.why h2{font-size:28px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:24px;letter-spacing:-.3px}
.why h2 svg{width:26px;height:26px}
.why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;text-align:left}
.why-item{background:var(--green-xl);border-radius:12px;padding:20px 18px;display:flex;gap:14px;align-items:flex-start}
.why-item svg.i{width:40px;height:40px;color:var(--green);stroke-width:1.6}
.why-item b{font-size:14.5px;color:var(--ink);font-weight:600;display:block;margin-bottom:4px}
.why-item p{font-size:12.5px;color:var(--muted);line-height:1.5}

/* Trio */
.trio{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1.05fr);gap:18px;margin:22px 0 0}
.card{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:24px 28px;min-height:190px}
.card h3{font-size:19px;font-weight:600;color:var(--ink);margin-bottom:10px}
.testi{position:relative;padding-left:74px}
.testi h3{margin-left:0}
.testi .nav-btn{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.12);display:grid;place-items:center;color:var(--ink)}
.testi .nav-btn:hover{background:var(--green);color:#fff}
.testi .nav-btn svg.i{width:18px;height:18px;stroke-width:2.4}
.testi blockquote{font-size:14.5px;color:#2c342c;line-height:1.55;min-height:68px;transition:opacity .25s}
.testi cite{display:block;font-style:normal;font-weight:700;color:var(--ink);margin-top:10px;font-size:14.5px}
.dots{display:flex;gap:7px;justify-content:center;margin-top:8px}
.dots button{width:8px;height:8px;border-radius:50%;background:#cfd6cc}
.dots button.on{background:var(--green)}
.trust{text-align:center}
.trust h3{color:var(--green);font-size:17.5px}
.trust-row{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:16px}
.trust-row img{height:62px;width:auto}
.trust-row strong{display:block;font-size:24px;color:var(--ink);font-weight:700;line-height:1.1;text-align:left}
.trust-row span{font-size:13.5px;color:var(--ink);font-weight:500}
.stars{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:12px;font-size:13px}
.stars i{color:#f5b301;font-style:normal;font-size:20px;letter-spacing:2px}
.stars b{font-size:14.5px;color:var(--ink)}
.stars span{color:var(--muted);font-size:12px}
.news p{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.news form{display:flex;gap:0;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.news input{flex:1;border:0;padding:0 16px;height:50px;font:inherit;font-size:13.5px;outline:none;min-width:0}
.news button{background:var(--green);color:#fff;font-weight:600;padding:0 22px;font-size:14px}
.news button:hover{background:var(--green-d)}
.news .msg{font-size:13px;color:var(--green);margin-top:10px;min-height:18px}

/* Footer */
.site-footer{background:var(--green-dd);color:#d6e6d1;margin-top:40px;font-size:13px}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1.1fr 1.3fr 1.1fr;gap:0;padding:38px 0 26px}
.ft-col{padding:0 22px;border-left:1px solid rgba(255,255,255,.14)}
.ft-col:first-child{border-left:0;padding-left:0}
.ft-col h5{color:#fff;font-size:14px;font-weight:600;margin-bottom:12px}
.ft-col a.logo{display:flex;align-items:center}
.ft-col a{display:block;padding:2.5px 0;color:#d6e6d1}
.ft-col a:hover{color:#fff}.site-footer .logo-name{color:#fff;font-size:26px}.site-footer .logo-name span{color:var(--lime)}.site-footer .logo-mark{color:#fff;width:40px;height:36px}.site-footer .logo-tag{color:#d6e6d1}
.ft-about{margin:14px 0 18px;line-height:1.55}
.ft-social{display:flex;gap:18px;color:#fff}
.ft-social svg.i{width:19px;height:19px}
.ft-contact div{display:flex;gap:10px;margin-bottom:10px;line-height:1.5}
.ft-contact svg.i{width:16px;height:16px;margin-top:2px}
.pay{display:grid;grid-template-columns:repeat(3,56px);gap:8px}
.pay span{white-space:nowrap;background:#fff;border-radius:5px;height:34px;display:grid;place-items:center;font-weight:800;font-size:12px}
.pay .visa{color:#1a1f71;font-style:italic;font-size:15px;letter-spacing:.5px}
.pay .mc{gap:0}
.pay .mc i{display:inline-block;width:16px;height:16px;border-radius:50%;background:#eb001b}
.pay .mc i+i{background:#f79e1b;margin-left:-6px;mix-blend-mode:multiply}
.pay .amex{background:#2e77bc;color:#fff;font-size:9px}
.pay .pp{color:#003087;font-style:italic;font-size:11px;letter-spacing:-.2px}
.pay .pp em{color:#009cde;font-style:italic}
.pay .ap{color:#000;font-size:13px;font-weight:600}
.ft-bottom{border-top:1px solid rgba(255,255,255,.14);text-align:center;padding:14px 0;font-size:13px}

/* Toast */
.toast{visibility:hidden;position:fixed;bottom:24px;left:50%;transform:translate(-50%,120px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:8px;font-size:14px;transition:.3s;z-index:100}
.toast.show{visibility:visible;transform:translate(-50%,0)}

/* Mobile nav */
.mnav{display:none}

/* Responsive */
@media (max-width:1180px){
  .hdr-main{gap:18px}.hdr-actions{gap:20px}
  nav.main .nav-list{gap:16px}
  .search{width:230px}
  .logo-img{max-width:140px}
  .cat-grid{grid-template-columns:repeat(4,1fr)}
  .deal-grid{grid-template-columns:repeat(3,1fr)}
  .why-grid{grid-template-columns:repeat(3,1fr)}
  .hero h1{font-size:52px}
  .ft-grid{grid-template-columns:repeat(3,1fr);row-gap:28px}
  .ft-col:nth-child(4){border-left:0;padding-left:0}
}
/* Between the 1180 band and the point where the menu collapses, every pixel is contested: the row
   carries the logo, seven items and the search box. Measured at 920px before this block existed, the
   last item ran 55px into the search field while the page reported no horizontal scroll and no
   broken label, so neither of the usual checks would have shown it. */
@media (max-width:1060px){
  .hdr-main{gap:14px}
  nav.main .nav-list{gap:12px}
  nav.main .nav-list > li > a{font-size:13.5px}
  .search{width:196px}
  .logo-img{max-width:122px}
}

/* Below this the seven items genuinely do not fit beside a usable search box, so the menu becomes
   the drawer rather than being squeezed until it overlaps. The search stays until 900. */
@media (max-width:1000px){
  nav.main{display:none}
  .burger{display:block;margin-left:auto}
}

@media (max-width:900px){
  .topbar .hide-m{display:none}
  .search{display:none}
  .hdr-act .lbl{display:none}
  nav.main{display:none}
  .burger{display:block;margin-left:auto}
  .hdr-main{height:72px}
  .hero .container{grid-template-columns:1fr;padding-top:40px}
  .hero-art{margin:0 -24px 0 0}
  .perks{flex-wrap:wrap;gap:20px}
  .promos,.trio{grid-template-columns:minmax(0,1fr)}
  .hero-art{margin-right:0}
  .mnav.open{display:block;background:#fff;border-top:1px solid var(--line);padding:10px 24px 20px}
  .mnav a{display:block;padding:11px 0;border-bottom:1px solid #f0f2ee;font-weight:500;color:var(--ink)}
  .mnav .search{display:flex;max-width:none;margin-bottom:10px}
}
@media (max-width:600px){
  .container{padding:0 16px}
  .logo-name{font-size:24px}.logo-mark{width:38px;height:34px}.logo-img{height:34px;max-width:190px}
  .hero h1{font-size:40px}
  .hero p.lead{font-size:16px}
  .btns{flex-wrap:wrap}
  .cat-grid{grid-template-columns:repeat(3,1fr);gap:8px}.cat span{font-size:12px}
  .sec-head h2{font-size:21px}
  .promo-b{padding-bottom:180px}.promo-b img{width:170px}
  .trust-row img{height:48px}
  .deal-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr}
  .promo-a h3{font-size:34px}
  .promo-a .art{width:100%;opacity:.35}
  .badge-y{left:auto;right:16px;width:96px;height:96px}.badge-y strong{font-size:30px}
  .ft-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}
  .ft-col{border-left:0;padding:0}
  .ft-col:first-child{grid-column:1/-1}
  .topbar .container{justify-content:center}
  .topbar .social{display:none}
  .badge-30{width:96px;height:96px}.badge-30 strong{font-size:30px}
}

/* ==========================================================================
   WordPress additions. Everything above this line is the ported design.
   ========================================================================== */

/* --- article body. This is the load-bearing part of the theme: 405 of the
   site's pages are long-form guides whose markup is plain p/h2/table/div. --- */
.page-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.entry{max-width:820px;margin:0 auto;padding:36px 0 64px}
.entry-head{padding:34px 0 8px}
.entry-head .crumbs{font-size:13px;color:var(--muted);margin-bottom:14px}
.entry-head .crumbs a{color:var(--green);font-weight:600}
.entry-head .crumbs span{margin:0 6px;color:var(--line)}
.entry-title{font-size:clamp(28px,4vw,42px);line-height:1.18;color:var(--ink);font-weight:800;letter-spacing:-.6px;margin:0 0 10px}
.entry-rule{width:64px;height:4px;background:var(--lime);border-radius:3px;margin:0 0 6px}

/* The featured images are a mix of landscape and portrait originals. A fixed 16/9 box would crop a
   portrait photograph down to a narrow band through its middle, so the height is capped instead:
   a landscape image shows whole, and only a tall one is trimmed. */
.entry-thumb{margin:0 0 26px;border-radius:14px;overflow:hidden;background:var(--green-l)}
.entry-thumb img{width:100%;height:auto;max-height:520px;object-fit:cover;object-position:center}
.entry-content{font-size:18px;line-height:1.75;color:var(--text)}
.entry-content > *:first-child{margin-top:0}
.entry-content p{margin:0 0 1.15em}
.entry-content h2{font-size:clamp(22px,2.6vw,29px);line-height:1.25;color:var(--ink);font-weight:700;letter-spacing:-.3px;margin:2.1em 0 .7em;padding-top:.2em}
.entry-content h2:first-child{margin-top:0}
.entry-content strong{color:var(--ink);font-weight:600}
.entry-content a{color:var(--green);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.entry-content a:hover{color:var(--green-d)}

/* tables: the guides use them heavily and they must stay readable on a phone */
.entry-content table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:16px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.entry-content thead th{background:var(--green-l);color:var(--green-dd);text-align:left;font-weight:700;font-size:14.5px;letter-spacing:.2px;padding:11px 14px;border-bottom:1px solid var(--line)}
.entry-content td,.entry-content th{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.entry-content tbody tr:last-child td{border-bottom:0}
.entry-content tbody tr:nth-child(even){background:var(--green-xl)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* the guides' div blocks: rows of labelled points, no list markup anywhere */
.entry-content div[class$="_row"]{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--lime);border-radius:0 var(--radius) var(--radius) 0;padding:13px 16px;margin:0 0 9px;font-size:16.5px;line-height:1.65}
.entry-content div[class$="_row"] strong{display:inline;color:var(--green-dd)}
.entry-content div[class$="_intro"]{font-weight:600;color:var(--ink);margin:1.5em 0 .7em;font-size:17px}

.entry-foot{margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.entry-foot h3{font-size:15px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 14px;font-weight:700}
.sib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.sib{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.4}
.sib:hover{border-color:var(--lime);box-shadow:var(--shadow);color:var(--green-d)}

/* --- hub / archive listing --- */
.hub-intro{max-width:820px;margin:0 auto 8px;font-size:18px;line-height:1.7;color:var(--text)}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin:26px 0 10px}
.hub-card{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.hub-card:hover{border-color:var(--lime);box-shadow:var(--shadow)}
.hub-card b{display:block;font-size:16.5px;color:var(--ink);line-height:1.35;margin-bottom:5px;font-weight:700}
.hub-card span{font-size:13.5px;color:var(--muted)}

/* --- search --- */
.search-head{padding:34px 0 4px;max-width:820px;margin:0 auto}
.search-count{color:var(--muted);font-size:15px;margin-bottom:22px}
.res{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:10px}
.res:hover{border-color:var(--lime);box-shadow:var(--shadow)}
.res b{display:block;font-size:17.5px;color:var(--ink);margin-bottom:4px;font-weight:700;line-height:1.35}
.res .where{font-size:13px;color:var(--green);font-weight:600}
.res p{font-size:15.5px;color:var(--text);margin:6px 0 0;line-height:1.6}

/* --- accessibility + WP utility --- */
.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute!important;height:1px;width:1px;overflow:hidden;word-wrap:normal!important}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green);color:#fff;padding:10px 16px;border-radius:0 0 var(--radius) 0}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.alignwide{max-width:1100px;margin-left:auto;margin-right:auto}
.alignfull{width:100%;max-width:100%}
[hidden]{display:none!important}
.admin-bar .topbar{margin-top:0}

@media (max-width:900px){
  .entry{padding:24px 0 48px}
  .entry-content{font-size:17px}
  .entry-content table{font-size:15px}
}
@media (max-width:600px){
  .page-wrap{padding:0 16px}
  .entry-head{padding:22px 0 6px}
  .entry-content{font-size:16.5px}
  .entry-content h2{margin:1.7em 0 .6em}
  .sib-grid,.hub-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   Navigation: mapping wp_nav_menu's ul/li onto the design's nav.
   The source used bare <a> tags with .dd/.dd-menu divs for the dropdown.
   WordPress emits ul > li > a with a nested ul.sub-menu, so these rules make
   that structure render identically rather than rewriting the menu with a
   custom walker, which would be more code to keep in step with the design.
   ========================================================================== */
nav.main .nav-list{display:flex;gap:22px;white-space:nowrap;height:100%;margin:0;padding:0;list-style:none;align-items:center}
nav.main .nav-list > li{position:relative;height:100%;display:flex;align-items:center}
nav.main .nav-list > li > a{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:500;color:var(--ink);height:100%;white-space:nowrap}
nav.main .nav-list > li > a:hover{color:var(--green)}
nav.main .nav-list > li.current-menu-item > a,
nav.main .nav-list > li.current_page_item > a,
nav.main .nav-list > li.current-menu-ancestor > a,
nav.main .nav-list > li.current_page_ancestor > a{color:var(--green);font-weight:600}
nav.main .nav-list > li.current-menu-item > a::after,
nav.main .nav-list > li.current_page_item > a::after,
nav.main .nav-list > li.current-menu-ancestor > a::after,
nav.main .nav-list > li.current_page_ancestor > a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--green);border-radius:2px}

/* a parent gets the design's caret without needing markup in the menu item */
nav.main .nav-list > li.menu-item-has-children > a::before{content:"";order:2;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px}

nav.main .sub-menu{position:absolute;top:100%;left:-16px;margin:0;padding:10px;list-style:none;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.12);border-radius:10px;min-width:248px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;z-index:60}
nav.main .nav-list > li:hover > .sub-menu,
nav.main .nav-list > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
nav.main .sub-menu li{display:block}
nav.main .sub-menu a{display:block;height:auto;padding:9px 12px;border-radius:6px;font-size:14px;color:var(--ink);white-space:normal;line-height:1.35}
nav.main .sub-menu a:hover{background:var(--green-xl);color:var(--green-d)}

/* the "All subjects" button is an anchor here, not a <button> */

@media (max-width:900px){
  /* Mobile drawer. It sits in the document flow, so there is no fixed-height or
     scroll-lock problem: it pushes the page down and scrolls with it. */
  .mnav .mnav-list{list-style:none;margin:0;padding:0}
  .mnav .mnav-list li{display:block}
  .mnav .mnav-list a{display:block;padding:11px 0;border-bottom:1px solid #f0f2ee;font-weight:500;color:var(--ink)}
  /* Hover cannot open a submenu on touch, and a tap-to-expand cannot work here because every
     parent is a real page rather than a "#" placeholder: tapping it must navigate. So every child
     is shown, indented, with no disclosure control. That is the documented rule for touch drawers
     and it is the only version that leaves all 20 child links reachable on a phone. */
  .mnav .sub-menu{display:block;position:static;opacity:1;visibility:visible;height:auto;overflow:visible;transform:none;box-shadow:none;background:var(--green-xl);border-left:2px solid var(--lime);margin:0 0 8px 4px;padding:4px 0 4px 12px;border-radius:0;min-width:0}
  .mnav .sub-menu a{font-size:14px;padding:9px 0;border-bottom:1px solid rgba(0,0,0,.05)}
  .mnav .sub-menu li:last-child a{border-bottom:0}
  .mnav .menu-item-has-children > a{font-weight:600;color:var(--green-dd)}
}

/* Reveal-on-scroll: visible by default, so nothing is ever hidden without JS. */
.reveal{opacity:1;transform:none}
.js-reveal .reveal{opacity:0;transform:translateY(18px)}
.js-reveal .reveal.is-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal,.js-reveal .reveal.is-in{opacity:1!important;transform:none!important;transition:none!important}
}