/*
Theme Name:   EICG Glass
Theme URI:    https://eicg.com.et/
Description:  Liquid-glass design system for Ethiopian Investment Consulting Group. Astra child theme. Provides design tokens, a glass material, and opt-in utility classes for use in Elementor's Advanced > CSS Classes field.
Author:       EICG
Template:     astra
Version:      1.0.0
Text Domain:  eicg-glass
*/

/* ==========================================================================
   1. TOKENS
   Light palette on bare :root. Dark redefines tokens only.
   ========================================================================== */
:root{
  --eicg-ground:#EEF1EC;
  --eicg-ground-2:#E3E8E1;
  --eicg-ink:#0C1B16;
  --eicg-ink-2:#3A4A43;
  --eicg-ink-3:#6B7A72;
  --eicg-jade:#186049;
  --eicg-jade-lift:#1E7A5C;
  --eicg-brass:#8A6A18;
  --eicg-line:rgba(12,27,22,.14);

  --eicg-glass-bg:rgba(255,255,255,.55);
  --eicg-glass-bg-2:rgba(255,255,255,.38);
  --eicg-glass-edge:rgba(255,255,255,.75);
  --eicg-glass-spec:rgba(255,255,255,.9);
  --eicg-glass-shadow:0 18px 50px -20px rgba(12,27,22,.28);

  --eicg-blob-a:#7FC9A9;
  --eicg-blob-b:#E3C877;
  --eicg-blob-c:#A9D6E5;
  --eicg-field-alpha:.55;

  --eicg-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --eicg-mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;

  --eicg-r:18px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --eicg-ground:#081714;
    --eicg-ground-2:#0C211C;
    --eicg-ink:#EAF2EE;
    --eicg-ink-2:#B4C6BE;
    --eicg-ink-3:#7E938B;
    --eicg-jade:#3FA07C;
    --eicg-jade-lift:#57BE97;
    --eicg-brass:#C8A24A;
    --eicg-line:rgba(234,242,238,.14);

    --eicg-glass-bg:rgba(255,255,255,.07);
    --eicg-glass-bg-2:rgba(255,255,255,.045);
    --eicg-glass-edge:rgba(255,255,255,.16);
    --eicg-glass-spec:rgba(255,255,255,.32);
    --eicg-glass-shadow:0 24px 60px -24px rgba(0,0,0,.7);

    --eicg-blob-a:#1E6B54;
    --eicg-blob-b:#8A6A18;
    --eicg-blob-c:#12414F;
    --eicg-field-alpha:.9;
  }
}

:root[data-theme="dark"]{
  --eicg-ground:#081714;
  --eicg-ground-2:#0C211C;
  --eicg-ink:#EAF2EE;
  --eicg-ink-2:#B4C6BE;
  --eicg-ink-3:#7E938B;
  --eicg-jade:#3FA07C;
  --eicg-jade-lift:#57BE97;
  --eicg-brass:#C8A24A;
  --eicg-line:rgba(234,242,238,.14);

  --eicg-glass-bg:rgba(255,255,255,.07);
  --eicg-glass-bg-2:rgba(255,255,255,.045);
  --eicg-glass-edge:rgba(255,255,255,.16);
  --eicg-glass-spec:rgba(255,255,255,.32);
  --eicg-glass-shadow:0 24px 60px -24px rgba(0,0,0,.7);

  --eicg-blob-a:#1E6B54;
  --eicg-blob-b:#8A6A18;
  --eicg-blob-c:#12414F;
  --eicg-field-alpha:.9;
}

/* ==========================================================================
   2. GROUND + AMBIENT FIELD  — OPT-IN ONLY
   Everything in this section is scoped to body.eicg-glass-on, which
   functions.php adds only to pages containing an element with the class
   `eicg-page`. Pages that have not opted in are completely untouched, so this
   theme is safe to activate on a live site.
   ========================================================================== */
body.eicg-glass-on{
  background:var(--eicg-ground);
  color:var(--eicg-ink);
}
#eicg-field{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
/* Lift real content above the field without touching Elementor's own stacking. */
body.eicg-glass-on #page,
body.eicg-glass-on .site,
body.eicg-glass-on .ast-container{position:relative;z-index:1}

/* ==========================================================================
   3. BASE TYPOGRAPHY — also opt-in
   ========================================================================== */
body.eicg-glass-on h1,
body.eicg-glass-on h2,
body.eicg-glass-on h3,
body.eicg-glass-on .elementor-widget-heading .elementor-heading-title{
  font-family:var(--eicg-display);
  letter-spacing:-.01em;
  text-wrap:balance;
  color:var(--eicg-ink);
}
body.eicg-glass-on p,
body.eicg-glass-on li{color:var(--eicg-ink-2)}
body.eicg-glass-on a{color:var(--eicg-jade)}
body.eicg-glass-on a:hover,
body.eicg-glass-on a:focus{color:var(--eicg-jade-lift)}
body.eicg-glass-on :focus-visible{outline:2px solid var(--eicg-brass);outline-offset:3px;border-radius:6px}

