/* ==========================================================================
   OMG Big Boobs — Base & Layout Shell
   Depends on omg-tokens.css and omg-fonts.css being loaded first.
   ========================================================================== */

/* ---------- Reset ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--omg-bg);
  color: var(--omg-text);
  font-family: var(--omg-font);
  font-size: var(--omg-fs-body);
  font-weight: var(--omg-w-regular);
  line-height: var(--omg-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---------- Accessibility floor ------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--omg-pink);
  outline-offset: 2px;
  border-radius: var(--omg-radius-sm);
}

.omg-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.omg-skip-link {
  position: absolute;
  top: -100px;
  left: var(--omg-space-4);
  z-index: var(--omg-z-modal);
  padding: var(--omg-space-3) var(--omg-space-5);
  background: var(--omg-pink);
  color: var(--omg-text-on-pink);
  border-radius: var(--omg-radius-pill);
  font-weight: var(--omg-w-semibold);
  transition: top var(--omg-dur) var(--omg-ease);
}
.omg-skip-link:focus { top: var(--omg-space-4); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Container ---------------------------------------------------- */

.omg-container {
  width: 100%;
  max-width: var(--omg-container);
  margin-inline: auto;
  padding-inline: var(--omg-space-5);
}

@media (min-width: 1024px) {
  /* CHANGE 2026-09-23: parity - content width. Global border-box plus the 64px
     desktop padding made the usable width 1256, not the 1384 the token names
     (Figma content runs x=64..1448). Add the two gutters to the box so the
     content is exactly 1384 at >=1512. Below 1512 the padding still applies
     and the content shrinks fluidly as before. Header pill has its own
     1480 max-width and is unaffected. */
  .omg-container {
    padding-inline: var(--omg-space-8);
    max-width: calc(var(--omg-container) + 2 * var(--omg-space-8));
  }
}

/* Section rhythm. Applied to the section element itself so card and grid
   rules never need to fight it for specificity. */
.omg-section { padding-block: var(--omg-space-7); }

@media (min-width: 1024px) {
  /* CHANGE 2026-09-16: Peter "compress desktop" = less space between
     sections. Was space-9 (96px each side, 192 between). Now 48/96. */
  .omg-section { padding-block: var(--omg-space-7); }
}

@media (max-width: 1023px) {
  /* CHANGE 2026-10-06: Peter item 4b - minimize mobile free space. Figma
     mobile tiles measured: ~48px between sections (so 24 each side, was 48
     each side = 96 between). */
  .omg-section { padding-block: var(--omg-space-5); }
}

/* ---------- Header ------------------------------------------------------- */

.omg-header {
  position: sticky;
  top: 0;
  z-index: var(--omg-z-header);
  background: var(--omg-grad-header);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--omg-border);
  transition: transform var(--omg-dur-slow) var(--omg-ease);
}

/* Peter's brief: header hides on scroll down, returns on scroll up.
   Toggled by omg-tour.js. */
.omg-header[data-hidden='true'] { transform: translateY(-100%); }

.omg-header__inner {
  display: flex;
  align-items: center;
  gap: var(--omg-space-4);
  min-height: var(--omg-header-h);
  padding-block: var(--omg-space-3);
}

.omg-header__menu-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--omg-radius-sm);
  color: var(--omg-text);
  transition: background var(--omg-dur) var(--omg-ease);
}
.omg-header__menu-btn:hover { background: rgba(255,255,255,0.10); }

.omg-header__logo { flex: 0 0 auto; }
.omg-header__logo img { height: 46px; width: auto; }

.omg-header__search { flex: 1 1 auto; min-width: 0; }

.omg-header__actions {
  display: flex;
  align-items: center;
  gap: var(--omg-space-3);
  flex: 0 0 auto;
}

