/*
Theme Name: شركة ميكال الألمانية لمكافحة الحشرات والقوارض
Theme URI: https://mikalgerman.com
Author: شركة ميكال الألمانية
Author URI: https://mikalgerman.com
Description: شركة ميكال الألمانية لمكافحة الحشرات والقوارض - قالب مخصص عالي الأداء متوافق مع ACF، يدعم RTL والعربية بالكامل.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mikal-theme
Domain Path: /languages
Tags: rtl-language-support, custom-menu, featured-images, translation-ready, custom-logo
*/

/*
 * Design Tokens (CSS Variables)
 * Premium design system — warm greens, amber accent, layered depth
 */
:root {
    /* ─── Primary ─── */
    --clr-primary: #0a5c18;
    --clr-primary-hover: #084d14;
    --clr-primary-light: #e8f5e9;
    --clr-primary-container: #1b7a2b;
    --clr-on-primary: #ffffff;
    --clr-on-primary-container: #cbffc2;
    --clr-inverse-primary: #88d982;

    /* ─── Accent — warm amber ─── */
    --clr-accent: #e8a817;
    --clr-accent-hover: #d49a0e;
    --clr-accent-light: #fef3cd;

    /* ─── Secondary ─── */
    --clr-secondary: #006e1c;

    /* ─── Surface — warm cream tones ─── */
    --clr-surface: #fafaf5;
    --clr-surface-warm: #f5f2eb;
    --clr-surface-card: #ffffff;
    --clr-surface-dim: #edeae3;
    --clr-surface-container: #f0ede6;
    --clr-surface-container-lowest: #ffffff;
    --clr-surface-container-highest: #e5e2db;

    /* ─── Dark surfaces ─── */
    --clr-surface-dark: #0f1a0f;
    --clr-surface-darker: #080f08;
    --clr-surface-dark-alt: #162117;
    --clr-inverse-surface: #293040;
    --clr-inverse-on-surface: #edf0ff;

    /* ─── Text ─── */
    --clr-text-primary: #1a1f1a;
    --clr-text-secondary: #4a5548;
    --clr-text-muted: #6b7a6b;
    --clr-text-on-dark: #f0f5ec;
    --clr-text-on-dark-muted: rgba(240, 245, 236, 0.7);

    /* ─── Legacy mappings ─── */
    --clr-on-surface: #1a1f1a;
    --clr-on-surface-variant: #4a5548;

    /* ─── Outline ─── */
    --clr-outline: #707a6c;
    --clr-outline-variant: #c2c9bd;

    /* ─── Typography ─── */
    --font-display: 'Cairo', sans-serif;
    --font-body: 'Cairo', sans-serif;
    --font-family-base: 'Cairo', sans-serif;

    /* ─── Shadows — layered depth system ─── */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08);

    /* ─── Border Radius ─── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-pill: 999px;

    /* ─── Easing ─── */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 200ms;
    --duration-normal: 350ms;
    --duration-slow: 600ms;

    /* ─── Spacing ─── */
    --spacing-unit: 8px;
    --container-max-width: 1280px;
    --margin-mobile: 24px;
    --margin-desktop: 80px;
    --section-padding: clamp(80px, 10vw, 160px);
    --gutter: 24px;

    /* ─── Premium Typography ─── */
    --font-cairo: 'Cairo', sans-serif;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar { display: none; }

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  /* Unified Corporate Icon System: 
     Weight 300 (slimmer, engineered look)
     Fill 0 (strict outlines)
     Optical Size 24 */
  font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24;
}

/* ─── Impeccable Animation Skills ─── */
@keyframes impeccable-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes impeccable-scale-fade {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Base hidden state for elements before reveal */
.reveal-up,
.services-reveal,
.hero-choreo,
.hero-float-card {
    opacity: 0;
}

/* Impeccable motion application */
.animate-impeccable-reveal,
.hero-choreo,
.hero-float-card,
.reveal-up.is-visible,
.services-reveal.services-revealed {
    animation: impeccable-fade-in-up 800ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.animate-impeccable-scale {
    opacity: 0;
    animation: impeccable-scale-fade 1000ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* Stagger Delays for cinematic continuity */
[data-hero-step="1"], [data-float-delay="1"], [data-stagger="1"] { animation-delay: 100ms; }
[data-hero-step="2"], [data-float-delay="2"], [data-stagger="2"] { animation-delay: 200ms; }
[data-hero-step="3"], [data-float-delay="3"], [data-stagger="3"] { animation-delay: 300ms; }
[data-hero-step="4"], [data-float-delay="4"], [data-stagger="4"] { animation-delay: 400ms; }
[data-hero-step="5"], [data-float-delay="5"], [data-stagger="5"] { animation-delay: 500ms; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* ============================================================
   GLOBAL DESIGN TOKENS (un-prefixed aliases)
   Relocated from hero-premium.css so the --primary/--accent/
   --surface/--text-* tokens are available on EVERY page, not
   just the front page (hero-premium.css is now front-page-only).
   The --clr-* set above remains the canonical source; these
   mirror it for the many components that reference the short names.
   ============================================================ */
:root {
    /* Brand Colors */
    --primary: #0a5c18;
    --primary-hover: #084d14;
    --primary-light: #e8f5e9;
    --primary-container: #1b7a2b;
    --on-primary: #ffffff;
    --on-primary-container: #cbffc2;
    --inverse-primary: #88d982;

    --accent: #e8a817;
    --accent-hover: #d49a0e;
    --accent-light: #fef3cd;

    --secondary: #006e1c;

    --surface: #fafaf5;
    --surface-warm: #f5f2eb;
    --surface-card: #ffffff;
    --surface-dim: #edeae3;

    --surface-dark: #0f1a0f;
    --surface-dark-alt: #162117;
    --inverse-surface: #293040;
    --inverse-on-surface: #edf0ff;

    --text-primary: #1a1f1a;
    --text-secondary: #4a5548;
    --text-muted: #6b7a6b;
    --text-on-dark: #f0f5ec;
    --text-on-dark-muted: rgba(240, 245, 236, 0.7);
}