/*
 * Шапка й підвал сайту.
 *
 * ВАЖЛИВО: цей файл підключається на ВСІХ сторінках — і на нових, і на старих
 * (кабінет ще на bootstrap 3). Тому:
 *   - усі імена класів мають префікс site-/foot-/pay- і не перетинаються
 *     з bootstrap (.nav, .btn, .panel, .container зайняті ним);
 *   - тут немає жодного правила для голих тегів, крім як усередині .site-topbar
 *     та .site-foot, щоб не зачепити верстку старих сторінок.
 */

.site-topbar,.site-foot{
  font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  font-size:16px; line-height:1.6;
  color:var(--ink); background:var(--surface);
}
.site-topbar a,.site-foot a{text-decoration:none; color:inherit}

/* ---------- шапка ---------- */
.site-topbar{border-bottom:1px solid var(--line)}
.site-topbar .site-wrap{display:flex; align-items:center; gap:28px; height:64px}

.site-logo{
  font-family:"Roboto Slab",Georgia,serif; font-weight:700; font-size:20px;
  letter-spacing:-.01em; white-space:nowrap;
}
.site-logo em{font-style:normal; color:var(--brand)}

.site-nav{display:flex; align-items:center; gap:20px; font-size:14.5px; color:var(--ink-2)}
.site-nav>a:hover{color:var(--brand)}

.site-nav .has-sub{position:relative}
.site-nav .sub-toggle{
  display:flex; align-items:center; gap:6px; padding:0; border:0; background:none;
  font:inherit; font-size:14.5px; color:var(--ink-2); cursor:pointer;
}
.site-nav .sub-toggle::after{
  content:""; width:5px; height:5px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
}
.site-nav .sub-toggle:hover{color:var(--brand)}
.site-nav .sub{
  display:none; position:absolute; top:100%; left:-14px; z-index:1000; min-width:210px;
  margin-top:10px; padding:6px 0; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-2);
}
.site-nav .has-sub:hover .sub,
.site-nav .has-sub:focus-within .sub{display:block}
.site-nav .sub a{display:block; padding:8px 16px; font-size:14.5px; white-space:nowrap}
.site-nav .sub a:hover{background:var(--brand-soft); color:var(--brand)}

.site-topbar-right{margin-left:auto; display:flex; align-items:center; gap:14px}

/* меню зі старого модуля mod_menu: лишається в розмітці заради css/js,
   які модуль підключає для окремих пунктів, але не показується */
.legacy-menu{display:none}

/* ---------- підвал ---------- */
.site-foot{border-top:1px solid var(--line); font-size:14px}
/* чотири колонки: документи, контакти, оплата, форма звернення */
.foot-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:40px; padding:38px 0 30px;
}
.foot-col h4{
  margin:0 0 12px; font-family:"IBM Plex Sans",sans-serif;
  font-size:11.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3);
}
.foot-col ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.foot-col a{color:var(--ink-2); border-bottom:1px solid transparent}
.foot-col a:hover{color:var(--brand); border-bottom-color:var(--brand)}
.foot-col p{margin:0 0 8px; color:var(--ink-2); line-height:1.55}
.foot-col input,.foot-col textarea{
  font:inherit; font-size:15px; width:100%; padding:11px 13px;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line-2); border-radius:2px;
}
.foot-col textarea{min-height:90px; resize:vertical}
.foot-col form{display:grid; gap:10px}

.pay{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.pay-card{
  display:flex; align-items:center; justify-content:center; height:30px; padding:0 10px;
  background:var(--ground); border:1px solid var(--line-2); border-radius:var(--radius);
}
.pay-card svg{display:block; height:16px; width:auto}
.pay-card b{font-family:"Roboto Slab",Georgia,serif; font-size:13px; letter-spacing:.06em}

.foot-bottom{
  display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between;
  padding:16px 0; border-top:1px solid var(--line);
  color:var(--ink-3); font-size:13.5px;
}

@media (max-width: 1100px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 900px){
  .site-topbar .site-wrap{height:auto; padding-top:12px; padding-bottom:12px; flex-wrap:wrap; gap:14px}
  .site-nav{display:none}
  .foot-grid{grid-template-columns:1fr; gap:26px}
}