/*
Theme Name: TG Child
Theme URI: https://github.com/expe-team/tg-nowa-www
Description: Child theme GeneratePress dla strony dr n. med. Tomasz Grzegorzek (Nowoczesna Laryngologia). Style, szablony i funkcje projektu. Nie edytujemy motywu rodzica.
Author: EXPE
Template: generatepress
Version: 0.8.0
Text Domain: tg-child
*/

/* =========================================================================
   DZ2 · Brand — paleta + typografia (akcent: BORDO)
   Kierunek „ciepły klinizm" (moodboard: Moodboard-paleta-DZ2.html), luźno
   oparty o kolorystykę starej marki. Warstwa wersjonowana (git) = źródło
   prawdy. Kolory przypisane bezpośrednio w CSS (bez Customizera).
   Zasada: BORDO wyłącznie jako akcent (CTA, linki, stany aktywne) — nigdy
   jako tło sekcji. Ciemne tła = atrament.

   DZ3 · Design tokens — odstępy, zaokrąglenia, cienie, przyciski.
   Skala odstępów oparta o 8px. Zaokrąglenia umiarkowane (klinicznie,
   nie „zabawkowo"). Cienie niskie, ciepło tonowane (atrament, nie czerń).
   ========================================================================= */
:root{
  /* Kolory — neutralne */
  --tg-ink:#2B2622;            /* atrament — nagłówki, ciemne tła */
  --tg-text:#6A5F55;           /* tekst podstawowy */
  --tg-bg:#FCFAF7;             /* kość słoniowa — tło strony */
  --tg-sand:#F4ECE2;           /* piasek — jasne tło sekcji/widżetów */
  --tg-line:#E8DED2;           /* linie, obramowania */
  --tg-ink-2:#241E1A;          /* ciemniejszy atrament — dolna stopka */
  --tg-on-dark:#D8CFC4;        /* tekst na ciemnym tle */

  /* Kolory — akcent (BORDO) */
  --tg-accent:#7A2E24;         /* AKCENT — wyłącznie CTA/linki/aktywne */
  --tg-accent-hover:#5E241C;   /* ciemniejszy bordo — hover */
  --tg-accent-contrast:#FCFAF7;/* tekst na akcencie */
  --tg-gold:#C9962F;           /* ciepły akcent pomocniczy — hover linków na ciemnym tle */

  /* Typografia */
  --tg-font-head:"Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tg-font-body:"Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- DZ3: Odstępy (skala 8px) --- */
  --tg-space-3xs:.25rem;       /* 4  */
  --tg-space-2xs:.5rem;        /* 8  */
  --tg-space-xs:.75rem;        /* 12 */
  --tg-space-sm:1rem;          /* 16 */
  --tg-space-md:1.5rem;        /* 24 */
  --tg-space-lg:2rem;          /* 32 */
  --tg-space-xl:3rem;          /* 48 */
  --tg-space-2xl:4rem;         /* 64 */
  --tg-space-3xl:6rem;         /* 96 */
  --tg-section-y:clamp(3rem, 6vw, 6rem);   /* pion sekcji (responsywny) */
  --tg-gap:var(--tg-space-md);             /* domyślny odstęp w siatkach */

  /* --- DZ3: Zaokrąglenia --- */
  --tg-radius-sm:6px;          /* pola, drobne elementy */
  --tg-radius-md:10px;         /* przyciski, karty */
  --tg-radius-lg:16px;         /* większe karty, media */
  --tg-radius-pill:999px;      /* pigułki, tagi */

  /* --- DZ3: Cienie (ciepło tonowane atramentem) --- */
  --tg-shadow-sm:0 1px 2px rgba(43,38,34,.06), 0 1px 3px rgba(43,38,34,.08);
  --tg-shadow-md:0 4px 12px rgba(43,38,34,.08), 0 2px 4px rgba(43,38,34,.06);
  --tg-shadow-lg:0 12px 32px rgba(43,38,34,.12);

  /* --- DZ3: Przyciski --- */
  --tg-btn-py:.75rem;
  --tg-btn-px:1.5rem;
  --tg-btn-radius:var(--tg-radius-md);
  --tg-btn-weight:600;
  --tg-btn-fs:1rem;
  --tg-transition:.18s ease;
}

/* --- Typografia bazowa --- */
body{ font-family:var(--tg-font-body); color:var(--tg-text); background-color:var(--tg-bg); }
h1,h2,h3,h4,h5,h6,.wp-block-heading{ font-family:var(--tg-font-head); color:var(--tg-ink); }

