/*
 * WordPress-специфіка поверх styles.css темплейту (сам styles.css лишається копією темплейту).
 */

/* Липка шапка під admin bar залогіненого користувача: 32px; ≤782px — 46px; ≤600px admin bar прокручується разом зі сторінкою */
.admin-bar .site-header{top:calc(32px + env(safe-area-inset-top,0px))}
@media screen and (max-width:782px){.admin-bar .site-header{top:calc(46px + env(safe-area-inset-top,0px))}}
@media screen and (max-width:600px){.admin-bar .site-header{top:env(safe-area-inset-top,0px)}}

/* Фокус посилань. Плагін pojo-accessibility з опцією «Add Outline Focus» додає body.pojo-a11y-focusable і друкує
   у wp_head `body.pojo-a11y-focusable a:focus{outline:1px solid #FF0000 !important}` (modules/legacy/components/customizer.php).
   Правило на :focus, тож червона рамка з'являється і після кліку мишею. Тут як у темплейті: після кліку рамки немає,
   з клавіатури — :focus-visible зі styles.css (3px --sky, offset лишається звідти). :focus у селекторах — для специфічності
   (0,3,2) понад плагінову (0,2,2): його inline-стиль іде після wp.css */
body.pojo-a11y-focusable a:focus:not(:focus-visible){outline:none!important}
body.pojo-a11y-focusable a:focus:focus-visible{outline:3px solid var(--sky)!important}
/* Посилання-кнопки й skip-link: у styles.css v2 у них своя рамка — `.btn:focus-visible` 3px --navy-deep (offset 3px
   лишається звідти) і `.skip-link:focus` 3px --gold. Правило вище перебило б і її, тож тут ті самі кольори (0,3,2, пізніше) */
body.pojo-a11y-focusable a.btn:focus-visible{outline-color:var(--navy-deep)!important}
body.pojo-a11y-focusable a.skip-link:focus{outline:3px solid var(--gold)!important}
/* Режим «Highlight focus» панелі доступності (D27, html.a11y-focus *:focus, 0,2,1) слабший за правила вище, тож для
   посилань — його рамка з вищою специфічністю (0,3,3); відступ і тінь режим дає сам */
