/* ==========================================================================
   Brand skin: interaktif.space
   Loaded after theme.css (front end) and as an editor style. Only structural
   / decorative things that a token swap can't express live here — the token
   values themselves come from wp-content/mu-plugins/interaktif-brand.php via the sorted_palette
   filter, except the dark-mode tokens which must be set here (the wp_head
   palette injector emits a single non-theme-aware :root block).
   ========================================================================== */

/* --- Shape + dark-mode tokens ----------------------------------------- */
:root {
  --sorted-radius: 12px;
  /*
   * 3px is Kali's neo-brutalist signature and comes with the base theme.
   * Interaktif is the opposite language — thin lines, warm paper, generous
   * whitespace — and every bordered card was inheriting a 3px ink frame,
   * which on a dark landing page reads as a near-white box. The glass panels
   * were already opting out with their own 1px rule; this makes it the brand
   * default instead of a per-component escape.
   */
  --sorted-border-width: 1px;
  /*
   * This palette is monochrome: --sorted-accent IS the ink (#0A0A0A). Accent
   * colours are deliberately not remapped for dark mode, so anything that
   * highlighted with the accent went near-black on a dark page and simply
   * disappeared — nav hover, the current page link, the language and social
   * links, card borders. --sorted-ink IS theme-aware, so pointing the
   * highlight token at it fixes all of them at once, in both modes.
   */
  --sorted-highlight: var(--sorted-ink);
}

/*
 * ...and again on the tone scopes. A custom property is substituted where it
 * is DECLARED, so `--sorted-highlight: var(--sorted-ink)` above resolves to
 * the PAGE ink at :root and descendants inherit that resolved value —
 * re-declaring --sorted-ink inside .sorted-tone--tertiary does not update it.
 * Without this line every hover, focus ring and accent rule inside an
 * inverted band is near-black on near-black, which is the exact bug the
 * token was introduced to kill. Dark mode escapes it only because
 * :root[data-theme="dark"] lands on the same element as :root.
 */
:root,
.sorted-tone--secondary,
.sorted-tone--tertiary {
  --sorted-highlight: var(--sorted-ink);
}
:root[data-theme="dark"] {
  --sorted-bg: #111110;
  --sorted-bg-alt: #1c1c19;
  --sorted-ink: #F0EFE9;
  --sorted-ink-soft: #888882;
  --sorted-footer-bg: #111110;
  --sorted-footer-text: #F0EFE9;
}

body { font-family: var(--sorted-font-body); text-wrap: pretty; }

/* --- Buttons: outline by default, dark fill for --solid (source .btn) --- */
.sorted-btn {
  background: transparent;
  color: var(--sorted-ink);
  border: 1px solid var(--sorted-ink);
  font-weight: 400;
  font-size: var(--sorted-fs-sm);
  padding: .7rem 1.4rem;
}
.sorted-btn:hover { background: var(--sorted-ink); color: var(--sorted-bg); transform: none; }
.sorted-btn--solid { background: var(--sorted-ink); color: var(--sorted-bg); border-color: var(--sorted-ink); }
.sorted-btn--solid:hover { opacity: .82; background: var(--sorted-ink); color: var(--sorted-bg); }

/* --- Floating pill header ------------------------------------------------ */
.sorted-header--floating {
  position: sticky;
  top: 14px;
  z-index: 50;
  width: calc(100% - 2 * var(--sorted-container-pad));
  max-width: var(--sorted-max-width);
  margin: 14px auto 0;
  background: color-mix(in srgb, var(--sorted-bg) 88%, transparent);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--sorted-border);
  border-radius: 100px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .07);
}
.sorted-header--floating .sorted-header__inner { min-height: 0; padding-block: .5rem; gap: 1rem; }
.sorted-header--floating .sorted-header__nav a {
  font-family: var(--sorted-font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--sorted-fs-sm);
  font-weight: 400;
}
.sorted-header--floating .sorted-header__nav a:hover { color: var(--sorted-ink); opacity: .55; }
.sorted-header--floating .sorted-header__cta {
  background: transparent;
  color: var(--sorted-ink);
  border: 1px solid var(--sorted-ink);
  font-size: var(--sorted-fs-xs);
  padding: .4rem 1.1rem;
}
.sorted-header--floating .sorted-header__cta:hover { background: var(--sorted-ink); color: var(--sorted-bg); }

