/*
  Divi compatibility for the v4 chrome (header, mobile menu, search palette, footer, sticky call bar). Loaded after uc.css.
  Divi's global element styles (body 14px/1.7, padding under h1-h6 and p) and a plugin's body { overflow-x: hidden }
  leak into the fragments on stage; these rules restore the prototype values without touching Divi page content.
  This file is not part of the prototype export, so tools/v4/export_wp.py leaves it in place.
*/

/* overflow-x: hidden turns <body> into a scroll container, which stops the sticky header from sticking */
body.uc-chrome { overflow-x: clip; }

/*
  The fragments inherit their base type from <body> in the prototype. Divi's reset gives every div and a font-size: 100%
  of its 14px body, so the roots need a class selector; .ubar and .site-footer set their own font in uc.css.
*/
.site-header, .mnav, .palette { font: 400 var(--uc-fs-body)/1.65 var(--uc-sans); }

:is(.ubar, .site-header, .mnav, .palette, .site-footer, .mcta) :is(h1, h2, h3, h4, h5, h6, p) { padding-bottom: 0; }

/* DiviFlash styles a global .chip with a 5px right and bottom margin; v4 chips have none */
:is(.site-header, .mnav, .palette) .chip { margin: 0; }

/* The GDPR cookie bar, Monarch's share bar and Divi's back-to-top button float above everything and would cover the
   phone menu's links and call buttons while it is open */
