/*
 * LEGARD — small-screen type scale
 *
 * styles.css is a pre-compiled Tailwind build whose display sizes are fixed:
 * .text-display-lg is 72px and .text-display-md is 48px at EVERY width. On a
 * 375px phone the content column is only 311px wide, so long headings were
 * being clipped by the hero's `overflow-hidden` (up to half of the heading
 * invisible on uk/criminal.html and uk/gambling.html).
 *
 * These rules only apply below the `md` breakpoint (768px), so the desktop
 * design is untouched. Load AFTER styles.css — the selectors have the same
 * specificity as the originals and win on source order.
 */

@media (max-width: 767px) {
  .text-display-lg {
    font-size: 40px;
    line-height: 1.12;
  }

  .text-display-md {
    font-size: 30px;
    line-height: 1.2;
  }

  .text-headline-lg {
    font-size: 24px;
  }
}

/* Tablets: the `md:` grid columns kick in here, so the text column is still
   far narrower than the 72px display size assumes. */
@media (min-width: 768px) and (max-width: 1023px) {
  .text-display-lg {
    font-size: 50px;
    line-height: 1.12;
  }

  .text-display-md {
    font-size: 36px;
  }

  .text-headline-lg {
    font-size: 28px;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .text-display-lg {
    font-size: 60px;
    line-height: 1.12;
  }

  .text-display-md {
    font-size: 42px;
  }
}

/* Safety net at every width below the full desktop layout: a single word
   longer than its column breaks instead of being cut off by the surrounding
   `overflow-hidden`. */
@media (max-width: 1279px) {
  h1, h2, h3 {
    overflow-wrap: break-word;
  }
}

/*
 * iOS Safari: `100vh` is the viewport WITHOUT the browser chrome subtracted,
 * so a `h-screen` hero is taller than what the user can actually see and its
 * lower content hides behind the address bar. `dvh` tracks the real visible
 * height. Guarded by @supports so older browsers keep the vh value.
 */
@supports (height: 100dvh) {
  .h-screen {
    height: 100dvh;
  }

  .min-h-screen {
    min-height: 100dvh;
  }

  .min-h-\[80vh\] {
    min-height: 80dvh;
  }
}

/*
 * Short viewports — landscape phones above all. The heroes are `flex
 * items-center` inside a full-viewport (or, on en/business.html, a hard
 * 800px) box, so on a 320px-tall screen the heading and buttons were centred
 * around 400px and sat far below the fold. Here the hero sizes to its own
 * content instead.
 */
@media (max-height: 700px) and (max-width: 1279px) {
  main .h-screen {
    height: auto;
  }

  main .min-h-screen,
  main .min-h-\[80vh\],
  main .min-h-\[800px\] {
    min-height: 0;
  }

  main > section:first-of-type {
    padding-top: 72px;
    padding-bottom: 56px;
  }

  /* A 128px header plus its 128px spacer ate 200px of a 320px-tall landscape
     screen before any content. Halve both. */
  header nav.h-32 {
    height: 80px;
  }

  header + div.h-32 {
    height: 80px;
  }

  header nav img.h-16 {
    height: 44px;
  }
}

/* Touch devices: footer and menu links were ~20px tall, well under the 44px
   minimum tap target. */
@media (pointer: coarse) {
  footer li a,
  footer ul a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Footer link rows are `flex` with no wrap, so on a 320px screen the legal
   links pushed the page 6px wider than the viewport. Wrapping only engages
   when the row would otherwise overflow. */
@media (max-width: 767px) {
  footer .flex {
    flex-wrap: wrap;
  }
}

/*
 * Header layout.
 *
 * The logo is a flex child with a fixed height and `w-auto`, so whenever the
 * nav ran out of room flex-shrink squeezed it horizontally — the LEGARD mark
 * was rendering at an aspect of 2.24 instead of its true 3.49 (visibly
 * stretched) at 1280px, and at 48% of its correct width on phones.
 */
header nav > a:first-child {
  flex: 0 0 auto;
}

header nav img {
  flex-shrink: 0;
  max-width: none;
  object-fit: contain;
}

/*
 * Tailwind reveals the full desktop nav at `md` (768px), but logo + 7 links +
 * language switch + CTA need roughly 1205px once tightened. Between 768px and
 * 1280px it overflowed; the drop-down menu from assets/nav.js covers that
 * range instead. Keep 1280 in sync with BREAKPOINT in assets/nav.js.
 */
@media (max-width: 1279px) {
  header nav > div.hidden {
    display: none;
  }
}

/* 1280–1439px: tighten the link row so it fits without squeezing anything. */
@media (min-width: 1280px) and (max-width: 1439px) {
  header nav > div.hidden:first-of-type {
    gap: 20px;
  }

  header nav > div.hidden + div.hidden {
    margin-left: 16px;
    padding-left: 16px;
    margin-right: 8px;
  }
}

/*
 * Шапка. У розмітці їй задано `bg-surface/80`, але цього класу немає в
 * передкомпільованому styles.css — фону не було взагалі, лише розмиття
 * backdrop-blur, тож під час прокручування текст сторінки просвічував крізь
 * меню. Фон суцільний: LEGARD BLACK з брендбуку.
 */
header.fixed {
  background-color: #101212;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Стрілка, яку motion.js додає до «Консультація», не повинна переносити
   підпис кнопки в шапці на другий рядок. */
header nav > button {
  white-space: nowrap;
}

/* Посилання у футері, які переносяться на два рядки (вузькі колонки), мають
   натискатися й у проміжку між рядками, а не лише по самих словах. */
@media (pointer: fine) {
  footer li a {
    display: inline-block;
  }
}

/* ── Кнопка «Запит на консультацію» в першому екрані ─────────────────── */
.lg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.lg-hero-cta {
  padding: 18px 34px;
  background: transparent;
  border: 1px solid #b5965a;
  color: #b5965a;
  font-family: Manrope, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.lg-hero-cta:hover,
.lg-hero-cta:focus-visible {
  background: #b5965a;
  color: #101212;
  outline: none;
}

@media (max-width: 480px) {
  .lg-hero-cta {
    width: 100%;
    padding: 18px 16px;
    letter-spacing: 0.14em;
    white-space: normal;
  }
}

/* ── Мобільна шапка ──────────────────────────────────────────────────────
   У звичайному портретному режимі телефона шапка займала 128px (плюс така
   сама розпірка). На вузьких екранах — 84px, логотип 44px. */
@media (max-width: 767px) {
  header nav.h-32 {
    height: 84px;
    padding-top: 0;
    padding-bottom: 0;
  }

  header + div.h-32 {
    height: 84px;
  }

  header nav img.h-16 {
    height: 44px;
  }
}

/* ── Запасні шрифти ──────────────────────────────────────────────────────
   У styles.css класи font-body-lg / font-body-md / font-label-caps /
   font-display-lg / font-display-md / font-headline-lg задані без запасного
   варіанта. Якщо Google Fonts не завантажаться, браузер підставляв би шрифт
   за замовчуванням. Тепер — близькі системні шрифти.
   Префікс html у класах — щоб правило не перебили <style>-блоки сторінок,
   які підключені пізніше і задають ті самі класи з одним лише serif/sans-serif. */
body,
html .font-body-lg,
html .font-body-md,
html .font-label-caps {
  font-family: Manrope, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1,
h2,
h3,
h4,
html .font-display-lg,
html .font-display-md,
html .font-headline-lg {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ── Іконки ──────────────────────────────────────────────────────────────
   Колишні іконки шрифту Material Symbols тепер вбудовані SVG (Apache 2.0,
   google/material-design-icons, товщина 300). Колір — від тексту
   (text-secondary тощо). Розмір 24px, як і був: CSS шрифту Google підключався
   після styles.css і перебивав класи text-4xl / text-5xl, тож на сайті іконки
   завжди були 24px. Хочете більші — змініть font-size тут. */
svg.material-symbols-outlined {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 24px;
  fill: currentColor;
  flex: none;
  vertical-align: -0.15em;
}

/* ── WebP через <picture> ────────────────────────────────────────────────
   <picture class="lg-pic"> не створює власного блоку: <img> усередині
   розташовується так само, як до обгортання (absolute inset-0, h-full,
   object-cover тощо). JPEG лишається запасним варіантом для старих браузерів. */
picture.lg-pic {
  display: contents;
}