/* ==========================================================================
   Аквалит ТМ-Синтез — согласия по 152-ФЗ и cookie-баннер
   Файл: wp-content/themes/aqualit/assets/css/aq-legal.css
   Подключается после style.css (см. functions-php-snippet.php)

   Палитра согласована с темой сайта:
     #008bd2 — фирменный синий (акценты, фокус)
     #0071ab — затемнённый синий для текста и кнопок (контраст 5.32:1 — WCAG AA)
     #111    — основной текст
     #5a6b76 — вторичный текст (контраст 5.53:1 — WCAG AA)
     #c62828 — состояние ошибки
   Шрифт наследуется от темы (Roboto).
   ========================================================================== */

:root {
  --aq-brand: #008bd2;
  --aq-brand-strong: #0071ab;
  --aq-brand-hover: #005f91;
  --aq-text: #111111;
  --aq-text-muted: #5a6b76;
  --aq-error: #c62828;
  --aq-border: #cccccc;
  --aq-surface: #ffffff;
  --aq-radius: 5px;
  --aq-space: 8px;
}

/* --------------------------------------------------------------------------
   1. Блок согласий в формах
   -------------------------------------------------------------------------- */

.aq-consent {
  display: block;
  margin: 16px 0;
  text-align: left;
  clear: both;
}

.aq-consent__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  /* область нажатия по всей строке, минимум 44px по высоте */
  min-height: 44px;
  padding: 6px 0;
  cursor: pointer;
  box-sizing: border-box;
}

.aq-consent__item:last-child { margin-bottom: 0; }

/* нативный чекбокс скрыт визуально, но остаётся доступным с клавиатуры
   и для скринридеров */
.aq-consent__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.aq-consent__box {
  flex: 0 0 auto;
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  background: var(--aq-surface);
  border: 2px solid var(--aq-border);
  border-radius: 4px;
  box-sizing: border-box;
  transition: border-color .15s ease, background-color .15s ease;
}

.aq-consent__box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .15s ease;
}

.aq-consent__input:checked + .aq-consent__box {
  background: var(--aq-brand-strong);
  border-color: var(--aq-brand-strong);
}

.aq-consent__input:checked + .aq-consent__box::after {
  transform: rotate(45deg) scale(1);
}

.aq-consent__input:focus-visible + .aq-consent__box,
.aq-consent__input:focus + .aq-consent__box {
  outline: 3px solid var(--aq-brand);
  outline-offset: 2px;
}

.aq-consent__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--aq-text-muted);
  user-select: none;
}

.aq-consent__text a {
  color: var(--aq-brand-strong);
  text-decoration: underline;
}

.aq-consent__text a:hover,
.aq-consent__text a:focus { color: var(--aq-brand-hover); }

.aq-consent__req {
  color: var(--aq-error);
  margin-left: 2px;
}

/* --- состояние ошибки ---------------------------------------------------- */

.aq-consent__item.is-invalid .aq-consent__box {
  border-color: var(--aq-error);
  box-shadow: 0 0 0 3px rgba(198, 40, 40, .15);
}

.aq-consent__error {
  display: none;
  margin: 4px 0 0;
  padding-left: 34px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--aq-error);
}

.aq-consent__error.is-visible { display: block; }

.aq-consent__error::before {
  content: "!";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--aq-error);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  vertical-align: -3px;
}

/* --- вариант для тёмного модального окна «Заказать звонок» --------------- */

