/* ============================================================
   GU Design System — v1.0.0
   georgeungureanu.doctor — Direction B+: Warm Academic Medicine

   Loaded by the GU Design System WordPress plugin via wp_enqueue_style.

   Google Fonts (Lora + Inter) are enqueued separately by the plugin
   as a wp_enqueue_style dependency — no @import needed here.

   Governing source: docs/design-system/APPROVED_VISUAL_DIRECTION.md
   CSS source:       elementor/custom.css (adapted for plugin context)

   Section map:
     01. Design tokens — CSS custom properties (:root)
     02. Box-sizing reset
     03. Base body styles
     04. Global link styles
     05. Focus ring (accessibility — critical)
     06. Text selection
     07. Typographic element defaults
     08. Reduced motion (accessibility — critical)
     09. Skip-to-content link
     10. Elementor container width constraints
     11. Utility: .reading-column
     12. Utility: .section-dark
     13. Utility: .text-overline
     14. Utility: .callout-box / .callout-box-muted
     15. Utility: .lead-paragraph
     16. Form base styles
     17. Print styles
   ============================================================ */


/* ------------------------------------------------------------
   01. DESIGN TOKENS — CSS CUSTOM PROPERTIES
   Single source of truth for all design values.
   All custom classes below reference these variables.
   Elementor Global Colors are configured separately in
   Site Settings but must match these hex values exactly.
   ------------------------------------------------------------ */

:root {

  /* ----------------------------------------------------------
     COLOR TOKENS
     Source: docs/design-system/APPROVED_VISUAL_DIRECTION.md §01
     ---------------------------------------------------------- */

  /* Primary palette — Apple Health / apple.com */
  --color-ink:            #1D1D1F;   /* Apple primary text */
  --color-ink-secondary:  #424245;   /* Apple secondary text */
  --color-ink-tertiary:   #6E6E73;   /* Apple tertiary text */
  --color-surface:        #FFFFFF;   /* Pure white */
  --color-surface-warm:   #F5F5F7;   /* Apple secondary gray */
  --color-surface-muted:  #FBFBFD;   /* Apple tertiary — ultra-light */

  /* Accent — Apple Health blue-teal (restrained, functional, not decorative) */
  --color-accent:         #0E7FC0;
  --color-accent-hover:   #0B6094;
  --color-accent-subtle:  #E3F2FA;   /* Very light blue tint */

  /* Supporting */
  --color-border:         #D2D2D7;   /* Apple standard border */
  --color-border-strong:  #C7C7CC;   /* Apple stronger border */
  --color-overlay:        rgba(0, 0, 0, 0.50);

  /* Functional — Apple system palette */
  --color-success:        #30D158;
  --color-warning:        #FF9F0A;
  --color-error:          #FF3B30;

  /* ----------------------------------------------------------
     TYPOGRAPHY TOKENS
     Source: docs/design-system/APPROVED_VISUAL_DIRECTION.md §02
     ---------------------------------------------------------- */

  /* Families — loaded via wp_enqueue_style (Google Fonts CDN) */
  --font-serif:   'Lora', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Desktop type scale */
  --size-h1:       52px;
  --size-h2:       38px;
  --size-h3:       28px;
  --size-h4:       20px;
  --size-h5:       17px;
  --size-h6:       15px;
  --size-body-lg:  19px;
  --size-body:     17px;
  --size-body-sm:  15px;
  --size-quote:    24px;
  --size-overline: 12px;
  --size-label:    13px;
  --size-caption:  13px;
  --size-cta:      16px;
  --size-nav:      15px;

  /* Line heights — generous for stressed readers */
  --leading-h1:       1.15;
  --leading-h2:       1.20;
  --leading-h3:       1.25;
  --leading-h4:       1.30;
  --leading-h5:       1.35;
  --leading-h6:       1.40;
  --leading-body-lg:  1.75;   /* Non-negotiable for patient reading comfort */
  --leading-body:     1.70;   /* Non-negotiable for patient reading comfort */
  --leading-body-sm:  1.65;
  --leading-quote:    1.45;
  --leading-caption:  1.50;
  --leading-label:    1.40;

  /* ----------------------------------------------------------
     SPACING TOKENS
     Base unit: 8px. All values are multiples of 8.
     Source: docs/design-system/SPACING_SYSTEM.md
     ---------------------------------------------------------- */

  --space-1:   4px;    /* Micro — icon-to-label, badge inner */
  --space-2:   8px;    /* Tight — list items, form internals */
  --space-3:   12px;   /* Small — label-to-input, icon-to-text */
  --space-4:   16px;   /* Standard — paragraph spacing */
  --space-5:   20px;   /* Medium — small margins, card mobile */
  --space-6:   24px;   /* Component — card padding, nav gap */
  --space-8:   32px;   /* Section element — heading to body */
  --space-10:  40px;   /* Section internal — subcomponent gap */
  --space-12:  48px;   /* Section padding mobile */
  --space-16:  64px;   /* Section padding desktop standard */
  --space-20:  80px;   /* Section padding desktop large */
  --space-24:  96px;   /* Section padding desktop generous */
  --space-32:  128px;  /* Hero section desktop only */

  /* ----------------------------------------------------------
     LAYOUT TOKENS
     ---------------------------------------------------------- */

  --max-width:      1200px;  /* Global content container */
  --wide-width:     1100px;  /* Wide grid layouts */
  --reading-column: 700px;   /* 68 chars — body text max-width */
  --content-width:  760px;   /* Content-focused page column */

  /* ----------------------------------------------------------
     COMPONENT TOKENS
     ---------------------------------------------------------- */

  --radius-sm:           6px;
  --radius-md:           10px;
  --radius-lg:           20px;   /* Updated 9.10D — Apple card scale */
  --border-width:        1px;
  --border-width-strong: 1.5px;

  /* ----------------------------------------------------------
     MOTION TOKENS
     All animations respect prefers-reduced-motion (see §08).
     ---------------------------------------------------------- */

  --transition-fast:    200ms ease;
  --transition-base:    250ms ease-in-out;
  --transition-reveal:  400ms ease-out;
}


/* ------------------------------------------------------------
   02. BOX-SIZING RESET
   Ensures padding is included in width calculations.
   Safe alongside Elementor.
   ------------------------------------------------------------ */

html {
  box-sizing: border-box;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth; /* Overridden by prefers-reduced-motion in §08 */
}

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


/* ------------------------------------------------------------
   03. BASE BODY STYLES
   Establishes the warm typographic foundation.
   Hello Elementor is intentionally minimal — these apply cleanly.
   ------------------------------------------------------------ */

body {
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: var(--leading-body);

  /* Font rendering — antialiased for Retina; grayscale for Windows */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1;
}


/* ------------------------------------------------------------
   04. GLOBAL LINK STYLES
   Base styles for all anchor elements.
   Navigation and button links are handled by component styles.
   ------------------------------------------------------------ */

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-hover);
}

/* Body-context links always show underline — accessibility and clarity */
p a,
li a,
td a,
figcaption a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

p a:hover,
li a:hover,
td a:hover,
figcaption a:hover {
  color: var(--color-accent-hover);
  text-decoration-thickness: 2px;
}


/* ------------------------------------------------------------
   05. FOCUS RING — ACCESSIBILITY (CRITICAL)
   Uses :focus-visible — shown during keyboard navigation only.
   Never suppress or remove these rules.
   The 3px offset ensures the ring is never clipped by overflow:hidden.
   ------------------------------------------------------------ */

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}


/* ------------------------------------------------------------
   06. TEXT SELECTION
   Warm accent tint — consistent with the palette.
   Avoids the jarring default blue selection on warm backgrounds.
   ------------------------------------------------------------ */

::selection {
  background-color: var(--color-accent-subtle);
  color: var(--color-ink);
}

::-moz-selection {
  background-color: var(--color-accent-subtle);
  color: var(--color-ink);
}


/* ------------------------------------------------------------
   07. TYPOGRAPHIC ELEMENT DEFAULTS
   Base styling for semantic HTML elements within content areas.
   Ensures correct rendering when content is entered via the
   WordPress editor or Elementor text widgets.
   ------------------------------------------------------------ */

h1, h2, h3 {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  /* Break only at natural word spaces — never inside a word. The
     responsive font-size rules on the individual hero headings are what
     keep long words fitting at 320px; this must not paper over that with
     an artificial mid-word split. */
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
}

h1 { font-size: var(--size-h1); line-height: var(--leading-h1); letter-spacing: -0.03em; }
h2 { font-size: var(--size-h2); line-height: var(--leading-h2); letter-spacing: -0.025em; }
h3 { font-size: var(--size-h3); line-height: var(--leading-h3); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
h4 { font-size: var(--size-h4); line-height: var(--leading-h4); }
h5 { font-size: var(--size-h5); line-height: var(--leading-h5); }
h6 { font-size: var(--size-h6); line-height: var(--leading-h6); }

p {
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

blockquote {
  font-family: var(--font-serif);
  font-size: var(--size-quote);
  font-style: italic;
  line-height: var(--leading-quote);
  color: var(--color-ink);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-12) 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

li {
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

li:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: var(--weight-semibold);
}

code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  background-color: var(--color-surface-muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
}


/* ------------------------------------------------------------
   08. REDUCED MOTION — ACCESSIBILITY (CRITICAL)
   Respects user's OS-level motion preferences.
   This is an accessibility requirement, not a preference.

   !important is intentional and documented:
   These rules must override any animation added by Elementor's
   motion effects, third-party plugins, or other stylesheets.
   ------------------------------------------------------------ */

@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;
  }

  /* Disable Elementor scroll-reveal animations */
  .elementor-invisible {
    visibility: visible !important;
  }
}


/* ------------------------------------------------------------
   09. SKIP-TO-CONTENT LINK — ACCESSIBILITY
   Injected via the Elementor HTML widget inside the header
   template (post_id=9, element [5f0d252]).
   HTML: <a href="#main-content" class="skip-to-content">Mergi la conținut</a>

   Pattern: sr-only (clip) when unfocused; position:fixed when focused.
   Uses clip rather than top:-N% because the Elementor widget wrapper
   is position:absolute with 0 height — top:-200% of 0 = 0, i.e. visible.
   ------------------------------------------------------------ */

.skip-to-content {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  text-decoration: none;
}

.skip-to-content:focus,
.skip-to-content:focus-visible {
  position: fixed;
  top: var(--space-4, 16px);
  left: var(--space-4, 16px);
  width: auto;
  height: auto;
  padding: var(--space-3, 12px) var(--space-6, 24px);
  overflow: visible;
  clip: auto;
  white-space: normal;
  background-color: var(--color-accent);
  color: var(--color-surface);
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: var(--size-body-sm, 15px);
  font-weight: var(--weight-semibold, 600);
  line-height: 1.2;
  border-radius: var(--radius-md, 6px);
  z-index: 99999;
  outline: 3px solid var(--color-surface);
  outline-offset: 3px;
}


/* ------------------------------------------------------------
   10. ELEMENTOR CONTAINER WIDTH CONSTRAINTS
   Ensures inner containers respect the design system's max-width.
   The outer container is full-width; the inner is constrained.
   ------------------------------------------------------------ */

.e-con-inner {
  max-width: var(--max-width);
}

.elementor-section-boxed > .elementor-container {
  max-width: var(--max-width);
}


/* ------------------------------------------------------------
   11. UTILITY: .reading-column
   Apply to the inner container of any long-form text section.
   Maximum: 68 characters ≈ 700px at 17px body size.
   Required for: condition pages, FAQ, about page biography,
   patient information, article pages.

   Usage in Elementor: Advanced → CSS Classes → reading-column
   ------------------------------------------------------------ */

.reading-column {
  max-width: var(--reading-column);
  margin-left: auto;
  margin-right: auto;
}


/* ------------------------------------------------------------
   12. UTILITY: .section-dark
   Apply to Elementor containers using color-ink as background.
   Inverts text and border colors for legibility on dark.

   Usage in Elementor: Advanced → CSS Classes → section-dark
   ------------------------------------------------------------ */

.section-dark {
  background-color: var(--color-ink);
  color: var(--color-surface);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6,
.section-dark p,
.section-dark li {
  color: var(--color-surface);
}

.section-dark a {
  color: var(--color-surface);
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.section-dark a:hover {
  opacity: 1;
}

.section-dark hr {
  border-top-color: rgba(255, 255, 255, 0.2); /* Surface at 20% */
}


/* ------------------------------------------------------------
   13. UTILITY: .text-overline
   Consistent across all section-header overlines.
   Apply to a text widget where Elementor's Global Typography
   "Overline" style is selected.

   Ensures uppercase + letter-spacing rendering is consistent
   regardless of browser or font-display timing.

   Usage in Elementor: Advanced → CSS Classes → text-overline
   ------------------------------------------------------------ */

.text-overline,
.elementor-widget-text-editor .text-overline {
  font-family: var(--font-sans);
  font-size: var(--size-overline);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-3);
}

/* Overline on dark sections */
.section-dark .text-overline {
  color: var(--color-accent-subtle);
}


/* ------------------------------------------------------------
   14. UTILITY: .callout-box / .callout-box-muted
   Reserved for critical patient information.
   Maximum 2 per page — when everything is highlighted, nothing is.

   Usage in Elementor: Advanced → CSS Classes → callout-box
   ------------------------------------------------------------ */

.callout-box {
  background-color: var(--color-accent-subtle);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-8) 0;
}

.callout-box p {
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

.callout-box p:last-child {
  margin-bottom: 0;
}

.callout-box-muted {
  background-color: var(--color-surface-muted);
  border-left: 3px solid var(--color-border-strong);
}


/* ------------------------------------------------------------
   15. UTILITY: .lead-paragraph
   Applied to the first paragraph of each major content section.
   Larger size and more generous leading — signals "start here."

   Usage in Elementor: Advanced → CSS Classes → lead-paragraph
   ------------------------------------------------------------ */

.lead-paragraph,
.lead-paragraph p {
  font-size: var(--size-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--color-ink);
}


/* ------------------------------------------------------------
   16. FORM BASE STYLES
   Applies the warm palette to standard HTML form elements.
   Elementor Pro Form widget is styled via widget controls;
   these base styles ensure consistency for any fallback or
   non-Elementor form output.
   ------------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
textarea,
select {
  font-family: var(--font-sans);
  font-size: var(--size-body);
  color: var(--color-ink);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  line-height: var(--leading-body);
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-ink-secondary);
  opacity: 0.7;
}

label {
  font-family: var(--font-sans);
  font-size: var(--size-label);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: var(--space-2);
}


/* ------------------------------------------------------------
   18. FOOTER DARK AREA — PARAGRAPH TEXT OVERRIDE
   Root cause: §07's `p { color: var(--color-ink) }` (specificity 0,0,1) explicitly
   overrides ALL <p> elements globally. Elementor's text-editor widget CSS sets color
   on the widget container <div> only — <p> inherits that color, but explicit rules
   always beat inherited values regardless of specificity. Manual color changes in
   Elementor do not reach <p> directly.

   Fix: explicitly target <p> elements within footer text-editor widgets using the
   footer's custom Elementor element ID (#organism-site-footer) as scope. The
   !important declarations match the !important in §08 (reduced-motion) and are
   necessary to beat the explicit §07 `p {}` rule.

   Selectors confirmed against DB (2026-06-29):
     #organism-site-footer  → elementor-element-58c43bf7 (footer outer container)
   Widget types covered: text-editor (practice desc, logistics text, copyright)
   Not covered by this rule: heading widgets (use .elementor-heading-title — see below)
   ------------------------------------------------------------ */

#organism-site-footer .gu-footer-muted,
#organism-site-footer .elementor-widget-text-editor,
#organism-site-footer .elementor-widget-text-editor p {
  color: rgba(255,255,255,0.60) !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* ------------------------------------------------------------
   19. HERO DARK AREA — PARAGRAPH TEXT OVERRIDE
   Same root cause as §18: §07's `p { color: var(--color-ink) }` (specificity 0,0,1)
   makes paragraph text invisible on the hero's dark background.
   Hero text-editor widgets (body-lg supporting text, attribution) require explicit
   <p> targeting so Elementor's inherited container color cannot be overridden.

   #organism-hero-homepage → custom Elementor element ID on the hero outer container
   [3b2e4f01] — set via _element_id in _elementor_data (2026-06-29)

   Hero background is now white (#FFFFFF). Text colors updated from dark-bg values.
   Supporting paragraph: #424245 (ink-secondary). Credential line: #6E6E73 (ink-tertiary).
   ------------------------------------------------------------ */

/* Supporting paragraph — ink-secondary on white hero */
#organism-hero-homepage .elementor-widget-text-editor,
#organism-hero-homepage .elementor-widget-text-editor p {
  color: #424245 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Credential/attribution line (3b2e4f08) — ink-tertiary, lighter than paragraph */
#organism-hero-homepage .elementor-element-3b2e4f08 p {
  color: #6E6E73 !important;
}

/* Body-lg font-size for hero supporting text.
   §07's `p { font-size: var(--size-body) }` (0,0,1) overrides Elementor's
   inherited 19px from the container, so we target the p directly. */
#organism-hero-homepage .elementor-element-3b2e4f04 p {
  font-size: var(--size-body-lg);
  line-height: var(--leading-body-lg);
}


/* ------------------------------------------------------------
   17. PRINT STYLES
   Patients may print condition pages or appointment information.
   Ensures the printed version is clean and readable.
   ------------------------------------------------------------ */

@media print {
  body {
    background-color: #ffffff;
    color: #000000;
    font-family: Georgia, serif;
    font-size: 12pt;
    line-height: 1.5;
  }

  h1, h2, h3 {
    font-family: Georgia, serif;
    color: #000000;
    page-break-after: avoid;
  }

  h4, h5, h6 {
    font-family: Arial, sans-serif;
    color: #000000;
  }

  p, li {
    font-size: 11pt;
    line-height: 1.6;
    orphans: 3;
    widows: 3;
  }

  a {
    color: #000000;
    text-decoration: underline;
  }

  /* Show full URLs for external links — helpful for printed patient content */
  a[href^="http"]::after,
  a[href^="https"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555555;
  }

  a[href^="#"]::after {
    content: ""; /* Internal anchors don't need URLs printed */
  }

  /* Hide navigation and interactive elements */
  .elementor-widget-button,
  .elementor-nav-menu,
  .skip-to-content {
    display: none;
  }

  /* Keep callout information visible in print */
  .callout-box {
    display: block;
    border: 1px solid #cccccc;
    padding: 12pt;
    margin: 12pt 0;
  }

  blockquote,
  figure,
  .callout-box {
    page-break-inside: avoid;
  }
}

