/*
Theme Name: JazaTH Child
Theme URI: https://jazath.dev
Description: Child theme for JazaTH — place for custom templates and assets.
Author: JazaTH.dev
Template: jazaTH
Version: 1.0
*/

/* Import parent's base styles (optional — we enqueue parent in functions.php) */

/* Add child theme custom styles below */
body{ --jz-child:1; }

/* Sidebar close button: modern pill background (dark gradient) */
#jzv2-close{
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:6px;
  border-radius:12px;
  background:linear-gradient(180deg,#071226 0%, #0f2b3b 100%);
  border:1px solid rgba(255,255,255,0.04);
  color:var(--text);
  box-shadow:0 8px 20px rgba(2,6,23,.45), inset 0 1px rgba(255,255,255,0.02);
  transition:transform .12s ease, background .14s ease, box-shadow .14s ease;
}
#jzv2-close:hover{ transform:translateY(-2px); background:linear-gradient(180deg,#0b2a3a 0%, #15394a 100%); box-shadow:0 12px 30px rgba(2,6,23,.6); }
#jzv2-close:active{ transform:translateY(0); box-shadow:0 6px 14px rgba(2,6,23,.55); }
#jzv2-close:focus{ outline:2px solid rgba(98,211,255,.18); outline-offset:3px; }
/* Strong active look when sidebar open (visual feedback) */
.jzv2-sidebar.jzv2-open #jzv2-close{ background:linear-gradient(90deg,#0b3250 0%, #062036 100%); color:#cfe6ff; box-shadow:0 10px 30px rgba(6,40,60,.6); }

/* ✅ Primary menu — modern chips style + remove dot separators */
/* Remove any pseudo-element separators and ensure list-style is disabled */
nav.primary .primary-menu,
nav.primary .primary-menu ul{
  margin:0;padding:0;list-style:none;
}
nav.primary .primary-menu li{
  list-style:none;margin:0;padding:0;position:relative;
}
nav.primary .primary-menu li::before,
nav.primary .primary-menu li::after,
nav.primary .primary-menu a::before,
nav.primary .primary-menu a::after{
  content:none !important;display:none !important;
}

/* Chip-like anchors */
nav.primary .primary-menu a,
nav.primary .nav-link{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);color:var(--text);
  font-weight:800;text-decoration:none;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
  box-shadow:inset 0 -3px 8px rgba(0,0,0,.18), 0 6px 16px rgba(0,0,0,.24);
}
nav.primary .primary-menu a:hover,
nav.primary .nav-link:hover,
nav.primary .primary-menu a:focus,
nav.primary .nav-link:focus{
  transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.36);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));outline:none;
}
nav.primary .primary-menu a:focus-visible,
nav.primary .nav-link:focus-visible{outline:2px solid rgba(98,211,255,.18);outline-offset:3px}

/* Active/current item style */
nav.primary .primary-menu a.active,
nav.primary .nav-link.current-menu-item{
  background:linear-gradient(90deg,var(--brand) 0%, rgba(98,211,255,.12) 100%);
  color:#061426;border-color:rgba(98,211,255,.35);box-shadow:0 12px 30px rgba(6,40,60,.5);
}

/* Responsive tweaks */
@media (max-width:899px){
  /* primary nav is hidden on mobile by design; ensure chips remain available */
  nav.primary{display:none !important;visibility:hidden !important}
}

/* Active indicator (wrap-around pill) */
nav.primary{position:relative}
nav.primary .nav-indicator{position:absolute;left:0;top:0;width:0;height:0;background:transparent;outline:3px solid rgba(98,211,255,0.18);outline-offset:-3px;border-radius:999px;box-shadow:0 6px 18px rgba(6,40,60,.45), 0 0 0 6px rgba(98,211,255,0.04);transition:left .28s cubic-bezier(.2,.9,.3,1),width .28s cubic-bezier(.2,.9,.3,1),top .18s ease,height .18s ease,opacity .18s ease;opacity:0;pointer-events:none}
nav.primary.has-indicator .nav-indicator{opacity:1}
nav.primary .nav-indicator.pulse{animation:indicator-pulse .65s cubic-bezier(.2,.9,.3,1)}
nav.primary .primary-menu a.is-active{transform:translateY(0) scale(1.02);box-shadow:0 18px 40px rgba(6,40,60,.5)}
@keyframes indicator-pulse{0%{transform:scale(0.98)}50%{transform:scale(1.03)}100%{transform:scale(1)}}

/* Fallback: wrap active/current link with pill outline using ::after */
nav.primary .primary-menu a.current-menu-item,
nav.primary .primary-menu a.is-active{position:relative;z-index:2}
nav.primary .primary-menu a.current-menu-item::after,
nav.primary .primary-menu a.is-active::after{
  content:'';position:absolute;left:-3px;right:-3px;top:-3px;bottom:-3px;border-radius:999px;border:3px solid rgba(98,211,255,0.16);box-shadow:0 8px 22px rgba(6,40,60,.45), 0 0 0 6px rgba(98,211,255,0.04);pointer-events:none;transition:box-shadow .22s ease,transform .22s ease,opacity .18s ease;opacity:1}
nav.primary .primary-menu a.current-menu-item::after{transform:scale(1);}
nav.primary .primary-menu a.is-active::after{transform:scale(1.02)}

