/*
Theme Name: CaSolar Solutions
Theme URI: https://casolarsolutions.com
Author: Your Team
Author URI: https://casolarsolutions.com
Description: Lightweight lead-gen theme for US Solar (ACF-driven)
Version: 0.3.0
Text Domain: casolar
*/

:root{
  /* Color system */
  --cs-bg: #0f1220;
  --cs-surface: #12162a;
  --cs-card: #151a33;
  --cs-elev: #1a2040;
  --cs-border: rgba(255,255,255,0.08);
  --cs-border-2: rgba(255,255,255,0.14);
  --cs-text: #e8ecf7;
  --cs-muted: #a8b3c7;
  --cs-accent: #ffd54d;
  --cs-accent-2: #38e6b6;
  --cs-danger: #ff6b6b;

  /* Focus ring */
  --ring: 0 0 0 3px rgba(255,213,77,.25);

  /* Elevation / effects */
  --cs-glow: 0 0 40px rgba(255,213,77,0.18), 0 0 80px rgba(56,230,182,0.12);

  /* Spacing scale */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;  --s-7: 3rem;   --s-8: 4rem; --s-9: 6rem;

  /* Radius */
  --r-xs: 6px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px;

  /* Container */
  --container: 1200px;

  /* Z-index */
  --z-header: 50;
  --z-nav: 60;
  --z-overlay: 55;
}

html{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 80% -10%, #1b2144 0%, var(--cs-bg) 60%) no-repeat, var(--cs-bg);
  color:var(--cs-text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
	overflow-x: hidden;
}

a{color:var(--cs-accent); text-decoration:none}
a:hover{opacity:.92}

:focus-visible{outline:none; box-shadow: var(--ring); border-radius: 10px}

.container{max-width:var(--container); margin:0 auto; padding:0 var(--s-6)}
.section{padding: var(--s-8) 0; border-top:1px solid var(--cs-border)}
.section--alt{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 40%);}

.h1,.h2,.h3{margin:0 0 var(--s-5)}
.h1{font-size: clamp(28px, 4.5vw, 48px); letter-spacing:.2px}
.h2{font-size: clamp(22px, 3.6vw, 34px)}
.h3{font-size: clamp(18px, 2.8vw, 22px); color:var(--cs-muted)}

.lead{color:var(--cs-muted); max-width:68ch}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  background: linear-gradient(90deg, var(--cs-accent), #ffe27a);
  color:#2b2b2b; padding:.9rem 1.1rem; border-radius:var(--r-md);
  font-weight:700; border:0; cursor:pointer;
  box-shadow: var(--cs-glow);
  transition: transform .15s ease, filter .2s ease, box-shadow .3s ease;
}
.btn:hover{ transform: translateY(-1px); filter: saturate(110%) }
.btn:active{ transform: translateY(0) scale(.98) }
.btn--ghost{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  color:var(--cs-text); border:1px solid var(--cs-border);
  box-shadow:none;
}
.btn--ghost:hover{ background: rgba(255,255,255,.06) }

/* Cards */
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) border-box;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.card--interactive{ transition: transform .2s ease, box-shadow .3s ease }
.card--interactive:hover{ transform: translateY(-4px); box-shadow: 0 18px 46px rgba(0,0,0,.35) }