/* ------------------------------------------------------------
   20. SPRINT 3 HOMEPAGE SECTIONS — LAYOUT AND TYPOGRAPHY FIXES
   Applied via CSS because _css_classes set in raw DB JSON does
   not get rendered into the HTML element class list by Elementor;
   section element IDs (_element_id) DO render and are used instead.
   ------------------------------------------------------------ */

/* Default Inter body font for all text-editor paragraph content.
   Elementor's --e-global-typography-text-font-family resolves to
   system-ui unless the kit's "text" typography is explicitly mapped. */
.elementor-widget-text-editor p {
  font-family: var(--font-sans);
}

/* CTA section dark background — cream paragraph text.
   _css_classes:"section-dark" does not apply; target the section's
   _element_id directly. */
#organism-cta-appointment .elementor-widget-text-editor p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Section header reading-column constraint (700px centered).
   These inner containers would span the full section width (1280px
   at desktop); limiting them prevents overly wide heading lines. */
.elementor-element-a3s00002,
.elementor-element-a4w00002 {
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ------------------------------------------------------------
   21. SPRINT 7 — ARTICOLE (KNOWLEDGE CENTER)
   Styles for article cards, meta badges, key takeaways,
   related content grids, and FAQ accordion.
   ------------------------------------------------------------ */

/* Article card grid (archive + related articles row) */
.gu-articole-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.gu-article-card {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-muted);
  border-radius: 8px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gu-article-card__cat {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gu-article-card__title {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.gu-article-card__title a {
  color: var(--color-ink);
  text-decoration: none;
}

.gu-article-card__title a:hover {
  color: var(--color-accent);
}

.gu-article-card__summary {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-ink-secondary);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.gu-article-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.gu-article-card__time {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-ink-secondary);
  opacity: 0.7;
}

.gu-article-card__link {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

.gu-article-card__link:hover {
  text-decoration: underline;
}

/* Article meta strip (author + date + reading time) */
.gu-article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 20px;
}

.gu-article-meta__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gu-article-meta__name {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-surface);
}

.gu-article-meta__cred {
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

.gu-article-meta__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.gu-article-meta__review,
.gu-article-meta__time {
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

/* Key Takeaways callout box */
.gu-key-takeaways {
  background: var(--color-accent-subtle, #E3F2FA);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 6px 6px 0;
  padding: 24px 28px;
}

.gu-key-takeaways__label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 12px;
}

.gu-key-takeaways ul {
  margin: 0;
  padding-left: 20px;
  color: var(--color-ink);
}

.gu-key-takeaways li {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 8px;
  color: var(--color-ink);
}

.gu-key-takeaways li:last-child {
  margin-bottom: 0;
}

/* Article body typography (theme-post-content widget) */
.gu-article-body .elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h2 {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-ink);
  margin: 2em 0 0.6em;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.elementor-widget-theme-post-content h3 {
  font-family: var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  color: var(--color-ink);
  margin: 1.6em 0 0.5em;
}

.elementor-widget-theme-post-content p {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-ink-secondary);
  margin: 0 0 1.2em;
}

.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-ink-secondary);
  padding-left: 24px;
  margin: 0 0 1.2em;
}

.elementor-widget-theme-post-content li {
  margin-bottom: 6px;
}

.elementor-widget-theme-post-content strong {
  font-weight: 600;
  color: var(--color-ink);
}

.elementor-widget-theme-post-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: rgba(77, 122, 112, 0.4);
  text-underline-offset: 2px;
}

.elementor-widget-theme-post-content a:hover {
  text-decoration-color: var(--color-accent);
}

/* FAQ accordion */
.gu-faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-surface-muted);
}

.gu-faq__item {
  border-bottom: 1px solid var(--color-surface-muted);
}

.gu-faq__question {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  text-align: left;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.gu-faq__question:hover {
  color: var(--color-accent);
}

.gu-faq__question[aria-expanded="true"] {
  color: var(--color-accent);
}

.gu-faq__question svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-accent);
  transition: transform 0.2s ease;
}

.gu-faq__question[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.gu-faq__answer {
  padding-bottom: 20px;
}

.gu-faq__answer p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-ink-secondary);
  margin: 0;
}

/* Related content grid (conditions, procedures, articles) */
.gu-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.gu-related-card {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-muted);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gu-related-card__title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.gu-related-card__title a {
  color: var(--color-ink);
  text-decoration: none;
}

.gu-related-card__title a:hover {
  color: var(--color-accent);
}

.gu-related-card__summary {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink-secondary);
  margin: 0;
  flex: 1;
}

.gu-related-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gu-related-card__link {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  margin-top: auto;
}

.gu-related-card__link:hover {
  text-decoration: underline;
}

/* Mobile adjustments for article components */
@media (max-width: 600px) {
  .gu-articole-grid {
    grid-template-columns: 1fr;
  }

  .gu-related-grid {
    grid-template-columns: 1fr;
  }

  .gu-article-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .gu-key-takeaways {
    padding: 20px;
  }
}


/* ------------------------------------------------------------
   22. SPRINT 7B — AUTHOR / MEDICAL REVIEW BLOCK
   ------------------------------------------------------------ */

.gu-author-block {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.gu-author-block__avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface-warm);
}

.gu-author-block__avatar svg {
  display: block;
  width: 100%;
  height: 100%;
}

.gu-author-block__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gu-author-block__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
}

.gu-author-block__name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0;
  line-height: 1.2;
}

.gu-author-block__title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-accent);
  margin: 0;
}

.gu-author-block__bio {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-ink-secondary);
  line-height: 1.6;
  margin: 4px 0 0;
}

.gu-author-block__review {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-ink-secondary);
  margin: 4px 0 0;
}

.gu-author-block__review strong {
  color: var(--color-ink);
  font-weight: 600;
}

.gu-author-block__link {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

.gu-author-block__link:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .gu-author-block {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 20px;
  }

  .gu-author-block__avatar {
    width: 72px;
    height: 72px;
  }
}


/* ------------------------------------------------------------
   23. SPRINT 8 — ABOUT PAGE (/despre/)
   ------------------------------------------------------------ */

/* ── Shared ─────────────────────────────────────────────────── */

.gu-btn {
  display: inline-block;
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  cursor: pointer;
}

.gu-btn--accent {
  background: var(--color-accent);
  color: #fff;
}

.gu-btn--accent:hover,
.gu-btn--accent:focus-visible {
  background: #0B6094;
  box-shadow: 0 0 0 3px rgba(14,127,192,0.35);
}

.gu-btn--light {
  background: #fff;
  color: var(--color-ink);
}

.gu-btn--light:hover,
.gu-btn--light:focus-visible {
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.35);
}

.gu-about-section-heading {
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.2;
  margin: 0 0 32px;
}

.gu-about-section-heading--light {
  color: var(--color-surface);
}

/* ── Hero ────────────────────────────────────────────────────── */

.gu-about-hero {
  display: flex;
  flex-direction: row;
  gap: 48px;
  align-items: flex-start;
  width: 100%;
}

.gu-about-hero__photo-wrap {
  flex-shrink: 0;
  width: 300px;
}

.gu-about-hero__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.gu-about-hero__photo-placeholder {
  display: block;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #D2D2D7;
}

.gu-about-hero__photo-placeholder svg {
  display: block;
  width: 100%;
  height: auto;
}

.gu-about-hero__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 8px;
}

.gu-about-hero__name {
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.1;
  margin: 0;
}

.gu-about-hero__title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-accent);
  margin: 0;
  letter-spacing: 0.02em;
}

.gu-about-hero__tagline {
  font-family: var(--font-sans);
  font-size: 18px;
  font-style: normal;
  color: var(--color-ink-secondary);
  line-height: 1.5;
  margin: 4px 0 0;
}

.gu-about-hero__badges {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gu-about-hero__badge {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  padding-left: 20px;
  position: relative;
}

.gu-about-hero__badge::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-size: 10px;
  top: 2px;
}

/* ── Credentials Strip ──────────────────────────────────────── */

.gu-credentials-strip {
  display: flex;
  flex-direction: row;
  gap: 0;
  justify-content: space-around;
  width: 100%;
  padding: 32px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.gu-credentials-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px;
  flex: 1;
  border-right: 1px solid var(--color-border);
}

.gu-credentials-strip__item:last-child {
  border-right: none;
}

.gu-credentials-strip__value {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1.1;
  display: block;
  margin-bottom: 6px;
}

.gu-credentials-strip__label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Biography ──────────────────────────────────────────────── */

.gu-about-bio {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-ink);
}

.gu-about-bio p { margin: 0 0 18px; }
.gu-about-bio p:last-child { margin-bottom: 0; }

.gu-about-bio .pullquote,
.gu-about-bio blockquote {
  margin: 28px 0;
  padding: 20px 28px;
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface);
  font-family: var(--font-serif);
  font-size: 20px;
  font-style: italic;
  color: var(--color-ink);
  border-radius: 0 6px 6px 0;
}

/* ── Philosophy (dark section) ──────────────────────────────── */

.gu-about-philosophy {
  width: 100%;
}

.gu-about-philosophy__content {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--color-surface);
}

.gu-about-philosophy__content p { margin: 0 0 20px; }
.gu-about-philosophy__content p:last-child { margin-bottom: 0; }

.gu-about-philosophy__content h3 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 36px 0 16px;
}

/* ── Education ──────────────────────────────────────────────── */

.gu-about-education {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-ink);
}

.gu-about-education ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.gu-about-education li {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.gu-about-education li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.gu-about-education .year {
  flex-shrink: 0;
  width: 80px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-accent);
}

.gu-about-education p { margin: 0 0 16px; }
.gu-about-education p:last-child { margin-bottom: 0; }

/* ── Experience ─────────────────────────────────────────────── */

.gu-about-experience {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-ink);
}

.gu-about-experience p { margin: 0 0 16px; }
.gu-about-experience p:last-child { margin-bottom: 0; }

/* ── Special Interests Grid ─────────────────────────────────── */

.gu-interests-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

.gu-interest-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: box-shadow 0.18s;
}

.gu-interest-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.gu-interest-card__title {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0;
  line-height: 1.3;
}

.gu-interest-card__desc {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-ink-secondary);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.gu-interest-card__link {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  margin-top: auto;
}

.gu-interest-card__link:hover {
  text-decoration: underline;
}

/* ── Conditional Sections (Research, Media) ─────────────────── */

.gu-about-conditional {
  width: 100%;
  padding: 80px 24px;
}

.gu-about-conditional--warm {
  background: var(--color-surface-warm);
}

.gu-about-conditional--light {
  background: var(--color-surface);
}

.gu-about-conditional__inner {
  max-width: 760px;
  margin: 0 auto;
}

/* ── Teaching, Memberships ──────────────────────────────────── */

.gu-about-teaching,
.gu-about-memberships {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-ink);
}

.gu-about-teaching p,
.gu-about-memberships p { margin: 0 0 16px; }

.gu-about-teaching p:last-child,
.gu-about-memberships p:last-child { margin-bottom: 0; }

.gu-about-memberships ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gu-about-memberships li {
  padding-left: 20px;
  position: relative;
  font-size: 15px;
}

