/* ==========================================================
   EBS Dark Theme – static rules (DWP-2110)
   Colours come from the palette variables in the generated
   colours file (body.ebs-dark { --edt-*: … }). Rules keyed on
   an original colour live in the generated file, not here.
   Every selector is scoped to body.ebs-dark.
   ========================================================== */

/* 1. Page and text (what Salient's General Settings → Styling did on staging) */
body.ebs-dark,
body.ebs-dark .container-wrap,
body.ebs-dark .ocm-effect-wrap {
  background-color: var(--edt-bg) !important;
}
body.ebs-dark {
  --nectar-page-text-color: var(--edt-text);
  color: var(--edt-text);
}
body.ebs-dark .full-width-section > .col.span_12.dark,
body.ebs-dark .full-width-content > .col.span_12.dark {
  color: var(--edt-text);
}

/* 2. Header, top bar, navigation (what Salient's Header Navigation colours did on staging) */
body.ebs-dark #header-outer,
body.ebs-dark #header-outer.side-widget-open,
body.ebs-dark #header-space {
  background-color: var(--edt-header-bg) !important;
}
body.ebs-dark #header-secondary-outer {
  background-color: var(--edt-topbar-bg) !important;
}
/* Top bar separators (blue on prod): a subtle mix of the link and bar colours */
html body.ebs-dark #header-outer #header-secondary-outer :is(li, a) {
  border-color: color-mix(in srgb, var(--edt-nav-link) 40%, var(--edt-topbar-bg)) !important;
}
body.ebs-dark #header-secondary-outer a,
body.ebs-dark #header-outer #top nav > ul > li > a {
  color: var(--edt-nav-link) !important;
}
body.ebs-dark #header-outer #top nav > ul > li > a:hover,
body.ebs-dark #header-outer #top nav > ul > li.current-menu-item > a {
  color: var(--edt-nav-hover) !important;
}
/* Animated underline under the hovered / current main menu item (grey by default) */
html body.ebs-dark #header-outer[data-lhe="animated_underline"] #top nav > ul > li > a .menu-title-text:after {
  border-color: var(--edt-nav-hover) !important;
}
/* Header dropdowns: top bar (e.g. the WPML language list) and main menu.
   Salient uses body:not([data-header-format="left-header"]) #header-outer .sf-menu li ul { … !important },
   so these need the extra "html" to win. */
html body.ebs-dark #header-outer .sf-menu li ul,
html body.ebs-dark #header-outer .sf-menu li ul li,
html body.ebs-dark #header-outer .sf-menu li ul a {
  background-color: var(--edt-surface) !important;
  border-color: var(--edt-border) !important;
}
html body.ebs-dark #header-outer .sf-menu li ul a {
  color: var(--edt-nav-link) !important;
}
html body.ebs-dark #header-outer .sf-menu li ul a:hover,
html body.ebs-dark #header-outer .sf-menu li ul li.current-menu-item > a {
  color: var(--edt-nav-hover) !important;
}
/* Mobile menu icon: three lines plus Salient's extra middle line (.lines-button:after).
   Only while the menu is closed – when open, Salient hides the lines behind the ✕. */
html body.ebs-dark #header-outer #top .slide-out-widget-area-toggle a:not(.open) .lines,
html body.ebs-dark #header-outer #top .slide-out-widget-area-toggle a:not(.open) .lines:before,
html body.ebs-dark #header-outer #top .slide-out-widget-area-toggle a:not(.open) .lines:after,
html body.ebs-dark #header-outer #top .slide-out-widget-area-toggle a:not(.open) .lines-button:after {
  background-color: var(--edt-nav-link) !important;
}

/* Mobile menu panel (navy gradient on .bg-inner) */
body.ebs-dark #slide-out-widget-area-bg .bg-inner {
  background: var(--edt-bg) !important;
}

/* 3. Course page sticky sub-nav, the mobile sticky bottom bar and the footer wrapper (navy by design).
      Salient uses "body .nectar-global-section.nectar_hook_global_section_after_footer.show { … !important }"
      and "#footer-outer { … !important }", hence the extra "html" / ID. */
