/*
 * ElectriCare Global Overrides
 * Loaded last — wins over theme, plugins, and Gravity Forms.
 */

/* ─── FONTS ──────────────────────────────────────────────────────────
   Load Libre Baskerville globally so all pages share the same heading
   font as the landing page template.
──────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ─── BRAND TOKENS ───────────────────────────────────────────────────
   Master token set. Redeclared here so overrides win everywhere.
   Also aliased to legacy var names used in page-home.php and
   service-page-styles.php so we don't have to rewrite every template.
──────────────────────────────────────────────────────────────────── */
:root {
    /* Official brand book values */
    --ec-bunting:     #0b364f;
    --ec-apple:       #428F33;
    --ec-jaffa:       #EE9132;
    --ec-jaffa-text:  #A55A1C; /* WCAG AA-compliant 5.3:1 on white — for text/links only */
    --ec-cinnabar:    #E73F33;
    --ec-golden-fizz: #EFF13F;
    --ec-gradient:    linear-gradient(135deg, #EE9132 0%, #E73F33 100%);
    --ec-radius:      8px;
    --ec-font-body:   'DM Sans', sans-serif;
    --ec-font-head:   'Libre Baskerville', Georgia, serif;

    /* Legacy aliases — maps old token names to brand values.
       page-home.php and service-page-styles.php use these names,
       so remapping here recolors the whole site instantly. */
    --navy:         #0b364f;
    --navy-dark:    #0D1830;
    --orange:       #EE9132;
    --orange-hover: #d4801e;
    --green:        #428F33;
    --green-hover:  #357328;
}

/* ─── GLOBAL LINK RESET ──────────────────────────────────────────────
   Remove browser / WP default blue. Inherit color from parent so
   body text links stay readable without specifying every context.
──────────────────────────────────────────────────────────────────── */
a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ─── BRANDED BUTTON — .btn-ec-primary ───────────────────────────────
   Use .btn-ec-primary for all new gradient CTA buttons going forward.
   Covers every pseudo-state so no plugin can override.
──────────────────────────────────────────────────────────────────── */
.btn-ec-primary,
a.btn-ec-primary,
button.btn-ec-primary,
.btn-ec-primary:link,
.btn-ec-primary:visited,
.btn-ec-primary:hover,
.btn-ec-primary:active,
.btn-ec-primary:focus {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: var(--ec-gradient) !important;
    color: #fff !important;
    font-family: var(--ec-font-body) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 14px 32px !important;
    border-radius: var(--ec-radius) !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity .2s, transform .2s;
    line-height: 1.2;
}

.btn-ec-primary:hover,
a.btn-ec-primary:hover {
    opacity: .88 !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* Icon inside button */
.btn-ec-primary i,
.btn-ec-primary svg {
    color: #fff !important;
    fill: #fff !important;
    flex-shrink: 0;
}

/* ─── LEGACY .btn-primary SUPPORT ───────────────────────────────────
   Existing templates use .btn-primary — keep them working.
──────────────────────────────────────────────────────────────────── */
.btn-primary,
a.btn-primary,
button.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    color: #fff !important;
    text-decoration: none !important;
}

.btn-primary i,
.btn-primary svg {
    color: #fff !important;
    fill: #fff !important;
}

/* ─── LP HEADER PHONE BUTTON ─────────────────────────────────────────
   Belt-and-suspenders for the landing page header phone CTA.
──────────────────────────────────────────────────────────────────── */
.lp-header-phone a,
.lp-header-phone a:link,
.lp-header-phone a:visited,
.lp-header-phone a:hover,
.lp-header-phone a:active {
    color: #fff !important;
    text-decoration: none !important;
}

.lp-header-phone a i {
    color: #fff !important;
}

/* ─── NAVIGATION LINKS ───────────────────────────────────────────────
   Prevent WP/plugin stylesheets from bluing nav links.
──────────────────────────────────────────────────────────────────── */
.nav-links a,
.nav-links a:link,
.nav-links a:visited {
    text-decoration: none;
}

.header-dark .nav-links a,
.header-dark .nav-links a:link,
.header-dark .nav-links a:visited {
    color: rgba(255, 255, 255, 0.9) !important;
}

.header-dark .nav-links a:hover {
    color: var(--ec-jaffa) !important;
    text-decoration: none;
}

.header-light .nav-links a,
.header-light .nav-links a:link,
.header-light .nav-links a:visited {
    color: #0b364f !important;
}

.header-light .nav-links a:hover {
    color: var(--ec-jaffa) !important;
    text-decoration: none;
}

/* ─── GRAVITY FORMS ──────────────────────────────────────────────────
   Override GF's injected link styles inside form wrappers.
──────────────────────────────────────────────────────────────────── */
.gform_wrapper a,
.gform_wrapper a:link,
.gform_wrapper a:visited {
    color: var(--ec-jaffa);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gform_wrapper a:hover {
    color: var(--ec-cinnabar);
}

/* GF submit button — gradient, white text */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper input[type="submit"] {
    background: var(--ec-gradient) !important;
    color: #fff !important;
    font-family: var(--ec-font-body) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 14px 32px !important;
    border: none !important;
    border-radius: var(--ec-radius) !important;
    cursor: pointer !important;
    transition: opacity .2s !important;
    width: 100%;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper input[type="submit"]:hover {
    opacity: .88 !important;
}

/* ─── SERVICE BANNER ─────────────────────────────────────────────────
   Keep the banner CTA button white text.
──────────────────────────────────────────────────────────────────── */
.service-banner .btn-banner,
.service-banner .btn-banner:link,
.service-banner .btn-banner:visited,
.service-banner .btn-banner:hover {
    text-decoration: none !important;
}

/* ─── STICKY BOTTOM BAR ──────────────────────────────────────────────
   Two solid buttons, edge-to-edge, no white space around them.
──────────────────────────────────────────────────────────────────── */
.sticky-bottom-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    z-index: 99999 !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.2) !important;
    background: none !important;
    box-sizing: border-box !important;
}

.sticky-bottom-bar a,
.sticky-bottom-bar .btn {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 16px 12px !important;
    margin: 0 !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    border: none !important;
    color: #fff !important;
    box-sizing: border-box !important;
    transition: opacity .2s !important;
}

.sticky-bottom-bar a:first-child,
.sticky-bottom-bar .btn:first-child {
    background: #0b364f !important;
}

.sticky-bottom-bar a:last-child,
.sticky-bottom-bar .btn:last-child {
    background: linear-gradient(135deg, #EE9132 0%, #E73F33 100%) !important;
}

.sticky-bottom-bar a:hover,
.sticky-bottom-bar .btn:hover {
    opacity: .88 !important;
    text-decoration: none !important;
}

.sticky-bottom-bar a i,
.sticky-bottom-bar .btn i {
    color: #fff !important;
    font-size: .95rem !important;
}

/* ─── FOOTER LINKS ───────────────────────────────────────────────────
──────────────────────────────────────────────────────────────────── */
footer a,
footer a:link,
footer a:visited {
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ─── MOBILE DRAWER ──────────────────────────────────────────────────
──────────────────────────────────────────────────────────────────── */
.mobile-submenu li a {
    padding-left: 40px !important;
    font-size: .9rem !important;
    color: rgba(255,255,255,0.75) !important;
}

.mobile-submenu li a:hover {
    color: #EE9132 !important;
}

/* ─── GLOBAL TYPOGRAPHY ──────────────────────────────────────────────
   Apply brand fonts site-wide. Overrides Barlow/Outfit/Barlow Condensed
   used in service pages and homepage.
──────────────────────────────────────────────────────────────────── */
body {
    font-family: 'DM Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.svc-hero h1,
.svc-intro-text h2,
.svc-process-header h2,
.svc-why-text h2,
.svc-quote-header h2,
.svc-faq-sidebar h2,
.svc-cta-band h2,
.svc-faq-q,
.cta-phone,
.btn-svc,
.btn-cta-white,
.btn-cta-ghost {
    font-family: 'Libre Baskerville', Georgia, serif !important;
}

/* Body-level elements stay DM Sans */
body, p, li, td, input, textarea, select, button,
.svc-hero-sub,
.svc-process-step p,
.svc-why-card p,
.svc-faq-a p,
.svc-checklist li {
    font-family: 'DM Sans', sans-serif !important;
}

/* ─── GRADIENT ACCENTS ───────────────────────────────────────────────
   Replace flat orange/green accent lines with Jaffa→Cinnabar gradient.
──────────────────────────────────────────────────────────────────── */

/* Hero bottom accent line */
.svc-hero::after {
    background: var(--ec-gradient) !important;
}

/* Form card top accent line */
.gf-wrap::before,
.contact-form-wrapper::before {
    background: var(--ec-gradient) !important;
}

/* Process card top accent line */
.process-card::before {
    background: var(--ec-gradient) !important;
}

/* CTA band background */
.svc-cta-band,
.cta-section,
.process-section {
    background: linear-gradient(135deg, #0b364f 0%, #0D1830 100%) !important;
}

/* Service icon circles on homepage */
.service-icon {
    background: var(--ec-gradient) !important;
}

/* Contact item icons */
.contact-item-icon {
    background: var(--ec-gradient) !important;
}

/* Stat numbers */
.stat-number {
    color: var(--ec-jaffa) !important;
}

/* Section eyebrow labels — use accessible orange for WCAG AA contrast on white */
.section-eyebrow,
.svc-hero-eyebrow,
.seo-col-label {
    color: var(--ec-jaffa-text) !important;
}

/* Quote border — keeps brand orange (decorative, not text) */
.quote-section {
    border-left-color: var(--ec-jaffa) !important;
}

/* Highlighted text — needs WCAG AA contrast */
.highlight-text {
    color: var(--ec-jaffa-text) !important;
}

/* ─── SERVICE BANNER ─────────────────────────────────────────────────
   Match Bunting exactly so banner and drawer are the same blue.
──────────────────────────────────────────────────────────────────── */
.service-banner {
    background: #0b364f !important;
}

.service-banner .btn-banner {
    background: linear-gradient(135deg, #EE9132 0%, #E73F33 100%) !important;
    color: #fff !important;
}

/* ─── HEADER ─────────────────────────────────────────────────────────
──────────────────────────────────────────────────────────────────── */
.header-dark,
header.header-dark {
    background: #0b364f !important;
}

/* ─── HAMBURGER ──────────────────────────────────────────────────────
──────────────────────────────────────────────────────────────────── */
.hamburger span {
    background: currentColor;
}

.header-dark .hamburger span {
    background: #fff;
}

.header-light .hamburger span {
    background: #0b364f;
}

/* ─── MOBILE DRAWER ──────────────────────────────────────────────────
   Full-height, Bunting background, clean list, gradient CTA button.
──────────────────────────────────────────────────────────────────── */
.mobile-drawer {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: min(320px, 85vw) !important;
    height: 100vh !important;
    background: #0b364f !important;
    z-index: 1100 !important;
    overflow-y: auto !important;
    padding: 72px 0 32px !important;
    transition: right .3s ease !important;
    box-shadow: -4px 0 24px rgba(0,0,0,0.3) !important;
}

.mobile-drawer.open {
    right: 0 !important;
}

.mobile-drawer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mobile-drawer ul li a {
    display: block !important;
    padding: 14px 28px !important;
    color: #ffffff !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    text-decoration: none !important;
    transition: background .15s, color .15s !important;
}

.mobile-drawer ul li a:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #EE9132 !important;
    text-decoration: none !important;
}

.mobile-overlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.55) !important;
    z-index: 1099 !important;
}

.mobile-overlay.open {
    display: block !important;
}

.mobile-drawer-cta {
    padding: 24px 28px 0 !important;
}

.mobile-drawer-cta a,
.mobile-drawer-cta a:link,
.mobile-drawer-cta a:visited,
.mobile-drawer-cta a:hover {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: var(--ec-gradient) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 14px 20px !important;
    border-radius: var(--ec-radius) !important;
    text-decoration: none !important;
}

/* ─── GF SUBMIT BUTTONS ──────────────────────────────────────────────
   Override any template-level green GF submit buttons to gradient.
──────────────────────────────────────────────────────────────────── */
.gf-wrap .gform_wrapper .gform_footer input[type="submit"],
.gf-wrap .gform_wrapper .gform_page_footer input[type="submit"],
.contact-form-wrapper .gform_wrapper .gform_footer input[type="submit"],
.contact-form-wrapper .gform_wrapper input[type="submit"] {
    background: var(--ec-gradient) !important;
    color: #fff !important;
}

.gf-wrap .gform_wrapper .gform_footer input[type="submit"]:hover,
.contact-form-wrapper .gform_wrapper .gform_footer input[type="submit"]:hover {
    opacity: .88 !important;
    background: var(--ec-gradient) !important;
}

/* ─── PRIMARY BUTTONS ────────────────────────────────────────────────
   Homepage .btn.btn-primary — currently green, update to gradient.
──────────────────────────────────────────────────────────────────── */
.btn.btn-primary,
a.btn.btn-primary,
.btn.btn-primary:link,
.btn.btn-primary:visited,
.btn.btn-primary:hover {
    background: var(--ec-gradient) !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(238,145,50,0.35) !important;
    text-decoration: none !important;
}

.btn-svc-green,
a.btn-svc-green,
.btn-svc-green:hover {
    background: var(--ec-gradient) !important;
    color: #fff !important;
}

/* ─── GRAVITY FORMS SUBMIT BUTTON — NUCLEAR OVERRIDE ────────────────
   Belt-and-suspenders for all GF submit buttons across the site.
   Covers all possible selectors Gravity Forms uses.
──────────────────────────────────────────────────────────────────── */
.gform_wrapper input[type="submit"],
.gform_wrapper input.gform_button,
.gform_wrapper button[type="submit"],
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper .gform_footer input.button,
.gform_wrapper .gform_footer button,
body .gform_wrapper input[type="submit"],
body .gform_wrapper .gform_button,
#gform_submit_button_20,
input#gform_submit_button_20 {
    background: linear-gradient(135deg, #EE9132 0%, #E73F33 100%) !important;
    color: #fff !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 14px 32px !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: opacity .2s !important;
    width: 100% !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

.gform_wrapper input[type="submit"]:hover,
.gform_wrapper input.gform_button:hover,
.gform_wrapper button[type="submit"]:hover,
body .gform_wrapper input[type="submit"]:hover {
    opacity: .88 !important;
    background: linear-gradient(135deg, #EE9132 0%, #E73F33 100%) !important;
    color: #fff !important;
}

/* ─── ACCESSIBILITY (WCAG AA) ────────────────────────────────────────
   Links that previously relied on color alone now have underlines.
──────────────────────────────────────────────────────────────────── */

/* License number links in footer — underline so they're distinguishable
   from surrounding text without relying on color alone. */
.footer-licenses a {
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

/* Skip-link CSS is inlined via wp_body_open in functions.php so it works
   before overrides.css (deferred) loads. Keep that source as the single source. */