.gu-about-memberships li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.gu-memberships-section__lead {
  max-width: 720px;
  margin: 0 0 30px;
  color: var(--color-ink-secondary, #424245);
  font: 400 16px/1.7 var(--font-sans, Inter, system-ui, sans-serif);
}

.gu-membership-grid {
  display: grid;
  gap: 16px;
}

.gu-membership-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  background: #fff;
  color: var(--color-ink, #1d1d1f);
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(29, 29, 31, 0.04);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.gu-membership-card:hover {
  border-color: rgba(14, 127, 192, 0.3);
  color: var(--color-ink, #1d1d1f);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(29, 29, 31, 0.08);
}

.gu-membership-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 72px;
  padding: 8px;
  overflow: hidden;
  border-radius: 10px;
  background: #f7f8fa;
}

.gu-membership-card__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gu-membership-card__content {
  min-width: 0;
}

.gu-membership-card__content strong,
.gu-membership-card__content small {
  display: block;
}

.gu-membership-card__content strong {
  margin-bottom: 5px;
  color: var(--color-accent, #0e7fc0);
  font: 700 18px/1.2 var(--font-sans, Inter, system-ui, sans-serif);
  letter-spacing: 0.02em;
}

.gu-membership-card__content small {
  color: var(--color-ink-secondary, #424245);
  font: 400 13px/1.45 var(--font-sans, Inter, system-ui, sans-serif);
}

.gu-membership-card__arrow {
  color: var(--color-accent, #0e7fc0);
  font-size: 18px;
}

@media (max-width: 520px) {
  .gu-membership-card {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 16px;
  }

  .gu-membership-card__logo {
    width: 72px;
    height: 58px;
  }
}

/* ── About page visual system ─────────────────────────────────
   Keeps the Elementor-built sections, but gives every block the same
   spacing, surface, typography and interaction language. */
body.page-id-116 .elementor-116 {
  --gu-about-max: 1100px;
  --gu-about-radius: 20px;
  --gu-about-shadow: 0 18px 50px rgba(29, 29, 31, 0.07);
  background: #f6f7f9;
}

body.page-id-116 .elementor-116 > .e-con.e-parent {
  border-bottom: 1px solid rgba(29, 29, 31, 0.06);
}

body.page-id-116 .elementor-116 > .e-con.e-parent > .e-con-inner,
body.page-id-116 .elementor-116 > .e-con.e-parent > .e-con {
  width: min(100% - 48px, var(--gu-about-max));
  max-width: var(--gu-about-max);
  margin-inline: auto;
}

body.page-id-116 .gu-about-section-heading {
  position: relative;
  margin-bottom: 26px;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -0.035em;
}

body.page-id-116 .gu-about-section-heading::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 16px;
  border-radius: 999px;
  background: var(--color-accent, #0e7fc0);
}

body.page-id-116 .gu-about-hero {
  align-items: center;
  gap: clamp(40px, 7vw, 88px);
  padding: 18px;
  border: 1px solid rgba(29, 29, 31, 0.06);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--gu-about-shadow);
}

body.page-id-116 .gu-about-hero__photo-wrap {
  width: min(42%, 420px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 17px;
  background: linear-gradient(145deg, #eef5f8, #fff);
}

body.page-id-116 .gu-about-hero__photo {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: 68% center;
}

body.page-id-116 .gu-about-hero__content {
  padding: 34px 34px 34px 0;
}

body.page-id-116 .gu-about-hero__name {
  font-size: clamp(40px, 5vw, 62px);
  letter-spacing: -0.045em;
}

body.page-id-116 .gu-about-hero__title {
  font-size: 17px;
  font-weight: 700;
}

body.page-id-116 .gu-about-hero__badge {
  font-size: 15px;
  line-height: 1.55;
}

body.page-id-116 .gu-credentials-strip {
  padding: 38px 24px;
  border: 0;
  border-radius: var(--gu-about-radius);
  box-shadow: 0 10px 35px rgba(29, 29, 31, 0.055);
}

body.page-id-116 .gu-credentials-strip__value {
  font-size: 32px;
  letter-spacing: -0.035em;
}

body.page-id-116 :is(.gu-about-bio, .gu-about-philosophy, .gu-about-education, .gu-about-experience, .gu-about-research, .gu-memberships-section) {
  width: 100%;
}

body.page-id-116 :is(.gu-about-bio, .gu-about-education, .gu-about-experience, .gu-about-research) {
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid rgba(29, 29, 31, 0.07);
  border-radius: var(--gu-about-radius);
  background: #fff;
  box-shadow: 0 8px 28px rgba(29, 29, 31, 0.045);
  font-size: 16px;
  line-height: 1.75;
}

body.page-id-116 .gu-about-personal {
  margin-top: 24px !important;
  padding: 17px 20px;
  border-radius: 12px;
  background: #f1f7fa;
  color: var(--color-ink-secondary, #424245);
}

body.page-id-116 .gu-about-philosophy {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 5vw, 58px);
  border-radius: var(--gu-about-radius);
  background: linear-gradient(135deg, #172b36 0%, #0e3f59 100%);
  box-shadow: var(--gu-about-shadow);
}

body.page-id-116 .gu-about-philosophy::before {
  content: "“";
  position: absolute;
  top: -35px;
  right: 28px;
  color: rgba(255,255,255,0.08);
  font: 700 170px/1 Georgia, serif;
}

body.page-id-116 .gu-about-philosophy .gu-about-section-heading {
  color: #fff;
}

body.page-id-116 .gu-about-philosophy__content {
  position: relative;
  max-width: 850px;
  color: rgba(255,255,255,0.88);
  font-size: clamp(19px, 2vw, 23px);
}

body.page-id-116 .gu-about-philosophy__content p,
body.page-id-116 .gu-about-philosophy__content :is(strong, em, a) {
  color: rgba(255,255,255,0.9) !important;
}

body.page-id-116 .gu-about-education li {
  position: relative;
  display: block;
  padding: 0 0 22px 34px;
}

body.page-id-116 .gu-about-education li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 2px;
  width: 11px;
  height: 11px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--color-accent, #0e7fc0);
  box-shadow: 0 0 0 2px rgba(14,127,192,0.22);
}

body.page-id-116 .gu-about-education li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  bottom: -1px;
  left: 8px;
  width: 1px;
  background: rgba(14,127,192,0.22);
}

body.page-id-116 .gu-about-experience {
  border-left: 4px solid var(--color-accent, #0e7fc0);
  font-size: 18px;
}

body.page-id-116 .gu-interests-grid,
body.page-id-116 .gu-source-grid {
  gap: 18px;
}

body.page-id-116 .gu-interest-card,
body.page-id-116 .gu-source-card,
body.page-id-116 .gu-membership-card {
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(29, 29, 31, 0.05);
}

body.page-id-116 .gu-interest-card {
  padding: 30px 26px;
  border-top: 3px solid var(--color-accent, #0e7fc0);
}

body.page-id-116 .gu-interest-card__link::after {
  content: " →";
}

body.page-id-116 .gu-about-conditional {
  padding: 0;
  background: transparent;
}

body.page-id-116 .gu-about-conditional__inner {
  max-width: none;
}

body.page-id-116 .gu-about-validation {
  margin-top: 70px;
  border: 0;
  border-radius: 24px;
  background: #eef5f8;
}

body.page-id-116 .gu-about-validation__inner {
  padding: clamp(34px, 5vw, 56px);
}

body.page-id-116 .gu-membership-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

body.page-id-116 .gu-membership-card {
  grid-template-columns: 1fr auto;
  grid-template-rows: 86px auto;
  align-items: center;
  padding: 22px;
}

body.page-id-116 .gu-membership-card__logo {
  grid-column: 1 / -1;
  width: 100%;
  height: 86px;
  padding: 16px 22px;
  border: 1px solid rgba(29, 29, 31, 0.055);
  background: #f7f8fa;
}

body.page-id-116 .gu-membership-card__logo img {
  width: 100% !important;
  height: 100% !important;
  max-width: 190px !important;
  max-height: 58px !important;
  margin: auto;
  object-fit: contain !important;
  object-position: center !important;
}

body.page-id-116 .gu-membership-card:nth-child(2) .gu-membership-card__logo {
  border-color: rgba(30, 55, 92, 0.12);
  background: #203957;
}

body.page-id-116 .gu-membership-card:nth-child(3) .gu-membership-card__logo img {
  max-width: 150px !important;
}

body.page-id-116 .gu-membership-card__content strong {
  margin-top: 16px;
}

body.page-id-116 .gu-membership-card__arrow {
  align-self: end;
  margin-bottom: 20px;
}

body.page-id-116 .gu-about-cta {
  padding: clamp(42px, 7vw, 72px) 24px;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff 0%, #eef7fb 100%);
  box-shadow: var(--gu-about-shadow);
}

body.page-id-116 .gu-about-cta__heading {
  font-size: clamp(30px, 4vw, 44px);
}

@media (max-width: 820px) {
  body.page-id-116 .elementor-116 > .e-con.e-parent > .e-con-inner,
  body.page-id-116 .elementor-116 > .e-con.e-parent > .e-con {
    width: min(100% - 32px, var(--gu-about-max));
  }

  body.page-id-116 .gu-about-hero {
    padding: 14px;
  }

  body.page-id-116 .gu-about-hero__photo-wrap {
    width: min(72vw, 360px);
  }

  body.page-id-116 .gu-about-hero__content {
    width: 100%;
    padding: 10px 12px 24px;
  }

  body.page-id-116 .gu-membership-grid {
    grid-template-columns: 1fr;
  }

  body.page-id-116 .gu-membership-card {
    grid-template-columns: 84px minmax(0, 1fr) auto;
    grid-template-rows: auto;
  }

  body.page-id-116 .gu-membership-card__logo {
    grid-column: auto;
    width: 84px;
    height: 66px;
  }

  body.page-id-116 .gu-membership-card__content strong {
    margin-top: 0;
  }

  body.page-id-116 .gu-membership-card__arrow {
    align-self: center;
    margin-bottom: 0;
  }
}

@media (max-width: 560px) {
  body.page-id-116 .gu-about-section-heading {
    font-size: 27px;
  }

  body.page-id-116 .gu-about-hero__name {
    font-size: 36px;
  }

  body.page-id-116 .gu-credentials-strip__item {
    flex-basis: 100%;
  }

  body.page-id-116 .gu-about-validation {
    margin-top: 46px;
  }
}

/* ── CTA ─────────────────────────────────────────────────────── */

.gu-about-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.gu-about-cta__heading {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.gu-about-cta__text {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-ink-secondary);
  max-width: 560px;
  margin: 0;
  line-height: 1.6;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  .gu-interests-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .gu-about-hero {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .gu-about-hero__photo-wrap {
    width: 240px;
  }

  .gu-about-hero__content {
    align-items: flex-start;
    padding-top: 0;
  }

  .gu-about-hero__name {
    font-size: 32px;
  }

  .gu-about-section-heading {
    font-size: 24px;
  }

  .gu-credentials-strip {
    flex-wrap: wrap;
    gap: 0;
    padding: 24px 16px;
  }

  .gu-credentials-strip__item {
    flex: 1 1 45%;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: 16px 8px;
  }

  .gu-credentials-strip__item:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .gu-interests-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .gu-about-hero__photo-wrap {
    width: 200px;
  }

  .gu-about-hero__name {
    font-size: 28px;
  }

  .gu-about-cta__heading {
    font-size: 24px;
  }

  .gu-credentials-strip__item {
    flex: 1 1 100%;
    border-bottom: 1px solid var(--color-border);
  }

  .gu-credentials-strip__item:last-child {
    border-bottom: none;
  }
}


/* ============================================================
   24. SPRINT 8.2 — PHASE A: GLOBAL BUTTON COMPLIANCE
   Closes the gap between design tokens and Elementor widgets.
   All overrides use !important only where Elementor inline
   styles or widget-level settings would otherwise win.
   ============================================================ */

/* A2 + A4: Header and footer Elementor buttons → correct brand color,
   weight, and size. These were rendering as Bootstrap-era #5BC0DE cyan.
   Note: Hello Elementor + Elementor Pro renders header/footer as
   .elementor-location-header / .elementor-location-footer, NOT .site-header. */
.elementor-location-header .elementor-button,
.elementor-location-footer .elementor-button {
  background-color: var(--color-accent) !important;  /* #0E7FC0 */
  color: var(--color-surface) !important;             /* #FFFFFF */
  font-weight: var(--weight-semibold) !important;     /* 600 */
  letter-spacing: 0.01em;
}

.elementor-location-header .elementor-button:hover,
.elementor-location-footer .elementor-button:hover {
  background-color: var(--color-accent-hover) !important; /* #0B6094 */
}

.elementor-location-header .elementor-button:focus-visible,
.elementor-location-footer .elementor-button:focus-visible {
  outline: 3px solid rgba(77, 122, 112, 0.45);
  outline-offset: 2px;
}

/* A3: Standardize every Elementor button widget to --radius-md (6px).
   Elementor sets border-radius per widget; this creates the 2/4/6px mess. */
.elementor-button {
  border-radius: var(--radius-md) !important; /* 6px */
}

/* Extend .gu-btn--sm for use in empty-state CTAs and small contexts. */
.gu-btn--sm {
  font-size: 13px;
  padding: 8px 16px;
}

/* ── A5–A6: Archive empty-state block ───────────────────────── */
/* Displayed after archive grids when fewer than 3 items exist.  */

.gu-archive-empty-state {
  text-align: center;
  background: #F2F2F7;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-8);
  max-width: 560px;
  margin: var(--space-12) auto 0;
}

.gu-archive-empty-state svg {
  display: block;
  margin: 0 auto var(--space-6);
}

.gu-archive-empty-state__heading {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
  line-height: var(--leading-h3);
}

.gu-archive-empty-state__text {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-ink-secondary);
  line-height: var(--leading-body);
  margin: 0 0 var(--space-6);
}

@media (max-width: 480px) {
  .gu-archive-empty-state {
    padding: var(--space-10) var(--space-6);
  }
}


/* ============================================================
   25. SPRINT 9 — PHASE B: CUSTOM HEADER + NAVIGATION SYSTEM
   ============================================================ */

/* ── Body offset for fixed header — only when the native #gu-header
   fallback is actually rendered (no Elementor header document for the
   current request). Header 135 uses Elementor's own sticky mechanism and
   must not receive this offset. ── */
body:has(#gu-header) {
  padding-top: 72px;
}

/* Admin bar: header sits below the 32px WP admin bar */
.admin-bar .gu-header {
  top: 32px;
}

/* ── Header shell ── */
.gu-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  height: 72px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
              background 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.gu-header.is-compact {
  height: 56px;
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.95);
}

.gu-header__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
}

/* ── Logo ── */
.gu-header__logo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.25;
  flex-shrink: 0;
  gap: 1px;
}

.gu-header__logo:hover .gu-header__logo-name {
  color: var(--color-accent);
}

.gu-header__logo-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  transition: color 160ms ease;
}

.gu-header__logo-title {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-ink-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Desktop navigation ── */
.gu-header__nav {
  flex: 1;
}

.gu-header__nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gu-header__nav-item {
  margin: 0;
}

.gu-header__nav-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  position: relative;
  transition: color 160ms ease, background 160ms ease;
  letter-spacing: 0.005em;
}

.gu-header__nav-link:hover {
  color: var(--color-accent);
  background: rgba(14, 127, 192, 0.07);
}

.gu-header__nav-link.is-active {
  color: var(--color-accent);
  font-weight: 600;
}

/* Underline indicator */
.gu-header__nav-link::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 12px;
  right: 12px;
  height: 1.5px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 1px;
}

.gu-header__nav-link:hover::after,
.gu-header__nav-link.is-active::after {
  transform: scaleX(1);
}

/* ── Header actions (CTA + hamburger) ── */
.gu-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.gu-header__cta {
  font-size: 13px;
  padding: 9px 18px;
  white-space: nowrap;
}

/* ── Hamburger button (mobile only) ── */
.gu-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-md);
  transition: background 160ms ease;
  flex-shrink: 0;
}

.gu-header__hamburger:hover {
  background: rgba(0, 0, 0, 0.07);
}

.gu-header__bar {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity    200ms ease;
  transform-origin: center;
}

/* Hamburger → X animation when drawer is open */
.gu-header__hamburger.is-active .gu-header__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.gu-header__hamburger.is-active .gu-header__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.gu-header__hamburger.is-active .gu-header__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── Mobile drawer ── */
.gu-mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.gu-mobile-drawer:not([aria-hidden="true"]) {
  pointer-events: auto;
}

.gu-mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 280ms ease;
}

.gu-mobile-drawer:not([aria-hidden="true"]) .gu-mobile-drawer__backdrop {
  opacity: 1;
}

.gu-mobile-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-height: 78vh;
  overflow-y: auto;
  background: var(--color-surface);
  padding: 16px 24px 40px;
  transform: translateY(-110%);
  transition: transform 340ms cubic-bezier(0.34, 1.08, 0.64, 1);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.20);
}

.gu-mobile-drawer:not([aria-hidden="true"]) .gu-mobile-drawer__panel {
  transform: translateY(0);
}

.gu-mobile-drawer__close {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  color: var(--color-ink) !important;
  border-radius: var(--radius-md);
  margin-left: auto;
  margin-bottom: 8px;
  transition: background 160ms ease, color 160ms ease;
  padding: 8px;
}

.gu-mobile-drawer__close:hover {
  background: rgba(0, 0, 0, 0.07) !important;
  color: var(--color-accent) !important;
}

.gu-mobile-drawer__close svg {
  display: block;
  flex-shrink: 0;
}

.gu-mobile-drawer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gu-mobile-drawer__nav li {
  margin: 0;
}

.gu-mobile-drawer__link {
  display: block;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: color 160ms ease, padding-left 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.gu-mobile-drawer__nav li:last-child .gu-mobile-drawer__link {
  border-bottom: none;
}

.gu-mobile-drawer__link:hover {
  color: var(--color-accent);
  padding-left: 8px;
}

.gu-mobile-drawer__cta {
  display: block;
  text-align: center;
  margin-top: 28px;
  width: 100%;
  padding: 16px 20px;
  font-size: 16px;
  border-radius: var(--radius-md);
}

/* ── Responsive breakpoints ── */
@media (min-width: 768px) {
  /* Explicit hide: ensures hamburger stays hidden even if inherited display changes */
  .gu-header__hamburger { display: none !important; }
}

@media (max-width: 767px) {
  .gu-header__nav  { display: none; }
  .gu-header__cta  { display: none; }
  .gu-header__hamburger { display: flex !important; }
  .gu-header__inner {
    gap: 0;
    justify-content: space-between;
    padding: 0 20px;
  }
  .gu-header__actions { margin-left: 0; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .gu-header__inner { gap: 20px; padding: 0 24px; }
  .gu-header__nav-list { gap: 0; }
  .gu-header__nav-link { font-size: 13px; padding: 6px 8px; }
  .gu-header__cta { font-size: 12px; padding: 8px 14px; }
}

@media (min-width: 1024px) {
  .gu-mobile-drawer { display: none; }
}


/* ============================================================
   26. SPRINT 9.5 — VISUAL IDENTITY REFRESH 2026
   "Clinical Precision" — designed from zero
   ============================================================ */

/* ── 26a. DESIGN TOKEN REFINEMENTS ── */

:root {
  /* Canvas depth hierarchy */
  --color-canvas:        #F4F2EF;   /* Outer page — barely warm white          */
  --color-surface:       #FFFFFF;   /* Cards, panels — elevated, floating       */
  --color-surface-warm:  #E6DFD8;   /* Inset sections — distinctly warmer       */

  /* Ink — warmer, richer near-black */
  --color-ink:           #1C1814;
  --color-ink-secondary: #68615C;

  /* Accent — deeper forest teal, used sparingly */
  --color-accent:        #0E7FC0;
  --color-accent-hover:  #0B6094;
  --color-accent-subtle: rgba(14, 127, 192, 0.08);

  /* Border */
  --color-border:        rgba(0, 0, 0, 0.08);
  --color-border-strong: rgba(0, 0, 0, 0.18);

  /* Shadow system — warm-tinted, not grey */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06),
               0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08),
               0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.14);

  /* Motion */
  --ease-std:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Refined radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;
}

/* ── 26b. CANVAS BACKGROUND + FONT RENDERING ── */

body {
  background-color: var(--color-canvas) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Page wrappers inherit canvas; don't add their own bg */
#page, .site-main, #content, .site-content {
  background-color: transparent !important;
}

/* ── 26c. TYPOGRAPHY — EDITORIAL SCALE ── */

/* Hero headline (h1 in Elementor widget) */
.elementor-widget-heading h1.elementor-heading-title {
  font-size: clamp(42px, 4.8vw, 72px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.025em !important;
  font-weight: 700 !important;
}

/* Section headings (h2) */
.elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(30px, 3.2vw, 46px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.016em !important;
  font-weight: 700 !important;
}

/* Subsection / card group headings (h3) */
.elementor-widget-heading h3.elementor-heading-title {
  font-size: clamp(20px, 1.9vw, 26px) !important;
  line-height: 1.24 !important;
  letter-spacing: -0.008em !important;
  font-weight: 600 !important;
}

/* h4 labels stay compact */
.elementor-widget-heading h4.elementor-heading-title {
  font-size: clamp(15px, 1.4vw, 19px) !important;
  line-height: 1.32 !important;
  letter-spacing: -0.002em !important;
  font-weight: 600 !important;
}

/* Elementor size-based overrides for widgets using size classes */
.elementor-heading-title.elementor-size-xxl {
  font-size: clamp(44px, 5vw, 76px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.026em !important;
}
.elementor-heading-title.elementor-size-xl {
  font-size: clamp(32px, 3.4vw, 48px) !important;
  line-height: 1.10 !important;
  letter-spacing: -0.018em !important;
}
.elementor-heading-title.elementor-size-large {
  font-size: clamp(24px, 2.6vw, 36px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.010em !important;
}

/* Body text — editorial reading rhythm */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.gu-cpt-body p,
.entry-content p {
  font-size: 17px !important;
  line-height: 1.76 !important;
  color: var(--color-ink) !important;
}
.elementor-widget-text-editor p + p,
.gu-cpt-body p + p {
  margin-top: 1.25em !important;
}

/* ── 26d. BUTTON SYSTEM — COMPLETE REWRITE ── */

/* Base reset — apply to ALL button variants */
.gu-btn,
.elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  padding: 12px 24px !important;
  border-radius: var(--radius-md) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 180ms var(--ease-std),
              transform 140ms var(--ease-std),
              box-shadow 180ms var(--ease-std),
              border-color 180ms var(--ease-std) !important;
  will-change: transform;
  white-space: nowrap;
}

/* Accent (primary CTA) — the one filled green button */
.gu-btn--accent,
.elementor-location-header .elementor-button,
.elementor-location-footer .elementor-button {
  background-color: var(--color-accent) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(14, 127, 192, 0.30) !important;
}
.gu-btn--accent:hover,
.elementor-location-header .elementor-button:hover,
.elementor-location-footer .elementor-button:hover {
  background-color: var(--color-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(14, 127, 192, 0.35) !important;
}
.gu-btn--accent:active,
.elementor-location-header .elementor-button:active,
.elementor-location-footer .elementor-button:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* Ghost / outline buttons (secondary — .gu-btn--ghost only)
   IMPORTANT: .elementor-button.elementor-button-link removed from this rule (9.10D).
   Each Elementor button widget uses its own per-element generated CSS for colors;
   the broad selector was overriding those with !important, turning hero/CTA buttons
   transparent + dark-text (invisible on dark backgrounds). */
.gu-btn--ghost {
  background-color: transparent !important;
  color: var(--color-ink) !important;
  border: 1.5px solid var(--color-border-strong) !important;
  box-shadow: none !important;
}
.gu-btn--ghost:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border-color: var(--color-ink) !important;
  transform: translateY(-1px) !important;
}

/* Dark-surface buttons (white) — on dark hero/CTA sections */
.gu-btn--light {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.30) !important;
  backdrop-filter: blur(4px);
}
.gu-btn--light:hover {
  background-color: rgba(255, 255, 255, 0.20) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  transform: translateY(-1px) !important;
}

/* Content body "Citește mai mult" links — Elementor default buttons on light bg */
.elementor-top-section:not([style*="background-color: rgb(28,"]):not([style*="background-color: rgb(30,"]):not([style*="background-color: rgb(35,"])
.elementor-button:not(.elementor-location-header .elementor-button):not(.elementor-location-footer .elementor-button) {
  background-color: var(--color-ink) !important;
  color: var(--color-canvas) !important;
  border: none !important;
  box-shadow: none !important;
}
.elementor-top-section:not([style*="background-color: rgb(28,"]):not([style*="background-color: rgb(30,"]):not([style*="background-color: rgb(35,"])
.elementor-button:not(.elementor-location-header .elementor-button):not(.elementor-location-footer .elementor-button):hover {
  background-color: #0F0C0A !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20) !important;
}

/* Header CTA — compact variant, always accent */
.gu-header__cta {
  background-color: var(--color-accent) !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  padding: 10px 20px !important;
  border-radius: var(--radius-md) !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(14, 127, 192, 0.25) !important;
  transition: background-color 180ms var(--ease-std),
              transform 140ms var(--ease-std),
              box-shadow 180ms var(--ease-std) !important;
}
.gu-header__cta:hover {
  background-color: var(--color-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(14, 127, 192, 0.30) !important;
}

/* Focus states — all interactive elements */
.gu-btn:focus-visible,
.elementor-button:focus-visible,
.gu-header__nav-link:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 3px !important;
  border-radius: 3px;
}

/* ── 26e. CARD SYSTEM — FLOATING, SHADOW-BASED ── */

/* The founding principle: cards are white surfaces that float
   above the --color-canvas body. Borders are replaced by shadow. */

/* Elementor inner section columns used as cards */
.elementor-top-section .elementor-inner-section .elementor-column > .elementor-widget-wrap,
.elementor-top-section .elementor-inner-section .elementor-column > .elementor-column-wrap > .elementor-widget-wrap {
  background-color: var(--color-surface) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 240ms var(--ease-std),
              box-shadow 240ms var(--ease-std) !important;
  overflow: hidden;
}
.elementor-top-section .elementor-inner-section .elementor-column > .elementor-widget-wrap:hover,
.elementor-top-section .elementor-inner-section .elementor-column > .elementor-column-wrap > .elementor-widget-wrap:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ── 26f. STATS SECTION — TYPE-FIRST AUTHORITY ── */

/* The three big numbers (15+, 2.000+, 98%) are accent teal = Bootstrap feeling.
   In 2026, these should be enormous near-black numerals — the size IS the emphasis. */
.elementor-counter-number-wrapper,
.elementor-counter-number {
  color: var(--color-ink) !important;
  font-family: var(--font-sans) !important;
  font-size: clamp(52px, 5.5vw, 80px) !important;
  font-weight: 700 !important;
  line-height: 1.0 !important;
  letter-spacing: -0.03em !important;
}
.elementor-counter-suffix,
.elementor-counter-prefix {
  color: var(--color-ink) !important;
  font-size: clamp(32px, 3.2vw, 48px) !important;
}
.elementor-counter-title {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--color-ink-secondary) !important;
  margin-top: 8px !important;
}

