/*
Theme Name: VirtualBookkeepings Editable
Theme URI: https://virtualbookkeepings.com
Author: VirtualBookkeepings
Author URI: https://virtualbookkeepings.com
Description: Custom virtual bookkeeping and accounting theme for virtualbookkeepings.com. Sleek, light, fast, and SEO ready. Creates all pages automatically on activation, and every piece of text on every page is editable under Appearance then Customize, with the layout locked so the design cannot break.
Version: 2.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: virtualbookkeepings
*/

:root{
  --bg:#FBFBF9;
  --surface:#FFFFFF;
  --ink:#17251F;
  --muted:#586661;
  --accent:#1C7A5E;
  --accent-deep:#155C46;
  --accent-soft:#E7F1EC;
  --sand:#F2EEE5;
  --line:#E6E9E5;
  --radius:14px;
  --radius-lg:22px;
  --maxw:1160px;
  --shadow:0 1px 2px rgba(23,37,31,.04), 0 12px 32px rgba(23,37,31,.06);
  --shadow-soft:0 1px 2px rgba(23,37,31,.04), 0 6px 18px rgba(23,37,31,.05);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Bricolage Grotesque","Inter",sans-serif;font-weight:600;line-height:1.1;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.tnum{font-variant-numeric:tabular-nums}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:15px;font-weight:600;padding:13px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease, background .15s ease, border-color .15s ease}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-lg{padding:15px 28px;font-size:16px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,251,249,.82);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:19px;letter-spacing:-.02em}
.brand .mark{width:30px;height:30px;border-radius:8px;background:var(--accent);display:grid;place-items:center;color:#fff}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:15px;font-weight:500;color:var(--muted)}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:14px}
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{content:"";display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:.2s}
.menu-toggle span::before{position:absolute;top:-6px}
.menu-toggle span::after{position:absolute;top:6px}

/* Hero (home) */
.hero{padding:72px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(38px,5vw,60px);margin:18px 0 20px}
.hero .lead{font-size:19px;color:var(--muted);max-width:34ch;margin-bottom:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.hero-trust{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.hero-trust .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* Ledger snapshot card */
.snapshot{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:26px;position:relative}
.snapshot::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);pointer-events:none;background:linear-gradient(180deg,rgba(28,122,94,.05),transparent 30%)}
.snap-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.snap-title{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:17px}
.snap-tag{font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:5px 10px;border-radius:999px}
.snap-sub{font-size:13px;color:var(--muted);margin-bottom:18px}
.ledger-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.ledger-row .label{color:var(--muted);display:flex;align-items:center;gap:10px}
.ledger-row .swatch{width:8px;height:8px;border-radius:2px}
.ledger-row .val{font-weight:600}
.snap-total{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:18px;border-top:2px solid var(--ink)}
.snap-total .label{font-family:"Bricolage Grotesque",sans-serif;font-weight:600}
.snap-total .val{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:22px;color:var(--accent)}
.snap-foot{margin-top:16px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}

/* Page hero (interior) */
.page-hero{padding:56px 0 30px;background:var(--surface);border-bottom:1px solid var(--line)}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:16px}
.breadcrumb a:hover{color:var(--accent)}
.page-hero h1{font-size:clamp(32px,4.4vw,50px);margin:14px 0 18px;max-width:20ch}
.page-hero .lead{font-size:19px;color:var(--muted);max-width:60ch;margin-bottom:26px}

/* Stats strip */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:26px 24px;border-left:1px solid var(--line)}
.stat:first-child{border-left:none}
.stat .num{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:30px;letter-spacing:-.02em}
.stat .cap{font-size:13.5px;color:var(--muted);margin-top:2px}

/* Sections */
section{scroll-margin-top:84px}
.section{padding:84px 0}
.section-sm{padding:60px 0}
.section-head{max-width:640px;margin-bottom:44px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(28px,3.4vw,40px);margin:14px 0 12px}
.section-head p{color:var(--muted);font-size:17.5px}
.alt{background:var(--sand)}

/* Card grids */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-soft);transition:transform .18s ease, box-shadow .18s ease}
.card.link:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card .ic{width:44px;height:44px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:16px}
.card h3{font-size:19px;margin-bottom:8px}
.card p{color:var(--muted);font-size:15px}
.card .more{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;color:var(--accent)}
.tag{display:inline-block;font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:5px 11px;border-radius:999px;margin-bottom:14px}

/* Split content */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.split h2{font-size:clamp(26px,3vw,36px);margin-bottom:16px}
.split p{color:var(--muted);margin-bottom:14px}

