/*
Theme Name: Bulat
Theme URI: https://bulat.ua
Author: Bulat
Description: Кастомна тема для bulat.ua — виробник профнастилу та металочерепиці. Індустріальний синьо-стальний стиль, Oswald + PT Sans, гео-сторінки та каталог продукції.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: bulat
*/

/* =========================================================================
   TOKENS — synced with the Bulat design system (tokens/*.css)
   ========================================================================= */
:root {
  /* Brand blue */
  --blue-900:#003E73; --blue-800:#00528F; --blue-700:#005BA8; --blue-600:#0070D0;
  --blue-500:#1A83DD; --blue-400:#3D98E6; --blue-300:#74B6EE; --blue-200:#AED5F5;
  --blue-100:#DCEDFB; --blue-50:#F0F7FE;
  /* Steel neutrals */
  --steel-900:#1C1E24; --steel-800:#2B2E36; --steel-700:#3D414C; --steel-600:#565B68;
  --steel-500:#717784; --steel-400:#90939E; --steel-300:#B4B7C0; --steel-200:#D4D6DC;
  --steel-100:#E7E9ED; --steel-50:#F4F5F7; --white:#FFFFFF;
  /* Semantic */
  --green-600:#177A3C; --green-100:#E3F5EC; --amber-600:#E08A00; --amber-100:#FCEFD6;
  --red-600:#B3261E; --red-100:#FBE4E2;
  /* Terracotta accent (warm secondary, complements brand blue) */
  --terracotta-600:#BC3624; --terracotta-500:#D1523A; --terracotta-100:#F6DDD6;
  --warm-50:#FAF7F1;
  /* Aliases */
  --color-primary:var(--blue-600); --color-primary-hover:var(--blue-700); --color-primary-active:var(--blue-800);
  --color-on-primary:var(--white); --color-accent-warm:var(--terracotta-600);
  --text-strong:var(--steel-900); --text-body:var(--steel-700); --text-muted:var(--steel-500);
  --text-inverse:var(--white); --text-link:var(--blue-600);
  --surface-page:var(--warm-50); --surface-card:var(--white); --surface-dark:var(--blue-900);
  --border-subtle:var(--steel-200); --border-default:var(--steel-300); --border-strong:var(--steel-500);
  /* Type */
  --font-display:'Oswald','Arial Narrow',sans-serif; --font-body:'PT Sans','Segoe UI',Tahoma,sans-serif;
  --font-mono:ui-monospace,'Consolas',monospace;
  --fs-display:64px; --fs-h1:44px; --fs-h2:32px; --fs-h3:24px; --fs-h4:20px;
  --fs-lg:18px; --fs-body:16px; --fs-sm:14px; --fs-xs:12px;
  --ls-heading:0.02em; --ls-eyebrow:0.12em;
  /* Spacing / radius / shadow / layout */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --radius-sm:2px; --radius-md:4px; --radius-lg:8px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(28,30,36,.08);
  --shadow-sm:0 1px 3px rgba(28,30,36,.10),0 1px 2px rgba(28,30,36,.06);
  --shadow-md:0 4px 12px rgba(28,30,36,.10);
  --shadow-lg:0 12px 28px rgba(28,30,36,.14);
  --shadow-focus:0 0 0 3px rgba(0,112,208,.35);
  --container-max:1200px; --header-height:80px;
  --ease-standard:cubic-bezier(.2,0,.2,1); --dur-fast:120ms; --dur-normal:200ms;
}

/* =========================================================================
   BASE
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);color:var(--text-body);background:#fff;line-height:1.5;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--text-link);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-heading);color:var(--text-strong);line-height:1.1;margin:0;}
.container{max-width:var(--container-max);margin:0 auto;padding-left:var(--space-5);padding-right:var(--space-5);}
.section{padding-top:var(--space-9);padding-bottom:var(--space-9);}

/* Corrugated motif (hero / footer caps / dark sections) */
.bulat-ridge{height:8px;background:repeating-linear-gradient(90deg,var(--blue-700) 0,var(--blue-500) 9px,var(--blue-700) 18px);}
.bulat-ridge--steel{background:repeating-linear-gradient(90deg,var(--steel-700) 0,var(--steel-500) 9px,var(--steel-700) 18px);}
.dark-texture{position:relative;background:var(--surface-dark);overflow:hidden;color:#fff;}
.dark-texture::before{content:"";position:absolute;inset:0;opacity:.14;background:repeating-linear-gradient(105deg,var(--steel-500) 0,var(--steel-700) 16px,var(--steel-500) 32px);}
.dark-texture > *{position:relative;}

/* =========================================================================
   COMPONENTS
   ========================================================================= */
/* Button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-display);
  font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-heading);line-height:1;border-radius:var(--radius-md);
  cursor:pointer;border:2px solid transparent;padding:12px 24px;font-size:var(--fs-body);
  transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);text-decoration:none;}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn--lg{padding:16px 36px;font-size:var(--fs-lg);}
.btn--sm{padding:8px 16px;font-size:var(--fs-sm);}
.btn--block{display:flex;width:100%;}
.btn--primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary);}
.btn--primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff;}
.btn--secondary{background:transparent;color:var(--color-primary);border-color:var(--color-primary);}
.btn--secondary:hover{background:var(--blue-50);}
.btn--dark{background:var(--surface-dark);color:#fff;border-color:var(--surface-dark);}
.btn--dark:hover{background:var(--steel-700);border-color:var(--steel-700);color:#fff;}

/* Badge */
.badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--ls-heading);line-height:1.2;border-radius:var(--radius-sm);
  padding:4px 10px;font-size:var(--fs-xs);white-space:nowrap;}