.modal_window .aq-consent__text { color: #e8eef2; }
.modal_window .aq-consent__text a { color: #7fd0ff; }
.modal_window .aq-consent__box { background: #222; border-color: #6b7a84; }
.modal_window .aq-consent__input:checked + .aq-consent__box {
  background: var(--aq-brand);
  border-color: var(--aq-brand);
}
.modal_window .aq-consent__error { color: #ff8a80; }
.modal_window .aq-consent__error::before { background: #ff8a80; color: #3a0000; }

/* модальное окно фиксировано по высоте в теме — после добавления согласий
   высота должна подстраиваться под содержимое */
.modal_window#callback {
  height: auto;
  max-height: 92vh;
  margin-top: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  transform: translateY(-50%);
  overflow-y: auto;
}

.modal_window#callback input[type="submit"] { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   2. Cookie-баннер
   -------------------------------------------------------------------------- */

.aq-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* ниже модальных окон темы (z-index: 999999), выше всего остального */
  z-index: 999990;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.aq-cookie[hidden] { display: none; }

.aq-cookie__inner {
  pointer-events: auto;
  box-sizing: border-box;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px;
  background: var(--aq-surface);
  border-top: 3px solid var(--aq-brand);
  border-radius: var(--aq-radius);
  box-shadow: 0 -2px 6px rgba(17, 17, 17, .06), 0 12px 32px rgba(17, 17, 17, .18);
  display: flex;
  align-items: center;
  gap: 24px;
  transform: translateY(16px);
  opacity: 0;
  transition: transform .25s ease-out, opacity .25s ease-out;
}

.aq-cookie.is-visible .aq-cookie__inner {
  transform: translateY(0);
  opacity: 1;
}

.aq-cookie__body { flex: 1 1 auto; min-width: 0; }

.aq-cookie__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--aq-text);
}

.aq-cookie__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--aq-text-muted);
  /* комфортная длина строки */
  max-width: 70ch;
}

.aq-cookie__text a {
  color: var(--aq-brand-strong);
  text-decoration: underline;
}

.aq-cookie__text a:hover,
.aq-cookie__text a:focus { color: var(--aq-brand-hover); }

.aq-cookie__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --- кнопки -------------------------------------------------------------- */

.aq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--aq-radius);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}

.aq-btn:focus-visible,
.aq-btn:focus {
  outline: 3px solid var(--aq-brand);
  outline-offset: 2px;
}

.aq-btn--primary {
  background: var(--aq-brand-strong);
  border-color: var(--aq-brand-strong);
  color: #fff;
}

.aq-btn--primary:hover {
  background: var(--aq-brand-hover);
  border-color: var(--aq-brand-hover);
  color: #fff;
}

.aq-btn--ghost {
  background: transparent;
  border-color: var(--aq-border);
  color: var(--aq-text);
}

.aq-btn--ghost:hover {
  border-color: var(--aq-brand-strong);
  color: var(--aq-brand-strong);
  background: transparent;
}

/* --- планшет ------------------------------------------------------------- */

@media (max-width: 900px) {
  .aq-cookie__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 18px 20px;
  }
  .aq-cookie__actions { width: 100%; }
  .aq-btn { flex: 1 1 auto; }
}

/* --- телефон ------------------------------------------------------------- */

@media (max-width: 560px) {
  .aq-cookie {
    padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .aq-cookie__inner {
    padding: 16px;
    max-height: 70vh;
    overflow-y: auto;
  }
  .aq-cookie__title { font-size: 15px; }
  .aq-cookie__text  { font-size: 13px; }
  .aq-cookie__actions { flex-direction: column; }
  .aq-btn { width: 100%; }
  /* кнопка мобильного меню темы (z-index 10002, bottom:15px) не должна
     перекрываться баннером — сдвигаем её выше, пока баннер на экране */
  body.aq-cookie-open #mobile_menu_button { bottom: auto; top: 15px; }
}

/* --- уважение к системной настройке «уменьшить движение» ----------------- */

@media (prefers-reduced-motion: reduce) {
  .aq-cookie__inner,
  .aq-consent__box,
  .aq-consent__box::after,
  .aq-btn {
    transition: none !important;
  }
  .aq-cookie__inner { transform: none; }
}

/* --------------------------------------------------------------------------
   3. Ссылка «Настройки cookie» в футере
   -------------------------------------------------------------------------- */

.aq-footer-legal {
  /* В теме поверх всего футера лежит сплошная белая заливка:
       .footer-info:after { position:absolute; width:100%; height:100%;
                            background:#fff; z-index:1; }
     Над ней поднят только .container (z-index:3). Без собственного
     контекста наложения этот блок оказывается ПОД заливкой: в разметке
     он есть, на экране его не видно. */
  position: relative;
  z-index: 3;

  /* блоки футера в теме плавающие — без clear/width блок схлопывается
     в нулевую ширину и уезжает за правый край страницы */
  clear: both;
  width: 100%;
  box-sizing: border-box;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(17, 17, 17, .12);
  font-size: 13px;
  line-height: 1.6;
  color: var(--aq-text-muted);
}

/* ссылки — одной строкой с переносом, копирайт под ними:
   вместе они не помещаются в ширину контейнера футера */
.aq-footer-legal__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 24px;
}

