/*
Theme Name: IAPA Kadence Child
Template: kadence
Description: Child theme for the Indian Acupuncture Practitioners Association website. "Organic" design system — ported 1:1 from the Claude Design Canvas reference at docs/redesign/IAPA Website.dc.html (source: docs/redesign/_ds/organic-.../styles.css).
Version: 4.0.0
Text Domain: iapa-kadence-child
*/

:root {
  --color-bg: #f7f8fd;
  --color-surface: #edeef4;
  --color-text: #1d1e29;
  --color-accent: #5356b3;
  --color-accent-2: #6d4177;
  --color-divider: color-mix(in srgb, #1d1e29 16%, transparent);

  --color-neutral-100: #f7f8fd;
  --color-neutral-200: #f0f1f7;
  --color-neutral-300: #edeef5;
  --color-neutral-400: #cbcdd7;
  --color-neutral-500: #9c9ea9;
  --color-neutral-600: #6f717c;
  --color-neutral-700: #53545f;
  --color-neutral-800: #31323b;
  --color-neutral-900: #1d1e29;

  --color-accent-100: #f2f4ff;
  --color-accent-200: #dbdffc;
  --color-accent-300: #b9c0f2;
  --color-accent-400: #929ae5;
  --color-accent-500: #6e74d4;
  --color-accent-600: #5356b3;
  --color-accent-700: #3f4192;
  --color-accent-800: #2c2e65;
  --color-accent-900: #151636;

  --color-accent-2-100: #faf2fc;
  --color-accent-2-200: #eedff1;
  --color-accent-2-300: #ddc4e3;
  --color-accent-2-400: #c2a0ca;
  --color-accent-2-500: #a57fae;
  --color-accent-2-600: #896092;
  --color-accent-2-700: #6d4177;
  --color-accent-2-800: #4d2b54;
  --color-accent-2-900: #2b1531;

  --font-heading: "Libre Franklin", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Libre Franklin", system-ui, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #1d1e29 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #1d1e29 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #1d1e29 22%, transparent);
}

html[lang="ml"], html[lang^="ml-"] {
  --font-body: "Noto Sans Malayalam", system-ui, sans-serif;
  --font-heading: "Noto Sans Malayalam", serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* Kadence integration: neutralize the theme's own chrome (banner, boxed
   content wrapper, background/font ties to its Customizer settings) so
   the reference design's tokens/components are the only thing visible.
   !important is needed on rules that also exist in Kadence's own inline
   customizer CSS, which loads after this stylesheet and wins ties
   otherwise (confirmed empirically — same class of bug hit repeatedly
   porting this design). */
.entry-hero { display: none !important; }
.entry.single-entry, .entry.loop-entry { box-shadow: none !important; }
.entry-content-wrap { padding: 0 !important; }
html, body, #wrapper, .site, .wp-site-blocks, body.content-style-unboxed .site,
.entry.content-bg, .site-main .content-container,
.woocommerce-account .woocommerce, .woocommerce-page .woocommerce {
  background: var(--color-bg) !important;
}

body {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
  color: var(--color-text) !important;
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-700); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.washed { filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94); }
.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  /* Override the parent Kadence theme's `transition: all 0.2s` -- a
     toggle button (day pills, cadence, mode) can get clicked again
     before that transition finishes, which was leaving the background
     stuck showing the pre-click color until an unrelated repaint (e.g.
     switching windows) caught it up. State-reflecting toggles must be
     correct immediately, so no transition on them at all. */
  transition: none;
  /* Confirmed via MutationObserver that the class swap lands on the
     element in the same millisecond as the click -- the DOM is right,
     Chrome just wasn't repainting it inside this modal's nested
     overflow:hidden/overflow:auto stacking context until an unrelated
     interaction forced a repaint. Promoting to its own compositing
     layer makes background-color changes paint immediately regardless
     of the parent's repaint scheduling. */
  will-change: background-color;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
/* Explicit color needed here, not just background: the parent Kadence
   theme's own `button:hover` rule sets color:#fff (designed to pair with
   its own solid hover background) and, since this rule never mentioned
   color, that white was winning the cascade -- landing white text on
   this ghost button's near-transparent hover background. */
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input,
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], textarea, select {
  width: 100%; min-height: 36px; padding: 6px 10px; padding-inline: 14px; font: inherit;
  font-size: 14px; color: var(--color-text) !important; caret-color: var(--color-accent);
  background: var(--color-surface) !important;
  border: 1px solid var(--color-divider) !important; border-radius: 999px !important;
}
.input:hover, input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent) !important; }
.input:focus-visible, input:focus-visible { border-color: var(--color-accent) !important; outline-offset: 0; }
textarea.input, textarea { min-height: 90px; resize: vertical; border-radius: var(--radius-md) !important; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-divider); }
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); }
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: calc(var(--radius-lg) * 1.15); background: var(--color-surface); }
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }
/* iapa-directory-* names are referenced from inc/directory.php's card
   markup — kept as aliases onto the reference's own .card pattern so the
   live (currently empty) directory matches visually once populated. */