html.a11y-focus body.pojo-a11y-focusable a:focus{outline:4px solid #FF8C00!important}

/* Лого на сторінках WooCommerce (D26). CSS WooCommerce `.woocommerce img, .woocommerce-page img{height:auto}`
   (специфічність 0,1,1) перебиває висоту лого темплейту (`.brand-logo`, 0,1,0). Лого розростається до розміру файлу,
   і шапка стає 194 px замість 78. Тут ті самі висоти, що в styles.css (v2), але з вищою специфічністю — і мобільні
   висоти шапки v2 (≤ 480 і ≤ 380 px, `.site-header .brand-logo`), і менше лого при тексті 125–140 % (a11y-s2, a11y-s3),
   інакше правила вище перебили б і їх */
.brand img.brand-logo{height:56px}
@media (max-width:420px){.brand img.brand-logo{height:40px}}
@media (min-width:1181px){.brand img.brand-logo{height:48px}}
.foot-brand .brand img.brand-logo{height:64px}
@media (max-width:480px){.site-header .brand img.brand-logo{height:38px}}
@media (max-width:380px){.site-header .brand img.brand-logo{height:32px}}
@media (max-width:640px){html:is(.a11y-s2,.a11y-s3) .site-header .brand img.brand-logo{height:30px}}

/* Таблиці WooCommerce (D26). У styles.css темплейту `table{min-width:560px}` — для його таблиць порівняння й add-ons
   у .table-wrap з прокруткою. Таблиці WooCommerce (вибір варіанта на товарі, кошик, кабінет) такої обгортки не мають,
   тож на 375 px розтягували сторінку: на товарі горизонтальний скрол був 210 px */
.woocommerce table{min-width:0}

/* Блок ціни товару WooCommerce (D26). У WooCommerce це `div.summary`, а в темплейті `.summary` — картка підсумку його
   чекауту: рамка, тінь, відступи, sticky і flex. Тут цей вигляд знято, і блок такий, яким його верстає WooCommerce */
.woocommerce div.product .summary{position:static;top:auto;background:none;border:0;border-radius:0;padding:0;display:block;box-shadow:none}

/* Вміст поза темплейтом і глобальні правила styles.css v2 (D26). Вміст як є: <main> з класом kit Elementor (його туди
   переносять лише page.php, single-product.php і шаблон Elementor «Full Width» — rtw_main_classes()) і сторінки без
   шапки теми (Elementor Canvas, CheckoutWC). v2 переносить слова в усіх заголовках, а на ≤ 640 px зменшує h1, h2 і
   комірки таблиць — так змінювались заголовки Elementor і WooCommerce та таблиці товару. Тут для цього вмісту значення
   до v2. :where() лишає специфічність правил v2: правила Elementor і плагінів, які їх перебивали, перебивають і ці.
   table{min-width:0} з v2 не знято: у v1 тема розтягувала таблицю підсумку WPForms до 560 px (контейнер її обрізав) */
:where(main[class*="elementor-kit-"],body:not(:has(.site-header))) :is(h1,h2,h3,h4){overflow-wrap:inherit;hyphens:inherit}
@media (max-width:640px){
  :where(main[class*="elementor-kit-"],body:not(:has(.site-header))) h1{font-size:clamp(2rem,4.6vw,3.25rem);line-height:1.15}
  :where(main[class*="elementor-kit-"],body:not(:has(.site-header))) h2{font-size:clamp(1.6rem,3vw,2.25rem)}
  :where(main[class*="elementor-kit-"],body:not(:has(.site-header))) :is(th,td){padding:13px 18px;font-size:inherit}
}
/* Сторінки без шапки теми (Elementor Canvas, CheckoutWC): нижньої панелі (.mbar) там немає, тож без відступу під неї
   (у v2 на ≤ 640 px body{padding-bottom:calc(76px + …)}) і без scroll-padding-top під липку шапку; text-size-adjust — як до v2 */
html:where(:not(:has(.site-header))){scroll-padding-top:auto;-webkit-text-size-adjust:auto;text-size-adjust:auto}
@media (max-width:640px){body:where(:not(:has(.site-header))){padding-bottom:0}}

/* Зміст юридичних сторінок (sticky, top:110px у styles.css) і якорі розділів — нижче admin bar.
   ≤900px зміст не липкий; ≤782px admin bar 46px; ≤600px admin bar прокручується разом зі сторінкою */
.admin-bar .agr-toc{top:142px}
.admin-bar .agr-sec,.admin-bar #promo-plans{scroll-margin-top:142px}
@media screen and (max-width:782px){.admin-bar .agr-sec,.admin-bar #promo-plans{scroll-margin-top:156px}}
@media screen and (max-width:600px){.admin-bar .agr-sec{scroll-margin-top:110px}.admin-bar #promo-plans{scroll-margin-top:84px}}

/* Текст запису блогу з редактора (single.php): у styles.css p{margin:0}, тож відступи між блоками — тут.
   Картка статті — .agr-body темплейту (фон, рамка, ширина 860px) */
.post-body > * + *{margin-top:1em}
.post-body > :is(h2,h3,h4) + *{margin-top:.6em}
.post-body :is(h2,h3,h4){margin-top:1.6em}
.post-body > :first-child{margin-top:0}
.post-body h2{font-size:1.5rem}
.post-body h3{font-size:1.2rem}
.post-body p,.post-body li{color:var(--muted);line-height:1.7}
.post-body :is(ul,ol){padding-left:22px;display:grid;gap:6px}
.post-body :is(img,video,iframe){max-width:100%;height:auto;border-radius:12px}
/* Картинка блоку «Image» з aligncenter: у block-library вона display:table і розтягує статтю ширше екрана (375px) */
.post-body figure{margin:1em 0 0;max-width:100%}
.post-body figure.aligncenter{display:block;margin-left:auto;margin-right:auto;text-align:center}
.post-body figcaption{font-size:.85rem;color:var(--muted);margin-top:.4em}
/* Блок «Buttons» у тексті запису — як .btn.btn-gold темплейту, а не чорна кнопка block-library */
.post-body .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;padding:13px 26px;border-radius:999px;font:700 1rem/1.1 var(--font-body);text-decoration:none;background:var(--gold);color:var(--gold-ink)}
.post-body strong{color:var(--fg)}

/* Наявні форми лідів (lead-form*.php, template-parts/forms/web-to-lead*.php — фаза 5). Повідомлення jQuery-обробника
   #success / #error показуються й ховаються через inline display, тож тут лише вигляд: .form-success — з темплейту,
   помилки в темплейті немає — та сама рамка з --err */
.form-error{background:rgba(196,38,46,.08);border:1px solid var(--err);color:var(--fg);padding:14px 16px;border-radius:10px}
/* #contactForm і #claimForm (тимчасово листом, до D6): у styles.css рамка .field.invalid — лише в input і select, а
   «Message» на /contact/ — обов'язкова textarea */
.field.invalid textarea{border-color:var(--err)}
/* Форми у вмісті сторінок Elementor (лендінги до D7): kit-CSS (.elementor-kit-N button, input[type="submit"] і їхні :hover,
   :focus — до 0,3,1) перебиває .btn темплейту. Ті самі значення .btn.btn-blue з вищою специфічністю; поза Elementor вигляд
   не змінюється */
.quote-card .btn.btn-blue{padding:13px 26px;border:2px solid transparent;border-radius:999px;font:700 1rem/1.1 var(--font-body);text-transform:none;background:var(--btn);color:#fff}
.quote-card .btn.btn-blue:focus{background:var(--btn);color:#fff;border-color:transparent}
.quote-card .btn.btn-blue:hover{background:var(--btn-hover);color:#fff;border-color:transparent}
/* Web-to-Lead: значення кнопки «submit» іде в Salesforce, тож велика літера — лише в CSS; приховані повідомлення оригіналу */
.quote-card .btn.sf-btn{text-transform:capitalize}
.w2l-err{font-size:.82rem;color:var(--err)}
/* «Click Here» шорткоду [regency_button*] у вмісті сторінки (поза слотом thank-you-button.php, який сам додає .btn.btn-gold):
   вигляд .btn.btn-gold темплейту. Inline display:inline-block шорткоду лишається */
a.regency-btn{align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:999px;font:700 1rem/1.1 var(--font-body);text-decoration:none;border:2px solid transparent;background:var(--gold);color:var(--gold-ink);white-space:nowrap}
a.regency-btn:hover{background:#F2BA2C;box-shadow:0 6px 16px rgba(255,196,57,.35)}

/* Текст лише для скрінрідерів: клас із розмітки ядра WordPress (пагінація, пошук, коментарі) */
.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:var(--surface);color:var(--fg);clip-path:none;display:block;font-size:.875rem;font-weight:600;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}

/* Блок «Partner for success» на /buyers-sellers/ (template-parts/sections/partner-band.php): у темплейті його немає,
   перенесено зі старої /realtors/. Мова темплейту: фон, кольори й радіус .cta-band, контур щита з .hero::after, кнопки .btn.
   Фото-вирізка стоїть на нижньому краї картки; до наступної секції — звичайний відступ .section */
.partner-section{padding-bottom:0}
.partner-band{position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;align-items:end;gap:24px;background:var(--hero-bg);color:var(--hero-fg);border-radius:22px;padding-inline:52px 28px}
.partner-band::before{content:"";position:absolute;right:-70px;top:-60px;width:480px;height:560px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpath d='M50 2 96 18v36c0 30-20 50-46 60C24 104 4 84 4 54V18Z' fill='none' stroke='%23009CDE' stroke-opacity='.18' stroke-width='3'/%3E%3C/svg%3E") no-repeat center/contain;pointer-events:none}
.partner-band.no-photo{grid-template-columns:1fr}
.partner-copy{position:relative;z-index:1;align-self:center;padding-block:56px}
.partner-band .eyebrow{color:var(--hero-eyebrow)}
.partner-band .lede{color:var(--hero-muted)}
.partner-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.partner-actions svg{flex-shrink:0}
.partner-media{position:relative;z-index:1;display:flex;justify-content:center;padding-top:32px}
.partner-media img{display:block;width:100%;max-width:480px;height:auto}
@media (max-width:860px){
  .partner-band{grid-template-columns:1fr;gap:0;padding-inline:28px}
  .partner-band::before{top:auto;right:50%;bottom:-70px;transform:translateX(50%);width:340px;height:395px}
  .partner-copy{padding-block:36px 0}
  .partner-media{padding-top:24px}
  .partner-media img{max-width:340px}
}
@media (max-width:640px){
  .partner-band{padding-inline:20px}
  .partner-actions .btn{width:100%;justify-content:center}
}
html.a11y-contrast .partner-band{border:2px solid #000}
html.a11y-contrast .partner-band::before{display:none}

/* Крок 1 чекауту (templates/checkout-template.php, рішення користувача 2026-11-04): під «Property address» рядок
   City / ZIP / State на сітці .addr-row темплейту (там City / State / ZIP), тож частки колонок ZIP і State поміняно
   місцями; на вузьких екранах — правило .addr-row (City на всю ширину, ZIP і State поряд) */
.prop-row{grid-template-columns:2fr 1fr 1.2fr}
@media (max-width:640px){.prop-row{grid-template-columns:1fr 1fr}}

/* Подяка після оплати на кроці Payment чекауту (#orderDone.co-thanks, templates/checkout-template.php): текст екрана
   «Policy Details» рамки SF, але в блоці .form-success темплейту, шрифтами й кольорами теми (світла й темна) */
.co-thanks p{margin:0 0 10px}
.co-thanks ul{margin:0;padding-left:20px}
.co-thanks li+li{margin-top:4px}
.co-thanks a{color:inherit;font-weight:600}
.co-thanks-title{font-family:var(--font-display);font-size:1.2rem;line-height:1.3}
.co-thanks-policy{font-family:var(--font-display);font-size:1.05rem}
.co-thanks:focus{outline:none}

/* Лоадер рамки оплати на кроці Payment чекауту (#coCardFrame, templates/checkout-template.php; стан data-state ставить
   app.js). loading — приглушені поля картки темплейту з його плейсхолдерами (геометрія .field і .grid-3, як у рамці SF),
   поверх них по центру плашка зі спінером; рамка прозора й поза потоком, тож її проміжні висоти (rtw:height до й одразу
   після rtw:ready) блок не рухають; ready — рамка в потоці й проявляється, скелет згасає й виходить з потоку (висоту
   контейнера плавно міняє app.js класом co-resize); failed —
   блоку немає, повідомлення в #payMsg. Без руху (prefers-reduced-motion, html.a11y-motion у styles.css) — без анімацій
   і переходів, плашка лишається. */
.co-card-frame{display:grid;position:relative}
.co-card-frame>*{grid-area:1/1;min-width:0}
.co-card-frame>iframe{transition:opacity .25s ease-out}
.co-card-frame[data-state="loading"]>iframe{position:absolute;top:0;left:0;opacity:0;pointer-events:none}
.co-card-frame[data-state="failed"]{display:none}
.co-card-frame.co-resize{overflow:hidden;transition:height .25s ease-out}
.co-card-skel{position:relative;pointer-events:none;transition:opacity .25s ease-out}
.co-card-frame:not([data-state="loading"])>.co-card-skel{position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden;transition:opacity .25s ease-out,visibility 0s .25s}
.co-skel-fields{display:flex;flex-direction:column;gap:22px;opacity:.5}
.co-skel-label{font-weight:600;font-size:.9rem}
.co-skel-input{display:block;min-height:calc(1.6em + 27px);padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-skel-input[data-skel-zip]{color:var(--fg)}
.co-card-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8px}
.co-card-status{display:inline-flex;align-items:center;gap:12px;padding:12px 22px;border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:var(--shadow);color:var(--fg);font-weight:600;font-size:.95rem;line-height:1.3}
.co-card-status:empty{display:none}
.co-card-status::before{content:"";flex:none;width:18px;height:18px;border:2.5px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:co-spin .8s linear infinite}
@keyframes co-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.co-card-status::before{animation:none}}