/* Checklist */
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.checklist li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.checklist li svg{flex:0 0 auto;margin-top:4px;color:var(--accent)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-soft)}
.panel h3{font-size:18px;margin-bottom:18px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.step .n{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:15px;color:var(--accent);letter-spacing:.05em}
.step h3{font-size:19px;margin:10px 0 8px}
.step p{color:var(--muted);font-size:15px}

/* Pricing */
.price-band{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:44px;display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center;box-shadow:var(--shadow-soft)}
.price-band h2{font-size:clamp(26px,3vw,36px);margin-bottom:12px}
.price-band p{color:var(--muted)}
.price-figure{text-align:right}
.price-figure .from{font-size:14px;color:var(--muted)}
.price-figure .amt{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:52px;letter-spacing:-.02em;line-height:1}
.price-figure .per{font-size:15px;color:var(--muted)}
.price-figure .note{font-size:12.5px;color:var(--muted);margin-top:8px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;display:flex;flex-direction:column}
.tier.featured{border-color:var(--accent);box-shadow:var(--shadow)}
.tier .plan{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:20px}
.tier .p-amt{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:40px;margin:14px 0 2px}
.tier .p-per{font-size:14px;color:var(--muted);margin-bottom:20px}
.tier ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:11px}
.tier li{display:flex;gap:10px;font-size:15px;color:var(--muted)}
.tier li svg{flex:0 0 auto;margin-top:3px;color:var(--accent)}
.tier .btn{margin-top:auto}
.badge{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:999px;margin-bottom:12px}

/* Why us */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.why{padding:24px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.why .ic{color:var(--accent);margin-bottom:12px}
.why h3{font-size:16px;margin-bottom:6px}
.why p{font-size:14px;color:var(--muted)}

/* Testimonial */
.quote{max-width:820px;margin:0 auto;text-align:center}
.quote blockquote{font-family:"Bricolage Grotesque",sans-serif;font-weight:500;font-size:clamp(22px,3vw,30px);line-height:1.3;letter-spacing:-.01em;margin:0 0 22px}
.quote .who{font-size:15px;color:var(--muted)}
.quote .who strong{color:var(--ink)}

/* FAQ */
.faq{max-width:800px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:18px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:0 0 auto;width:22px;height:22px;position:relative;transition:transform .2s}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;background:var(--accent);border-radius:2px}
.faq summary .plus::before{top:10px;left:2px;width:18px;height:2px}
.faq summary .plus::after{top:2px;left:10px;width:2px;height:18px}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq .ans{color:var(--muted);font-size:16px;padding:0 0 22px;max-width:66ch}

/* Blog */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease, box-shadow .18s ease}
.post:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.post .thumb{height:150px;background:linear-gradient(135deg,var(--accent-soft),var(--sand))}
.post .body{padding:22px;display:flex;flex-direction:column;gap:8px}
.post .meta{font-size:12.5px;color:var(--muted);letter-spacing:.03em;text-transform:uppercase}
.post h3{font-size:18px}
.post p{font-size:14.5px;color:var(--muted)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-size:14px;font-weight:600}
.field input,.field select,.field textarea{font-family:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.contact-side .item{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-side .item svg{color:var(--accent);flex:0 0 auto;margin-top:2px}
.contact-side .item strong{display:block;font-size:15px}
.contact-side .item span{font-size:14px;color:var(--muted)}

/* Final CTA */
.cta-band{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:56px 48px;text-align:center}
.cta-band h2{font-size:clamp(28px,3.4vw,40px);color:#fff;margin-bottom:14px}
.cta-band p{color:rgba(255,255,255,.72);max-width:52ch;margin:0 auto 28px;font-size:17.5px}
.cta-band .btn-primary{background:#fff;color:var(--ink)}
.cta-band .btn-primary:hover{background:var(--accent-soft)}

/* Footer */
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding:64px 0 30px;margin-top:20px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.foot-brand .brand{margin-bottom:14px}
.foot-brand p{color:var(--muted);font-size:14.5px;max-width:30ch}
.foot-col h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin:0 0 14px}
.foot-col a{display:block;color:var(--muted);font-size:14.5px;padding:5px 0}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px}

/* Responsive */
@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .g3,.steps,.why-grid,.tiers,.post-grid{grid-template-columns:1fr 1fr}
  .split,.contact-grid{grid-template-columns:1fr;gap:32px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:none}
  .price-band{grid-template-columns:1fr;gap:24px}
  .price-figure{text-align:left}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  body{font-size:16px}
  .nav-links,.nav-cta .btn-ghost{display:none}
  .menu-toggle{display:flex}
  .nav-links.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:0;background:var(--surface);border-bottom:1px solid var(--line);padding:8px 0}
  .nav-links.open a{padding:14px 24px;width:100%}
  .hero{padding:44px 0 20px}
  .section{padding:56px 0}
  .g2,.g3,.steps,.why-grid,.tiers,.post-grid,.stats-grid,.foot-grid{grid-template-columns:1fr}
  .stat{border-left:none;border-top:1px solid var(--line)}
  .stat:first-child{border-top:none}
  .price-band,.cta-band{padding:32px 24px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto !important;transition:none !important}}

/* ===== WordPress dynamic menu output ===== */
.nav-links ul{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav-links li{margin:0}
.nav-links ul a{font-size:15px;font-weight:500;color:var(--muted)}
.nav-links .current-menu-item>a,.nav-links ul a:hover{color:var(--ink)}
@media (max-width:680px){
  .nav-links.open ul{flex-direction:column;width:100%;gap:0}
  .nav-links.open li{width:100%}
  .nav-links.open ul a{display:block;padding:14px 24px;width:100%}
}
/* WP admin bar spacing safety */
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}