/* ═══════════════════════════════════════════════════════════════
   CHROME.CSS — single source of truth for site-wide nav + footer
   Loaded LAST by partials/site-header.php so it overrides any
   chrome rules left in service.css / blog.css. Edit nav/footer
   styling for the WHOLE site here.
   ───────────────────────────────────────────────────────────────
   Covers BOTH bare <header>/<nav>/<footer> (archive-style) AND
   .site-header/.nav/.site-footer class forms.
═══════════════════════════════════════════════════════════════ */

:root{
    --ink:#14110F; --ink-2:#3A332D; --ink-soft:#5C544D;
    --paper:#FBF7EF; --paper-2:#F2ECE0; --white:#FFFFFF;
    --lime:#C6F24E; --lime-d:#A6D628;
    --violet:#5B3DF5; --violet-d:#4326D6;
    --coral:#FF5436; --coral-d:#E33A1E; --blue:#2563EB; --warn:#E8A317;
    /* legacy aliases so inline var() in markup/JS still resolve */
    --terracotta:#FF5436; --terracotta-d:#E33A1E; --teal:#5B3DF5; --teal-d:#4326D6;
    --deep-brown:#14110F; --cream:#FBF7EF; --sand:#F2ECE0; --gray:#5C544D; --gray-light:#8C857C;
    --line:#14110F; --border:#14110F;
    --font-head:'Space Grotesk', system-ui, sans-serif;
    --font-body:'Instrument Sans', system-ui, sans-serif;
    --max-w:1180px; --bd:2.5px solid var(--line);
    --shadow-sm:3px 3px 0 var(--ink); --shadow-md:5px 5px 0 var(--ink); --shadow-lg:8px 8px 0 var(--ink);
    --shadow-hard:5px 5px 0 var(--ink); --shadow-lime:5px 5px 0 var(--lime-d);
    --t:.22s cubic-bezier(.2,.7,.3,1);
}

.skip-link{
    position:absolute; left:-9999px; top:0; background:var(--lime); color:var(--ink);
    padding:10px 16px; border:2.5px solid var(--ink); font-weight:700; z-index:2000; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

/* ─── HEADER / NAV (bare + class forms) ─── */
.site-header, body > header{
    background:var(--paper); border-bottom:var(--bd); position:sticky; top:0; z-index:1000;
}
.site-header .container, body > header .container{ padding-top:14px; padding-bottom:14px; }
.site-header nav, body > header nav, .nav{
    display:flex; justify-content:space-between; align-items:center; gap:18px;
}
.sa-logo{
    font-family:var(--font-head)!important; font-weight:700!important; color:var(--ink)!important;
    font-size:1.6rem!important; letter-spacing:-.01em!important;
}
.sa-logo .accent{ color:var(--coral)!important; }

.nav-links{ display:flex; align-items:center; gap:6px; list-style:none; margin-left:auto; }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-links > li{ position:relative; }
.nav-links > li > a, .nav-links a{
    font-family:var(--font-head); font-size:.92rem; font-weight:500; color:var(--ink);
    padding:9px 13px; border-radius:8px; display:inline-flex; align-items:center; gap:5px;
}
.nav-links a:hover, .nav-links a.active{ background:var(--ink); color:var(--lime); }
.nav-cta, .nav-links .nav-cta{
    background:var(--lime)!important; color:var(--ink)!important; border:var(--bd);
    font-weight:700!important; box-shadow:3px 3px 0 var(--ink);
}
.nav-cta:hover, .nav-links .nav-cta:hover{
    background:var(--coral)!important; color:#fff!important; transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink);
}
.nav-dropdown{
    position:absolute; top:calc(100% + 10px); left:0; background:var(--white); border:var(--bd);
    border-radius:14px; box-shadow:var(--shadow-lg); padding:8px; min-width:240px;
    opacity:0; visibility:hidden; transform:translateY(8px); transition:all var(--t);
}
.nav-links > li:hover > .nav-dropdown, .nav-links > li:focus-within > .nav-dropdown{
    opacity:1; visibility:visible; transform:translateY(0);
}
.nav-dropdown a{ display:block; padding:10px 14px; border-radius:8px; font-size:.9rem; font-weight:500; color:var(--ink); }
.nav-dropdown a:hover{ background:var(--paper-2); color:var(--violet); }
.mobile-toggle{
    display:none; background:var(--lime); border:var(--bd); border-radius:10px; width:46px; height:46px;
    font-size:1.4rem; color:var(--ink); cursor:pointer; box-shadow:3px 3px 0 var(--ink);
    align-items:center; justify-content:center;
}

/* ─── BUTTONS (shared) ─── */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px;
    border-radius:12px; font-family:var(--font-head); font-size:.95rem; font-weight:700; border:var(--bd);
    cursor:pointer; background:var(--white); color:var(--ink); box-shadow:var(--shadow-md);
    transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t); min-height:46px;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-lg); }