body.ebs-dark .page-submenu .full-width-content,
body.ebs-dark .page-submenu ul,
body.ebs-dark .page-submenu ul::-webkit-scrollbar,
body.ebs-dark .page-submenu ul::-webkit-scrollbar-track,
html body.ebs-dark .nectar-global-section.nectar_hook_global_section_after_footer,
html body.ebs-dark .nectar-global-section.nectar_hook_global_section_after_footer .floating-cta-container,
html body.ebs-dark .nectar-global-section.nectar_hook_global_section_after_footer .wpb_row,
html body.ebs-dark .nectar-global-section.nectar_hook_global_section_after_footer .row-bg-wrap,
html body.ebs-dark .nectar-global-section.nectar_hook_global_section_after_footer .row-bg,
html body.ebs-dark .nectar-global-section.nectar_hook_global_section_after_footer .row_col_wrap_12,
body.ebs-dark #footer-outer {
  background-color: var(--edt-surface) !important;
}

/* 4. Toggles / FAQ: navy titles (extra colour 2) */
body.ebs-dark .toggle .toggle-title,
body.ebs-dark .toggle .toggle-title a {
  color: var(--edt-text) !important;
}
/* "Animated circle" toggle style paints each toggle var(--ac-bg-color, #fff) */
body.ebs-dark div[data-style="animated_circle"] .toggle {
  --ac-bg-color: var(--edt-surface);
  background-color: var(--edt-surface) !important;
}

/* 4b. Video carousel cells (white behind the YouTube shorts) */
body.ebs-dark .ysc-root .carousel-cell {
  background-color: transparent !important;
}

