/* ==========================================================================
   Widget rezerwacji (api.hesguard.com) — kolory i fonty strony OTSS
   --------------------------------------------------------------------------
   Zakres: TYLKO kolory i rodziny fontów. Układ, rozmiary i kształty zostają
   domyślne z widgetu.

   Selektor bazowy :is(#sailing-widget, .sw-root):
   - działa zarówno z ręcznym <div id="sailing-widget">, jak i z kontenerem,
     który widget tworzy sam (dostaje wtedy tylko klasę .sw-root),
   - :is() bierze specyficzność najsilniejszego argumentu (id), więc reguły
     przebijają domyślny CSS widgetu bez !important.

   Paleta strony (motyw Yachtly, theme-skin-color-set1.css):
     złoty  #c8964b  (--theme-color1)
     czarny #111111  (--theme-color2)
     granat #00142b  (--theme-color3)
     nagłówki #24201f, tekst #667280
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. ZMIENNE
   DLA HUBERTA: ustaw te wartości natywnie w widgecie i usuń !important
   (widget wpisuje --sw-* inline przez style.setProperty, więc bez
   !important arkusz ich nie nadpisze).
   Odcienie brand/accent policzone funkcją derive() z widget.js dla
   #c8964b / #00142b, z trzema ręcznymi korektami opisanymi niżej.
   -------------------------------------------------------------------------- */
:is(#sailing-widget, .sw-root) {
  --sw-brand: #c8964b !important;
  /* korekta: derive() dało #917041 — ma 4.28:1 na --sw-brand-tint, za mało
     na AA; #85663a ma 5.30 na białym, 4.97 na tint, 4.61 na tint-strong */
  --sw-brand-ink: #85663a !important;
  --sw-brand-cta: #c8964b !important;
  --sw-brand-cta-hover: #cfa361 !important;
  /* korekta: #111111 (kolor 2 strony) zamiast #0f172a; 7.12:1 na złotym,
     8.15:1 na hoverze. Biały na złotym to tylko 2.65:1 — odpada. */
  --sw-on-brand: #111111 !important;
  --sw-brand-tint: #fbf7f1 !important;
  --sw-brand-tint-strong: #f6eee2 !important;
  --sw-brand-line: #efe0c9 !important;

  --sw-accent: #00142b !important;
  --sw-accent-ink: #00142b !important;
  --sw-accent-cta: #00142b !important;
  /* korekta: derive() dało #02142b (hover nieodróżnialny); #002e63 to
     --theme-color3-lighter strony */
  --sw-accent-cta-hover: #002e63 !important;
  --sw-on-accent: #ffffff !important;
  --sw-accent-tint: #ebecee !important;
  --sw-accent-tint-strong: #d6d9dd !important;
  --sw-accent-line: #b3b9bf !important;

  --sw-text: #24201f !important;
}

/* Neutralne tokeny, których widget nie ustawia inline — wystarczy
   specyficzność, bez !important. */
:is(#sailing-widget, .sw-root) {
  /* kolor tekstu strony; 4.90:1 na białym, 4.69 na --sw-muted, 4.59 na
     --sw-brand-tint */
  --sw-muted-text: #667280;
  /* ramka pola musi mieć ≥ 3:1 (WCAG 1.4.11); domyślne #cbd5e0 ma 1.5:1 */
  --sw-field-border: #8f8a84;
}


/* --------------------------------------------------------------------------
   2. TYPOGRAFIA
   Fonty, które strona już ładuje (Google Fonts z motywu): tekst Jost,
   nagłówki Outfit. Wagi i rozmiary zostają z widgetu.
   -------------------------------------------------------------------------- */
:is(#sailing-widget, .sw-root) {
  font-family: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

:is(#sailing-widget, .sw-root) :is(h2, h3, h4) {
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}


/* --------------------------------------------------------------------------
   FOCUS Z KLAWIATURY
   Motyw Yachtly (style-main.css) ma globalne
   `:active, :focus { outline: none !important }` — gasi obwódkę focusu
   widgetu na każdym polu i przycisku. Bez !important nie da się jej
   przywrócić. Kolor --sw-brand-ink: 5.30:1 na białym (wymóg 3:1).
   -------------------------------------------------------------------------- */
:is(#sailing-widget, .sw-root) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  /* DLA HUBERTA: !important do usunięcia po scaleniu – nadpisuje
     `:active, :focus { outline: none !important }` z motywu strony.
     Uwaga: dopóki motyw ma tę regułę, natywny styl widgetu też jej nie
     pokona bez !important — zostaw go albo usuniemy regułę po naszej stronie. */
  outline: 2px solid var(--sw-brand-ink) !important;
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   3. NAGŁÓWEK (.sw-header, .sw-logo, .sw-title)
   Bez reguł — kolor z --sw-text, font z sekcji 2.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   4. META LISTY (.sw-list-name, .sw-list-count, .sw-list-price)
   Bez reguł — kolory z --sw-brand-ink, --sw-muted-text, --sw-text.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   5. KARTA TERMINU (.sw-event)
   6. DATY / JACHT / INSTRUKTOR (.sw-event-dates, .sw-event-crew)
   7. CENA I ZALICZKA (.sw-event-price, .sw-event-deposit)
   8. BADGE MIEJSC (.sw-badge--ok/--warn/--danger)
   Bez reguł — wszystko idzie przez zmienne z sekcji 1. Kolory statusów
   (zielony/czerwony) celowo zostają domyślne: niosą znaczenie.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   9. PRZYCISK
   Główny: złote tło + #111 (przez zmienne). Drugorzędny („Wróć”): domyślna
   ramka --sw-brand-line ma 1.2:1 i ginie na białym — dajemy ciemny złoty.
   -------------------------------------------------------------------------- */
:is(#sailing-widget, .sw-root) .sw-button--secondary:not([disabled]) {
  border-color: var(--sw-brand-ink);
}


/* --------------------------------------------------------------------------
   10. FORMULARZ (.sw-steps, .sw-summary, .sw-group)
   Bez reguł — kroki, podsumowanie i legendy biorą kolory ze zmiennych.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   11. POLA
   Domyślny hover ustawia --sw-brand-line, czyli ramkę JAŚNIEJSZĄ niż
   spoczynkowa — przy złotej palecie wyglądało to jak zanik ramki.
   :not([aria-invalid]) — żeby hover nie zdejmował czerwonej ramki błędu.
   -------------------------------------------------------------------------- */
:is(#sailing-widget, .sw-root) .sw-field :is(input, select):hover:not([aria-invalid="true"]):not(:focus) {
  border-color: var(--sw-brand);
}


/* --------------------------------------------------------------------------
   12. ZGODY (.sw-choice — checkboxy/radio, linki do dokumentów)
   Bez reguł — accent-color i linki z --sw-brand / --sw-brand-ink.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   13. WALIDACJA / BŁĘDY (.sw-field-error, [aria-invalid], .sw-*-note)
   Bez reguł — czerwień domyślna widgetu (#b91c1c, 6.47:1 na białym).
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   14. STANY LOADING / SUKCES (.sw-skeleton-*, .sw-status--*)
   Bez reguł — pending/info przez --sw-brand-*, success/error domyślne.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   15. RWD
   Bez reguł — układ zostaje domyślny (container query widgetu 34rem).
   Sprawdzone na 360 / 768 / 1280 px.
   -------------------------------------------------------------------------- */