/* Additions needed only because the site is now plain HTML (no WordPress/Elementor scripts). */

/* Real map in place of the placeholder card (contact page) */
.ccits-map-placeholder.has-map {
  display: block;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  min-height: 340px;
  border-style: solid;
  position: relative;
}
.ccits-map-placeholder.has-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ccits-map-link {
  display: block;
  margin-top: 14px;
  text-align: center;
  color: var(--ccits-gold, #f2da66);
  font-weight: 600;
  text-decoration: none;
}
.ccits-map-link:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .ccits-map-placeholder.has-map { aspect-ratio: 4 / 3; }
}

/* Elementor's ".elementor img { height: auto }" loads later and wins: make framed images fill their frame again */
.elementor .ccits-art-frame img { height: 100%; }

/* Two light sections in a row (e.g. Who We Work With): one gap between them, not two */
.ccits-section--light:has(+ .ccits-section--light) { padding-bottom: 40px; }
.ccits-section--light + .ccits-section--light { padding-top: 40px; }

/* Form status message */
.ccits-form-note { margin: 12px 0 0; font-size: 14px; opacity: .85; }

/* reset.css (theme) loads after the site styles and wins on equal specificity: restore the form's own look */
.ccits-form .ccits-form__submit {
  background: var(--ccits-gold, #f2da66);
  border: none;
  border-radius: 999px;
  color: rgb(20, 20, 10);
  padding: 15px 32px;
  font-size: 15px;
  font-weight: 600;
}
.ccits-form .ccits-form__submit:hover,
.ccits-form .ccits-form__submit:focus-visible {
  background: var(--ccits-gold, #f2da66);
  color: rgb(20, 20, 10);
  transform: translateY(-2px);
  box-shadow: rgba(242, 218, 102, 0.35) 0 10px 30px;
}
.ccits-form input,
.ccits-form textarea {
  border: 1px solid rgba(32, 60, 186, 0.2);
  border-radius: 10px;
}
.ccits-form input:focus,
.ccits-form textarea:focus {
  outline: none;
  border-color: var(--ccits-blue, #203cba);
  box-shadow: rgba(32, 60, 186, 0.12) 0 0 0 3px;
}

/* Submit stays locked until the colors captcha is solved */
.ccits-form .ccits-form__submit:disabled {
  background: var(--ccits-gold, #f2da66);
  border: none;
  color: rgb(20, 20, 10);
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* Legal pages (privacy, terms, cookies) */
.ccits-page-hero--legal { padding-bottom: 70px; }
.ccits-page-hero--legal .ccits-lead { margin-bottom: 0; }
/* clip instead of hidden so the sticky table of contents follows the viewport */
.ccits-section.ccits-legal-section { overflow: clip; }
.ccits-legal {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.ccits-legal__toc {
  position: sticky;
  top: 110px;
  padding: 24px;
  border: 1px solid rgba(32, 60, 186, 0.14);
  border-radius: 20px;
  background: rgba(244, 244, 249, 0.85);
  backdrop-filter: blur(6px);
}
.ccits-legal__toc .ccits-eyebrow { margin-bottom: 14px; }
.ccits-legal__toc ol { list-style: none; margin: 0; padding: 0; }
.ccits-legal__toc li + li { margin-top: 10px; }
.ccits-legal__toc a {
  color: var(--ccits-muted, #6b6b76);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.2s;
}
.ccits-legal__toc a:hover { color: var(--ccits-blue, #203cba); }
.ccits-legal__body { max-width: 760px; }
.ccits-legal__body .ccits-legal__intro {
  font-size: 19px;
  line-height: 1.65;
  color: var(--ccits-ink, #14141a);
  margin: 0 0 40px;
  padding-left: 20px;
  border-left: 3px solid var(--ccits-gold, #f2da66);
}
.ccits-legal__section {
  padding-top: 32px;
  margin-top: 32px;
  border-top: 1px solid rgba(32, 60, 186, 0.12);
  scroll-margin-top: 110px;
}
.ccits-legal__heading {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.25;
  color: var(--ccits-ink, #14141a);
  margin: 0 0 16px;
}
.ccits-legal__body p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ccits-muted, #6b6b76);
  margin: 0 0 14px;
}
.ccits-legal__body a {
  color: var(--ccits-blue, #203cba);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}
@media (max-width: 960px) {
  .ccits-legal { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ccits-legal__toc { position: static; }
}
@media (max-width: 600px) {
  .ccits-legal__body .ccits-legal__intro { font-size: 17px; padding-left: 16px; }
  .ccits-legal__toc { padding: 20px; }
}

/* Legal links in the footer bottom bar, on the copyright row */
.ccits-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ccits-footer-legal a {
  font-family: Figtree, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}
.ccits-footer-legal a:hover { color: var(--ccits-gold, #f2da66); }
@media (max-width: 767px) {
  .ccits-footer-legal { justify-content: center; width: 100%; }
  .ccits-footer-legal a { font-size: 12px; }
}

/* Footer menu mirrors the header menu: keep the 8 links on one row and mark the current page in gold, like the header */
@media (min-width: 1025px) {
  .elementor-13 .elementor-element.elementor-element-48dec9f .elementor-nav-menu--main .elementor-item {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 16px;
  }
  .elementor-13 .elementor-element.elementor-element-48dec9f .elementor-nav-menu--main .elementor-nav-menu > li:last-child .elementor-item { padding-right: 0; }
}
.elementor-13 .elementor-element.elementor-element-48dec9f .elementor-nav-menu--main .elementor-item.elementor-item-active { color: var(--e-global-color-accent, #f2da66); }

/* Legal page hero video background (files live in videos/) */
.ccits-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ccits-hero__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.ccits-hero__video.is-playing video { opacity: 1; }
.ccits-hero__video::after {
  content: "";
  position: absolute;
  inset: 0;
  /* darker behind the text on the left, video shows through on the right, fades into the next section at the bottom */
  background:
    linear-gradient(180deg, rgba(10, 10, 12, 0.35) 0%, rgba(10, 10, 12, 0) 25%, rgba(10, 10, 12, 0) 70%, rgba(10, 10, 12, 0.9) 100%),
    linear-gradient(90deg, rgba(10, 10, 12, 0.72) 0%, rgba(10, 10, 12, 0.45) 50%, rgba(10, 10, 12, 0.12) 100%);
}
/* the video brings its own grid and shading: tone down the hero's grid and swap its overlay for the one above */
.ccits-hero__video.is-playing ~ .ccits-grid-bg { opacity: 0.35; }
.ccits-hero__video.is-playing ~ .ccits-page-hero__overlay { opacity: 0; }
.ccits-page-hero__overlay { transition: opacity 0.8s ease; }
@media (max-width: 767px) {
  .ccits-hero__video::after {
    background: linear-gradient(180deg, rgba(10, 10, 12, 0.6) 0%, rgba(10, 10, 12, 0.65) 70%, rgba(10, 10, 12, 0.92) 100%);
  }
}

/* Readabler accessibility widget in the site colours (html:root outranks readabler.min.css, which loads later) */
html:root {
  --readabler-color: #203cba;
  --readabler-color-dark: #f2da66;
  --readabler-color-transparent: rgba(32, 60, 186, 0.12);
  --readabler-color-transparent-dark: rgba(242, 218, 102, 0.18);
  --readabler-bg: #ffffff;
  --readabler-bg-dark: #111114;
  --readabler-text: #14141a;
  --readabler-text-dark: #ffffff;
  --readabler-overlay: rgba(10, 10, 12, 0.55);
  --readabler-border-radius: 24px;
  --readabler-btn-bg: #203cba;
  --readabler-btn-color: #ffffff;
  --readabler-btn-bg-hover: #f2da66;
  --readabler-btn-color-hover: #14140a;
  --readabler-btn-padding: 16px;
  --readabler-btn-margin: 20px;
  --readabler-highlight-titles-color: #203cba;
  --readabler-highlight-links-color: #203cba;
  --readabler-highlight-hover-color: #203cba;
  --readabler-highlight-focus-color: #203cba;
  --readabler-tts-bg: #203cba;
}
/* readabler-vechi/css/readabler.min.css ends with the old site's tweak that lifted the button 175px; keep it in the corner here */
body .mdp-readabler-trigger-button-box {
  padding-bottom: 0;
  padding-right: 0;
  /* js/accessibility.js sets the lift so the button rides above the footer */
  translate: 0 calc(-1 * var(--ccits-a11y-lift, 0px));
}
/* Readabler's colour modes (Epilepsy, Low/High Saturation, High Contrast, Monochrome) put a filter on every direct child
   of <body>. A filter makes its own stacking layer, so the hero (which slides up under the header) was painted over the
   header, and the fixed cookie popup lost its place on screen. Give the header its own layer and pin the cookie box. */
body > header.elementor-location-header { position: relative; z-index: 100; }
.cookie-popup-container { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999999; }

/* cursors the old Readabler CSS lacks (the newer release added them) */
#mdp-readabler-popup-box { cursor: auto; }
#mdp-readabler-overlay { cursor: default; }
#mdp-readabler-popup-box button, #mdp-readabler-popup-close { cursor: pointer; }
#mdp-readabler-popup, #mdp-readabler-popup button, #mdp-readabler-popup input { font-family: Figtree, sans-serif; }
#mdp-readabler-popup h3, #mdp-readabler-popup h4 { font-family: "Space Grotesk", sans-serif; }
.mdp-readabler-trigger-button-box button { box-shadow: 0 10px 30px rgba(32, 60, 186, 0.35); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ccits-hero__video video { display: none; }
}