/* ============================================================
   ABC Wellness — Global CSS
   Approved palette only: logo + color chart
   Acupuncture · Bodywork · Chiropractic
   ============================================================ */

:root {
  /* ── Logo colors (2) ──────────────────────────────────── */
  --abc-copper:    #A7683B;   /* A·B·C letters               */
  --abc-green:     #485C31;   /* "Wellness" word             */

  /* ── Color chart (7 approved) ────────────────────────── */
  --abc-teal:      #1A6C7A;   /* Primary Teal                */
  --abc-slate:     #153243;   /* Deep Slate — headings       */
  --abc-navy:      #000F2B;   /* Midnight Navy               */
  --abc-charcoal:  #3A3A3A;   /* Body text                   */
  --abc-ice:       #F3F9FB;   /* Ice Tint — page bg          */
  --abc-white:     #FFFFFF;
  --abc-pale-sky:  #BFD1FF;   /* Soft accent / highlight     */

  /* ── Semantic aliases (approved colors only) ─────────── */
  --abc-primary:       var(--abc-teal);
  --abc-primary-dark:  var(--abc-slate);   /* hover → deep slate  */
  --abc-primary-light: var(--abc-ice);     /* tint bg → ice       */
  --abc-secondary:     var(--abc-slate);
  --abc-dark:          var(--abc-navy);
  --abc-accent:        var(--abc-copper);
  --abc-body:          var(--abc-charcoal);
  --abc-text:          var(--abc-slate);
  --abc-bg:            var(--abc-ice);
  --abc-surface:       var(--abc-white);
  --abc-border:        var(--abc-pale-sky);  /* border → pale sky  */
  --abc-muted:         var(--abc-teal);      /* muted text → teal  */

  /* ── Shadows ──────────────────────────────────────────── */
  --abc-shadow-sm:    0 1px 3px  rgba(26,108,122,0.10);
  --abc-shadow-md:    0 4px 16px rgba(26,108,122,0.12);
  --abc-shadow-lg:    0 8px 32px rgba(26,108,122,0.16);
  --abc-shadow-focus: 0 0 0 3px  rgba(26,108,122,0.30);

  /* ── Typography ───────────────────────────────────────── */
  --abc-font-heading: 'Lora', Georgia, serif;
  --abc-font-body:    'Raleway', system-ui, sans-serif;

  /* ── Spacing ──────────────────────────────────────────── */
  --abc-sp-1:  0.25rem;  --abc-sp-2:  0.5rem;
  --abc-sp-3:  0.75rem;  --abc-sp-4:  1rem;
  --abc-sp-6:  1.5rem;   --abc-sp-8:  2rem;
  --abc-sp-12: 3rem;     --abc-sp-16: 4rem;
  --abc-sp-24: 6rem;

  /* ── Layout ───────────────────────────────────────────── */
  --abc-container: 1200px;
  --abc-narrow:    760px;
  --abc-radius-sm: 0.375rem;
  --abc-radius-md: 0.75rem;
  --abc-radius-lg: 1rem;
  --abc-radius-xl: 1.5rem;

  /* ── Motion ───────────────────────────────────────────── */
  --abc-dur-micro:  150ms;
  --abc-dur-std:    250ms;
  --abc-dur-enter:  300ms;
  --abc-dur-overlay:400ms;
  --abc-ease-enter: cubic-bezier(0.0, 0.0, 0.2, 1);
  --abc-ease-exit:  cubic-bezier(0.4, 0.0, 1, 1);

  /* ── Z-index ──────────────────────────────────────────── */
  --abc-z-base:    10;
  --abc-z-overlay: 20;
  --abc-z-modal:   30;
  --abc-z-nav:     50;
  --abc-z-fullnav: 100;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  margin: 0;
}

body {
  margin: 0;
  font-family: var(--abc-font-body);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  color: var(--abc-body);
  background-color: var(--abc-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ───────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--abc-font-heading);
  color: var(--abc-text);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;       /* prevent single-word final lines */
}

h1 { font-size: clamp(2.25rem,1.5rem + 3.5vw,4rem);   font-weight:700; letter-spacing:-0.02em; }
h2 { font-size: clamp(1.75rem,1.25rem + 2.5vw,3rem);  font-weight:600; }
h3 { font-size: clamp(1.375rem,1rem + 1.5vw,2rem);    font-weight:600; }
h4 { font-size: clamp(1.125rem,1rem + 0.75vw,1.5rem); font-weight:500; color:var(--abc-teal); }
h5 { font-size:1.125rem; font-weight:500; }
h6 { font-size:1rem;     font-weight:500; }

p {
  max-width: 68ch;
  margin-bottom: var(--abc-sp-4);
  orphans: 3;
  widows: 3;
  text-wrap: pretty;        /* avoid lone words on final line */
}
p:last-child { margin-bottom:0; }

a {
  color: var(--abc-teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--abc-dur-micro) var(--abc-ease-enter);
}
a:hover, a:focus-visible { color: var(--abc-slate); }

strong { font-weight:600; }
em     { font-style:italic; }

/* ── Focus ────────────────────────────────────────────────── */
:focus-visible {
  outline: none;
  box-shadow: var(--abc-shadow-focus);
  border-radius: var(--abc-radius-sm);
}

/* ── Images ───────────────────────────────────────────────── */
img,video,svg { max-width:100%; height:auto; display:block; }

/* ── Containers ───────────────────────────────────────────── */
.abc-container {
  width:100%;
  max-width:var(--abc-container);
  margin-inline:auto;
  padding-inline:clamp(1rem,5vw,2.5rem);
}
.abc-container--narrow { max-width:var(--abc-narrow); }
.abc-container--wide   { max-width:1360px; }

/* ── Sections ─────────────────────────────────────────────── */
.abc-section    { padding-block: clamp(3rem,8vw,6rem); }
.abc-section--sm{ padding-block: clamp(2rem,5vw,3.5rem); }

/* ── Astra + WP overrides ─────────────────────────────────── */
body { background: var(--abc-bg) !important; }
.ast-container { max-width: var(--abc-container) !important; }
#masthead,
.ast-masthead,
.site-header,
.ast-above-header-wrap,
.ast-below-header-wrap { display:none !important; }

/* Push fixed header below WP admin bar when logged in */
#wpadminbar ~ * .abc-header,
body.admin-bar .abc-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .abc-header { top: 46px; }
  body.admin-bar { padding-top: calc(80px + 46px) !important; }
}
body.admin-bar { padding-top: calc(80px + 32px) !important; }

/* ── Screen reader ────────────────────────────────────────── */
.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;
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}