/* Grid */
.grid{display:grid; gap:var(--s-6)}
.grid--2{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid--3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid--4{grid-template-columns: repeat(4, minmax(0,1fr))}
@media (max-width: 1180px){ .grid--4{grid-template-columns: repeat(3, minmax(0,1fr))} }
@media (max-width: 960px){ .grid--2,.grid--3,.grid--4{grid-template-columns: 1fr} }

/* Hero */
.hero{
  position:relative; padding: calc(var(--s-9)) 0 var(--s-7);
  overflow:hidden; border-bottom:1px solid var(--cs-border)
}
.hero__bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(600px 300px at 20% -10%, rgba(255,213,77,.12), transparent 60%),
    radial-gradient(800px 400px at 80% 0%, rgba(56,230,182,.10), transparent 60%);
  filter:saturate(120%);
}
.hero__particles{
  position:absolute; inset:0; opacity:.25;
  background-image: radial-gradient(2px 2px at 20% 30%, #fff 0 30%, transparent 31%),
                    radial-gradient(2px 2px at 60% 10%, #fff 0 30%, transparent 31%),
                    radial-gradient(2px 2px at 80% 60%, #fff 0 30%, transparent 31%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{opacity:.15} to{opacity:.35} }

/* Tooltips */
.hint{display:inline-flex; align-items:center; gap:.4rem; color:var(--cs-muted)}
.hint__icon{
  width:18px; height:18px; border-radius:50%; border:1px solid var(--cs-border);
  display:inline-grid; place-items:center; font-size:12px; color:var(--cs-accent)
}
.hint[data-tooltip]{position:relative}
.hint[data-tooltip]:hover:after,.hint[data-tooltip]:focus-within:after{
  content:attr(data-tooltip); position:absolute; z-index:5; left:0; top:130%;
  background:#0c1022; border:1px solid var(--cs-border); color:var(--cs-text);
  padding:.5rem .7rem; border-radius:10px; width: min(260px, 80vw);
}

/* CLS guard for embed */
.form-embed-shell{min-height:380px}

/* ========= Header / Navigation ========= */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  backdrop-filter: saturate(140%) blur(8px);
  background: linear-gradient(180deg, rgba(18,22,42,.84), rgba(18,22,42,.68));
  border-bottom:1px solid var(--cs-border);
  transition: box-shadow .2s ease, background .2s ease;
}
.site-header.is-scrolled{ box-shadow: 0 6px 24px rgba(0,0,0,.35); background: rgba(18,22,42,.92) }

.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: .9rem 0;
}
.brand{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:800; letter-spacing:.3px; color:var(--cs-text);
}
.brand__logo{ width:32px; height:32px; border-radius:8px;}

/* Primary nav (desktop) */
.site-nav{ position:relative }
.site-nav .menu{
  display:flex; align-items:center; gap:1rem; margin:0; padding:0; list-style:none;
}
.site-nav .menu > li{ position:relative }
.site-nav .menu > li > a{
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--cs-text); padding:.6rem .8rem; border-radius: var(--r-sm);
  transition: background .2s ease, opacity .2s ease;
}
.site-nav .menu > li > a:hover{ background: rgba(255,255,255,.06) }
.site-nav .menu > li.current-menu-item > a,
.site-nav .menu > li.current-page-ancestor > a{ background: rgba(255,255,255,.08) }

/* Dropdown (2nd level) */
.site-nav .menu > li.menu-item-has-children > a::after{
  content:''; width:8px; height:8px; border-right:2px solid var(--cs-muted); border-bottom:2px solid var(--cs-muted);
  transform: rotate(45deg); margin-left:.3rem; transition: transform .2s ease, border-color .2s ease;
}
.site-nav .menu > li:hover > a::after{ transform: rotate(-135deg); border-color: var(--cs-accent) }

.site-nav .sub-menu{
  position:absolute; left:0; top:calc(100% + 8px);
  min-width:240px; padding:.5rem; margin:0; list-style:none;
  background: linear-gradient(180deg, rgba(26,32,64,.98), rgba(21,26,51,.98));
  border:1px solid var(--cs-border-2); border-radius:14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.site-nav .menu > li:hover > .sub-menu,
.site-nav .menu > li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform: translateY(0) }

.site-nav .sub-menu li{ position:relative }
.site-nav .sub-menu a{
  display:flex; align-items:center; gap:.5rem;
  color:var(--cs-text); padding:.6rem .7rem; border-radius:10px;
}
.site-nav .sub-menu a:hover{ background: rgba(255,255,255,.06) }

/* Third level aligns right */
.site-nav .sub-menu .menu-item-has-children > .sub-menu{
  left: calc(100% + 8px); top:0;
}

/* CTA in header */
.header-cta .btn{ padding:.7rem .95rem }

/* Burger (mobile) */
.nav-toggle{
  display:none; appearance:none; background:transparent; border:1px solid var(--cs-border);
  color:var(--cs-text); padding:.55rem .7rem; border-radius:12px; align-items:center; gap:.6rem;
}
.nav-toggle__bars{ position:relative; width:18px; height:12px }
.nav-toggle__bars:before, .nav-toggle__bars:after, .nav-toggle__bars i{
  content:''; position:absolute; left:0; right:0; height:2px; background: var(--cs-text); border-radius:2px;
}
.nav-toggle__bars:before{ top:0 }
.nav-toggle__bars i{ top:5px }
.nav-toggle__bars:after{ bottom:0 }

/* Mobile drawer */
@media (max-width: 1000px){
  .site-nav .menu{ display:none }
  .nav-toggle{ display:inline-flex }
  #site-nav{
    position:fixed; inset:0 0 0 auto; width:min(86vw, 380px);
    transform: translateX(100%); transition: transform .25s ease;
    background: linear-gradient(180deg, rgba(26,32,64,.98), rgba(21,26,51,.98));
    border-left:1px solid var(--cs-border);
    padding: var(--s-6) var(--s-6) var(--s-8);
    z-index:var(--z-nav);
    overflow:auto;
  }
  #site-nav[data-open="true"]{ transform: translateX(0) }
  .nav-overlay{
    content:''; position:fixed; inset:0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
    opacity:0; visibility:hidden; transition: opacity .2s ease, visibility .2s; z-index:var(--z-overlay);
  }
  .nav-overlay[data-show="true"]{ opacity:1; visibility:visible }

  /* Vertical menu + accordions */
  #site-nav .menu{ display:grid; gap:.2rem; list-style:none; margin:0; padding:0 }
  #site-nav .menu > li > a{
    display:flex; justify-content:space-between; align-items:center;
    padding:.9rem .9rem; border-radius:12px; color:var(--cs-text);
  }
  #site-nav .menu > li > a:hover{ background: rgba(255,255,255,.06) }
  #site-nav .menu > li.menu-item-has-children > a::after{
    content:''; width:8px; height:8px; border-right:2px solid var(--cs-muted); border-bottom:2px solid var(--cs-muted);
    transform: rotate(-45deg); transition: transform .2s ease, border-color .2s ease;
  }
  #site-nav .menu > li.open > a::after{ transform: rotate(135deg); border-color: var(--cs-accent) }

  #site-nav .sub-menu{
    position:static; opacity:1; visibility:visible; transform:none; padding:.2rem .2rem .6rem;
    background:transparent; border:none; box-shadow:none;
  }
  #site-nav .sub-menu a{ padding:.7rem .9rem; border-radius:10px }
  #site-nav .sub-menu .sub-menu{ padding-left:.4rem; border-left:1px dashed var(--cs-border) }
}

