/* ==========================================================================
   CUC brand layer for the CUC + SMWW contact pages (index.php, thankyou.php).
   The WordPress theme stylesheets load from the live SMWW server, so this file
   loads last in <head> and overrides them; the pages' own <style> blocks and
   inline styles use the same tokens.
   Contrast (WCAG 2.x): maroon/white 10.48, cool gray/white 7.56,
   gold/maroon 4.90, cool gray/warm gray 5.31, maroon/warm gray 7.37.
   Gold/white is 2.14, so gold is never text on white or behind white text.
   ========================================================================== */
:root {
  --cuc-maroon: #7b1632;    /* RGB 123, 22, 50 */
  --cuc-gold: #eaa416;      /* RGB 234, 164, 22 */
  --cuc-warm-gray: #e1d7c8; /* RGB 225, 215, 200 */
  --cuc-cool-gray: #545456; /* RGB 84, 84, 86 (approved 82% black) */
  --cuc-white: #ffffff;

  --cuc-font: "Barlow", Arial, sans-serif;

  /* Horizontal logo: 200px minimum digital width. Clear space equals the height
     of the cross in "CONCORDIA", measured from the artwork: cuc_new_logo.png
     23px at 200px wide; CUC_horizontal_white.png 19px at 398px (9.5px at 200px). */
  --cuc-logo-width: 200px;
  --cuc-logo-clear: 24px;
}

/* --- Typography: Barlow everywhere except icon fonts ---------------------- */
html body,
html body *:not(.fa):not([class^="icon-"]):not([class*=" icon-"]) {
  font-family: var(--cuc-font) !important;
}
body {
  font-weight: 400;
  color: var(--cuc-cool-gray);
  background-color: var(--cuc-white);
}
strong,
b,
h1, h2, h3, h4, h5, h6,
label,
.fsLabel,
button,
input[type="submit"],
input[type="button"],
.fsSubmitButton,
.gdlr-navigation,
.gdlr-main-menu a,
#gdlr-responsive-navigation a {
  font-weight: 700;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--cuc-maroon);
}

/* --- Links (theme: #a0a0a0, hover #e36d39) --------------------------------- */
a {
  color: var(--cuc-maroon);
}
a:hover,
a:focus {
  color: var(--cuc-maroon);
  text-decoration: underline;
}
#breadcrumbs,
#breadcrumbs .breadcrumb_last {
  color: var(--cuc-cool-gray);
}
#breadcrumbs,
#breadcrumbs * {
  font-weight: 700 !important; /* theme 600 is not a loaded Barlow weight */
}
body .gdlr-content p {
  color: var(--cuc-cool-gray); /* theme: #2c2c2c */
}

/* --- Header ---------------------------------------------------------------- */
body .body-wrapper .gdlr-header-inner {
  background-color: var(--cuc-maroon) !important;
  background-image: none !important;
}
body .gdlr-header-wrapper {
  background-color: var(--cuc-maroon); /* theme: #111 on phones */
}
body .gdlr-page-title-wrapper .gdlr-page-title-overlay {
  background-color: var(--cuc-cool-gray) !important;
}
.gdlr-page-title,
.gdlr-page-title * {
  font-weight: 700 !important; /* theme 600 is not a loaded Barlow weight */
}
body .wpcf7-form p {
  color: var(--cuc-cool-gray); /* theme: #2c2c2c */
}
/* "CALL" pill: white with maroon text; hover was #e6e6e6 */
body .gdlr-header-container.container .gdlr-navigation-wrapper #gdlr-main-navigation .gdlr-normal-menu:nth-last-of-type(-n+2):hover,
body .gdlr-header-container.container .gdlr-navigation-wrapper #gdlr-main-navigation .gdlr-normal-menu:nth-last-of-type(-n+2):focus-within {
  background: var(--cuc-warm-gray);
}
/* Desktop dropdowns (theme: #2e2e2e panels, #bebebe links): white on cool gray 7.56 */
body .gdlr-main-menu > .gdlr-normal-menu .sub-menu {
  border-top-color: var(--cuc-gold);
}
body .gdlr-main-menu > .gdlr-normal-menu li {
  background-color: var(--cuc-cool-gray);
}
body .gdlr-main-menu > li > .sub-menu a {
  color: var(--cuc-white);
}
body .gdlr-main-menu > li > .sub-menu * {
  border-color: var(--cuc-maroon);
}
body .gdlr-main-menu > li > .sub-menu a:hover,
body .gdlr-main-menu > li > .sub-menu a:focus,
body .gdlr-main-menu > li > .sub-menu .current-menu-item > a {
  background-color: var(--cuc-maroon);
  color: var(--cuc-white);
}
/* Keyboard users can open the dropdowns too (superfish only opens on hover) */
body .gdlr-main-menu > li:focus-within > .sub-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Mobile menu (theme: #cccccc / #727272 / #781829) */
body #gdlr-responsive-navigation.dl-menuwrapper button,
body .gdlr-header-container.container .gdlr-logo #gdlr-responsive-navigation .dl-trigger,
body #gdlr-responsive-navigation.dl-menuwrapper button:hover,
body #gdlr-responsive-navigation.dl-menuwrapper button.dl-active {
  background-color: var(--cuc-maroon);
  color: var(--cuc-white);
}
body #gdlr-responsive-navigation.dl-menuwrapper ul {
  background-color: var(--cuc-cool-gray);
}
body #gdlr-responsive-navigation.dl-menuwrapper li a {
  color: var(--cuc-white);
}
body #gdlr-responsive-navigation.dl-menuwrapper li a:hover,
body #gdlr-responsive-navigation.dl-menuwrapper li a:focus,
body #gdlr-responsive-navigation.dl-menuwrapper li.dl-back > a {
  background-color: var(--cuc-maroon);
}
body #gdlr-responsive-navigation.dl-menuwrapper li > a::after {
  color: var(--cuc-white);
}

