/*
Theme Name: Vans Marketing
Theme URI: https://vansmarketing.tech
Author: Vans Marketing
Description: Fast, SEO-first custom block theme for Vans Marketing - Australian digital growth agency.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vans-marketing
*/

/* ============ Design tokens ============ */
:root{
  --vm-primary:#22C55E;
  --vm-primary-dark:#16A34A;
  --vm-action:#15803D;
  --vm-link:#166534;
  --vm-navy:#1F2937;
  --vm-text:#4B5563;
  --vm-muted:#9CA3AF;
  --vm-surface:#F3F4F6;
  --vm-border:#E5E7EB;
  --vm-mint:#DCFCE7;
  --vm-mint-soft:#F0FDF4;
  --vm-hero-tint:#F6FFF8;
  --vm-radius-sm:12px;
  --vm-radius:18px;
  --vm-radius-lg:26px;
  --vm-shadow-sm:0 8px 28px rgba(31,41,55,.05);
  --vm-shadow:0 12px 35px rgba(31,41,55,.08);
  --vm-shadow-green:0 9px 24px rgba(34,197,94,.25);
}

/* ============ Base ============ */
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease}
img,svg{max-width:100%;height:auto}

/* ============ Buttons ============ */
.wp-block-button__link{box-shadow:none}
.wp-block-button.is-style-primary .wp-block-button__link{
  background:var(--vm-action);color:#fff;box-shadow:var(--vm-shadow-green);
}
.wp-block-button.is-style-primary .wp-block-button__link:hover{
  background:var(--vm-link);transform:translateY(-2px);
}
.wp-block-button.is-style-secondary .wp-block-button__link{
  background:#fff;color:var(--vm-navy);border:1px solid #D1D5DB;
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover{
  border-color:var(--vm-primary);color:var(--vm-link);
}

/* ============ Eyebrow (mint pill) ============ */
.vm-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--vm-mint);color:var(--vm-link);
  font-size:13px;font-weight:800;padding:7px 12px;border-radius:999px;
}
.vm-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--vm-primary)}

