/* ==========================================================================
   Anoki design tokens — brand palette only
   Approved colours: blue #267BB6, deep blue #2D3F95, cyan #21C0DC, pink #F531D1,
   magenta #D021BA, white #FFFFFF, black #000000. Every other value below is one of
   these mixed with white or black (tints and shades), never a new colour.
   --b-*  header & footer (never change per page)
   --*    page colours; body.anoki-spec-{general|neuro|spine|child} picks a scheme
   ========================================================================== */
:root{
  --anoki-blue: #267BB6; --anoki-deep: #2D3F95; --anoki-cyan: #21C0DC;
  --anoki-pink: #F531D1; --anoki-magenta: #D021BA; --anoki-white: #FFFFFF; --anoki-black: #000000;

  --font-head: 'Newsreader', Georgia, serif;
  --font-body: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
  --radius: 6px; --radius-lg: 14px; --r: 18px; --container: 1240px;

  /* header & footer */
  --b-primary: var(--anoki-blue);
  --b-primary-dark: var(--anoki-deep);
  --b-primary-bright: var(--anoki-blue);
  --b-primary-tint: color-mix(in srgb, var(--anoki-blue) 7%, #fff);
  --b-primary-line: color-mix(in srgb, var(--anoki-deep) 22%, #fff);
  --b-accent: var(--anoki-magenta);
  --b-accent-dark: color-mix(in srgb, var(--anoki-magenta) 78%, #000);
  --b-accent-bright: var(--anoki-pink);
  --b-accent-tint: color-mix(in srgb, var(--anoki-magenta) 7%, #fff);
  --b-accent-line: color-mix(in srgb, var(--anoki-magenta) 25%, #fff);
  --b-cyan: var(--anoki-cyan);
  --b-cyan-tint: color-mix(in srgb, var(--anoki-cyan) 12%, #fff);
  --b-cyan-line: color-mix(in srgb, var(--anoki-cyan) 35%, #fff);
  --b-ink: color-mix(in srgb, var(--anoki-deep) 22%, #000);
  --b-ink-soft: color-mix(in srgb, #000 70%, #fff);
  --b-ink-faint: color-mix(in srgb, #000 58%, #fff);
  --b-bg: #fff;
  --b-bg-tint: color-mix(in srgb, var(--anoki-deep) 3%, #fff);
  --b-border: color-mix(in srgb, var(--anoki-deep) 12%, #fff);
  --b-white: #fff; --b-black: #000;
  --b-whatsapp: var(--anoki-deep);
  --b-footer-line: rgba(255,255,255,.12);
  --b-font-head: var(--font-head); --b-font-body: var(--font-body);
  --b-radius: 6px; --b-container: 1240px;
}

/* Page scheme: six main values; everything else is mixed from them below. */
body{
  --primary: var(--anoki-deep);
  --primary-dark: color-mix(in srgb, var(--anoki-deep) 72%, #000);
  --primary-bright: var(--anoki-blue);
  --accent: var(--anoki-magenta);
  --accent-dark: color-mix(in srgb, var(--anoki-magenta) 78%, #000);
  --accent-bright: var(--anoki-pink);
  --cyan: var(--anoki-cyan);

  --ink: color-mix(in srgb, var(--anoki-deep) 22%, #000);
  --ink-soft: color-mix(in srgb, #000 70%, #fff);
  --ink-faint: color-mix(in srgb, #000 58%, #fff);
  --bg: #fff; --white: #fff; --black: #000;
  --bg-tint: color-mix(in srgb, var(--anoki-deep) 3%, #fff);
  --border: color-mix(in srgb, var(--anoki-deep) 12%, #fff);
}
body,
body[class*="anoki-spec-"]{
  --primary-tint: color-mix(in srgb, var(--primary) 7%, #fff);
  --primary-line: color-mix(in srgb, var(--primary) 22%, #fff);
  --accent-tint:  color-mix(in srgb, var(--accent) 7%, #fff);
  --accent-line:  color-mix(in srgb, var(--accent) 25%, #fff);
  --warm-tint:    color-mix(in srgb, var(--accent) 4%, #fff);
  --cyan-tint:    color-mix(in srgb, var(--anoki-cyan) 12%, #fff);
  --cyan-line:    color-mix(in srgb, var(--anoki-cyan) 35%, #fff);
  /* "calm" (reassurance) uses cyan; "danger" (urgent/emergency) uses magenta — no green or red */
  --calm: color-mix(in srgb, var(--anoki-cyan) 40%, var(--anoki-deep));
  --calm-dark: var(--anoki-deep);
  --calm-tint: var(--cyan-tint);
  --calm-line: var(--cyan-line);
  --danger: color-mix(in srgb, var(--anoki-magenta) 80%, #000);
  --danger-dark: color-mix(in srgb, var(--anoki-magenta) 62%, #000);
  --danger-tint: color-mix(in srgb, var(--anoki-magenta) 7%, #fff);
  --danger-line: color-mix(in srgb, var(--anoki-magenta) 26%, #fff);
  --warn: var(--danger); --warn-tint: var(--danger-tint);
  --success: var(--calm);
  --whatsapp: var(--anoki-deep); --wa: var(--anoki-deep);
  --coral: var(--accent-bright); --coral-tint: var(--accent-tint);
}

/* Brain & neuro: deep blue with magenta */
body.anoki-spec-neuro{
  --primary: var(--anoki-deep); --primary-dark: color-mix(in srgb, var(--anoki-deep) 72%, #000); --primary-bright: var(--anoki-blue);
  --accent: var(--anoki-magenta); --accent-bright: var(--anoki-pink);
}
/* Spine: Anoki blue with cyan highlights */
body.anoki-spec-spine{
  /* Anoki blue, one step darker so small text on light tints stays readable */
  --primary: color-mix(in srgb, var(--anoki-blue) 82%, #000); --primary-dark: var(--anoki-deep); --primary-bright: var(--anoki-cyan);
  --accent: var(--anoki-magenta); --accent-bright: var(--anoki-cyan);
}
/* Children's health: the brand's deep-blue-to-magenta blend with pink highlights */
body.anoki-spec-child{
  --primary: color-mix(in srgb, var(--anoki-deep) 55%, var(--anoki-magenta)); --primary-dark: var(--anoki-deep); --primary-bright: var(--anoki-magenta);
  --accent: var(--anoki-magenta); --accent-bright: var(--anoki-pink);
}

/* ==========================================================================
   Base
   ========================================================================== */
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
html.anoki-menu-open{ overflow: hidden; }

/* Full-width Anoki pages inside Astra's wrappers */
body.anoki-template #content > .ast-container,
body.anoki-template .site-content > .ast-container{
  max-width: none; width: 100%; padding: 0; margin: 0; display: block;
}
body.anoki-template #primary.anoki-page{ margin: 0; padding: 0; width: 100%; float: none; }
body.anoki-template .site-content{ padding: 0; }

/* Resets the old pasted-in header applied to the whole site. The page designs were built on top of
   them, so they stay — limited to the content area and at zero priority. */
:where(.site-content) *{ margin: 0; padding: 0; }
:where(.site-content) a{ color: inherit; text-decoration: none; }
:where(.site-content) ul{ list-style: none; }
:where(.site-content) img{ max-width: 100%; display: block; }
:where(.site-content) button{ font-family: inherit; cursor: pointer; border: none; background: none; }

/* Defaults for page designs. :where() keeps these at zero priority so each design's own rules always win. */
:where(.anoki-page),:where(.anoki-page) *{ box-sizing: border-box; }
:where(.anoki-page) :focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; }

/* ==========================================================================
   Header & footer additions (the rest is in chrome.css)
   ========================================================================== */
.anoki-chrome .nav-item:focus-within .dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
.anoki-chrome .nav-item:focus-within .mega{ opacity:1; visibility:visible; transform: translate(-50%, 0); }
.anoki-chrome .nav-item:focus-within .chev{ transform: rotate(180deg); }
.anoki-chrome a:focus-visible, .anoki-chrome button:focus-visible{ outline: 3px solid var(--b-primary); outline-offset: 2px; border-radius: 6px; }
.anoki-chrome .utility-right a{ display:inline-flex; align-items:center; gap:6px; }
.anoki-chrome .utility-right svg{ width:14px; height:14px; }
.anoki-chrome .dropdown .dd-item{
  display:block; padding: 10px 12px; font-size: 13.5px; font-weight:600; color: var(--b-ink); border-radius:7px;
}
.anoki-chrome .dropdown .dd-item:hover{ background: var(--b-bg-tint); color: var(--b-primary); }
.anoki-chrome .dropdown-list{ min-width: 270px; }
.anoki-chrome .mp-link{ width:100%; text-align:left; background:none; }
.anoki-chrome .f-col .f-h{
  font-family: var(--b-font-body); font-size: 13.5px; font-weight: 700; color: #fff;
  margin-bottom: 18px; letter-spacing: .01em; line-height: 1.4;
}
.anoki-chrome .site-footer{ margin-top: 0; }
.anoki-chrome .logo img{ height: 48px; width: auto; }

/* Astra's screen-reader text is hidden until focused */
.anoki-chrome .skip-link:focus{
  position: fixed; top: 8px; left: 8px; z-index: 1000; clip: auto; width: auto; height: auto;
  padding: 10px 14px; background: #fff; color: var(--b-ink); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

@media (prefers-reduced-motion: reduce){
  .anoki-page *, .anoki-chrome *{ transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Astra and Elementor colour presets → Anoki brand palette
   (blog posts, search, 404, forms, scroll-to-top, Elementor-built pages)
   ========================================================================== */
:root:root{
  --ast-global-color-0: var(--anoki-deep);                                   /* links, buttons */
  --ast-global-color-1: color-mix(in srgb, var(--anoki-deep) 72%, #000);    /* hover */
  --ast-global-color-2: color-mix(in srgb, var(--anoki-deep) 22%, #000);    /* headings */
  --ast-global-color-3: color-mix(in srgb, #000 70%, #fff);                 /* body text */
  --ast-global-color-4: color-mix(in srgb, var(--anoki-deep) 3%, #fff);     /* light background */
  --ast-global-color-5: #fff;
  --ast-global-color-6: color-mix(in srgb, var(--anoki-deep) 12%, #fff);    /* borders */
  --ast-global-color-7: color-mix(in srgb, var(--anoki-deep) 22%, #fff);
  --ast-global-color-8: color-mix(in srgb, #000 58%, #fff);
  --e-global-color-primary: var(--anoki-deep);
  --e-global-color-secondary: var(--anoki-blue);
  --e-global-color-text: color-mix(in srgb, #000 70%, #fff);
  --e-global-color-accent: var(--anoki-magenta);
}
body:not(.anoki-template) .site-content{ color: var(--ast-global-color-3); }
body:not(.anoki-template) .site-content :is(h1,h2,h3,h4,h5,h6){ color: var(--ast-global-color-2); }
body:not(.anoki-template) .site-content a:not(.ak-btn):not(.ak-card):not(.ak-chip){ color: var(--anoki-deep); }
.site-content input:not([type=submit]):not([type=radio]):not([type=checkbox]), .site-content textarea, .site-content select{
  border-color: var(--ast-global-color-6);
}
.site-content input:focus, .site-content textarea:focus, .site-content select:focus{ border-color: var(--anoki-blue); outline: 2px solid color-mix(in srgb, var(--anoki-blue) 35%, transparent); }
.site-content button[type=submit], .site-content input[type=submit], .ast-button, .wp-block-button__link{
  background-color: var(--anoki-magenta); border-color: var(--anoki-magenta); color: #fff;
}
#ast-scroll-top{ background-color: var(--anoki-deep); color: #fff; }
#ast-scroll-top:hover{ background-color: var(--anoki-magenta); }
.site-content input, .site-content textarea, .site-content select{ color: var(--ast-global-color-2); }
.site-content .search-field{ background-color: #fff; }
.site-content .ast-icon, .site-content .ast-icon svg, .site-content .search-form i, .site-content .search-form svg{ color: var(--anoki-deep); fill: currentColor; }
.ast-comment, .comment-respond, .comments-area .avatar{ border-color: var(--ast-global-color-6) !important; }
.site-content input.search-field{ background-color: #fff !important; }
/* bigger tap areas for footer contact links on phones */
@media (max-width: 720px){
  .anoki-chrome .f-contact-item a, .anoki-chrome .f-col a, .anoki-chrome .f-bottom-links a{ display: inline-block; padding: 6px 0; }
}