/* Divider lines in stats section — remove the heavy HR or make subtle */
.elementor-divider-separator {
  border-color: var(--color-border) !important;
}

/* ── 26g. "O ABORDARE" SECTION — ACCENT STRIP TREATMENT ── */

/* Replace the cold blue-grey pill backgrounds with editorial left-border strips.
   Targeting the column elements that carry the cold #E3F2FA background. */
.elementor-element[style*="background-color: rgb(228, 237, 235)"] {
  background-color: transparent !important;
  border-left: 2px solid var(--color-accent) !important;
  padding-left: 20px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.elementor-element[style*="background-color: rgba(228, 237, 235"] {
  background-color: transparent !important;
  border-left: 2px solid var(--color-accent) !important;
  padding-left: 20px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── 26h. DARK SECTIONS — DEPTH + WARMTH ── */

/* Dark hero + CTA sections: add subtle depth via radial gradient */
.elementor-top-section[style*="background-color: rgb(35, 30, 26)"],
.elementor-top-section[style*="background-color: rgb(28, 24, 20)"],
.elementor-top-section[style*="background-color: rgb(30, 25, 21)"],
.elementor-top-section[style*="background-color: rgb(36, 31, 26)"] {
  background-image: radial-gradient(
    ellipse at 30% 50%,
    rgba(14, 127, 192, 0.08) 0%,
    transparent 70%
  ) !important;
}

/* Hero headline and subtitle in dark sections */
.elementor-top-section[style*="background-color: rgb(35, 30, 26)"] h1,
.elementor-top-section[style*="background-color: rgb(35, 30, 26)"] h2,
.elementor-top-section[style*="background-color: rgb(28, 24, 20)"] h1,
.elementor-top-section[style*="background-color: rgb(28, 24, 20)"] h2 {
  color: #FFFFFF !important;
}

/* Hero subtitle / subtitle text on dark */
.elementor-top-section[style*="background-color: rgb(35, 30, 26)"] .elementor-widget-text-editor,
.elementor-top-section[style*="background-color: rgb(35, 30, 26)"] .elementor-widget-text-editor p {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
}

/* ── 26i. SECTION ARCHITECTURE + SPACING ── */

/* Content sections get generous breathing room.
   We target non-dark sections specifically. */
.elementor-top-section:not([style*="background-color: rgb(35,"]):not([style*="background-color: rgb(28,"]):not([style*="background-color: rgb(30,"]):not([style*="background-color: rgb(36,"]) {
  padding-top: max(80px, 6vw) !important;
  padding-bottom: max(80px, 6vw) !important;
}

/* Remove unnecessary top padding from very first content section */
.elementor-section-wrap > .elementor-section:nth-child(2) {
  padding-top: max(64px, 5vw) !important;
}

/* Section background — content sections float on canvas */
.elementor-top-section:not([style*="background-color: rgb(35,"]):not([style*="background-color: rgb(28,"]):not([style*="background-color: rgb(30,"]):not([style*="background-color: rgb(36,"]) {
  background-color: var(--color-surface) !important;
}

/* Warm inset sections — explicit warm bg targets */
.elementor-top-section[style*="background-color: rgb(244, 239, 230)"],
.elementor-top-section[style*="background-color: rgb(248, 246, 243)"],
.elementor-top-section[style*="background-color: rgb(245, 242, 238)"],
.elementor-top-section[style*="background-color: rgb(240, 237, 232)"] {
  background-color: var(--color-canvas) !important;
}

/* ── 26j. LINK SYSTEM — PRECISE UNDERLINE ANIMATION ── */

/* Content body links */
.elementor-widget-text-editor a,
.gu-cpt-body a,
.entry-content a,
.gu-article-body a {
  color: var(--color-accent) !important;
  text-decoration: none !important;
  background-image: linear-gradient(var(--color-accent), var(--color-accent)) !important;
  background-size: 0% 1px !important;
  background-repeat: no-repeat !important;
  background-position: left bottom !important;
  transition: background-size 200ms var(--ease-std),
              color 160ms var(--ease-std) !important;
  padding-bottom: 1px;
}
.elementor-widget-text-editor a:hover,
.gu-cpt-body a:hover,
.entry-content a:hover,
.gu-article-body a:hover {
  color: var(--color-accent-hover) !important;
  background-size: 100% 1px !important;
}

/* Archive "Citește mai mult" link → button */
.gu-afectiuni-card__link,
.gu-interventii-card__link,
.gu-article-card__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-accent) !important;
  text-decoration: none !important;
  letter-spacing: 0.01em !important;
  transition: gap 200ms var(--ease-std), color 160ms var(--ease-std) !important;
  background: none !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.gu-afectiuni-card__link:hover,
.gu-interventii-card__link:hover,
.gu-article-card__link:hover {
  color: var(--color-accent-hover) !important;
  gap: 10px !important;
}

/* ── 26k. ARCHIVE + CPT CARDS — COMPLETE REDESIGN ── */

/* Grid layout */
/* minmax(min(300px, 100%), 1fr) instead of minmax(300px, 1fr): the fixed
   300px minimum forced every card to 300px even when the viewport itself
   was narrower (e.g. 320px), overflowing the page horizontally. Capping
   the minimum at 100% of the available track lets it shrink fluidly below
   300px instead of forcing overflow — desktop is unaffected since
   min(300px, 100%) still resolves to 300px whenever the container is wider
   than that. */
.gu-afectiuni-grid,
.gu-interventii-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
  gap: 24px !important;
}
.gu-articole-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
  gap: 24px !important;
}

/* Card base — floating white surface */
.gu-afectiuni-card,
.gu-interventii-card,
.gu-article-card {
  background: var(--color-surface) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 280ms ease !important;
  position: relative;
  overflow: hidden;
}
.gu-afectiuni-card:hover,
.gu-interventii-card:hover,
.gu-article-card:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Accent left-edge indicator on hover */
.gu-afectiuni-card::before,
.gu-interventii-card::before,
.gu-article-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-accent);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 240ms var(--ease-std);
}
.gu-afectiuni-card:hover::before,
.gu-interventii-card:hover::before,
.gu-article-card:hover::before {
  transform: scaleY(1);
}

/* Card titles */
.gu-afectiuni-card__title,
.gu-interventii-card__title,
.gu-article-card__title {
  font-family: var(--font-sans) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.008em !important;
  color: var(--color-ink) !important;
  margin: 0 !important;
  transition: color 160ms var(--ease-std);
}
.gu-afectiuni-card:hover .gu-afectiuni-card__title,
.gu-interventii-card:hover .gu-interventii-card__title,
.gu-article-card:hover .gu-article-card__title {
  color: var(--color-accent) !important;
}

/* Card excerpts */
.gu-afectiuni-card__excerpt,
.gu-interventii-card__excerpt,
.gu-article-card__excerpt {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--color-ink-secondary) !important;
  margin: 0 !important;
  flex: 1;
}

/* Category chip */
.gu-afectiuni-card__category,
.gu-interventii-card__category,
.gu-article-card__category {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent);
  order: -1;
}

/* ── 26l. ARTICLE SINGLE — READING EXPERIENCE ── */

/* Full reading column constraint */
.gu-article-body,
.elementor-widget-theme-post-content {
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* TL;DR box — warm, not cold */
.callout-box {
  background: var(--color-canvas) !important;
  border: none !important;
  border-left: 3px solid var(--color-accent) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  padding: 24px 28px !important;
  box-shadow: var(--shadow-xs) !important;
}

/* ── 26m. FOOTER ── */

.elementor-location-footer {
  border-top: 1px solid var(--color-border) !important;
}

.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--color-ink-secondary) !important;
}

.elementor-location-footer .elementor-widget-nav-menu .elementor-nav-menu a,
.elementor-location-footer .elementor-nav-menu a {
  font-size: 14px !important;
  color: var(--color-ink) !important;
  transition: color 160ms var(--ease-std) !important;
}
.elementor-location-footer .elementor-nav-menu a:hover {
  color: var(--color-accent) !important;
}

/* Footer logo name */
.elementor-location-footer .gu-header__logo-name,
.elementor-location-footer .elementor-widget-heading h3.elementor-heading-title {
  font-size: 18px !important;
  letter-spacing: -0.01em !important;
}

/* ── 26n. SCROLL REVEAL SYSTEM ── */

/* Elements marked for reveal start hidden */
.gu-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 560ms var(--ease-out),
              transform 560ms var(--ease-out);
}
.gu-reveal.gu-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.gu-reveal-group > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 480ms var(--ease-out),
              transform 480ms var(--ease-out);
}
.gu-reveal-group.gu-visible > *:nth-child(1) { transition-delay: 0ms; }
.gu-reveal-group.gu-visible > *:nth-child(2) { transition-delay: 80ms; }
.gu-reveal-group.gu-visible > *:nth-child(3) { transition-delay: 160ms; }
.gu-reveal-group.gu-visible > *:nth-child(4) { transition-delay: 240ms; }
.gu-reveal-group.gu-visible > *:nth-child(5) { transition-delay: 320ms; }
.gu-reveal-group.gu-visible > *:nth-child(6) { transition-delay: 400ms; }
.gu-reveal-group.gu-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Prefers-reduced-motion: skip all animations */
@media (prefers-reduced-motion: reduce) {
  .gu-reveal,
  .gu-reveal-group > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── 26o. INTERACTIVE POLISH ── */

/* All Elementor images — subtle hover zoom */
.elementor-widget-image img,
.elementor-image img {
  transition: transform 400ms var(--ease-std),
              filter 400ms var(--ease-std) !important;
}
.elementor-widget-image:hover img,
.elementor-image:hover img {
  transform: scale(1.02) !important;
}

/* Photo placeholder boxes — intentional monogram treatment
   (visible until real photography arrives) */
.elementor-widget-image .elementor-image-placeholder,
[style*="background: rgb(232, 228, 222)"],
[style*="background-color: rgb(232, 228, 222)"] {
  background: linear-gradient(145deg, #E8E3DC 0%, #DDD6CC 100%) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 26p. RESPONSIVE REFINEMENTS ── */

@media (max-width: 767px) {
  /* Hero headline mobile */
  .elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(34px, 9vw, 46px) !important;
    letter-spacing: -0.018em !important;
  }

  /* Section headings mobile */
  .elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(26px, 7vw, 34px) !important;
  }

  /* Cards mobile */
  .gu-afectiuni-card,
  .gu-interventii-card,
  .gu-article-card {
    padding: 24px !important;
  }

  /* Stats mobile — still large but not 80px */
  .elementor-counter-number-wrapper,
  .elementor-counter-number {
    font-size: clamp(40px, 12vw, 58px) !important;
  }

  /* Section spacing mobile */
  .elementor-top-section:not([style*="background-color: rgb(35,"]):not([style*="background-color: rgb(28,"]):not([style*="background-color: rgb(30,"]):not([style*="background-color: rgb(36,"]) {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(38px, 5.5vw, 54px) !important;
  }
  .elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(28px, 3.8vw, 38px) !important;
  }
}


/* ── 26q. TARGETED ELEMENT FIXES ── */

/* FIX 1: Stats numbers — the headings are h3 widgets, not counter widgets.
   IDs confirmed via DOM inspection: a2i00010 (15+), a2i00013 (2.000+), a2i00016 (98%).
   Remove teal color. Scale to editorial display size.
   Specificity must beat Section 26c's h3 rule (0,2,1): use (0,3,1) by adding
   .elementor-element and h3 to the selector. */
.elementor-element.elementor-element-a2i00010 h3.elementor-heading-title,
.elementor-element.elementor-element-a2i00013 h3.elementor-heading-title,
.elementor-element.elementor-element-a2i00016 h3.elementor-heading-title {
  color: var(--color-ink) !important;
  font-family: var(--font-sans) !important;
  font-size: clamp(48px, 5.2vw, 76px) !important;
  font-weight: 700 !important;
  line-height: 1.0 !important;
  letter-spacing: -0.03em !important;
}
@media (max-width: 767px) {
  .elementor-element.elementor-element-a2i00010 h3.elementor-heading-title,
  .elementor-element.elementor-element-a2i00013 h3.elementor-heading-title,
  .elementor-element.elementor-element-a2i00016 h3.elementor-heading-title {
    font-size: clamp(40px, 11vw, 56px) !important;
  }
}

/* FIX 2: "O abordare" cold cards — a4wr1–a4wr4.
   Background is set in Elementor's generated <style> block (not inline style),
   so [style*=...] selectors don't match. Must use element class selectors.
   Match Elementor's :not(...) pseudo-class exactly to guarantee override. */
.elementor-element.elementor-element-a4wr1:not(.elementor-motion-effects-element-type-background),
.elementor-element.elementor-element-a4wr1 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element.elementor-element-a4wr2:not(.elementor-motion-effects-element-type-background),
.elementor-element.elementor-element-a4wr2 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element.elementor-element-a4wr3:not(.elementor-motion-effects-element-type-background),
.elementor-element.elementor-element-a4wr3 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element.elementor-element-a4wr4:not(.elementor-motion-effects-element-type-background),
.elementor-element.elementor-element-a4wr4 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: var(--color-surface) !important;
}
/* Warm card surface + accent left strip + elevation */
.elementor-element.elementor-element-a4wr1,
.elementor-element.elementor-element-a4wr2,
.elementor-element.elementor-element-a4wr3,
.elementor-element.elementor-element-a4wr4 {
  border-radius: var(--radius-md) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: 3px solid var(--color-accent) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 240ms var(--ease-std),
              box-shadow 240ms var(--ease-std) !important;
}
.elementor-element.elementor-element-a4wr1:hover,
.elementor-element.elementor-element-a4wr2:hover,
.elementor-element.elementor-element-a4wr3:hover,
.elementor-element.elementor-element-a4wr4:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* FIX 3: Expertise cards — direct .e-con children of container a3s00006.
   Confirmed via DOM: border: 1px solid rgb(214,207,196) on the card elements.
   Replace border with shadow. Surface stays white. */
.elementor-element-a3s00006 > .e-con {
  background-color: var(--color-surface) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 240ms var(--ease-std),
              box-shadow 240ms var(--ease-std) !important;
}
.elementor-element-a3s00006 > .e-con:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-md) !important;
}


/* ============================================================
   27. SPRINT 9.6 — GLOBAL VISUAL REFRESH
   All selectors confirmed via DOM inspection before writing.
   ============================================================ */

/* ── 27a. HOMEPAGE CTA BUTTON — GHOST ON DARK ── */
/* The button exists but has transparent bg + dark ink = invisible
   on the dark parent section a5c00001. Make it a light ghost. */
.elementor-element-a5c00001 .elementor-button {
  background-color: rgba(255, 255, 255, 0.10) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: none !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.elementor-element-a5c00001 .elementor-button:hover {
  background-color: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.60) !important;
  transform: translateY(-1px) !important;
  color: #FFFFFF !important;
}

/* ── 27b. DARK SECTIONS — GLOBAL TEXT CONTRAST ── */
/* Target all known dark section containers by element ID.
   Ensures headings + body text are always light on dark bg. */

/* All dark sections on programari */
.elementor-element-s6pg001 .elementor-heading-title,
.elementor-element-s6pg001 p,
.elementor-element-s6pg040 .elementor-heading-title,
.elementor-element-s6pg040 p,
.elementor-element-s6pg080 .elementor-heading-title,
.elementor-element-s6pg080 p,
/* Dark sections on despre */
.elementor-element-s8a040 .elementor-heading-title,
.elementor-element-s8a040 p,
.elementor-element-s8a120 .elementor-heading-title,
.elementor-element-s8a120 p,
/* Homepage CTA dark */
.elementor-element-a5c00001 .elementor-heading-title,
.elementor-element-a5c00001 p {
  color: rgba(255, 255, 255, 0.90) !important;
}

/* Primary headings in dark sections — full white, full weight */
.elementor-element-s6pg001 h1.elementor-heading-title,
.elementor-element-s6pg040 h2.elementor-heading-title,
.elementor-element-s6pg080 h2.elementor-heading-title,
.elementor-element-s8a040 h2.elementor-heading-title,
.elementor-element-s8a120 h2.elementor-heading-title,
.elementor-element-a5c00001 h2.elementor-heading-title {
  color: #FFFFFF !important;
}

