/*
Theme Name: OODP
Theme URI: http://kuga.ca/
Author: Kuga K
Description: Custom OODP theme built with Tailwind CSS and ACF.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oodp
*/

/* ── Sticky footer — full-height content stretch ── */
html { height: 100%; scroll-behavior: smooth; }
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Roboto', sans-serif;
}
#page {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
#content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
footer { flex-shrink: 0; }

/* Per-template backgrounds fill the stretched #content */
.page-template-page-consultant-corner #content { background: #f4f4f4; }
.page-template-page-free-resources    #content { background: #3D3B52; }

/* ── Base typography ── */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Zilla Slab', serif;
}

/* ── Nav active underline (red) ── */
.nav-link { position: relative; padding-bottom: 4px; font-family: 'Zilla Slab', serif; }
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 100%; height: 3px;
    background: #C0392B;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s;
}
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

/* ── Dropdown ── */
.has-dropdown { position: relative; }
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    min-width: 200px;
    background: #1A6496;
    z-index: 200;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    list-style: none;
    padding: 0;
    margin: 0;
}
.has-dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
    text-decoration: none;
    font-family: 'Zilla Slab', serif;
}
.dropdown-menu a:hover { background: rgba(0,0,0,0.15); }

/* ── Zigzag border (blue, sits right below header) ── */
.zigzag-strip {
    height: 8px;
    background:
        linear-gradient(135deg, #fff 33.33%, transparent 33.33%) 0 0,
        linear-gradient(225deg, #fff 33.33%, transparent 33.33%) 0 0;
    background-color: #2980B9;
    background-size: 16px 8px;
    background-repeat: repeat-x;
}

/* ── Mobile menu ── */
#mobile-menu { display: none; list-style: none; padding: 0; margin: 0; }
#mobile-menu.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 1rem 0;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
#mobile-menu a {
    display: block;
    padding: 12px 24px;
    color: #333;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Zilla Slab', serif;
}
@media (min-width: 1024px) { #menu-toggle { display: none !important; } }
@media (max-width: 1023px) { #desktop-menu { display: none; } }

/* ── Back to top ── */
#back-to-top {
    position: fixed;
    bottom: 30px; right: 30px;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
#back-to-top.visible { opacity: 1; pointer-events: auto; }

/* ── Hero section ── */
.hero-section {
    position: relative;
    background-size: cover;
    background-position: center;
}
.hero-section .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

/* ── Service card hover ── */
.service-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.service-card-img { position: relative; }
.service-card-img img { transition: transform 0.3s ease; }
.service-card:hover .service-card-img img { transform: scale(1.02); }

/* ── Home hero service cards — stack on narrow phones ── */
@media (max-width: 480px) { .home-hero-cards { grid-template-columns: 1fr !important; } }

/* ── Footer "Consultant's Corner" badge — mobile gets a proper full-size tappable button
   instead of the subtle desktop corner badge (avoids overlap + tiny touch target) ── */
@media (max-width: 640px) {
    #colophon { text-align: center; }
    .footer-cc-badge {
        position: static !important;
        display: inline-flex;
        justify-content: center;
        width: 100%;
        max-width: 280px;
        margin: 28px auto 0 !important;
        background: rgba(255,255,255,0.12) !important;
        border-color: rgba(255,255,255,0.3) !important;
        color: #fff !important;
        padding: 14px 24px !important;
        font-size: 15px !important;
    }
}

/* ── Section divider line ── */
.section-divider {
    width: 60px; height: 3px;
    background: #C0392B;
    margin: 16px 0 24px;
}

/* ── Red service buttons ── */
.service-btn {
    display: block;
    background: #8B1A1A;
    color: #fff;
    text-align: center;
    padding: 20px 24px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
    transition: background 0.2s;
    text-decoration: none;
}
.service-btn:last-child { margin-bottom: 0; }
.service-btn:hover { background: #6B1A1A; color: #fff; }

/* ── Flip boxes (Resources page category cards) ── */
.flip-box {
    height: 260px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
@media (max-width: 767px) { .flip-box { height: 200px; } }
.flip-front, .flip-back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    color: #fff;
}
.flip-front {
    background: #3D3B52;
    transform: translateY(0);
}
.flip-back {
    background: #C0392B;
    transform: translateY(100%);
    text-decoration: none;
}
.flip-box:hover .flip-front { transform: translateY(-100%); }
.flip-box:hover .flip-back  { transform: translateY(0); }
.flip-btn {
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.7);
    color: #fff;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ── Free Resources category tile grid responsive ── */
@media (max-width: 1023px) { .free-resources-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 599px)  { .free-resources-grid { grid-template-columns: repeat(1,1fr) !important; } }
@media (max-width: 640px)  { .free-resources-hero-content { padding: 56px 20px !important; } }

/* ── Logo grid (Partner / Related Organizations) — hover fade-in ──
   Flexbox instead of CSS grid so a lone leftover logo in the last row
   centers itself automatically (a grid can't do that without knowing the
   item count relative to the current column count ahead of time; a wrapped
   flex row centers its own leftover items for free). */
.logo-flex-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.logo-flex-grid .logo-flip-box { width: 100%; }
@media (min-width: 640px) {
    .logo-flex-2 .logo-flip-box,
    .logo-flex-3 .logo-flip-box,
    .logo-flex-4 .logo-flip-box { width: calc(50% - 10px); }
}
@media (min-width: 1170px) {
    .logo-flex-3 .logo-flip-box { width: calc(33.333% - 14px); }
    .logo-flex-4 .logo-flip-box { width: calc(25% - 15px); }
}

.logo-flip-box {
    height: 170px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.logo-flip-front, .logo-flip-back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    transition: opacity 0.35s ease;
}
.logo-flip-front {
    background: #fff;
    opacity: 1;
}
.logo-flip-back {
    color: #fff;
    opacity: 0;
    text-decoration: none;
}
.logo-flip-box:hover .logo-flip-front { opacity: 0; }
.logo-flip-box:hover .logo-flip-back  { opacity: 1; }

/* ── Resource grid responsive ── */
@media (max-width: 1023px) { .resource-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 599px)  { .resource-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 420px)  { .resource-grid { grid-template-columns: 1fr !important; } }

/* ── Resource card tilt + shine — pure CSS :hover, works on every card ── */
.atv-card {
    transition: transform 0.3s ease;
}
.atv-card:hover {
    /* !important needed: .fade-up.is-visible (added once a card has scrolled
       into view) sets its own transform at equal specificity and comes later
       in the cascade, so without this the tilt silently gets cancelled on
       any card that has already finished fading in — which is most of them. */
    transform: perspective(800px) rotateX(4deg) rotateY(-4deg) scale(1.03) !important;
    z-index: 10;
}
.atv-card:hover .atv-shine {
    background: radial-gradient(circle at 70% 25%, rgba(255,255,255,0.18) 0%, transparent 70%);
}

/* ── Single resource — cover image + details responsive ── */
.resource-detail-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: start;
}
@media (max-width: 767px) {
    .resource-detail-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 480px) {
    .resource-file-row { flex-direction: column; align-items: stretch !important; }
    .resource-file-row a { width: 100%; justify-content: center; }
    .resource-share-grid { grid-template-columns: 1fr !important; }
}

/* ── About section responsive ── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 767px) { .about-grid { grid-template-columns: 1fr !important; } }

/* ── Resources page grid responsive ── */
.resources-page-grid { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 767px) { .resources-page-grid { grid-template-columns: 1fr !important; } }

/* ── Scroll fade-up ── */
.fade-up {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ──────────────────────────────────────────
   CONSULTANT CORNER
   ────────────────────────────────────────── */

/* Page layout: sidebar + main */
.cc-page {
    display: grid;
    grid-template-columns: 240px 1fr;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.10);
}
@media (max-width: 767px) { .cc-page { grid-template-columns: 1fr; border-radius: 10px; } }

/* Left sidebar — compact quick-jump index, distinct from the main accordion list.
   .cc-sidebar itself stays a normal (stretched) grid column so its grey
   background still spans the full height next to the accordion list; the
   sticky behaviour lives on the shorter .cc-sidebar-inner wrapper, which
   floats within that tall column as you scroll. Rounds its own left corners
   now that .cc-page no longer clips via overflow:hidden (overflow:hidden
   would have broken position:sticky). */
.cc-sidebar {
    border-right: 1px solid #e8e8e8;
    border-radius: 14px 0 0 14px;
    background: #f7f7f7;
}
.cc-sidebar-inner {
    padding: 24px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}
@media (max-width: 767px) {
    .cc-sidebar {
        border-radius: 10px 10px 0 0;
    }
    .cc-sidebar-inner {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}
.cc-sidebar-heading {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    padding: 0 10px 10px;
}

/* Category row — compact list item, not a big duplicate button */
.cc-sidebar-box {
    border: none;
    border-left: 3px solid transparent;
    background: transparent;
    color: #444;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    padding: 10px 10px 10px 12px;
    cursor: pointer;
    border-radius: 0 6px 6px 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: 'Roboto', sans-serif;
    line-height: 1.3;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cc-sidebar-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cc-accent, #C0392B);
    flex-shrink: 0;
}
.cc-sidebar-box:hover {
    background: #eee;
    border-left-color: var(--cc-accent, #C0392B);
}
.cc-sidebar-box.active {
    background: #fff;
    border-left-color: var(--cc-accent, #C0392B);
    color: #222;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.cc-sidebar-label { display: block; flex: 1; }
.cc-sidebar-count {
    display: inline-block;
    background: rgba(0,0,0,0.08);
    color: #666;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
    min-width: 22px;
    text-align: center;
}

/* Main area */
.cc-main { padding: 36px 44px 56px; }
@media (max-width: 640px) { .cc-main { padding: 20px 16px 32px; } }

/* Header row */
.cc-header {
    margin-bottom: 20px;
}
.cc-title {
    font-size: 32px;
    font-weight: 700;
    color: #2D2D2D;
    margin: 0;
    font-family: 'Zilla Slab', serif;
}
.cc-cta-wrap { text-align: center; margin-bottom: 28px; }
.cc-form-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #C0392B;
    color: #fff;
    padding: 17px 36px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(192,57,43,0.25);
}
.cc-form-btn:hover { background: #A93226; color: #fff; }

/* Toolbar: search + view toggle */
.cc-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.cc-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}
.cc-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 13px;
    pointer-events: none;
}
.cc-search-input {
    width: 100%;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px 12px 38px;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.cc-search-input:focus { border-color: #C0392B; }
.cc-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    padding: 4px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: color 0.15s;
}
.cc-search-clear:hover { color: #C0392B; }

/* View toggle buttons */
.cc-view-toggle {
    display: flex;
    gap: 2px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.cc-view-btn {
    background: #e8e8e8;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    color: #666;
    font-size: 15px;
    transition: background 0.15s, color 0.15s;
}
.cc-view-btn:hover { background: #ddd; }
.cc-view-btn.active { background: #C0392B; color: #fff; }

/* Divider below toolbar */
.cc-divider {
    border: none;
    border-top: 2px solid #e0e0e0;
    margin-bottom: 12px;
}

/* Category section — the PRIMARY heading level (e.g. "OODP Operations").
   No longer an accordion: it's a plain, non-collapsible label that groups
   the sub-category accordions beneath it. */
.cc-cat-section { margin-bottom: 32px; }
.cc-cat-section:last-child { margin-bottom: 0; }

.cc-cat-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--cc-accent, #C0392B);
}

.cc-check-icon { font-size: 16px; color: var(--cc-accent, #C0392B); flex-shrink: 0; }
.cc-cat-name   {
    flex: 1;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #2D2D2D;
    font-family: 'Roboto', sans-serif;
}

/* ── Grid view (default) ── */
.cc-docs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 0 0 14px;
}
@media (max-width: 1100px) { .cc-docs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .cc-docs-grid { grid-template-columns: repeat(2, 1fr); } }

.cc-doc-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    padding: 16px 10px;
    gap: 10px;
    border-radius: 8px;
    background: #fafafa;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.cc-doc-link:hover {
    background: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.10);
    transform: translateY(-1px);
}
.cc-doc-thumb {
    width: 100%;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cc-doc-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.cc-doc-icon  { font-size: 44px; display: block; flex-shrink: 0; }
.cc-doc-name  { font-size: 15px; color: #2D2D2D; line-height: 1.4; word-break: break-word; font-family: 'Roboto', sans-serif; }
.cc-doc-dl    { display: none; }

/* ── List view ── */
.is-list-view .cc-docs-grid {
    grid-template-columns: 1fr;
    gap: 1px;
    padding: 6px 0;
}
.is-list-view .cc-doc-link {
    flex-direction: row;
    text-align: left;
    padding: 11px 20px;
    gap: 14px;
    border-bottom: 1px solid #f2f2f2;
    border-radius: 0;
    align-items: center;
    background: transparent;
    box-shadow: none;
    transform: none !important;
}
.is-list-view .cc-doc-link:hover { background: #fafafa; }
.is-list-view .cc-doc-thumb { width: 32px; height: 32px; }
.is-list-view .cc-doc-thumb img { border-radius: 4px; }
.is-list-view .cc-doc-icon { font-size: 20px; }
.is-list-view .cc-doc-name { flex: 1; font-size: 16px; color: #333; }
.is-list-view .cc-doc-dl   { display: flex; color: #999; font-size: 15px; }

/* ── Sub-section accordion — the SECONDARY heading level (e.g. "General"),
   nested inside a top-level accordion. Bold, solid accent-colour bar with
   white text — matches the original Consultant Corner design. ── */
.cc-sub-accordion {
    margin: 0 0 14px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.cc-sub-accordion:last-child { margin-bottom: 0; }
.cc-sub-header {
    width: 100%;
    background: var(--cc-accent, #C0392B);
    border: none;
    border-radius: 8px;
    padding: 15px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    transition: filter 0.15s, border-radius 0.15s;
}
.cc-sub-header:hover { filter: brightness(1.08); }
.cc-sub-header[aria-expanded="false"] { border-radius: 8px; }
.cc-sub-header[aria-expanded="true"]  { border-radius: 8px 8px 0 0; }

.cc-sub-toggle {
    font-size: 13px;
    color: #fff;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}
.cc-sub-toggle-plus { display: none; }
.cc-sub-header[aria-expanded="false"] .cc-sub-toggle-minus { display: none; }
.cc-sub-header[aria-expanded="false"] .cc-sub-toggle-plus  { display: inline-block; }

.cc-subsection-icon {
    background: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.cc-sub-name { flex: 1; }

.cc-sub-count {
    background: rgba(255,255,255,0.28);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
}

.cc-sub-body {
    max-height: 0;
    overflow: hidden;
    background: #fff;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cc-sub-body .cc-docs-grid { padding: 16px 16px 8px; }

/* ── Sort select ── */
.cc-sort-select {
    border: 2px solid #e0e0e0;
    padding: 8px 12px;
    font-size: 15px;
    font-family: 'Roboto', sans-serif;
    color: #555;
    background: #fff;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
    height: 40px;
}
.cc-sort-select:focus { border-color: #C0392B; }

/* Archived section */
.cc-archived { padding: 0 0 12px; }
.cc-archived-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 8px;
    font-size: 14px;
    color: #888;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
}
.cc-archived-divider::before,
.cc-archived-divider::after { content: ''; flex: 1; border-top: 1px solid #ddd; }
.cc-archived-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1A6496;
    color: #fff;
    font-size: 10px;
    flex-shrink: 0;
}
.cc-archived-grid { background: #f5f5f5; padding: 8px 16px 12px !important; }
.cc-archived-grid .cc-doc-name { color: #999; }

/* Empty state */
.cc-empty { padding: 20px 16px; color: #bbb; font-size: 15px; font-style: italic; }

/* Lock link */
.cc-lock-link { color: #bbb; font-size: 14px; text-decoration: none; }
.cc-lock-link:hover { color: #C0392B; }

/* ── Testimonial slider ── */
.testimonial-track { transition: transform 0.4s ease; }

/* ── Contact Us — WPForms styled to sit on the blue panel (translucent
   white overlay, so it reads correctly on any background colour) ── */
.contact-form-panel {
    /* WPForms "Modern" markup reads these custom properties directly */
    --wpforms-field-border-style: none;
    --wpforms-field-border-size: 0px;
    --wpforms-field-background-color: rgba(255,255,255,0.13);
    --wpforms-field-text-color: rgba(255,255,255,0.9);
    --wpforms-label-color: rgba(255,255,255,0.9);
    --wpforms-button-background-color: #8B1A1A;
    --wpforms-button-text-color: #fff;
    --wpforms-button-border-radius: 999px;
    --wpforms-container-shadow-size-box-shadow: none;
}
/* Fallback overrides for older/Classic WPForms markup */
.contact-form-panel .wpforms-field-label { color: #fff; }
.contact-form-panel .wpforms-field-medium,
.contact-form-panel textarea.wpforms-field-medium {
    background: rgba(255,255,255,0.13);
    border: none;
    color: #fff;
}
.contact-form-panel input::placeholder,
.contact-form-panel textarea::placeholder { color: rgba(255,255,255,0.6); }
.contact-form-panel .wpforms-submit {
    background: #8B1A1A;
    color: #fff;
    border: none;
}
.contact-form-panel .wpforms-submit:hover { background: #6B1A1A; }

/* ── Stat counter ── */
.stat-number {
    font-size: 48px;
    font-weight: 700;
    color: #C0392B;
}

/* ============================================================================
   Square buttons + a subtle hover — applied sitewide
   Covers every button-style element in the theme: .btn-cta (the shared class
   used on plain inline-styled CTAs), flip-card "More" buttons, service
   buttons, WPForms submit, Consultant Corner form button, and the red/white
   CTA buttons used across the hero, text+image, and CTA banner sections
   (all share the "tracking-wide" utility class).
   ========================================================================= */
.btn-cta,
.flip-btn,
.service-btn,
.wpforms-submit,
.cc-form-btn,
a[class*="tracking-wide"] {
    border-radius: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-cta:hover,
.flip-btn:hover,
.service-btn:hover,
.cc-form-btn:hover,
a[class*="tracking-wide"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}