/* ============================================================================
   AURUM bridge theme for iclinic.sg — DEEP LAVENDER (preview v3, 13 Sept 2026)
   His rulings: no black / dark-blue ground; background a DARKER LAVENDER; most
   words WHITE; key words & sentences in PURPLE; action buttons ORANGE.
   AURUM structure kept: Cormorant Garamond display, gold hairlines/eyebrows.
   Loaded LAST so it overrides the Elementor kit (post-7) and page CSS.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap');

:root, body, .elementor-kit-7 {
  /* Ground — darker lavender (logo purple #604C8D lifted for a page ground) */
  --lv-bg:        #8679C2;   /* section ground — light enough for the dark-purple headings */
  --lv-bg-alt:    #7D6FBB;   /* alternate section band (still light: headings stay legible) */
  --lv-bg-deep:   #5A4A96;   /* header / footer / tiles / cards — white text lives here */
  --lv-card:      #5F4F9C;   /* cards & text tiles: deeper, white ink */
  --lv-line:      rgba(255,255,255,.18);
  /* Ink */
  --lv-text:      #FFFFFF;
  --lv-muted:     rgba(255,255,255,.92);   /* brighter white */
  /* "Purple" for key words on the lavender ground: a bright violet that reads */
  --lv-purple:    #2E2054;   /* key words: deep purple (his 13 Sept "deeper") on the light lavender bands */
  --lv-purple-2:  #1F1540;   /* hover */
  --lv-purple-on-deep: #E4D9FF;   /* the same key words when they sit on deep-lavender cards/tiles/header/footer */
  /* AURUM structure */
  --au-gold:      #E3B93E;
  --au-gold-soft: #F3DFA0;
  --au-display:   "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --au-body:      -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* The iCLINIC™ logo accents */
  --ic-purple:    #604C8D;
  --ic-purple-deep: #3A2A66;   /* darker purple for main headings (his 13 Sept ruling) */
  --ic-orange:    #F05A27;   /* action buttons */
  --ic-orange-2:  #D94A1B;   /* hover */
  --ic-red:       #DD3333;
  --ic-green:     #97C942;
  --lv-flip:      #5F4F9C;   /* Home flip squares (Our Vision…): deep lavender front */
  --lv-flip-back: #D9CDFA;   /* …and one faint lavender back on hover, for all five */

  /* Re-map the Elementor kit globals so every widget follows without page edits */
  --e-global-color-2277d3e: var(--lv-text);      /* kit purple used as text → white */
  --e-global-color-092f717: var(--lv-bg-alt);    /* lavender section fill → deeper band */
  --e-global-color-9a7d459: var(--ic-orange);    /* buttons → orange */
  --e-global-color-cc7fba9: var(--ic-orange);
  --e-global-color-098507c: var(--lv-text);      /* black text → white */
  --e-global-color-8d8a8aa: #FFFFFF;
  --e-global-color-abfd495: var(--ic-red);
  --e-global-color-2953c71: var(--au-gold);
  --e-global-color-primary:   var(--lv-purple);
  --e-global-color-secondary: var(--lv-muted);
  --e-global-color-text:      var(--lv-text);
  --e-global-color-accent:    var(--au-gold);
  --e-global-typography-primary-font-family:   var(--au-display);
  --e-global-typography-secondary-font-family: var(--au-display);
  --e-global-typography-text-font-family:      var(--au-body);
  --e-global-typography-accent-font-family:    var(--au-body);
}

/* ── Ground ─────────────────────────────────────────────────────────────── */
html, body { background: var(--lv-bg) !important; color: var(--lv-text) !important; font-family: var(--au-body) !important; }
.e-con, .e-con-inner { background-color: transparent !important; }
.e-con.e-parent:nth-child(even) { background-color: var(--lv-bg-alt) !important; }
.e-con.e-parent { border-top: 1px solid var(--lv-line); padding-left: max(24px, 4vw) !important; padding-right: max(24px, 4vw) !important; }   /* never let content touch the edge */
.elementor-location-header .e-con.e-parent, .elementor-location-footer .e-con.e-parent { padding-left: max(16px, 2.5vw) !important; padding-right: max(16px, 2.5vw) !important; }
/* Header aligned to the content grid (his 13 Sept note — logo further left, balanced):
   full-width bar, same side padding as the sections, so the logo's left edge lines up with
   the headings and the CTA mirrors it on the right. */