body:has(.mnav.open) :is(#moove_gdpr_cookie_info_bar, .et_social_mobile, .et_social_mobile_button, .et_social_mobile_overlay, .et_social_sidebar_networks, .et_pb_scroll_top) { visibility: hidden !important; transition: none !important; }

/* Divi sets every heading in its global heading font; in the design system only h1 and h2 use the display face, h3-h6 the
   body face. Components that set their own font still win, since this only changes the variable Divi reads. */
:is(h3, h4, h5, h6) { --et_global_heading_font: var(--uc-sans); }
/* An eyebrow alone in a Text module would sit in a 28px body line box (16px more above the heading than the prototype's
   grid gap); as a flex item it keeps its own 12px height */
.et_pb_text_inner:has(> .eyebrow:only-child) { display: flex; }
/* Divi borders and indents every blockquote; the v4 quotes (.story, .prose, reviews) style their own */
.et_pb_text :where(blockquote) { border-left: 0; padding-left: 0; }

/* Pages built from Divi modules in v4 sections: the design system owns the spacing; Divi pads every heading and paragraph */
:is(.hero, .section, .unis) :is(h1, h2, h3, h4, h5, h6, p) { padding-bottom: 0; }
/* Divi's article styles reach the v4 components inside Text modules: list bullets and indents, table borders, bare links */
.entry-content .et_pb_text :where(ul, ol) { list-style: none; padding: 0; line-height: inherit; }
.entry-content .et_pb_text :where(ul, ol) > li { margin-bottom: 0; }
.entry-content .et_pb_text .steps { padding-left: 46px; }
.entry-content .board table { border: 0; margin: 0; }
.entry-content .board tr th { padding: 12px 6px 8px; color: var(--uc-muted-d); font-weight: 600; }
.entry-content .board tr td { padding: 6px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
:is(.hero, .section) .et_pb_text p a:not([class]) { text-decoration: underline; text-underline-offset: 3px; }

/*
  Tablets: Divi rows don't wrap above 767px, so two columns stay side by side at their desktop fractions. Rows with these
  classes stack like the prototype instead: uc-stack-xl (the hero) below 1200px, uc-stack (journey, split, check-in) below
  981px, with the prototype's grid gap between the parts. Head rows keep Divi's behaviour, as .head does in the prototype.
*/
@media (max-width: 1199px) {
  .et_pb_section .et_pb_row.uc-stack-xl { flex-wrap: wrap; row-gap: clamp(32px, 5vw, 80px); }
  .et_pb_section .et_pb_row.uc-stack-xl > .et_pb_column { flex: 0 0 100%; width: 100%; max-width: 100%; }
}
@media (max-width: 980px) {
  .et_pb_section .et_pb_row.uc-stack { flex-wrap: wrap; row-gap: clamp(32px, 6vw, 96px); }
  .et_pb_section .et_pb_row.uc-stack > .et_pb_column { flex: 0 0 100%; width: 100%; max-width: 100%; }
}

/* Divi content takes no inline styles, so the prototype's per-element styles are classes here (tools/v4/home_divi.py) */
.d-0 { --d: 0ms; } .d-60 { --d: 60ms; } .d-70 { --d: 70ms; } .d-80 { --d: 80ms; } .d-120 { --d: 120ms; } .d-140 { --d: 140ms; } .d-160 { --d: 160ms; }
.d-180 { --d: 180ms; } .d-210 { --d: 210ms; } .d-240 { --d: 240ms; } .d-300 { --d: 300ms; }
.meter-d { background: rgba(255, 255, 255, 0.1); }
.c-red { color: var(--uc-red); }
.c-ink { color: var(--uc-ink); }
.c-white { color: #fff; }
.c-neon { color: var(--uc-neon); }
.fw-500 { font-weight: 500; }
.mt-32 { margin-top: 32px; }
.mb-14 { margin-bottom: 14px; }
.stories { display: grid; gap: 20px; margin-top: 24px; }
.glow-orb.orb-tl { top: -200px; left: -240px; }

/*
  Country pages (tools/v4/country_divi.py). The hero photo is an Image module (editors swap it in the builder) laid over the
  whole section: Divi's row and column are positioned and the column has z-index 2, which would trap it, so they stay flat.
*/
.et_pb_section.chero { align-items: center; justify-content: flex-end; background-color: var(--uc-night); }
.et_pb_section.chero :is(.et_pb_row, .et_pb_column) { position: static; z-index: auto; }
.et_pb_section.chero .chero-img { position: absolute; inset: 0; z-index: -2; width: auto; max-width: none; margin: 0; }
.et_pb_section.chero .chero-img :is(.et_pb_image_wrap, img) { display: block; width: 100%; height: 100%; object-fit: cover; }
:is(.chero, .factbar) :is(h1, h2, h3, h4, h5, h6, p) { padding-bottom: 0; }
/*
  Page heroes (.phero: finder, programs, universities, tools/v4/catalog_divi.py). The grid and glow sit in a Text module
  with class uc-decor; it and Divi's row and column step aside so the layers cover the whole section as in the prototype,
  and the module adds no gap to the column.
*/
.et_pb_section.phero :is(.et_pb_row, .et_pb_column) { position: static; z-index: auto; }
.uc-decor, .uc-decor > .et_pb_text_inner { display: contents; }
.et_pb_section .et_pb_column.uc-phero-in { max-width: 860px; }
/* Side facts link to the university and country pages in the text colour, like the prototype */
.facts a { color: inherit; }
/* [uc_universities]: one group per country */
.uni-group { margin-top: 56px; }
.uni-group:first-child { margin-top: 0; }
.uni-group .head { margin-bottom: 24px; }
.uni-group h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); }
.uni-group .meta-row { margin-top: 16px; }
/* A university without programs online has no programs section */
.et_pb_section.uc-if-programs:not(:has(.results)) { display: none; }
/* A section head without a right-hand part keeps the prototype's .head > div width */
.et_pb_section .et_pb_column.uc-head { max-width: 760px; }
/* The guide: the article takes the room, the side column is 320px and follows the reader like .side in the prototype */
.et_pb_row.uc-doc { column-gap: clamp(32px, 5vw, 80px); }
@media (min-width: 981px) {
  .et_pb_section .et_pb_row.uc-doc > .et_pb_column:first-child { flex: 1 1 0; width: auto; max-width: none; }
  .et_pb_section .et_pb_row.uc-doc > .et_pb_column:last-child { flex: 0 0 320px; width: 320px; max-width: 320px; }
  .et_pb_section .et_pb_column.side { position: sticky; top: calc(var(--uc-header) + 28px); }
}
/* .prose spaces its direct children; in Divi they sit one level down, inside the Text module's inner wrapper */
.prose :where(.et_pb_text_inner) > * + * { margin-top: 1.1em; }
.prose :where(.et_pb_text_inner) > :first-child { margin-top: 0; }
/* WordPress adds width and height to article images; the height attribute would otherwise fix them at the thumbnail height */
.prose img { height: auto; }

/* Header markup from includes/header.php: the feature card under the program search chips (inline in the prototype) */
.mchips + .mega-feature { margin-top: 18px; }

/*
  Phones with the v4 footer: the call bar owns the bottom edge. Monarch's share bar and Divi's back-to-top arrow would sit
  on top of it (sharing stays available through the browser's own share menu), and the call bar waits until the visitor
  has answered the cookie bar instead of covering it.
*/
@media (max-width: 767px) {
  .uc-chrome-footer :is(.et_social_mobile, .et_social_mobile_button, .et_social_mobile_overlay, .et_pb_scroll_top) { display: none !important; }
}
.gdpr-infobar-visible .mcta.show { transform: translateY(140%); visibility: hidden; }

/* Divi removes link underlines site-wide; the prototype's legal row keeps the browser's underline */
.f-legal a { text-decoration: underline; }

/* Footer markup from includes/footer.php: the cookie settings button reads as one of the legal links */
.f-legal .f-cookies { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.f-legal .f-cookies:hover { color: #fff; }
@media (max-width: 767px) { .f-legal .f-cookies { min-height: 40px; } }