/* =========================================================================
 * NovaMed Design System  Single source of truth for layout, type, spacing.
 * Loaded LAST in functions.php so it overrides legacy critical.css declarations.
 *
 * Rules:
 *  1. ONE container width across the site
 *  2. ONE H1 scale across all pages
 *  3. ONE breadcrumb position (16px below nav, 8px above H1)
 *  4. ONE primary CTA style
 *  5. ONE section vertical rhythm
 *
 * Source: research/01 (world leaders restraint) + research/02 (UA consistency gaps)
 * ========================================================================= */

:root {
  /* Design tokens  single source */
  --ds-container-max:    1280px;
  --ds-container-pad-mobile: 20px;
  --ds-container-pad-tablet: 32px;
  --ds-container-pad-desktop:40px;

  --ds-section-pad-mobile:  48px;
  --ds-section-pad-desktop: 72px;

  /* Spacer between last content section and footer band */
  --ds-main-end-gap:     80px;
  --ds-main-end-gap-mobile: 48px;

  --ds-h1-min:        28px;
  --ds-h1-max:        44px;
  --ds-h2-min:        22px;
  --ds-h2-max:        34px;

  --ds-text-primary:     #1d1d1f;
  --ds-text-muted:      #6e6e73;
  --ds-text-mute2:      #8e8e93;
  --ds-line:         rgba(15, 38, 60, .08);
  --ds-brand:        var(--primary-color, #09ca8f);

  /* Spacing scale — single source for gaps/paddings */
  --ds-gap-xs:   4px;
  --ds-gap-sm:   8px;
  --ds-gap-md:   12px;
  --ds-gap-lg:   20px;
  --ds-gap-xl:   24px;
  --ds-gap-2xl:  32px;
  --ds-gap-3xl:  48px;

  /* Radius scale — standardize the 11 ad-hoc values found across the theme */
  --ds-radius-sm:   8px;   /* inputs, badges, small chips */
  --ds-radius-md:   12px;  /* cards, modals, service items */
  --ds-radius-lg:   16px;  /* large containers */
  --ds-radius-xl:   18px;  /* promo hero cards */
  --ds-radius-pill: 999px; /* buttons */

  /* Hero block rhythm — actual rule lives in critical.css (above-the-fold,
     must be inline so it doesn't shift when this deferred sheet loads) */
  --ds-hero-pad-top:        24px;
  --ds-hero-pad-bottom:     12px;
  --ds-hero-pad-top-mobile: 16px;
}

/* --- 1. CONTAINERS: единое максимальное правило ---------------------- */

.container,
.s2__container {
  max-width: var(--ds-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ds-container-pad-mobile);
  padding-right: var(--ds-container-pad-mobile);
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .container,
  .s2__container {
    padding-left: var(--ds-container-pad-tablet);
    padding-right: var(--ds-container-pad-tablet);
  }
}
@media (min-width: 1280px) {
  .container,
  .s2__container {
    padding-left: var(--ds-container-pad-desktop);
    padding-right: var(--ds-container-pad-desktop);
  }
}

/* --- 2. BREADCRUMBS: одинаковая позиция везде ------------------------ */

/* Universal: 16px below nav, 8px above next heading */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 16px 0 8px;
  padding: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ds-text-muted);
  letter-spacing: .1px;
}
.breadcrumbs a {
  color: var(--ds-text-muted);
  text-decoration: none;
  font-weight: 400;
  transition: color .15s ease;
  border-bottom: 1px dashed transparent;
}
.breadcrumbs a:hover {
  color: var(--ds-brand);
  border-bottom-color: var(--ds-brand);
}
.breadcrumbs .bc-sep {
  margin: 0 4px;
  color: var(--ds-text-mute2);
}
.breadcrumbs .bc-current {
  color: var(--ds-text-primary);
  font-weight: 500;
}

/* Wrapper used on service-v2: zero its own padding-top, let .breadcrumbs handle */
.s2__crumbs { padding: 0 !important; }

/* Archive hero breadcrumbs  same vertical rhythm */
.archive-hero .breadcrumbs,
.page-hero .breadcrumbs {
  margin: 16px 0 8px;
}

/* --- 3. HEADINGS: unified scale -------------------------------------- */

.archive-hero__title,
.s2-hero__title,
.entry-title,
.page-title,
h1.hero__title,
.hero-title {
  font-size: clamp(var(--ds-h1-min), 4vw, var(--ds-h1-max)) !important;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.6px;
  color: var(--ds-text-primary);
  margin: 0 0 16px;
  font-family: var(--font-alt, var(--font, 'Nunito', sans-serif));
}