/* --- Linki (na jasnym tle) --- */
a{ color:var(--tg-accent); }
a:hover, a:focus{ color:var(--tg-accent-hover); }

/* --- Nagłówek --- */
.site-header{ background-color:var(--tg-bg); }
.site-header, .site-header a{ color:var(--tg-ink); }

/* --- Pasek górny (jeśli aktywny) --- */
.top-bar{ background-color:var(--tg-ink); color:var(--tg-accent-contrast); }
.top-bar a{ color:var(--tg-accent-contrast); }
.top-bar a:hover{ color:var(--tg-gold); }

/* --- Główne menu --- */
.main-navigation{ background-color:transparent; }
.main-navigation .main-nav ul li a{ color:var(--tg-ink); }
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li[class*="current-menu"] > a{ color:var(--tg-accent); }
/* podmenu na ciemnym */
.main-navigation ul ul{ background-color:var(--tg-ink); }
.main-navigation ul ul li a{ color:var(--tg-accent-contrast); }
.main-navigation ul ul li:hover > a{ color:var(--tg-gold); }

/* --- Pozaekranowy panel (menu mobilne) --- */
.slideout-navigation{ background-color:var(--tg-ink); }
.slideout-navigation .main-nav ul li a{ color:var(--tg-accent-contrast); }
.slideout-navigation .main-nav ul li[class*="current-menu"] > a{ color:var(--tg-gold); }

/* --- Przyciski / CTA (akcent + tokeny DZ3) --- */
button, .button, .wp-block-button__link, input[type="submit"], input[type="button"], .gb-button{
  background-color:var(--tg-accent); color:var(--tg-accent-contrast); border:1px solid var(--tg-accent);
  padding:var(--tg-btn-py) var(--tg-btn-px);
  border-radius:var(--tg-btn-radius);
  font-family:var(--tg-font-head);
  font-weight:var(--tg-btn-weight);
  font-size:var(--tg-btn-fs);
  line-height:1.2;
  box-shadow:var(--tg-shadow-sm);
  transition:background-color var(--tg-transition), border-color var(--tg-transition),
             box-shadow var(--tg-transition), transform var(--tg-transition);
}
button:hover, .button:hover, .wp-block-button__link:hover,
input[type="submit"]:hover, input[type="button"]:hover, .gb-button:hover{
  background-color:var(--tg-accent-hover); color:var(--tg-accent-contrast); border-color:var(--tg-accent-hover);
  box-shadow:var(--tg-shadow-md);
  transform:translateY(-1px);
}
button:active, .button:active, .wp-block-button__link:active, .gb-button:active{
  transform:translateY(0); box-shadow:var(--tg-shadow-sm);
}
/* Wariant obrysowy (outline) — wtórne CTA */
.is-style-outline .wp-block-button__link, .button.tg-btn-outline, .gb-button.gb-button-outline{
  background-color:transparent; color:var(--tg-accent); border-color:var(--tg-accent); box-shadow:none;
}
.is-style-outline .wp-block-button__link:hover, .button.tg-btn-outline:hover, .gb-button.gb-button-outline:hover{
  background-color:var(--tg-accent); color:var(--tg-accent-contrast);
}

/* --- Treść --- */
.entry-content{ color:var(--tg-text); }

/* --- Formularze (tokeny DZ3: zaokrąglenia + odstępy) --- */
input, textarea, select{
  background-color:#fff; color:var(--tg-ink); border:1px solid var(--tg-line);
  border-radius:var(--tg-radius-sm);
  padding:var(--tg-space-2xs) var(--tg-space-xs);
  transition:border-color var(--tg-transition), box-shadow var(--tg-transition);
}
input:focus, textarea:focus, select:focus{
  border-color:var(--tg-accent); outline:none;
  box-shadow:0 0 0 3px rgba(122,46,36,.12);
}

/* --- Widżety panelu bocznego --- */
.sidebar .widget{
  background-color:var(--tg-sand);
  border-radius:var(--tg-radius-md);
  padding:var(--tg-space-md);
}
.sidebar .widget .widget-title{ color:var(--tg-ink); }

/* --- Widżety stopki --- */
.footer-widgets{ background-color:var(--tg-ink); color:var(--tg-on-dark); }
.footer-widgets .widget-title{ color:var(--tg-accent-contrast); }
.footer-widgets a{ color:var(--tg-accent-contrast); }
.footer-widgets a:hover{ color:var(--tg-gold); }

/* --- Stopka (dolny pasek) --- */
.site-info{ background-color:var(--tg-ink-2); color:var(--tg-on-dark); }
.site-info a{ color:var(--tg-on-dark); }
.site-info a:hover{ color:var(--tg-accent-contrast); }

