/*
Theme Name: FlowFlex (Kadence Child) — Szach-Mat
Theme URI: https://flowflex.pl
Description: Uniwersalny motyw potomny FlowFlex na bazie Kadence Free. Cała warstwa wizualna oparta na tokenach --ff-* (:root poniżej + theme.json). Nowy projekt = podmiana wartości tokenów, struktura zostaje. Zawiera autorski inline-search (workaround na brak Kadence Pro), nagłówek (topbar + main + search pill) i stopkę z social.
Author: FlowFlex (Łukasz Łozyński)
Author URI: https://flowflex.pl
Template: kadence
Version: 0.1.0
Requires at least: 6.0
Tested up to: 7.0
Text Domain: flowflex-kadence
*/

/* ============================================================
   TOKENY MARKI  —  jedyne miejsce, które zmieniasz na nowy projekt
   Instancja: SZACH-MAT (restyling 15.07.2026 wg projektu Wiktorii:
   ciemne pasma grafit/czerń + złoto-beż, treść na jasnym tle)
   ------------------------------------------------------------
   Nazwy są SEMANTYCZNE (bg / ink / accent / line), nie „brązowe/złote”,
   żeby na kolejnym projekcie podmiana barw nie wymagała ruszania CSS.
   ============================================================ */
:root {
  /* ŹRÓDŁO PRAWDY = paleta Kadence (Dostosuj → Kolory).
     Każdy token wskazuje na slot --global-palette Kadence, a fallback
     (drugi argument) to markowy kolor Szach-Mat na wypadek braku zmiennej.
     Zmieniasz kolory KLIKAJĄC w panelu Kadence — front i nagłówek podążają.

     Mapa slotów Kadence (grupy: Akcenty 1-3, Kontrast 4-6, Podstawa 7-9):
       palette1 = akcent (złoto-beż)     palette6 = atrament miękki
       palette2 = akcent głęboki         palette7 = linia / tło alt (krem)
       palette3 = panel ciemny           palette8 = tło treści (jasne)
       palette4 = atrament mocny (nagł.) palette9 = powierzchnia (biel)
       palette5 = atrament (tekst)
  */

  /* Tła i powierzchnie (grupa Podstawa 7-9) */
  --ff-bg:            var(--global-palette8, #F5F1EC);  /* tło treści (jasne) */
  --ff-bg-alt:        var(--global-palette7, #F0ECE8);  /* sekcje kremowe */
  --ff-surface:       var(--global-palette9, #FFFFFF);  /* karty, pola input */
  --ff-line:          var(--global-palette7, #E4DED6);  /* obramowania */

  /* Tekst / elementy „atramentowe” (grupa Kontrast 4-6) */
  --ff-ink:           var(--global-palette5, #3A3A3A);  /* główny tekst, ikony */
  --ff-ink-strong:    var(--global-palette4, #141414);  /* nagłówki, najciemniejszy */
  --ff-ink-soft:      var(--global-palette6, #6F6A64);  /* drugorzędny, placeholdery */

  /* Akcent / CTA (grupa Akcenty 1-2) */
  --ff-accent:        var(--global-palette1, #B08A68);  /* złoto-beż — CTA, hover */
  --ff-accent-deep:   var(--global-palette2, #9B7B60);  /* ciemniejszy akcent */
  --ff-on-accent:     #141414;  /* tekst NA akcencie (stały, dla kontrastu) */

  /* Pasma ciemne (stałe marki — header, hero, USP, opinie, stopka).
     Celowo NIE z palety: to szkielet identyfikacji (szachownica = czerń),
     a paleta w panelu steruje akcentem i jasnymi powierzchniami. */
  --ff-dark:          #0A0A0A;  /* header, hero, stopka */
  --ff-dark-2:        var(--global-palette3, #151515);  /* pasek USP, panele */
  --ff-dark-3:        #1F1F1F;  /* karty na ciemnym, kafel mapy */
  --ff-on-dark:       #F5F1EC;  /* tekst na ciemnym */
  --ff-on-dark-soft:  #B8B3AC;  /* tekst drugorzędny na ciemnym */
  --ff-gold-soft:     #B29172;  /* złoty tekst na ciemnym (nagłówki akcentowe) */

  /* Promienie i cienie */
  --ff-radius-sm:     6px;
  --ff-radius-pill:   24px;
  --ff-shadow-1:      0 1px 3px rgba(0, 0, 0, 0.07);
  --ff-shadow-2:      0 2px 12px rgba(0, 0, 0, 0.14);
  --ff-focus-ring:    0 0 0 3px rgba(176, 138, 104, 0.25);

  /* Warstwy */
  --ff-z-sticky:      99;
}

/* ------------------------------------------------------------
   Aliasy zgodności: stare selektory FlowVit (--fv-*) wskazują na
   nowe tokeny. Dzięki temu można wkleić stary CSS FlowVit bez
   przepisywania nazw. Docelowo używaj wyłącznie --ff-*.
   ------------------------------------------------------------ */
:root {
  --fv-cream:         var(--ff-bg);
  --fv-cream-light:   var(--ff-bg-alt);
  --fv-cream-dark:    var(--ff-line);
  --fv-brown-darkest: var(--ff-ink);
  --fv-brown-dark:    var(--ff-ink);
  --fv-brown-light:   var(--ff-ink-soft);
  --fv-gold:          var(--ff-accent);
  --fv-gold-deep:     var(--ff-accent-deep);
}

/* ============================================================
   BAZA — minimalne nadpisania, resztę robi Kadence
   ============================================================ */
html { scroll-behavior: smooth; }

/* Kotwice (np. /oferta/#ceramika) nie chowają się pod nagłówkiem */
h2[id], h3[id], [id^="ffh-"] { scroll-margin-top: 96px; }

body {
  background-color: var(--ff-bg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Nagłówki wg projektu Wiktorii: wąski, wersalikowy Oswald + światło liter.
   @font-face w assets/css/fonts.css (pliki hostowane lokalnie — RODO). */
h1, h2, h3, h4,
.wp-block-heading,
.entry-title {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
}

/* Menu główne w duchu mockupu: drobne wersaliki */
.main-navigation .primary-menu-container > ul > li > a {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  font-size: 14px;
}

/* ============================================================
   STRONA GŁÓWNA — sekcje wg projektu Wiktorii (klasy .ffh-*)
   HTML sekcji siedzi w treści strony (page „Strona główna”),
   wygląd w całości tutaj — treść zostaje czytelna i edytowalna.
   ============================================================ */

/* --- wspólne --- */
/* Sekcje rozciągają się na pełną szerokość viewportu, nawet gdy WP
   trzyma treść w kontenerze (trick 50% - 50vw). Scrollbar → overflow-x. */
body.home { overflow-x: hidden; }
.ffh-hero, .ffh-usp, .ffh-kategorie, .ffh-onas, .ffh-opinie, .ff-newsletter {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* Neutralizacja „pudełka” treści na stronie głównej */
.home .entry.content-bg { background: transparent !important; box-shadow: none !important; }
.home .entry-content-wrap { padding: 0 !important; }
.home .entry-content { margin-top: 0 !important; margin-bottom: 0 !important; }
.home .content-area { margin-top: 0 !important; margin-bottom: 0 !important; }

.ffh-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.ffh-kicker {
  color: var(--ff-gold-soft);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 14px;
}
.ffh-btn {
  display: inline-block;
  background: var(--ff-accent);
  color: var(--ff-on-accent) !important;
  text-decoration: none !important;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 14px;
  padding: 14px 30px;
  border-radius: var(--ff-radius-sm);
  transition: background 0.2s ease, transform 0.2s ease;
}
.ffh-btn:hover { background: var(--ff-accent-deep); transform: translateY(-1px); }
.ffh-btn--ghost {
  background: transparent;
  border: 1px solid var(--ff-accent);
  color: var(--ff-accent-deep) !important;
}
.ffh-btn--ghost:hover { background: var(--ff-accent); color: var(--ff-on-accent) !important; }

/* --- HERO --- */
.ffh-hero { background: var(--ff-dark); color: var(--ff-on-dark); overflow: hidden; }
.ffh-hero .ffh-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 0;
}
.ffh-hero-text { padding: 72px 32px 72px 0; }
.ffh-hero h1 {
  color: #FFFFFF;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.08;
  margin: 0 0 18px;
}
.ffh-hero h1 .ffh-gold { color: var(--ff-gold-soft); display: block; }
.ffh-hero h1 span { display: block; }
.ffh-hero-line {
  width: 56px; height: 3px;
  background: var(--ff-accent);
  border: none; margin: 22px 0;
}
.ffh-hero-sub {
  color: var(--ff-on-dark-soft);
  font-size: 17px;
  line-height: 1.65;
  max-width: 430px;
  margin: 0 0 32px;
}
.ffh-hero-sub strong { color: var(--ff-gold-soft); }
.ffh-hero-img { position: relative; align-self: stretch; min-height: 420px; }
.ffh-hero-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
}
/* płynne przejście zdjęcia w czerń po lewej i u dołu */
.ffh-hero-img::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, var(--ff-dark) 0%, rgba(10,10,10,0) 22%),
    linear-gradient(0deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 26%);
}
@media (max-width: 900px) {
  .ffh-hero .ffh-inner { grid-template-columns: 1fr; }
  .ffh-hero-text { padding: 48px 0 36px; }
  .ffh-hero-img { min-height: 300px; margin: 0 -24px; }
}

/* --- PASEK USP --- */
.ffh-usp { background: var(--ff-dark-2); border-top: 1px solid rgba(255,255,255,0.07); }
.ffh-usp .ffh-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding-top: 40px; padding-bottom: 40px;
}
.ffh-usp-item { display: flex; gap: 14px; align-items: flex-start; }
.ffh-usp-icon {
  flex: none;
  width: 52px; height: 52px;
  border: 1px solid var(--ff-accent);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ff-accent);
}
.ffh-usp-item h3 {
  color: #FFFFFF;
  font-size: 15px;
  letter-spacing: 0.06em;
  margin: 4px 0 6px;
}
.ffh-usp-item p { color: var(--ff-on-dark-soft); font-size: 13.5px; line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .ffh-usp .ffh-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ffh-usp .ffh-inner { grid-template-columns: 1fr; } }

/* --- KATEGORIE --- */
.ffh-kategorie { background: var(--ff-bg-alt); padding: 72px 0; }
.ffh-kategorie-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 34px;
}
.ffh-kategorie-head h2 { color: var(--ff-ink-strong); font-size: 30px; margin: 0; }
.ffh-kategorie-all {
  color: var(--ff-accent-deep) !important;
  text-decoration: none !important;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.ffh-kategorie-all:hover { color: var(--ff-ink-strong) !important; }
.ffh-kategorie-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.ffh-kat {
  display: block;
  text-decoration: none !important;
  background: var(--ff-dark-3);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--ff-shadow-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ffh-kat:hover { transform: translateY(-4px); box-shadow: var(--ff-shadow-2); }
.ffh-kat img {
  width: 100%; aspect-ratio: 4 / 4.6;
  object-fit: cover; display: block;
}
.ffh-kat-label {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  min-height: 64px;
  padding: 10px 12px;
  color: #FFFFFF;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
}
.ffh-kat:hover .ffh-kat-label { color: var(--ff-accent); }
@media (max-width: 1000px) { .ffh-kategorie-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .ffh-kategorie-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- O NAS --- */
.ffh-onas { background: var(--ff-surface); padding: 80px 0; }
.ffh-onas .ffh-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
}
.ffh-onas h2 { color: var(--ff-ink-strong); font-size: 30px; margin: 0 0 10px; }
.ffh-onas-line { width: 46px; height: 3px; background: var(--ff-accent); border: none; margin: 0 0 22px; }
.ffh-onas p { color: var(--ff-ink); font-size: 16px; line-height: 1.7; margin: 0 0 26px; }
.ffh-onas-media { position: relative; }
.ffh-onas-media img {
  width: 100%; border-radius: 10px; display: block;
  aspect-ratio: 4 / 3.4; object-fit: cover;
}
.ffh-onas-help {
  position: absolute; right: -12px; bottom: -22px;
  background: var(--ff-dark);
  color: var(--ff-on-dark);
  border-radius: 10px;
  padding: 20px 22px;
  max-width: 260px;
  box-shadow: var(--ff-shadow-2);
}
.ffh-onas-help p { color: var(--ff-on-dark); font-size: 14.5px; line-height: 1.5; margin: 0 0 14px; }
.ffh-onas-help strong { display: block; font-size: 15px; margin-bottom: 4px; }
.ffh-onas-help .ffh-btn { padding: 10px 20px; font-size: 12.5px; }
@media (max-width: 900px) {
  .ffh-onas .ffh-inner { grid-template-columns: 1fr; gap: 32px; }
  .ffh-onas-help { position: static; max-width: none; margin-top: 16px; }
}

/* --- OPINIE --- */
.ffh-opinie { background: var(--ff-dark); padding: 80px 0; text-align: center; }
.ffh-opinie h2 { color: #FFFFFF; font-size: 30px; margin: 0 0 8px; }
.ffh-opinie-stars { color: var(--ff-accent); font-size: 22px; letter-spacing: 4px; margin: 0 0 6px; }
.ffh-opinie-meta { color: var(--ff-on-dark-soft); font-size: 14.5px; margin: 0 0 40px; }
.ffh-opinie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
  text-align: left;
}
.ffh-opinia {
  background: var(--ff-dark-3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 26px 26px 22px;
}
.ffh-opinia p { color: var(--ff-on-dark); font-size: 15px; line-height: 1.65; margin: 0 0 16px; font-style: italic; }
.ffh-opinia footer { color: var(--ff-gold-soft); font-size: 13.5px; font-weight: 600; }
@media (max-width: 900px) { .ffh-opinie-grid { grid-template-columns: 1fr; } }

/* Spójny focus dla dostępności (klawiatura) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.wp-element-button:focus-visible {
  outline: 2px solid var(--ff-accent);
  outline-offset: 2px;
}