/* Oasis Care Group — WordPress (Astra) matched theme.
   Colors: primary #0F5CA8, dark blue #0C4A86, navy #1B3A6B, orange #F26722,
   educator bg #D9E8FA, cream card #FFFDF5, body #333333. System font stack, no webfonts. */
:root{
  --blue:#0F5CA8; --blue-dark:#0C4A86; --navy:#1B3A6B;
  --orange:#F26722; --orange-dark:#D9551A;
  --edu-bg:#D9E8FA; --cream:#FFFDF5;
  --ink:#333333; --muted:#33475F; --line:#e3e9f4; --link:#046BD2;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  font-size:16px;line-height:1.6}
a{color:var(--link)}
h1,h2,h3{font-weight:800;line-height:1.25;margin:0 0 12px;color:var(--navy)}
img{max-width:100%}

/* ── Nav ── */
header.nav{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:40}
.nav .bar{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;gap:14px;align-items:center}
.brand{font-weight:800;font-size:20px;color:var(--blue);text-decoration:none;letter-spacing:.3px}
.nav nav{display:flex;gap:16px;margin-left:auto;flex-wrap:wrap;align-items:center}
.nav nav a{text-decoration:none;color:var(--ink);font-size:15px;font-weight:600}
.nav nav a:hover{color:var(--blue)}
.nav-toggle{display:none;background:none;border:0;font-size:26px;cursor:pointer;color:var(--navy);
  margin-left:auto;padding:6px 10px;line-height:1}

/* ── Buttons (Astra-like) ── */
.btn{display:inline-block;padding:14px 30px;border-radius:4px;font-weight:700;font-size:1rem;
  text-decoration:none;cursor:pointer;border:0;box-shadow:0 2px 6px rgba(15,92,168,.18);
  transition:background .2s}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-dark);color:#fff}