/* Skip link */
.screen-reader-text{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.screen-reader-text:focus{
  left:var(--s-6); top:var(--s-6); width:auto; height:auto; background:#0c1022; padding:.6rem .8rem; border-radius:10px; z-index:9999
}

/* Tables, details, FAQ polish */
table{ width:100%; border-collapse: separate; border-spacing:0 }
th,td{ padding:12px 14px; border-bottom:1px solid var(--cs-border) }
thead th{ background: rgba(255,255,255,.03) }
details.card summary{ cursor:pointer; list-style:none }
details.card summary::-webkit-details-marker{ display:none }
details.card summary strong{ display:inline-flex; align-items:center; gap:.5rem }
details.card[open]{ background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)) padding-box, linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)) border-box }

/* Utilities */
.text-center{text-align:center}
.mt-0{margin-top:0} .mt-4{margin-top:var(--s-4)} .mt-6{margin-top:var(--s-6)} .mt-8{margin-top:var(--s-8)}
.mb-0{margin-bottom:0} .mb-4{margin-bottom:var(--s-4)} .mb-6{margin-bottom:var(--s-6)} .mb-8{margin-bottom:var(--s-8)}

/* Smooth appear for sections/cards */
.section.inview .card{ animation: cs-pop .35s ease both }
@keyframes cs-pop{ from{ transform: translateY(8px); opacity:.0 } to{ transform: translateY(0); opacity:1 } }