/* ==========================================================================
   4. GLASS MATERIAL — opt-in
   Add via Elementor > Advanced > CSS Classes.
   ========================================================================== */
.eicg-glass{
  background:var(--eicg-glass-bg);
  -webkit-backdrop-filter:blur(24px) saturate(1.7);
  backdrop-filter:blur(24px) saturate(1.7);
  border:1px solid var(--eicg-glass-edge);
  border-radius:var(--eicg-r);
  box-shadow:var(--eicg-glass-shadow),inset 0 1px 0 var(--eicg-glass-spec);
}
.eicg-glass-soft{
  background:var(--eicg-glass-bg-2);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--eicg-glass-edge);
  border-radius:var(--eicg-r);
  box-shadow:inset 0 1px 0 var(--eicg-glass-spec);
}
/* Hover lift for cards. Pair with .eicg-glass. */
.eicg-lift{transition:transform .22s ease,border-color .22s ease}
.eicg-lift:hover{transform:translateY(-3px);border-color:var(--eicg-brass)}

/* Rounded pill, for nav bars and CTAs */
.eicg-pill{border-radius:999px}

/* ==========================================================================
   5. TEXT UTILITIES
   ========================================================================== */
.eicg-eyebrow,
.eicg-eyebrow .elementor-heading-title{
  font-family:var(--eicg-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--eicg-brass);
  font-weight:500;
}
.eicg-lede,
.eicg-lede p{
  font-size:clamp(1.05rem,1.6vw,1.22rem);
  color:var(--eicg-ink-2);
  line-height:1.6;
}
.eicg-stat-number,
.eicg-stat-number .elementor-heading-title{
  font-family:var(--eicg-display);
  font-size:clamp(2rem,4vw,2.5rem);
  line-height:1;
  color:var(--eicg-brass);
  font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   6. BUTTONS
   Applies to Elementor buttons and WPForms submit without extra classes.
   ========================================================================== */
.eicg-btn .elementor-button,
body.eicg-glass-on .wpforms-submit{
  background:var(--eicg-jade)!important;
  color:#fff!important;
  border:1px solid transparent!important;
  border-radius:999px!important;
  padding:.75rem 1.5rem!important;
  font-weight:600!important;
  box-shadow:0 8px 22px -10px var(--eicg-jade);
  transition:background .18s ease,transform .18s ease;
}
.eicg-btn .elementor-button:hover,
body.eicg-glass-on .wpforms-submit:hover{
  background:var(--eicg-jade-lift)!important;
  transform:translateY(-1px);
}
.eicg-btn-ghost .elementor-button{
  background:var(--eicg-glass-bg-2)!important;
  color:var(--eicg-ink)!important;
  border:1px solid var(--eicg-glass-edge)!important;
  box-shadow:none;
}
.eicg-btn-ghost .elementor-button:hover{border-color:var(--eicg-brass)!important}

/* ==========================================================================
   7. IMAGES
   ========================================================================== */
.eicg-photo img{
  border-radius:14px;
  border:1px solid var(--eicg-glass-edge);
  display:block;
  width:100%;
  height:auto;
}
/* Placeholder frame for positions with no photo yet. */
.eicg-photo-empty{
  position:relative;
  min-height:220px;
  border-radius:14px;
  border:1px dashed var(--eicg-brass);
  background:
    radial-gradient(120% 90% at 18% 12%, color-mix(in srgb,var(--eicg-jade) 40%, transparent), transparent 62%),
    radial-gradient(100% 80% at 88% 82%, color-mix(in srgb,var(--eicg-brass) 32%, transparent), transparent 60%),
    linear-gradient(150deg,var(--eicg-ground-2),var(--eicg-ground));
}

/* ==========================================================================
   8. WPFORMS — investor inquiry
   ========================================================================== */
body.eicg-glass-on .wpforms-container .wpforms-field-label{
  font-size:.8rem!important;
  font-weight:600!important;
  color:var(--eicg-ink-2)!important;
  letter-spacing:.01em;
}
body.eicg-glass-on .wpforms-container input[type=text],
body.eicg-glass-on .wpforms-container input[type=email],
body.eicg-glass-on .wpforms-container input[type=tel],
body.eicg-glass-on .wpforms-container input[type=url],
body.eicg-glass-on .wpforms-container input[type=number],
body.eicg-glass-on .wpforms-container select,
body.eicg-glass-on .wpforms-container textarea{
  background:var(--eicg-glass-bg-2)!important;
  border:1px solid var(--eicg-glass-edge)!important;
  border-radius:11px!important;
  color:var(--eicg-ink)!important;
  padding:.7rem .9rem!important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:border-color .18s ease,background .18s ease;
}
body.eicg-glass-on .wpforms-container input:focus,
body.eicg-glass-on .wpforms-container select:focus,
body.eicg-glass-on .wpforms-container textarea:focus{
  border-color:var(--eicg-brass)!important;
  background:var(--eicg-glass-bg)!important;
  outline:none!important;
}
body.eicg-glass-on .wpforms-container select option{background:var(--eicg-ground);color:var(--eicg-ink)}
body.eicg-glass-on .wpforms-container .wpforms-field-description{color:var(--eicg-ink-3)!important;font-size:.82rem!important}
body.eicg-glass-on .wpforms-confirmation-container-full{
  background:var(--eicg-glass-bg)!important;
  border:1px solid var(--eicg-glass-edge)!important;
  border-radius:var(--eicg-r)!important;
  color:var(--eicg-ink)!important;
}

/* ==========================================================================
   9. MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .eicg-lift,
  .eicg-btn .elementor-button,
  body.eicg-glass-on .wpforms-submit{transition:none}
  .eicg-lift:hover,
  .eicg-btn .elementor-button:hover,
  body.eicg-glass-on .wpforms-submit:hover{transform:none}
}

/* ==========================================================================
   10. ASTRA HEADER + FOOTER
   These sit outside the Elementor content and carry their own Customizer
   background, so they stay white unless overridden. Astra emits its colours as
   high-specificity inline CSS, hence !important here — scoped to opted-in pages
   only, so the rest of the site is unaffected.
   ========================================================================== */
body.eicg-glass-on .site-header,
body.eicg-glass-on .ast-main-header-wrap,
body.eicg-glass-on .main-header-bar,
body.eicg-glass-on .ast-primary-header-bar,
body.eicg-glass-on .site-primary-header-wrap,
body.eicg-glass-on .ast-above-header-wrap,
body.eicg-glass-on .ast-below-header-wrap{
  background:transparent!important;
  border-bottom-color:var(--eicg-line)!important;
}

/* Frost the primary bar so it reads as glass rather than a floating strip. */
body.eicg-glass-on .ast-primary-header-bar,
body.eicg-glass-on .main-header-bar{
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  background:var(--eicg-glass-bg-2)!important;
  box-shadow:inset 0 1px 0 var(--eicg-glass-spec);
}

body.eicg-glass-on .site-footer,
body.eicg-glass-on .site-primary-footer-wrap,
body.eicg-glass-on .site-above-footer-wrap,
body.eicg-glass-on .site-below-footer-wrap,
body.eicg-glass-on .ast-small-footer,
body.eicg-glass-on .footer-adv{
  background:transparent!important;
  border-top:1px solid var(--eicg-line);
}

/* Header and footer text must follow the palette, not Astra's dark defaults. */
body.eicg-glass-on .site-header .site-title a,
body.eicg-glass-on .site-header .site-title,
body.eicg-glass-on .ast-site-identity .site-title a{
  color:var(--eicg-ink)!important;
}
body.eicg-glass-on .site-header .site-description,
body.eicg-glass-on .site-footer,
body.eicg-glass-on .site-footer p{
  color:var(--eicg-ink-3)!important;
}
body.eicg-glass-on .main-header-menu a,
body.eicg-glass-on .ast-header-break-point .main-header-menu a,
body.eicg-glass-on .site-footer a{
  color:var(--eicg-ink-2)!important;
}
body.eicg-glass-on .main-header-menu a:hover,
body.eicg-glass-on .main-header-menu .current-menu-item > a,
body.eicg-glass-on .site-footer a:hover{
  color:var(--eicg-jade)!important;
}

/* Mobile menu panel needs an opaque ground or it is unreadable over the field. */
body.eicg-glass-on .ast-mobile-popup-drawer .ast-mobile-popup-inner,
body.eicg-glass-on .main-navigation .sub-menu,
body.eicg-glass-on .ast-desktop .main-header-menu .sub-menu{
  background:var(--eicg-ground-2)!important;
  border:1px solid var(--eicg-glass-edge);
}

/* Hamburger icon */
body.eicg-glass-on .ast-mobile-menu-trigger-minimal,
body.eicg-glass-on .menu-toggle{
  color:var(--eicg-ink)!important;
  background:transparent!important;
}

/* ==========================================================================
   11. SAFETY
   backdrop-filter is unsupported on a small number of older browsers.
   Without this the glass panels render fully transparent and text floats.
   ========================================================================== */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .eicg-glass,.eicg-glass-soft{
    background:var(--eicg-ground-2);
  }
  body.eicg-glass-on .wpforms-container input[type=text],
  body.eicg-glass-on .wpforms-container input[type=email],
  body.eicg-glass-on .wpforms-container select,
  body.eicg-glass-on .wpforms-container textarea{
    background:var(--eicg-ground-2)!important;
  }
}