.elementor-location-header .e-con.e-parent { max-width: 100% !important; width: 100% !important; padding-left: max(20px, 2.8vw) !important; padding-right: max(20px, 2.8vw) !important; }
/* The header's inner box was 1050px wide while the page content sits in 1140px — widen it to
   match, so the logo's left edge aligns with the headings and the CTA mirrors it on the right. */
.elementor-location-header .e-con.e-parent > .e-con { width: 100% !important; max-width: 1280px !important; }   /* header row spans the padded width so the logo sits at the left edge */
.elementor-location-header .e-con:has(> .elementor-widget-nav-menu), .elementor-location-header .e-con:has(> .elementor-widget-n-menu) { flex: 1 1 auto !important; width: auto !important; max-width: none !important; }
.elementor-location-header .e-con:has(> .elementor-widget-button) { flex: 0 0 auto !important; width: auto !important; padding-right: 0 !important; margin-right: 0 !important; justify-content: flex-end !important; align-items: flex-end !important; }   /* CTA column hugs the right edge so the button mirrors the logo */
.elementor-location-header .elementor-widget-button .elementor-widget-container, .elementor-location-header .elementor-widget-button .elementor-button-wrapper { text-align: right !important; }
.elementor-location-header .e-con.e-parent > .e-con > .e-con:first-child { padding-left: 0 !important; margin-left: 0 !important; }
.elementor-location-header .elementor-widget-nav-menu, .elementor-location-header .elementor-widget-n-menu { margin-left: 60px !important; margin-right: 28px !important; }   /* breathing room between logo, menu and CTA */
.elementor-location-header .elementor-nav-menu--main { justify-content: center; row-gap: 4px; }
.elementor-location-header .elementor-widget-image, .elementor-location-header .elementor-widget-theme-site-logo { margin-left: 0 !important; }
.elementor-location-header .elementor-widget-image .elementor-widget-container, .elementor-location-header .elementor-widget-theme-site-logo .elementor-widget-container { padding-left: 0 !important; margin-left: 0 !important; text-align: left !important; }
.elementor-widget-container, .elementor-widget-text-editor, .elementor-widget-text-editor p, p, li, span { color: var(--lv-text); }
.elementor-widget-text-editor, p, li { font-family: var(--au-body); }

/* ── Key words & sentences in purple ────────────────────────────────────── */
strong, b, em, .elementor-widget-text-editor strong, .elementor-widget-text-editor em,
.elementor-widget-text-editor a, .elementor-widget-container a:not(.elementor-button):not(.wpr-button),
.elementor-heading-title[style*="uppercase"], .elementor-widget-heading .elementor-heading-title.elementor-size-small,
.elementor-icon-list-text, .elementor-icon-box-title, .elementor-image-box-title { color: var(--lv-purple) !important; }
.elementor-widget-text-editor a:hover, .elementor-widget-container a:not(.elementor-button):hover { color: var(--lv-purple-2) !important; }
/* Eyebrow labels: small caps in AURUM gold */
.elementor-heading-title[style*="uppercase"], .elementor-widget-heading .elementor-heading-title.elementor-size-small { color: var(--au-gold) !important; font-family: var(--au-body) !important; letter-spacing: .12em !important; text-transform: uppercase; font-size: 12px !important; font-weight: 700 !important; }

/* ── Type ───────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, .elementor-heading-title {
  font-family: var(--au-display) !important;
  color: var(--lv-text) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.15;
  text-wrap: balance;
}
/* Main headings bold (his 13 Sept note): Get Medical Care, Quick Affordable Care, Longevity & Functional Medicine, Family Medicine, Complementary Medicine… */
h1, h2, .elementor-widget-heading h1.elementor-heading-title, .elementor-widget-heading h2.elementor-heading-title, #vitality-medicine h2 { font-weight: 700 !important; }
/* MAIN headings (h1/h2) in the logo purple (his ruling); h3+ stay white */
h1, h2, .elementor-widget-heading h1.elementor-heading-title, .elementor-widget-heading h2.elementor-heading-title,
#vitality-medicine h2 { color: var(--ic-purple-deep) !important; }
/* Key sentences he named (tagged .is-key by the page script) read in the same darker purple */
/* The three key topics at the top of the page read in a LIGHT purple so they stand out on the lavender (his 13 Sept note) */
.elementor-heading-title.is-key, .is-key, .is-key * { color: var(--ic-purple-deep) !important; }
/* "Prevent Disease / Optimise Healthspan / Feel Good; Live Well" — 2.5× size, display face */
p.is-key { font-family: var(--au-display) !important; font-size: min(2.5em, 7vw) !important; line-height: 1.15 !important; font-weight: 600 !important; margin: .4em 0 .6em !important; letter-spacing: 0; white-space: nowrap !important; }   /* one phrase per line, scales down on narrow screens */

