/**
 * Elementor Compatibility CSS
 *
 * Loaded LAST in the CSS stack so these rules override Elementor defaults.
 * This file targets Elementor's own class names where necessary.
 *
 * RULES:
 * - Use !important only for absolute resets (border-radius: 0)
 * - All other overrides use specificity matching, not !important
 * - Test every rule after Elementor updates
 * - Document WHY each override exists
 *
 * @package EthicalInfrastructure
 */

/* ─────────────────────────────────────────────────────────────────────────────
   GLOBAL: ZERO BORDER RADIUS
   Elementor Pro's default kit applies 3px to buttons and 4px to inputs.
   The Institutional Rigor design requires 0px everywhere.
   ───────────────────────────────────────────────────────────────────────────── */

/* Elementor buttons */
.elementor-button,
.elementor-button-wrapper .elementor-button,
.elementor-widget-button .elementor-button,
.e-con .elementor-button,
.elementor-section .elementor-button {
  border-radius: 0 !important;
}

/* Elementor form fields */
.elementor-field-group input[type="text"],
.elementor-field-group input[type="email"],
.elementor-field-group input[type="tel"],
.elementor-field-group input[type="url"],
.elementor-field-group input[type="number"],
.elementor-field-group input[type="password"],
.elementor-field-group input[type="search"],
.elementor-field-group textarea,
.elementor-field-group select,
.elementor-form .elementor-button,
.elementor-form .elementor-submit-button {
  border-radius: 0 !important;
}

/* Elementor image boxes, icon boxes, alert widgets */
.elementor-widget-image-box .elementor-image-box-img,
.elementor-widget-alert .elementor-alert {
  border-radius: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   GLOBAL: TYPOGRAPHY CONSISTENCY
   Elementor can override heading letter-spacing in its widgets.
   This resets heading widgets to inherit from Global Typography.
   ───────────────────────────────────────────────────────────────────────────── */

/* Prevent Elementor from adding default letter-spacing to headings */
.elementor-widget-heading .elementor-heading-title {
  letter-spacing: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────────
   GLOBAL: COLUMN PADDING RESET
   Elementor default: 10px padding each side on columns (20px gap total).
   Theme uses --space-gutter (32px) via CSS Grid and section layout.
   Setting to 0 lets the theme control gaps via the grid gap property.
   NOTE: Set "Columns Gap" to "Default" (32px) in Elementor Site Settings.
   ───────────────────────────────────────────────────────────────────────────── */

.elementor-column > .elementor-widget-wrap {
  padding: 0;
}

/* Elementor Flexbox Container padding reset */
.e-con-inner {
  padding: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   GLOBAL: CONTAINER MAX-WIDTH
   Ensure Elementor boxed containers respect the 1280px token.
   ───────────────────────────────────────────────────────────────────────────── */

.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--container-max);
}

.e-con {
  --container-max-width: var(--container-max);
}

/* ─────────────────────────────────────────────────────────────────────────────
   NAVIGATION WIDGET
   Elementor's Nav Menu widget needs specific targeting for the
   active state 2px bottom border (not achievable via widget Style tab alone).
   ───────────────────────────────────────────────────────────────────────────── */

/* Active state: 2px bottom border, primary color */
.elementor-nav-menu .current-menu-item > a,
.elementor-nav-menu .current-menu-ancestor > a {
  color: var(--color-primary) !important;
  border-bottom: 2px solid var(--color-primary) !important;
  padding-bottom: 4px !important;
}

/* Remove Elementor's default underline on nav links */
.elementor-nav-menu a {
  text-decoration: none !important;
}

/* Nav link typography — must match Label Caps spec */
.elementor-nav-menu--main .elementor-item {
  font-family: var(--font-body);
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FORM WIDGET — UNDERLINE STYLE (Contact page)
   When .ei-form-underline class is added to the form widget wrapper,
   these rules transform the standard Elementor form into the
   bottom-border-only style used in the Contact page.
   ───────────────────────────────────────────────────────────────────────────── */

.ei-form-underline .elementor-field-group input,
.ei-form-underline .elementor-field-group textarea,
.ei-form-underline .elementor-field-group select {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--color-outline-variant) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  color: var(--color-on-surface);
  box-shadow: none !important;
  transition: border-bottom-color 0.3s ease;
}

.ei-form-underline .elementor-field-group input:focus,
.ei-form-underline .elementor-field-group textarea:focus {
  border-bottom-color: var(--color-primary) !important;
  outline: none !important;
  box-shadow: none !important;
}

.ei-form-underline .elementor-field-group input::placeholder,
.ei-form-underline .elementor-field-group textarea::placeholder {
  color: var(--color-outline-variant);
  opacity: 0.6;
}

/* Form labels */
.ei-form-underline .elementor-field-label {
  font-family: var(--font-body);
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

/* Submit button in underline form */
.ei-form-underline .elementor-button {
  background-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 20px 40px !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-label-caps) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-label) !important;
  text-transform: uppercase !important;
  transition: opacity 0.3s ease;
}

