/**
 * CTG site skin overlay — BUG-129 workaround.
 *
 * BPS Lite defines the .light/.dark token variables but ships no rule that
 * paints .section.{light,dark} backgrounds from var(--bg), and its
 * .section-opener.dark is a hardcoded gradient. Base BPS painted these via the
 * `colors` mixin. This file restores that paint so the migrated cogstogears
 * pages keep their green/white section backgrounds. The palette itself comes
 * from bps_lite_settings['token_overrides'] (the greens/gold), not from here.
 *
 * When BUG-129 is fixed in Lite core, this file can be deleted.
 */

/* --- Section background paint (the missing base-BPS rule) --- */
.section.light,
.section.light2,
.e-con.light,
.e-con.light2 {
  background: var(--bg);
  color: var(--text-color);
}

.section.dark,
.section.dark2,
.e-con.dark,
.e-con.dark2 {
  background: var(--bg);
  color: var(--text-color);
}

/* Opener/closer: override Lite's hardcoded gradient literals with the token bg.
   A section may still set its own background_color inline (e.g. the gold CTA) —
   that inline style wins over these class rules, which is intended. */
.section-opener.light,
.section-opener.dark {
  background: var(--bg);
}
.section-opener.dark {
  color: var(--text-color);
}

/* The Lite skin forces openers to min-height:80vh + centered, which leaves a
   big empty gap below short heroes and centres the subtitle while headings stay
   left (mismatched). The original CTG (base-BPS) heroes were left-aligned and
   sized to content. Restore that here. */
.section-opener {
  min-height: 0;
  text-align: left;
  align-items: flex-start;
  justify-content: flex-start;
}
.section-opener .hero-subtitle,
.section-opener p {
  margin-left: 0;
  margin-right: 0;
  max-width: 760px;
  text-align: left;
}
.section-closer {
  background: var(--bg);
  color: var(--text-color);
  text-align: inherit;
}
/* Gold CTA closer: brand band, dark-green text/headings */
.section-closer.ctg-cta-gold {
  background: #E4C76C;
  color: #1b4332;
}
.section-closer.ctg-cta-gold h1,
.section-closer.ctg-cta-gold h2,
.section-closer.ctg-cta-gold h3 {
  color: #1b4332;
}

/* Heading colour inside dark sections must follow the dark text token */
.section.dark h1, .section.dark h2, .section.dark h3,
.section.dark h4, .section.dark h5, .section.dark h6,
.section.dark .hero-title,
.section-opener.dark h1, .section-opener.dark h2, .section-opener.dark h3,
.section-opener.dark .hero-title {
  color: var(--text-highlight, var(--text-color));
}