@media (max-width: 1023px) {
  .omg-header__search { order: 10; flex-basis: 100%; }
  .omg-header__inner { flex-wrap: wrap; }
  /* CHANGE 2026-09-23: Peter 9-23 mobile header "visually not the same".
     Figma mobile (750 export /2): row 1 is a 56-tall glass pill (r16, same
     white 16%/24% recipe as desktop) holding hamburger / logo 44 / user icon
     pushed right; search is a separate full-width field below, 56 tall, r16,
     12px gap, icon + placeholder with NO SEARCH button. EN selector in the
     pill is still scoped out (translation layer pending, on Peter's list). */
  .omg-header { padding: 8px 0 0; }
  .omg-header .omg-header__inner {
    row-gap: 12px;
  }
  .omg-header .omg-header__menu-btn { margin-right: 4px; }
  .omg-header .omg-header__logo img { height: 44px; width: auto; }
  .omg-header .omg-header__actions { margin-left: auto; }
  .omg-header .omg-header__row {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid var(--omg-glass-border);
    border-radius: var(--omg-radius-lg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .omg-header .omg-search {
    height: 56px;
    border-radius: var(--omg-radius-lg);
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--omg-glass-border);
  }
  .omg-header .omg-search__submit { display: none; }
}

/* ---------- Search field -------------------------------------------------- */

.omg-search {
  display: flex;
  align-items: center;
  gap: var(--omg-space-3);
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--omg-border);
  border-radius: var(--omg-radius-pill);
  padding-left: var(--omg-space-5);
  transition: border-color var(--omg-dur) var(--omg-ease);
}
.omg-search:focus-within { border-color: var(--omg-border-pink); }

.omg-search__icon { color: var(--omg-text-muted); flex: 0 0 auto; }

.omg-search__input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  padding-block: var(--omg-space-3);
  color: var(--omg-text);
}
.omg-search__input::placeholder { color: var(--omg-text-muted); }
.omg-search__input:focus { outline: none; }

.omg-search__submit {
  flex: 0 0 auto;
  padding: var(--omg-space-3) var(--omg-space-6);
  margin: 4px;
  background: var(--omg-text);
  color: var(--omg-pink);
  border-radius: var(--omg-radius-pill);
  font-weight: var(--omg-w-bold);
  font-size: var(--omg-fs-small);
  letter-spacing: var(--omg-track-button);
  text-transform: uppercase;
  transition: background var(--omg-dur) var(--omg-ease),
              color var(--omg-dur) var(--omg-ease);
}
.omg-search__submit:hover {
  background: var(--omg-pink);
  color: var(--omg-text-on-pink);
}

/* CHANGE 2026-09-18: parity pass - desktop header rebuilt to Ihor's Home Page
   export, measured at 2x on the server. Figma has no header bar: it is a floating
   glass pill 1480x104, radius 16, 16px from the top and sides of the 1512 frame,
   48px inner padding. Hamburger 32 box at x=64, logo 90x75 at x=144, search field
   at x=356, 56 tall, radius 12, SEARCH button 48 tall, radius 8, inset 4 from the
   field edge. Pill fill MEASURES white ~16% against the panel beside it (glass
   token says 8%); border is white 24% as per token. Search border sampled as a
   pink-tinted white. Backdrop blur radius is still a guess (ask Peter once, at
   the end). JOIN NOW and the EN selector are absent on purpose (Peter 09-06 /
   translation scope pending) so the search field grows into their space.
   Desktop only - the <=1023 header is untouched until the mobile pass. */