.ei-form-underline .elementor-button:hover {
  opacity: 0.90;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FORM WIDGET — INLINE STYLE (Home and Research CTA email form)
   When .ei-form-inline-el class is added to the form widget wrapper.
   ───────────────────────────────────────────────────────────────────────────── */

.ei-form-inline-el .elementor-form-fields-wrapper {
  display: flex;
  border: 1px solid var(--color-outline-variant);
  overflow: hidden;
  gap: 0;
}

.ei-form-inline-el .elementor-field-group {
  flex: 1;
  margin: 0 !important;
  padding: 0 !important;
}

.ei-form-inline-el .elementor-field-group input {
  border: none !important;
  border-radius: 0 !important;
  background-color: #fff !important;
  padding: 20px 24px !important;
  height: auto !important;
  font-size: var(--fs-body-md);
  color: var(--color-on-surface);
}

.ei-form-inline-el .elementor-field-group.elementor-field-type-submit {
  flex: 0;
}

.ei-form-inline-el .elementor-button {
  border-radius: 0 !important;
  background-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
  padding: 20px 48px !important;
  font-size: var(--fs-label-caps) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-label) !important;
  text-transform: uppercase !important;
  height: 100% !important;
  white-space: nowrap;
  border: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   INNER CONTAINER HELPER
   For full-width sections that need centred content at 1280px max.
   Add .ei-inner-container CSS class to an inner Elementor container/section.
   ───────────────────────────────────────────────────────────────────────────── */

.ei-inner-container {
  max-width: var(--container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION PADDING HELPERS
   Apply as CSS classes in Elementor Widget → Advanced → CSS Classes.
   Replaces manual padding entry per section — ensures consistency.
   ───────────────────────────────────────────────────────────────────────────── */

/* Standard section vertical padding */
.ei-section-padding {
  padding-top: var(--space-section-gap) !important;
  padding-bottom: var(--space-section-gap) !important;
}

/* Standard section horizontal padding (container mode) */
.ei-section-px {
  padding-left: var(--space-margin-desktop) !important;
  padding-right: var(--space-margin-desktop) !important;
}

/* Combined: both vertical and horizontal */
.ei-section-full-padding {
  padding: var(--space-section-gap) var(--space-margin-desktop) !important;
}

/* Border-top divider */
.ei-border-top {
  border-top: 1px solid var(--color-outline-variant) !important;
}

/* Border-bottom divider */
.ei-border-bottom {
  border-bottom: 1px solid var(--color-outline-variant) !important;
}

/* Both borders */
.ei-border-y {
  border-top: 1px solid var(--color-outline-variant) !important;
  border-bottom: 1px solid var(--color-outline-variant) !important;
}

/* Background surface variants */
.ei-bg-surface     { background-color: var(--color-surface-container) !important; }
.ei-bg-surface-low { background-color: var(--color-surface-container-low) !important; }
.ei-bg-navy        { background-color: var(--color-primary) !important; }
.ei-bg-ivory       { background-color: var(--color-background) !important; }

/* Text color utilities */
.ei-text-primary  { color: var(--color-primary) !important; }
.ei-text-variant  { color: var(--color-on-surface-variant) !important; }
.ei-text-on-dark  { color: var(--color-on-primary) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   SCROLL REVEAL — ELEMENTOR INTEGRATION
   When .ei-scroll-reveal is added as a CSS class in Elementor Advanced tab,
   the animation JS picks it up automatically.
   The initial state (opacity: 0) is declared in theme-animations.css.
   ───────────────────────────────────────────────────────────────────────────── */

/* Ensure Elementor's own entrance animations don't conflict.
   If you use Elementor Motion Effects instead of .ei-scroll-reveal,
   remove the .ei-scroll-reveal class from that widget. */

/* ─────────────────────────────────────────────────────────────────────────────
   ELEMENTOR WIDGET SPACING RESETS
   Some Elementor widgets add default margin-bottom that conflicts with
   the theme's deliberate section rhythm.
   ───────────────────────────────────────────────────────────────────────────── */

/* Heading widget: default has large bottom margin */
.elementor-widget-heading {
  margin-bottom: 0;
}

/* Text editor widget */
.elementor-widget-text-editor {
  margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ELEMENTOR STICKY HEADER
   When the header is built in Elementor Theme Builder with sticky behaviour,
   ensure it sits at z-index var(--z-sticky) and has the correct background.
   ───────────────────────────────────────────────────────────────────────────── */

.elementor-sticky--effects {
  background-color: var(--color-background) !important;
  border-bottom: 1px solid var(--color-outline-variant);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ABOUT PAGE: STICKY SIDEBAR IN ELEMENTOR
   When the TOC sidebar column has position sticky set in Elementor,
   this ensures the sticky top offset accounts for the 88px nav height.
   ───────────────────────────────────────────────────────────────────────────── */

.ei-toc-sticky {
  position: sticky !important;
  top: 128px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ELEMENTOR EDITOR: VISIBILITY FIXES
   When editing in Elementor, scroll-reveal elements would start invisible.
   In editor mode (body has .elementor-editor-active), override initial state.
   ───────────────────────────────────────────────────────────────────────────── */

.elementor-editor-active .ei-scroll-reveal,
.elementor-editor-active .ei-scroll-reveal--from-left,
.elementor-editor-active .ei-scroll-reveal--from-right,
.elementor-editor-active .ei-scroll-reveal--fade {
  opacity: 1 !important;
  transform: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CF7 FORMS — GLOBAL RESETS
   Strip browser defaults from all CF7 inputs sitewide.
   ───────────────────────────────────────────────────────────────────────────── */

.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {
  font-family: inherit;
  box-sizing: border-box;
}

.wpcf7 form br { display: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   CF7 FORM 1 — HOME CTA  (.ep-cta-centered)
   Inline bordered box: email input left, button right.
   The CF7 template uses <div class="cf7-field-group"> as the wrapper.
   ───────────────────────────────────────────────────────────────────────────── */

.ep-cta-centered .wpcf7 {
  width: 100%;
  max-width: 640px;
  margin: 32px auto 0;
}

.ep-cta-centered .wpcf7 .cf7-field-group {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(13, 31, 60, 0.2);
  overflow: visible;
  width: 100%;
  position: relative;
}

.ep-cta-centered .wpcf7 .wpcf7-form-control-wrap {
  display: block;
  flex: 1;
}

.ep-cta-centered .wpcf7 input[type="email"] {
  width: 100%;
  height: 100%;
  background: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 20px 24px !important;
  font-size: 1rem;
  color: #0d1f3c;
  outline: none;
  box-shadow: none !important;
}

.ep-cta-centered .wpcf7 input[type="email"]::placeholder { color: rgba(13,31,60,0.4); }

.ep-cta-centered .wpcf7 input[type="submit"] {
  background: #0d1f3c !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 20px 32px !important;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  width: auto !important;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.ep-cta-centered .wpcf7 input[type="submit"]:hover { opacity: 0.85; }

.ep-cta-centered .wpcf7 .wpcf7-spinner {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #0d1f3c;
}

.ep-cta-centered .wpcf7 .wpcf7-response-output {
  border: none !important;
  padding: 8px 0 0 !important;
  margin: 0 !important;
  font-size: 0.8rem;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CF7 FORM 2 — RESEARCH DARK CTA  (.ep-dark-cta-form--cf7)
   Inline bottom-border row on navy background.
   Email left (transparent), SUBSCRIBE text right.
   ───────────────────────────────────────────────────────────────────────────── */

.ep-dark-cta-form--cf7 .wpcf7 { width: 100%; }

.ep-dark-cta-form--cf7 .wpcf7 .cf7-field-group {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 12px;
  width: 100%;
  position: relative;
}

.ep-dark-cta-form--cf7 .wpcf7 .wpcf7-form-control-wrap {
  display: block;
  flex: 1;
}

.ep-dark-cta-form--cf7 .wpcf7 input[type="email"],
.ep-dark-cta-form--cf7 .wpcf7 input[type="text"] {
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
  font-size: 1rem;
  color: #ffffff !important;
  outline: none;
  box-shadow: none !important;
}

.ep-dark-cta-form--cf7 .wpcf7 input[type="email"]::placeholder,
.ep-dark-cta-form--cf7 .wpcf7 input[type="text"]::placeholder { color: rgba(255,255,255,0.45); }

.ep-dark-cta-form--cf7 .wpcf7 input[type="submit"] {
  display: inline-block;
  width: auto !important;
  background: transparent !important;
  color: rgba(255,255,255,0.75) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 8px 0 8px 24px !important;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s;
}

.ep-dark-cta-form--cf7 .wpcf7 input[type="submit"]:hover { color: #ffffff !important; }

.ep-dark-cta-form--cf7 .wpcf7 .wpcf7-spinner {
  position: absolute;
  bottom: -36px;
  left: 0;
  background-color: rgba(255,255,255,0.7);
}

.ep-dark-cta-form--cf7 .wpcf7 .wpcf7-response-output {
  border: none !important;
  padding: 8px 0 0 !important;
  margin: 0 !important;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CF7 FORM 3 — CONTACT PAGE  (.ei-contact-panel--right)
   Full form: bottom-border fields, solid navy submit button.
   ───────────────────────────────────────────────────────────────────────────── */

.ei-contact-panel--right .wpcf7 { width: 100%; }

.ei-contact-panel--right .wpcf7 .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ei-contact-panel--right .wpcf7 .wpcf7-form-control-wrap { display: block; width: 100%; }

.ei-contact-panel--right .wpcf7 input[type="text"],
.ei-contact-panel--right .wpcf7 input[type="email"],
.ei-contact-panel--right .wpcf7 textarea {
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(13,31,60,0.2) !important;
  border-radius: 0 !important;
  padding: 18px 0 !important;
  font-size: 1rem;
  color: #0d1f3c;
  outline: none;
  box-shadow: none !important;
  transition: border-color 0.2s;
}

.ei-contact-panel--right .wpcf7 input[type="text"]::placeholder,
.ei-contact-panel--right .wpcf7 input[type="email"]::placeholder,
.ei-contact-panel--right .wpcf7 textarea::placeholder { color: rgba(13,31,60,0.35); }

.ei-contact-panel--right .wpcf7 input[type="text"]:focus,
.ei-contact-panel--right .wpcf7 input[type="email"]:focus,
.ei-contact-panel--right .wpcf7 textarea:focus {
  border-bottom-color: rgba(13,31,60,0.7) !important;
  outline: none;
  box-shadow: none !important;
}

.ei-contact-panel--right .wpcf7 textarea { min-height: 130px; resize: none; }

.ei-contact-panel--right .wpcf7 input[type="submit"] {
  background: #0d1f3c !important;
  color: #ffffff !important;
  border: none !important;
  padding: 16px 40px !important;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  margin-top: 32px;
  width: auto !important;
  transition: opacity 0.2s;
}

.ei-contact-panel--right .wpcf7 input[type="submit"]:hover { opacity: 0.8; }

.ei-contact-panel--right .wpcf7 .wpcf7-not-valid-tip {
  font-size: 0.73rem;
  color: #c0392b;
  padding: 4px 0;
}

.ei-contact-panel--right .wpcf7 .wpcf7-spinner {
  display: block;
  margin: 16px 0 0;
  background-color: #0d1f3c;
}

.ei-contact-panel--right .wpcf7 .wpcf7-response-output {
  border: none !important;
  padding: 8px 0 0 !important;
  margin: 0 !important;
  font-size: 0.8rem;
}

.ei-contact-panel--right .wpcf7 .wpcf7-mail-sent-ok { color: #2e7d4f; }
.ei-contact-panel--right .wpcf7 .wpcf7-validation-errors { color: #c0392b; }