/* Visual locked state while toggling to prevent rapid double clicks */
.jzv2-menu-btn.jzv2-locked, .jzv2-menu-btn.jzv2-locked *{pointer-events:none}
.jzv2-menu-btn.jzv2-locked{opacity:.86}


/* Fix: remove leftover list markers/dots when menu items are output as bare <li> inside nav */
nav.primary li{
  list-style:none !important; /* remove default bullet */
  list-style-type:none !important;
  display:inline-block !important; /* keep items inline like chips */
  margin:0 6px !important;
  vertical-align:middle !important;
}
nav.primary li::marker{ content: none !important; }

/* Extra safety: remove pseudo separators that may be applied elsewhere */
nav.primary li::before, nav.primary li::after, nav.primary a::before, nav.primary a::after{ content:none !important; display:none !important; }

/* === Chips: hover & focus effects === */
.chips-scroll ul li a, .chips .chip {
  position:relative;display:inline-flex;align-items:center;justify-content:center;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;will-change:transform,box-shadow;z-index:1
}
.chips-scroll ul li a::before, .chips .chip::before{
  content:'';position:absolute;inset:0;border-radius:999px;background:linear-gradient(90deg, rgba(98,211,255,0.06), rgba(98,211,255,0.02));opacity:0;transform:scale(.96);transition:opacity .18s ease,transform .18s ease;pointer-events:none;z-index:-1
}
.chips-scroll ul li a::after, .chips .chip::after{
  content:'';position:absolute;left:-8px;right:-8px;top:-8px;bottom:-8px;border-radius:999px;background:radial-gradient(circle at 50% 50%, rgba(98,211,255,0.12), transparent 35%);opacity:0;transition:opacity .22s ease,transform .22s ease;pointer-events:none;z-index:-2;transform:scale(.98)
}
.chips-scroll ul li a:hover::before, .chips .chip:hover::before, .chips-scroll ul li a:focus::before, .chips .chip:focus::before{opacity:1;transform:scale(1)}
.chips-scroll ul li a:hover::after, .chips .chip:hover::after{opacity:1;transform:scale(1.03)}
.chips-scroll ul li a:hover, .chips .chip:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 30px rgba(6,40,60,.34)}
.chips-scroll ul li a:active, .chips .chip:active{transform:translateY(-1px) scale(.998)}
.chips-scroll ul li a:focus-visible, .chips .chip:focus-visible{outline:2px solid rgba(98,211,255,.18);outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  .chips-scroll ul li a, .chips .chip{transition:none}
  .chips-scroll ul li a::before, .chips .chip::before, .chips-scroll ul li a::after, .chips .chip::after{transition:none}
}

/* 🔧 Fix: remove duplicated divider lines between stacked sections
   Several sections (e.g. .usp, .services, .testi) define both
   border-top and border-bottom which creates two thin lines
   between stacked sections. Keep only the top line by removing
   the bottom border on those sections. */
.usp,
.services,
.testi {
  border-bottom: none !important;
}

/* 🔧 Additional: prevent duplicate section separators
   - Remove border-top on specific sections that add extra lines
   - Collapse adjacent section top borders so only one separator remains */
.seo-content,
.contact,
.footGlass,
footer .footer-inner {
  border-top: none !important;
}

/* If two sections appear adjacent, remove the later one's top border so only one line stays */
section + section {
  border-top: none !important;
}

/* Optional aggressive rule: keep only the first section's top border (uncomment to enable)
section:not(:first-of-type) { border-top: none !important; }
*/

/* 🎯 Compact layout tweaks: reduce vertical padding for tighter sections
   - Make most sections more compact, keep hero slightly taller for visual emphasis
   - Reduce spacing for section titles and descriptions for a more 'fit' layout */
section {
  padding-top: clamp(20px, 3.5vw, 40px);
  padding-bottom: clamp(20px, 3.5vw, 40px);
}
.section-title { margin-bottom: 12px; }
.section-desc { margin-bottom: 12px; max-width: 56ch; color: var(--muted); }
.hero { padding-top: clamp(40px, 8vw, 88px); padding-bottom: clamp(32px, 6vw, 72px); }

/* Specific compact overrides for common large sections */
.usp, .services, .pricing, .testi, .faq, .templates, .templates-shop, .seo-content { padding: 16px 0 !important; }
.contact { padding: 40px 0 !important; }
.wrap.contact .contact-form-wrapper { padding: 24px !important; margin: 0; max-width: 720px; }
.wrap.contact .contact-form-wrapper .form-group { margin-bottom: 12px; }

/* Mobile adjustments */
@media (max-width:900px){
  .section-title{margin-bottom:10px}
  .section-desc{margin-bottom:10px}
  .wrap.contact .contact-form-wrapper{padding:20px}
  section{padding-top:20px;padding-bottom:20px}
}

/* Heading gradient: standardized, override-safe, and reusable 🌈 */
:root{ --heading-grad: linear-gradient(90deg,#62d3ff 0%, #9fe3ff 35%, #ffd34d 100%); }

/* Apply to common headings and provide a utility class `.gradient-heading` */
.section-title,
.seo-content h2,
.seo-content h3,
.hero .title,
.card h2,
.template-benefits h2,
.template-info-grid .template-guarantee h2,
.gradient-heading {
  background: var(--heading-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 900;
}

/* Provide a subtle accent variant for small badges/titles */
.section-header h2, .shop-seo .section-header h2 { background: linear-gradient(90deg,#1ec5ff,#62d3ff 45%,#ffd86a); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent }