/**
 * EFTC Resource Hub — Divi Compatibility Layer
 *
 * Loaded AFTER eftc-frontend.css to isolate EFTC shortcode and page
 * styles from Divi 5.x global resets and overrides.
 *
 * All rules are scoped to .eftc-shortcode or .eftc-page so they
 * never affect non-EFTC content on the same page.
 *
 * @version 1.0.0
 * @package EFTC_Resource_Hub
 */

/* ==========================================================================
   1. BOX MODEL RESET
   ========================================================================== */

.eftc-shortcode *,
.eftc-shortcode *::before,
.eftc-shortcode *::after,
.eftc-page *,
.eftc-page *::before,
.eftc-page *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   2. TYPOGRAPHY OVERRIDE
   Divi sets global heading fonts/spacing via .et_pb_module h1–h6.
   Re-assert EFTC font families and spacing inside our containers.
   ========================================================================== */

.eftc-shortcode h1,
.eftc-shortcode h2,
.eftc-shortcode h3,
.eftc-shortcode h4,
.eftc-shortcode h5,
.eftc-shortcode h6,
.eftc-page h1,
.eftc-page h2,
.eftc-page h3,
.eftc-page h4,
.eftc-page h5,
.eftc-page h6 {
    font-family: var(--eftc-font-heading, 'Gilroy', sans-serif);
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.eftc-shortcode p,
.eftc-shortcode li,
.eftc-shortcode label,
.eftc-shortcode span,
.eftc-page p,
.eftc-page li,
.eftc-page label,
.eftc-page span {
    font-family: var(--eftc-font-body, 'Glacial Indifference', sans-serif);
    line-height: 1.6;
    letter-spacing: normal;
}

/* ==========================================================================
   3. FORM ELEMENT RESET
   Divi sets global input heights, padding, and border styles via
   .et_pb_module input[type=text] etc. Reset for EFTC forms.
   ========================================================================== */

.eftc-shortcode input[type="text"],
.eftc-shortcode input[type="email"],
.eftc-shortcode input[type="tel"],
.eftc-shortcode input[type="number"],
.eftc-shortcode input[type="url"],
.eftc-shortcode textarea,
.eftc-shortcode select,
.eftc-page input[type="text"],
.eftc-page input[type="email"],
.eftc-page input[type="tel"],
.eftc-page input[type="number"],
.eftc-page input[type="url"],
.eftc-page textarea,
.eftc-page select {
    height: auto;
    padding: var(--eftc-space-sm) var(--eftc-space-md);
    font-family: var(--eftc-font-body, 'Glacial Indifference', sans-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--eftc-charcoal, #262323);
    background-color: var(--eftc-white, #fff);
    border: 1px solid var(--eftc-gray-200, #e5e7eb);
    border-radius: var(--eftc-radius-md, 8px);
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.eftc-shortcode input:focus,
.eftc-shortcode textarea:focus,
.eftc-shortcode select:focus,
.eftc-page input:focus,
.eftc-page textarea:focus,
.eftc-page select:focus {
    outline: none;
    border-color: var(--eftc-navy, #1D3769);
    box-shadow: var(--eftc-focus-ring, 0 0 0 3px rgba(29, 55, 105, 0.4));
}

/* ==========================================================================
   4. BUTTON RESET
   Divi overrides letter-spacing, text-transform, and padding on
   .et_pb_button globally. Reset for .eftc-btn elements.
   ========================================================================== */

.eftc-shortcode .eftc-btn,
.eftc-page .eftc-btn {
    letter-spacing: normal;
    text-transform: none;
    font-family: var(--eftc-font-body, 'Glacial Indifference', sans-serif);
    line-height: 1.5;
    -webkit-appearance: none;
    appearance: none;
}

/* Divi adds ::after content on buttons for arrow icon — suppress it */
.eftc-shortcode .eftc-btn::after,
.eftc-page .eftc-btn::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   5. CODE MODULE SPACING
   Divi Code Modules (.et_pb_code_inner) add their own padding.
   Reset when an EFTC shortcode renders inside one.
   ========================================================================== */

.et_pb_code_inner > .eftc-shortcode,
.et_pb_code_inner > .eftc-page {
    margin: 0;
    padding: 0;
}

.et_pb_code .eftc-shortcode,
.et_pb_code .eftc-page {
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   6. GRID FIX
   Divi columns (.et_pb_column) use flexbox with their own flex rules.
   Ensure EFTC CSS Grid layouts render correctly inside Divi sections.
   ========================================================================== */

.eftc-shortcode .eftc-grid,
.eftc-page .eftc-grid {
    display: grid;
    width: 100%;
}

.eftc-shortcode .eftc-grid--2col,
.eftc-page .eftc-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.eftc-shortcode .eftc-grid--3col,
.eftc-page .eftc-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

.eftc-shortcode .eftc-grid--4col,
.eftc-page .eftc-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}

/* Prevent Divi flex from interfering with grid children */
.et_pb_column .eftc-shortcode .eftc-grid,
.et_pb_column .eftc-page .eftc-grid {
    flex: none;
    min-width: 0;
}

/* ==========================================================================
   7. MAP SVG SIZING
   Ensure the US map SVG scales correctly inside Divi layout containers
   which may constrain width or apply unexpected flex sizing.
   ========================================================================== */

.eftc-shortcode #eftc-map-container,
.eftc-page #eftc-map-container {
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

.eftc-shortcode #eftc-map-container svg,
.eftc-page #eftc-map-container svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* ==========================================================================
   8. RESPONSIVE GRID — MOBILE COLLAPSE
   2col, 3col, and 4col grids collapse to 1col on mobile.
   Uses the same breakpoint as eftc-frontend.css (768px).
   ========================================================================== */

@media (max-width: 767px) {
    .eftc-shortcode .eftc-grid--2col,
    .eftc-shortcode .eftc-grid--3col,
    .eftc-shortcode .eftc-grid--4col,
    .eftc-page .eftc-grid--2col,
    .eftc-page .eftc-grid--3col,
    .eftc-page .eftc-grid--4col {
        grid-template-columns: 1fr;
    }
}