/* ==========================================================
   VLN / VALN UI LAYER (Divi-safe)
   Version: 1.7.6

   Goals:
   - Calm, intentional hierarchy (not "everything is blue")
   - Links: never bold, 1px underline, distinct link blue
   - Pills: navigation controls (neutral), active = brand blue
   - Borders: neutral light gray (not blue)
   - Fix mobile left/right drift caused by full-bleed hacks
   - Fix rounded table corner clipping via wrapper
   ========================================================== */

/* ----------------------------------------------------------
   1) Base typography + colors (scoped)
   ---------------------------------------------------------- */

body.valn-ui{
  /* Variables are injected from PHP settings as CSS vars on body.valn-ui.
     These fallbacks keep things safe if vars are missing. */
  --valn-brand-blue: #00296B;
  --valn-h1-color: #001B45;
  --valn-h3-color: #0B3D91;
  --valn-body-text-color: #1F2933;
  --valn-muted-text-color: #52606D;
  --valn-link-color: #0A66C2;
  --valn-link-hover-color: #084E94;
  --valn-border-color: #D9E2EC;
  --valn-soft-tint-bg: #F6F8FB;
  --valn-card-bg: #FFFFFF;
  --valn-cta-gold: #F4B400;
  --valn-focus-ring-color: var(--valn-cta-gold);

  --valn-base-font-size: 16px;
  --valn-body-line-height: 1.6;
  --valn-heading-font-weight: 800;
  --valn-body-font-weight: 400;

  --valn-heading-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  color: var(--valn-body-text-color);
  font-size: var(--valn-base-font-size);
  line-height: var(--valn-body-line-height);
  font-weight: var(--valn-body-font-weight);
}

/* Keep content from drifting and avoid iOS side-scroll */
body.valn-ui,
body.valn-ui #page-container,
body.valn-ui #main-content{
  max-width: 100%;
  overflow-x: hidden;
}

/* Apply body typography inside the main content area */
body.valn-ui #main-content{
  color: var(--valn-body-text-color);
  font-size: var(--valn-base-font-size);
  line-height: var(--valn-body-line-height);
}

body.valn-ui #main-content p,
body.valn-ui #main-content li,
body.valn-ui #main-content blockquote,
body.valn-ui #main-content td,
body.valn-ui #main-content th{
  /* Do NOT force color here; it breaks dark-background modules that rely on inherited white text. */
  font-weight: var(--valn-body-font-weight);
}

/* ----------------------------------------------------------
   2) Headings (clear hierarchy)
   - H1: darker navy anchor
   - H2: brand blue
   - H3: slightly lighter blue
   - H4-H6: charcoal (reduce overall blue)
   ---------------------------------------------------------- */