.badge--neutral{background:var(--steel-100);color:var(--steel-700);}
.badge--brand{background:var(--blue-100);color:var(--blue-800);}
.badge--success{background:var(--green-100);color:var(--green-600);}
.badge--warning{background:var(--amber-100);color:var(--amber-600);}
.badge--danger{background:var(--red-100);color:var(--red-600);}
.badge--solid{background:var(--color-primary);color:#fff;}

/* Card */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:var(--space-5);}
.card--interactive{transition:box-shadow var(--dur-normal) var(--ease-standard),transform var(--dur-normal) var(--ease-standard);}
.card--interactive:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.card--flush{padding:0;overflow:hidden;}

/* Section heading */
.section-heading .eyebrow{font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);color:var(--color-accent-warm);margin-bottom:var(--space-2);}
.section-heading h2{font-size:var(--fs-h2);color:var(--text-strong);}
.section-heading--invert h2{color:#fff;}
.section-heading .rule{width:56px;height:4px;background:var(--terracotta-600);margin-top:var(--space-4);border-radius:var(--radius-sm);}
.section-heading--center{text-align:center;}
.section-heading--center .rule{margin-left:auto;margin-right:auto;}

/* Stat */
.stat{text-align:center;}
.stat .value{font-family:var(--font-display);font-weight:700;font-size:var(--fs-display);line-height:1;color:var(--color-accent-warm);}
.stat .label{margin-top:var(--space-2);font-size:var(--fs-sm);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);line-height:1.2;}

/* Grids */
.grid{display:grid;gap:var(--space-5);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

/* MetalPlate placeholder (until real product photos are added) */
.metal{height:190px;}
.metal--blue{background:repeating-linear-gradient(105deg,var(--blue-700) 0,var(--blue-500) 11px,var(--blue-700) 22px);}
.metal--steel{background:repeating-linear-gradient(105deg,var(--steel-400) 0,var(--steel-200) 11px,var(--steel-400) 22px);}
.metal--tile{background:repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 2px,transparent 2px 30px),repeating-linear-gradient(0deg,var(--blue-600) 0 26px,var(--blue-700) 26px 52px);}

/* =========================================================================
   PRODUCT PAGE
   ========================================================================= */
.breadcrumb{padding:var(--space-4) 0;font-size:var(--fs-sm);color:var(--text-muted);border-bottom:1px solid var(--border-subtle);}
.breadcrumb a{color:var(--text-link);}
.product-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--space-7);padding-top:var(--space-7);padding-bottom:var(--space-7);}
.product-gallery .main-img{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;}
.product-gallery .main-img .metal{height:360px;}
.product-thumbs{display:flex;gap:var(--space-3);margin-top:var(--space-3);}
.product-thumbs .metal{height:72px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);flex:1;}
.product-price{display:flex;align-items:baseline;gap:var(--space-2);margin-bottom:var(--space-5);}
.product-price .num{font-family:var(--font-display);font-weight:700;font-size:var(--fs-display);line-height:1;color:var(--text-strong);}
.ral-grid{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-5);}
.ral-swatch{width:40px;height:40px;border-radius:var(--radius-md);border:1px solid var(--border-default);cursor:pointer;padding:0;}
.ral-swatch.active{border:3px solid var(--color-primary);box-shadow:var(--shadow-focus);}
.coating-list{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-6);}
.coating-opt{text-align:left;padding:12px 14px;border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-body);font-size:var(--fs-sm);color:var(--text-strong);background:#fff;border:2px solid var(--border-subtle);}
.coating-opt.active{background:var(--blue-50);border-color:var(--color-primary);}
.specs-table{background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;}
.specs-table .row{display:flex;justify-content:space-between;gap:var(--space-4);padding:14px 20px;font-size:var(--fs-sm);}
.specs-table .row:nth-child(odd){background:var(--steel-50);}
.specs-table .row .k{color:var(--text-muted);}
.specs-table .row .v{color:var(--text-strong);font-weight:700;text-align:right;}
.calc input{width:100%;box-sizing:border-box;margin-top:8px;padding:11px 12px;border:2px solid var(--border-default);border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--fs-body);}
.calc-out{display:flex;gap:var(--space-4);margin-top:var(--space-5);}
.calc-out .cell{flex:1;}
.calc-out .cell .lbl{font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);}
.calc-out .cell .big{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2);}
@media (max-width:900px){.product-hero{grid-template-columns:1fr;}}