/* 5. Panels: Salient "boxed" columns and the school selector (desktop panel and mobile modal) */
body.ebs-dark .wpb_column.boxed > .vc_column-inner,
body.ebs-dark :is(#ebs-selector, #ebs-selector-modal),
body.ebs-dark :is(#ebs-selector, #ebs-selector-modal) .swiper-slide,
body.ebs-dark :is(#ebs-selector, #ebs-selector-modal) .swiper-slide .content {
  background-color: var(--edt-surface) !important;
}
body.ebs-dark .wpb_column.boxed > .vc_column-inner :is(h1, h2, h3, h4, h5, h6, p, li):not(.using-img *),
body.ebs-dark :is(#ebs-selector, #ebs-selector-modal) :is(h1, h2, h3, h4, h5, h6, p, li) {
  color: var(--edt-text) !important;
}
body.ebs-dark :is(#ebs-selector, #ebs-selector-modal) button {
  color: var(--edt-text) !important;
  border-color: var(--edt-border) !important;
}
body.ebs-dark :is(#ebs-selector, #ebs-selector-modal) button.language:not(.selected) {
  background-color: var(--edt-border) !important;
}
/* School grid: no borders, like prod (where they are white on white) */
body.ebs-dark :is(#ebs-selector, #ebs-selector-modal) .schools button {
  border-color: transparent !important;
}
/* Schools not offered in the chosen language */
body.ebs-dark :is(#ebs-selector, #ebs-selector-modal) button.school[disabled] {
  color: var(--edt-text-muted) !important;
}
/* Mobile language dropdown: 1px light border so it reads as a field */
body.ebs-dark :is(#ebs-selector, #ebs-selector-modal) select,
body.ebs-dark :is(#ebs-selector, #ebs-selector-modal) select option {
  background-color: var(--edt-surface) !important;
  color: var(--edt-text) !important;
  border-color: var(--edt-border) !important;
}
body.ebs-dark :is(#ebs-selector, #ebs-selector-modal) select {
  border: 1px solid var(--edt-text) !important;
}

/* 6. Icon lists with a fixed content colour (e.g. content_color_474747) */
body.ebs-dark .nectar-icon-list-item .content,
body.ebs-dark .nectar-icon-list-item .content :is(h1, h2, h3, h4, h5, h6, p) {
  color: var(--edt-text) !important;
}

/* 7. Badges / pills: navy (extra colour 2 or custom #063456) and light grey custom badges */
body.ebs-dark .nectar-badge__inner.nectar-bg-extra-color-2,
body.ebs-dark .nectar-badge:is([data-bg-color-custom="#063456" i], [data-bg-color-custom="#eeeeee" i], [data-bg-color-custom="#eee" i], [data-bg-color-custom="#f7f7f7" i], [data-bg-color-custom="#ffffff" i], [data-bg-color-custom="#fff" i]) .nectar-badge__inner {
  background: var(--edt-badge-bg) !important;
  color: var(--edt-text) !important;
}

/* 7b. Navy icons (Salient "extra colour 2"): icon lists, icon boxes, check marks, toggle circles */
body.ebs-dark .im-icon-wrap[data-color="extra-color-2"] path {
  fill: var(--edt-icon) !important;
}
body.ebs-dark .nectar_icon_wrap .svg-icon-holder[data-color="extra-color-2"] svg path {
  stroke: var(--edt-icon) !important;
}
body.ebs-dark :is(i.extra-color-2, .icon-default-style.extra-color-2, .nectar-color-extra-color-2):not(.toggle *) {
  color: var(--edt-icon) !important;
}

/* 7c. Toggle ⊕ icons: one colour for every toggle (default and navy variants), all parts alike.
       Muted normally, light on hover / when open. */
body.ebs-dark .toggle {
  --nectar-toggle-color: var(--edt-text-muted);
}
body.ebs-dark .toggle:is(:hover, .open) {
  --nectar-toggle-color: var(--edt-text);
}
html body.ebs-dark .toggle .nectar-toggle-icon {
  color: var(--edt-text-muted) !important;
}
html body.ebs-dark .toggle:is(:hover, .open) .nectar-toggle-icon {
  color: var(--edt-text) !important;
}
html body.ebs-dark .toggle > .toggle-title i {
  color: var(--edt-text-muted) !important;
  border-color: var(--edt-text-muted) !important;
}
html body.ebs-dark .toggle > .toggle-title i::before,
html body.ebs-dark .toggle > .toggle-title i::after {
  background-color: var(--edt-text-muted) !important;
}
html body.ebs-dark .toggle:is(:hover, .open) > .toggle-title i {
  color: var(--edt-text) !important;
  border-color: var(--edt-text) !important;
}
html body.ebs-dark .toggle:is(:hover, .open) > .toggle-title i::before,
html body.ebs-dark .toggle:is(:hover, .open) > .toggle-title i::after {
  background-color: var(--edt-text) !important;
}

/* 7d. Navy card borders (e.g. "Barman Creativo") and the YouTube shorts cards → badge colour */
body.ebs-dark #ajax-content-wrap [style*="solid #063456" i],
body.ebs-dark .ysc-root .carousel-cell {
  border-color: var(--edt-badge-bg) !important;
}

/* 8. Gravity Forms labels and consent text */
body.ebs-dark .gform_wrapper .gfield_label,
body.ebs-dark .gform_wrapper .gform-field-label,
body.ebs-dark .gform_wrapper .gfield_consent_label,
body.ebs-dark .gform_wrapper .gfield_description,
body.ebs-dark .gform_wrapper .gfield_consent_label a {
  color: var(--edt-text) !important;
}
/* 8b. Popup Maker pop-ups (white panel on a navy overlay): dark panel, black overlay, light text.
       Form fields keep their light background. */
html body.ebs-dark .pum-overlay {
  background-color: color-mix(in srgb, var(--edt-bg) 85%, transparent) !important;
}
html body.ebs-dark .pum-container {
  --nectar-page-text-color: var(--edt-text);
  background-color: var(--edt-surface) !important;
  color: var(--edt-text);
  border: 2px solid var(--edt-text) !important;
}
body.ebs-dark .pum-container :is(h1, h2, h3, h4, h5, h6, p, li, legend),
body.ebs-dark .pum-container .gform_wrapper .gform_title,
html body.ebs-dark .pum-container .pum-close {
  color: var(--edt-text) !important;
}
/* 8c. Phone prefix (intl-tel-input): the selected dial code sits in the white input, and the
       dropdown list is white too, also inside dark columns.
       The doubled class and :not(#edt-none) outrank the generated column text rules. */
html body.ebs-dark .iti .iti__selected-dial-code,
html body.ebs-dark .iti__dropdown-content :is(.iti__search-input, .iti__country-list),
html body.ebs-dark .iti__country-list .iti__country.iti__country:not(#edt-none),
html body.ebs-dark .iti__country-list .iti__country.iti__country:not(#edt-none) .iti__country-name {
  color: var(--edt-text-on-light) !important;
}

/* 8d. Links in text blocks (paragraphs and lists) and "icon with text" elements (e.g. the phone
       number on /contact): underlined, light. Buttons, links with their own colour, course cards
       (their links are styled buttons / coloured links), Instagram embeds (white box), pop-ups and
       rows that keep their original colours are left alone. */
body.ebs-dark :is(.wpb_text_column :is(p, li), .iwithtext .iwt-text) a:not(.nectar-button, [class*="button"], [style*="color" i]):not(.ebs-dark-keep *, #course-guide-footer *, .pum-container *, .course-list-module *, .instagram-media *) {
  color: var(--edt-link) !important;
  text-decoration: underline !important;
}

/* 8e. Course cards (destination pages and /courses, small and large layouts): border like the IBC
       card's 4px one. Cards with their own border (the yellow IBC card) keep it. */
body.ebs-dark .course-list-module .wpb_column[data-has-bg-color="true"]:not([data-border-width]) > .vc_column-inner {
  border: 4px solid var(--edt-course-border) !important;
  border-radius: var(--nectar-radius, 10px);
}
/* Course cards with their own white border (e.g. /it/corsi): keep its width, in the card border
   colour. The #ajax-content-wrap ID outranks rule 11, which removes white borders. */
body.ebs-dark #ajax-content-wrap .course-list-module .wpb_column:is([data-border-color="#ffffff" i], [data-border-color="#fff" i]) > .vc_column-inner {
  border-color: var(--edt-course-border) !important;
}
body.ebs-dark #ajax-content-wrap .course-list-module .wpb_column:is([data-border-color="#ffffff" i], [data-border-color="#fff" i])[data-border-width="2px"] > .vc_column-inner {
  border-width: 2px !important;
}
/* "Altri corsi" cards in the newer market design (e.g. /it/scuole-barman/londra, /it/corsi):
   2px, like that design's IBC card ("Barman Internazionale"). */
body.ebs-dark #ajax-content-wrap .other-courses .other-course > .vc_column-inner {
  border: 2px solid var(--edt-course-border) !important;
  border-radius: var(--nectar-radius, 10px);
}

/* 9. Content tables (e.g. Booking Terms) */
body.ebs-dark .main-content table,
body.ebs-dark .main-content table :is(thead, tbody, tr, th, td) {
  background-color: transparent !important;
  border-color: var(--edt-border) !important;
}
body.ebs-dark .main-content table th,
body.ebs-dark .main-content table thead td {
  background-color: var(--edt-surface) !important;
}

/* 10. Trustindex. It injects .ti-widget[data-layout-id][data-set-id][data-pid] … !important
       after this stylesheet, so the #ajax-content-wrap ID is needed to win. */
body.ebs-dark #ajax-content-wrap .ti-widget[data-layout-id][data-set-id][data-pid] .ti-review-item > .ti-inner {
  background-color: var(--edt-review-bubble) !important;
}