/* Dark section label spans (small-caps labels like "ABORDAREA PACIENTULUI") */
.elementor-element-s8a040 span,
.elementor-element-s8a040 .elementor-widget-text-editor * {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Dark sections: subtle warm radial gradient for depth */
.elementor-element-s6pg001,
.elementor-element-s6pg040,
.elementor-element-s6pg080,
.elementor-element-s8a040,
.elementor-element-s8a120,
.elementor-element-a5c00001 {
  background-image: radial-gradient(
    ellipse at 60% 50%,
    rgba(14, 127, 192, 0.06) 0%,
    transparent 65%
  ) !important;
}

/* ── 27c. PROGRAMARI — CLINIC LOCATION BOXES ── */
/* s6pg045/046: dark boxes (rgb 46,41,37) on dark parent.
   Convert to frosted glass premium location cards. */
.elementor-element-s6pg045,
.elementor-element-s6pg046 {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: var(--radius-lg) !important;
  transition: background-color 220ms var(--ease-std),
              border-color 220ms var(--ease-std) !important;
}
.elementor-element-s6pg045:hover,
.elementor-element-s6pg046:hover {
  background-color: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* All text inside clinic boxes — ensure white */
.elementor-element-s6pg045 .elementor-heading-title,
.elementor-element-s6pg046 .elementor-heading-title,
.elementor-element-s6pg045 p,
.elementor-element-s6pg046 p,
.elementor-element-s6pg045 .elementor-icon-list-text,
.elementor-element-s6pg046 .elementor-icon-list-text {
  color: rgba(255, 255, 255, 0.90) !important;
}
.elementor-element-s6pg045 h3.elementor-heading-title,
.elementor-element-s6pg046 h3.elementor-heading-title {
  color: #FFFFFF !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

/* ── 27d. PROGRAMARI — COLD HINT BOX ── */
/* s6pg054: rgb(228,237,235) cold blue — same issue as "O abordare".
   Background set in Elementor CSS block, not inline style.
   Replace with warm accent-tinted surface. */
.elementor-element-s6pg054:not(.elementor-motion-effects-element-type-background),
.elementor-element-s6pg054 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: var(--color-accent-subtle) !important;
}
.elementor-element-s6pg054 {
  border-left: 3px solid var(--color-accent) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

/* ── 27e. PROGRAMARI — FORM FIELDS ── */

/* Field containers */
.elementor-form .elementor-field-group {
  margin-bottom: 20px !important;
}

/* Labels */
.elementor-form .elementor-field-label {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-ink-secondary) !important;
  margin-bottom: 7px !important;
  display: block !important;
}

/* Text inputs, email, textarea, select */
.elementor-form .elementor-field-textual,
.elementor-form input[type="text"],
.elementor-form input[type="email"],
.elementor-form input[type="tel"],
.elementor-form textarea,
.elementor-form select {
  border-radius: var(--radius-md) !important;
  border: 1.5px solid var(--color-border) !important;
  background-color: var(--color-surface) !important;
  color: var(--color-ink) !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  padding: 13px 16px !important;
  width: 100% !important;
  transition: border-color 160ms var(--ease-std),
              box-shadow 160ms var(--ease-std) !important;
  -webkit-appearance: none;
  appearance: none;
}
.elementor-form .elementor-field-textual:focus,
.elementor-form input[type="text"]:focus,
.elementor-form input[type="email"]:focus,
.elementor-form textarea:focus,
.elementor-form select:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px var(--color-accent-subtle) !important;
  outline: none !important;
}
.elementor-form textarea {
  min-height: 120px !important;
  resize: vertical !important;
}
.elementor-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2368615C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 40px !important;
}

/* Form submit button */
.elementor-form .elementor-button[type="submit"] {
  background-color: var(--color-accent) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(14, 127, 192, 0.30) !important;
  transition: background-color 180ms var(--ease-std),
              transform 140ms var(--ease-std),
              box-shadow 180ms var(--ease-std) !important;
  width: auto !important;
}
.elementor-form .elementor-button[type="submit"]:hover {
  background-color: var(--color-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(14, 127, 192, 0.35) !important;
}

/* Acceptance field (checkbox) */
.elementor-form .elementor-field-type-acceptance label {
  font-size: 13px !important;
  color: var(--color-ink-secondary) !important;
  line-height: 1.55 !important;
}
.elementor-form .elementor-field-type-acceptance a {
  color: var(--color-accent) !important;
}

/* Form section heading */
.elementor-element-s6pg060 .elementor-heading-title {
  font-size: clamp(26px, 2.6vw, 34px) !important;
}

/* ── 27f. PROGRAMARI — "CUM FUNCȚIONEAZĂ" STEP CARDS ── */
/* 4-step process cards in section s6pg030 */
.elementor-element-s6pg030 .e-con > .e-con {
  background-color: var(--color-surface) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: none !important;
  transition: transform 220ms var(--ease-std),
              box-shadow 220ms var(--ease-std) !important;
}
.elementor-element-s6pg030 .e-con > .e-con:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}
/* Step icons — accent tint */
.elementor-element-s6pg030 .elementor-icon-box-icon,
.elementor-element-s6pg030 .elementor-icon i,
.elementor-element-s6pg030 .elementor-icon svg {
  color: var(--color-accent) !important;
  fill: var(--color-accent) !important;
}

/* ── 27g. PROGRAMARI — "CE SĂ ADUCI" CHECKLIST ── */
/* Icon list items in s6pg050 */
.elementor-element-s6pg050 .elementor-icon-list-icon {
  color: var(--color-accent) !important;
}
.elementor-element-s6pg050 .elementor-icon-list-text {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* ── 27h. DESPRE — INTEREST DOMAIN CARDS ── */
/* "Domenii de Interes Special" — 3 cards in s8a070.
   These are e-con children of a row container. */
.elementor-element-s8a070 .e-con .e-con {
  background-color: var(--color-surface) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 240ms var(--ease-std),
              box-shadow 240ms var(--ease-std) !important;
}
.elementor-element-s8a070 .e-con .e-con:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-md) !important;
}
/* Card "Aflați mai multe" link */
.elementor-element-s8a070 .elementor-button {
  background-color: transparent !important;
  color: var(--color-accent) !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  letter-spacing: 0.01em !important;
}
.elementor-element-s8a070 .elementor-button:hover {
  color: var(--color-accent-hover) !important;
  transform: none !important;
  background-color: transparent !important;
}

/* ── 27i. DESPRE — CREDENTIALS BAR ── */
/* s8a020: [X]+, Neurochirurg, [CLIENT: spital], Romana/Engleza */
.elementor-element-s8a020 {
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.elementor-element-s8a020 .elementor-heading-title {
  font-family: var(--font-sans) !important;
  font-size: clamp(28px, 2.8vw, 40px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-ink) !important;
  line-height: 1.1 !important;
}
/* Labels under the credentials numbers */
.elementor-element-s8a020 .elementor-widget-text-editor p {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-ink-secondary) !important;
}

/* ── 27j. DESPRE — PHILOSOPHY DARK SECTION ── */
/* s8a040: dark section, nearly empty — add a warm quote-style inset */
.elementor-element-s8a040 {
  background-image: radial-gradient(
    ellipse at 30% 60%,
    rgba(14, 127, 192, 0.08) 0%,
    transparent 60%
  ) !important;
}
/* Teal label treatment (e.g. "ABORDAREA PACIENTULUI") */
.elementor-element-s8a040 .elementor-widget-text-editor p:first-child {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--color-accent) !important;
  margin-bottom: 20px !important;
  font-weight: 500 !important;
}
/* Philosophy quote text */
.elementor-element-s8a040 blockquote,
.elementor-element-s8a040 .elementor-widget-text-editor p:not(:first-child) {
  font-family: var(--font-sans) !important;
  font-size: clamp(18px, 1.8vw, 24px) !important;
  line-height: 1.6 !important;
  font-style: normal !important;
  color: var(--color-ink-secondary) !important;
  border-left: 2px solid var(--color-accent) !important;
  padding-left: 24px !important;
  margin: 0 !important;
}

/* ── 27k. CONTENT SINGLE PAGE HERO ── */
/* Afectiuni-single, interventii-single: page title on plain white.
   Add warm canvas tint to the first section (the title hero area). */
.single-afectiuni .elementor-section-wrap > *:first-child,
.single-interventii .elementor-section-wrap > *:first-child,
.single-post .elementor-section-wrap > *:first-child {
  background-color: var(--color-canvas) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* ── 27l. ARCHIVE HERO BANNER ── */
/* s4ar001 (afectiuni), similar on interventii/articole — ensure
   hero h1 stays large and white. Add decorative line above. */
.elementor-element-s4ar001 h1.elementor-heading-title,
[class*="elementor-element-s4"] h1.elementor-heading-title,
[class*="elementor-element-s5"] h1.elementor-heading-title,
[class*="elementor-element-s6ar"] h1.elementor-heading-title {
  color: #FFFFFF !important;
}
/* Hero banner bottom separator */
.elementor-element-s4ar001,
[class*="elementor-element-s4ar"],
[class*="elementor-element-s5ar"],
[class*="elementor-element-s6ar"] {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ── 27m. ARCHIVE LISTING CARD — WIDE FORMAT ── */
/* The single-column wide card on archive pages */
.gu-afectiuni-card,
.gu-interventii-card {
  padding: 36px 40px !important;
}
.gu-afectiuni-card__title,
.gu-interventii-card__title {
  font-size: 24px !important;
  margin-bottom: 12px !important;
}
.gu-afectiuni-card__excerpt,
.gu-interventii-card__excerpt {
  max-width: 680px !important;
}

/* ── 27n. RELATED CONTENT SECTIONS (BOTTOM OF SINGLES) ── */
/* "Afecțiuni conexe" and "Intervenții chirurgicale conexe"
   sections at bottom of article-single/afectiuni-single pages */
.gu-related-conditions,
.gu-related-interventions,
.gu-afectiuni-conexe,
.gu-interventii-conexe {
  padding: 48px 0 !important;
  border-top: 1px solid var(--color-border) !important;
}
.gu-related-section-title {
  font-family: var(--font-sans) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-ink) !important;
  margin-bottom: 24px !important;
}

/* ── 27o. FAQ SECTIONS — ACCORDION STYLING ── */
/* Elementor accordion on /programari/ and /afectiuni/ singles */
.elementor-accordion .elementor-accordion-item {
  border: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.elementor-accordion .elementor-accordion-item:first-child {
  border-top: 1px solid var(--color-border) !important;
}
.elementor-accordion .elementor-tab-title {
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--color-ink) !important;
  padding: 18px 0 !important;
  background: transparent !important;
  border: none !important;
}
.elementor-accordion .elementor-tab-title .elementor-accordion-icon {
  color: var(--color-accent) !important;
}
.elementor-accordion .elementor-tab-title.elementor-active {
  color: var(--color-accent) !important;
  font-weight: 600 !important;
}
.elementor-accordion .elementor-tab-content {
  font-size: 15px !important;
  line-height: 1.72 !important;
  color: var(--color-ink-secondary) !important;
  padding: 0 0 20px 0 !important;
  border: none !important;
  background: transparent !important;
}

/* ── 27p. FOOTER SECONDARY BUTTON ── */
/* "Detalii și program →" ghost button in footer */
.elementor-location-footer .elementor-button {
  background-color: transparent !important;
  color: var(--color-ink) !important;
  border: 1.5px solid var(--color-border-strong) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  padding: 10px 20px !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
}
.elementor-location-footer .elementor-button:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border-color: var(--color-ink) !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

/* ── 27q. AUTHOR BOX — ARTICLE SINGLE ── */
/* The Dr. George Ungureanu author card on article single pages */
.gu-author-box,
.gu-article-author {
  background-color: var(--color-canvas) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 28px 32px !important;
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
}
.gu-author-box__avatar,
.gu-article-author__avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background-color: var(--color-surface-warm) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
.gu-author-box__name,
.gu-article-author__name {
  font-family: var(--font-sans) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
  margin-bottom: 4px !important;
}
.gu-author-box__role,
.gu-article-author__role {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--color-accent) !important;
  margin-bottom: 10px !important;
}
.gu-author-box__bio,
.gu-article-author__bio {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--color-ink-secondary) !important;
}

/* ── 27r. CALLOUT / TL;DR BOX ── */
/* Article single TL;DR box */
.callout-box {
  background-color: var(--color-canvas) !important;
  border-left: 3px solid var(--color-accent) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  padding: 24px 28px !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  box-shadow: var(--shadow-xs) !important;
  margin-bottom: 40px !important;
}
.callout-box p {
  font-size: 15px !important;
  line-height: 1.68 !important;
  color: var(--color-ink) !important;
}
.callout-box strong {
  color: var(--color-ink) !important;
  font-weight: 600 !important;
}

/* ── 27s. PROGRAMARI — CONSULTATION TYPE CARDS ── */
/* "Alege tipul de consultație" section s6pg020 */
.elementor-element-s6pg020 .e-con .e-con {
  background-color: var(--color-surface) !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color 200ms var(--ease-std),
              transform 200ms var(--ease-std),
              box-shadow 200ms var(--ease-std) !important;
}
.elementor-element-s6pg020 .e-con .e-con:hover {
  border-left-color: var(--color-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}
/* "Programează" links inside consultation cards */
.elementor-element-s6pg020 .elementor-button {
  background-color: var(--color-ink) !important;
  color: var(--color-canvas) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
}
.elementor-element-s6pg020 .elementor-button:hover {
  background-color: #0F0C0A !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ── 27t. RESPONSIVE — MOBILE ADJUSTMENTS ── */

@media (max-width: 767px) {
  /* Form improvements */
  .elementor-form .elementor-field-textual,
  .elementor-form input[type="text"],
  .elementor-form input[type="email"],
  .elementor-form textarea,
  .elementor-form select {
    font-size: 16px !important; /* prevents iOS auto-zoom on focus */
  }

  /* Archive wide cards */
  .gu-afectiuni-card,
  .gu-interventii-card {
    padding: 24px !important;
  }

  /* Clinic boxes stacked */
  .elementor-element-s6pg045,
  .elementor-element-s6pg046 {
    margin-bottom: 12px !important;
  }

  /* FAQ accordion */
  .elementor-accordion .elementor-tab-title {
    font-size: 15px !important;
    padding: 16px 0 !important;
  }
}


/* ============================================================
   28. SPRINT 9.7 — APPLE HEALTH DIRECTION
   Light-first. Airy. Precise. Every dark section → light.
   All selectors confirmed via full DOM audit.
   ============================================================ */

/* ── 28a. TOKEN PIVOT — APPLE DIRECTION ── */

:root {
  --color-canvas:        #F5F5F7;   /* Apple grey-white */
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #FBFBFD;   /* Very subtle blue-white tint */
  --color-ink:           #1D1D1F;   /* Apple graphite */
  --color-ink-secondary: #6E6E73;   /* Apple secondary grey */
  --color-border:        rgba(0, 0, 0, 0.06);
  --color-border-strong: rgba(0, 0, 0, 0.15);
  --color-accent:        #0E7FC0;   /* Sage — unchanged, used restrained */
  --color-accent-hover:  #0B6094;
  --color-accent-subtle: rgba(14, 127, 192, 0.07);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10);
}

/* Body canvas */
body {
  background-color: #F5F5F7 !important;
  color: #1D1D1F !important;
}

/* ── 28b. HEADER — PURE WHITE GLASS ── */

#gu-header {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
#gu-header.is-compact {
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom-color: rgba(0, 0, 0, 0.12) !important;
}
.gu-mobile-drawer__panel {
  background: rgba(255, 255, 255, 0.97) !important;
}

/* ── 28c. HELPER — BACKGROUND OVERRIDE MIXIN ── */
/* Every dark section uses the same Elementor :not() pattern.
   Applied below for each confirmed element ID. */

/* ── 28d. HOMEPAGE HERO → LIGHT ── */

/* Remove dark background from hero section */
.elementor-element-3b2e4f01:not(.elementor-motion-effects-element-type-background),
.elementor-element-3b2e4f01 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #FFFFFF !important;
}
.elementor-element-3b2e4f01 {
  background-image: linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 100%) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
/* Hero headline — graphite */
.elementor-element-3b2e4f01 h1.elementor-heading-title,
.elementor-element-3b2e4f01 h2.elementor-heading-title {
  color: #1D1D1F !important;
}
/* Hero subtitle / paragraph */
.elementor-element-3b2e4f01 .elementor-widget-text-editor p,
.elementor-element-3b2e4f01 p {
  color: #424245 !important;
}
/* Hero CTA button — dark ink (confident, Apple-like) */
.elementor-element-3b2e4f01 .elementor-button,
.elementor-element-3b2e4f05 .elementor-button {
  background-color: #1D1D1F !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.elementor-element-3b2e4f01 .elementor-button:hover,
.elementor-element-3b2e4f05 .elementor-button:hover {
  background-color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20) !important;
}

/* Photo placeholder column — elegant light card */
.elementor-element-3b2e4f09:not(.elementor-motion-effects-element-type-background),
.elementor-element-3b2e4f09 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F5F5F7 !important;
}
.elementor-element-3b2e4f09 {
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06),
              0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  background-position: center 45% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* ── 28e. HOMEPAGE WARM SECTIONS → COOL NEUTRAL ── */

/* Bio outer section (a2i00001: rgb 253,251,247) → white */
.elementor-element-a2i00001:not(.elementor-motion-effects-element-type-background),
.elementor-element-a2i00001 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #FFFFFF !important;
}
/* Bio inner (a2i00002: rgb 237,232,223) → Apple canvas grey */
.elementor-element-a2i00002:not(.elementor-motion-effects-element-type-background),
.elementor-element-a2i00002 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F5F5F7 !important;
}

/* ── 28f. HOMEPAGE BOTTOM CTA → LIGHT ── */

