/* AcadiPlus - companion styles for components the Habitline template doesn't ship
   (instant-quote modal, WhatsApp bubble, left mobile drawer polish).
   Template look & feel lives untouched in assets/app.css. */

/* ---------- left mobile drawer ---------- */
/* drawer sits ABOVE the fixed header (z-120 in the template) and its own backdrop */
#mobile-menu.acad-drawer { z-index: 200 !important; }
.acad-drawer { -webkit-overflow-scrolling: touch; }
.acad-drawer::-webkit-scrollbar { width: 6px; }
.acad-drawer::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 3px; }
#acad-drawer-backdrop {
  position: fixed; inset: 0; z-index: 190; background: rgba(10,11,25,.5);
  backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
#acad-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
body.acad-drawer-open { overflow: hidden; }
/* keep the sticky header from painting over the open drawer */
body.acad-drawer-open header .nav-sticky { z-index: 100 !important; }

/* ---------- quote form: module chooser ---------- */
.acad-modgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 4px; }
@media (max-width: 480px) { .acad-modgrid { grid-template-columns: 1fr; } }
.acad-chk { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; color: #3f3f46; cursor: pointer; line-height: 1.3; }
.acad-chk input { width: 15px; height: 15px; margin-top: 1px; accent-color: #1731c9; flex-shrink: 0; }

/* ---------- WhatsApp bubble ---------- */
#wa-bubble {
  position: fixed; right: 22px; bottom: 22px; z-index: 1000;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25d366; color: #fff;
  box-shadow: 0 12px 28px -8px rgba(37,211,102,.6), 0 4px 10px rgba(0,0,0,.18);
  transition: transform .18s ease;
}
#wa-bubble svg { width: 30px; height: 30px; }
#wa-bubble:hover { transform: scale(1.08); }
#wa-bubble::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,.55); animation: wa-pulse 2.4s infinite;
}
@keyframes wa-pulse { 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@media (max-width:640px){ #wa-bubble{ width:52px;height:52px;right:16px;bottom:16px; } }
@media print { #wa-bubble { display:none; } }

/* ---------- instant-quote modal ---------- */
.acad-hp { position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0; }
.acad-modal { position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:20px; }
.acad-modal[hidden] { display:none; }
.acad-modal__backdrop { position:absolute; inset:0; background:rgba(10,11,25,.55); backdrop-filter:blur(3px); animation:acad-fade .2s ease; }
.acad-modal__panel {
  position:relative; width:100%; max-width:860px; max-height:calc(100vh - 40px);
  overflow:hidden; background:#fff; border-radius:20px;
  box-shadow:0 40px 90px -20px rgba(10,11,25,.5); animation:acad-pop .22s cubic-bezier(.2,.8,.2,1);
}
.acad-modal__x { position:absolute; top:12px; right:12px; z-index:3; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.14); color:#fff; }
.acad-modal__x:hover { background:rgba(255,255,255,.24); }
.acad-modal__grid { display:grid; grid-template-columns:300px 1fr; max-height:calc(100vh - 40px); }
.acad-modal__rail { background:linear-gradient(160deg,#14162e,#050616); color:#fff; padding:40px 32px; }
.acad-modal__body { padding:36px; overflow-y:auto; }
.acad-tick { width:20px; height:20px; flex-shrink:0; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:720px){
  .acad-modal__x{ color:#18181b; background:rgba(0,0,0,.06); }
  .acad-modal__grid{ grid-template-columns:1fr; }
  .acad-modal__rail{ display:none; }
  .acad-modal__body{ padding:28px 22px; }
}
.acad-field { margin-bottom:14px; }
.acad-field__row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:480px){ .acad-field__row{ grid-template-columns:1fr; } }
.acad-field label { display:block; font-size:.82rem; font-weight:600; color:#18181b; margin-bottom:6px; }
.acad-field label span { color:#e5484d; margin-left:2px; }
.acad-field label .acad-opt { color:#a1a1aa; font-weight:500; }
.acad-field input, .acad-field select, .acad-field textarea {
  width:100%; border:1px solid #d4d4d8; border-radius:10px; padding:11px 13px; font-size:.92rem;
  color:#18181b; background:#fff; transition:border-color .15s ease, box-shadow .15s ease;
}
.acad-field input:focus, .acad-field select:focus, .acad-field textarea:focus {
  outline:none; border-color:#1731c9; box-shadow:0 0 0 3px rgba(23,49,201,.12);
}
.acad-field textarea { resize:vertical; }
.acad-more { margin:4px 0 8px; }
.acad-more summary { cursor:pointer; font-size:.82rem; font-weight:600; color:#1731c9; list-style:none; }
.acad-more summary::-webkit-details-marker { display:none; }
.acad-more[open] summary { margin-bottom:12px; }
.acad-error { color:#c11574; font-size:.82rem; margin:4px 0 10px; }
.acad-submit {
  width:100%; border:0; border-radius:999px; cursor:pointer; background:#1731c9; color:#fff;
  font-weight:600; font-size:.95rem; padding:14px 20px; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .15s ease, background .2s ease;
}
.acad-submit:hover { background:#111f9e; }
.acad-submit:active { transform:scale(.98); }
.acad-submit[disabled] { opacity:.75; cursor:progress; }
.acad-submit__loading { display:none; align-items:center; gap:8px; }
.acad-submit.is-loading .acad-submit__label { display:none; }
.acad-submit.is-loading .acad-submit__loading { display:inline-flex; }
.acad-submit--wa { background:#25d366; margin-top:18px; text-decoration:none; }
.acad-submit--wa:hover { background:#1fb855; }
.acad-spin { width:15px; height:15px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:acad-spin .7s linear infinite; }
.acad-fineprint { font-size:.72rem; color:#a1a1aa; text-align:center; margin-top:10px; }
.acad-fineprint a { color:#71717a; text-decoration:underline; }
#quote-success { text-align:center; padding:22px 8px; }
#quote-success .acad-success__mark { width:60px; height:60px; border-radius:50%; background:#e7f8e7; color:#12832b; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
#quote-success h3 { font-size:1.25rem; font-weight:600; color:#18181b; margin-bottom:8px; }
#quote-success p { font-size:.9rem; color:#52525b; }
[data-quote-success] { text-align:center; padding:22px 8px; }
[data-quote-success] .acad-success__mark { width:60px; height:60px; border-radius:50%; background:#e7f8e7; color:#12832b; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
[data-quote-success] h3 { font-size:1.25rem; font-weight:600; color:#18181b; margin-bottom:8px; }
[data-quote-success] p { font-size:.9rem; color:#52525b; }
@keyframes acad-fade { from { opacity:0; } }
@keyframes acad-pop  { from { opacity:0; transform:translateY(14px) scale(.98); } }
@keyframes acad-spin { to { transform:rotate(360deg); } }
body.acad-modal-open { overflow:hidden; }

/* admin panel */
.adm-wrap { max-width:1180px; margin:0 auto; padding:28px 20px 80px; }
.adm-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.adm-top img { height:30px; width:auto; }
.adm-stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
@media (max-width:640px){ .adm-stat-row{ grid-template-columns:1fr; } }
.adm-stat { background:#fff; border:1px solid #e4e4e7; border-radius:14px; padding:18px 20px; }
.adm-stat b { display:block; font-size:1.9rem; font-weight:600; color:#18181b; line-height:1.1; }
.adm-stat span { font-size:.8rem; color:#71717a; }
.adm-card { background:#fff; border:1px solid #e4e4e7; border-radius:16px; overflow:hidden; }
.adm-card__head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #e4e4e7; }
.adm-login { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:#f4f4f5; }
.adm-login form { background:#fff; border:1px solid #e4e4e7; border-radius:18px; padding:34px; width:100%; max-width:380px; }
.adm-login img { height:30px; margin-bottom:22px; }
.adm-table-wrap { overflow-x:auto; }
.adm-table { width:100%; border-collapse:collapse; min-width:920px; }
.adm-table th, .adm-table td { padding:.8rem 1rem; text-align:left; font-size:.85rem; border-bottom:1px solid #f1f1f3; vertical-align:top; }
.adm-table thead th { background:#fafafa; font-weight:600; color:#18181b; }

/* ================= preloader ================= */
#acad-preloader{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#f7f7f7;transition:opacity .35s ease,visibility .35s ease}
#acad-preloader.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.acad-pl-owl{width:64px;height:64px;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px -12px rgba(20,22,46,.25);animation:acad-pl-pop .6s cubic-bezier(.2,.8,.2,1)}
.acad-pl-bar{width:120px;height:4px;border-radius:999px;background:#e4e4e7;overflow:hidden}
.acad-pl-bar i{display:block;height:100%;width:40%;border-radius:999px;background:#1731c9;animation:acad-pl-slide 1s ease-in-out infinite}
@keyframes acad-pl-pop{from{transform:scale(.85);opacity:0}}
@keyframes acad-pl-slide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@media (prefers-reduced-motion:reduce){.acad-pl-bar i{animation:none;width:100%}}

/* ================= bold concept: headings + key labels ================= */
h1,h2,h3,h4,h5,h6{font-weight:700}
.acad-modal h2,.acad-modal h3{font-weight:700}
.acad-chk span{font-weight:600}

/* ================= turnstile widget spacing ================= */
.cf-turnstile{margin:6px 0 4px}
.acad-modal .cf-turnstile{transform:scale(.92);transform-origin:left top}

/* ================= testimonial cards (trustmary-style) ================= */
.acad-tm-wrap{position:relative}
.acad-tm-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 2px 14px}
.acad-tm-track::-webkit-scrollbar{height:6px}
.acad-tm-track::-webkit-scrollbar-thumb{background:#d4d4d8;border-radius:3px}
.acad-tm-card{scroll-snap-align:start;flex:0 0 340px;max-width:88vw;background:#fff;border:1px solid #ececef;border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.acad-tm-stars{display:flex;gap:3px;color:#f5a623}
.acad-tm-stars svg{width:18px;height:18px;fill:currentColor}
.acad-tm-quote{font-size:.98rem;line-height:1.6;color:#27272a;font-weight:500}
.acad-tm-media{border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/10}
.acad-tm-media img,.acad-tm-media video{width:100%;height:100%;object-fit:cover;display:block}
.acad-tm-who{display:flex;align-items:center;gap:12px;margin-top:auto}
.acad-tm-who img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}
.acad-tm-name{font-weight:700;font-size:.9rem;color:#18181b;line-height:1.2}
.acad-tm-role{font-size:.8rem;color:#71717a}
.acad-tm-badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;color:#12832b;background:#e7f8e7;border-radius:999px;padding:3px 9px;align-self:flex-start}
.acad-tm-empty{border:1px dashed #d4d4d8;border-radius:20px;padding:28px;text-align:center;color:#71717a;font-size:.9rem}

/* ================= quote form: tiers + richer module chips ================= */
.acad-tierlabel{font-size:.8rem;font-weight:700;color:#1731c9;background:#eef1ff;border-radius:10px;padding:8px 12px;margin-bottom:12px}
.acad-tierrow{display:flex;flex-wrap:wrap;gap:8px}
.acad-tierchip{position:relative;cursor:pointer}
.acad-tierchip input{position:absolute;opacity:0;pointer-events:none}
.acad-tierchip span{display:inline-block;border:1px solid #d4d4d8;border-radius:999px;padding:8px 16px;font-size:.85rem;font-weight:700;color:#3f3f46;transition:all .15s ease}
.acad-tierchip input:checked + span{background:#1731c9;border-color:#1731c9;color:#fff}
.acad-modgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:520px){.acad-modgrid{grid-template-columns:1fr}}
.acad-chk{display:flex;align-items:flex-start;gap:9px;border:1px solid #ececef;border-radius:12px;padding:10px 12px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.acad-chk:hover{border-color:#c7c7cc}
.acad-chk:has(input:checked){border-color:#1731c9;background:#f5f7ff}
.acad-chk input{width:16px;height:16px;margin-top:2px;accent-color:#1731c9;flex-shrink:0}
.acad-chk span{font-size:.8rem;line-height:1.35;color:#3f3f46}
.acad-chk span b{font-weight:700;color:#18181b}
.acad-chk span em{font-style:normal;color:#71717a;font-size:.74rem}

/* ================= readable type: soften sharp rendering (global) ================= */
/* pure #000 on #fff reads jagged; smoother edges + a touch of line height + no squeezed tracking */
html { -webkit-text-size-adjust: 100%; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: #242a33;
  line-height: 1.6;
}
/* kill pure black text - use a soft charcoal-blue instead */
.text-black { color: #1b2028; }
.text-default-950 { color: #171b23; }
p, li { line-height: 1.6; }
/* the template squeezes big headings with negative tracking - ease it right off */
.tracking-tighter { letter-spacing: -0.012em; }
.tracking-tight { letter-spacing: -0.008em; }
.tracking-normal { letter-spacing: 0; }
/* no ultra-thin weights - they break up on normal screens */
.font-thin, .font-extralight, .font-light { font-weight: 400; }
/* uppercase eyebrows get a hair of positive tracking so they don't mash together */
.uppercase { letter-spacing: 0.02em; }

/* ================= drag-to-scroll rails ================= */
.acad-drag { cursor: grab; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; }
.acad-drag::-webkit-scrollbar { display: none; }
.acad-drag.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.acad-drag.is-dragging a, .acad-drag.is-dragging img { pointer-events: none; }
.acad-drag > * { scroll-snap-align: start; }
.acad-drag img { -webkit-user-drag: none; user-select: none; }
.acad-dragrow { display: flex; gap: 20px; padding: 4px 2px 16px; width: max-content; }
.acad-draghint { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #71717a; }
.acad-draghint svg { width: 14px; height: 14px; }

/* ================= "what schools run on AcadiPlus" - clean brand cards (no stock photos) ================= */
.acad-run-card {
  scroll-snap-align: start; flex: 0 0 300px; max-width: 82vw; border-radius: 22px;
  padding: 26px; display: flex; flex-direction: column; justify-content: space-between; min-height: 236px;
  border: 1px solid #e8e8ee; background: #fff;
}
.acad-run-card .acad-run-top { font-size: .82rem; font-weight: 700; color: #52525b; }
.acad-run-card .acad-run-top span { font-weight: 500; color: #a1a1aa; }
.acad-run-card .acad-run-big { font-size: 2.6rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: #12193c; margin-bottom: 4px; }
.acad-run-card .acad-run-line { font-size: .95rem; font-weight: 600; line-height: 1.4; color: #3f3f46; }
.acad-run-card--navy { background: #12193c; border-color: #12193c; }
.acad-run-card--navy .acad-run-top { color: #aab4e6; } .acad-run-card--navy .acad-run-top span { color: #7c88bf; }
.acad-run-card--navy .acad-run-big { color: #fff; }
.acad-run-card--navy .acad-run-line { color: #d7dbf2; }
.acad-run-card--blue { background: #eef1ff; border-color: #dfe4ff; }
.acad-run-card--blue .acad-run-big { color: #1731c9; }

/* ================= feature rail - "built for the way your school runs" ================= */
.acad-frail-card {
  scroll-snap-align: start; flex: 0 0 232px; max-width: 78vw; border-radius: 20px; padding: 22px;
  background: #fff; border: 1px solid #ececf1; display: flex; flex-direction: column; gap: 12px;
}
.acad-frail-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #eef1ff; }
.acad-frail-ic i { font-size: 20px; color: #1731c9; }
.acad-frail-card h3 { font-size: .98rem; font-weight: 700; color: #18181b; line-height: 1.25; }
.acad-frail-card p { font-size: .82rem; line-height: 1.45; color: #6b6b76; }
.acad-frail-card--dark { background: #12193c; border-color: #12193c; }
.acad-frail-card--dark .acad-frail-ic { background: rgba(255,255,255,.1); }
.acad-frail-card--dark .acad-frail-ic i { color: #9fb0ff; }
.acad-frail-card--dark h3 { color: #fff; }
.acad-frail-card--dark p { color: #c3c8e6; }

/* ================= comparison band - softer than pure black ================= */
.acad-compare { background: #12193c; border-radius: 26px; }
.acad-compare-cell { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; }
.acad-compare-cell h3 { color: #fff; }
.acad-compare-cell p { color: #c3c8e6; }

/* ================= consistent vertical rhythm for the composed sections ================= */
.acad-band { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 1024px) { .acad-band { padding-top: 4.5rem; padding-bottom: 4.5rem; } }

/* ================= header wordmark polish ================= */
header .nav-sticky img[alt="AcadiPlus"] { display: block; }

/* ================= hero backdrop scrim (compiled CSS lacks arbitrary bg utilities) ================= */
.acad-hero-scrim { position: absolute; inset: 0; background: rgba(11,16,38,.58); z-index: 1; }

/* feature-section brand backgrounds - explicit rules so a renamed image still paints */
.acad-featbg { position: relative; background-color: #0e1330; background-size: cover; background-position: center; background-repeat: no-repeat; }
.acad-featbg-a { background-image: url('/images/feature-a.webp'); }
.acad-featbg-b { background-image: url('/images/feature-b.webp'); }
.acad-featbg-c { background-image: url('/images/feature-c.webp'); }

/* ================= guide article body ================= */
.acad-guide-body{font-size:1.06rem;line-height:1.75;color:#3f3f46}
.acad-guide-body>*+*{margin-top:1.15rem}
.acad-guide-body h2{font-size:1.6rem;font-weight:700;color:#18181b;margin-top:2.4rem;line-height:1.25}
.acad-guide-body h3{font-size:1.25rem;font-weight:700;color:#18181b;margin-top:1.9rem}
.acad-guide-body h4{font-size:1.05rem;font-weight:700;color:#18181b;margin-top:1.6rem}
.acad-guide-body p{color:#3f3f46}
.acad-guide-body a{color:#1731c9;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.acad-guide-body ul,.acad-guide-body ol{margin-left:1.3rem}
.acad-guide-body ul{list-style:disc}.acad-guide-body ol{list-style:decimal}
.acad-guide-body li{margin-top:.5rem}
.acad-guide-body img{border-radius:16px;margin:1.6rem 0}
.acad-guide-body blockquote{border-left:3px solid #1731c9;padding-left:1rem;color:#52525b;font-style:italic}
.acad-guide-body code{background:#f4f4f5;border-radius:6px;padding:.1rem .35rem;font-size:.9em}
.acad-guide-body pre{background:#14162e;color:#e4e4e7;border-radius:14px;padding:1rem 1.2rem;overflow-x:auto;font-size:.85rem}
.acad-guide-body table{width:100%;border-collapse:collapse;font-size:.92rem}
.acad-guide-body th,.acad-guide-body td{border:1px solid #e4e4e7;padding:.6rem .8rem;text-align:left}
.acad-guide-body th{background:#fafafa;font-weight:700}
