/*
Theme Name: ZR Advice & Technology
Description: Global tokens, typography, controls (compact)
Version: 2.1.0
*/

/* ===== Fonts ===== */
@font-face{
  font-family:"Circular";
  src:url("assets/fonts/circular/CircularStd-Book.woff2") format("woff2"),
      url("assets/fonts/circular/CircularStd-Book.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Circular";
  src:url("assets/fonts/circular/CircularStd-Medium.woff2") format("woff2"),
      url("assets/fonts/circular/CircularStd-Medium.woff") format("woff");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Circular";
  src:url("assets/fonts/circular/CircularStd-Bold.woff2") format("woff2"),
      url("assets/fonts/circular/CircularStd-Bold.woff") format("woff");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ===== Tokens ===== */
:root{
  --zr-primary:#0B3D2E;
  --zr-green-black:#0A1F16;
  --zr-teal:#0F766E;
  --zr-white:#fff;
  --zr-gray:#6B7280;
  --zr-surface:#F8FAF9;
  --zr-footer:#F3F6F5;
  --zr-ink:#0a0f0d;
  --zr-muted:#586066;
  --zr-border:#E2E8E5;
  --zr-elevated:#EEF3F1;
  --zr-cta:#0B3D2E;
  --zr-shadow:0 12px 28px rgba(0,0,0,.10);

  /* type scale (compact) */
  --fs-12:.75rem;
  --fs-13:.8125rem;
  --fs-14:.875rem;
  --fs-15:.9375rem;
  --fs-16:1rem;
  --fs-18:1.125rem;
  --fs-20:1.25rem;

  /* controls */
  --radius:10px;
  --ctr-h-sm:34px;
  --ctr-h-md:36px;
  --ctr-h-lg:42px;
  --ctr-pad-x:12px;

  /* === site-wide container === */
  --container-max:1200px;
  --container-pad-x:20px;
}

/* ===== Base ===== */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Circular","Circular Std",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  background:var(--zr-surface);
  color:var(--zr-ink);
  font-size:var(--fs-14);      /* smaller desktop base */
  line-height:1.5;
  letter-spacing:.1px;
}
@media (max-width: 767px){
  body{ font-size:var(--fs-16); } /* legible on mobile */
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:2px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding-left:var(--container-pad-x);
  padding-right:var(--container-pad-x);
}

/* ===== Headings & Hero (smaller, calmer) ===== */
h1,.h1{ font-size:clamp(1.5rem,1.2vw + 1rem,2rem); line-height:1.15; font-weight:700; margin:.2rem 0 .4rem; }
h2,.h2{ font-size:clamp(1.25rem,1vw + .8rem,1.5rem); line-height:1.2; font-weight:700; margin:.4rem 0 .3rem; }
h3,.h3{ font-size:var(--fs-18); line-height:1.25; font-weight:600; margin:.35rem 0 .25rem; }

.zr-main{ min-height:calc(100vh - 56px - 220px); display:flex; flex-direction:column; }
.hero{ position:relative; overflow:hidden; padding:64px 0; }
.hero__gradient{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom, color-mix(in oklab, var(--zr-primary) 12%, transparent), transparent 60%); opacity:.6; }
.hero__inner{ position:relative; }
.hero__copy{ max-width:720px; }
.hero__subtitle{ margin-top:.75rem; font-size:var(--fs-15); color:var(--zr-muted); line-height:1.45; }
.hero__actions{ display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap; }

/* ===== Controls (short, even rhythm) ===== */
/* ===== Controls (short, even rhythm) ===== */
.btn, .btn-primary, .btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  height:var(--ctr-h-md);
  padding:0 var(--ctr-pad-x);
  border-radius:var(--radius);
  font-size:var(--fs-13);
  font-weight:600;            /* a touch bolder, like the ribbon view */
  line-height:1;
  cursor:pointer;
  border:1px solid transparent;
  background:transparent;
  transition:
    transform .06s ease,
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    filter .15s ease,
    box-shadow .15s ease;
}
.btn--sm{ height:var(--ctr-h-sm); font-size:var(--fs-12); }
.btn--lg{ height:var(--ctr-h-lg); font-size:var(--fs-14); }
.btn--block{ display:block; width:100%; }

/* Primary = brand green background, white text */
.btn-primary{
  background:var(--zr-cta);
  color:var(--zr-white);
  border-color:color-mix(in oklab, var(--zr-cta), white 14%);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.btn-primary:hover{
  transform:translateY(-1px);
  background:color-mix(in oklab, var(--zr-cta), black 6%); /* slightly darker */
}
.btn-primary:active{
  transform:none;
  background:color-mix(in oklab, var(--zr-cta), black 10%);
}
.btn-primary:focus-visible{
  outline:2px solid color-mix(in oklab, var(--zr-cta), white 40%);
  outline-offset:2px;
}

/* Secondary (ghost) = transparent, green text + soft border */
.btn-ghost{
  background:transparent;
  color:var(--zr-cta);
  border-color:color-mix(in oklab, var(--zr-cta), white 72%);
  box-shadow:none;
}
.btn-ghost:hover{
  background:color-mix(in oklab, var(--zr-cta), white 95%); /* ~5% tint */
  border-color:color-mix(in oklab, var(--zr-cta), white 62%);
}
.btn-ghost:focus-visible{
  outline:2px solid color-mix(in oklab, var(--zr-cta), white 40%);
  outline-offset:2px;
}
/* Inputs (same heights as buttons) */
input[type="text"],input[type="email"],input[type="url"],
input[type="tel"],input[type="password"],input[type="search"],
select,textarea{
  width:100%;
  height:var(--ctr-h-md);
  padding:0 var(--ctr-pad-x);
  border-radius:var(--radius);
  border:1px solid var(--zr-border);
  background:#fff; color:var(--zr-ink);
  font-size:var(--fs-13);
  line-height:1;
  outline:none; box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  font-family:inherit;
}
textarea{
  min-height:116px;
  padding:.55rem var(--ctr-pad-x);
  line-height:1.45; resize:vertical;
}
input::placeholder,textarea::placeholder{ color:#8A9591; }
input:hover,select:hover,textarea:hover{ border-color:color-mix(in oklab, var(--zr-border), var(--zr-cta) 14%); }
input:focus,select:focus,textarea:focus{
  border-color:color-mix(in oklab, var(--zr-cta), white 22%);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--zr-cta), white 82%);
}

/* ===== Utilities ===== */
.hide{ display:none!important; }

/* Fallback if color-mix unsupported */
@supports not (color: color-mix(in oklab, #000, #fff 50%)) {
  input:focus,select:focus,textarea:focus,.btn-primary:focus-visible{
    box-shadow:0 0 0 3px rgba(11,61,46,.18); border-color:rgba(11,61,46,.6);
  }
}


/* === Softer typography === */
body{ line-height:1.6; }                  /* calmer reading */
h1,.h1,h2,.h2,h3,.h3{ font-weight:600; }  /* was 700 in places */
.footer-links__title,
.footer-newsletter__title{ font-weight:600; } /* was 700 */

/* Optional: slightly dim long text to ease contrast */
.footer-brand__desc,
.footer-newsletter__desc,
.zr-footer p{ color: color-mix(in oklab, var(--zr-ink), white 20%); }