/* On deep-lavender surfaces (white-ink areas) key words switch to a light violet so they stay legible */
.elementor-location-header strong, .elementor-location-header a:not(.elementor-button), .elementor-location-footer strong, .elementor-location-footer a,
.wpr-promo-box strong, .wpr-promo-box a:not(.wpr-button), .elementor-widget-icon-box strong, .elementor-widget-image-box strong,
#vitality-medicine > div > div > div strong, #vitality-medicine > div > div > div a { color: var(--lv-purple-on-deep) !important; }
.elementor-nav-menu a:hover, .elementor-nav-menu .elementor-item-active, .elementor-nav-menu a.highlighted { color: var(--lv-purple-on-deep) !important; }

/* ── Header & nav ───────────────────────────────────────────────────────── */
.elementor-location-header { background: var(--lv-bg-deep) !important; border-bottom: 2px solid var(--au-gold-soft); }
.elementor-location-header .e-con { background: transparent !important; border-top: 0; }
.elementor-nav-menu a, .elementor-nav-menu--main .elementor-item,
.elementor-location-header .elementor-widget-container .elementor-nav-menu a:not(.elementor-button):not(.wpr-button) { color: var(--lv-purple-on-deep) !important; font-family: var(--au-body) !important; font-size: 15px !important; padding-left: 11px !important; padding-right: 11px !important; letter-spacing: .01em; }   /* nav words: light violet, 15px, spread out on the deep band (his ruling); long selector outranks the generic link rule */
.elementor-nav-menu a:hover, .elementor-nav-menu .elementor-item-active, .elementor-nav-menu a.highlighted,
.elementor-location-header .elementor-widget-container .elementor-nav-menu a:not(.elementor-button):not(.wpr-button):hover,
.elementor-location-header .elementor-widget-container .elementor-nav-menu a:not(.elementor-button):not(.wpr-button).elementor-item-active { color: #FFFFFF !important; }   /* current page / hover: bright white */
.elementor-nav-menu--dropdown { background: var(--lv-bg-deep) !important; border: 1px solid var(--lv-line); }
.elementor-menu-toggle { color: var(--lv-text) !important; }
.elementor-location-header .elementor-button { white-space: nowrap !important; font-size: 14px !important; padding: 12px 18px !important; }   /* header CTA on one line */
/* Logo lockup sits in a soft white plate so the purple wordmark stays legible on lavender */
.elementor-location-header .elementor-widget-image img, .elementor-location-header .elementor-widget-theme-site-logo img { background: #FFFFFF; border-radius: 12px; padding: 6px 12px; }

/* ── Action buttons: GREEN by default; "Book Now" ORANGE (tagged .is-book by the page script) ── */
.elementor-button, .elementor-button-link, a.elementor-button, .wpr-promo-box-btn, .wpr-button {
  background-color: var(--ic-green) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: var(--au-body) !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.elementor-button:hover, a.elementor-button:hover, .wpr-promo-box-btn:hover, .wpr-button:hover { background-color: #7FB136 !important; color: #FFFFFF !important; }
.elementor-button.is-book, a.elementor-button.is-book, .wpr-button.is-book { background-color: var(--ic-orange) !important; }
.elementor-button.is-book:hover, a.elementor-button.is-book:hover { background-color: var(--ic-orange-2) !important; }
.elementor-button-text, .elementor-button-icon, .wpr-button-text { color: #FFFFFF !important; }

/* ── Cards, icons, dividers ─────────────────────────────────────────────── */
.elementor-widget-icon-box .elementor-widget-container,
.elementor-widget-image-box .elementor-widget-container,
.elementor-widget-call-to-action .elementor-cta { background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: 14px; padding: 22px; }
.elementor-icon, .elementor-icon i, .elementor-icon svg, .elementor-icon-box-icon .elementor-icon, .elementor-icon-list-icon i, .elementor-icon-list-icon svg {
  color: var(--lv-purple) !important; fill: var(--lv-purple) !important; border-color: var(--lv-purple) !important;
}
.elementor-icon-box-description, .elementor-image-box-description { color: var(--lv-muted) !important; }
.elementor-divider-separator { border-color: var(--au-gold-soft) !important; }
.elementor-widget-image img { border-radius: 14px; }

/* ── Royal Elementor promo boxes (the service tiles) ────────────────────── */
.wpr-promo-box { border: 1px solid var(--lv-line) !important; border-radius: 14px !important; overflow: hidden; background: var(--lv-card); }
.wpr-promo-box-bg-overlay { background-color: var(--lv-card) !important; opacity: 1 !important; }
.wpr-promo-box:has(.wpr-promo-box-bg-image) .wpr-promo-box-bg-overlay { background-color: rgba(79,65,134,.45) !important; }
.wpr-promo-box:hover .wpr-promo-box-bg-overlay { background-color: rgba(96,76,141,.75) !important; }
.wpr-promo-box-title, .wpr-promo-box-description, .wpr-promo-box-content, .wpr-promo-box-content * { color: var(--lv-text) !important; }
/* Service-tile titles: larger than the original 13px, but sized to the tile
   width so names break evenly (balanced wrapping), never more than ~3 lines.
   Tiles in a row share one height and centre their text. */
.wpr-promo-box-title { font-family: var(--au-display) !important; font-weight: 600 !important; font-size: clamp(16px, 1.25vw, 18px) !important; line-height: 1.22 !important; text-wrap: balance; overflow-wrap: normal; hyphens: manual; margin: 0 auto !important; max-width: 16ch; }
.wpr-promo-box-description { font-size: clamp(13px, 1vw, 15px) !important; line-height: 1.35 !important; }
.wpr-promo-box-content { padding: 16px 12px !important; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 118px; }
.wpr-promo-box { height: 100%; }
.wpr-promo-box-title .tile-sub { display: block; font-family: var(--au-body) !important; font-size: .68em; font-weight: 600; opacity: .92; margin-top: .25em; letter-spacing: .01em; }
.elementor-widget-wpr-promo-box, .elementor-widget-wpr-promo-box .elementor-widget-container { height: 100%; }
.e-con:has(> .elementor-widget-wpr-promo-box) { align-items: stretch !important; }
.wpr-promo-box:hover { border-color: var(--lv-purple) !important; }
.wpr-border-anim-oscar:before, .wpr-border-anim-oscar:after { border-color: var(--lv-purple) !important; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
input, textarea, select, .elementor-field-textual { background: rgba(255,255,255,.10) !important; color: var(--lv-text) !important; border: 1px solid var(--lv-line) !important; border-radius: 10px !important; }
input::placeholder, textarea::placeholder { color: var(--lv-muted); }
label, .elementor-field-label { color: var(--lv-muted) !important; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.elementor-location-footer { background: var(--lv-bg-deep) !important; border-top: 2px solid var(--au-gold-soft); color: var(--lv-text) !important; }
.elementor-location-footer .e-con { background: transparent !important; border-top: 0; }
.elementor-location-footer a { color: var(--lv-purple) !important; }
.elementor-location-footer .elementor-heading-title { color: var(--lv-text) !important; }
.elementor-location-footer .elementor-widget-image img { background: #FFFFFF; border-radius: 12px; padding: 6px 12px; }

/* ── Hand-added Vitality Medicine section: re-skin its inline navy styling ── */
#vitality-medicine { background: var(--lv-bg) !important; color: var(--lv-text) !important; border-top: 2px solid var(--au-gold-soft); border-bottom: 1px solid var(--lv-line); }
#vitality-medicine > div > p:first-child { color: var(--au-gold) !important; font-size: clamp(18px, 1.6vw, 22px) !important; font-weight: 800 !important; letter-spacing: .16em !important; margin-bottom: 14px !important; }   /* "Vitality Medicine · Singapore" — larger, bold (his 13 Sept note) */
#vitality-medicine h2, #vitality-medicine h3 { color: var(--lv-text) !important; font-family: var(--au-display) !important; }
#vitality-medicine h3 { color: var(--au-gold) !important; font-weight: 700 !important; }   /* the three card headings share the eyebrow's orange-gold (his ruling) */
#vitality-medicine > div > p { color: var(--lv-text) !important; }
#vitality-medicine > div > p strong { color: var(--lv-purple) !important; }
#vitality-medicine > div > div > div { background: var(--lv-card) !important; border: 1px solid var(--lv-line) !important; }
#vitality-medicine > div > div > div p { color: var(--lv-text) !important; }
#vitality-medicine a { color: var(--lv-purple) !important; }
#vitality-medicine a[style*="background:#C9A84C"] { background: var(--ic-green) !important; color: #FFFFFF !important; }
#vitality-medicine p[style*="#8A9BB0"] { color: var(--lv-muted) !important; }
#vitality-medicine p[style*="#8A9BB0"] a { color: var(--lv-purple) !important; }

/* ── Data tables (Health Screening / Longevity tick tables) ─────────────── */
/* The kit painted white text into the plugin's white cells, so every tick table read as empty. */
.wpr-data-table { border-collapse: separate !important; border-spacing: 0 !important; border-radius: 12px; overflow: hidden; }
.wpr-data-table th, .wpr-table-head th, .wpr-data-table thead td { background: var(--lv-bg-deep) !important; color: #FFFFFF !important; font-family: var(--au-body) !important; font-weight: 700 !important; }
.wpr-data-table th *, .wpr-table-head th * { color: #FFFFFF !important; }
.wpr-data-table td { background: #FBFAFF !important; color: var(--lv-purple) !important; border-color: rgba(96,76,141,.18) !important; }
.wpr-data-table tbody tr:nth-child(even) td { background: #F1ECFF !important; }
.wpr-data-table td, .wpr-data-table td *, .wpr-table-text { color: var(--lv-purple) !important; }
.wpr-data-table td svg, .wpr-data-table td i { color: var(--ic-purple) !important; fill: var(--ic-purple) !important; }
.wpr-data-table td .e-fas-check { width: 16px !important; height: 16px !important; }

/* ── Ink on light surfaces ──────────────────────────────────────────────── */
/* The page script tags any text (or tick icon) whose effective background is white/light with .lv-ink-dark,
   so white-ink kit colours can never vanish inside white cards, tables or plates. Quadruple class outranks every kit rule. */
.lv-ink-dark.lv-ink-dark.lv-ink-dark.lv-ink-dark { color: var(--lv-purple) !important; }
svg.lv-ink-dark.lv-ink-dark.lv-ink-dark.lv-ink-dark { fill: var(--ic-purple) !important; color: var(--ic-purple) !important; }
.is-book.is-book.is-book, .is-book.is-book.is-book .lv-ink-dark, .is-book.is-book.is-book * { color: #FFFFFF !important; }   /* Book Now: white on orange */

/* ── Home flip squares (Our Vision / Our Inspiration …) ─────────────────── */
/* Elementor's default teal-green fronts and mixed white/orange backs → one deep-lavender front, one faint-lavender back. */
.elementor-flip-box .elementor-flip-box__front { background-color: var(--lv-flip) !important; background-image: none !important; }
.elementor-flip-box .elementor-flip-box__front .elementor-flip-box__layer__overlay { background-color: transparent !important; }
.elementor-flip-box .elementor-flip-box__front .elementor-flip-box__layer__title, .elementor-flip-box .elementor-flip-box__front .elementor-flip-box__layer__description { color: #FFFFFF !important; font-family: var(--au-display) !important; font-weight: 700 !important; }
.elementor-flip-box .elementor-flip-box__back { background-color: var(--lv-flip-back) !important; background-image: none !important; }
.elementor-flip-box .elementor-flip-box__back .elementor-flip-box__layer__overlay { background-color: transparent !important; }
.elementor-flip-box .elementor-flip-box__back .elementor-flip-box__layer__title, .elementor-flip-box .elementor-flip-box__back .elementor-flip-box__layer__description, .elementor-flip-box .elementor-flip-box__back .elementor-flip-box__layer__inner * { color: var(--lv-purple) !important; }
.elementor-flip-box .elementor-flip-box__back .elementor-button { background-color: var(--ic-green) !important; color: #FFFFFF !important; }
.elementor-flip-box .elementor-flip-box__layer { border-radius: 14px !important; }

/* ── Health Screening › How It Works: four equal squares, white words ───── */
.elementor-element-0a50292 > .e-con.e-child { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
.elementor-element-0a50292 > .e-con.e-child > .elementor-widget-image-box { flex: 1 1 auto !important; height: 100% !important; display: flex !important; }
.elementor-element-0a50292 .elementor-widget-image-box > .elementor-widget-container { flex: 1 1 auto !important; height: 100% !important; width: 100% !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; }
.elementor-element-0a50292 .elementor-image-box-title, .elementor-element-0a50292 .elementor-image-box-title *,
.elementor-element-0a50292 .elementor-image-box-description, .elementor-element-0a50292 .elementor-image-box-description * { color: #FFFFFF !important; }