.iapa-directory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 24px; }
.iapa-directory-card { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: calc(var(--radius-lg) * 1.15); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.iapa-directory-card h3 { margin: 0; font-size: 20px; }
.iapa-directory-empty { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
/* Practitioner dashboard lists (appointments/patients/locations/
   availability) -- three .card tiles per row on desktop, one per row on
   mobile (matches .iapa-cards-grid's breakpoint in page-home.php). */
.iapa-dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 768px) {
  .iapa-dash-grid { grid-template-columns: 1fr; }
}

/* — tags — */
.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — dialog (booking modal) — */
.dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); }
.dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: calc(var(--radius-lg) * 1.15); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; margin: 0; }
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* rounded frame: pill controls */
.btn, .tag, .seg, .input { border-radius: 999px; }

/* ---------- Header (structural, Kadence-specific — not in the reference
   stylesheet since the reference's header is plain markup, not Kadence's
   header-builder chrome) ---------- */
#masthead, .site-header, .site-header-row-container-inner, .site-main-header-wrap {
  background: color-mix(in srgb, var(--color-bg) 92%, transparent) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.main-navigation a, .site-title a, .site-title { color: var(--color-text) !important; font-size: 14px; }
.main-navigation a:hover, .main-navigation a[aria-current="page"] { color: var(--color-accent) !important; }
.nav-brand { font-family: var(--font-heading); font-size: 18px; }

/* Center the primary nav within the header row. Kadence's header-builder
   layout here is "sides" with no center slot (site-header-row-has-sides
   site-header-row-no-center), so the nav item is a flex child alongside
   branding/avatar rather than a real center column — absolutely
   positioning it over the row centers it visually without disturbing the
   space branding/avatar get. Desktop-only (matches Kadence's own
   1025px breakpoint): the mobile drawer nav is a different, already-
   vertical layout that this would only break. */
@media (min-width: 1025px) {
  .site-main-header-inner-wrap { position: relative; }
  .site-header-item-main-navigation { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  /* Avatar is moved here (out of the nav box) by header-avatar.js so it can
     pin to the row's own right edge instead of centering with the nav. */
  .site-main-header-inner-wrap > .iapa-avatar { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
}

/* Logo + wordmark: Kadence's header-builder branding area renders a single
   text title regardless of the assigned custom_logo attachment — faked via
   a background-image swap on that element, with the hidden text restored
   as a ::before wordmark line ("IAPA") since the uploaded logo is the
   emblem mark only and contains no wordmark. The full expanded tagline
   (previously ::after) is dropped: the new logo replaces its visual role. */
.site-branding .site-title, .site-branding .site-title-wrap {
  background-image: url("https://iapaassociation.com/wp-content/uploads/2026/08/iapa_logo.png");
  background-repeat: no-repeat; background-position: left center; background-size: contain;
  display: inline-flex; align-items: center; width: 44px; height: 44px;
  overflow: visible; text-indent: -9999px; position: relative;
}
.site-branding .site-title::before {
  content: "IAPA"; position: absolute; left: 56px; top: 50%; transform: translateY(-50%);
  text-indent: 0; font-family: var(--font-heading); font-size: 22px; letter-spacing: 0.02em; color: var(--color-text); white-space: nowrap;
}

.iapa-header-cta { display: inline-flex; align-items: center; white-space: nowrap; }
.iapa-avatar { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; }
.iapa-avatar img, .iapa-avatar svg { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Footer ----------
   Kadence's own default footer (#colophon, the "WordPress Theme by
   Kadence WP" bar) is replaced entirely by inc/footer.php's custom
   markup, injected via kadence_before_footer — that hook fires as a
   sibling before Kadence's real footer element, not inside it, so the
   native one has to be hidden explicitly or both would render stacked. */
#colophon, .site-footer { display: none !important; }

/* Custom scroll indicator for tall modals (e.g. #iapa-avail-modal's
   .dialog): hides the native scrollbar but keeps wheel/touch/keyboard
   scrolling working, replaced with a slim non-interactive bar showing
   how much content is above/below the current scroll position. */
.iapa-custom-scroll { scrollbar-width: none; -ms-overflow-style: none; position: relative; }
.iapa-custom-scroll::-webkit-scrollbar { display: none; }
.iapa-scroll-indicator-track { position: absolute; top: 0; right: 6px; bottom: 0; width: 4px; border-radius: 2px; background: var(--color-divider); display: none; }
.iapa-scroll-indicator-thumb { position: absolute; right: 0; width: 4px; border-radius: 2px; background: var(--color-neutral-400); }