.elementor-element-a5c00001:not(.elementor-motion-effects-element-type-background),
.elementor-element-a5c00001 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F5F5F7 !important;
}
.elementor-element-a5c00001 {
  background-image: none !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.elementor-element-a5c00001 .elementor-heading-title {
  color: #1D1D1F !important;
}
.elementor-element-a5c00001 p {
  color: #424245 !important;
}
/* Button: switch from ghost-white to accent sage */
.elementor-element-a5c00001 .elementor-button {
  background-color: var(--color-accent) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(14, 127, 192, 0.28) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.elementor-element-a5c00001 .elementor-button:hover {
  background-color: var(--color-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(14, 127, 192, 0.35) !important;
  color: #FFFFFF !important;
}

/* ── 28g. ARCHIVE HEROES → LIGHT EDITORIAL ── */

/* Afecțiuni archive: s4ar001 */
/* Intervenții archive: s5ar001 */
/* Articole archive:   s7ar001 */
.elementor-element-s4ar001:not(.elementor-motion-effects-element-type-background),
.elementor-element-s4ar001 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-s5ar001:not(.elementor-motion-effects-element-type-background),
.elementor-element-s5ar001 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-s7ar001:not(.elementor-motion-effects-element-type-background),
.elementor-element-s7ar001 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F5F5F7 !important;
}
.elementor-element-s4ar001,
.elementor-element-s5ar001,
.elementor-element-s7ar001 {
  background-image: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
/* Archive hero headings — graphite */
.elementor-element-s4ar001 h1.elementor-heading-title,
.elementor-element-s5ar001 h1.elementor-heading-title,
.elementor-element-s7ar001 h1.elementor-heading-title {
  color: #1D1D1F !important;
}
.elementor-element-s4ar001 .elementor-widget-text-editor p,
.elementor-element-s5ar001 .elementor-widget-text-editor p,
.elementor-element-s7ar001 .elementor-widget-text-editor p,
.elementor-element-s4ar001 p,
.elementor-element-s5ar001 p,
.elementor-element-s7ar001 p {
  color: #6E6E73 !important;
}

/* ── 28h. SINGLE PAGE HEROES → LIGHT ── */

/* Afecțiuni single: s4sg001 */
/* Intervenții single: s5sg001 */
/* Articole single:   s7sg001 */
.elementor-element-s4sg001:not(.elementor-motion-effects-element-type-background),
.elementor-element-s4sg001 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-s5sg001:not(.elementor-motion-effects-element-type-background),
.elementor-element-s5sg001 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-s7sg001:not(.elementor-motion-effects-element-type-background),
.elementor-element-s7sg001 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #FFFFFF !important;
}
.elementor-element-s4sg001,
.elementor-element-s5sg001,
.elementor-element-s7sg001 {
  background-image: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
/* Headings + text */
.elementor-element-s4sg001 h1.elementor-heading-title,
.elementor-element-s5sg001 h1.elementor-heading-title,
.elementor-element-s7sg001 h1.elementor-heading-title {
  color: #1D1D1F !important;
}
.elementor-element-s4sg001 p,
.elementor-element-s5sg001 p,
.elementor-element-s7sg001 p {
  color: #424245 !important;
}
/* Metadata: byline, date, read time */
.elementor-element-s7sg001 .gu-article-meta,
.elementor-element-s7sg001 .elementor-widget-text-editor,
.gu-article-byline {
  color: #6E6E73 !important;
}

/* ── 28i. SINGLE PAGE CTA SECTIONS → LIGHT ── */

/* Bottom CTA on afectiuni/interventii/articole single pages */
/* s4sg060, s5sg060, s7sg060 */
.elementor-element-s4sg060:not(.elementor-motion-effects-element-type-background),
.elementor-element-s4sg060 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-s5sg060:not(.elementor-motion-effects-element-type-background),
.elementor-element-s5sg060 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-s7sg060:not(.elementor-motion-effects-element-type-background),
.elementor-element-s7sg060 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F5F5F7 !important;
}
.elementor-element-s4sg060,
.elementor-element-s5sg060,
.elementor-element-s7sg060 {
  background-image: none !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.elementor-element-s4sg060 .elementor-heading-title,
.elementor-element-s5sg060 .elementor-heading-title,
.elementor-element-s7sg060 .elementor-heading-title {
  color: #1D1D1F !important;
}
.elementor-element-s4sg060 p,
.elementor-element-s5sg060 p,
.elementor-element-s7sg060 p {
  color: #424245 !important;
}
/* CTA button — sage green, matches header */
.elementor-element-s4sg060 .elementor-button,
.elementor-element-s5sg060 .elementor-button,
.elementor-element-s7sg060 .elementor-button {
  background-color: var(--color-accent) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(14, 127, 192, 0.28) !important;
  backdrop-filter: none !important;
}
.elementor-element-s4sg060 .elementor-button:hover,
.elementor-element-s5sg060 .elementor-button:hover,
.elementor-element-s7sg060 .elementor-button:hover {
  background-color: var(--color-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(14, 127, 192, 0.35) !important;
}

/* ── 28j. PROGRAMARI PAGE → LIGHT THROUGHOUT ── */

/* Hero */
.elementor-element-s6pg001:not(.elementor-motion-effects-element-type-background),
.elementor-element-s6pg001 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #FFFFFF !important;
}
.elementor-element-s6pg001 {
  background-image: linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 100%) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.elementor-element-s6pg001 h1.elementor-heading-title {
  color: #1D1D1F !important;
}
.elementor-element-s6pg001 p {
  color: #424245 !important;
}

/* Warm credential sections → Apple canvas */
.elementor-element-s6pg010:not(.elementor-motion-effects-element-type-background),
.elementor-element-s6pg010 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-s6pg030:not(.elementor-motion-effects-element-type-background),
.elementor-element-s6pg030 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-s6pg050:not(.elementor-motion-effects-element-type-background),
.elementor-element-s6pg050 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-s6pg070:not(.elementor-motion-effects-element-type-background),
.elementor-element-s6pg070 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F5F5F7 !important;
}

/* "Unde consulți" → light surface */
.elementor-element-s6pg040:not(.elementor-motion-effects-element-type-background),
.elementor-element-s6pg040 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F5F5F7 !important;
}
.elementor-element-s6pg040 {
  background-image: none !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.elementor-element-s6pg040 .elementor-heading-title {
  color: #1D1D1F !important;
}
.elementor-element-s6pg040 p,
.elementor-element-s6pg040 .elementor-widget-text-editor {
  color: #424245 !important;
}

/* Clinic boxes: now white floating cards on light bg */
.elementor-element-s6pg045:not(.elementor-motion-effects-element-type-background),
.elementor-element-s6pg045 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-s6pg046:not(.elementor-motion-effects-element-type-background),
.elementor-element-s6pg046 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #FFFFFF !important;
}
.elementor-element-s6pg045,
.elementor-element-s6pg046 {
  background-image: none !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  backdrop-filter: none !important;
}
.elementor-element-s6pg045 .elementor-heading-title,
.elementor-element-s6pg046 .elementor-heading-title {
  color: #1D1D1F !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}
.elementor-element-s6pg045 p,
.elementor-element-s6pg046 p,
.elementor-element-s6pg045 .elementor-icon-list-text,
.elementor-element-s6pg046 .elementor-icon-list-text {
  color: #424245 !important;
}

/* Programari final CTA → light */
.elementor-element-s6pg080:not(.elementor-motion-effects-element-type-background),
.elementor-element-s6pg080 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F5F5F7 !important;
}
.elementor-element-s6pg080 {
  background-image: none !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.elementor-element-s6pg080 .elementor-heading-title {
  color: #1D1D1F !important;
}
.elementor-element-s6pg080 p {
  color: #424245 !important;
}
.elementor-element-s6pg080 .elementor-button {
  background-color: var(--color-accent) !important;
  color: #FFFFFF !important;
  border: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 1px 3px rgba(14, 127, 192, 0.28) !important;
}
.elementor-element-s6pg080 .elementor-button:hover {
  background-color: var(--color-accent-hover) !important;
  transform: translateY(-1px) !important;
}

/* ── 28k. DESPRE PAGE → LIGHT ── */

/* Warm bg sections */
.elementor-element-s8a010:not(.elementor-motion-effects-element-type-background),
.elementor-element-s8a010 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-s8a030:not(.elementor-motion-effects-element-type-background),
.elementor-element-s8a030 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-s8a060:not(.elementor-motion-effects-element-type-background),
.elementor-element-s8a060 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-s8a100:not(.elementor-motion-effects-element-type-background),
.elementor-element-s8a100 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F5F5F7 !important;
}

/* Philosophy section → light */
.elementor-element-s8a040:not(.elementor-motion-effects-element-type-background),
.elementor-element-s8a040 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F5F5F7 !important;
}
.elementor-element-s8a040 {
  background-image: none !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.elementor-element-s8a040 h2.elementor-heading-title,
.elementor-element-s8a040 h3.elementor-heading-title {
  color: #1D1D1F !important;
}
.elementor-element-s8a040 .elementor-widget-text-editor p,
.elementor-element-s8a040 p {
  color: #424245 !important;
  font-style: normal !important;
  border-left: none !important;
  padding-left: 0 !important;
}
/* Teal label in philosophy section */
.elementor-element-s8a040 span,
.elementor-element-s8a040 .elementor-widget-text-editor p:first-child {
  color: var(--color-accent) !important;
}

/* Philosophy content quote treatment — restrained on light */
.elementor-element-s8a040 blockquote {
  border-left: 2px solid var(--color-accent) !important;
  padding-left: 20px !important;
  color: #424245 !important;
  font-style: italic !important;
}

/* Sobre CTA → light */
.elementor-element-s8a120:not(.elementor-motion-effects-element-type-background),
.elementor-element-s8a120 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F5F5F7 !important;
}
.elementor-element-s8a120 {
  background-image: none !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.elementor-element-s8a120 .elementor-heading-title {
  color: #1D1D1F !important;
}
.elementor-element-s8a120 p {
  color: #424245 !important;
}
.elementor-element-s8a120 .elementor-button {
  background-color: var(--color-accent) !important;
  color: #FFFFFF !important;
  border: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 1px 3px rgba(14, 127, 192, 0.28) !important;
}
.elementor-element-s8a120 .elementor-button:hover {
  background-color: var(--color-accent-hover) !important;
  transform: translateY(-1px) !important;
}

/* ── 28l. NEUTRALISE PREVIOUS DARK SECTION RULES ── */
/* Section 27b set white text for these sections. Override to graphite. */

.elementor-element-s6pg001 .elementor-heading-title,
.elementor-element-s6pg001 p,
.elementor-element-s6pg040 .elementor-heading-title,
.elementor-element-s6pg040 p,
.elementor-element-s6pg080 .elementor-heading-title,
.elementor-element-s6pg080 p,
.elementor-element-s8a040 .elementor-heading-title,
.elementor-element-s8a040 p,
.elementor-element-s8a120 .elementor-heading-title,
.elementor-element-s8a120 p,
.elementor-element-a5c00001 .elementor-heading-title,
.elementor-element-a5c00001 p {
  color: #1D1D1F !important;
}
/* Secondary text in these sections */
.elementor-element-s6pg001 .elementor-widget-text-editor p,
.elementor-element-s6pg040 .elementor-widget-text-editor p,
.elementor-element-s6pg080 .elementor-widget-text-editor p,
.elementor-element-s8a040 .elementor-widget-text-editor p,
.elementor-element-s8a120 .elementor-widget-text-editor p,
.elementor-element-a5c00001 .elementor-widget-text-editor p {
  color: #6E6E73 !important;
}
/* Also neutralise radial gradients on former dark sections */
.elementor-element-s6pg001,
.elementor-element-s6pg040,
.elementor-element-s6pg080,
.elementor-element-s8a120,
.elementor-element-a5c00001 {
  background-image: none !important;
}
/* Archive heroes — remove old dark-section gradient rules */
.elementor-element-s4ar001,
.elementor-element-s5ar001,
.elementor-element-s7ar001 {
  background-image: none !important;
}

/* ── 28m. GLOBAL TYPOGRAPHY COLOUR UPDATE ── */
/* All heading titles default to graphite unless overridden by a dark-bg rule */

.elementor-heading-title {
  color: #1D1D1F;
}
.elementor-widget-text-editor p {
  color: #424245;
}

/* ── 28n. LINK COLOUR UPDATE ── */

.elementor-widget-text-editor a,
.gu-cpt-body a,
.entry-content a {
  color: var(--color-accent) !important;
  background-image: linear-gradient(var(--color-accent), var(--color-accent)) !important;
}

/* ── 28o. SECTION BACKGROUNDS — WARM BEIGE → COOL NEUTRAL ── */
/* The alternating rhythm becomes: #FFFFFF → #F5F5F7 → #FFFFFF */

/* Expertise section warm bg (a3s00001 confirmed earlier) */
.elementor-element-a3s00001:not(.elementor-motion-effects-element-type-background),
.elementor-element-a3s00001 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F5F5F7 !important;
}
/* "O abordare" section — whatever warm bg it has */
.elementor-element-a4w00001:not(.elementor-motion-effects-element-type-background),
.elementor-element-a4w00001 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #FFFFFF !important;
}

/* ── 28p. PHOTO PLACEHOLDER TREATMENT ── */
/* All photo placeholder boxes — refined card appearance */

.elementor-widget-image .elementor-image-placeholder,
[class*="elementor-element-3b2e4f09"],
[class*="elementor-element-a2i00001"] .elementor-image {
  background-color: #F5F5F7 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* "Fotografie Dr. George Ungureanu" placeholder text */
.elementor-image-placeholder p,
.elementor-image-placeholder,
.elementor-empty-view {
  color: #6E6E73 !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
}

/* ── 28q. FOOTER BORDER — CLEAN SEPARATOR ── */

.elementor-location-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  background-color: #F5F5F7 !important;
}

/* ── 28r. GLOBAL SECTION SPACING UPDATE ── */
/* Sections that now have light bg need slightly more generous padding
   to prevent them from merging visually */

.elementor-element-s4sg001,
.elementor-element-s5sg001,
.elementor-element-s7sg001,
.elementor-element-s4ar001,
.elementor-element-s5ar001,
.elementor-element-s7ar001,
.elementor-element-s6pg001,
.elementor-element-3b2e4f01 {
  padding-top: max(100px, 8vw) !important;
  padding-bottom: max(80px, 6vw) !important;
}

/* ── 28s. MOBILE REFINEMENTS ── */

@media (max-width: 767px) {
  .elementor-element-3b2e4f01,
  .elementor-element-s4sg001,
  .elementor-element-s5sg001,
  .elementor-element-s7sg001,
  .elementor-element-s4ar001,
  .elementor-element-s5ar001,
  .elementor-element-s7ar001,
  .elementor-element-s6pg001 {
    padding-top: 72px !important;
    padding-bottom: 60px !important;
  }
}

/* =====================================================================
   SECTION 29 — PROGRAMĂRI: CLINIC CARDS, CHECKLIST, FAQ (Sprint 9.9A)
   Shortcode-rendered components — no Elementor element IDs.
   ===================================================================== */

/* ── Clinic card grid ─────────────────────────────────────── */

.gu-clinic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 36px;
}

@media (max-width: 768px) {
  .gu-clinic-grid {
    grid-template-columns: 1fr;
  }
}

.gu-clinic-card {
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gu-clinic-card__photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #E8E8ED 0%, #D2D2D7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gu-clinic-card__photo span {
  font: 400 13px/1 Inter, system-ui, sans-serif;
  color: #86868B;
  letter-spacing: .01em;
}

.gu-clinic-card__body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.gu-clinic-card__city {
  display: inline-block;
  background: rgba(14, 127, 192, .10);
  color: #0E7FC0;
  font: 600 11px/1 Inter, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
  align-self: flex-start;
}

.gu-clinic-card__name {
  font: 700 20px/1.25 Inter, system-ui, sans-serif;
  color: #1D1D1F;
  margin: 0 0 10px;
}

.gu-clinic-card__desc {
  font: 400 15px/1.65 Inter, system-ui, sans-serif;
  color: #6E6E73;
  margin: 0 0 24px;
  flex: 1;
}

.gu-clinic-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: auto;
}

/* ── Locations Loop Grid — real photo, schedule/address/phone lines ──
   Additive only: reuses .gu-clinic-card unchanged (background, radius,
   shadow, photo box, city badge, name, actions already defined above). */

.gu-clinic-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gu-clinic-card__schedule,
.gu-clinic-card__address {
  font: 400 14px/1.55 Inter, system-ui, sans-serif;
  color: #424245;
  margin: 0 0 8px;
}

.gu-clinic-card__schedule {
  font-weight: 600;
  color: #1D1D1F;
}

.gu-clinic-card__address {
  color: #6E6E73;
  margin-bottom: 16px;
}

.gu-clinic-card__phone-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.gu-clinic-card__phone {
  display: inline-block;
  font: 600 14px/1 Inter, system-ui, sans-serif;
  color: #0E7FC0;
  text-decoration: none;
  word-break: keep-all;
  white-space: nowrap;
}

.gu-clinic-card__phone:hover,
.gu-clinic-card__phone:focus-visible {
  text-decoration: underline;
}

.gu-clinic-card__phone-ext {
  font: 400 13px/1 Inter, system-ui, sans-serif;
  color: #86868B;
  white-space: nowrap;
}

.gu-clinic-card__note {
  font: 400 13px/1.6 Inter, system-ui, sans-serif;
  color: #86868B;
  background: #F5F5F7;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 14px 0 0;
}

.gu-clinic-card__map-link {
  font: 600 14px/1 Inter, system-ui, sans-serif;
  color: #0E7FC0;
  text-decoration: none;
  padding: 8px 4px;
}

.gu-clinic-card__map-link:hover,
.gu-clinic-card__map-link:focus-visible {
  text-decoration: underline;
}

.gu-locations-note {
  font: 400 13px/1.6 Inter, system-ui, sans-serif;
  color: #86868B;
  text-align: center;
  margin: 24px 0 0;
}

/* ── Booking checklist ────────────────────────────────────── */

.gu-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gu-checklist li {
  position: relative;
  padding: 16px 0 16px 40px;
  font: 400 16px/1.5 Inter, system-ui, sans-serif;
  color: #1D1D1F;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.gu-checklist li:last-child {
  border-bottom: none;
}

.gu-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(14,127,192,.08);
  border: 1.5px solid rgba(14,127,192,.30);
}

.gu-checklist li::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(calc(-50% - 1px)) rotate(45deg);
  width: 7px;
  height: 12px;
  border-right: 2px solid #0E7FC0;
  border-bottom: 2px solid #0E7FC0;
}

/* ── FAQ accordion ────────────────────────────────────────── */

.gu-faq {
  border-top: 1px solid rgba(0,0,0,.08);
}

.gu-faq__item {
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.gu-faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 22px 0;
  font: 600 17px/1.4 Inter, system-ui, sans-serif;
  color: #1D1D1F;
  transition: color 150ms ease;
}

.gu-faq__item summary::-webkit-details-marker {
  display: none;
}

.gu-faq__item summary::after {
  content: '+';
  font: 300 26px/1 Inter, system-ui, sans-serif;
  color: #0E7FC0;
  flex-shrink: 0;
  transition: transform 250ms ease;
}

.gu-faq__item[open] > summary {
  color: #0E7FC0;
}

.gu-faq__item[open] > summary::after {
  transform: rotate(45deg);
}

.gu-faq__answer {
  padding: 4px 0 28px;
}

.gu-faq__answer p {
  font: 400 16px/1.75 Inter, system-ui, sans-serif;
  color: #424245;
  margin: 0;
  max-width: 700px;
}

/* ── Mobile padding for programari shortcode sections ─────── */

@media (max-width: 480px) {
  .page-programari section > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Section 30 — SFATUL HUB: NAV, FEATURED, GUIDE, MYTH, VIDEO
   Sprint 9.9C
   ═══════════════════════════════════════════════════════════════ */

/* ── Hub navigation strip ─────────────────────────────────────── */

.gu-hub-nav {
  position: sticky;
  top: 72px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  z-index: 90;
}

.gu-hub-nav__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.gu-hub-nav__inner::-webkit-scrollbar {
  display: none;
}

.gu-hub-nav__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  font: 500 13px/1 Inter, system-ui, sans-serif;
  color: #6E6E73;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease;
  flex-shrink: 0;
}

.gu-hub-nav__pill svg {
  flex-shrink: 0;
  color: inherit;
}

.gu-hub-nav__pill:hover {
  color: #0E7FC0;
  border-bottom-color: rgba(14, 127, 192, 0.3);
}

/* ── Featured article card ─────────────────────────────────────── */

.gu-hub-featured {
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  padding: 40px 44px;
}

.gu-hub-featured__cat {
  font: 600 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0E7FC0;
  margin: 0 0 14px;
}