/* --- Brand font: Outfit everywhere the skin uses --font-heading/--font-body --- */
:root {
  --font-heading: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- Body-font standardisation (readability floor) ---
   The migrated stock-Elementor pages carry tiny hardcoded per-widget font
   sizes (12–15px body, 11px eyebrow labels) baked in from the original
   cogstogears design. Rather than rewrite every widget's _elementor_data, we
   set a consistent readable floor here. Targets the two body text widgets in
   use — standard Elementor text-editor AND Premium Add-ons "Advanced Text"
   (.elementor-widget-text) — and bumps the .prehead eyebrow labels from 11px
   to a legible 13px. Headings / hero titles are NOT touched (different
   widgets), so the visual hierarchy is preserved. */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text,
.elementor-widget-text p {
  font-size: 17px;
  line-height: 1.6;
}

/* Eyebrow / kicker labels (gold small-caps) — lift 11px -> 13px, keep tracking.
   Elementor bakes a per-widget size into post-{id}.css at specificity (0,4,0)
   (.elementor-{page} .elementor-element-{id} .elementor-heading-title). The
   .prehead class is the only stable hook across all 5 eyebrows site-wide, so we
   use !important to win without chasing per-page element ids. */
.prehead .elementor-heading-title,
.elementor-widget-heading.prehead .elementor-heading-title {
  font-size: 13px !important;
}

/* --- Clickable cards (.js-card-link): pointer + lift on hover --- */
.js-card-link {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.js-card-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(27, 67, 50, 0.12);
  border-color: #c9a227 !important;
}

/* --- Brand the Elementor accordion (7 maturity domains) green/gold --- */
.elementor-accordion .elementor-accordion-item {
  border: 1px solid #e2e8e4;
  border-bottom: none;
}
.elementor-accordion .elementor-accordion-item:last-child {
  border-bottom: 1px solid #e2e8e4;
}
.elementor-accordion .elementor-tab-title {
  background: #ffffff;
  border: none;
  transition: background 0.2s ease;
}
.elementor-accordion .elementor-tab-title .elementor-accordion-title {
  color: #1b4332;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
}
.elementor-accordion .elementor-tab-title.elementor-active {
  background: #f4f7f5;
}
.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title {
  color: #1b4332;
}
/* icon colour -> gold, not default blue */
.elementor-accordion .elementor-tab-title .elementor-accordion-icon,
.elementor-accordion .elementor-tab-title .elementor-accordion-icon i,
.elementor-accordion .elementor-tab-title .elementor-accordion-icon svg {
  color: #c9a227;
  fill: #c9a227;
}
.elementor-accordion .elementor-tab-content {
  background: #f4f7f5;
  border: none;
  color: #4a5568;
  font-family: "Outfit", sans-serif;
}

/* --- CF7 "Contact Us" form (#733) brand styling, inline on the contact page --- */
.wpcf7 {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}
.wpcf7 label {
  display: block;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  color: #1b4332;
  font-size: 15px;
  margin-bottom: 18px;
}
/* two-up rows for Name/Email and Phone/Company */
.wpcf7 .ctg-cf7-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
/* CF7's wpautop wraps each <label> in a <p>, so the flex child may be a <p>
   or the label directly — target both. */
.wpcf7 .ctg-cf7-row > label,
.wpcf7 .ctg-cf7-row > p {
  flex: 1 1 220px;
  margin-bottom: 0;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%;
  margin-top: 6px;
  padding: 0.7rem 0.9rem;
  border: 1px solid #cdd8d1;
  border-radius: 6px;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  color: #1b4332;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: #c9a227;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
}
.wpcf7 textarea { min-height: 150px; resize: vertical; }
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder { color: #9aa8a0; }
/* Gold brand submit button. The BPS Lite skin ships a high-specificity
   `.section.light2 input[type="submit"]` rule (with !important) that makes
   submits a transparent ghost button — so our brand override must MATCH that
   specificity by also scoping under .section.light/.light2, then win on
   source order + !important. */
.section.light .wpcf7 input[type="submit"],
.section.light2 .wpcf7 input[type="submit"],
.section .wpcf7 input.wpcf7-submit,
.wpcf7 input.wpcf7-submit {
  background: #c9a227 !important;
  background-color: #c9a227 !important;
  color: #1b4332 !important;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 16px;
  border: none !important;
  border-radius: 4px !important;
  padding: 0.7rem 2rem !important;
  cursor: pointer;
  transition: background 0.2s ease;
}
.section.light .wpcf7 input[type="submit"]:hover,
.section.light2 .wpcf7 input[type="submit"]:hover,
.section .wpcf7 input.wpcf7-submit:hover {
  background: #a8851f !important;
  background-color: #a8851f !important;
}
.wpcf7 input[type="submit"]:disabled { opacity: 0.6; cursor: default; }

/* --- Nav "Get Started" CTA: render the .ctg-nav-cta menu item as a gold pill button --- */
.ctg-nav-cta {
  display: flex !important;
  align-items: center;
}

.ctg-nav-cta > a,
li.ctg-nav-cta > a,
.elementor-nav-menu .ctg-nav-cta > a,
.hfe-nav-menu__layout-horizontal .ctg-nav-cta > a {
  background: #E4C76C !important;
  color: #1b4332 !important;
  font-weight: 600;
  border-radius: 4px;
  padding: 0.55rem 1.4rem !important;
  margin: 0 0 0 0.5rem;
  line-height: 1.2 !important;
  height: auto !important;
  align-self: center;
  transition: background 0.2s ease;
}

.ctg-nav-cta > a:hover,
li.ctg-nav-cta > a:hover {
  background: #d4b65a !important;
  color: #1b4332 !important;
}