/* Product card (category / archive / home grids) */
.prod-card{display:flex;flex-direction:column;text-decoration:none;}
.prod-card:hover{text-decoration:none;}
.prod-card__body{padding:var(--space-4);display:flex;flex-direction:column;flex:1;}
.prod-card__title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h4);text-transform:uppercase;letter-spacing:var(--ls-heading);color:var(--text-strong);}
.prod-card__desc{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--text-muted);margin:6px 0 10px;line-height:1.5;flex:1;}
.prod-card__meta{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:12px;}
.prod-card__price{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;white-space:nowrap;}
.prod-card__price .from{font-size:var(--fs-xs);color:var(--text-muted);}
.prod-card__price .num{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);color:var(--text-strong);}
.prod-card__price .u{font-size:var(--fs-sm);color:var(--text-muted);}
.prod-card__price .on-request{font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--ls-heading);color:var(--color-primary);}
.subcat-chips{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-5);}
.subcat-chips a{font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--ls-heading);padding:8px 16px;border-radius:var(--radius-pill);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff;}
.subcat-chips a:hover{background:rgba(255,255,255,.16);text-decoration:none;}

/* Rich article / page content (the_content output) */
.bulat-article{font-family:var(--font-body);font-size:var(--fs-body);color:var(--text-body);line-height:1.8;}
.bulat-article h2{font-size:var(--fs-h2);margin:var(--space-7) 0 var(--space-4);}
.bulat-article h3{font-size:var(--fs-h3);margin:var(--space-6) 0 var(--space-3);}
.bulat-article p{margin:0 0 var(--space-4);}
.bulat-article ul,.bulat-article ol{margin:0 0 var(--space-4) var(--space-5);line-height:1.7;}
.bulat-article img{border-radius:var(--radius-lg);margin:var(--space-4) 0;}
.bulat-article a{color:var(--text-link);font-weight:700;}
.bulat-article table{width:100%;border-collapse:collapse;margin:var(--space-4) 0;font-size:var(--fs-sm);}
.bulat-article th{background:var(--steel-50);text-align:left;font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);font-size:var(--fs-xs);color:var(--text-muted);padding:12px 14px;}
.bulat-article td{border-top:1px solid var(--border-subtle);padding:12px 14px;}

/* Generic data table (page templates: materials / delivery / warranty) */
.data-table{background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;overflow-x:auto;}
.data-table .tr{display:grid;}
.data-table .tr + .tr{border-top:1px solid var(--border-subtle);}
.data-table .td{padding:12px 14px;font-family:var(--font-body);font-size:var(--fs-sm);color:var(--text-body);}
.data-table .tr.head .td{background:var(--steel-50);font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);font-size:var(--fs-xs);color:var(--text-muted);}
.data-table .td.first{font-weight:700;color:var(--text-strong);}

/* =========================================================================
   SITE HEADER / FOOTER
   ========================================================================= */
.site-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-xs);}
.site-header .bar{height:var(--header-height);display:flex;align-items:center;gap:var(--space-6);}
.site-header .logo img,.site-header .logo .logo-mark{height:40px;width:auto;display:block;}
.main-nav{display:flex;gap:var(--space-5);flex:1;list-style:none;margin:0;padding:0;}
.main-nav a{font-family:var(--font-display);font-weight:500;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--ls-heading);color:var(--text-body);}
.main-nav a:hover,.main-nav .current-menu-item a{color:var(--color-primary);text-decoration:none;}
.lang-switch{display:flex;gap:4px;}
.lang-switch a{font-family:var(--font-display);font-size:12px;font-weight:600;text-transform:uppercase;padding:4px 7px;border-radius:var(--radius-sm);background:var(--steel-100);color:var(--text-muted);}
.lang-switch a.active{background:var(--color-primary);color:#fff;}
.header-phone{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);color:var(--text-strong);white-space:nowrap;}