/* Лого/бренд в шапке */
.brand{
  display:inline-flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.3px; color:var(--cs-text);
}
.brand__logo{
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; background:none; border:none; /* убираем прежний фон/бордер */
}
.brand__text{ display:inline-flex; gap:.2rem; align-items:baseline }
.brand__accent{ color: var(--cs-accent) }
.logo-svg{ display:block; width:32px; height:32px }

/* ===== Mobile fixes (layout + off-canvas + blocks) ===== */

/* Общие страховки */
img, svg, video, iframe { max-width: 100%; height: auto; }

/* Контейнер — меньше отступы на узких */
@media (max-width: 420px){
  .container{ padding: 0 var(--s-4); }
}

/* Шапка — не ломаем переполнение */
.site-header .header-inner{ flex-wrap: wrap; }
.brand{ min-width: 0; }
.brand__text{ display:inline-flex; gap:.2rem; flex-wrap:nowrap; }
.brand__name, .brand__accent{ white-space:nowrap; }
.header-cta{ margin-left: auto; }

/* Бургер и офф-канвас меню */
@media (max-width: 1000px){
  /* выключаем дефолтные инлайны, задаём безопасные размеры */
  #site-nav{
    position: fixed; inset: 0 0 0 auto;
    width: min(92vw, 380px);
    height: 100dvh; /* динамическая высота в моб. браузерах */
    transform: translate3d(100%,0,0);
    transition: transform .25s ease;
    background: linear-gradient(180deg, rgba(26,32,64,.98), rgba(21,26,51,.98));
    border-left: 1px solid var(--cs-border);
    padding: var(--s-6) var(--s-6) calc(var(--s-6) + env(safe-area-inset-bottom));
    z-index: var(--z-nav);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #site-nav[data-open="true"]{ transform: translate3d(0,0,0); }

  .nav-overlay{
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
    z-index: var(--z-overlay);
  }
  .nav-overlay[data-show="true"]{ opacity: 1; visibility: visible; }

  /* Вертикальное меню с аккордеонами */
  #site-nav .menu{ display: grid; gap:.2rem; list-style:none; margin:0; padding:0; }
  #site-nav .menu > li > a{
    display:flex; justify-content:space-between; align-items:center;
    padding:.9rem .9rem; border-radius:12px; color:var(--cs-text);
    min-height: 44px;
  }
  #site-nav .menu > li.menu-item-has-children > a::after{
    content:''; width:8px; height:8px; border-right:2px solid var(--cs-muted); border-bottom:2px solid var(--cs-muted);
    transform: rotate(-45deg); transition: transform .2s ease, border-color .2s ease;
    margin-left: .4rem;
  }
  #site-nav .menu > li.open > a::after{ transform: rotate(135deg); border-color: var(--cs-accent); }

  #site-nav .sub-menu{
    display: none; /* скрыто по умолчанию */
    padding:.2rem .2rem .6rem; margin:0; list-style:none; border:0; background:none; box-shadow:none;
  }
  #site-nav .menu > li.open > .sub-menu{ display:block; }
  #site-nav .sub-menu a{ padding:.7rem .9rem; border-radius:10px; min-height: 40px; }
  #site-nav .sub-menu .sub-menu{ padding-left:.6rem; border-left:1px dashed var(--cs-border); }
}

/* Убираем горизонтальный скролл от широких гридов/картинок */
.grid{ min-width: 0; }
.card{ max-width: 100%; }

/* Кнопки и формы — не вылезают за край */
.btn{ max-width: 100%; }
.form-embed-shell{ min-height: 380px; }
.input, .select, .textarea{ width: 100%; }