.btn-outline{background:#fff;color:var(--blue);border:2px solid var(--blue);box-shadow:none}
.btn-outline:hover{background:var(--blue);color:#fff}
.btn-orange{background:var(--orange);color:#fff;padding:1.1rem 2rem;border-radius:12px;
  font-size:1.2rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;display:inline-block;text-align:center}
.btn-orange:hover{background:var(--orange-dark);color:#fff}

/* ── Layout ── */
.wrap{max-width:1200px;margin:0 auto}
section.block{padding:4rem 1.5rem}
.sec-title{font-size:2rem;color:var(--navy)}
.sec-sub{color:var(--muted);max-width:680px;margin:0 0 26px}
.eyebrow{display:inline-block;font-weight:700;font-size:.85rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.eyebrow.blue{color:var(--blue)}
.eyebrow.orange{color:var(--orange)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:760px){.grid2{grid-template-columns:1fr}.nav nav{display:none}}

/* ── Hero AUTO-FADING carousel (WordPress oasisFade, 20s cycle) ── */
.oasis-hero{background:#fff;padding:2rem 1.5rem 3rem;text-align:center}
.oasis-carousel{position:relative;max-width:1200px;height:440px;margin:0 auto;border-radius:8px;
  overflow:hidden;background:var(--blue)}
.oasis-fade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  animation:oasisFade 20s infinite}
.oasis-fade:nth-child(1){animation-delay:0s}
.oasis-fade:nth-child(2){animation-delay:5s}
.oasis-fade:nth-child(3){animation-delay:10s}
.oasis-fade:nth-child(4){animation-delay:15s}
@keyframes oasisFade{0%{opacity:0}5%{opacity:1}25%{opacity:1}30%{opacity:0}100%{opacity:0}}
/* Educator carousel: shorter frame, rounded */
.edu-carousel{height:320px;border-radius:16px}
@media(max-width:760px){.edu-carousel{height:230px}}
@media(prefers-reduced-motion:reduce){
  .oasis-track{transition:none}
  .float-anim{animation:none}
}
.oasis-hero-text{max-width:800px;margin:2rem auto 0}
.oasis-hero-text h1{font-size:clamp(1.8rem,4vw,2.8rem);color:var(--navy)}
.oasis-hero-text p{color:var(--muted);font-size:1.1rem}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}

/* ── Educators ── */
.edu-section{background:var(--edu-bg)}
.edu-card{background:var(--cream);border-radius:24px;padding:3.5rem 3rem;
  box-shadow:0 12px 40px rgba(27,58,107,.10)}
@media(max-width:760px){.edu-card{padding:2rem 1.4rem}}
.edu-badge{display:inline-block;background:var(--orange);color:#fff;font-weight:800;font-size:.85rem;
  letter-spacing:2px;text-transform:uppercase;border-radius:999px;padding:.5rem 1.2rem;margin-bottom:1rem}
.edu-card h2{color:var(--navy);text-transform:uppercase;font-size:2.4rem;margin:0 0 1rem}
.edu-photo{border-radius:16px;width:100%;display:block}
.edu-caption{color:var(--navy);font-size:.9rem;margin-top:.6rem}

/* ── Checklists ── */
ul.tick{list-style:none;padding:0;margin:0 0 1.6rem}
ul.tick li{padding:.45rem 0 .45rem 2rem;position:relative;font-size:1.02rem}
ul.tick li::before{content:"✓";position:absolute;left:0;font-weight:800;font-size:1.2rem}
ul.tick.tick-orange li::before{color:var(--orange)}
ul.tick.tick-blue li::before{color:var(--blue)}
ul.tick li{color:var(--muted)}

/* ── Telehealth float ── */
@keyframes oasisFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.float-anim{animation:oasisFloat 5s ease-in-out infinite}

/* ── Fade-up on scroll ── */
/* Content is ALWAYS visible by default. The homepage script adds .armed to
   each .reveal element only in the same synchronous block that creates the
   IntersectionObserver revealing it — so if any script fails, nothing is
   ever hidden. (The previous html.js gating hid every section whenever the
   module script failed, rendering the page blank — Dave's standing rule:
   content must never depend on an animation firing to become visible.) */
.reveal{transition:opacity .6s ease,transform .6s ease}
.reveal.armed{opacity:0;transform:translateY(24px)}
.reveal.armed.inview{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{transition:none}
  .reveal.armed{opacity:1;transform:none}
  .float-anim{animation:none}
}

/* ── Cards / products ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.card{border:1px solid var(--line);border-radius:12px;padding:22px;background:#fff}
.card h3{margin:0 0 8px;color:var(--navy);font-size:18px}
.card p{margin:0 0 14px;color:var(--muted);font-size:14.5px}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.product-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column}
.product-card img{width:100%;height:200px;object-fit:cover;display:block;background:#f4f7fb}
.product-card .pbody{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-card h3{font-size:1rem;margin:0;color:var(--navy);font-weight:700}
.product-card .price{font-weight:800;color:var(--blue);font-size:1.1rem}
.product-card .prow{display:flex;flex-direction:column;gap:8px;align-items:stretch;margin-top:auto}
.product-card .prow input{width:76px}
.product-card .prow .btn{white-space:nowrap;width:100%;box-sizing:border-box;padding:10px;font-size:15px;border-radius:8px;font-weight:600;text-align:center}
.product-card input[type=number]{width:64px;padding:8px;border:1px solid var(--line);border-radius:6px}
.product-card .details{font-size:.82rem;color:var(--muted)}

/* ── Contact (blue) ── */
.sec-contact{background:var(--blue);color:#fff}
.sec-contact h2{color:#fff}
.sec-contact p,.sec-contact label{color:#eaf2fd}
.sec-contact a{color:#fff;font-weight:700}
.sec-contact .field input,.sec-contact .field textarea{background:#fff}

/* ── Forms / tables / misc (shared with portal/staffing/shop) ── */
.form{max-width:520px}
.field{margin-bottom:14px}
.field label{display:block;font-weight:600;margin-bottom:6px;font-size:14px}
.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid var(--line);
  border-radius:6px;font-size:15px;font-family:inherit}
table.data{width:100%;border-collapse:collapse;font-size:14.5px}
table.data th,table.data td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}
.pill.open{background:#e6f4ea;color:#137333}
.pill.filled{background:#fce8e6;color:#a50e0e}
.tabs{display:flex;gap:8px;margin-bottom:20px}
.tabs button{padding:10px 20px;border:1px solid var(--line);background:#f7f9fd;border-radius:6px;
  cursor:pointer;font-weight:600;font-family:inherit}
.tabs button.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:8px;z-index:999;display:none;max-width:92vw;font-size:14.5px}

/* ── Cart drawer ── */
.cart-fab{position:relative;display:inline-flex;align-items:center;background:transparent;border:0;
  cursor:pointer;padding:3px}
.cart-fab .bag-ico{width:31px;height:31px;display:block}
.cart-count{position:absolute;top:-5px;right:-6px;z-index:2;background:#fff;color:#F46710;border:2px solid #111;font-size:11.5px;
  font-weight:800;border-radius:999px;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}
.cart-drawer{position:fixed;top:0;right:0;width:min(360px,92vw);height:100vh;background:#fff;z-index:70;
  box-shadow:-8px 0 30px rgba(27,58,107,.18);transform:translateX(105%);transition:transform .3s ease;display:flex;flex-direction:column}
.cart-drawer.open{transform:translateX(0)}
.cart-drawer .chead{padding:16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.cart-drawer .chead h3{margin:0}
.cart-drawer .cbody{flex:1;overflow-y:auto;padding:16px}
.cart-drawer .cfoot{border-top:1px solid var(--line);padding:16px}
.cart-line{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.cart-line img{width:56px;height:56px;object-fit:cover;border-radius:8px}
.cart-line .qty{display:flex;align-items:center;gap:6px}
.cart-line .qty button{width:26px;height:26px;border:1px solid var(--line);background:#f7f9fd;border-radius:6px;cursor:pointer}
.cart-overlay{position:fixed;inset:0;background:rgba(27,58,107,.35);z-index:65;display:none}
.cart-overlay.show{display:block}
.cart-close{background:none;border:0;font-size:22px;cursor:pointer;color:var(--muted)}

/* ── Dashboard stats / rate panels (staffing) ── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:18px 0}
.stat{border:1px solid var(--line);border-radius:12px;padding:16px;background:#f7f9fd}
.stat .num{font-size:1.5rem;font-weight:800;color:var(--navy)}
.stat .lbl{font-size:.85rem;color:var(--muted);font-weight:600}
.rate-note{font-size:.85rem;color:var(--muted)}

/* ── Service-area cards ── */
.area-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:24px}
.area-card{border:1px solid var(--line);border-radius:12px;padding:22px;background:#fff;text-decoration:none;display:block}
.area-card:hover{border-color:var(--blue)}
.area-card h3{margin:0 0 6px;color:var(--navy)}
.area-card p{margin:0;color:var(--muted);font-size:.94rem}

/* ── Shared inner-page hero (WP-matched) ── */
.page-hero{background:var(--blue);color:#fff;padding:3.2rem 1.5rem;text-align:center}
.page-hero h1{color:#fff;margin:0 0 10px;font-size:clamp(1.7rem,4vw,2.5rem)}
.page-hero p{margin:0 auto;max-width:680px;color:#eaf2fd;font-size:1.05rem}
.page-body{max-width:1000px;margin:0 auto;padding:2.6rem 1.5rem 3.4rem}

/* ── Footer ── */
footer{background:var(--navy);color:#dbe6fb;padding:2.2rem 1.5rem;text-align:center;font-size:.92rem}
footer a{color:#fff;font-weight:700}
footer strong{color:#fff}

/* ── Mobile responsiveness (match WP mobile: compact hero, contained images) ── */
@media(max-width:760px){
  .nav-toggle{display:block}
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;border-bottom:1px solid var(--line);box-shadow:0 8px 20px rgba(27,58,107,.12);margin:0}
  .nav nav.open{display:flex}
  .nav nav a{padding:14px 18px;border-top:1px solid var(--line);font-size:16px}
  header.nav .bar{position:relative}
  .oasis-hero{padding:1rem .75rem 1.75rem}
  /* WP mobile keeps the same 440px carousel frame (brief §4) */
  .oasis-carousel{height:440px;border-radius:8px}
  .oasis-hero-text{margin-top:1.25rem}
  .oasis-hero-text h1{font-size:1.55rem}
  .oasis-hero-text p{font-size:.98rem}
  .hero-cta .btn{width:100%;box-sizing:border-box;text-align:center}
  section.block{padding:2.5rem 1rem}
  .sec-title{font-size:1.5rem}
  .edu-card h2{font-size:1.55rem}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .product-card img{height:150px}
  .card{padding:16px}
  .float-anim{max-width:100%}
  table.data{font-size:13px}
  .tabs{flex-wrap:wrap}
}


/* ZF: zara-feel 20261018 */
.product-card img{aspect-ratio:7/5;height:auto}
.product-card h3{min-height:2.5em}
.product-card .price{min-height:1.4em}
.card img,.area-card img,.edu-card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.cart-fab{transition:transform .15s ease,opacity .15s ease}
.cart-fab:active{transform:scale(.92)}
.cart-overlay{opacity:0;transition:opacity .25s ease}
.cart-overlay.show{opacity:1}
.zf-viewfade{animation:zfFade .18s ease}
@keyframes zfFade{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .cart-drawer,.reveal,.cart-fab{transition:none!important;animation:none!important}
}