.aq-footer-legal a {
  display: inline-block;
  padding: 6px 0;
  color: var(--aq-text-muted);
  text-decoration: underline;
}

.aq-footer-legal a:hover,
.aq-footer-legal a:focus { color: var(--aq-brand-strong); }

.aq-footer-legal__copy {
  display: block;
  margin-top: 10px;
}

.aq-footer-legal__btn {
  background: none;
  border: 0;
  padding: 6px 0;
  font: inherit;
  color: var(--aq-text-muted);
  text-decoration: underline;
  cursor: pointer;
}

.aq-footer-legal__btn:hover,
.aq-footer-legal__btn:focus { color: var(--aq-brand-strong); }

@media (max-width: 560px) {
  .aq-footer-legal__links { flex-direction: column; align-items: flex-start; gap: 0; }
  .aq-footer-legal { text-align: left; }
}

/* --------------------------------------------------------------------------
   4. Оформление правовых страниц (Политика, Согласие, Cookie)
   -------------------------------------------------------------------------- */

.legal-doc {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 0 40px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--aq-text);
}

.legal-doc h1 {
  font-size: 30px;
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 16px;
}

.legal-doc h2 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  margin: 40px 0 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(17, 17, 17, .1);
}

.legal-doc h3 {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
  margin: 26px 0 10px;
}

.legal-doc p { margin: 0 0 14px; }

.legal-doc ul,
.legal-doc ol { margin: 0 0 16px; padding-left: 22px; }

.legal-doc li { margin-bottom: 8px; }

.legal-doc a { color: var(--aq-brand-strong); text-decoration: underline; }
.legal-doc a:hover, .legal-doc a:focus { color: var(--aq-brand-hover); }

.legal-doc code {
  padding: 2px 6px;
  background: #f2f2f2;
  border-radius: 3px;
  font-size: 14px;
  font-family: Consolas, "SF Mono", Menlo, monospace;
}

.legal-doc__meta {
  margin-bottom: 28px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--aq-text-muted);
}

.legal-doc__callout {
  margin: 0 0 28px;
  padding: 18px 20px;
  background: #f0f8fd;
  border-left: 4px solid var(--aq-brand);
  border-radius: 0 var(--aq-radius) var(--aq-radius) 0;
}

.legal-doc__callout p:last-child { margin-bottom: 0; }

/* таблицы: собственный горизонтальный скролл, страница не едет вбок */
.legal-doc__table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 24px;
  border-collapse: collapse;
  font-size: 15px;
  -webkit-overflow-scrolling: touch;
}

.legal-doc__table th,
.legal-doc__table td {
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  text-align: left;
  vertical-align: top;
}

.legal-doc__table thead th {
  background: #f2f7fa;
  font-weight: 700;
}

.legal-doc__table tbody th {
  width: 34%;
  background: #fafafa;
  font-weight: 500;
  color: var(--aq-text-muted);
}

.legal-doc__actions { margin-top: 32px; }

.legal-doc__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  background: var(--aq-brand-strong);
  color: #fff;
  border: 0;
  border-radius: var(--aq-radius);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.legal-doc__btn:hover { background: var(--aq-brand-hover); }
.legal-doc__btn:focus-visible,
.legal-doc__btn:focus { outline: 3px solid var(--aq-brand); outline-offset: 2px; }

@media (max-width: 768px) {
  .legal-doc { font-size: 15px; }
  .legal-doc h1 { font-size: 24px; }
  .legal-doc h2 { font-size: 19px; margin-top: 30px; }
  .legal-doc h3 { font-size: 17px; }
  .legal-doc__table { font-size: 14px; }
  .legal-doc__table th,
  .legal-doc__table td { padding: 10px; }
  .legal-doc__table tbody th { width: auto; }
}

/* --------------------------------------------------------------------------
   5. Скрытые подписи к полям форм

   В формах темы вместо подписей использовались только placeholder: он
   исчезает при вводе и не читается скринридером как подпись поля.
   Класс скрывает <label> визуально, оставляя его доступным.
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   6. Кликабельные контакты в шапке и футере

   Ссылка tel:/mailto: должна иметь область нажатия не меньше 44px.
   -------------------------------------------------------------------------- */

