/*
Theme Name:   Shielda Child
Theme URI:    https://karatzasprotect.gr
Description:  Child theme for Shielda (Karatzas Protect redesign 2026)
Author:       Karatzas Protect
Author URI:   https://karatzasprotect.gr
Template:     kava
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:  shielda-child
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* Brand colours */
    --brand-navy-900:  #0B1E3F;
    --brand-navy-700:  #162E5B;
    --brand-navy-500:  #2A4A7F;
    --brand-red-600:   #D23128;
    --brand-red-700:   #B82820;
    --accent-emerald:  #00B383;

    /* Surfaces */
    --surface-white:   #FFFFFF;
    --surface-50:      #F7F9FC;
    --surface-100:     #EEF2F9;

    /* Text */
    --text-primary:    #0F1825;
    --text-muted:      #5C6B82;
    --text-on-dark:    #FFFFFF;

    /* Borders */
    --border-subtle:   #E1E7F0;

    /* Shadows */
    --shadow-sm:  0 1px 2px rgba(15,24,37,.06);
    --shadow-md:  0 4px 12px rgba(15,24,37,.08);
    --shadow-lg:  0 12px 32px rgba(15,24,37,.12);
    --shadow-cta: 0 8px 24px rgba(210,49,40,.30);

    /* Typography */
    --font-display: 'Inter Tight', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;

    /* Spacing (8pt grid) */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-6:  24px;
    --space-8:  32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;
    --space-32: 128px;

    /* Border radius */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-2xl: 24px;
}

/* ============================================================
   DARK HEADER — overrides Kava/Shielda/JetThemeCore header
   ============================================================ */

/* Base: dark semi-transparent background */
.site-header,
#masthead,
.jet-header-wrap,
.kava-header,
header[id*="header"],
[class*="site-header"] {
    background: rgba(3, 9, 18, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    /* Always on top — above GSAP scroll-pin layers */
    position: sticky !important;
    top: 0 !important;
    z-index: 999999 !important;
}

/* All elementor sections inside the header */
.site-header .elementor-section,
.site-header .e-con,
.site-header .elementor-container {
    background: transparent !important;
}

/* Navigation links: white — scoped tightly to header only */
.site-header a,
.main-navigation a,
.jet-menu a,
.jet-nav a,
.kava-nav__item > a,
.nav-item > a,
.site-header [class*="menu"] a,
.site-header .elementor-widget-text-editor a {
    color: rgba(255,255,255,.78) !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
}
.site-header a:hover,
.main-navigation a:hover,
.jet-menu a:hover { color: #ffffff !important; text-decoration: none !important; }

/* Protect custom page buttons from header link overrides */
a.kp-btn-cinema-light,
a.kp-btn-cinema-light:link,
a.kp-btn-cinema-light:visited {
    color: #0a1628 !important;
    -webkit-text-fill-color: #0a1628 !important;
}
a.kp-btn-cinema-dark,
a.kp-btn-cinema-dark:link,
a.kp-btn-cinema-dark:visited {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Logo text */
.site-title a,
.site-branding a,
.custom-logo-link { color: #ffffff !important; }

/* Hamburger/mobile menu icon */
.menu-toggle,
.jet-mobile-menu__toggle,
[class*="hamburger"] { color: #fff !important; }

/* Sticky: already dark so no change needed */
.sticky-header,
[class*="sticky"] .site-header { background: rgba(3,9,18,.98) !important; }

/* ============================================================
   DARK FOOTER — overrides Kava/Shielda/JetThemeCore footer
   ============================================================ */

.site-footer,
#colophon,
.footer-area,
.kava-footer,
[class*="site-footer"],
footer#colophon {
    background: #030912 !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
}

/* All elementor sections inside footer */
.site-footer .elementor-section,
.site-footer .e-con,
.site-footer .elementor-container {
    background: transparent !important;
}

/* Footer text */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer div,
#colophon,
#colophon p,
#colophon li,
#colophon span {
    color: rgba(255,255,255,.45) !important;
    font-family: var(--font-body) !important;
}

/* Footer links */
.site-footer a,
#colophon a {
    color: rgba(255,255,255,.45) !important;
    text-decoration: none !important;
}
.site-footer a:hover,
#colophon a:hover { color: rgba(255,255,255,.85) !important; }

/* Footer headings */
.site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4,
#colophon h1,#colophon h2,#colophon h3,#colophon h4 {
    color: #ffffff !important;
    font-family: var(--font-display) !important;
}

/* Footer widgets input */
.site-footer input,
#colophon input {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: #fff !important;
    border-radius: 8px !important;
}

/* ============================================================
   ELEMENTOR GLOBAL TOKEN OVERRIDES
   ============================================================ */