/* =========================================================================
   DZ3 · Klasy pomocnicze (do użycia w A7 — komponenty GenerateBlocks)
   Dają spójny rytm bez ręcznego wpisywania wartości w każdym bloku.
   ========================================================================= */

/* Rytm pionowy sekcji */
.tg-section{ padding-block:var(--tg-section-y); }
.tg-section--tight{ padding-block:var(--tg-space-xl); }

/* Karta — biała, subtelny cień, zaokrąglenie */
.tg-card{
  background-color:#fff;
  border:1px solid var(--tg-line);
  border-radius:var(--tg-radius-lg);
  padding:var(--tg-space-lg);
  box-shadow:var(--tg-shadow-sm);
  transition:box-shadow var(--tg-transition), transform var(--tg-transition);
}
.tg-card:hover{ box-shadow:var(--tg-shadow-md); transform:translateY(-2px); }

/* Pigułka / tag */
.tg-pill{
  display:inline-block;
  padding:var(--tg-space-3xs) var(--tg-space-xs);
  border-radius:var(--tg-radius-pill);
  background-color:var(--tg-sand);
  color:var(--tg-ink);
  font-family:var(--tg-font-head);
  font-size:.8125rem;
  font-weight:600;
  line-height:1.4;
}

/* Siatka z domyślnym odstępem (fallback dla bloków) */
.tg-grid{ display:grid; gap:var(--tg-gap); }

/* =========================================================================
   A7 · Przekolorowanie sekcji Clinic — remap globalnych kolorów GeneratePress
   Sekcje z importu Clinic (bloki GenerateBlocks) nie mają kolorów w treści —
   dziedziczą je z globalnych zmiennych GP (--accent/--contrast/--base*).
   Domyślnie były NIEBIESKIE (accent #006ba6, contrast #2d3663, base #cce1ed).
   Mapujemy je na markę „ciepły klinizm" (bordo + atrament + piasek).
   `:root:root` — podwójna specyficzność, by nadpisać inline CSS GP niezależnie
   od kolejności ładowania stylów. Nasze komponenty (.tg-*) mają własne tokeny
   i NIE zależą od tych zmiennych — remap dotyczy wyłącznie warstwy Clinic/GP.
   ========================================================================= */
:root:root{
  --accent:#7A2E24;   /* bordo — było #006ba6 (niebieski) */
  --contrast:#2B2622; /* atrament — było #2d3663 (granat) */
  --base:#F4ECE2;     /* piasek — było #cce1ed (błękit); jasne tło sekcji */
  --base-2:#E8DED2;   /* ciepła linia/szary — było #e4e4e9 */
  --base-3:#FCFAF7;   /* kość słoniowa — było #fafafa */
  --base-4:#ffffff;   /* biel — bez zmian */
}

/* --- A7 · Hero — gradient marki zamiast błękitu/szarości Clinic ---
   Sekcja hero Clinic ma gradient z zaszytymi na sztywno kolorami
   (#cce1ed błękit / #e4e4e9 szary) — nie zmienną, więc remap ich nie ruszał.
   Zamiana na ukos w tonach marki: piasek (trzyma tekst) → ciepły szary (za lekarką). */
.gb-element-c27045f5{
  background-image:linear-gradient(135deg, var(--tg-sand) 54%, var(--tg-line) 54%)!important;
}

/* --- A7 · Sticky-header na ciemny atrament (TYLKO stan przyklejony) ---
   GP tworzy klon nawigacji z klasami .navigation-stick/.navigation-clone gdy
   nagłówek się przykleja. Ściemniamy wyłącznie ten klon — nagłówek na górze
   strony zostaje jasny. Linki jasne, aktywny/hover złoto, przycisk CTA bordo. */
.main-navigation.navigation-stick,
.main-navigation.navigation-clone{
  background-color:var(--tg-ink)!important;
  box-shadow:var(--tg-shadow-md);
}
.main-navigation.navigation-stick .inside-navigation,
.main-navigation.navigation-clone .inside-navigation{ background-color:transparent!important; }
.main-navigation.navigation-stick .main-nav ul li a,
.main-navigation.navigation-clone .main-nav ul li a{ color:var(--tg-on-dark)!important; }
.main-navigation.navigation-stick .main-nav ul li:hover > a,
.main-navigation.navigation-stick .main-nav ul li[class*="current-menu"] > a,
.main-navigation.navigation-clone .main-nav ul li:hover > a,
.main-navigation.navigation-clone .main-nav ul li[class*="current-menu"] > a{ color:var(--tg-gold)!important; }

