/* ==========================================================================
   OHIO design tokens — Figma Style Guide 3655:10163 + Brand Color Guideline 3457:5978
   Source table: docs/figma/specs/design-tokens.md (do not invent values here).
   Loaded site-wide after Flatsome. Breakpoints used by child CSS: 767 (mobile, Style Guide 390 frame) |
   849 (Flatsome medium: header/menu switch, floating bar → bottom bar) | 1024 (tablet grids) | 1199/1366/1700 (header compaction).
   Base rules are intentionally light (body font + text colour); page-level v2 styling
   is opt-in through the .ohio-* classes so legacy posts and landings do not shift.
   ========================================================================== */
:root{
  --ohio-font-head:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --ohio-font-body:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  --ohio-purple-50:#F7F3FB;--ohio-purple-100:#EFE7F7;--ohio-purple-200:#DED0EE;--ohio-purple-300:#C4AEE0;
  --ohio-purple-400:#AB67DB;--ohio-purple-500:#7E5AAE;--ohio-purple-600:#5E3D8A;--ohio-purple-700:#422666;
  --ohio-purple-800:#341D52;--ohio-purple-900:#24133A;
  --ohio-orange-50:#FFF4E5;--ohio-orange-100:#FFE6C2;--ohio-orange-200:#F9C661;--ohio-orange-300:#FFB23F;
  --ohio-orange-400:#FF950E;--ohio-orange-500:#E8720C;--ohio-orange-600:#C75100;--ohio-orange-700:#B84A00;
  --ohio-orange-800:#A84300;--ohio-orange-900:#8A3600;--ohio-cta:#F6911C;
  --ohio-neutral-0:#FFFFFF;--ohio-neutral-50:#F6F5F8;--ohio-neutral-100:#ECEAF0;--ohio-neutral-200:#DAD6E1;
  --ohio-neutral-300:#BDB7C8;--ohio-neutral-400:#948DA3;--ohio-neutral-500:#6E6780;--ohio-neutral-600:#544E64;
  --ohio-neutral-700:#3D3849;--ohio-neutral-800:#2A2633;--ohio-neutral-900:#1B1822;

  /* applied colours */
  --ohio-bg-page:var(--ohio-neutral-0);--ohio-bg-soft:var(--ohio-purple-50);--ohio-bg-tint:var(--ohio-purple-100);
  --ohio-bg-accent:var(--ohio-purple-200);--ohio-bg-brand:var(--ohio-purple-700);
  --ohio-border:var(--ohio-neutral-100);--ohio-border-brand:var(--ohio-purple-200);
  --ohio-icon:var(--ohio-purple-700);--ohio-icon-hot:var(--ohio-cta);
  --ohio-text-heading:var(--ohio-purple-700);--ohio-text-subheading:var(--ohio-purple-900);
  --ohio-text-body:var(--ohio-neutral-900);--ohio-text-muted:var(--ohio-neutral-500);
  --ohio-text-label:var(--ohio-purple-600);--ohio-text-link:var(--ohio-purple-600);--ohio-text-on-dark:#FFFFFF;
  --ohio-cta-bg:var(--ohio-cta);--ohio-cta-bg-hover:var(--ohio-orange-500);--ohio-cta-bg-active:var(--ohio-orange-600);
  --ohio-cta-text-on-white:var(--ohio-orange-700);--ohio-cta-text-on-tint:var(--ohio-orange-800);
  --ohio-grad-cta:linear-gradient(90deg,#F1791F,#F28B21);
  --ohio-grad-primary:linear-gradient(90deg,#422666,#AB67DB);
  --ohio-grad-primary-hover:linear-gradient(90deg,#5E3D8A,#AB67DB);
  --ohio-grad-primary-active:linear-gradient(90deg,#341D52,#7E5AAE);
  --ohio-grad-floating:linear-gradient(180deg,#5E3D8A,#341D52);

  /* shape + layout */
  --ohio-radius-s:8px;--ohio-radius-m:12px;--ohio-radius-l:16px;--ohio-radius-xl:20px;
  --ohio-container:1240px;--ohio-gap-section:48px;--ohio-gap-card:24px;--ohio-gap-title:28px;

  /* type scale (PC) — size / line-height */
  --ohio-h1-size:42px;--ohio-h1-lh:56px;--ohio-h2-size:36px;--ohio-h2-lh:44px;
  --ohio-h3-size:28px;--ohio-h3-lh:32px;--ohio-h4-size:24px;--ohio-h4-lh:26px;
  --ohio-lead-size:18px;--ohio-lead-lh:28px;--ohio-body-size:16px;--ohio-body-lh:26px;
  --ohio-caption-size:14px;--ohio-caption-lh:20px;--ohio-label-size:13px;--ohio-label-lh:18px;--ohio-label-ls:1.04px;
}
@media (max-width:767px){
  :root{
    --ohio-h1-size:26px;--ohio-h1-lh:34px;--ohio-h2-size:22px;--ohio-h2-lh:30px;
    --ohio-h3-size:18px;--ohio-h3-lh:26px;--ohio-h4-size:16px;--ohio-h4-lh:24px;
    --ohio-lead-size:16px;--ohio-lead-lh:26px;--ohio-body-size:15px;--ohio-body-lh:24px;
    --ohio-caption-size:13px;--ohio-caption-lh:20px;--ohio-label-size:12px;--ohio-label-lh:16px;--ohio-label-ls:.72px;
    --ohio-gap-section:20px;--ohio-gap-card:20px;--ohio-gap-title:20px;
  }
}

/* ---------- base (site-wide, light) ---------- */
body{font-family:var(--ohio-font-body);color:var(--ohio-text-body)}

/* ---------- opt-in typography helpers ---------- */
.ohio-h1{font:700 var(--ohio-h1-size)/var(--ohio-h1-lh) var(--ohio-font-head);text-transform:uppercase;color:var(--ohio-text-heading);letter-spacing:0;margin:0}
.ohio-h2,.ohio-sec-title{font:700 var(--ohio-h2-size)/var(--ohio-h2-lh) var(--ohio-font-head);text-transform:uppercase;color:var(--ohio-text-heading);letter-spacing:0;margin:0}
.ohio-h3{font:600 var(--ohio-h3-size)/var(--ohio-h3-lh) var(--ohio-font-head);color:var(--ohio-text-heading);margin:0}
.ohio-h4{font:600 var(--ohio-h4-size)/var(--ohio-h4-lh) var(--ohio-font-body);color:var(--ohio-text-subheading);margin:0}
.ohio-lead{font:400 var(--ohio-lead-size)/var(--ohio-lead-lh) var(--ohio-font-body);color:var(--ohio-text-body)}
.ohio-text{font:400 var(--ohio-body-size)/var(--ohio-body-lh) var(--ohio-font-body);color:var(--ohio-text-body)}
.ohio-caption{font:400 var(--ohio-caption-size)/var(--ohio-caption-lh) var(--ohio-font-body);color:var(--ohio-text-muted)}
.ohio-label{font:600 var(--ohio-label-size)/var(--ohio-label-lh) var(--ohio-font-body);letter-spacing:var(--ohio-label-ls);text-transform:uppercase;color:var(--ohio-text-label)}
.ohio-sec-title{text-align:center;margin-bottom:var(--ohio-gap-title)}
.ohio-sec-title--left{text-align:left}
.ohio-sec-title--bar::before{content:"";display:block;width:48px;height:4px;background:var(--ohio-cta);margin:0 auto 16px}
.ohio-sec-title--left.ohio-sec-title--bar::before{margin-left:0}
.ohio-container{max-width:var(--ohio-container);margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;box-sizing:border-box}
.ohio-section{padding-top:var(--ohio-gap-section);padding-bottom:var(--ohio-gap-section)}
.ohio-section--soft{background:var(--ohio-bg-soft)}
.ohio-section--brand{background:var(--ohio-bg-brand);color:var(--ohio-text-on-dark)}

/* ---------- breadcrumb (shared by v2 templates) ---------- */
.ohio-crumbs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:28px;font:400 13px/20px var(--ohio-font-body);color:var(--ohio-text-muted)}
.ohio-crumbs a{color:inherit}
.ohio-crumbs [aria-current]{color:var(--ohio-purple-700);font-weight:600}

/* ---------- buttons: 4 levels × 3 sizes (Style Guide §4) ---------- */
.ohio-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;
  height:44px;padding:0 24px;border-radius:var(--ohio-radius-m);border:0;
  font:600 15px/1 var(--ohio-font-body);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.ohio-btn:focus-visible{outline:2px solid var(--ohio-purple-400);outline-offset:2px}
.ohio-btn--l{height:52px;padding:0 28px;font-size:16px}
.ohio-btn--m{height:44px;padding:0 24px;font-size:15px}
.ohio-btn--s{height:36px;padding:0 16px;font-size:14px}
.ohio-btn--arrow::after{content:"→";font-size:inherit;line-height:1}
.ohio-btn--block{display:flex;width:100%}

.ohio-btn--primary{background:var(--ohio-grad-cta);color:#fff}                         /* level 1 · hot (orange) */
.ohio-btn--primary:hover{background:var(--ohio-cta-bg-hover);color:#fff}
.ohio-btn--primary:active{background:var(--ohio-cta-bg-active);color:#fff}
.ohio-btn--secondary{background:var(--ohio-grad-primary);color:#fff}                   /* level 2 · main (purple) */
.ohio-btn--secondary:hover{background:var(--ohio-grad-primary-hover);color:#fff}
.ohio-btn--secondary:active{background:var(--ohio-grad-primary-active);color:#fff}
.ohio-btn--outline{background:transparent;color:var(--ohio-purple-700);box-shadow:inset 0 0 0 1.5px var(--ohio-purple-700)} /* level 3 */
.ohio-btn--outline:hover{background:var(--ohio-purple-50);color:var(--ohio-purple-700)}
.ohio-btn--link{height:auto;padding:0;background:none;color:var(--ohio-text-link);font-size:14px;letter-spacing:0;text-transform:none} /* level 4 */
.ohio-btn--link::after{content:"→"}
.ohio-btn--link:hover{color:var(--ohio-purple-700);text-decoration:underline}
/* on dark purple: level 2 inverts, level 3 turns white */
.ohio-on-dark .ohio-btn--secondary{background:#fff;color:var(--ohio-purple-700)}
.ohio-on-dark .ohio-btn--outline{color:#fff;box-shadow:inset 0 0 0 1.5px #fff}
.ohio-on-dark .ohio-btn--outline:hover{background:rgba(255,255,255,.1)}
.ohio-btn-group{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

@media (max-width:767px){
  .ohio-btn,.ohio-btn--l,.ohio-btn--m{height:44px;padding:0 20px;font-size:14px}   /* L not used on mobile → M */
  .ohio-btn--s{height:44px;padding:0 20px;font-size:14px}                           /* S not used (touch < 44px) */
  .ohio-btn--link{height:auto;padding:0}
  .ohio-btn-group{gap:12px}
}