h2,
.section-title,
.fp-section__heading-text {
  font-size: clamp(var(--ds-h2-min), 3vw, var(--ds-h2-max));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.4px;
  color: var(--ds-text-primary);
}

/* --- 4. HERO/SECTION vertical rhythm --------------------------------- */

.archive-hero {
  padding-top: 24px;
  padding-bottom: 32px;
}
@media (min-width: 768px) {
  .archive-hero { padding-top: 32px; padding-bottom: 48px; }
}

.s2-hero { padding: 24px 0 48px !important; }
@media (min-width: 1024px) { .s2-hero { padding: 32px 0 72px !important; } }

.fp-section {
  padding: var(--ds-section-pad-mobile) 0;
}
@media (min-width: 768px) {
  .fp-section { padding: var(--ds-section-pad-desktop) 0; }
}

/* --- 5. CTA  единый primary + ghost --------------------------------- */

.cta-primary,
.btn-primary,
.s2-btn--primary,
.fp-link-all--btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  background: var(--ds-brand);
  color: #fff;
  text-decoration: none;
  border: 1.5px solid var(--ds-brand);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  cursor: pointer;
}
.cta-primary:hover,
.btn-primary:hover,
.s2-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(9, 202, 143, .55);
  color: #fff;
}

.cta-ghost,
.btn-ghost,
.s2-btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  background: transparent;
  /* fix 2026-05-19: use --primary-dark (5.4:1 vs white) instead of --ds-brand
    (#09ca8f, 2.1:1) so ghost-button text passes WCAG AA. */
  color: var(--primary-dark, #067A55);
  border: 1.5px solid color-mix(in srgb, var(--ds-brand) 50%, transparent);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
  cursor: pointer;
}
.cta-ghost:hover,
.btn-ghost:hover,
.s2-btn--ghost:hover {
  background: #f6fbf9;
  border-color: var(--primary-dark, #067A55);
}

/* --- 6. KILL NOISE (research/01 anti-patterns) ----------------------- */

/* Hide aggressive promo elements project-wide if accidentally added */
.countdown,
.fake-urgency,
.popup-newsletter,
.chat-bubble-bouncing {
  display: none !important;
}

/* --- 6b. Store badges (App Store / Google Play)  preserve native aspect ratio */
.store-badges {
  display: flex !important;
  gap: 12px !important;
  align-items: center;
  flex-wrap: wrap;
}
.store-badges .store-badge {
  display: inline-flex !important;
  flex: 0 0 auto !important;     /* don't grow, don't shrink  true content width */
  align-items: center;
  min-width: 0 !important;       /* override critical.css min-width 48px */
  max-width: 180px;
  border-radius: 8px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .2s ease;
}
.store-badges .store-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(15, 38, 60, .12);
}
.store-badges img {
  display: block !important;
  height: 44px !important;
  width: auto !important;       /* IMPORTANT  preserve aspect ratio */
  max-width: 100%;
  object-fit: contain;
  border: none !important;
  border-radius: 0;
}

/* --- 7. Mobile refinements ------------------------------------------- */

@media (max-width: 767px) {
  body { font-size: 15.5px; }
  .breadcrumbs { font-size: 12.5px; gap: 3px; margin: 12px 0 6px; }
  .cta-primary, .cta-ghost { padding: 12px 20px; font-size: 14.5px; }
}

/* --- 8. Contact Form CF7  NovaMed zvern. -----------------------------
  Placeholder-only design (no labels), with a clear container outline
  to match the premium feel of the rest of the site. */

.cf7-novamed-form {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 2px 12px rgba(15, 38, 60, .04);
  max-width: 720px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .cf7-novamed-form { padding: 18px 14px; border-radius: 12px; }
}

.cf7-novamed-form .cf7-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 640px) {
  .cf7-novamed-form .cf7-row { grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px; }
}
.cf7-novamed-form .cf7-field { margin: 0; }
.cf7-novamed-form .cf7-field--full { margin-bottom: 10px; }
/* WP wpautop injects <br> tags between label and input, kill them */
.cf7-novamed-form .cf7-field > br,
.cf7-novamed-form p > br { display: none; }

/* Hide labels  placeholders carry the meaning */
.cf7-novamed-form label {
  display: none !important;
}
/* But keep accessible label text in DOM for screen readers via visually-hidden fallback,
  when label is the only child of .cf7-field we still need it focusable for SR. */
