/* ==========================================================================
   FFC Static — Brand CSS (Tailwind Edition)
   Font: Effra (Adobe Fonts / Typekit: mko8paa)
   Primary: #38998F | Dark: #0d7a75 | Accent: #f88379
   
   NOTE: Layout is handled entirely by Tailwind classes in templates.
   This file provides: variables, reset, typography, header/nav, footer,
   buttons, modals, forms, overlay system, and responsive breakpoints.
   ========================================================================== */

/* ==========================================================================
   CSS CUSTOM PROPERTIES
   Brand tokens consumed by both Tailwind templates and legacy components.
   ========================================================================== */
:root {
  /* Brand Colors */
  --brand-teal: #38998F;
  --brand-teal-dark: #0d7a75;
  --brand-teal-light: #1CABA4;
  --brand-gray-dark: #474747;
  --brand-gray-text: #918D8D;
  --brand-off-white: #F4FAF9;
  --brand-white: #FFFFFF;
  --brand-slate: #333333;
  --brand-coral: #f88379;
  --color-navy: #16163F;

  /* Layout */
  --container-max-width: 1440px;
  --content-width: 1300px;

  /* Elementor kit-7 color palette (source of truth — don't guess, discover) */
  --e-global-color-primary: #38998F;
  --e-global-color-secondary: #474747;
  --e-global-color-text: #918D8D;
  --e-global-color-accent: #F4FAF9;
  --e-global-color-51c5e2b: #FFFFFF;
  --e-global-color-f2c7a5e: #000000;
  --e-global-color-694b746: #1C454A;
  --e-global-color-0bf0cd6: #65A79E;
  --e-global-color-450b8c4: #534641;
  --e-global-color-619a645: #F88379;
  --e-global-color-62c9608: #A4CAC7;
  --e-global-color-b9fb697: #BF816A;

  /* Page title (hidden on custom pages) */
  --page-title-display: none;

  /* Card system */
  --card-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  --card-radius: 5px;
}

/* ---------- Heading Styles (from .elementor-kit-7 source — !important to survive Tailwind CDN preflight) ---------- */
h2 {
  font-size: 2.8em !important;
  font-weight: 500 !important;
  line-height: 1.3em;
  color: var(--e-global-color-primary);
}

.subheading {
  font-size: 1.8em !important;
  font-weight: 500 !important;
  line-height: 1.3em;
  color: var(--e-global-color-primary);
}

h3 {
  font-size: 1.4em !important;
  font-weight: 500 !important;
  line-height: 1.3em;
  color: var(--e-global-color-primary);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: 'effra', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--e-global-color-text) !important; /* #918D8D — from .elementor-kit-7 source */
  background: #fff;
}

img { max-width: 100%; height: auto; display: block; }

section {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
a { color: #0d7a75; text-decoration: none; transition: color 0.2s; }
a:hover { color: #38998F; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'effra', sans-serif;
  line-height: 1.25;
  margin-bottom: 0.5em;
}
/* Individual heading sizes defined in "Heading Styles" block above (source-accurate) */

p { margin-bottom: 1em; font-size: 1rem; line-height: 1.7; }

/* ---------- Skip Link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  top: 0; left: 0;
  width: auto; height: auto;
  padding: 0.5rem 1rem;
  background: #0d7a75;
  color: #fff;
  z-index: 9999;
}

/* ==========================================================================
   BACKGROUND OVERLAY SYSTEM
   Used by sections with background-image + teal tint.
   Tailwind templates add the class; this CSS provides the pseudo-element.
   ========================================================================== */
.bg-overlay {
  position: relative;
}

.bg-overlay::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--brand-teal);
  opacity: var(--overlay-opacity, 0.85);
  pointer-events: none;
  z-index: 0;
}

.bg-overlay > * {
  position: relative;
  z-index: 1;
}

/* Legacy Elementor overlay compat (for any remnant pages) */
.e-con::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: var(--overlay-opacity, 0);
  pointer-events: none;
  z-index: 0;
}

.e-con[style*="background-image"] > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   HEADER / NAV — matched to live FFC site
   ========================================================================== */
