/*
Theme Name: ItsHomeopathy
Theme URI: https://itshomeopathy.com/
Author: itshomeopathy.com
Description: Lightweight Gutenberg-first theme recreating the structure of a comprehensive homeopathy library (homepage hero, remedy/condition grids, learning paths, evidence hub, remedy finder). Original code + original starter content — not affiliated with homeopathy.network.
Version: 0.2.3
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GPLv2 or later
Text Domain: itshomeopathy
*/

:root{
  --ih-green:#1a5c4a;
  --ih-green-dark:#124434;
  --ih-cream:#faf7f0;
  --ih-ink:#17211d;
  --ih-muted:#5d6f69;
  --ih-card:#ffffff;
  --ih-line:#e7e0d2;
  --ih-accent:#e9b44c;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--ih-cream);color:var(--ih-ink);line-height:1.6}
a{color:var(--ih-green)}
.container{max-width:1160px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,247,240,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--ih-line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--ih-green);text-decoration:none}
.brand-mark{width:34px;height:34px;border-radius:10px;background:var(--ih-green);color:#fff;display:grid;place-items:center;font-weight:900}
.menu-wrap{display:flex;align-items:center;gap:18px}
.menu{display:flex;gap:18px;align-items:center;list-style:none;margin:0;padding:0}
.menu a{text-decoration:none;color:var(--ih-ink);font-weight:600}
.menu a:hover{color:var(--ih-green)}
.menu>li{position:relative;padding:22px 0}
.menu ul{list-style:none;margin:0;padding:0}
.menu>li>.sub-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);width:max-content;min-width:680px;max-width:94vw;background:#fff;border:1px solid var(--ih-line);border-radius:16px;box-shadow:0 18px 50px rgba(23,33,29,.14);padding:20px 22px;display:none;grid-template-columns:repeat(3,minmax(190px,1fr));gap:2px 24px;list-style:none;margin:0;z-index:60}
.menu>li:hover>.sub-menu,.menu>li:focus-within>.sub-menu,.menu>li.open>.sub-menu{display:grid}
.menu .sub-menu li{break-inside:avoid;min-width:0}
.menu .sub-menu a{display:block;padding:7px 8px;border-radius:8px;font-size:14.5px;line-height:1.35;white-space:normal}
.menu .sub-menu a{display:block;padding:7px 8px;border-radius:8px;font-size:14.5px}
.menu .sub-menu a:hover{background:#eef5f1}
.menu .sub-menu a[href="#"]{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ih-green);font-weight:800;margin-top:10px;pointer-events:none;cursor:default}
.menu .sub-menu li:first-child a[href="#"]{margin-top:0}
@media(max-width:1100px){.menu>li>.sub-menu{min-width:520px;grid-template-columns:repeat(2,1fr);left:auto;right:0;transform:translateY(8px)}}
.btn{display:inline-block;background:var(--ih-green);color:#fff !important;padding:12px 20px;border-radius:999px;text-decoration:none;font-weight:700;border:0;cursor:pointer}
.btn:hover{background:var(--ih-green-dark)}
.btn-ghost{background:#fff;color:var(--ih-green) !important;border:1px solid var(--ih-line)}
.hero{background:radial-gradient(800px 400px at 20% 10%,#e6f2ec,transparent),linear-gradient(180deg,#fff,var(--ih-cream));border-bottom:1px solid var(--ih-line);padding:64px 0 40px}
.hero h1{font-size:clamp(32px,5vw,56px);line-height:1.05;margin:0 0 12px;letter-spacing:-.02em}
.hero p.lead{font-size:19px;color:var(--ih-muted);max-width:720px}
.hero-cta{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.stats{display:flex;gap:28px;margin-top:26px;flex-wrap:wrap}
.stat strong{font-size:28px;display:block}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{background:var(--ih-card);border:1px solid var(--ih-line);border-radius:16px;padding:18px;text-decoration:none;color:inherit;display:block}
.card:hover{border-color:var(--ih-green);box-shadow:0 8px 30px rgba(26,92,74,.08)}
.card h3{margin:8px 0 6px;font-size:18px}
.card p{margin:0;color:var(--ih-muted);font-size:14.5px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800;color:var(--ih-green)}
.section{padding:48px 0}
.section h2{font-size:30px;margin:0 0 8px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px}
.section-head a{font-weight:700}
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.path{background:var(--ih-green);color:#fff;border-radius:18px;padding:22px;text-decoration:none}
.path p{opacity:.85}
.newsletter{background:#fff;border:1px solid var(--ih-line);border-radius:18px;padding:24px}
.site-footer{background:#0f2921;color:#d8e6e0;margin-top:40px;padding:40px 0}
.site-footer a{color:#d8e6e0;text-decoration:none}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px}
.notice{font-size:13px;opacity:.75;margin-top:20px;border-top:1px solid rgba(255,255,255,.15);padding-top:16px}
.badge{display:inline-block;background:#eef5f1;color:var(--ih-green);border:1px solid var(--ih-line);padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
.remedy-hero,.cond-hero{background:#fff;border:1px solid var(--ih-line);border-radius:18px;padding:26px}
table.meta{width:100%;border-collapse:collapse;margin:16px 0}
table.meta th,table.meta td{text-align:left;padding:10px;border-bottom:1px solid var(--ih-line);vertical-align:top}
.finder-box{background:#fff;border:1px solid var(--ih-line);border-radius:18px;padding:22px}
.finder-opt{display:block;width:100%;text-align:left;background:var(--ih-cream);border:1px solid var(--ih-line);border-radius:12px;padding:12px 14px;margin:8px 0;cursor:pointer;font-weight:600}
.finder-opt:hover{border-color:var(--ih-green)}
/* ------------------------------------------------------------------
   Mobile navigation (<=720px).
   This used to be a single rule — .menu{display:none} — which hid the
   whole Primary menu on phones and put nothing in its place, so no page
   below the top level was reachable from the menu.
   Every link stays reachable in all three states:
     - no JS yet, or JS blocked : menu in normal flow, submenus expanded
     - nav.js loaded            : the toggle opens a scrollable dropdown
                                  panel and submenu parents expand on
                                  tap, because a touch screen has no
                                  hover to rely on
     - wider than 720px         : the original hover mega menu, untouched
   ------------------------------------------------------------------ */
.mobile-menu-btn{display:none}
.nav-toggle{display:none}
.sub-toggle{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:720px){
  .nav{height:auto;flex-wrap:wrap;padding-top:8px;padding-bottom:8px;gap:10px}
  .brand{order:1;min-width:0;font-size:17px;overflow:hidden}
  .mobile-menu-btn{display:inline-block !important;order:2;flex:0 0 auto;margin-left:auto;padding:8px 14px;font-size:13.5px;white-space:nowrap}
  .menu-wrap{order:4;flex:1 0 100%;display:flex;flex-direction:column;align-items:stretch;gap:0}
  .menu{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .menu>li{padding:0;border-top:1px solid var(--ih-line)}
  .menu>li>a{display:block;padding:13px 2px;font-size:16px}
  .menu>li>.sub-menu{display:none;position:static;top:auto;left:auto;right:auto;width:auto;min-width:0;max-width:100%;transform:none;grid-template-columns:1fr;gap:0;box-shadow:none;border:0;border-radius:0;padding:0 0 8px 14px}
  .menu .sub-menu ul{display:none;position:static;min-width:0;transform:none;box-shadow:none;border:0;border-radius:0;padding-left:14px}
  .menu .sub-menu a{padding:9px 2px;font-size:15px}
  .menu .sub-menu a[href="#"]{margin-top:10px}
  /* A touch screen has no hover, so the desktop reveal is switched off and
     the tap-driven .open class takes over. */
  .menu>li:hover>.sub-menu,.menu>li:focus-within>.sub-menu{display:none}
  .menu>li.open>.sub-menu{display:block}
  .menu li.open>ul{display:block}
  /* Until nav.js runs, show everything rather than hide it. */
  .site-header:not(.ihr-nav-ready) .menu>li>.sub-menu,
  .site-header:not(.ihr-nav-ready) .menu .sub-menu ul{display:block}
  /* nav.js loaded: collapsible panel behind the toggle button. */
  .site-header.ihr-nav-ready .nav{height:68px;flex-wrap:nowrap;padding-top:0;padding-bottom:0}
  .site-header.ihr-nav-ready .nav-toggle{display:flex;order:3;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;padding:0;background:transparent;border:0;border-radius:12px;cursor:pointer}
  .site-header.ihr-nav-ready .nav-toggle:hover{background:#eef5f1}
  .site-header.ihr-nav-ready .nav-toggle__bar{display:block;width:22px;height:2px;border-radius:2px;background:var(--ih-green);transition:transform .2s,opacity .2s}
  .site-header.ihr-nav-ready .menu-wrap{position:absolute;top:68px;left:0;right:0;max-height:calc(100vh - 68px);overflow-y:auto;background:#fff;border-top:1px solid var(--ih-line);border-bottom:1px solid var(--ih-line);box-shadow:0 20px 40px rgba(23,33,29,.12);padding:6px 20px 20px;display:none}
  .site-header.ihr-nav-ready .menu-wrap.is-open{display:flex}
  .site-header.ihr-nav-ready .menu>li{display:flex;flex-wrap:wrap;align-items:center}
  .site-header.ihr-nav-ready .menu>li>a{flex:1 1 auto}
  .site-header.ihr-nav-ready .menu>li>.sub-menu{flex:1 0 100%}
  .site-header.ihr-nav-ready .sub-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;padding:0;background:transparent;border:0;color:var(--ih-green);cursor:pointer}
  .site-header.ihr-nav-ready .sub-toggle svg{width:15px;height:15px;transition:transform .2s}
  .site-header.ihr-nav-ready .sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
}