.footer-contacts a[href^="tel:"],
.footer-contacts a[href^="mailto:"],
.header-contacts a[href^="tel:"],
.header-contacts a[href^="mailto:"],
.contact_map_frame a[href^="tel:"],
.contact_map_frame a[href^="mailto:"] {
  display: inline-block;
  padding: 4px 0;
  color: inherit;
  text-decoration: none;
}

.footer-contacts a[href^="tel:"]:hover,
.footer-contacts a[href^="mailto:"]:hover,
.header-contacts a[href^="tel:"]:hover,
.header-contacts a[href^="mailto:"]:hover,
.contact_map_frame a[href^="tel:"]:hover,
.contact_map_frame a[href^="mailto:"]:hover {
  color: var(--aq-brand-strong);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7. Заголовки страниц

   Заголовки в теме выводились через div и span — поисковые системы не видели
   на страницах ни одного H1. Теги заменены на h1/h2, а здесь снимаются
   браузерные значения margin и font-weight, чтобы внешний вид не изменился.
   -------------------------------------------------------------------------- */

h1.page-title,
h2.page-title,
h1.product-title,
h1.section-title,
h2.section-title {
  margin: 0;
  font-weight: 300;
}

h1.page-title,
h1.product-title {
  margin-top: 1em;   /* соответствует прежнему правилу .page-title */
}

h1.section__title {
  margin: 0;
  font-weight: 300;
}

/* --------------------------------------------------------------------------
   8. Просмотр документов и сертификатов на всю ширину экрана

   На странице «О нас» сканы выводились мелкими превью без возможности
   увеличить — прочитать их было невозможно.
   -------------------------------------------------------------------------- */

.aq-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

.aq-doc-link {
  display: block;
  position: relative;
  padding: 10px;
  background: var(--aq-surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--aq-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.aq-doc-link:hover,
.aq-doc-link:focus-visible,
.aq-doc-link:focus {
  border-color: var(--aq-brand);
  box-shadow: 0 2px 10px rgba(17, 17, 17, .12);
  outline: none;
}

.aq-doc-link:focus-visible {
  outline: 3px solid var(--aq-brand);
  outline-offset: 2px;
}

.aq-doc-link img {
  display: block;
  width: 100%;
  height: auto;
}

/* значок «открыть на весь экран» */
.aq-doc-link::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background-color: rgba(17, 17, 17, .6);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  opacity: 0;
  transition: opacity .15s ease;
}

.aq-doc-link:hover::after,
.aq-doc-link:focus::after { opacity: 1; }

.aq-doc-caption {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--aq-text-muted);
  text-align: center;
}

/* карточка документа: превью + подпись + ссылка на файл */
.aq-doc-item {
  display: flex;
  flex-direction: column;
}

.aq-doc-item .aq-doc-link { margin-bottom: 4px; }

.aq-doc-item .aq-doc-caption {
  flex: 1 1 auto;
  margin-bottom: 10px;
}

/* заглушка для документа без изображения-превью */
.aq-doc-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 566 / 800;
  margin-bottom: 4px;
  padding: 10px;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: var(--aq-radius);
  box-sizing: border-box;
}

/* запасной вариант для браузеров без aspect-ratio */
@supports not (aspect-ratio: 1) {
  .aq-doc-placeholder { height: 300px; }
}

.aq-doc-placeholder::before {
  content: "";
  width: 56px;
  height: 56px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7b3bc' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.aq-doc-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--aq-border);
  border-radius: var(--aq-radius);
  font-size: 13px;
  line-height: 1.3;
  color: var(--aq-brand-strong);
  text-decoration: none;
  text-align: center;
  transition: border-color .15s ease, background-color .15s ease;
}

.aq-doc-file::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.aq-doc-file:hover,
.aq-doc-file:focus {
  border-color: var(--aq-brand-strong);
  background: #f0f8fd;
}

.aq-doc-file:focus-visible {
  outline: 3px solid var(--aq-brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .aq-doc-file { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aq-doc-link,
  .aq-doc-link::after { transition: none; }
}