:root {
    --e-global-color-primary:   #D23128;
    --e-global-color-secondary: #162E5B;
    --e-global-color-text:      #0F1825;
    --e-global-color-accent:    #00B383;
}

/* ============================================================
   KILL LIME GREEN  (#c4f000 everywhere)
   ============================================================ */
[style*="#c4f000"],
[style*="c4f000"] {
    background-color: var(--brand-navy-700) !important;
    color: var(--text-on-dark) !important;
}

/* Elementor sections/columns that use lime green as bg */
.elementor-element[style*="#c4f000"],
.elementor-section[style*="#c4f000"],
.elementor-column[style*="#c4f000"] {
    background-color: var(--brand-navy-700) !important;
}

/* Inline text in lime green */
*[style*="color:#c4f000"],
*[style*="color: #c4f000"] {
    color: var(--brand-red-600) !important;
}

/* ============================================================
   KILL OLD DARK NAVY  (#1a1a2e)
   ============================================================ */
[style*="#1a1a2e"] {
    background-color: var(--brand-navy-900) !important;
}

/* ============================================================
   GLOBAL TYPOGRAPHY
   ============================================================ */
body,
.elementor-widget-text-editor,
p,
li,
td {
    font-family: var(--font-body);
    color: var(--text-primary);
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
}

/* Force left-align — justified Greek text breaks badly */
body,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
p {
    text-align: left !important;
}

/* ============================================================
   BUTTONS  — primary = red CTA
   ============================================================ */
.elementor-button.elementor-button-link,
.elementor-widget-button .elementor-button,
a.elementor-button {
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: var(--radius-xl);
    transition: all .2s ease;
}

/* Red primary button */
.elementor-button[style*="background-color:#D23128"],
.elementor-button[style*="background-color: #D23128"],
.elementor-button.elementor-button-danger {
    background-color: var(--brand-red-600) !important;
    box-shadow: var(--shadow-cta);
}
.elementor-button[style*="background-color:#D23128"]:hover,
.elementor-button[style*="background-color: #D23128"]:hover {
    background-color: var(--brand-red-700) !important;
    transform: translateY(-2px);
}

/* ============================================================
   ABOUT PAGE  — fix ghost / invisible hero text
   ============================================================ */
.page-id-12 .elementor-heading-widget h1,
.page-id-12 .elementor-heading-widget h2,
.page-id-12 .elementor-widget-heading .elementor-heading-title {
    color: var(--text-on-dark) !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

/* About page: fix any near-white text on white bg */
.page-id-12 .elementor-section:first-of-type .elementor-heading-title {
    color: var(--text-on-dark) !important;
}

/* ============================================================
   FOOTER  — copyright fix (fallback if filter doesn't catch it)
   ============================================================ */
.site-footer .copyright,
.footer-copyright,
[class*="footer"] .elementor-widget-text-editor {
    font-family: var(--font-body);
}

/* ============================================================
   HEADER  — ensure nav legibility
   ============================================================ */
.site-header,
.main-navigation {
    font-family: var(--font-body);
}

/* ============================================================
   TRUST BAR  (class we'll add in Elementor)
   ============================================================ */
.kp-trust-bar {
    background: var(--brand-navy-700);
    color: var(--text-on-dark);
    padding: var(--space-3) 0;
    font-size: 13px;
    font-weight: 500;
}
.kp-trust-bar ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6);
    margin: 0; padding: 0;
}
.kp-trust-bar li { display: flex; align-items: center; gap: var(--space-2); }

/* ============================================================
   PROCESS STEPS  (class we'll add in Elementor)
   ============================================================ */
.kp-steps-wrap {
    counter-reset: kp-step;
    display: flex;
    gap: var(--space-8);
    justify-content: center;
    flex-wrap: wrap;
}
.kp-step-item {
    counter-increment: kp-step;
    flex: 1 1 200px;
    max-width: 240px;
    text-align: center;
    position: relative;
}
.kp-step-item::before {
    content: counter(kp-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    background: var(--brand-red-600);
    color: #fff;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 800;
    font-family: var(--font-display);
    margin: 0 auto var(--space-4);
}

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */
@media (max-width: 767px) {
    .kp-mobile-cta {
        position: fixed;
        bottom: 16px; left: 16px; right: 16px;
        z-index: 9999;
        background: var(--brand-red-600);
        color: #fff !important;
        text-align: center;
        padding: 14px 24px;
        border-radius: var(--radius-xl);
        font-weight: 700;
        font-family: var(--font-body);
        box-shadow: var(--shadow-cta);
        text-decoration: none;
        display: block;
    }
}