.ffc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.ffc-header__inner {
  max-width: min(100%, var(--container-max-width, 1440px));
  margin: 0 auto;
  padding: 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.ffc-header__logo { flex-shrink: 0; }
.ffc-header__logo img { width: 200px; height: auto; }

/* Desktop nav */
.ffc-nav { flex: 1; display: flex; justify-content: center; }

.ffc-nav__list {
  display: flex;
  list-style: none;
  gap: 0;
  align-items: center;
}

.ffc-nav__item > a {
  display: block;
  padding: 0.625rem 12px;
  color: #1CABA4;
  font-size: 1.3em;
  font-weight: 400;
  text-transform: uppercase;
  transition: color 0.2s;
}

.ffc-nav__item > a:hover,
.ffc-nav__item > a:focus { color: #0d7a75; }

/* Active page indicator — set by JS */
.ffc-nav__item > a.is-active {
  color: #0d7a75;
  border-bottom: 2px solid #38998F;
  padding-bottom: calc(0.625rem - 2px);
}

/* Dropdown arrow */
.ffc-nav__item--has-sub > a::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  margin-left: 5px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  vertical-align: middle;
}

/* Dropdown menu */
.ffc-nav__item--has-sub { position: relative; }

.ffc-nav__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  border-radius: 4px;
  min-width: 220px;
  padding: 0.375rem 0;
  list-style: none;
  z-index: 200;
}

.ffc-nav__item--has-sub.is-open > .ffc-nav__sub { display: block; }