:where(body.valn-ui #main-content) h1,
:where(body.valn-ui #main-content) h2,
:where(body.valn-ui #main-content) h3,
:where(body.valn-ui #main-content) h4,
:where(body.valn-ui #main-content) h5,
:where(body.valn-ui #main-content) h6{
  font-family: var(--valn-heading-font) !important;
  font-weight: var(--valn-heading-font-weight) !important;
  letter-spacing: -0.01em;
}

/* Divi modules can set heading fonts with higher specificity.
   This ensures the sitewide heading font setting actually applies everywhere in #main-content. */
body.valn-ui #main-content h1,
body.valn-ui #main-content h2,
body.valn-ui #main-content h3,
body.valn-ui #main-content h4,
body.valn-ui #main-content h5,
body.valn-ui #main-content h6,
body.valn-ui #main-content .et_pb_module_header{
  font-family: var(--valn-heading-font) !important;
  font-weight: var(--valn-heading-font-weight) !important;
}

:where(body.valn-ui #main-content) h1{
  color: var(--valn-h1-color);
  font-size: clamp(2.0rem, 4vw, 2.75rem);
  line-height: 1.12;
  margin: 0.75rem 0 0.6rem;
}

:where(body.valn-ui #main-content) h2{
  color: var(--valn-brand-blue);
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  line-height: 1.18;
  margin: 1.4rem 0 0.55rem;
}

:where(body.valn-ui #main-content) h3{
  color: var(--valn-h3-color);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.22;
  margin: 1.1rem 0 0.45rem;
}

:where(body.valn-ui #main-content) h4,
:where(body.valn-ui #main-content) h5,
:where(body.valn-ui #main-content) h6{
  color: var(--valn-body-text-color);
  line-height: 1.25;
  margin: 1.0rem 0 0.35rem;
}

/* Divi dark background modules should keep their intended light text colors.
   We only enforce the color hierarchy in light layouts. */
body.valn-ui #main-content .et_pb_bg_layout_dark h1,
body.valn-ui #main-content .et_pb_bg_layout_dark h2,
body.valn-ui #main-content .et_pb_bg_layout_dark h3,
body.valn-ui #main-content .et_pb_bg_layout_dark h4,
body.valn-ui #main-content .et_pb_bg_layout_dark h5,
body.valn-ui #main-content .et_pb_bg_layout_dark h6{
  color: inherit !important;
}

/* Reduce the "H1 pushed down" feeling on mobile templates */
@media (max-width: 767px){
  body.valn-ui #main-content h1{
    margin-top: 0.35rem;
  }
}

/* ----------------------------------------------------------
   3) Links (never bold, 1px underline, distinct blue)
   Rules:
   - Do NOT style buttons/pills as text links
   - Hover: color change only (no underline thickness change)
   ---------------------------------------------------------- */

/* Default link treatment inside reading text contexts */
body.valn-ui #main-content :is(p, li, td, th, blockquote, .et_pb_text_inner) a:not(.et_pb_button):not(.vlnBtn):not(.valn-btn):not(.vlnPill):not(.vlnJumpPill):not(.vlnTag):not(.vlnNextLink){
  color: var(--valn-link-color) !important;
  font-weight: var(--valn-body-font-weight) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

body.valn-ui #main-content :is(p, li, td, th, blockquote, .et_pb_text_inner) a:not(.et_pb_button):not(.vlnBtn):not(.valn-btn):not(.vlnPill):not(.vlnJumpPill):not(.vlnTag):not(.vlnNextLink):hover{
  color: var(--valn-link-hover-color) !important;
}

/* Visited should not turn purple */
body.valn-ui #main-content :is(p, li, td, th, blockquote, .et_pb_text_inner) a:visited{
  color: var(--valn-link-color) !important;
}

/* Dark background modules: keep link color inherited (usually white) */
body.valn-ui #main-content .et_pb_bg_layout_dark :is(p, li, td, th, blockquote, .et_pb_text_inner) a:not(.et_pb_button):not(.vlnBtn):not(.valn-btn):not(.vlnPill):not(.vlnJumpPill):not(.vlnTag):not(.vlnNextLink){
  color: inherit !important;
  text-decoration-color: currentColor;
}
body.valn-ui #main-content .et_pb_bg_layout_dark :is(p, li, td, th, blockquote, .et_pb_text_inner) a:not(.et_pb_button):not(.vlnBtn):not(.valn-btn):not(.vlnPill):not(.vlnJumpPill):not(.vlnTag):not(.vlnNextLink):hover{
  color: inherit !important;
}
body.valn-ui #main-content .et_pb_bg_layout_dark :is(p, li, td, th, blockquote, .et_pb_text_inner) a:visited{
  color: inherit !important;
}

/* Hard stop: never underline button-like links */
body.valn-ui #main-content a.et_pb_button,
body.valn-ui #main-content a.vlnBtn,
body.valn-ui #main-content a.valn-btn,
body.valn-ui #main-content a.vlnPill,
body.valn-ui #main-content a.vlnJumpPill,
body.valn-ui #main-content a.vlnTag{
  text-decoration: none !important;
}

/* Divi accordion/toggle: remove unexpected shadows (FAQ ATF issue) */
body.valn-ui #main-content .et_pb_accordion,
body.valn-ui #main-content .et_pb_toggle,
body.valn-ui #main-content .et_pb_accordion_item{
  box-shadow: none !important;
}

/* ----------------------------------------------------------
   4) Breadcrumbs, meta, primary sources (muted)
   ---------------------------------------------------------- */

body.valn-ui .vlnBreadcrumb,
body.valn-ui .vlnMeta,
body.valn-ui .vlnPrimarySources,
body.valn-ui .vlnPrimarySourcesLabel{
  color: var(--valn-muted-text-color) !important;
}