.gu-hub-featured__title {
  font: 700 clamp(22px, 2.5vw, 32px)/1.2 Inter, system-ui, sans-serif;
  color: #1D1D1F;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  max-width: 680px;
}

.gu-hub-featured__excerpt {
  font: 400 16px/1.7 Inter, system-ui, sans-serif;
  color: #6E6E73;
  margin: 0 0 24px;
  max-width: 620px;
}

.gu-hub-featured__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 15px/1 Inter, system-ui, sans-serif;
  color: #0E7FC0;
  text-decoration: none;
  transition: gap 200ms ease;
}

.gu-hub-featured__link:hover {
  gap: 12px;
}

/* ── Guide grid (Prima Consultatie) ───────────────────────────── */

.gu-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .gu-guide-grid {
    grid-template-columns: 1fr;
  }
}

.gu-guide-block {
  background: #F5F5F7;
  border-radius: 14px;
  padding: 28px 28px 24px;
}

.gu-guide-block__over {
  font: 700 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0E7FC0;
  margin: 0 0 10px;
}

.gu-guide-block__title {
  font: 700 18px/1.25 Inter, system-ui, sans-serif;
  color: #1D1D1F;
  margin: 0 0 18px;
}

.gu-guide-block__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gu-guide-block__list li {
  position: relative;
  padding: 11px 0 11px 28px;
  font: 400 15px/1.5 Inter, system-ui, sans-serif;
  color: #424245;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.gu-guide-block__list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.gu-guide-block__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(14, 127, 192, 0.12);
}

.gu-guide-block__list li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 17px;
  width: 7px;
  height: 4px;
  border-left: 1.5px solid #0E7FC0;
  border-bottom: 1.5px solid #0E7FC0;
  transform: rotate(-45deg);
}

.gu-guide-block__list--questions li::before,
.gu-guide-block__list--questions li::after {
  display: none;
}

.gu-guide-block__list--questions li {
  padding-left: 0;
  font-style: italic;
  color: #1D1D1F;
}

.gu-guide-block__note {
  font: 400 13px/1.6 Inter, system-ui, sans-serif;
  color: #6E6E73;
  border-left: 2px solid #0E7FC0;
  padding-left: 12px;
  margin: 16px 0 0;
}

/* ── Recovery grid ────────────────────────────────────────────── */

.gu-recovery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.gu-recovery-card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 28px 28px 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gu-recovery-card__title {
  font: 700 17px/1.3 Inter, system-ui, sans-serif;
  color: #1D1D1F;
  margin: 0;
}

.gu-recovery-card__duration {
  font: 600 12px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: #0E7FC0;
  margin: 0;
}

.gu-recovery-card__desc {
  font: 400 14px/1.65 Inter, system-ui, sans-serif;
  color: #6E6E73;
  margin: 0;
  flex-grow: 1;
}

/* ── Myth / truth cards ───────────────────────────────────────── */

.gu-myth-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gu-myth-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .gu-myth-pair {
    grid-template-columns: 1fr;
  }
}

.gu-myth-card,
.gu-truth-card {
  border-radius: 12px;
  padding: 24px 26px;
}

.gu-myth-card {
  background: #FFF8F0;
  border-left: 4px solid #D4861A;
}

.gu-truth-card {
  background: #EEF6FC;
  border-left: 4px solid #0E7FC0;
}

.gu-myth-card__label,
.gu-truth-card__label {
  font: 700 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.gu-myth-card__label {
  color: #A66010;
}

.gu-truth-card__label {
  color: #0B6094;
}

.gu-myth-card__text,
.gu-truth-card__text {
  font: 400 15px/1.65 Inter, system-ui, sans-serif;
  margin: 0;
}

.gu-myth-card__text {
  color: #4A3520;
  font-style: italic;
}

.gu-truth-card__text {
  color: #1D1D1F;
}

/* ── Video grid ───────────────────────────────────────────────── */

.gu-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.gu-video-card {
  background: #FFFFFF;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.gu-video-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.gu-video-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #2D2D30 0%, #1A1A1C 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gu-video-card__play {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}

.gu-video-card__duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.75);
  color: #FFFFFF;
  font: 600 12px/1 Inter, system-ui, sans-serif;
  padding: 4px 8px;
  border-radius: 4px;
}

.gu-video-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}

.gu-video-card__cat {
  font: 600 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0E7FC0;
  margin: 0;
}

.gu-video-card__title {
  font: 700 16px/1.3 Inter, system-ui, sans-serif;
  color: #1D1D1F;
  margin: 0;
}

.gu-video-card__desc {
  font: 400 14px/1.6 Inter, system-ui, sans-serif;
  color: #6E6E73;
  margin: 0;
  flex-grow: 1;
}

.gu-video-card__link {
  font: 600 13px/1 Inter, system-ui, sans-serif;
  color: #0E7FC0;
  margin-top: 4px;
}

/* ── Mobile padding for hub sections ─────────────────────────── */

@media (max-width: 480px) {
  .page-sfatul-hub section > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .gu-hub-featured {
    padding: 28px 24px;
  }

  .gu-guide-block {
    padding: 22px 20px;
  }

  /* Wrap onto multiple lines instead of relying on hidden-scrollbar
     horizontal scroll — more discoverable/accessible at narrow widths.
     min-width:0 lets the flex item actually shrink instead of forcing
     the page wider (the root cause of the horizontal overflow). */
  .gu-hub-nav,
  .gu-hub-nav__inner {
    min-width: 0;
    max-width: 100%;
  }

  .gu-hub-nav__inner {
    flex-wrap: wrap;
    overflow-x: visible;
    padding: 10px 16px;
    gap: 6px 8px;
  }

  .gu-hub-nav__pill {
    padding: 10px 12px;
  }
}

/* ── Screen-reader-only text overflow fix ─────────────────────────────
   Elementor's own .elementor-screen-only (assets/css/frontend.min.css)
   uses the legacy clip:rect() technique without white-space:nowrap. On
   pages where the hidden text is long, some browsers still factor its
   unwrapped natural width into document.documentElement.scrollWidth even
   though the box itself is visually clipped to 1px — a documented class
   of bug with clip:rect()-based visually-hidden patterns. This overrides
   it with the modern clip-path equivalent (same visual result, no
   layout-width leak). Elementor core is not modified — this rule simply
   loads after it. */
.elementor-screen-only {
  clip: auto;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* =====================================================================
   SECTION 31 — SPRINT 9.10D — APPLE HEALTH FINAL POLISH
   Token additions, footer overhaul, homepage CTA, header tablet,
   button corrections. DO NOT reorder — relies on cascade position.
   ===================================================================== */

/* ── 31a. TOKEN ADDITIONS & WARM-COLOR OVERRIDES ── */

/* This :root block comes after Section 26a's :root (line ~2271), which
   resets several tokens to old warm academic medicine values. This block
   restores Apple Health values as the final cascade winner. */
:root {
  --radius-lg:           20px;          /* Override 26a's 12px — Apple card scale  */
  --color-surface-gray:  #F2F2F7;       /* iOS System Gray 6 — cooler tint         */
  --ease-spring:         cubic-bezier(0.34, 1.56, 0.64, 1);
  --color-canvas:        #F5F5F7;       /* Override 26a's #F4F2EF warm page tint   */
  --color-surface-warm:  #F5F5F7;       /* Override 26a's #E6DFD8 warm beige       */
  --color-ink:           #1D1D1F;       /* Override 26a's #1C1814 warm near-black  */
  --color-ink-secondary: #424245;       /* Override 26a's #68615C warm brown-gray  */
}

/* ── 31b. FOOTER OVERHAUL ── */

/* Unified footer background — enforces #F5F5F7 across all pages.
   Consolidates 26m + 28q rules, which had conflicting backgrounds. */
.elementor-location-footer,
.elementor-location-footer > * {
  background: #F5F5F7 !important;
}

/* Footer logo / primary brand heading */
.elementor-location-footer .elementor-element-511e1807 .elementor-heading-title a,
.elementor-location-footer .elementor-element-511e1807 .elementor-heading-title {
  font-family: var(--font-sans) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1D1D1F !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  text-decoration: none !important;
}

/* Footer subtitle "Neurochirurg" */
.elementor-location-footer .elementor-element-4af808b3 .elementor-heading-title a,
.elementor-location-footer .elementor-element-4af808b3 .elementor-heading-title {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #6E6E73 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}

/* Footer description paragraph
   Uses #organism-site-footer ID (1,1,0) to beat Elementor's post-12.css
   .elementor-12 .elementor-element.elementor-element-148ac7c { color:#FFFFFF; text-shadow:... }
   which has specificity (0,3,0) and no !important. */
#organism-site-footer .elementor-element-148ac7c,
#organism-site-footer .elementor-element-148ac7c p {
  color: #424245 !important;
  text-shadow: none !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Footer section column headings (nav group labels) */
.elementor-location-footer .elementor-element-c3b9da9c .elementor-heading-title,
.elementor-location-footer .elementor-element-27495d8d .elementor-heading-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #6E6E73 !important;
  margin-bottom: 8px !important;
}

/* Footer nav links */
.elementor-location-footer .elementor-widget-nav-menu .elementor-nav-menu a,
.elementor-location-footer .elementor-nav-menu a {
  font-size: 14px !important;
  color: #424245 !important;
  font-weight: 400 !important;
  transition: color 160ms ease !important;
}
.elementor-location-footer .elementor-widget-nav-menu .elementor-nav-menu a:hover,
.elementor-location-footer .elementor-nav-menu a:hover {
  color: var(--color-accent) !important;
}

/* Footer availability text ("Consultații disponibile la clinici partenere.")
   ID-based selector beats Elementor's .elementor-12 .elementor-element.elementor-element-5d427b5
   { color: #D2D2D7 } at (0,3,0) — near-invisible on light background. */
#organism-site-footer .elementor-element-5d427b5,
#organism-site-footer .elementor-element-5d427b5 p {
  color: #424245 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Footer bottom row — legal/copyright text */
.elementor-location-footer .elementor-element[id*="footer-legal"] p,
.elementor-location-footer [data-id="5925a9fc"] p,
.elementor-location-footer [data-id="1dc36b7"] p,
.elementor-location-footer [data-id="6b2742e8"] p {
  font-size: 12px !important;
  color: #6E6E73 !important;
  line-height: 1.5 !important;
}

/* ── 31c. ELEMENTOR CTA SECTION — HIDDEN ── */

/* The Elementor CTA section is replaced by the PHP-injected #gu-cta-rebuilt
   (see wp_footer hook in gu-design-system.php). Hiding it here via CSS is
   more reliable than JS for avoiding flash-of-old-content. */
#organism-cta-appointment {
  display: none !important;
}

/* ── 31d. HEADER TABLET — HAMBURGER TO 1023px ── */

/* At 768–1023px the desktop nav overflows because "Sfatul Neurochirurgului"
   is too wide. Force hamburger/drawer mode for this range. The mobile drawer
   is already visible below 1024px (see Section 25 @media min-width: 1024px).
   This override comes after the 768px+ show-hamburger rule and wins by cascade. */
@media (min-width: 768px) and (max-width: 1023px) {
  .gu-header__nav       { display: none !important; }
  .gu-header__cta       { display: none !important; }
  .gu-header__hamburger { display: flex !important; }
  .gu-header__inner {
    gap: 0 !important;
    justify-content: space-between !important;
    padding: 0 24px !important;
  }
  .gu-header__actions { margin-left: 0 !important; }
}

/* ── 31e. ELEMENTOR BODY BUTTONS — RESTORE ACCENT ON KEY SECTIONS ── */

/* After removing .elementor-button-link from the ghost rule (Section 26e fix),
   Elementor widget CSS handles per-button colors. These overrides ensure
   sections without an explicit Elementor color choice still look correct. */

/* Hero section — primary blue button */
.elementor-element-3b2e4f06 .elementor-button {
  background-color: #0E7FC0 !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* Hero section — secondary outline button on white hero */
.elementor-element-3b2e4f07 .elementor-button {
  background-color: transparent !important;
  color: #1D1D1F !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
}
.elementor-element-3b2e4f07 .elementor-button:hover {
  background-color: #F5F5F7 !important;
  border-color: rgba(0, 0, 0, 0.20) !important;
  color: #1D1D1F !important;
}

/* ── 31f. CARD RADIUS — HARDCODED OVERRIDES ── */

/* These cards use hardcoded px values, not --radius-lg token;
   update them to match the new 20px scale. */
.gu-clinic-card        { border-radius: 20px !important; }
.gu-hub-featured       { border-radius: 20px !important; }

/* Image placeholder (Section 28p, line 4151) */
.elementor-widget-image .elementor-image-placeholder {
  border-radius: 20px !important;
}

/* ── 31g. ELEMENTOR CARD WIDGETS — HOVER LIFT ── */

/* Icon-box cards on homepage ("Expertise" grid, "Why choose" sections) */
.elementor-widget-icon-box {
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 280ms ease !important;
}
.elementor-widget-icon-box:hover {
  transform: translateY(-4px) !important;
}

/* ── 31h. SMOOTH SCROLL ── */

html {
  scroll-behavior: smooth;
}

/* ── 31i. MOBILE HEADER FIX ── */

/* The .gu-btn { display: inline-flex; } rule in Section 26e (line 2394)
   overrides the @media (max-width:767px) { .gu-header__cta { display: none } }
   because it comes later in the cascade (same specificity, later wins).
   Re-apply with !important to ensure only the hamburger shows at mobile. */
@media (max-width: 767px) {
  .gu-header__cta { display: none !important; }
  /* Also enforce blue on mobile shortcode buttons */
  .gu-btn--accent {
    background-color: var(--color-accent) !important;
    color: #FFFFFF !important;
  }
}

/* ── 31j. HEADER COMPACT BACKGROUND FIX ── */

/* At compact state (scrolled), ensure header still uses white-translucent */
#gu-header.is-compact {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08) !important;
}

/* ── 31k. PHASE A — GLOBAL ELEMENTOR HEADING FONT OVERRIDE ── */

/* Elementor heading widgets store their font-family in the DB and generate
   per-element CSS. A global !important rule on the common class overrides all
   of them without touching the DB. Applied LAST in the file for final cascade. */
.elementor-heading-title {
  font-family: var(--font-sans) !important;
}

/* Level-specific tracking for Apple Health editorial hierarchy */
h1.elementor-heading-title { letter-spacing: -0.03em !important; }
h2.elementor-heading-title { letter-spacing: -0.025em !important; }
h3.elementor-heading-title { font-weight: var(--weight-semibold) !important; letter-spacing: -0.01em !important; }

/* ── 31l. HOMEPAGE FINAL CTA — REBUILT FROM SCRATCH ── */

/* PHP-injected section (#gu-cta-rebuilt). Positioned before .elementor-location-footer
   via inline JS in the wp_footer hook. All CSS lives here — no Elementor interference. */
#gu-cta-rebuilt.gu-final-cta {
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F2F7 100%);
  padding: 100px 24px 120px;
  text-align: center;
  box-sizing: border-box;
}

.gu-final-cta__inner {
  max-width: 640px;
  margin: 0 auto;
}

.gu-final-cta__overline {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 16px;
}

.gu-final-cta__heading {
  font-family: var(--font-sans);
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #1D1D1F;
  margin: 0 0 20px;
}

.gu-final-cta__body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: #424245;
  margin: 0 0 12px;
}

.gu-final-cta__trust {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: #6E6E73;
  margin: 0 0 40px;
}

.gu-final-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.gu-final-cta__btn-primary {
  display: inline-block;
  background: #0E7FC0;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 16px 40px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(14, 127, 192, 0.28);
  transition: background 180ms ease, transform 140ms ease, box-shadow 180ms ease;
}
.gu-final-cta__btn-primary:hover {
  background: #0B6094;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(14, 127, 192, 0.35);
  text-decoration: none;
}

.gu-final-cta__btn-secondary {
  display: inline-block;
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color 160ms ease;
}
.gu-final-cta__btn-secondary:hover {
  color: #0B6094;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  #gu-cta-rebuilt.gu-final-cta {
    padding: 72px 24px 96px;
  }
  .gu-final-cta__actions {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}

/* ── 31m. PHASE B — MICRO INTERACTIONS ── */

/* Hover lift + spring easing on PHP-rendered cards not yet covered */
.gu-clinic-card {
  transition: transform 280ms var(--ease-spring),
              box-shadow 280ms ease !important;
}
.gu-clinic-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.gu-guide-block,
.gu-recovery-card {
  transition: transform 280ms var(--ease-spring),
              box-shadow 280ms ease !important;
}
.gu-guide-block:hover,
.gu-recovery-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* Final CTA section — subtle fade-in via gu-reveal */
#gu-cta-rebuilt.gu-final-cta {
  transition: opacity 600ms var(--ease-out);
}

/* FAQ items — smooth expand indicator */
.gu-faq__item summary {
  transition: color 160ms ease;
}
.gu-faq__item[open] summary {
  color: var(--color-accent);
}

/* Checklist items — stagger via gu-reveal-group */
.gu-checklist {
  /* marked as gu-reveal-group by JS */
}

/* PHP shortcode section headings — fade up */
.gu-programari-section-heading,
.gu-sfatul-heading {
  /* marked as gu-reveal by JS */
}

/* Related/author cards on single pages */
.gu-related-card,
.gu-clinic-card {
  transition: transform 280ms var(--ease-spring),
              box-shadow 280ms ease !important;
}
.gu-related-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Credentials strip values — subtle scale on first view */
.gu-credentials-strip {
  /* marked as gu-reveal by JS */
}

/* Reduced motion — honour system preference */
@media (prefers-reduced-motion: reduce) {
  .gu-clinic-card,
  .gu-guide-block,
  .gu-recovery-card,
  .gu-related-card {
    transition: none !important;
    transform: none !important;
  }
}
/* Online consultation eligibility — source-backed patient guidance. */
.gu-online-eligibility {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4, 16px);
  margin: 0 0 var(--space-8, 32px);
}

