/* Синапса — base styles + state classes, ported from the design brief.
   The dc-runtime's style-hover / style-focus attributes are expressed here as
   classes; everything layout-related stays inline in index.html, as designed. */

/* ---------- self-hosted fonts (latin + cyrillic subsets from Google Fonts) ----------
   Cormorant Garamond and Manrope are variable fonts: one file covers all used weights. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html { background: #F7F4EE; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: #F7F4EE; color: #141414; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: #2338FF; color: #F7F4EE; }
a { color: #141414; }
a:hover { color: #2338FF; }
:focus-visible { outline: 2px solid #2338FF; outline-offset: 4px; border-radius: 1px; }
@keyframes omRing { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes omBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }

/* skip to content */
.skip-link { position: absolute; left: 14px; top: -64px; z-index: 100; background: #2338FF; color: #F7F4EE; padding: 10px 16px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.06em; text-decoration: none; transition: top 0.2s ease; }
.skip-link:hover { color: #F7F4EE; }
.skip-link:focus { top: 14px; }

/* desktop nav links; .is-active is set by the scrollspy */
.nav-spy { color: #6B6862; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.25s ease, text-decoration-color 0.25s ease, text-underline-offset 0.25s ease; }
.nav-spy:hover, .nav-spy:focus-visible, .nav-spy.is-active { color: #141414; text-decoration-color: #2338FF; text-underline-offset: 6px; }

/* mobile overlay menu items */
.ov-link { color: #141414; text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: transparent; text-underline-offset: 0.18em; transition: text-decoration-color 0.25s ease; }
.ov-link:hover, .ov-link:focus-visible { color: #141414; text-decoration-color: #2338FF; }

/* mailto links */
.mail-link { color: #2338FF; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 0.25s ease, text-underline-offset 0.25s ease; }
.mail-link:hover, .mail-link:focus-visible { color: #2338FF; text-decoration-color: #2338FF; }
.mail-link--shift:hover, .mail-link--shift:focus-visible { text-underline-offset: 6px; }

/* "следи го сигналот" hero hint */
.start-link { color: #6B6862; transition: color 0.25s ease; }
.start-link:hover, .start-link:focus-visible { color: #2338FF; }

/* underline CTAs (open form / submit) */
.cta-link { color: #141414; text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: transparent; transition: text-decoration-color 0.3s ease; }
.cta-link:hover, .cta-link:focus-visible { color: #141414; text-decoration-color: #2338FF; }

/* contact form fields */
.field { appearance: none; background: transparent; border: none; border-bottom: 1px solid #D9D4C9; border-radius: 0; font-family: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400; color: #141414; caret-color: #2338FF; outline: none; transition: border-color 0.3s ease; }
.field:focus { border-bottom-color: #2338FF; }

/* honeypot — visually removed, present for bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* hero diagrams: focus ring only for keyboard focus, never for clicks */
[data-hsyn]:focus:not(:focus-visible),
[data-mini]:focus:not(:focus-visible) { outline: none; }

/* the hero diagram only works in the side-by-side layout (>~1100px). Below
   that, hide it: the copy owns the first screen, vertically centered, with
   the «следи го сигналот» hint pinned at the hero's bottom edge. */
@media (max-width: 1100px) {
  .hero-diagram { display: none !important; }
  .hero-copy { min-height: calc(100svh - 185px); display: flex; flex-direction: column; justify-content: center; }
}

/* larger editorial type on phones */
@media (max-width: 700px) {
  .hero-copy > p:nth-of-type(1) { font-size: 0.75rem !important; }
  .hero-copy h1 { font-size: clamp(3rem, 16vw, 4.25rem) !important; }
  .hero-copy > p:nth-of-type(2) { font-size: clamp(1.5rem, 6.6vw, 1.75rem) !important; }
  .hero-copy > p:nth-of-type(3) { font-size: clamp(1.0625rem, 4.8vw, 1.1875rem) !important; }
}