body.valn-ui .vlnBreadcrumb a,
body.valn-ui .vlnMeta a{
  color: var(--valn-muted-text-color) !important;
  font-weight: var(--valn-body-font-weight) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

body.valn-ui .vlnPrimarySources a{
  color: var(--valn-link-color) !important;
  font-weight: var(--valn-body-font-weight) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

body.valn-ui .vlnPrimarySources a:hover{
  color: var(--valn-link-hover-color) !important;
}

/* ----------------------------------------------------------
   5) Pills / chips (navigation, not CTAs)
   - Inactive: subtle tint, neutral border, charcoal text
   - Active: brand blue bg, white text
   ---------------------------------------------------------- */

body.valn-ui .vlnPill,
body.valn-ui .vlnJumpPill{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 12px;
  border-radius: 999px;

  background: var(--valn-soft-tint-bg) !important;
  border: 1px solid var(--valn-border-color) !important;

  color: var(--valn-body-text-color) !important;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.1;

  text-decoration: none !important;
}

body.valn-ui .vlnPill:hover,
body.valn-ui .vlnJumpPill:hover{
  background: #eef2f7 !important; /* slightly darker than soft tint */
}

body.valn-ui .vlnPill:is(.is-active, .active, [aria-current="page"], [aria-current="true"], [aria-selected="true"]),
body.valn-ui .vlnJumpPill:is(.is-active, .active, [aria-current="page"], [aria-current="true"], [aria-selected="true"]){
  background: var(--valn-brand-blue) !important;
  border-color: var(--valn-brand-blue) !important;
  color: #ffffff !important;
}

/* ----------------------------------------------------------
   6) CTA ladder: keep CTAs intentional
   - Inline Next step: text link (no pill)
   ---------------------------------------------------------- */

body.valn-ui .vlnNextPill{
  display: inline;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

body.valn-ui .vlnNextPill .vlnNextLabel{
  color: var(--valn-muted-text-color) !important;
  font-weight: 700;
}

body.valn-ui .vlnNextPill a.vlnNextLink{
  color: var(--valn-link-color) !important;
  font-weight: var(--valn-body-font-weight) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

body.valn-ui .vlnNextPill a.vlnNextLink:hover{
  color: var(--valn-link-hover-color) !important;
}

/* ----------------------------------------------------------
   7) Borders + cards (neutral, not blue)
   ---------------------------------------------------------- */

body.valn-ui .vlnHeroCard,
body.valn-ui .vlnQuickCard,
body.valn-ui .vlnCard,
body.valn-ui .vlnCallout,
body.valn-ui .vlnNote,
body.valn-ui .vlnFaq{
  border-color: var(--valn-border-color) !important;
  background: var(--valn-card-bg) !important;
}

/* Card titles should follow H3 role (lighter than H2) */
body.valn-ui .vlnCardTitle,
body.valn-ui .vlnQuickCardTitle,
body.valn-ui .vlnHeroTitle{
  color: var(--valn-h3-color) !important;
}

/* Soft tinted sections use the neutral tint variable */
body.valn-ui .vlnBgSoft,
body.valn-ui .vlnSoftBg,
body.valn-ui .vlnSectionSoft{
  background: var(--valn-soft-tint-bg) !important;
}

/* ----------------------------------------------------------
   8) Table corner clipping fix (wrapper)
   - Outer: scroll container
   - Inner: rounded + overflow hidden
   - Table: no border radius / no outer border
   ---------------------------------------------------------- */

body.valn-ui .valnTableOuter{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

body.valn-ui .valnTableWrap{
  display: inline-block; /* allows outer to scroll when table is wider */
  min-width: 100%;

  border-radius: 14px;
  overflow: hidden;

  border: 1px solid var(--valn-border-color);
  background: var(--valn-card-bg);
}

body.valn-ui .valnTableWrap table{
  width: 100%;
  max-width: 100%;
  margin: 0;

  /* Outer border lives on .valnTableWrap so corners stay rounded */
  border: 0 !important;
  box-shadow: none !important;

  border-collapse: separate !important;
  border-spacing: 0 !important;

  /* critical: table itself should not have its own radius */
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* If theme/global CSS applied a card border to the table itself, kill it inside the wrapper */
body.valn-ui .valnTableWrap table.custom-table,
body.valn-ui .valnTableWrap .et_pb_text.custom-table table,
body.valn-ui .valnTableWrap table.vlnTable,
body.valn-ui .valnTableWrap table.valnTable{
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ----------------------------------------------------------
   9) Reset buttons: red text link (not a button)
   ---------------------------------------------------------- */

body.valn-ui :is(#vlnRReset, #cmpReset, #vaReadinessResetBtn, #vaServiceResetBtn, #vaPropertyResetBtn){
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  padding: 0 !important;
  min-height: auto !important;

  color: #b91c1c !important;
  font-weight: 700 !important;

  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;

  cursor: pointer;
}

body.valn-ui :is(#vlnRReset, #cmpReset, #vaReadinessResetBtn, #vaServiceResetBtn, #vaPropertyResetBtn):hover{
  color: #7f1d1d !important;
}

/* ----------------------------------------------------------
   10) Divi container / mobile gutter normalization
   (avoid left/right drift across templates)
   ---------------------------------------------------------- */

body.valn-ui #main-content .container,
body.valn-ui #main-content .et_pb_row,
body.valn-ui #main-content .et_pb_row_inner{
  box-sizing: border-box !important;
}

/* Desktop: optional max-width override (off by default)
   Enable in: WP Admin → Settings → VLN Interactive Pages → Typography & Color Hierarchy
*/
@media (min-width: 981px){
  body.valn-ui.valn-ui-width-override #main-content .container,
  body.valn-ui.valn-ui-width-override #main-content .et_pb_row,
  body.valn-ui.valn-ui-width-override #main-content .et_pb_row_inner{
    max-width: var(--valn-content-max-width, 1280px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Mobile: one consistent gutter */
@media (max-width: 980px){
  body.valn-ui #main-content .container{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--valn-mobile-gutter, 6px) !important;
    padding-right: var(--valn-mobile-gutter, 6px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Divi mobile width normalizer
     Divi rows default to ~80% width, which reads as "mystery side padding" even
     when VLN padding/gutter settings are set to 0. */
  body.valn-ui #main-content :is(.et_pb_section, .et_pb_row, .et_pb_row_inner){
    width: 100% !important;
    max-width: 100% !important;
  }
  body.valn-ui #main-content :is(.et_pb_row, .et_pb_row_inner){
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.valn-ui #main-content :is(.et_pb_section, .et_pb_row, .et_pb_row_inner, .et_pb_column){
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /*
    Divi Builder note:
    Builder layouts sometimes don't use #main-content .container as the "canvas" wrapper.
    When that happens, padding the container alone won't create a visible gutter.

    Fix:
    - Keep section backgrounds full-bleed.
    - Apply the gutter to rows (most common wrapper) and fullwidth modules (no rows).
    - Remove .container padding on builder layouts to avoid double-gutters.
  */
  body.valn-ui.et_pb_pagebuilder_layout #main-content .container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.valn-ui.et_pb_pagebuilder_layout #main-content :is(.et_pb_row, .et_pb_row_inner){
    padding-left: var(--valn-mobile-gutter, 6px) !important;
    padding-right: var(--valn-mobile-gutter, 6px) !important;
    box-sizing: border-box !important;
  }

  body.valn-ui.et_pb_pagebuilder_layout #main-content :is(.et_pb_section_fullwidth > .et_pb_module, .et_pb_fullwidth_section > .et_pb_module){
    padding-left: var(--valn-mobile-gutter, 6px) !important;
    padding-right: var(--valn-mobile-gutter, 6px) !important;
    box-sizing: border-box !important;
  }

  /* Kill any mobile full-bleed hacks (prevents "too far left/right" pages) */
  body.valn-ui :is(.vlnPage, .valnPage){
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ----------------------------------------------------------
   11) Neutralize legacy wrapper paint (removes gradients / hard font sizing)
   When sitewide VALN UI is enabled, .vlnPage/.valnPage should not
   impose extra backgrounds or fixed 14px typography.
   ---------------------------------------------------------- */

body.valn-ui :is(.vlnPage, .valnPage){
  background: transparent !important;
  padding: 0 !important;
  color: inherit !important;
  font-family: inherit !important;
}

body.valn-ui :is(.vlnPage, .valnPage) :is(p, li, td, th, dt, dd){
  font-size: inherit !important;
}

/* ----------------------------------------------------------
   12) FAQ + Author Box spacing fixes
   - Prevents FAQ sections from visually overlapping Simple Author Box
   - Ensures the author box always sits on top when overlapping would occur
   ---------------------------------------------------------- */

body.valn-ui :is(.vlnFaq, .valnFaq){
  margin-bottom: 24px !important;
  position: relative;
  z-index: 0;
}

body.valn-ui :is(.saboxplugin-wrap, .saboxplugin-authorbox){
  margin-top: 24px !important;
  clear: both;
  position: relative;
  z-index: 1;
}

/* Keyboard focus ring: allowed to use gold */
body.valn-ui :focus-visible{
  outline: 3px solid var(--valn-focus-ring-color);
  outline-offset: 3px;
}