.gu-online-eligibility__group {
  padding: 20px;
  border-radius: 12px;
  background: var(--color-surface-alt, #FBFBFD);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
}

.gu-online-eligibility__group--yes {
  border-left: 3px solid var(--color-accent, #0E7FC0);
}

.gu-online-eligibility__group--no {
  border-left: 3px solid var(--color-ink-tertiary, #6E6E73);
}

.gu-online-eligibility__title {
  margin: 0 0 12px;
  color: var(--color-ink, #1D1D1F);
  font: 600 16px/1.35 var(--font-sans, Inter, system-ui, sans-serif);
}

.gu-online-eligibility__list {
  margin: 0;
  padding-left: 20px;
  color: var(--color-ink-secondary, #424245);
  font: 400 15px/1.65 var(--font-sans, Inter, system-ui, sans-serif);
}

.gu-online-eligibility__list li + li {
  margin-top: 6px;
}

.gu-online-eligibility__text {
  margin: 0;
  color: var(--color-ink-secondary, #424245);
  font: 400 15px/1.65 var(--font-sans, Inter, system-ui, sans-serif);
}

.gu-online-medical-notice {
  max-width: 720px;
  margin-top: var(--space-6, 24px);
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  background: var(--color-surface-alt, #FBFBFD);
}

.gu-online-medical-notice__title {
  display: block;
  margin-bottom: 6px;
  color: var(--color-ink, #1D1D1F);
  font: 600 14px/1.4 var(--font-sans, Inter, system-ui, sans-serif);
}

.gu-online-medical-notice__text {
  margin: 0;
  color: var(--color-ink-secondary, #424245);
  font: 400 14px/1.65 var(--font-sans, Inter, system-ui, sans-serif);
}

@media (min-width: 768px) {
  .gu-online-eligibility {
    grid-template-columns: 1.35fr 1fr;
  }
}

/* Patient recovery guide — mobile-first editorial hub. */
.gu-recovery-guide-page {
  background: var(--color-surface-warm, #F5F5F7);
}

.gu-guide-shell {
  width: min(100% - 40px, 1040px);
  margin-inline: auto;
}

.gu-guide-hero {
  padding: 64px 0 56px;
  background: var(--color-surface, #FFFFFF);
}

.gu-guide-hero__inner {
  max-width: 820px;
}

.gu-guide-eyebrow,
.gu-hub-guide-promo__eyebrow {
  margin: 0 0 12px;
  color: var(--color-accent, #0E7FC0);
  font: 600 12px/1.2 var(--font-sans, Inter, system-ui, sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* _css_classes on a Heading widget lands on the OUTER wrapper div, not on
   the actual <h1>/<h2>/<h3> tag Elementor renders inside it — and that tag
   already carries its own (non-inherited) color from the Kit's default
   heading style, which always beats a merely-inherited parent color. The
   descendant selector below targets the real heading tag directly. */
.gu-guide-hero__title,
.gu-guide-hero__title .elementor-heading-title {
  margin: 0;
  color: var(--color-ink, #1D1D1F) !important;
  font: 700 clamp(36px, 9vw, 64px)/1.04 var(--font-sans, Inter, system-ui, sans-serif);
  letter-spacing: -.04em;
}

.gu-guide-hero__lead,
.gu-guide-intro {
  max-width: 760px;
  margin: 20px 0 0;
  color: var(--color-ink-secondary, #424245);
  font: 400 clamp(18px, 4.5vw, 21px)/1.65 var(--font-sans, Inter, system-ui, sans-serif);
}

.gu-guide-actions {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 12px;
  margin-top: 28px;
}

@media (min-width: 700px) {
  .gu-guide-actions {
    flex-direction: row;
    text-align: left;
  }
}

.gu-guide-file-meta {
  color: var(--color-ink-tertiary, #6E6E73);
  font: 400 13px/1.5 var(--font-sans, Inter, system-ui, sans-serif);
}

.gu-guide-section {
  padding: 64px 0;
  background: var(--color-surface, #FFFFFF);
  scroll-margin-top: 92px;
}

.gu-guide-section--muted {
  background: var(--color-surface-warm, #F5F5F7);
}

/* Semne de alarmă reuses the standard alternating white/muted background —
   no separate rose tint exists in the approved system; red stays functional
   only, on the alert-list icon badges below. */
.gu-guide-section--alert {
  background: var(--color-surface-warm, #F5F5F7);
}

.gu-guide-section h2 {
  max-width: 760px;
  margin: 0;
  color: var(--color-ink, #1D1D1F) !important;
  font: 700 clamp(30px, 7vw, 44px)/1.1 var(--font-sans, Inter, system-ui, sans-serif);
  letter-spacing: -.03em;
}

/* Disclaimer restyled as a unitary card — same radius/padding/shadow family
   as .gu-clinic-card and the guide's own topic/chapter cards, instead of a
   thin bar-with-border-left. */
.gu-guide-disclaimer {
  margin-bottom: 28px;
  padding: 28px;
  border-radius: 20px;
  background: var(--color-surface, #FFFFFF);
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
  color: var(--color-ink, #1D1D1F);
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
}

/* The PDF buttons are plain <a class="gu-btn gu-btn--accent"> inside a
   Text Editor widget (see mk_button() in the page build script) so they
   render as one solid surface instead of Elementor's Button-widget
   double-layer. That also puts them inside .elementor-widget-text-editor,
   whose "links in body text get accent color" rule is more specific than
   .gu-btn--accent alone and would otherwise make the button text invisible
   (accent-on-accent). This restores the intended white button text. */
.elementor-widget-text-editor a.gu-btn--accent {
  color: #FFFFFF !important;
}

.gu-guide-disclaimer strong {
  display: block;
  margin: 0 0 8px;
  color: var(--color-accent, #0E7FC0);
  font: 600 13px/1.2 var(--font-sans, Inter, system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.gu-guide-disclaimer p {
  margin: 0;
  color: var(--color-ink-secondary, #424245);
  line-height: 1.6;
}

.gu-guide-topic-grid,
.gu-guide-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 32px;
}

.gu-guide-topic,
.gu-guide-card {
  display: block;
  padding: 28px;
  border-radius: 20px;
  background: var(--color-surface, #FFFFFF);
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
  color: var(--color-ink, #1D1D1F);
  text-decoration: none;
}

.gu-guide-topic strong,
.gu-guide-card h3 {
  display: block;
  margin: 0 0 8px;
  color: var(--color-ink, #1D1D1F) !important;
  font: 600 18px/1.3 var(--font-sans, Inter, system-ui, sans-serif);
}

.gu-guide-topic span,
.gu-guide-card p {
  display: block;
  margin: 0;
  color: var(--color-ink-secondary, #424245);
  font: 400 15px/1.65 var(--font-sans, Inter, system-ui, sans-serif);
}

.gu-guide-alert-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.gu-guide-alert-list li {
  padding: 15px 16px 15px 46px;
  border-radius: 20px;
  background: var(--color-surface, #FFFFFF);
  color: var(--color-ink, #1D1D1F);
  font: 500 15px/1.5 var(--font-sans, Inter, system-ui, sans-serif);
  position: relative;
}

.gu-guide-alert-list li::before {
  content: "!";
  position: absolute;
  left: 16px;
  top: 15px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-error, #FF3B30);
  color: #FFFFFF;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

.gu-guide-prose {
  max-width: 760px;
  margin-top: 24px;
  color: var(--color-ink-secondary, #424245);
  font: 400 17px/1.75 var(--font-sans, Inter, system-ui, sans-serif);
}

.gu-guide-prose p {
  margin: 0 0 16px;
}

.gu-guide-download-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  margin-top: 36px;
  padding: 40px 32px;
  border-radius: 20px;
  background: var(--color-surface-warm, #F5F5F7);
}

.gu-guide-download-panel h2 {
  color: var(--color-ink, #1D1D1F) !important;
  text-align: center !important;
  font-size: clamp(24px, 6vw, 32px);
}

.gu-guide-download-panel p {
  margin: 10px 0 0;
  color: var(--color-ink-secondary, #424245);
  text-align: center !important;
  font: 400 15px/1.6 var(--font-sans, Inter, system-ui, sans-serif);
}

/* The native Elementor page build uses "boxed" Container elements for
   these four layouts. A boxed container renders its real children one
   level deeper, inside an auto-generated ".e-con-inner" wrapper, and
   Elementor applies its own flex layout (display/direction/gap) directly
   to that inner wrapper — at the same selector specificity as this
   stylesheet, loaded after it. So the intended grid/row layouts must
   target ".e-con-inner" with !important to win the cascade. */
.gu-guide-topic-grid > .e-con-inner,
.gu-guide-card-grid > .e-con-inner {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

@media (min-width: 700px) {
  .gu-guide-topic-grid > .e-con-inner {
    grid-template-columns: repeat( 2, 1fr ) !important;
  }

  .gu-guide-card-grid > .e-con-inner {
    grid-template-columns: repeat( 2, 1fr ) !important;
  }
}

@media (min-width: 960px) {
  .gu-guide-topic-grid > .e-con-inner {
    grid-template-columns: repeat( 3, 1fr ) !important;
  }
}

/* ------------------------------------------------------------
   RECOMANDĂRI — PATIENT EXPERIENCE FORM
   ------------------------------------------------------------ */

.gu-validation-section {
  background: #f5f5f7;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.gu-about-validation__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 32px;
}

.gu-about-validation__eyebrow {
  margin: 0 0 14px;
  color: var(--color-accent, #0e7fc0);
  font: 600 11px/1 var(--font-sans, Inter, system-ui, sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gu-about-validation__lead {
  max-width: 720px;
  margin: 0;
  color: var(--color-ink-secondary, #424245);
  font: 400 17px/1.7 var(--font-sans, Inter, system-ui, sans-serif);
}

.gu-independent-reviews {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.gu-source-grid {
  display: grid;
  gap: 20px;
  margin-top: 36px;
}

.gu-source-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(29, 29, 31, 0.04);
}

.gu-source-card .gu-source-card__label {
  margin: 0 0 10px;
  color: var(--color-accent, #0e7fc0);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.gu-source-card h3 {
  margin: 0 0 12px;
  color: var(--color-ink, #1d1d1f);
  font: 700 20px/1.3 var(--font-sans, Inter, system-ui, sans-serif);
  letter-spacing: -0.015em;
}

.gu-source-card > p:not(.gu-source-card__label) {
  flex: 1;
  margin: 0 0 20px;
  color: var(--color-ink-secondary, #424245);
  font-size: 15px;
  line-height: 1.65;
}

.gu-source-card a {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}

.gu-review-source-list {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}

.gu-review-source-list > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #f9f9fa;
  color: var(--color-ink, #1d1d1f);
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.gu-review-source-list > a:hover {
  border-color: rgba(14, 127, 192, 0.32);
  background: #fff;
  transform: translateY(-1px);
}

.gu-review-source-list strong,
.gu-review-source-list small {
  display: block;
}

.gu-review-source-list strong {
  margin-bottom: 4px;
  font-size: 16px;
}

.gu-review-source-list small {
  color: var(--color-ink-secondary, #6e6e73);
  font-size: 13px;
  line-height: 1.5;
}

.gu-source-disclaimer {
  margin: 22px 0 0;
  color: var(--color-ink-secondary, #6e6e73);
  font-size: 13px;
  line-height: 1.6;
}

.gu-experience-submit {
  text-align: left !important;
}

.gu-experience-submit > p,
.gu-experience-submit > h2 {
  text-align: center;
}

.gu-experience-form {
  position: relative;
  margin-top: 40px;
  padding: clamp(24px, 5vw, 44px);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(29, 29, 31, 0.06);
}

.gu-form-grid {
  display: grid;
  gap: 22px;
  margin-bottom: 22px;
}

.gu-experience-form label {
  margin-bottom: 8px;
  font-size: 14px;
}

.gu-experience-form label span:not(.gu-form-consent span) {
  color: var(--color-ink-secondary, #6e6e73);
  font-weight: 400;
}

.gu-experience-form input,
.gu-experience-form select,
.gu-experience-form textarea {
  background: #fbfbfc;
  border-color: rgba(0, 0, 0, 0.13);
}

.gu-experience-form textarea {
  resize: vertical;
}

.gu-experience-form small {
  display: block;
  margin-top: 7px;
  color: var(--color-ink-secondary, #6e6e73);
  font-size: 12px;
  line-height: 1.5;
}

.gu-form-consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  margin: 24px 0 12px;
  font-weight: 400 !important;
  line-height: 1.55;
}

.gu-form-consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-accent, #0e7fc0);
}

.gu-form-privacy {
  margin: 0 0 24px;
  color: var(--color-ink-secondary, #6e6e73);
  font-size: 13px;
  line-height: 1.55;
}

.gu-form-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.gu-form-notice {
  max-width: 720px;
  margin: 28px auto 0;
  padding: 16px 18px;
  border-radius: 10px;
  font: 400 15px/1.55 var(--font-sans, Inter, system-ui, sans-serif);
  text-align: left;
}

.gu-form-notice--success {
  color: #185b3a;
  background: #eaf7ef;
  border: 1px solid #b9dec8;
}

.gu-form-notice--error {
  color: #8a2f2f;
  background: #fff1f1;
  border: 1px solid #efc3c3;
}

.gu-experience-grid {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}

.gu-experience-card {
  padding: 28px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(29, 29, 31, 0.05);
}

.gu-experience-card blockquote {
  margin: 0 0 20px;
  color: var(--color-ink, #1d1d1f);
  font: 400 17px/1.7 var(--font-serif, Lora, serif);
}

.gu-experience-card p {
  margin: 0;
  font-size: 14px;
}

.gu-experience-card p span {
  display: block;
  margin-top: 3px;
  color: var(--color-ink-secondary, #6e6e73);
}

@media (min-width: 700px) {
  .gu-form-grid,
  .gu-experience-grid,
  .gu-source-grid,
  .gu-review-source-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   32. ELEMENTOR HEADER 135 — BALANCED THREE-ZONE LAYOUT
   ============================================================ */

@media (min-width: 1025px) {
  .elementor-135 #gu2-header-inner {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
    column-gap: 24px;
    width: min(100%, 1280px) !important;
    min-height: 68px;
    margin-inline: auto;
    padding: 6px 32px !important;
  }

  .elementor-135 .elementor-element-gu2lg03 {
    grid-column: 1;
    width: auto !important;
    min-width: 0;
    justify-self: start;
    gap: 1px !important;
  }

  .elementor-135 .elementor-element-gu2lgnm,
  .elementor-135 .elementor-element-gu2lgrl {
    margin: 0;
  }

  .elementor-135 .elementor-element-gu2lgnm .elementor-heading-title {
    font-size: 16px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }

  .elementor-135 .elementor-element-gu2lgrl .elementor-heading-title {
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .elementor-135 .elementor-element-gu2nc04 {
    display: contents !important;
  }

  .elementor-135 .elementor-element-gu2nav5 {
    grid-column: 2;
    justify-self: center;
    width: max-content;
  }

  .elementor-135 .elementor-element-gu2nav5 .elementor-nav-menu--main {
    justify-content: center;
  }

  .elementor-135 .elementor-element-gu2nav5 .elementor-nav-menu--main .elementor-nav-menu {
    align-items: center;
    flex-wrap: nowrap;
  }

  .elementor-135 .elementor-element-gu2nav5 .elementor-nav-menu--main .elementor-item {
    padding: 7px 9px;
    white-space: nowrap;
  }

  .elementor-135 .elementor-nav-menu--main .gu-nav-cta-item {
    display: none !important;
  }

  .elementor-135 #gu2-cta-header {
    grid-column: 3;
    justify-self: end;
    width: auto;
  }

  .elementor-135 #gu2-cta-header .elementor-button {
    padding: 10px 17px;
    border-radius: 9px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(14, 127, 192, 0.16);
  }
}

/* Elementor switches its menu one pixel too late for this six-item nav.
   Keep the intermediate 1025–1100px range clean by using the drawer. */
@media (min-width: 1025px) and (max-width: 1100px) {
  .elementor-135 #gu2-header-inner {
    display: flex !important;
    width: 100% !important;
    min-height: 64px;
    justify-content: space-between;
    padding-inline: 24px !important;
  }

  .elementor-135 .elementor-element-gu2nc04 {
    display: flex !important;
    width: auto !important;
    margin-left: auto;
  }

  .elementor-135 .elementor-element-gu2nav5 {
    width: auto;
  }

  .elementor-135 .elementor-element-gu2nav5 .elementor-nav-menu--main {
    display: none !important;
  }

  .elementor-135 .elementor-element-gu2nav5 .elementor-menu-toggle {
    display: flex !important;
  }

  .elementor-135 .elementor-element-gu2nav5 .elementor-nav-menu--dropdown[aria-hidden="false"] {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9001;
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 12px 24px rgba(29, 29, 31, 0.10);
  }

  .elementor-135 #gu2-cta-header {
    display: none !important;
  }
}

.gu-guide-actions > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Final CTA panel — always a centered column composition, so the button
   never gets pushed to an edge at any width. */
.gu-guide-download-panel > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 20px !important;
  width: 100%;
}

@media (min-width: 700px) {
  .gu-guide-actions > .e-con-inner {
    flex-direction: row !important;
    align-items: center !important;
  }
}

.gu-hub-guide-promo {
  padding: 56px 20px;
  background: var(--color-surface-warm, #F5F5F7);
}

.gu-hub-guide-promo__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 960px;
  margin: 0 auto;
  padding: 28px;
  border-radius: 20px;
  background: var(--color-surface, #FFFFFF);
  box-shadow: var(--shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));
}

.gu-hub-guide-promo__title {
  margin: 0;
  color: var(--color-ink, #1D1D1F);
  font: 700 clamp(28px, 7vw, 42px)/1.1 var(--font-sans, Inter, system-ui, sans-serif);
  letter-spacing: -.03em;
}

.gu-hub-guide-promo__text {
  max-width: 620px;
  margin: 16px 0 0;
  color: var(--color-ink-secondary, #424245);
  font: 400 17px/1.65 var(--font-sans, Inter, system-ui, sans-serif);
}

.gu-hub-guide-promo__actions {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.gu-hub-guide-promo__download {
  color: var(--color-accent, #0E7FC0);
  font: 600 15px/1.4 var(--font-sans, Inter, system-ui, sans-serif);
  text-decoration: none;
}

.gu-hub-guide-promo__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  gap: 4px 12px;
  padding: 20px;
  border-radius: 14px;
  background: var(--color-surface-warm, #F5F5F7);
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
}

.gu-hub-guide-promo__meta strong {
  color: var(--color-accent, #0E7FC0);
  font-size: 32px;
  line-height: 1;
}

.gu-hub-guide-promo__meta span {
  align-self: center;
  color: var(--color-ink-secondary, #424245);
  font-size: 13px;
}

@media (min-width: 700px) {
  .gu-guide-actions,
  .gu-hub-guide-promo__actions {
    align-items: center;
    flex-direction: row;
  }

  .gu-guide-topic-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gu-guide-card-grid,
  .gu-guide-alert-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .gu-guide-download-panel {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .gu-hub-guide-promo__inner {
    grid-template-columns: minmax(0, 1fr) 180px;
    align-items: center;
    padding: 40px;
  }
}

@media (min-width: 960px) {
  .gu-guide-topic-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gu-guide-hero,
  .gu-guide-section {
    padding-block: 88px;
  }
}