/* ============ Cards ============ */
.vm-card{
  background:#fff;border:1px solid var(--vm-border);border-radius:var(--vm-radius);
  padding:28px;box-shadow:var(--vm-shadow-sm);transition:.25s ease;
}
.vm-card:hover{transform:translateY(-4px);border-color:#BBF7D0;box-shadow:var(--vm-shadow)}
.vm-card .vm-ico{
  width:46px;height:46px;border-radius:14px;background:var(--vm-mint);color:var(--vm-link);
  display:grid;place-items:center;font-size:20px;font-weight:900;margin-bottom:16px;
}

/* ============ Header / Footer helpers ============ */
.vm-header{border-bottom:1px solid var(--vm-border)}
.vm-header.is-scrolled{box-shadow:0 8px 24px rgba(31,41,55,.06)}
.vm-footer a{color:#CBD5E1}
.vm-footer a:hover{color:var(--vm-primary)}

/* ============ Accessibility ============ */
:where(a,button,input,summary):focus-visible{
  outline:3px solid rgba(34,197,94,.35);outline-offset:3px;border-radius:8px;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
/* ============ Sections ============ */
.vm-section{padding-block:clamp(52px,7vw,96px)}
.vm-section--soft{background:var(--vm-surface)}
.vm-section--dark{background:var(--vm-navy)}
.vm-section--dark,.vm-section--dark p{color:#D1D5DB}
.vm-section--dark h1,.vm-section--dark h2,.vm-section--dark h3,.vm-section--dark h4{color:#fff}
.vm-hero{background:radial-gradient(circle at 86% 10%,rgba(34,197,94,.16),transparent 26%),linear-gradient(180deg,#fff 0%,var(--vm-hero-tint) 100%);border-bottom:1px solid var(--vm-mint)}
.vm-platforms{border-bottom:1px solid var(--vm-border)}
.vm-platforms span{color:#6B7280;font-weight:700}
.vm-grid{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.vm-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.vm-grid{grid-template-columns:1fr}}
.vm-p-item{background:#fff;border:1px solid var(--vm-border);border-radius:var(--vm-radius);padding:26px;border-top:4px solid var(--vm-primary);box-shadow:var(--vm-shadow-sm)}
.vm-step{border-top:3px solid var(--vm-primary);padding-top:18px}
.vm-step b{color:var(--vm-link);font-family:var(--wp--preset--font-family--heading)}
.vm-stat{border-left:4px solid var(--vm-primary);padding-left:20px}
.vm-stat b{display:block;font-family:var(--wp--preset--font-family--heading);font-size:clamp(28px,4vw,42px);font-weight:800;color:#fff}
.vm-cta-panel{background:var(--vm-navy);border-radius:26px;padding:clamp(34px,5vw,64px);text-align:center}
.vm-cta-panel h2{color:#fff}
.vm-cta-panel p{color:#D1D5DB}
.vm-aud{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);border-radius:var(--vm-radius);padding:26px}
.vm-aud b{color:#86EFAC;font-family:var(--wp--preset--font-family--heading)}
.vm-viz{background:#fff;border:1px solid var(--vm-border);border-radius:28px;padding:22px;box-shadow:var(--vm-shadow)}
.vm-viz-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.vm-viz-metric{background:var(--vm-surface);border:1px solid var(--vm-border);border-radius:14px;padding:12px 14px}
.vm-viz-metric b{display:block;font-family:var(--wp--preset--font-family--heading);font-size:20px;color:var(--vm-navy)}
.vm-viz-metric span{font-size:11.5px;color:var(--vm-muted);font-weight:600}

/* ============ Steps & stats grids ============ */
.vm-steps{display:grid;gap:18px;grid-template-columns:repeat(5,1fr)}
@media(max-width:980px){.vm-steps{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.vm-steps{grid-template-columns:1fr}}
.vm-stats{display:grid;gap:24px;grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.vm-stats{grid-template-columns:repeat(2,1fr)}}

/* ============ Service page ============ */
.vm-problem{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.vm-problem{grid-template-columns:1fr}}
.vm-problem-item{background:#fff;border:1px solid var(--vm-border);border-radius:var(--vm-radius);padding:26px;border-top:4px solid var(--vm-primary);box-shadow:var(--vm-shadow-sm)}
.vm-included{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.vm-included{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.vm-included{grid-template-columns:1fr}}
.vm-faq{max-width:900px;margin-inline:auto}
.vm-faq details{background:#fff;border:1px solid var(--vm-border);border-radius:14px;padding:0 20px;margin-bottom:12px}
.vm-faq details[open]{border-color:#86EFAC}
.vm-faq summary{cursor:pointer;font-family:var(--wp--preset--font-family--heading);font-weight:800;font-size:17px;color:var(--vm-navy);list-style:none;padding:17px 0;display:flex;justify-content:space-between;gap:16px}
.vm-faq summary::-webkit-details-marker{display:none}
.vm-faq summary::after{content:"+";color:var(--vm-action);font-size:22px}
.vm-faq details[open] summary::after{content:"\2013"}
.vm-faq details p{font-size:15px;padding-bottom:18px}

/* ============ Contact form ============ */
.vm-notice{padding:14px 18px;border-radius:12px;font-weight:700;margin-bottom:20px}
.vm-notice--ok{background:#DCFCE7;color:#166534}
.vm-notice--err{background:#FEE2E2;color:#991B1B}
.vm-form{background:#fff;border:1px solid var(--vm-border);border-radius:var(--vm-radius);padding:26px;box-shadow:var(--vm-shadow-sm);display:grid;gap:16px}
.vm-form label{display:grid;gap:6px;font-weight:700;font-size:14px;color:var(--vm-navy)}
.vm-form input,.vm-form select,.vm-form textarea{font:inherit;padding:12px 14px;border:1px solid var(--vm-border);border-radius:10px;background:#fff;color:var(--vm-text);width:100%}
.vm-form input:focus,.vm-form select:focus,.vm-form textarea:focus{outline:2px solid rgba(34,197,94,.35);border-color:var(--vm-primary)}
.vm-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.vm-form-row{grid-template-columns:1fr}}
.vm-form-submit{background:var(--vm-action);color:#fff;border:0;border-radius:12px;padding:14px 22px;font-weight:800;font-size:16px;cursor:pointer;box-shadow:var(--vm-shadow-green)}
.vm-form-submit:hover{background:var(--vm-link)}
.vm-form-note{font-size:12.5px;color:var(--vm-muted)}
.vm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.vm-contact-info{display:grid;gap:20px}
.vm-contact-item{border-left:3px solid var(--vm-primary);padding-left:16px}
.vm-contact-item b{display:block;color:var(--vm-navy);margin-bottom:4px}

/* ============ Case studies ============ */
.vm-case{background:#fff;border:1px solid var(--vm-border);border-radius:var(--vm-radius);box-shadow:var(--vm-shadow-sm);padding:clamp(22px,3vw,40px);margin-bottom:28px}
.vm-case-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.vm-tag{background:var(--vm-mint);color:var(--vm-link);font-size:12px;font-weight:800;padding:6px 12px;border-radius:999px}
.vm-case-block{margin-top:22px}
.vm-case-block h3{font-size:17px;margin-bottom:8px}
.vm-metrics{display:grid;gap:16px;grid-template-columns:repeat(4,1fr);margin:22px 0}
@media(max-width:900px){.vm-metrics{grid-template-columns:repeat(2,1fr)}}
.vm-metric{border-left:3px solid var(--vm-primary);padding-left:14px}
.vm-metric b{display:block;font-family:var(--wp--preset--font-family--heading);font-size:clamp(22px,3vw,32px);color:var(--vm-navy)}
.vm-metric span{font-size:13px;color:var(--vm-muted);font-weight:600}
.vm-shots{display:grid;gap:18px;grid-template-columns:1fr 1fr;margin-top:18px}
@media(max-width:800px){.vm-shots{grid-template-columns:1fr}}
.vm-shot{aspect-ratio:16/10;border:2px dashed var(--vm-border);border-radius:14px;background:var(--vm-surface);display:grid;place-items:center;text-align:center;color:var(--vm-muted);font-weight:700;font-size:13px;padding:16px}

/* ============ Free audit ============ */
.vm-checklist{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media(max-width:800px){.vm-checklist{grid-template-columns:1fr}}
.vm-check{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--vm-border);border-radius:14px;padding:16px;box-shadow:var(--vm-shadow-sm)}
.vm-check::before{content:"\2713";display:grid;place-items:center;flex:0 0 26px;height:26px;border-radius:50%;background:var(--vm-mint);color:var(--vm-action);font-weight:900}
.vm-check b{display:block;color:var(--vm-navy)}
.vm-check span{font-size:14px;color:var(--vm-text)}
.vm-steps3{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
@media(max-width:800px){.vm-steps3{grid-template-columns:1fr}}
.vm-step3{background:#fff;border:1px solid var(--vm-border);border-radius:var(--vm-radius);padding:24px;box-shadow:var(--vm-shadow-sm)}
.vm-step3 b{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--vm-mint);color:var(--vm-link);font-family:var(--wp--preset--font-family--heading);margin-bottom:14px}
.vm-tools{display:flex;flex-wrap:wrap;gap:10px}
.vm-tools span{background:#fff;border:1px solid var(--vm-border);border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px;color:var(--vm-navy)}

/* ============ Light theme (Option C) overrides ============ */
.vm-section--dark{background:var(--vm-surface);color:var(--vm-text)}
.vm-section--dark p{color:var(--vm-text)}
.vm-section--dark h1,.vm-section--dark h2,.vm-section--dark h3,.vm-section--dark h4{color:var(--vm-navy)}
.vm-aud{background:#fff;border:1px solid var(--vm-border);box-shadow:var(--vm-shadow-sm)}
.vm-aud b{color:var(--vm-link)}
.vm-aud h3{color:var(--vm-navy)}
.vm-aud p{color:var(--vm-text)}
.vm-stat b{color:var(--vm-navy)}
.vm-stat span{color:var(--vm-text)}
.vm-cta-panel{background:var(--vm-mint)}
.vm-cta-panel h2{color:var(--vm-navy)}
.vm-cta-panel p{color:var(--vm-text)}

/* ============ Responsive section rhythm (mobile -> desktop -> large screens) ============ */
.vm-section{padding-block:60px}
@media (min-width:600px){.vm-section{padding-block:76px}}
@media (min-width:900px){.vm-section{padding-block:92px}}
@media (min-width:1200px){.vm-section{padding-block:108px}}
@media (min-width:1440px){.vm-section{padding-block:124px}}

/* ============ Center section content at 1240 inside full-width sections ============ */
.wp-site-blocks .vm-section > *,
.wp-site-blocks .vm-hero > *,
.wp-site-blocks .vm-platforms > *,
.entry-content .vm-section > *,
.entry-content .vm-hero > *,
.entry-content .vm-platforms > *{
  max-width:1240px;
  margin-left:auto;
  margin-right:auto;
}

/* ============ Clickable service cards ============ */
.vm-card{position:relative}
.vm-card h3 a{color:inherit}
.vm-card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.vm-card:hover h3 a{color:var(--vm-link)}
.vm-card h3 a:focus-visible::after{outline:3px solid rgba(34,197,94,.35);outline-offset:3px}

/* ============ Sticky header ============ */
.vm-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(12px)}
.admin-bar .vm-header{top:32px}
@media (max-width:782px){.admin-bar .vm-header{top:46px}}

/* ============ Consent + contact headings ============ */
.vm-consent{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:10px;font-weight:500;font-size:14px;color:var(--vm-navy)}
.vm-consent input{width:auto;margin-top:3px}
.vm-contact-item h3{font-size:17px;margin:0 0 4px;color:var(--vm-navy)}

/* ============ Grid children: neutralise WP flow gap margins ============ */
:where(.vm-grid, .vm-steps, .vm-included, .vm-problem, .vm-stats, .vm-audience, .vm-checklist, .vm-steps3) > * {
  margin-block-start: 0 !important;
}