/*
Theme Name: Integral Light
Theme URI: 
Author: 
Description: Тема для сайта световых конструкций: тёмная ночная палитра, каталог товаров, разделы, работы.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: integral-light
*/


:root{
  --night:#0B1030; --night-2:#111A46; --panel:#16204F; --line:#2A356E;
  --amber:#F5A623; --amber-soft:#FFD79A; --moon:#C9D3F5; --paper:#F3F5FF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--night); color:var(--moon);
  font:400 17px/1.65 "PT Sans","Segoe UI",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
img,svg{max-width:100%}
a{color:var(--amber-soft)}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif; color:var(--paper); font-weight:400; letter-spacing:-.01em}
h1{font-size:clamp(32px,5.2vw,58px); line-height:1.08; margin:0 0 18px}
h2{font-size:clamp(25px,3.2vw,36px); line-height:1.15; margin:0 0 20px}
h3{font-size:21px; line-height:1.25; margin:0 0 10px}
p{margin:0 0 16px; max-width:70ch}
.wrap{width:min(1180px,92vw); margin:0 auto}
.sec{padding:74px 0}
.sec--tight{padding:48px 0}
.sec--alt{background:var(--night-2)}

/* header */
.top{border-bottom:1px solid var(--line); background:rgba(11,16,48,.92); position:sticky; top:0; z-index:40; backdrop-filter:blur(6px)}
.top__in{display:flex; align-items:center; gap:26px; min-height:78px}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--paper)}
.logo__mark{width:34px;height:34px;flex:0 0 34px}
.logo__name{font-family:Georgia,serif; font-size:23px; letter-spacing:.18em}
.logo__sub{display:block; font-size:11px; letter-spacing:.14em; color:#7F8DC4; font-family:"PT Sans",Arial,sans-serif}
.nav{margin-left:auto; display:flex; align-items:center; gap:24px}
.nav a{color:var(--moon); text-decoration:none; font-size:16px; padding:6px 0; border-bottom:1px solid transparent}
.nav a:hover,.nav a:focus-visible{color:var(--paper); border-bottom-color:var(--amber)}
.nav a[aria-current="page"]{color:var(--amber-soft); border-bottom-color:var(--amber)}
.drop{position:relative}
.drop__list{position:absolute; left:-18px; top:100%; min-width:264px; background:var(--panel); border:1px solid var(--line); padding:10px; display:none}
.drop:hover .drop__list,.drop:focus-within .drop__list{display:block}
.drop__list a{display:block; padding:9px 12px; border:0}
.drop__list a:hover{background:var(--night-2); border:0}
.top__cta{display:flex; align-items:center; gap:18px}
.tel{color:var(--paper); text-decoration:none; white-space:nowrap; font-size:17px}
.burger{display:none}

.btn{display:inline-block; padding:14px 26px; text-decoration:none; border:1px solid var(--amber); color:#0B1030; background:var(--amber); font-size:16px; cursor:pointer}
.btn:hover{background:var(--amber-soft); border-color:var(--amber-soft)}
.btn--ghost{background:transparent; color:var(--amber-soft)}
.btn--ghost:hover{background:rgba(245,166,35,.12); color:var(--paper)}

/* hero */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero::after{content:""; position:absolute; inset:0; background:radial-gradient(60% 70% at 70% 30%, rgba(245,166,35,.16), transparent 70%); pointer-events:none}
.hero__in{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; padding:64px 0 72px; position:relative; z-index:2}
.hero p{font-size:19px; color:#AAB6E4}
.hero__acts{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}
.facts{display:flex; gap:44px; border-top:1px solid var(--line); padding:22px 0; flex-wrap:wrap}
.facts div{max-width:23ch}
.facts b{display:block; font-family:Georgia,serif; font-size:30px; color:var(--amber-soft); font-weight:400}
.facts span{font-size:15px; color:#8D9AD0}

/* сетки */
.grid{display:grid; gap:24px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column}
.card__img{aspect-ratio:4/3; overflow:hidden; background:var(--night-2)}
.card__img img{width:100%; height:100%; object-fit:cover; display:block}
.card__body{padding:20px 22px 24px}
.card__price{color:var(--amber); font-size:17px; margin:0 0 10px}
.card p{font-size:15.5px; color:#A7B2E0; margin:0}
.card__link{margin-top:auto; padding:0 22px 22px}
.card__link a{font-size:15px}

/* каталог: разделы */
.dirs a{display:block; text-decoration:none; color:inherit; background:var(--panel); border:1px solid var(--line); padding:26px 24px}
.dirs a:hover{border-color:var(--amber)}
.dirs h3{margin-bottom:6px}
.dirs span{font-size:15px; color:#8D9AD0}

/* товар */
.prod{display:grid; grid-template-columns:1.05fr 1fr; gap:36px; align-items:start}
.spec{width:100%; border-collapse:collapse; margin:8px 0 26px}
.spec td{border-bottom:1px solid var(--line); padding:11px 0; font-size:16px; vertical-align:top}
.spec td:first-child{color:#8D9AD0; width:48%; padding-right:16px}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px}

/* работы */
.work{background:var(--panel); border:1px solid var(--line)}
.work img{width:100%; display:block; aspect-ratio:16/10; object-fit:cover}
.work div{padding:18px 20px 22px}
.work h3{font-size:19px}
.work p{font-size:15px; color:#A7B2E0; margin:0}

/* этапы */
.steps{counter-reset:s; display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.steps li{list-style:none; border-top:2px solid var(--amber); padding-top:16px}
.steps b{display:block; font-family:Georgia,serif; font-size:19px; color:var(--paper); font-weight:400; margin-bottom:6px}
.steps p{font-size:15px; color:#9BA7D9; margin:0}

/* реквизиты / контакты */
.req{width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line)}
.req td{border-bottom:1px solid var(--line); padding:13px 18px; font-size:16px}
.req tr:last-child td{border-bottom:0}
.req td:first-child{color:#8D9AD0; width:38%}
.req td:last-child{color:var(--paper)}

/* форма */
.form{background:var(--panel); border:1px solid var(--line); padding:28px}
.form label{display:block; font-size:14px; color:#9BA7D9; margin:0 0 6px}
.form input,.form textarea{width:100%; padding:12px 14px; margin-bottom:16px; background:var(--night); border:1px solid var(--line); color:var(--paper); font:inherit; font-size:16px}
.form input:focus,.form textarea:focus{outline:2px solid var(--amber); outline-offset:1px}
.form small{display:block; color:#7F8DC4; font-size:13px; margin-top:12px}

/* подвал */
.foot{background:#080C24; border-top:1px solid var(--line); padding:52px 0 32px; font-size:15px; color:#8D9AD0}
.foot__in{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px}
.foot a{color:#B9C4EE; text-decoration:none; display:block; padding:4px 0}
.foot a:hover{color:var(--amber-soft)}
.foot__bottom{border-top:1px solid var(--line); margin-top:34px; padding-top:20px; font-size:13.5px; color:#6C7AB0}
.catlist{border-top:1px solid var(--line); margin-top:28px}
.catrow{display:flex; align-items:baseline; gap:22px; padding:22px 4px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--paper)}
.catrow:hover{background:var(--night-2)}
.catrow__n{font-family:Georgia,serif; font-size:20px; color:var(--amber); width:44px; flex:0 0 44px}
.catrow__t{flex:1; font-family:Georgia,serif; font-size:24px; line-height:1.25}
.catrow__t em{display:block; font-family:"PT Sans",Arial,sans-serif; font-style:normal; font-size:15px; color:#8D9AD0; margin-top:5px}
.catrow__a{color:var(--amber-soft); font-size:15px; white-space:nowrap}
.crumbs{font-size:14px; color:#7F8DC4; padding:18px 0 0}
.crumbs a{color:#9BA7D9; text-decoration:none}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px}

@media (max-width:900px){
  .hero__in,.prod,.grid--3,.grid--2,.steps,.foot__in{grid-template-columns:1fr}
  .top__in{flex-wrap:wrap; min-height:auto; padding:12px 0; gap:12px}
  .burger{display:block; margin-left:auto; background:none; border:1px solid var(--line); color:var(--paper); padding:9px 14px; font:inherit; cursor:pointer}
  .nav{order:5; width:100%; display:none; flex-direction:column; align-items:flex-start; gap:2px; margin:0; border-top:1px solid var(--line); padding-top:10px}
  .nav.is-open{display:flex}
  .drop__list{position:static; display:block; border:0; background:transparent; padding:0 0 0 14px}
  .top__cta{width:100%; justify-content:space-between}
  .facts{gap:24px}
  .sec{padding:48px 0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* --- служебные классы WordPress --- */
.nav__list,.menu__list{list-style:none; margin:0; padding:0; display:flex; gap:6px; flex-wrap:wrap}
.nav__list li,.menu__list li{position:relative}
.nav__list .sub-menu,.menu__list .sub-menu{display:none; position:absolute; left:0; top:100%; min-width:250px; list-style:none; padding:8px; margin:0; z-index:20}
.nav__list li:hover>.sub-menu,.nav__list li:focus-within>.sub-menu,
.menu__list li:hover>.sub-menu,.menu__list li:focus-within>.sub-menu{display:block}
.entry__content{max-width:74ch}
.entry__content img{height:auto; border-radius:6px}
.entry__content table{width:100%; border-collapse:collapse; margin:18px 0}
.entry__content th,.entry__content td{padding:11px 14px; text-align:left}
.card h3 a{color:inherit; text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.pagination,.nav-links{display:flex; gap:10px; margin-top:30px; flex-wrap:wrap}
.pagination a,.pagination span,.nav-links a,.nav-links span{padding:8px 14px; text-decoration:none; border:1px solid currentColor; border-radius:6px}
.wp-block-image img{max-width:100%; height:auto}
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px)}
.mosaic img{border-radius:14px}

.catlist{border-top:1px solid var(--line); margin-top:28px}
.catrow{display:flex; align-items:baseline; gap:22px; padding:22px 4px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--paper)}
.catrow:hover{background:var(--night-2)}
.catrow__n{font-family:Georgia,serif; font-size:20px; color:var(--amber); width:44px; flex:0 0 44px}
.catrow__t{flex:1; font-family:Georgia,serif; font-size:24px; line-height:1.25}
.catrow__t em{display:block; font-family:"PT Sans",Arial,sans-serif; font-style:normal; font-size:15px; color:#8D9AD0; margin-top:5px}
.catrow__a{color:var(--amber-soft); font-size:15px; white-space:nowrap}
@media (max-width:700px){.catrow{gap:12px; padding:16px 2px} .catrow__t{font-size:19px} .catrow__a{display:none}}

.nav__list a{color:var(--moon); text-decoration:none; font-size:16px; padding:8px 10px; display:block}
.nav__list a:hover{color:var(--paper)}
.nav__list .current-menu-item>a{color:var(--amber-soft)}
.nav__list .sub-menu{background:var(--panel); border:1px solid var(--line)}
.entry__content th,.entry__content td{border-bottom:1px solid var(--line)}
.prod__img img{width:100%; border:1px solid var(--line)}
.pagination a,.nav-links a{color:var(--amber-soft)}
@media (max-width:900px){.nav__list{flex-direction:column; width:100%} .nav__list .sub-menu{position:static; display:block; border:0; background:transparent; padding-left:14px}}