.cf7-novamed-form .cf7-field > label:only-child {
  display: block !important;
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.cf7-novamed-form .req { color: #d4471d; margin-left: 2px; }
.cf7-novamed-form input[type=text],
.cf7-novamed-form input[type=email],
.cf7-novamed-form input[type=tel],
.cf7-novamed-form input[type=date],
.cf7-novamed-form select,
.cf7-novamed-form textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  font-size: 14px;
  line-height: 1.35;
  font-family: inherit;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
  color: var(--ds-text-primary);
}
.cf7-novamed-form textarea { min-height: 88px; resize: vertical; }
.cf7-novamed-form input::placeholder,
.cf7-novamed-form textarea::placeholder {
  color: #9aa2ad;
  opacity: 1;
}
/* Subtle required marker since labels are hidden */
.cf7-novamed-form input[aria-required="true"],
.cf7-novamed-form select[aria-required="true"],
.cf7-novamed-form textarea[aria-required="true"] {
  border-left: 3px solid var(--ds-brand, #09ca8f);
}
.cf7-novamed-form input[aria-required="true"]:focus,
.cf7-novamed-form select[aria-required="true"]:focus,
.cf7-novamed-form textarea[aria-required="true"]:focus {
  border-left-color: var(--ds-brand, #09ca8f);
}
.cf7-novamed-form input:focus,
.cf7-novamed-form select:focus,
.cf7-novamed-form textarea:focus {
  border-color: var(--ds-brand);
  box-shadow: 0 0 0 3px rgba(9, 202, 143, .12);
  outline: 0;
}
.cf7-novamed-form input.wpcf7-not-valid,
.cf7-novamed-form select.wpcf7-not-valid,
.cf7-novamed-form textarea.wpcf7-not-valid {
  border-color: #d4471d;
}
.cf7-novamed-form input[type=submit].cta-primary,
.cf7-novamed-form .wpcf7-submit {
  margin-top: 4px;
  padding: 11px 24px;
  font-size: 14px;
  cursor: pointer;
  width: auto;
}
.cf7-novamed-form .wpcf7-response-output {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid;
  font-size: 14.5px;
}
/* Widen the border-color tokens to account for CF7's wpcf7-response-output states */
.cf7-novamed-form .wpcf7-mail-sent-ok.wpcf7-response-output {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}
.cf7-novamed-form .wpcf7-mail-sent-ng.wpcf7-response-output,
.cf7-novamed-form .wpcf7-validation-errors.wpcf7-response-output {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}
/* Span wrapper inside CF7 field  remove inline-block default */
.cf7-novamed-form span.wpcf7-form-control-wrap {
  display: block;
}
/* Validation tip */
.cf7-novamed-form .wpcf7-not-valid-tip {
  font-size: 12.5px;
  color: #d4471d;
  margin-top: 4px;
  display: block;
}

/* ==========================================================================
  Methodology page (transparency  /yak-my-otsinyuyemo-likariv/)
  ========================================================================== */

.methodology-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 0 72px;
}

.methodology-sec {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0 20px;
  padding: 32px 0;
  border-bottom: 1px solid var(--ds-line, rgba(15, 38, 60, .08));
  align-items: start;
}

.methodology-sec:first-child { padding-top: 0; }
.methodology-sec:last-child { border-bottom: none; }

.methodology-sec__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ds-brand, #09ca8f) 10%, transparent);
  color: var(--ds-brand, #09ca8f);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.methodology-sec__body { }

.methodology-sec__title {
  font-size: 20px !important;
  font-weight: 700;
  color: var(--ds-text-primary);
  letter-spacing: -.3px;
  margin: 6px 0 14px;
}

.methodology-sec__body p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ds-text-primary);
  margin: 0 0 12px;
}

.methodology-sec__body ul {
  padding-left: 18px;
  margin: 0 0 12px;
}

.methodology-sec__body li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ds-text-primary);
  margin-bottom: 6px;
}

