/* ============================================================
   oki-base.css — universal base layer for Oki-Toki block layouts.
   Per wp-layout-responsive: ONE container token + a single .container
   primitive + an explicit breakpoint scale (1200 / 992 / 768 / 500).
   Design tokens map onto the theme.json presets (single source of truth).
   Scoped under `.oki-contacts` so it never clashes with the classic
   Bootstrap theme. Enqueue this BEFORE any page-section CSS.
   English-only comments. BEM. No !important.
   ============================================================ */

/* Self-host the design's primary face. The legacy @font-face in style.css is
   commented out AND aliased to "Arial", so 'Arial Rounded MT Pro Cyr' was not
   loaded under its own name — declare it here so --font-sans resolves to it
   (else it falls back to Manrope). Files live in the theme's fonts/. */
@font-face {
  font-family: 'Arial Rounded MT Pro Cyr';
  src: url('../../fonts/ArialRoundedMTProCyr.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Arial Rounded MT Pro Cyr';
  src: url('../../fonts/ArialRoundedMTProCyr-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

.oki-contacts {
  /* Palette -> theme.json presets */
  --color-ink:        var(--wp--preset--color--ink);
  --color-text:       var(--wp--preset--color--text);
  --color-text-light: var(--wp--preset--color--text-light);
  --color-bg:         var(--wp--preset--color--bg);
  --color-cream:      var(--wp--preset--color--cream);
  --color-border:     var(--wp--preset--color--border);
  --color-brand:      var(--wp--preset--color--brand);
  --color-brand-dark: var(--wp--preset--color--brand-dark);
  --color-brand-soft: var(--wp--preset--color--brand-soft);
  --color-lilac:      var(--wp--preset--color--lilac);
  --color-lilac-soft: var(--wp--preset--color--lilac-soft);
  --color-coral:      var(--wp--preset--color--coral);
  /* Dark section band (proof). NOTE: the design token is misleadingly named
     --color-footer:#141414 but it styles the DARK SECTION, not the footer
     (the real footer is #2B3643 and owned by css/footer.css). Keep them separate. */
  --color-section-dark: #141414;

  /* Type -> Manrope (drop Arial Rounded), Caveat for the hand accent */
  --font-sans: var(--wp--preset--font-family--sans);
  --font-hand: var(--wp--preset--font-family--hand);

  --radius:    13px;
  --radius-md: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 2px 8px rgba(20, 20, 20, .06);
  --shadow-md: 0 8px 24px rgba(20, 20, 20, .10);
  --shadow-lg: 0 20px 48px rgba(20, 20, 20, .14);
  --section-py: 46px; /* design value; tightened on smaller screens below */

  /* Layout: ONE canonical container width (wp-layout-responsive). */
  --container: 1200px;
  --gutter:    clamp(18px, 4.5vw, 36px);

  font-family: var(--font-sans);
  color: var(--color-text);
  line-height: 1.6;
}

/* ---------- Scoped reset / primitives ---------- */
.oki-contacts *, .oki-contacts *::before, .oki-contacts *::after { box-sizing: border-box; }
.oki-contacts img, .oki-contacts svg { display: block; max-width: 100%; }
.oki-contacts a { color: inherit; text-decoration: none; }
/* Neutralize the classic theme's global p{width:100%;margin-bottom:1rem}, which
   otherwise forces flex rows (e.g. contact channels) to wrap label and value
   onto separate lines. Components set their own margins where needed. */
.oki-contacts p { width: auto; margin: 0; }
.oki-contacts h1, .oki-contacts h2, .oki-contacts h3, .oki-contacts h4 {
  font-family: var(--font-sans);
  line-height: 1.15;
  color: var(--color-ink);
  font-weight: 700;
  /* Classic theme sets a global h1{text-transform:uppercase} and footer.php JS
     force-uppercases any heading whose computed text-transform is uppercase.
     Reset to none here so our headings keep the authored (sentence) case and
     the JS skips them. */
  text-transform: none;
}
.oki-contacts :focus-visible { outline: 3px solid var(--color-brand-dark); outline-offset: 2px; border-radius: 4px; }

/* ---------- Layout primitive ---------- */
.oki-contacts .container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.oki-contacts .section { padding-block: var(--section-py); }
.oki-contacts .section--cream { background: var(--color-cream); }
.oki-contacts .section--dark  { background: var(--color-section-dark); color: #fff; }
.oki-contacts .section--dark :is(h1, h2, h3, h4) { color: #fff; }

/* ---------- Typography primitives ---------- */
.oki-contacts .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-brand-dark);
}
.oki-contacts .eyebrow::before { content: ""; inline-size: 20px; block-size: 2px; border-radius: 2px; background: currentColor; opacity: .6; }
.oki-contacts .section__head { max-width: 56ch; }
.oki-contacts .section__title { font-size: clamp(23px, 3.8vw, 37px); line-height: 1.1; letter-spacing: -.02em; }
.oki-contacts .section__lead { margin-top: 14px; font-size: clamp(15px, 1.8vw, 17px); line-height: 1.5; color: var(--color-text-light); }
.oki-contacts .text-balance { text-wrap: balance; }
.oki-contacts .text-pretty { text-wrap: pretty; }

/* Inline word accents (hero / headings). Authored via <span class="..."> in
   the heading field; reusable across sections. */
.oki-contacts .marker-lilac { background: linear-gradient(180deg, transparent 55%, var(--color-lilac-soft) 55%); padding: 0 0.15em; }
.oki-contacts .underline-wavy {
  background-image: linear-gradient(transparent 65%, var(--color-brand) 65%, var(--color-brand) 92%, transparent 92%);
  background-repeat: no-repeat; background-size: 100% 100%; padding: 0 0.1em;
}

/* ---------- Buttons ---------- */
.oki-contacts .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  font-weight: 700; font-size: 14px; line-height: 1; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.oki-contacts .btn svg { inline-size: 16px; block-size: 16px; }
.oki-contacts .btn--primary { background: var(--color-brand); color: var(--color-ink); box-shadow: 0 10px 30px -12px rgba(24, 208, 205, .55); }
.oki-contacts .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(24, 208, 205, .75); }
.oki-contacts .btn--ghost { background: transparent; color: var(--color-ink); border: 2px solid color-mix(in oklab, var(--color-ink) 14%, transparent); }
.oki-contacts .btn--ghost:hover { border-color: color-mix(in oklab, var(--color-ink) 32%, transparent); background: color-mix(in oklab, var(--color-ink) 4%, transparent); }
.oki-contacts .btn--dark { background: var(--color-ink); color: #fff; }
.oki-contacts .btn--dark:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.oki-contacts .btn--block { width: 100%; }
.oki-contacts .btn__arrow { transition: transform .18s ease; }
.oki-contacts .btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------- Responsive rhythm (design scale: 960 / 768 / 500) ---------- */
@media (max-width: 960px) { .oki-contacts { --section-py: 32px; } }
@media (max-width: 500px) { .oki-contacts { --section-py: 22px; font-size: 14px; } }