/*
Theme Name: Stamp Duty Calculator 2025
Theme URI: https://example.com/
Author: <!-- EDIT: Your Name/Company -->
Author URI: https://example.com/
Description: Lightweight, accessible, SEO-ready one-page theme for a UK Stamp Duty Calculator (SDLT/LBTT/LTT) – 2025 edition.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stamp-duty-calculator-2025
*/

:root{
  --bg:#f7faf8;
  --paper:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --brand:#1b4d3e;
  --brand-600:#166a56;
  --accent:#f59e0b;
  --success:#0ea5a4;
  --warn:#b45309;
  --error:#b91c1c;
  --ring: 3px solid #1b4d3e;
  --radius:14px;
  --shadow: 0 8px 20px rgba(0,0,0,.06);
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem; --space-5:3rem;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-text-size-adjust:100%;
}
a{color:var(--brand)}
a:hover, a:focus{color:var(--brand-600)}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--max); margin-inline:auto; padding:0 var(--space-2)}
.stack{display:grid; gap:var(--space-3)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:.7rem 1rem; border-radius:12px; border:1px solid transparent;
  background:var(--brand); color:#fff; text-decoration:none; font-weight:600; cursor:pointer;
  box-shadow: var(--shadow);
}
.btn.secondary{background:#fff; color:var(--brand); border-color:var(--brand)}
.btn.ghost{background:transparent; border-color:var(--muted); color:var(--ink)}
.btn:focus-visible{outline: var(--ring); outline-offset:2px}
.tag{display:inline-block; padding:.25rem .5rem; background:#e6f0ec; color:var(--brand); border-radius:999px; font-size:.85rem}

/* Skip link */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#fff; border:2px solid var(--brand); z-index:9999}

/* Header & Nav */
header[role="banner"]{
  position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid #e2e8f0;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:64px}
.logo{display:flex; align-items:center; gap:.6rem; text-decoration:none}
.logo-mark{width:36px; height:36px; border-radius:10px; background:var(--brand); display:grid; place-items:center; color:#fff; font-weight:700}
.logo-title{font-weight:800; color:var(--ink)}
.tagline{color:var(--muted); font-size:.9rem}
nav[role="navigation"]{--nav-gap:1rem}
.nav-list, .submenu{list-style:none; margin:0; padding:0}
.nav-list{display:flex; gap:var(--nav-gap); align-items:center}
.nav-link, .submenu-toggle{
  background:none; border:0; font:inherit; color:var(--ink); text-decoration:none; cursor:pointer;
  padding:.5rem .6rem; border-radius:10px; min-height:44px; display:inline-flex; align-items:center; gap:.35rem;
}
.nav-link:hover, .nav-link:focus, .submenu-toggle:hover, .submenu-toggle:focus{background:#f1f5f9; outline: none}
.submenu{display:none; position:absolute; background:#fff; border:1px solid #e2e8f0; border-radius:12px; min-width:220px; padding:.5rem; box-shadow:var(--shadow)}
.submenu a{display:block; padding:.5rem .6rem; border-radius:8px}
.submenu a:hover, .submenu a:focus{background:#f8fafc}
.menu-group{position:relative}
.hamburger{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid #e2e8f0; background:#fff; border-radius:10px}
.mobile-nav{display:none}
@media (max-width: 920px){
  .nav-desktop{display:none}
  .mobile-nav{display:block}
  .drawer{display:none; position:fixed; inset:64px 0 0 0; background:#fff; overflow:auto; border-top:1px solid #e2e8f0}
  .drawer.open{display:block}
  .drawer .nav-list{flex-direction:column; align-items:stretch; padding:var(--space-2)}
  .drawer .submenu{position:static; display:none; border:0; box-shadow:none; padding:.25rem 0; margin-left:.75rem}
  .drawer .submenu.open{display:block}
  .drawer a, .drawer .submenu-toggle{justify-content:space-between}
}

/* Hero */
.hero{background:linear-gradient(180deg,#ffffff, #f3f7f5); border-bottom:1px solid #e2e8f0}
.hero-grid{display:grid; gap:var(--space-3); grid-template-columns:1fr; align-items:center; padding:var(--space-4) 0}
@media(min-width:900px){ .hero-grid{grid-template-columns:1.1fr .9fr} }
.badges{display:flex; gap:.5rem; flex-wrap:wrap}
.badge{
  display:inline-flex; align-items:center; gap:.4rem; background:#eaf7f2; color:var(--brand); padding:.35rem .6rem; border-radius:999px; font-weight:600; font-size:.9rem
}
.illus{
  width:100%; height:220px; border-radius:var(--radius); background:#e6f0ec; display:grid; place-items:center; box-shadow:var(--shadow)
}
.illus svg{width:70%; height:auto}

/* Sections */
section{padding:var(--space-5) 0}
.card{background:var(--paper); border:1px solid #e2e8f0; border-radius:var(--radius); padding:var(--space-3); box-shadow: var(--shadow)}
.grid{display:grid; gap:var(--space-3)}
@media(min-width:760px){ .grid.cols-2{grid-template-columns:1fr 1fr} .grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-4{grid-template-columns:repeat(4,1fr)} }

/* Form */
label{font-weight:600; display:block; margin-bottom:.35rem}
.field{display:grid; gap:.35rem}
.hint{color:var(--muted); font-size:.9rem}
.row{display:grid; gap:1rem}
@media(min-width:680px){ .row.cols-2{grid-template-columns:1fr 1fr} .row.cols-3{grid-template-columns:repeat(3,1fr)} }
input[type="text"], select, input[type="email"]{
  width:100%; padding:.7rem .8rem; border-radius:12px; border:1px solid #cbd5e1; background:#fff; color:var(--ink);
  min-height:44px;
}
input[type="text"]:focus, select:focus, input[type="email"]:focus{outline: var(--ring); outline-offset:2px}
.actions{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.5rem}
.error{color:var(--error); font-weight:600; font-size:.95rem}
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Results */
.results{background:#0b3a2e; color:#fff; border-radius:var(--radius); padding:var(--space-3); box-shadow: var(--shadow)}
.results strong{color:#fff}
.results .muted{opacity:.9}
.table-wrap{overflow:auto}
table{width:100%; border-collapse:collapse}
th, td{padding:.6rem .5rem; border-bottom:1px solid rgba(255,255,255,.15); text-align:left}
th{font-weight:700}
.note{background:#fff; color:#0f172a; border:1px dashed #94a3b8; border-radius:12px; padding:.75rem}

/* Rates tables */
.rates table{border-collapse:separate; border-spacing:0; width:100%}
.rates th, .rates td{padding:.6rem .6rem; border-bottom:1px solid #e2e8f0}
.rates th{background:#f8fafc; font-weight:700}
.update{color:var(--muted); font-size:.92rem}

/* Cards */
.cta-card{display:flex; flex-direction:column; gap:.6rem}
.cta-card h3{margin:.2rem 0}
.cta-card p{margin:.1rem 0}
.cta-card .btn{align-self:flex-start}

/* FAQ */
details{background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:.75rem 1rem}
details + details{margin-top:.6rem}
summary{cursor:pointer; font-weight:700}
summary:focus{outline: var(--ring)}
details[open]{box-shadow: var(--shadow)}

/* Lead magnet */
.banner{background:linear-gradient(90deg,#1b4d3e,#166a56); color:#fff; border-radius:var(--radius); padding:var(--space-3)}
.banner .field-row{display:flex; gap:.5rem; flex-wrap:wrap}
.banner input[type="email"]{
  flex:1 1 240px; min-height:44px; border-radius:10px; border:0; padding:.7rem .8rem
}

/* Aside / helpful links */
aside[role="complementary"] .list{list-style:disc; margin:.2rem 0 .2rem 1.1rem; color:var(--muted)}

/* Footer */
footer{background:#0f172a; color:#cbd5e1; padding:var(--space-4) 0}
footer a{color:#e2e8f0}
footer a:hover, footer a:focus{color:#fff}
.footgrid{display:grid; gap:1rem}
@media(min-width:760px){ .footgrid{grid-template-columns:1.2fr 1fr} }
.copyright{margin-top:1rem; color:#94a3b8}

/* Print */
@media print{
  header, .mobile-nav, nav, .hero, .banner, footer, .actions .btn:not(.printable){display:none !important}
  body{background:#fff}
  .results, .card, .rates{break-inside:avoid}
  a::after{content:" (" attr(href) ")"; font-size:.9em}
}

/* Reduced motion */
@media (prefers-reduced-motion: no-preference){
  .btn{transition:transform .12s ease, background .12s ease}
  .btn:hover{transform:translateY(-1px)}
}