@media (min-width: 1024px) {
  .omg-header {
    padding: 16px 16px 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
    pointer-events: none;
  }
  .omg-header > .omg-header__inner {
    max-width: 1480px;
    height: 104px;
    min-height: 0;
    padding: 0 47px;
    gap: 0;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid var(--omg-glass-border);
    border-radius: var(--omg-radius-lg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    pointer-events: auto;
  }
  .omg-header .omg-header__menu-btn { margin-inline: -4px; }
  .omg-header .omg-header__logo { margin-left: 48px; }
  /* CHANGE 2026-09-23: header__row wrapper (mobile pill) dissolves on desktop;
     actions pushed after the search to keep the 09-18 order. */
  .omg-header .omg-header__row { display: contents; }
  .omg-header .omg-header__actions { order: 10; }
  .omg-header .omg-header__logo img { height: 75px; width: auto; }
  .omg-header .omg-header__search {
    margin-left: clamp(24px, 8.1vw, 123px);
    margin-right: clamp(16px, 3.7vw, 56px);
  }
  .omg-header .omg-search {
    height: 56px;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 217, 236, 0.55);
    border-radius: 12px;
  }
  .omg-header .omg-search:focus-within { border-color: var(--omg-border-pink); }
  .omg-header .omg-search__submit {
    height: 48px;
    margin: 0 3px 0 0;
    padding: 0 24px;
    border-radius: 8px;
    font-size: var(--omg-fs-button);
    font-weight: var(--omg-w-semibold);
    line-height: var(--omg-lh-text);
  }
}

/* ---------- Footer -------------------------------------------------------- */

.omg-footer {
  background: var(--omg-bg-footer);
  padding-block: var(--omg-space-8) var(--omg-space-5);
}

.omg-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--omg-space-8);
  padding-bottom: var(--omg-space-7);
}

@media (max-width: 900px) {
  .omg-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--omg-space-6); }
}
@media (max-width: 520px) {
  .omg-footer__grid { grid-template-columns: 1fr; }
}

.omg-footer__logo img { height: 56px; width: auto; margin-bottom: var(--omg-space-5); }

.omg-footer__social {
  display: flex;
  gap: var(--omg-space-3);
}

.omg-footer__social a {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--omg-pink);
  color: var(--omg-text-on-pink);
  transition: background var(--omg-dur) var(--omg-ease),
              transform var(--omg-dur) var(--omg-ease);
}
.omg-footer__social a:hover {
  background: var(--omg-pink-hover);
  transform: translateY(-2px);
}

.omg-footer__heading {
  font-size: var(--omg-fs-h4);
  font-weight: var(--omg-w-bold);
  text-transform: uppercase;
  letter-spacing: var(--omg-track-heading);
  margin-bottom: var(--omg-space-5);
}

.omg-footer__links li + li { margin-top: var(--omg-space-3); }

.omg-footer__links a {
  color: var(--omg-text-muted);
  transition: color var(--omg-dur) var(--omg-ease);
}
.omg-footer__links a:hover { color: var(--omg-pink); }

.omg-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--omg-space-4);
  padding-top: var(--omg-space-5);
  border-top: 1px solid var(--omg-border);
  font-size: var(--omg-fs-small);
  color: var(--omg-text-muted);
}

.omg-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--omg-space-3);
}
.omg-footer__legal-links a { text-decoration: underline; }
.omg-footer__legal-links a:hover { color: var(--omg-pink); }

/* CHANGE 2026-10-06: Peter - cut mobile side gutters and column gap by 50%
   (was 24px padding-inline, 16px grid gap). Mobile only. */
@media (max-width: 640px) {
  :root { --omg-grid-gap: 8px; }
  .omg-container { padding-inline: 12px; }
}

/* CHANGE 2026-10-06: Peter - mobile header block too tall (~144px: 8 pad +
   56 pill + 12 gap + 56 search + inner padding). Compacted: gaps minimized
   first, then bar heights. Now ~86px. Header still auto-hides on scroll down. */
@media (max-width: 1023px) {
  .omg-header { padding: 4px 0 0; }
  .omg-header .omg-header__inner { padding-block: 0 4px; row-gap: 4px; min-height: 0; }
  .omg-header .omg-header__row { min-height: 40px; padding: 0 12px; }
  .omg-header .omg-header__logo img { height: 30px; }
  .omg-header .omg-search { height: 38px; }
  .omg-header .omg-search__input { padding-block: 6px; }
}