.methodology-cta {
  margin-top: 40px;
  padding: 28px 32px;
  background: color-mix(in srgb, var(--ds-brand, #09ca8f) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-brand, #09ca8f) 20%, transparent);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.methodology-cta__text {
  font-size: 15px;
  color: var(--ds-text-primary);
  margin: 0;
  line-height: 1.5;
}

/* page-hero subtitle */
.page-hero__lead {
  font-size: 16px;
  color: var(--ds-text-muted, #6e6e73);
  margin: -4px 0 0;
  max-width: 600px;
  line-height: 1.6;
}

@media (max-width: 599px) {
  .methodology-sec {
    grid-template-columns: 1fr;
    gap: 14px 0;
  }
  .methodology-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
}


/* =========================================================================
 * Section spacing standardization (2026-05-20)
 * One consistent vertical rhythm across pages, archives, singulars.
 * ========================================================================= */

/* First child of any content area starts flush (no extra top margin) */
.site-main .entry-content > *:first-child,
.site-main .page-content > *:first-child,
.site-main article > *:first-child,
.site-main .aic-reviews-archive__container > *:first-child,
.site-main > *:first-child {
  margin-top: 0;
}

/* Last child of any content area sits flush (no extra bottom margin),
   parent paddings (--ds-main-end-gap) handles the gap to footer */
.site-main .entry-content > *:last-child,
.site-main .page-content > *:last-child,
.site-main article > *:last-child,
.site-main .aic-reviews-archive__container > *:last-child {
  margin-bottom: 0;
}

/* Hide WP Gutenberg spacer blocks (legacy from Astra-era content);
   they create unpredictable gaps. Real spacing comes from CSS. */
.site-main .wp-block-spacer { display: none !important; }

/* Ensure standalone <p> at the top has no extra top space */
.site-main .entry-content > p:first-of-type,
.site-main .page-content > p:first-of-type { margin-top: 0; }

/* Standardize gap between archive-hero / page-hero and first content section */
.site-main .archive-hero + *,
.site-main .page-hero + * { margin-top: 0; }

/* Generic Gutenberg columns (used on legacy page kontakty etc.):
   strip default 2em top margin so they hug the heading above. */
.site-main .entry-content > .wp-block-columns:first-of-type { margin-top: 0; }

/* ─── Polish #1 (2026-05-21): inline H2/H3 spacing inside text contexts ───
 * Article-text containers (.prose, .entry-content, .prep-content) get extra
 * top margin on H2/H3 to avoid headings sitting flush against the previous
 * paragraph. Section-level headings (.s2-sec__title, .fp-section__heading,
 * card titles) are NOT touched, their spacing is governed by container padding. */
.prose > h2:not(:first-child),
.entry-content > h2:not(:first-child),
.prep-content > h2:not(:first-child),
.aic-patients__body h2:not(:first-child) {
  margin-top: 32px;
}
.prose > h3:not(:first-child),
.entry-content > h3:not(:first-child),
.prep-content > h3:not(:first-child),
.aic-patients__body h3:not(:first-child) {
  margin-top: 24px;
}
@media (max-width: 640px) {
  .prose > h2:not(:first-child),
  .entry-content > h2:not(:first-child),
  .prep-content > h2:not(:first-child) {
    margin-top: 24px;
  }
  .prose > h3:not(:first-child),
  .entry-content > h3:not(:first-child),
  .prep-content > h3:not(:first-child) {
    margin-top: 18px;
  }
}

/* Polish #2 (2026-05-21): typography refinements */
/* text-wrap: balance for headings: modern CSS for visual balance of long titles. */
h1, h2 {
  text-wrap: balance;
}
/* h3 size baseline (when not inside cards) */
.aic-patients__h3 {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  margin: 18px 0 8px;
  letter-spacing: .1px;
}
@media (max-width: 640px) {
  .aic-patients__h3 { font-size: 14.5px; margin-top: 14px; }
}

/* Polish #6 (2026-05-21): mobile touch target compliance (WCAG 2.5.5) */
@media (max-width: 768px) {
  /* CTA buttons in doctor cards: bump min-height to 40px on mobile (was ~33px) */
  .dc2-btn { min-height: 40px; padding: 11px 16px; }
  /* Inline CTA buttons in slider/related cards */
  .prep-related__card .prep-related__cta,
  .analyzy-card__cta { min-height: 38px; }
}

/* Polish #12 (2026-05-21): global reduced-motion fallback.
 * Kills heavy animations + slows transitions to instant for users with
 * prefers-reduced-motion media query. Specific motion (loaders, spinners,
 * carousel autoplay) is preserved where overridden elsewhere. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Allow these to keep motion: spinners + maps + carousel */
  .aic-cmap__placeholder.is-loading::after,
  .aic-cb-submit.is-loading::after {
    animation-duration: .8s !important;
  }
}