/* ============================================================
   ECO ESSENTIALS — SHARED DESIGN SYSTEM
   Loaded on every page. Contains design tokens, base styles,
   shared components (nav, footer, buttons), and accessibility features.
============================================================ */

:root{
  --forest:#2D5016;--emerald:#3D8B37;--emerald-lt:#6ABD63;
  --terra:#C4622D;--terra-lt:#E8956B;
  --sky:#5BA4CF;--cream:#F7F3EC;--cream-dk:#EDE8DF;--cream-dkr:#E0D9CE;
  --text:#2A2A2A;--text-2:#5A5755;--white:#FFFFFF;
  --shadow:0 2px 16px rgba(45,80,22,.09);--shadow-lg:0 8px 32px rgba(45,80,22,.13);
  --r-sm:8px;--r-md:14px;--r-lg:22px;--r-pill:999px;
  --font-size-base:16px;
}

/* ── ACCESSIBILITY: text size scaling ── */
html[data-text-size="large"]{ --font-size-base:18px; }
html[data-text-size="extra-large"]{ --font-size-base:21px; }

/* ── ACCESSIBILITY: dyslexia-friendly font toggle ── */
html[data-dyslexia-font="true"] body{
  font-family: 'Comic Sans MS', 'Comic Sans', sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.9;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--font-size-base);scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--text);line-height:1.6}
button{cursor:pointer;font-family:inherit;border:none}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ── ACCESSIBILITY: visible focus rings everywhere ── */
a:focus-visible, button:focus-visible, input:focus-visible,
[tabindex]:focus-visible, .nav-link:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}

/* ── ACCESSIBILITY: reduced motion ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
html[data-reduced-motion="true"] *,
html[data-reduced-motion="true"] *::before,
html[data-reduced-motion="true"] *::after{
  animation:none!important;transition:none!important
}

/* ── ACCESSIBILITY: skip-to-content link ── */
.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--forest);color:var(--white);
  padding:.7rem 1.2rem;border-radius:0 0 var(--r-sm) 0;
  z-index:1000;font-weight:600;font-size:.9rem;
}
.skip-link:focus{ left:0; }

.hidden{display:none!important}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.72rem 1.6rem;border-radius:var(--r-pill);font-size:.95rem;font-weight:600;transition:all .18s;border:none;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--terra);color:var(--white)}
.btn-primary:hover{background:#b3561f;transform:translateY(-2px);box-shadow:0 4px 16px rgba(196,98,45,.28)}
.btn-secondary{background:var(--white);color:var(--forest);border:2px solid var(--emerald)}
.btn-secondary:hover{background:var(--cream)}
.btn-green{background:var(--emerald);color:var(--white)}
.btn-green:hover{background:var(--forest)}
.btn-forest{background:var(--forest);color:var(--white)}
.btn-forest:hover{background:#1e3810}
.btn-lg{padding:.9rem 2.1rem;font-size:1.05rem}
.btn-sm{padding:.38rem .95rem;font-size:.83rem}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

/* ── NAV ── */
nav{background:var(--white);border-bottom:1px solid var(--cream-dkr);position:sticky;top:0;z-index:100;padding:0 2rem;height:68px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.nav-logo{display:flex;align-items:center;gap:.65rem;cursor:pointer;flex-shrink:0}
.nav-logo img{height:46px;width:46px;object-fit:contain;border-radius:4px}
.nav-brand-text{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;color:var(--forest);line-height:1.2}
.nav-brand-tag{font-size:.6rem;color:var(--text-2);letter-spacing:.04em}
.nav-center{display:flex;align-items:center;gap:.15rem}
.nav-link{padding:.42rem .9rem;border-radius:var(--r-pill);font-size:.88rem;font-weight:500;color:var(--text-2);transition:background .15s,color .15s;cursor:pointer;white-space:nowrap}
.nav-link:hover,.nav-link.active{background:var(--cream);color:var(--forest);font-weight:600}
.nav-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.btn-nav-ghost{background:transparent;color:var(--forest);padding:.42rem .9rem;border-radius:var(--r-pill);font-size:.88rem;font-weight:500;border:none;cursor:pointer;transition:background .15s}
.btn-nav-ghost:hover{background:var(--cream)}
.btn-nav{background:var(--terra);color:var(--white);padding:.45rem 1.2rem;border-radius:var(--r-pill);font-size:.88rem;font-weight:600;transition:background .15s;border:none;cursor:pointer}
.btn-nav:hover{background:#b3561f}

/* ── ACCESSIBILITY MENU (toggle in nav) ── */
.a11y-menu-wrap{position:relative}
.a11y-toggle-btn{background:var(--cream);border:1px solid var(--cream-dkr);border-radius:var(--r-pill);padding:.4rem .8rem;font-size:.85rem;display:flex;align-items:center;gap:.3rem;color:var(--forest);font-weight:600}
.a11y-toggle-btn:hover{background:var(--cream-dk)}
.a11y-panel{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--white);border:1px solid var(--cream-dkr);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:1.2rem;width:260px;z-index:200}
.a11y-panel.open{display:block}
.a11y-panel h3{font-size:.85rem;font-weight:700;color:var(--forest);margin-bottom:.8rem}
.a11y-row{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--cream-dkr);font-size:.85rem}
.a11y-row:last-child{border-bottom:none}
.a11y-options{display:flex;gap:.3rem}
.a11y-opt-btn{background:var(--cream);border:1px solid var(--cream-dkr);border-radius:var(--r-sm);padding:.3rem .6rem;font-size:.78rem;cursor:pointer;color:var(--text-2)}
.a11y-opt-btn.active{background:var(--emerald);color:var(--white);border-color:var(--emerald)}
.a11y-switch{width:38px;height:22px;background:var(--cream-dkr);border-radius:var(--r-pill);position:relative;cursor:pointer;border:none}
.a11y-switch.on{background:var(--emerald)}
.a11y-switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--white);border-radius:50%;transition:left .15s}
.a11y-switch.on::after{left:18px}