/* Секция home-compare — мобильная подгонка */
@media (max-width: 960px){
  .home-compare__stats{ display:grid; grid-template-columns: 1fr; }
  .stat-pill{ min-width: 0; width: 100%; }
  .cta-band{ flex-direction: column; align-items: stretch; }
  .cta-band__actions{ width:100%; display:grid; grid-template-columns: 1fr; gap:.6rem; }
}

/* FAQ details — убираем «прыжки» и ломание сетки */
details.card summary{ padding:.4rem 0; }
details.card[open]{ overflow: hidden; }


/* Блокировка прокрутки документа, когда открыто меню */
html.nav-open, body.nav-open { overflow: hidden !important; height: 100%; }

/* Офф-канвас: внутренний скролл, но без видимого «трека» (чтобы не казалось, что два скролла) */
@media (max-width: 1000px){
  #site-nav{ overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* Скрываем трек скролла у панели (видимы только жесты/прокрутка) */
  #site-nav{ scrollbar-width: none; }
  #site-nav::-webkit-scrollbar{ width: 0; height: 0; }
}

/* Оверлей сам не должен скроллиться */
.nav-overlay{ overflow: hidden; }



@media (max-width: 1000px){
  #site-nav{
    position: fixed;
    /* якорим панель справа: */
    inset: 0 0 0 auto;  /* top:0; right:0; bottom:0; left:auto */
    left: auto;
    right: 0;

    width: min(92vw, 380px);
    height: 100dvh;

    /* закрытое состояние — спрятано за правой кромкой: */
    transform: translate3d(100%, 0, 0);
    transition: transform .25s ease;

    background: linear-gradient(180deg, rgba(26,32,64,.98), rgba(21,26,51,.98));
    border-left: 1px solid var(--cs-border);
    padding: var(--s-6) var(--s-6) calc(var(--s-6) + env(safe-area-inset-bottom));
    z-index: var(--z-nav);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* открытое состояние — на экране: */
  #site-nav[data-open="true"]{
    transform: translate3d(0, 0, 0);
  }

  .nav-overlay{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
    z-index: var(--z-overlay);
    overflow: hidden;
  }
  .nav-overlay[data-show="true"]{ opacity:1; visibility:visible; }

  /* подменю-аккордеоны */
  #site-nav .menu{ display:grid; gap:.2rem; margin:0; padding:0; list-style:none; }
  #site-nav .menu > li > a{
    display:flex; justify-content:space-between; align-items:center;
    padding:.9rem .9rem; border-radius:12px; min-height:44px; color:var(--cs-text);
  }
  #site-nav .menu > li.menu-item-has-children > a::after{
    content:''; width:8px; height:8px; border-right:2px solid var(--cs-muted); border-bottom:2px solid var(--cs-muted);
    transform: rotate(-45deg); transition: transform .2s ease, border-color .2s ease; margin-left:.4rem;
  }
  #site-nav .menu > li.open > a::after{ transform: rotate(135deg); border-color: var(--cs-accent); }
  #site-nav .sub-menu{ display:none; padding:.2rem .2rem .6rem; margin:0; border:0; background:none; box-shadow:none; }
  #site-nav .menu > li.open > .sub-menu{ display:block; }
  #site-nav .sub-menu .sub-menu{ padding-left:.6rem; border-left:1px dashed var(--cs-border); }

  /* убираем второй визуальный скролл у панели */
  #site-nav{ scrollbar-width: none; }
  #site-nav::-webkit-scrollbar{ width:0; height:0; }
}

div#lead-form-shell {
    background: #ffffff;
}

@media (max-width: 768px){
span.brand__text {
    display: none;
	}}

#sticky-cta {
	width: 100%;
}


@media (max-width: 1000px) {
    #site-nav {
        scrollbar-width: none;
		display: none;
    }
}

@media (max-width: 1000px) {
    #site-nav[data-open="true"] {
        display: block;
    }
}