.site-footer .footer-cta{background:var(--color-primary);color:#fff;}
.site-footer .footer-cta .container{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;padding-top:var(--space-6);padding-bottom:var(--space-6);}
.site-footer .footer-main{background:var(--surface-dark);color:var(--steel-300);}
.site-footer .footer-main a:hover{color:var(--terracotta-500);}
.site-footer .footer-main .container{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-6);padding-top:var(--space-8);padding-bottom:var(--space-8);}
.site-footer h4,.site-footer h2{color:#fff;font-size:var(--fs-sm);letter-spacing:var(--ls-eyebrow);margin-bottom:var(--space-3);}
.site-footer a{color:var(--steel-300);}
.site-footer .copyright{border-top:1px solid var(--steel-700);}
.site-footer .copyright .container{padding-top:var(--space-4);padding-bottom:var(--space-4);font-size:var(--fs-xs);color:var(--steel-500);}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
  :root{--fs-display:44px;--fs-h1:32px;--fs-h2:26px;}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .site-footer .footer-main .container{grid-template-columns:1fr;}
  .main-nav{display:none;}
}
@media (max-width:560px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
}

/* =========================================================================
   DROPDOWN SUB-MENU (fix: nested menus were always visible)
   ========================================================================= */
.main-nav li{position:relative;}
.main-nav .sub-menu{display:none;position:absolute;top:100%;left:0;min-width:230px;
  background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,.12));padding:8px 0;margin:0;
  list-style:none;z-index:50;}
.main-nav li:hover>.sub-menu,
.main-nav li:focus-within>.sub-menu{display:block;}
.main-nav .sub-menu li{width:100%;}
.main-nav .sub-menu a{display:block;padding:9px 18px;text-transform:none;
  letter-spacing:0;font-size:var(--fs-sm);color:var(--text-body);}
.main-nav .sub-menu a:hover{background:var(--warm-50,var(--steel-100));color:var(--color-primary);}
.main-nav>li.menu-item-has-children>a::after{content:" \25BE";font-size:.75em;color:var(--text-muted);}
@media (max-width:900px){.main-nav .sub-menu{position:static;box-shadow:none;border:none;display:block;padding-left:14px;}}

/* Polylang switcher renders <li> items */
.lang-switch ul{display:flex;gap:6px;margin:0;padding:0}
.lang-switch li{list-style:none;display:inline-flex}
.lang-switch li.current-lang a{background:var(--color-primary);color:var(--color-on-primary,#fff);font-weight:700;}
.lang-switch li.current-lang a:hover{background:var(--color-primary);color:var(--color-on-primary,#fff);}
.lang-switch li:not(.current-lang) a:hover{background:var(--steel-200);color:var(--text-strong);}
.lang-switch li.no-translation a{opacity:.5}

/* BULAT A11Y — початок */
:root{--steel-500:#5F6575;}
.dark-texture,.footer-main,.site-footer{--steel-200:#EDF2F8;--steel-300:#E2EAF3;--steel-400:#D6E0EC;--steel-500:#D6E0EC;--color-accent-warm:#FFD3C7;}
.bulat-lead{--steel-200:#D4D6DC;--steel-300:#B4B7C0;--steel-400:#90939E;--steel-500:#5F6575;}
.bulat-lead a{text-decoration:underline;}
.dark-texture a:not([class]){color:#BBD9F5;text-decoration:underline;}
.bulat-lead a:not([class]){color:var(--text-link);}
.lang-switch{list-style:none;margin:0;padding:0;}
.footer-menu{list-style:none;margin:0;padding:0;}
.grid>*{min-width:0;}
.grid--split{grid-template-columns:1.2fr 1fr;}
@media (max-width:760px){.grid--split{grid-template-columns:1fr;}}
.site-header .logo{flex:none;}
@media (max-width:400px){.site-header .bar{gap:10px;padding-left:12px;padding-right:12px}.site-header .logo img,.site-header .logo .logo-mark{height:32px}}
/* BULAT A11Y — кінець */

/* BULAT MOBNAV — початок */
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;flex:none}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--steel-900);margin:5px 0;transition:transform .2s,opacity .2s}
.ph-ico{display:none}
@media (max-width:900px){
.nav-toggle{display:block}
.site-header{position:sticky}
.site-header .main-nav{display:none}
.site-header.nav-open .main-nav{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--border-subtle);box-shadow:0 12px 24px rgba(0,0,0,.12);padding:6px 0;z-index:40;max-height:calc(100vh - 80px);overflow-y:auto}
.site-header.nav-open .main-nav>li>a{display:block;padding:13px 24px;font-size:16px}
.site-header.nav-open .main-nav .sub-menu a{display:block;padding:10px 24px 10px 40px}
.site-header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.nav-open .nav-toggle span:nth-child(2){opacity:0}
.site-header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:600px){
.header-phone .ph-num{display:none}
.header-phone .ph-ico{display:block;color:var(--color-primary)}
}
/* BULAT MOBNAV — кінець */