/* Language switcher: stop it shifting when you switch.
   theme.css marks the active language font-weight:700, and bold is wider than
   regular — so EN/CS swapping which one is bold changes the switcher's width,
   and because it's the last item in a right-aligned row, everything left of it
   moves. Reserve enough width for the bold state so both render identically.
   (The other half of the jump was the Onest webfont swapping in after first
   paint; that's preloaded in the interaktif-brand.php mu-plugin.) */
.sorted-header__lang-link { min-width: 2.4ch; justify-content: center; }

/* Logo left, everything else right.
   The base theme centres the nav in the space left over beside the logo
   (theme.css, the min-width:1024px block — Kali's arrangement). interaktif
   pins the whole group instead: nav, CTA, socials and the dark-mode toggle
   all sit against the right edge of the pill, logo alone on the left.
   Scoped to the desktop breakpoint on purpose — below 1024px
   .sorted-header__actions becomes the full-width mobile overlay panel, and
   these rules would break its layout. */
@media (min-width: 1024px) {
  .sorted-header .sorted-header__actions { flex: 0 0 auto; margin-left: auto; }
  .sorted-header .sorted-header__nav { flex: 0 0 auto; }
  .sorted-header .sorted-header__nav > ul { justify-content: flex-end; }
}

/* Bigger wordmark (~56px tall, like interaktif.space's .brand img { height: 52px })
   in both the floating header and the bare landing header. The base theme caps
   .sorted-header__logo img at 2.5rem — lift that here. */
.sorted-header--floating .sorted-logo-link,
.sorted-landing-header .sorted-logo-link { width: 11rem; height: 3.5rem; }
.sorted-header--floating .sorted-header__logo img,
.sorted-landing-header .sorted-header__logo img,
.sorted-landing-header .sorted-logo-link .sorted-logo,
.sorted-header--floating .sorted-logo-link .sorted-logo { max-height: none; }
@media (max-width: 600px) {
  .sorted-header--floating .sorted-logo-link,
  .sorted-landing-header .sorted-logo-link { width: 9rem; height: 2.9rem; }
}
.sorted-landing-header__inner { padding-block: .5rem 1.5rem; }

/* --- Section headings — Onest, large, left-aligned by default --------
   interaktif.space uses .sec-title { font-size: clamp(28px,4.2vw,50px);
   font-weight: 400; text-align: left }. Center only where a block opts in
   with the "Heading alignment" control (adds --center). */
.sorted-section-heading,
.sorted-cta-statement__heading,
.sorted-hero__heading,
.sorted-landing-hero__heading {
  font-family: var(--sorted-font-display);
  font-weight: 400;
  letter-spacing: -0.03em;
}
.sorted-section-heading {
  text-align: left;
  font-size: clamp(1.75rem, 1rem + 3vw, 3.125rem); /* 28 → 50px */
  line-height: 1.06;
  margin-bottom: 2.75rem;
}
.sorted-section-heading--center { text-align: center; }