/* 12. Rows that keep their original (light) colours: WPBakery extra class "ebs-dark-keep",
       and the Course Guide strip. The generated swaps skip them; restore dark text here. */
body.ebs-dark :is(.ebs-dark-keep, #course-guide-footer) {
  --nectar-page-text-color: var(--edt-text-on-light);
  color: var(--edt-text-on-light);
}
body.ebs-dark :is(.ebs-dark-keep, #course-guide-footer) :is(h1, h2, h3, h4, h5, h6, p, li) {
  color: var(--edt-text-on-light) !important;
}

/* 11. White / light inline borders on cards and boxes (course cards, "Top Rated" box) → none.
       Coloured borders such as the yellow IBC card border are kept. */
body.ebs-dark #ajax-content-wrap [style*="solid #fff" i],
body.ebs-dark #ajax-content-wrap [style*="solid rgb(255, 255, 255)"],
body.ebs-dark #ajax-content-wrap [style*="solid #f7f7f7" i],
body.ebs-dark #ajax-content-wrap [style*="solid #f2f2f2" i],
body.ebs-dark #ajax-content-wrap [style*="solid #eee" i],
body.ebs-dark #ajax-content-wrap [style*="solid #e2e2e2" i],
body.ebs-dark #ajax-content-wrap [style*="solid #e5e5e5" i],
body.ebs-dark #ajax-content-wrap [style*="solid #ddd" i],
body.ebs-dark #ajax-content-wrap [style*="solid #d0d0d0" i],
body.ebs-dark #ajax-content-wrap [style*="solid #ccc" i],
body.ebs-dark #ajax-content-wrap [style*="solid #cdcdcd" i] {
  border-width: 0 !important;
}
/* "+80k" bubble next to the student avatars (navy) */
body.ebs-dark .nectar-circle-images--text {
  background-color: var(--edt-surface) !important;
}
/* Badge / pill outlines (white by default) */
body.ebs-dark .nectar-badge__inner {
  border-color: var(--edt-border) !important;
}
body.ebs-dark #ajax-content-wrap .ti-widget[data-layout-id][data-set-id][data-pid] :is(a, span, div, strong, p):not(.ti-stars *, .ti-star) {
  color: var(--edt-text) !important;
}
body.ebs-dark #ajax-content-wrap .ti-widget[data-layout-id][data-set-id][data-pid] .ti-widget-container .ti-date {
  color: var(--edt-text-muted) !important;
}