.btn-primary{ background:var(--coral); color:#fff; }
.btn-dark{ background:var(--ink); color:var(--lime); }
.btn-secondary,.btn-white{ background:var(--white); color:var(--ink); }
.btn-lime{ background:var(--lime); color:var(--ink); }

/* ─── FOOTER (bare + class forms) ─── */
.site-footer, body > footer{
    background:var(--ink); color:rgba(255,255,255,.78); padding:60px 0 28px; border-top:var(--bd);
}
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; margin-bottom:40px; }
.footer-brand{ display:inline-flex; align-items:center; margin-bottom:14px; }
.footer-logo-img{ height:46px; width:auto; }
.footer-brand-name{ font-family:var(--font-head); font-weight:700; font-size:1.4rem; color:#fff; }
.footer-brand-name span{ color:var(--coral); }
.site-footer p, body > footer p{ color:rgba(255,255,255,.62); font-size:.92rem; line-height:1.7; max-width:340px; }
.site-footer h4, body > footer h4{
    color:#fff; font-family:var(--font-head); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px;
}
.footer-links, body > footer ul{ list-style:none; }
.footer-links li, body > footer ul li{ margin-bottom:10px; }
.footer-links a, body > footer ul a{
    color:rgba(255,255,255,.7); font-size:.92rem; display:inline-flex; align-items:center; gap:8px;
}
.footer-links a:hover, body > footer ul a:hover{ color:var(--lime); }
.social-links{ display:flex; gap:10px; margin-top:18px; }
.social-links a{
    width:42px; height:42px; border-radius:10px; background:rgba(255,255,255,.08);
    border:2px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; color:#fff;
}
.social-links a:hover{ background:var(--lime); color:var(--ink); border-color:var(--lime); transform:translate(-2px,-2px); }
.footer-bottom{
    border-top:2px solid rgba(255,255,255,.12); padding-top:22px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.85rem; color:rgba(255,255,255,.55);
}
.footer-bottom a{ color:rgba(255,255,255,.7); }
.footer-bottom a:hover{ color:var(--lime); }

/* ─── FLOATING WHATSAPP + STICKY MOBILE CTA ─── */
.wa-float{
    position:fixed; bottom:24px; right:20px; z-index:1200; width:58px; height:58px; border-radius:50%;
    background:#25D366; color:#fff; border:var(--bd); box-shadow:var(--shadow-hard);
    display:flex; align-items:center; justify-content:center; font-size:1.7rem; transition:transform var(--t);
}
.wa-float:hover{ transform:scale(1.06); }
.mobile-cta-bar{ display:none; }

/* ─── RESPONSIVE CHROME ─── */
@media (max-width:960px){
    .mobile-toggle{ display:flex; }
    .nav-links{
        position:fixed; top:75px; right:0; width:82%; max-width:330px; height:calc(100vh - 75px);
        background:var(--paper); border-left:var(--bd); flex-direction:column; align-items:stretch;
        padding:22px; gap:8px; display:none; overflow-y:auto;
    }
    .nav-links.open, .nav-links.active{ display:flex; }
    .nav-links a{ display:block; }
    .nav-dropdown{
        position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none;
        padding:4px 0 4px 12px; min-width:0; margin-top:4px;
    }
    .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
    .wa-float{ bottom:78px; }
    .mobile-cta-bar{
        display:flex; gap:10px; position:fixed; bottom:0; left:0; right:0; z-index:1190;
        background:var(--paper); border-top:var(--bd); padding:10px 14px;
    }
    .mobile-cta-bar .btn{ flex:1; min-height:48px; box-shadow:3px 3px 0 var(--ink); }
}
@media (max-width:640px){
    .footer-grid{ grid-template-columns:1fr; }
    .footer-bottom{ flex-direction:column; }
}
@media (prefers-reduced-motion: reduce){
    .btn:hover, .wa-float:hover{ transform:none; }
}

/* ═══════════════════════════════════════════════
   LANGUAGE SWITCHER  (EN / DE / AR)
   Desktop: dropdown anchored to a globe button.
   Mobile : full-height side popup sliding from the right.
═══════════════════════════════════════════════ */
.lang-switch{ position:relative; flex-shrink:0; }
.lang-btn{
    display:inline-flex; align-items:center; gap:7px; background:var(--white); border:var(--bd);
    border-radius:10px; padding:8px 13px; min-height:44px; cursor:pointer;
    font-family:var(--font-head); font-weight:700; font-size:.85rem; color:var(--ink);
    box-shadow:3px 3px 0 var(--ink); transition:transform var(--t),box-shadow var(--t),background var(--t);
}
.lang-btn:hover{ background:var(--lime); transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.lang-btn .bi-translate{ font-size:1.05rem; }
.lang-current{ letter-spacing:.04em; }

.lang-backdrop{ display:none; }

.lang-menu{
    position:absolute; top:calc(100% + 10px); right:0; z-index:1310;
    background:var(--white); border:var(--bd); border-radius:14px; box-shadow:var(--shadow-lg);
    padding:8px; min-width:230px;
    opacity:0; visibility:hidden; transform:translateY(8px); transition:all var(--t);
}
.lang-switch.open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-menu-head{ display:none; }
.lang-opt{
    display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
    background:var(--white); border:2px solid transparent; border-radius:10px; padding:11px 14px;
    font-family:var(--font-head); font-weight:600; font-size:.95rem; color:var(--ink);
    transition:background var(--t),border-color var(--t);
}
.lang-opt:hover{ background:var(--paper-2); }
.lang-opt.active{ background:var(--lime); border-color:var(--ink); }
.lang-opt .lang-code{
    margin-left:auto; font-family:var(--font-head); font-size:.7rem; font-weight:700;
    background:var(--ink); color:var(--lime); border-radius:30px; padding:2px 9px; letter-spacing:.05em;
}
.lang-opt.active .lang-code{ background:var(--ink); color:var(--lime); }
.lang-native{ direction:rtl; }

@media (max-width:960px){
    .lang-backdrop{
        display:block; position:fixed; inset:0; background:rgba(20,17,15,.45);
        z-index:1300; opacity:0; visibility:hidden; transition:opacity var(--t);
    }
    .lang-switch.open .lang-backdrop{ opacity:1; visibility:visible; }
    .lang-menu{
        position:fixed; top:0; right:0; height:100vh; width:84%; max-width:330px;
        border-radius:0; border-top:none; border-right:none; border-bottom:none;
        padding:20px; z-index:1310; min-width:0;
        opacity:1; visibility:visible; transform:translateX(100%); transition:transform var(--t);
    }
    .lang-switch.open .lang-menu{ transform:translateX(0); }
    .lang-menu-head{
        display:flex; justify-content:space-between; align-items:center;
        margin-bottom:18px; padding-bottom:14px; border-bottom:2px solid var(--paper-2);
    }
    .lang-menu-head h3{ font-family:var(--font-head); font-size:1.1rem; }
    .lang-close{
        background:var(--lime); border:var(--bd); border-radius:10px; width:40px; height:40px;
        font-size:1.1rem; color:var(--ink); cursor:pointer; box-shadow:2px 2px 0 var(--ink);
        display:flex; align-items:center; justify-content:center;
    }
    .lang-opt{ padding:15px 16px; font-size:1.05rem; margin-bottom:10px; border:var(--bd); box-shadow:3px 3px 0 var(--ink); }
}

/* ── Hide Google Translate's injected banner/tooltip chrome ── */
.goog-te-banner-frame, .goog-te-banner-frame.skiptranslate{ display:none !important; }
body{ top:0 !important; position:static !important; }
.goog-te-gadget{ height:0; width:0; overflow:hidden; font-size:0 !important; }
.goog-te-gadget .goog-te-combo{ display:none; }
#goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip{ display:none !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }
img.goog-te-gadget-icon{ display:none; }

/* ── Light RTL handling when Arabic is active ── */
html[dir="rtl"] body{ text-align:right; }
html[dir="rtl"] .nav-links{ margin-left:0; margin-right:auto; }
html[dir="rtl"] .lang-menu{ right:auto; left:0; }
@media (max-width:960px){
    html[dir="rtl"] .lang-menu{ left:0; right:auto; transform:translateX(-100%); border-left:none; border-right:var(--bd); }
    html[dir="rtl"] .lang-switch.open .lang-menu{ transform:translateX(0); }
}