/* Closing statement reads at section-heading scale — not h1. */
.sorted-cta-statement__heading {
  font-size: clamp(1.75rem, 1rem + 3vw, 3.125rem); /* same as .sorted-section-heading */
  line-height: 1.1;
  text-wrap: balance;
  max-width: 22ch;
}
.sorted-cta-statement--has-form .sorted-cta-statement__heading { max-width: 18ch; }
.sorted-landing-hero__heading { font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.sorted-feature-card__title,
.sorted-capability__title,
.sorted-testimonials__name { font-family: var(--sorted-font-body); }

/* --- Hero: letter layout — inset paper card ------------------------- */
.sorted-hero--letter { padding-top: 5rem; padding-bottom: 5rem; }
.sorted-hero__letter {
  background: var(--sorted-bg);
  padding: 3.5rem 3.5rem 3.5rem 0;
  max-width: 42rem;
}
@media (min-width: 1024px) { .sorted-hero__letter { padding-right: 4rem; } }

/* --- Process cards: the three brand colours ------------------------- */
.sorted-process-card--green  { background: #9EE08A; color: #122E0A; }
.sorted-process-card--yellow { background: #F4D35E; color: #3A2E08; }
.sorted-process-card--black  { background: #161614; color: #F7F6F2; }
.sorted-process-card--pink   { background: #E9A8C4; color: #3E1828; }
.sorted-process-card--black .sorted-process-card__body { opacity: .65; }

/* --- Feature cards: glass variant (dark landing) — left-aligned text
   panels (matches the source .lp-glass-card), icon/number sits inline at
   the start, not in a centered chip. -------------------------------- */
.sorted-feature-cards--glass .sorted-feature-cards__grid { gap: 1.5rem; }
.sorted-feature-cards--glass .sorted-feature-card {
  background: color-mix(in srgb, var(--sorted-ink) 6%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--sorted-ink) 12%, transparent);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  text-align: left;
}
.sorted-feature-cards--glass .sorted-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: none;
  border-color: color-mix(in srgb, var(--sorted-ink) 22%, transparent);
}
.sorted-feature-cards--glass .sorted-feature-card__icon {
  background: none;
  width: auto;
  height: auto;
  justify-content: flex-start;
  font-size: var(--sorted-fs-2xl);
  margin-bottom: .6rem;
}
.sorted-feature-cards--glass .sorted-feature-card__title { margin-top: 0; }

/* --- Partner logos: single-colour files are supplied light-on-dark
   (white). Invert them to dark on the light theme; leave the explicit
   dual light/dark pairs (--light / --dark) alone. ------------------ */
:root:not([data-theme="dark"]) .sorted-partner-logos__img--single { filter: invert(1); }
:root:not([data-theme="dark"]) .sorted-partner-logos--muted .sorted-partner-logos__img--single { filter: invert(1) grayscale(1); }

/* --- Testimonials: terracotta rule -------------------------------- */
.sorted-testimonials__quote { border-left-color: #C87850; }

/* --- Bento: hover polish ----------------------------------------- */
.sorted-bento__item { border: 1px solid color-mix(in srgb, var(--sorted-ink) 8%, transparent); transition: transform .3s, border-color .3s; }
.sorted-bento__item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--sorted-ink) 22%, transparent); }
.sorted-bento__item img { transition: transform .6s, filter .4s; filter: grayscale(10%) contrast(1.05); }
.sorted-bento__item:hover img { transform: scale(1.04); filter: none; }

/* --- Contact Form 7 -------------------------------------------------------
   Strip every bit of CF7 chrome (the <fieldset> browser border, the SR
   response block, wrapper margins) so only the fields remain, then style
   the fields to match the source .lp-input / .btn-primary. */
/* theme.css styles .wpcf7 as a bordered card (the site's contact-page box):
   chunky ink border, --sorted-bg fill, 2rem padding, full container width.
   On a landing page that card is wrong everywhere it appears — over the hero
   photo it's a slab, and inside the closing CTA panel it's a box in a box.
   Resetting margin alone left all of that in place, which is what turned the
   sport skin's hero form into a white block. Kill the card outright wherever
   a form sits inside a landing section; the fields carry their own styling. */
.wpcf7 { margin: 0; }
.sorted-landing-hero .wpcf7,
.sorted-email-capture .wpcf7,
.sorted-cta-statement .wpcf7 {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  width: auto;
  max-width: none;
}
.wpcf7 form,
.wpcf7-form { border: 0; margin: 0; padding: 0; }
.wpcf7-form fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.wpcf7-form .hidden-fields-container { display: none; }
.wpcf7-form .screen-reader-response {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.wpcf7-form > p { margin: 0; }
.wpcf7-form .wpcf7-response-output {
  margin: .75rem 0 0; padding: .55rem .9rem; border-width: 1px; border-radius: 8px;
  font-size: var(--sorted-fs-sm);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  padding: 1rem 1.25rem;
  font: inherit;
  font-size: var(--sorted-fs-base);
  color: var(--sorted-ink);
  background: color-mix(in srgb, var(--sorted-ink) 4%, transparent);
  border: 1px solid var(--sorted-border);
  border-radius: 8px;
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: var(--sorted-ink-soft); }
.wpcf7-form input:focus,
.wpcf7-form textarea:focus { outline: none; border-color: var(--sorted-ink); }

.wpcf7-form input[type="submit"] {
  background: var(--sorted-ink);
  color: var(--sorted-bg);
  border: none;
  padding: 1.1rem 1.6rem;
  font: inherit;
  font-weight: 500;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
}
.wpcf7-form input[type="submit"]:hover { opacity: .85; }

/* Landing hero: email field + button on ONE row, centered, no box. */
.sorted-landing-hero .wpcf7-form,
.sorted-landing-hero .wpcf7-form > p {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: center;
  max-width: 520px; margin-inline: auto;
}
.sorted-landing-hero .wpcf7-form br { display: none; }
.sorted-landing-hero .wpcf7-form .wpcf7-form-control-wrap { flex: 1 1 240px; }
.sorted-landing-hero .wpcf7-form input[type="email"] { width: 100%; }
.sorted-landing-hero .wpcf7-form input[type="submit"] { flex: 0 0 auto; }

/* Stacked forms (cta-statement, email-capture): vertical gap between fields. */
.sorted-cta-statement .wpcf7-form br,
.sorted-email-capture .wpcf7-form br { display: none; }
.sorted-cta-statement .wpcf7-form .wpcf7-form-control-wrap,
.sorted-email-capture .wpcf7-form .wpcf7-form-control-wrap { display: block; }
.sorted-cta-statement .wpcf7-form input,
.sorted-cta-statement .wpcf7-form textarea,
.sorted-email-capture .wpcf7-form input,
.sorted-email-capture .wpcf7-form textarea { margin-bottom: 1rem; }
.sorted-cta-statement .wpcf7-form input[type="submit"],
.sorted-email-capture .wpcf7-form input[type="submit"] { width: 100%; margin-bottom: 0; }

/* --- Footer: interaktif footer is light + minimal ---------------- */
.sorted-footer { border-top: 1px solid var(--sorted-border); }
.sorted-footer .sorted-footer__columns .sorted-footer__links a,
.sorted-footer__connect-links a { color: var(--sorted-footer-text); }
.sorted-footer .sorted-logo-link .sorted-logo--light { opacity: 1; }
.sorted-footer .sorted-logo-link .sorted-logo--dark { opacity: 0; }
:root[data-theme="dark"] .sorted-footer .sorted-logo-link .sorted-logo--light { opacity: 0; }
:root[data-theme="dark"] .sorted-footer .sorted-logo-link .sorted-logo--dark { opacity: 1; }

/* --- Contact form, stacked under the text --------------------------------
   Spans the container, like every other section on the page. The three
   fields share the width equally and the button sizes to its label, so the
   whole thing reads as one row rather than a stack of boxes.

   CF7 emits every field as a .wpcf7-form-control-wrap inside a single <p>,
   so that <p> is the grid and each wrap is a cell — nothing changes in the
   CF7 admin and any form picks this up. */
.sorted-cta-statement--form-stacked .wpcf7-form > p {
  display: grid;
  /* Two columns: jméno | příjmení, then e-mail | telefon. Everything wider
     spans both tracks with `grid-column: 1 / -1`, so every row lines up on
     the same two edges. (No trailing `auto` track — that is what made the
     message field stretch past the inputs above it.) */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  align-items: center;
}
/* The grid gap spaces these now; the stacked-form margin above would double it. */
.sorted-cta-statement--form-stacked .wpcf7-form input,
.sorted-cta-statement--form-stacked .wpcf7-form textarea { margin-bottom: 0; }

/* The message takes a row of its own; the preference switch and the button
   share the last one, switch left, button right. */
.sorted-cta-statement--form-stacked .wpcf7-form-control-wrap:has(textarea) { grid-column: 1 / -1; }
.sorted-cta-statement--form-stacked .wpcf7-form textarea { resize: vertical; min-height: 7.5rem; }

/* The switch and the button each get their own row. Sharing one row left a
   wide gap between two unrelated controls and read as a single stretched
   line rather than two decisions. */
.sorted-cta-statement--form-stacked .wpcf7-form-control-wrap:has(.wpcf7-radio) {
  grid-column: 1 / -1;
}
.sorted-cta-statement--form-stacked .wpcf7-form input[type="submit"] {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto;
  margin-top: .5rem;
}

/* Preferred contact: a two-option segmented control, not stock radio dots.
   Reads from --sorted-ink, so it inverts correctly inside a tertiary band. */
.sorted-cta-statement--form-stacked .wpcf7-radio { display: inline-flex; flex-wrap: wrap; gap: .5rem; }
.sorted-cta-statement--form-stacked .wpcf7-list-item { margin: 0; }
.sorted-cta-statement--form-stacked .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border: 1px solid var(--sorted-border);
  border-radius: 100px;
  font-size: var(--sorted-fs-sm);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.sorted-cta-statement--form-stacked .wpcf7-list-item input[type="radio"] {
  accent-color: var(--sorted-ink);
  margin: 0;
}
.sorted-cta-statement--form-stacked .wpcf7-list-item label:hover { border-color: var(--sorted-ink); }
.sorted-cta-statement--form-stacked .wpcf7-list-item:has(input:checked) label {
  border-color: var(--sorted-ink);
  background: color-mix(in srgb, var(--sorted-ink) 8%, transparent);
}

/* Four across is too tight before the fields stop reading as fields. */
@media (max-width: 600px) {
  .sorted-cta-statement--form-stacked .wpcf7-form > p { grid-template-columns: 1fr; }
  .sorted-cta-statement--form-stacked .wpcf7-form input[type="submit"] { width: 100%; justify-self: stretch; }
  .sorted-cta-statement--form-stacked .wpcf7-radio { display: grid; gap: .5rem; }
}

/* --- Card borders and hover ----------------------------------------------
   The base theme borders cards in --sorted-ink at full strength and hovers
   them to --sorted-accent. Neither works here:

   - full-strength ink is far too loud for this brand, light or dark;
   - --sorted-accent IS ink for interaktif (the palette is monochrome) and
     accent colours are deliberately NOT remapped in dark mode, so hovering a
     card on a dark landing page set its border to #0A0A0A — the border
     visibly disappeared instead of highlighting. That was the "weird hover".

   --sorted-border and --sorted-ink are both theme-aware, so these behave in
   both modes. ------------------------------------------------------------ */
.sorted-feature-card,
.sorted-pricing-card,
.sorted-category-tile,
.sorted-event-card,
.sorted-faq-item,
.sorted-location-card,
.wp-block-post {
  border-color: var(--sorted-border);
}
/* Card hovers all read --sorted-highlight in theme.css — nothing to add. */

/* --- Process cards: the neutral one, on a dark page -----------------------
   --black is #161614 against a #111110 page: the card effectively vanished
   next to the two saturated ones, and the existing border patch only made it
   a faint outline. On dark it should sit ABOVE the page, not below it. */
:root[data-theme="dark"] .sorted-process-card--black {
  background: color-mix(in srgb, var(--sorted-bg) 86%, var(--sorted-ink));
  border: 1px solid color-mix(in srgb, var(--sorted-ink) 14%, transparent);
  color: var(--sorted-ink);
}
:root[data-theme="dark"] .sorted-process-card--black .sorted-process-card__body { opacity: .72; }