/* ── SHARED LAYOUT ── */
.container{max-width:1100px;margin:0 auto;padding:0 2rem}
.section{padding:4rem 2rem}
.section-sm{padding:2.5rem 2rem}
.section-label{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--terra);margin-bottom:.4rem}
.section-title{font-family:'Playfair Display',serif;font-size:1.9rem;font-weight:700;color:var(--forest);margin-bottom:1rem;line-height:1.25}
.section-sub{font-size:1rem;color:var(--text-2);line-height:1.78;max-width:620px;margin-bottom:2rem}

/* ── FOOTER ── */
footer{background:#1a3009;padding:2rem;text-align:center}
.footer-logo{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:.8rem}
.footer-logo img{width:32px;height:32px;object-fit:contain;border-radius:3px}
.footer-logo span{font-family:'Playfair Display',serif;font-size:.95rem;font-weight:700;color:rgba(255,255,255,.85)}
.footer-links{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-bottom:.8rem;flex-wrap:wrap}
.footer-links a{font-size:.82rem;color:rgba(255,255,255,.5);cursor:pointer;transition:color .15s}
.footer-links a:hover{color:var(--white)}
.footer-copy{font-size:.75rem;color:rgba(255,255,255,.35)}
.footer-disclaimer{font-size:.72rem;color:rgba(255,255,255,.3);max-width:640px;margin:.6rem auto 0;line-height:1.6}

/* ── FORM ELEMENTS ── */
.form-group{margin-bottom:1.1rem}
.form-group label{display:block;font-size:.83rem;font-weight:600;color:var(--text);margin-bottom:.38rem}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:.68rem 1rem;border:2px solid var(--cream-dkr);border-radius:var(--r-sm);font-family:inherit;font-size:.93rem;background:var(--cream);color:var(--text);transition:border-color .15s;outline:none}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--emerald);background:var(--white)}
.form-error{color:#9b2020;font-size:.82rem;margin-top:.4rem;display:none}
.form-error.show{display:block}
.form-success{color:var(--forest);background:#d4f0d0;border-radius:var(--r-sm);padding:.7rem 1rem;font-size:.85rem;margin-bottom:1rem;display:none}
.form-success.show{display:block}

/* ── LOADING STATES ── */
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:var(--white);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-overlay{display:flex;align-items:center;justify-content:center;min-height:200px;color:var(--text-2);font-size:.9rem}

/* ── RESPONSIVE ── */
@media(max-width:640px){
  nav{padding:0 1rem}
  .nav-center .nav-link{display:none}
}