/* 13. Yoast breadcrumb bar (site-wide inline CSS): #f7f7f7 band painted with a 100vmax
       box-shadow, a light bottom line in ::after, navy links. */
body.ebs-dark #breadcrumbs.yoast {
  color: var(--edt-text-muted) !important;
  background: var(--edt-surface) !important;
  box-shadow: 0 0 0 100vmax var(--edt-surface) !important;
}
body.ebs-dark #breadcrumbs.yoast::after {
  background: var(--edt-border) !important;
}
body.ebs-dark #breadcrumbs.yoast a:not(:hover) {
  color: var(--edt-text) !important;
}
body.ebs-dark #breadcrumbs.yoast :is(.breadcrumb_last, .ebs-bc-sep) {
  color: var(--edt-text-muted) !important;
}

/* 14. Black Friday promo strips (.ebsbf-banner global sections under the header and above the
       footer menu) intentionally keep their original white row and #14202b text (business
       request, 2026-11-06); their own CSS forces both with !important. The row stops 20px short
       of the window edges, where the light site showed the white page, so paint the global
       section around it white as well (the banner's fixed original colour, not a palette one). */
body.ebs-dark .nectar-global-section:has(.vc_row.ebsbf-banner) {
  background-color: white !important;
}

/* 15. Black Friday landing pages: /black-friday (.ebsbf) and /barista-black-friday (.ebsc), same
       design, CSS in WPBakery custom CSS. The swap table turns their white cards (city cards
       .ebsbf-car / .ebsc-car, "Black Friday extra" .ebsbf-promo / .ebsc-promo) dark, but their text
       uses the page's dark-on-white variables. Point those at the palette and lift the cards
       to the surface colour so they stand out from the page. */
body.ebs-dark :is(.ebsbf, .ebsc) {
  --ink: var(--edt-text);
  --ink-muted: var(--edt-text-muted);
  --card-line: var(--edt-border);
}
body.ebs-dark #ajax-content-wrap :is(.ebsbf-car .vc_column-inner, .ebsbf-promo > .vc_column-inner, .ebsc-car .vc_column-inner, .ebsc-promo > .vc_column-inner) {
  background: var(--edt-surface) !important;
}
/* The promo card's 1px white border is invisible on white, bright on dark */
body.ebs-dark #ajax-content-wrap :is(.ebsbf-promo, .ebsc-promo) > .vc_column-inner {
  border-color: var(--edt-border) !important;
}