.ffc-nav__sub li a {
  display: block;
  padding: 0.5rem 1rem;
  color: #555;
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.ffc-nav__sub li a:hover { background: #f5f5f5; color: #0d7a75; }

/* CTA button */
.ffc-header__cta {
  flex-shrink: 0;
  background: #38998F;
  color: #fff;
  padding: 0.5rem 1.25rem;
  border-radius: 120px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.2s;
  white-space: nowrap;
}

.ffc-header__cta:hover { background: #0d7a75; color: #fff; }

/* Hamburger — hidden on desktop, pushed to far right on mobile */
.ffc-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: auto;
}

.ffc-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #333;
  border-radius: 2px;
}

/* Mobile nav — full-screen overlay */
.ffc-mobile-nav {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  background: #fff;
  z-index: 300;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.ffc-mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ffc-mobile-nav__inner {
  padding: 1.5rem;
  max-width: 480px;
  margin: 0 auto;
}

.ffc-mobile-nav__close {
  display: block;
  margin-left: auto;
  margin-bottom: 1rem;
  background: none; border: none;
  font-size: 1.75rem; cursor: pointer;
  color: #333; line-height: 1;
}

.ffc-mobile-nav__list { list-style: none; margin-top: 1rem; }

.ffc-mobile-nav__list li a {
  display: block;
  padding: 0.75rem 0;
  color: #333;
  font-size: 1.0625rem;
}

.ffc-mobile-nav__list li a:hover { color: #0d7a75; }

.ffc-mobile-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

.ffc-mobile-nav__toggle {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.ffc-mobile-nav__item.is-open .ffc-mobile-nav__toggle {
  transform: rotate(45deg);
}

.ffc-icon--plus::before {
  content: '+';
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
}

.ffc-mobile-nav__sub {
  list-style: none;
  padding-left: 1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.ffc-mobile-nav__item.is-open .ffc-mobile-nav__sub {
  max-height: 500px;
}

.ffc-mobile-nav__sub li a {
  font-size: 0.9375rem;
  padding: 0.5rem 0;
  border-bottom: none;
}

.ffc-mobile-nav__cta {
  display: block;
  margin-top: 1.5rem;
  text-align: center;
  background: #38998F;
  color: #fff;
  padding: 0.75rem;
  border-radius: 3px;
  font-weight: 600;
}

.ffc-mobile-backdrop { display: none !important; }

/* ==========================================================================
   CONTENT AREA
   ========================================================================== */
.ffc-content {
  width: 100%;
}

/* .section-inner — padding removed; base section element now provides 2rem vertical spacing */

/* ---------- Image Sizing ---------- */
/* Production-matched sizes for homepage icon/badge/portrait images */
.img-icon-feature {
  width: 205px;
  height: 205px;
  object-fit: contain;
}
.img-badge-cert {
  width: 205px;
  height: auto;
  object-fit: contain;
}
.img-portrait {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.img-portrait:hover {
  transform: scale(1.05);
}

/* Small inline icon — blog cards, event cards, resource cards, anywhere */
.img-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* Hero banner image constraint */
.img-hero-strip {
  max-height: 500px;
}

/* ---------- Card Base ---------- */
/* Production-matched card elevation — use this as the base for all card types.
   Pages add layout/type-specific styles on top (grad-card, resource-card, etc.) */
.ffc-card {
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

/* ---------- Buttons ---------- */
/* .btn = base shared by all variants (from production Elementor .elementor-button)
   Named by visible resting color. -alt suffix for alternate hover. */

.btn {
  display: inline-block;
  font-family: "Effra", sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 28px;
  border: 2px solid transparent;
  border-radius: 120px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* btn-salmon — solid coral, default hover teal */
.btn-salmon {
  background-color: var(--brand-coral);
  color: #fff;
  border-color: var(--brand-coral);
}
.btn-salmon:hover {
  background-color: var(--brand-teal);
  border-color: var(--brand-teal);
  color: #fff;
}
.btn-salmon-alt:hover {
  background-color: var(--brand-coral);
  border-color: var(--brand-coral);
}

/* btn-white — transparent bg, teal border, default hover fills teal */
.btn-white {
  background: transparent;
  border-color: var(--brand-teal);
  color: var(--brand-teal);
}
.btn-white:hover {
  background-color: var(--brand-teal);
  border-color: var(--brand-teal);
  color: #fff;
}
.btn-white-alt:hover {
  background-color: var(--brand-coral);
  border-color: var(--brand-coral);
  color: #fff;
}

/* btn-teal — solid teal + teal border, default hover fills salmon */
.btn-teal {
  background-color: var(--brand-teal);
  border-color: var(--brand-teal);
  color: #fff;
}
.btn-teal:hover {
  background-color: var(--brand-coral);
  border-color: var(--brand-coral);
  color: #fff;
}

/* btn-teal-alt — teal bg + white border, hover → white bg + black text */
.btn-teal-alt {
  background-color: var(--brand-teal);
  border-color: #fff;
  color: #fff;
}
.btn-teal-alt:hover {
  background-color: #fff;
  border-color: #fff;
  color: #000;
}

/* ---------- Background Utilities ---------- */
.bg-brand-off-white {
  background-color: var(--brand-off-white);
}

/* ---------- Dividers ---------- */
.divider-teal {
  border: none;
  border-top: 1px solid var(--brand-teal);
  margin: 0 auto;
  width: 40%;
}

/* ---------- Partner Logo Sizing ---------- */
.img-logo-partner {
  width: 100%;
  height: auto;
  max-height: 64px;
  object-fit: contain;
}

/* ---------- Testimonial Widget Containment ---------- */
/* The external testimonials widget (api.diveintoacoachapproach.com)
   uses a full-width bleed trick with hardcoded px widths + negative margins.
   Let the widget do its thing but clip overflow at html level. */
html {
  overflow-x: clip;
}
.ffc-t-carousel-wrap {
  overflow: hidden;
}

/* ---------- Teal Band ---------- */
/* Full-bleed teal CTA sections at the bottom of pages.
   Two variants: standard (48px) and compact (16px). */
.teal-band {
  background: var(--brand-teal);
  color: #fff;
  padding: 48px 24px;
}

.teal-band--compact {
  padding: 16px 24px;
}

.teal-band h2 {
  color: #fff;
}

/* Remove footer gap when a teal-band sits directly above it */
.teal-band + .ffc-footer,
.teal-band + div > .ffc-footer,
.teal-band ~ #ffc-footer-mount .ffc-footer {
  margin-top: 0;
}

/* ---------- Blog Container ---------- */
/* Single source of truth for blog article content width.
   Production uses ~33% of viewport width. Change here to fix all blogs. */
.blog-container {
  width: 59%;
  min-width: 320px;
  max-width: 100%;
  margin: 60px auto 40px;
  padding: 0 4%;
}

@media (max-width: 1024px) {
  .blog-container {
    width: 90%;
  }
}

/* ---------- Blog Typography Overrides ---------- */
.blog-content h3, 
.blog-content h4 {
  color: var(--e-global-color-secondary) !important; 
}

.blog-content ul {
  list-style-type: disc;
  list-style-position: inside;
  margin-bottom: 1.5rem;
}

.blog-content ol {
  list-style-type: decimal;
  list-style-position: inside;
  margin-bottom: 1.5rem;
}

.blog-content ul li,
.blog-content ol li {
  margin-bottom: 0.5rem;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */
.ffc-footer {
  background: var(--brand-gray-dark);
  color: #c5d6d3;
  padding: 3rem 1.5rem 0;
  margin-top: 0;
  border-top: 2px solid var(--brand-teal);
}

.ffc-footer__inner {
  max-width: min(100%, var(--container-max-width, 1440px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
}

.ffc-footer__brand img { height: 45px; width: auto; margin-bottom: 0.75rem; }
.ffc-footer__brand p { font-size: 0.8125rem; line-height: 1.6; }

.ffc-footer h4 {
  color: #38998F;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}

/* Footer headings — Playfair Display for "We're Making Waves" / "Join the Wave" */
.ffc-footer h2 {
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  font-weight: 500;
  color: var(--brand-teal-light);
  margin: 0 0 1rem 0;
  line-height: 1.2;
}

/* Footer text */
.ffc-footer p {
  font-size: 17.6px;
  line-height: 26.4px;
  color: #FFFFFF;
  margin: 0 0 1rem 0;
}

/* Footer links */
.ffc-footer a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.2s;
}
.ffc-footer a:hover { color: var(--brand-teal-light); }

/* Footer logo */
.ffc-footer img[src*="logo"] {
  width: 305px;
  max-width: 100%;
  height: auto;
}

/* Footer social icons */
.ffc-footer__social {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.ffc-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #FFFFFF;
}

/* Copyright bar */
.ffc-footer__bottom {
  border-top: 1px solid var(--brand-teal);
  margin-top: 2rem;
  padding: 0.5rem 1.5rem;
  font-size: 0.75rem;
  color: #8aa7a0;
}

.ffc-footer__bottom p {
  margin: 0;
}

.ffc-footer__bottom a { color: #CCCCCC; }
.ffc-footer__bottom a:hover { color: var(--brand-teal-light); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.ffc-btn {
  display: inline-block;
  background: #38998F;
  color: #fff;
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: 3px;
  font-family: 'effra', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.ffc-btn:hover { background: #0d7a75; color: #fff; }

.ffc-btn--outline {
  background: transparent;
  border: 2px solid #38998F;
  color: #38998F;
}

.ffc-btn--outline:hover {
  background: #38998F;
  color: #fff;
}

.ffc-btn--lg {
  padding: 0.875rem 2rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* CTA pill button — dark teal bg, Montserrat, coral hover (matches production Elementor button) */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #1C454A;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  border-radius: 25px;
  padding: 10px 20px;
  text-decoration: none;
  transition: background 0.2s;
}

.btn-cta:hover {
  background: var(--brand-coral);
  color: #fff;
}

/* ==========================================================================
   MODALS
   ========================================================================== */
.ffc-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 500;
  align-items: center;
  justify-content: center;
}

.ffc-modal.is-open { display: flex; }

.ffc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  cursor: pointer;
}

.ffc-modal__content {
  position: relative;
  background: #fff;
  border-radius: 6px;
  padding: 2rem;
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0,0,0,0.2);
  z-index: 1;
}

.ffc-modal__close {
  position: absolute;
  top: 0.5rem; right: 0.75rem;
  background: none; border: none;
  font-size: 1.375rem; cursor: pointer;
  color: #999; line-height: 1;
}

.ffc-modal__close:hover { color: #333; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.ffc-form label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.25rem;
  margin-top: 0.75rem;
}

.ffc-form input,
.ffc-form textarea,
.ffc-form select {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: 'effra', sans-serif;
  font-size: 0.875rem;
  transition: border-color 0.2s;
}

.ffc-form input:focus,
.ffc-form textarea:focus {
  outline: none;
  border-color: #38998F;
  box-shadow: 0 0 0 2px rgba(56, 153, 143, 0.15);
}

.ffc-form .ffc-btn { margin-top: 1rem; width: 100%; }

/* Inline validation error */
.ffc-form__error {
  display: none;
  font-size: 0.75rem;
  color: var(--brand-coral);
  margin-top: 0.25rem;
}

.ffc-form__error.is-visible { display: block; }

/* ==========================================================================
   NEWSLETTER FORM — footer newsletter (clean replacement for Ninja Forms)
   ========================================================================== */
.ffc-newsletter-form {
  margin-top: 0.5rem;
}

.ffc-newsletter-fields {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ffc-newsletter-form input[type="text"],
.ffc-newsletter-form input[type="email"] {
  flex: 1;
  padding: 0.65rem 1rem;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
}

.ffc-newsletter-form input:focus {
  outline: none;
  border-color: #1CABA4;
  box-shadow: 0 0 0 2px rgba(28, 171, 164, 0.2);
}

.ffc-newsletter-submit {
  display: block;
  width: 100%;
  padding: 0.75rem 2rem;
  background-color: #1CABA4;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.ffc-newsletter-submit:hover {
  background-color: #178F89;
}

/* ==========================================================================
   ACCORDION (J1) — for DICA-1 course sections
   ========================================================================== */
.ffc-accordion {}

.ffc-accordion__item {
  border-bottom: 1px solid #e5e5e5;
}

.ffc-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'effra', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-gray-dark);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ffc-accordion__trigger:hover {
  color: var(--brand-teal);
}

.ffc-accordion__icon {
  font-size: 1.25rem;
  font-weight: 300;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.ffc-accordion__item.is-active .ffc-accordion__icon {
  transform: rotate(45deg);
}

.ffc-accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.ffc-accordion__item.is-active .ffc-accordion__content {
  max-height: 2000px; /* Large enough for any content */
}

.ffc-accordion__body {
  padding: 0 0 1.5rem 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .ffc-nav { display: none; }
  .ffc-header__cta { display: none; }
  .ffc-hamburger { display: flex; }
  /* Mobile nav: always display:block so opacity transition works */
  .ffc-mobile-nav { display: block; }

  .ffc-footer__inner { grid-template-columns: 1fr; text-align: center; }
}

@media (max-width: 767px) {
  .ffc-newsletter-fields { flex-direction: column; }
}

/* ==========================================================================
   UTILITY CLASSES — for template usage alongside Tailwind
   ========================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section {
  padding: 3rem 1.5rem;
}

.container {
  max-width: min(100%, var(--container-max-width));
  margin: 0 auto;
}

/* ==========================================================================
   DISCOVERED SIZING — from .elementor-kit-7 / page-level CSS
   Values extracted from Elementor source, not guessed. Do not edit without
   re-checking the production site's CSS.
   ========================================================================== */

/* --- SVG Icon Sizes (from elementor-icon font-size + svg height) --- */
.icon-sm   { width: 20px; height: 20px; }  /* services--executive-coaching */
.icon-md   { width: 30px; height: 30px; }  /* footer, shared header */
.icon-lg   { width: 50px; height: 50px; }  /* about, home, services icon-boxes — visual match */

/* SVGs must explicitly fill their container */
.icon-sm svg, .icon-md svg, .icon-lg svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Image-type icon boxes — source: .elementor-image-box-img { width: 30% } */
.icon-box-img { width: 30%; height: auto; }

/* --- Fixed Image Sizes (from element-specific img width/height) --- */
.img-avatar { width: 75px !important; height: 75px !important; object-fit: cover; border-radius: 50%; } /* testimonials */
.img-thumb  { width: 225px; height: auto; }  /* dica-1 course thumbnails, group-training */
.img-card   { width: 280px; height: 280px; object-fit: cover; }  /* services circles, home circles */
.img-badge  { width: 170px; height: auto; }  /* certification-directory badge */
.img-hero   { width: 360px; height: auto; }  /* about hero portrait */

/* --- Percentage Widths (from element-specific CSS) --- */
.w-pct-20 { width: 20%; }   /* home image-box icons */
.w-pct-30 { width: 30%; }   /* about image-box wrappers */
.w-pct-35 { width: 35%; }   /* home service icons */
.w-pct-48 { width: 48%; }   /* contact, services, speaker badges */
.w-pct-50 { width: 50%; }   /* footer logos, resources */
.w-pct-52 { width: 52%; }   /* group-training image-box */
.w-pct-70 { width: 70%; }   /* header logo */
.w-pct-75 { width: 75%; }   /* home image-box cards */
.w-pct-90 { width: 90%; }   /* speaker hero */
.w-pct-95 { width: 95%; }   /* our impact body text container */
.w-full   { width: 100%; }  /* full-width images */

/* ==========================================================================
   HEADING OVERRIDES — Named classes that beat the global h2/h3 !important rules
   These exist because the Elementor kit-7 defaults (h2=34px, h3=20px) don't
   match every section on the production site. Use these classes wherever
   production deviates from the kit defaults.
   ========================================================================== */

/* CTA band headings — white text on teal background, ~27px */
.heading-cta {
  font-size: 27.2px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  font-family: effra, sans-serif;
  line-height: 1.35em;
}

/* Section titles — large teal headings used at top of sections, ~34px */
.heading-section {
  font-size: 34px !important;
  font-weight: 500 !important;
  color: var(--e-global-color-primary) !important;
  font-family: effra, sans-serif;
  line-height: 1.25em;
}

/* Card names — graduate names, team names, ~1.8em teal */
.heading-card-name {
  font-size: 1.8em !important;
  font-weight: 500 !important;
  color: var(--e-global-color-primary) !important;
  font-family: effra, sans-serif;
  line-height: 1.2;
}

/* Badge/specialty titles — teal, 20px (matches kit default but explicit) */
.heading-badge {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--e-global-color-primary) !important;
  font-family: effra, sans-serif;
  line-height: 1.3;
  text-align: center;
}

/* ==========================================================================
   TEXT OVERRIDES — Named classes for body text that differs from default
   ========================================================================== */

/* Bio/description text — lighter gray, 16px */
.text-bio {
  font-size: 16px !important;
  color: var(--e-global-color-text) !important;  /* #918D8D */
  line-height: 1.65;
  font-family: effra, sans-serif;
}

/* Profession/role text — dark gray, bold */
.text-profession {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--e-global-color-secondary) !important;  /* #474747 */
  font-family: effra, sans-serif;
}

/* ==========================================================================
   CONTAINER WIDTHS — Validated production max-widths
   Use these instead of Tailwind max-w-* or inline max-width styles.
   Each class includes centering. Combine with px-6 for horizontal padding.
   
   Source: Elementor "Boxed Width" settings + measured section widths
   ========================================================================== */

/* 800px — Blog/article content area, narrow reads */
.contain-xs {
  max-width: 800px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 1000px — Narrow content: subtitles, intro text, single-column reads */
.contain-sm {
  max-width: 1000px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 1140px — Elementor default boxed width, common for card grids */
.contain-md {
  max-width: 1140px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 1300px — Wide content: main card areas, multi-column layouts */
.contain-lg {
  max-width: 1300px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 1440px — Full layout container: header/footer wrappers */
.contain-xl {
  max-width: 1440px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 2000px — Ultra-wide: hero backgrounds, full-bleed sections with inner content */
.contain-xxl {
  max-width: 2000px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   FONT SIZE UTILITIES — Validated from production design token extraction
   Source: scripts/tokens/_summary.json (2026-03-04)
   ========================================================================== */

/* 50px — Hero h1 headings */
.text-hero {
  font-size: 50px !important;
  line-height: 1.15;
}

/* 44.8px — Large display headings (oversized h2) */
.text-display {
  font-size: 44.8px !important;
  line-height: 1.2;
}

/* 25px — Subtitle/callout text */
.text-callout {
  font-size: 25px !important;
  line-height: 1.4;
}

/* 20.8px — Nav links, prominent body text */
.text-nav {
  font-size: 20.8px !important;
  line-height: 1.5;
}

/* 14.4px — Metadata, captions, small supporting text */
.text-small {
  font-size: 14.4px !important;
  line-height: 1.55;
}

/* 13px — Tiny labels, fine print */
.text-xs {
  font-size: 13px !important;
  line-height: 1.5;
}