/* --- Forms ------------------------------------------------------------------ */
.fsBody input:focus,
.fsBody select:focus,
.fsBody textarea:focus,
.fsRowBody input:focus {
  border-color: var(--cuc-maroon) !important;
  outline: 0;
  box-shadow: 0 0 0 2px var(--cuc-maroon) !important;
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--cuc-maroon);
  color: var(--cuc-cool-gray);
}
.fsBody ::placeholder {
  color: var(--cuc-cool-gray);
  opacity: 1;
}
.fsSubmitButton:hover,
.fsSubmitButton:focus,
.fsNextButton:hover,
.fsNextButton:focus {
  background-color: var(--cuc-maroon) !important;
  color: var(--cuc-white) !important;
}

/* intl-tel-input (SMWW widget) */
body .iti__selected-dial-code,
body .iti__dial-code,
body .iti__country-name,
body .iti__country {
  color: var(--cuc-cool-gray) !important;
}
body .iti__country-list {
  background-color: var(--cuc-white);
  border-color: var(--cuc-cool-gray);
}
body .iti__country.iti__highlight,
body .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
  background-color: var(--cuc-warm-gray);
}
body .iti__divider {
  border-bottom-color: var(--cuc-cool-gray);
}
body .iti__arrow {
  border-top-color: var(--cuc-cool-gray);
}
body .iti__arrow--up {
  border-bottom-color: var(--cuc-cool-gray);
}
body .iti__flag {
  background-color: var(--cuc-warm-gray);
}

/* --- Keyboard focus ------------------------------------------------------------
   Maroon ring with a white inner ring: visible on white, warm gray and gold
   (maroon 10.48 / 7.37 / 4.90) and on maroon or cool gray (white 10.48 / 7.56).
   Maroon and cool-gray surfaces switch the ring to gold (4.90 / 3.53). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--cuc-maroon);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--cuc-white);
}
.gdlr-header-wrapper a:focus-visible,
.gdlr-header-wrapper button:focus-visible,
.pro-start a:focus-visible,
.fsSubmitButton:focus-visible {
  outline-color: var(--cuc-gold);
}

/* --- CUC logo: native aspect ratio, 200px minimum width, clear space on every side */
.cuc-logo {
  display: inline-block;
  box-sizing: content-box;
  padding: var(--cuc-logo-clear);
  line-height: 0;
  vertical-align: top;
}
/* From 768px the theme's header is absolute (fixed once scrolled) and the empty
   .gdlr-page-title-wrapper is the spacer under it. The logo's clear space now
   separates it from the header edges, so the header drops its 15px padding and
   the spacer matches the header: stacked logo 83 + 2 x 24 = 131px. */
@media only screen and (min-width: 768px) {
  body .gdlr-header-container.container,
  body .gdlr-header-container.container .gdlr-logo {
    padding-top: 0;
    padding-bottom: 0;
  }
  body .gdlr-page-title-wrapper {
    height: 131px;
  }
  /* thankyou.php, one-line logo at 300px: 52 + 2 x 15 = 82px */
  body:has(.cuc-logo--wide) .gdlr-page-title-wrapper {
    height: 82px;
  }
}
/* Desktop row: the logo column fits the logo (theme: 30%, narrower than logo + clear space) */
@media only screen and (min-width: 966px) {
  body .gdlr-header-container.container .gdlr-logo {
    width: auto;
    flex: 0 0 auto;
  }
  /* thankyou.php: the row also holds the 103px SMWW logo; the 398px logo box is 109px */
  body:has(.cuc-logo--wide) .gdlr-page-title-wrapper {
    height: 110px;
  }
}
.cuc-logo img {
  display: block;
  width: var(--cuc-logo-width) !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  float: none !important;
}
/* One-line lockup (CUC_horizontal_white.png, 398x69): clear space scales with
   its cross (19px at 398px, 9.5px at 200px), rounded up */
.cuc-logo--wide {
  --cuc-logo-width: 398px;
  --cuc-logo-clear: 20px;
}
@media (max-width: 1199px) {
  .cuc-logo--wide {
    --cuc-logo-width: 300px;
    --cuc-logo-clear: 15px; /* cross 14.3px at 300px */
  }
}
@media (max-width: 559px) {
  .cuc-logo--wide {
    --cuc-logo-width: 200px;
    --cuc-logo-clear: 10px;
  }
}
