/*
  Единственное, чего нет в generator-kit, но нужно сайту.
  Всё остальное берётся из kit; сюда добавлять только то, для чего в нём
  действительно нет места, и с объяснением, почему.
*/

/* Ссылка «к содержимому» для клавиатуры. В kit её нет, в макете она была
   описана лишь в стилях страниц штатов. */
.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: .75rem 1.15rem;
  color: #fff;
  background: var(--navy-900, #082f50);
  border-radius: 999px;
  text-decoration: none;
}
.skip-link:focus { top: .9rem; }

/* Пометка-абзац под таблицей на городских страницах жёлобов. Тег важен:
   в макете .table-note на странице штата — это карточка-врезка на тёмном
   фоне, и её правила трогать нельзя. */
p.table-note { color: var(--muted, #5f6672); font-size: .78rem; }

/* Галочка в таблице «что входит»: метка нужна, чтобы не полагаться на текст
   ячейки. В kit таблицы сравнения нет — она живёт в стилях городской. */
td.is-included { color: var(--navy-900, #082f50); font-weight: 700; }

/* Таблица «notice at collection» в privacy — шесть колонок. Документ сам
   оборачивает таблицы в .tablewrap с прокруткой и ставит min-width 640px,
   но на этой ширине ячейка сжимается до 150px и предложение рвётся по словам. */
.legal .tablewrap > table { min-width: 1080px; }

/* Элементы сетки по умолчанию не сжимаются ниже своего min-content: строка
   внутри .timing-note удерживала колонку на 660px при экране 390 и давала
   горизонтальную прокрутку. Разрешаем сжиматься — приём стандартный. */
.split-grid > *,
.timing-note,
.timing-note span { min-width: 0; }

/* Знак бренда. В kit это белый домик в тёмной плашке, в утверждённом макете —
   контурный домик 35px без подложки (.brand-mark: fill none, stroke
   currentColor). Семь утверждённых страниц переделывать не договаривались,
   поэтому оставляем имя из kit, а вид возвращаем макетный. */
.site-brand-mark {
  width: 35px;
  height: 35px;
  color: inherit;
  background: none;
  border-radius: 0;
}
.site-brand-mark svg {
  width: 35px;
  height: 35px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Карточка услуги на городской. В kit это тёмная панель со своим отступом и
   белым текстом; утверждённая карточка макета — белая, с фотографией во всю
   ширину и значком поверх. Макетный стиль переопределяет только фон, поэтому
   белый цвет текста из kit оставался и делал заголовок невидимым на белом.
   Снимаем слой kit ровно там, где стоит макетная разметка (.service-body). */
.service-card:has(> .service-body) {
  min-height: 0;
  display: block;
  gap: normal;
  padding: 0;
  color: var(--ink);
}
.service-card:has(> .service-body) h3,
.service-card:has(> .service-body) a { color: var(--navy-900); }

/* Значок секции: на страницах жёлобов макет ставит его по центру над
   заголовком и отбивает снизу, на страницах уборки — по левому краю. */
body.gutter-page .section-icon { margin-bottom: 8px; text-align: center; }

/* Сетка услуг на хабах. В home.css она рассчитана на главную: две карточки
   услуг и узкий третий блок (1fr 1fr .48fr). На хабе карточки три и они
   равноправны — третья иначе зажимается вдвое. */
body.hub .service-grid { grid-template-columns: repeat(3, 1fr); }

/* Строка значков под кнопками героя на городской странице жёлобов.
   В макете там было два пункта при сетке на три; мы выводим четыре —
   фиксированная цена, этажность, фотоотчёт и город. На трёх колонках
   четвёртый пункт уезжал на вторую строку, а у города вроде «Rancho Santa
   Margarita, CA» это выглядело сломанным. Ставим четыре колонки, как на
   странице уборки. */
body.city-page.gutter .trust-strip {
  grid-template-columns: repeat(4, 1fr);
  max-width: 650px;
}

/* Карточка-ссылка «позвонить» в блоке FAQ.
   В kit .ui-card не задаёт display: на <div> это неважно, а на <a> элемент
   остаётся строчным. Тогда его padding наезжает на соседний текст, карточка
   съезжает за край колонки, а подпись и номер встают в одну строку без
   пробела — «Speak with Homesheen(877) 549-4411». */
a.ui-card {
  display: block;
  text-decoration: none;
}
a.ui-card > div {
  display: grid;
  gap: .35rem;
}
a.ui-card span {
  color: var(--muted);
  font-size: .85rem;
  font-weight: 700;
}
a.ui-card strong {
  color: var(--navy-900);
  font-size: 1.35rem;
  letter-spacing: -.03em;
}

/* Кнопка и поле индекса на первом экране. Правила макета написаны под класс
   .button, у нас кнопка называется .ui-button. */
.hero-quote .ui-button { min-height: 52px; }
@media (max-width: 720px) {
  .hero-quote .ui-button { width: 100%; border-radius: 17px; }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Меню под бургером: крупнее и с разделителями между пунктами.
   В kit пункты разделены только отступом. */
.site-mobile-nav.is-open { gap: 0; }
.site-mobile-nav a {
  padding-block: .95rem;
  font-size: 1.06rem;
  border-bottom: 1px solid var(--line);
}
.site-mobile-nav a:last-child { border-bottom: 0; }

/* Перенос строк в заголовках.
   Kit задаёт text-wrap: balance — браузер выравнивает строки по длине и
   недозаполняет их, из-за чего справа остаётся широкое поле. В макете этого
   правила нет вовсе: строки заполняются до края колонки. Возвращаем макетное
   поведение и снимаем ограничение ширины в символах, чтобы заголовок занимал
   всю колонку. */
/* Вес селектора здесь не случаен: слой production грузится после этого файла
   и задаёт для .title-long и balance, и свой max-width. Переставлять слои
   нельзя — там же лежат мобильные правила хабов, которые должны побеждать
   наши. Поэтому перебиваем точечно, добавляя body в селектор. */
body main :is(h1, h2),
body main :is(h1, h2).title-long {
  max-width: none;
  text-wrap: wrap;
}

/* Значок бургера по макету: две полосы 18×2 px с промежутком 6 px внутри
   круга с тонкой рамкой. В kit кнопка рассчитана на символ внутри. */
.site-menu-toggle {
  display: none;
  gap: 6px;
  padding: 0;
  place-content: center;
}
.site-menu-toggle span {
  width: 18px;
  height: 2px;
  background: var(--navy-900);
  border-radius: 2px;
}
@media (max-width: 900px) {
  .site-menu-toggle { display: grid; }
}

/* Город без своей страницы в сгруппированном каталоге: плашка того же вида,
   но приглушённая и без ссылки. Мёртвых ссылок в каталоге быть не должно. */
.city-links .city-link-soon {
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(8, 47, 80, .05);
  color: #7d8ea0;
  font-size: .78rem;
  font-weight: 700;
}

/* Кнопка под полем индекса в герое штата — во всю ширину формы.
   Правило макета написано под класс .button, у нас кнопка .ui-button. */
.quote-form .ui-button {
  width: 100%;
  margin-top: 10px;
  border-radius: 18px;
}

/* Кнопки в блоке призыва — друг под другом и одной ширины, как в макете
   (.cta-actions: сетка, колонка не уже 290 px). В kit они стоят в строку
   по ширине содержимого, и рядом получаются кнопки разной длины. */
.site-cta .cluster {
  display: grid;
  gap: 10px;
  width: min(320px, 100%);
}
.site-cta .cluster .ui-button { width: 100%; }

/* Окно заявки открывается и без скриптов: ссылка «#quote» делает его целью
   перехода, и оно раскрывается правилом :target. Без этого при выключенном
   JS все кнопки заявки вели бы в никуда — формы на страницах больше нет.
   !important нужен, потому что kit скрывает [hidden] тоже с !important. */
.quote-modal:target {
  display: grid !important;
}
.quote-modal:target .quote-dialog { animation: none; }

/* Портрет основателя в круглом аватаре макета. Класс остаётся на <div>, а
   снимок лежит внутри: у <img> с тем же классом другие вычисленные свойства
   (maxWidth, overflowX, gridTemplateColumns), и сверка с макетом справедливо
   считает это расхождением — элемент-то другой. */
.founder-avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Абзац со ссылкой на вторую услугу под каталогом соседей. Макет гасит все
   ссылки в тексте (a { color: inherit; text-decoration: none }) — у него в
   абзацах ссылок не было, а kit обнуляет отступы абзацев. Без этого правила
   строка «Also in Abilene: gutter cleaning» прилипала к сетке и не читалась
   как ссылка. Селектор по соседству с каталогом — класса у абзаца нет. */
.service-area .city-directory + p,
.service-area .city-grid + p { margin: 16px 0 20px; color: var(--muted, #5b6b7a); }
.service-area .city-directory + p a,
.service-area .city-grid + p a { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }

/* Каталог городов группами — разметка из стилей штатов, где он и появился.
   Хабу вакансий эти стили не достаются: он подключает home.css и careers.css,
   а правила живут в state-house.css. Переносим дословно, как уже сделано с
   подвалом и формой, чтобы каталог выглядел одинаково везде. */
.city-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.city-group { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(145deg, #fff, #fbfcfd); box-shadow: 0 10px 30px rgba(11, 47, 80, 0.04); }
.city-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.city-links { display: flex; flex-wrap: wrap; gap: 8px; }
.city-group-head span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--navy); font-size: 0.7rem; font-weight: 850; }
.city-links a { padding: 8px 11px; border-radius: 999px; background: var(--warm); color: #42617c; font-size: 0.78rem; font-weight: 700; }

/* Каталог штатов на хабе вакансий: 48 групп, в самой большой сотня городов.
   Развёрнутыми они дают страницу в 28 000 пикселей, поэтому группа —
   <details>. Колонки уже, чем у каталога городов на странице штата: здесь
   в строке заголовка только название штата и счётчик. */
/* .container на этой странице сам является сеткой (364px + 756px), и каталог
   попадал в узкую колонку — 48 штатов в одну полосу. Растягиваем на всю
   ширину; в обычном контейнере свойство просто игнорируется. */
.state-collapse { grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-items: start; }
.state-collapse > .city-group { padding: 0; }
.state-collapse summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; font-weight: 800; color: var(--navy); }
.state-collapse summary span { color: var(--muted, #5b6b7a); font-size: .78rem; font-weight: 600; }
.state-collapse summary::-webkit-details-marker { display: none; }
.state-collapse[open] summary, .state-collapse > .city-group[open] summary { border-bottom: 1px solid var(--line); }
.state-collapse > .city-group > .city-links { padding: 16px 20px; }

/* Hero главной и хабов (2026-09-19, замечание заказчика: картинка в hero
   выше, чем на городских страницах). В макете заголовок главной — пять
   слов, у нас девять, плюс лид на шесть строк: колонка текста вырастала
   до 1077 px, и картинка растягивалась за ней (на Тампе и в макете 694 px).
   Меньший кегль даёт три строки, и картинка возвращается к высоте города.
   У хабов картинки портретные, их высоту держит отдельный потолок. Только
   десктоп: ниже 981 px hero одноколоночный, там макетные правила. */
@media (min-width: 981px) {
  body.home .hero h1, body.hub .hero h1 { font-size: clamp(2.2rem, 3.8vw, 3.4rem); line-height: 1.04; }
  body.home .hero-lead, body.hub .hero-lead { font-size: 1rem; }
  body.hub .hero-media > img { max-height: 694px; }
}