/*!
Theme Name: UiCore Pro Child
Theme URI: https://uicore.co
Description: One framework for all your website needs.
Author: UiCore
Author URI: https://uicore.co
Template: uicore-pro
Version: 1.0.0
Text Domain: uicore-pro
*/

 /* Add your custom style here */

 :root{
  --bg:#0a3428;
  --paper:#f3f5ea;
  --ink:#0f3a2c;
  --leaf:#137a3d;
  --accent:#e57a00;

  --mega-w: 620px;
  --mega-x: 0px;
  --radius: 22px;
  --t-fast: 160ms;
  --t-slow: 320ms;
  --easing: cubic-bezier(.22,.8,.28,1);

  --panel-h: auto;  /* computed via JS */
  --zone-h: 440px;  /* computed via JS */
}

.mega-host{ position:relative; }

/* optional underline cue for active top item */
.mega-nav > li{ position:relative }
.mega-nav > li.is-hot > a::after{
  content:"";display:block;height:3px;border-radius:2px;background:var(--accent);
}

/* ===== Hover zone (no dead gap) ===== */
.hover-zone{
  position:absolute;left:0;right:0;top:100%;
  height:var(--zone-h, 440px);
  pointer-events:none; opacity:0; visibility:hidden;
  transition:opacity 220ms ease, visibility 0ms linear 220ms;
}
.hover-zone.is-open{ pointer-events:auto; opacity:1; visibility:visible; transition:opacity 220ms ease; }

/* Frame */
.mega{ position:absolute; top:0; left:0; right:0; height:100%; }

/* White card */
.card{
  position:absolute; top:18px; left:var(--mega-x); width:var(--mega-w);
  background:var(--paper); color:var(--ink);
  border-radius:var(--radius); box-shadow:0 10px 28px rgba(0,0,0,.35);
  transform:translateX(-14px); opacity:0; overflow:hidden;
  transition:left var(--t-slow) var(--easing), transform var(--t-slow) var(--easing), opacity var(--t-slow) ease;
  height:var(--panel-h, auto);
}
.hover-zone.is-open .card{ transform:none; opacity:1; }

.card-inner{ padding:28px; position:relative; min-height:120px; }
.section{
  position:absolute; inset:0; padding:0;
  opacity:0; transform:translateY(6px);
  transition:opacity var(--t-slow) ease, transform var(--t-slow) var(--easing);
  pointer-events:none;
}
.section.is-active{ opacity:1; transform:none; pointer-events:auto; }
.section h3{ margin:0 0 10px 0; font-size:28px; }
.links{ list-style:none; margin:12px 0 0 0; padding:0; }
.links li{ margin:8px 0; }
.links a{
  display:block; text-decoration:none; color:#123e2e;
  font-size:22px; font-weight:800; letter-spacing:.2px;
  transition:opacity var(--t-slow) ease, transform var(--t-slow) var(--easing);
  opacity:0; transform:translateX(-6px);
}
.section.is-active .links a{ opacity:1; transform:none; }
.links a:hover{ color:#081f18; }

/* Green panel */
.submenu{
  position:absolute; top:18px; left:calc(var(--mega-w) - 14px);
  width:520px; height:var(--panel-h, auto);
  background:var(--leaf); color:#e7f4ec; border-radius:var(--radius);
  padding:26px 26px 22px; box-shadow:-10px 0 24px rgba(0,0,0,.25) inset;
  opacity:0; transform:translateX(-20px); pointer-events:none; overflow:auto;
  transition:opacity var(--t-slow) ease, transform var(--t-slow) var(--easing);
}
.submenu.is-open{ opacity:1; transform:none; pointer-events:auto; }
.submenu ul{ list-style:none; margin:6px 0 0; padding:0; }
.submenu li{ margin:8px 0; }
.submenu a{ color:#eaf7ef; text-decoration:none; font-weight:700; font-size:20px; display:block; padding:10px 6px; border-radius:10px; }
.submenu a:hover{ background:rgba(255,255,255,.08); transform:translateX(2px); }