/* --- A7.1 · Aktywny link menu w jasnym nagłówku (góra strony) na markę ---
   GP dokleja własny inline-CSS koloru menu (niebieski) PO arkuszu child, więc
   nadpisywał naszą regułę o równej specyficzności. Wymuszamy markowy bordo na
   stanie current/hover — tylko dla nagłówka NIE-przyklejonego (sticky ma złoto
   ze swojej sekcji, ładowanej niżej, więc jego reguły dalej wygrywają).
   Logo świadomie NIE ruszamy — do zmiany po dostarczeniu oficjalnej wersji. */
.main-navigation:not(.navigation-stick):not(.navigation-clone) .main-nav ul li[class*="current-menu"] > a,
.main-navigation:not(.navigation-stick):not(.navigation-clone) .main-nav ul li.sfHover > a,
.main-navigation:not(.navigation-stick):not(.navigation-clone) .main-nav ul li:hover > a{
  color:var(--tg-accent)!important;
}

/* =========================================================================
   A8 · Szablon single `usluga` (szablon: single-usluga.php)
   Układ generowany dynamicznie z pól ACF. Siatki (fakty / powiązane) na
   CSS Grid z wyrównaniem treści DO GÓRY (align-items:start) — karty o różnej
   wysokości nie rozciągają się do najwyższej.
   ========================================================================= */

/* Nagłówek usługi */
.tg-usluga__header{ margin-bottom:var(--tg-space-md); }
.tg-usluga__header .entry-title{ margin-bottom:0; }

/* Odstęp między sekcjami treści */
.tg-usluga__content > .tg-section,
.tg-usluga__content > .tg-section--tight{ margin-top:var(--tg-space-xl); }
.tg-usluga__content > .tg-section:first-child,
.tg-usluga__content > .tg-section--tight:first-child{ margin-top:var(--tg-space-lg); }
.tg-usluga__content h2{ margin-bottom:var(--tg-space-md); }

/* Lead — zajawka pod H1 */
.tg-lead{
  font-family:var(--tg-font-head);
  font-size:1.25rem;
  line-height:1.5;
  color:var(--tg-ink);
  margin-bottom:var(--tg-space-lg);
}

/* Szybkie fakty — 3 karty, wyrównane do góry */
.tg-facts{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--tg-space-md);
  align-items:start;
}
.tg-facts .tg-card{ padding:var(--tg-space-md); }
.tg-facts .tg-card p:last-child{ margin-bottom:0; }
.tg-facts .tg-pill{ margin-bottom:var(--tg-space-2xs); }

/* Cennik */
.tg-cennik{ margin:0; }
.tg-cennik table{ width:100%; }
.tg-cennik td:last-child{ white-space:nowrap; font-family:var(--tg-font-head); font-weight:600; color:var(--tg-ink); }
.tg-cennik__uwaga{ font-weight:400; color:var(--tg-text); font-size:.9375rem; }
.tg-cennik figcaption{ margin-top:var(--tg-space-sm); color:var(--tg-text); font-size:.9375rem; }

/* FAQ — akordeon */
.tg-faq__item{
  border-bottom:1px solid var(--tg-line);
  padding:var(--tg-space-sm) 0;
}
.tg-faq__item summary{
  cursor:pointer;
  font-family:var(--tg-font-head);
  font-weight:600;
  color:var(--tg-ink);
  list-style:none;
}
.tg-faq__item summary::-webkit-details-marker{ display:none; }
.tg-faq__item summary::after{ content:"+"; float:right; color:var(--tg-accent); font-weight:700; }
.tg-faq__item[open] summary::after{ content:"–"; }
.tg-faq__item > p{ margin:var(--tg-space-sm) 0 0; }

/* Powiązane zabiegi — karty-linki, wyrównane do góry */
.tg-related__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--tg-space-md);
  align-items:start;
}
.tg-related__card{
  display:block;
  text-decoration:none;
  color:inherit;
}
.tg-related__card h3{
  font-size:1.125rem;
  margin:0 0 var(--tg-space-2xs);
  color:var(--tg-ink);
}
.tg-related__card:hover h3{ color:var(--tg-accent); }
.tg-related__card p{
  font-size:.9375rem;
  color:var(--tg-text);
  margin:0;
}

/* Responsywność — na wąskich ekranach siatki w jednej kolumnie */
@media (max-width:768px){
  .tg-facts,
  .tg-related__grid{ grid-template-columns:1fr; }
}