/*
 * Silent Heroes — Base styles
 * Reset, typography defaults, accessibility.
 *
 * Poppins ładowane via Google Fonts CDN (wp_enqueue_style w inc/enqueue.php).
 */

/* -------- RESET (modern, minimal) -------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html:focus-within { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  font-family: var(--sh-font-sans);
  font-size: var(--sh-fs-base);
  font-weight: var(--sh-fw-regular);
  line-height: var(--sh-lh-normal);
  color: var(--sh-color-text);
  background: var(--sh-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

#root, #__next { isolation: isolate; }

/* -------- TYPOGRAPHY -------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sh-font-sans);
  font-weight: var(--sh-fw-bold);
  line-height: var(--sh-lh-tight);
  /* Headings używają mocniejszego black (#111) — pure brand */
  letter-spacing: var(--sh-tracking-tight);
  color: var(--sh-color-text-strong);
}

h1 { font-size: var(--sh-fs-4xl); font-weight: var(--sh-fw-bold); }       /* 700 */
h2 { font-size: var(--sh-fs-3xl); font-weight: var(--sh-fw-bold); }       /* 700 */
h3 { font-size: var(--sh-fs-2xl); font-weight: var(--sh-fw-semibold); }   /* 600 */
h4 { font-size: var(--sh-fs-xl);  font-weight: var(--sh-fw-semibold); }   /* 600 */
h5 { font-size: var(--sh-fs-lg);  font-weight: var(--sh-fw-semibold); }
h6 { font-size: var(--sh-fs-md);  font-weight: var(--sh-fw-semibold); }

a {
  color: var(--sh-color-link);
  text-decoration: none;
  transition: color var(--sh-duration) var(--sh-ease);
}
/* User report 2026-06-01: na hover czerwonego przycisku tekst znikał — globalny `a:hover`
   ustawiał color: #A81515 (--sh-red-dark) który = bg primary button hover (też --sh-red-dark)
   = czerwony tekst na czerwonym tle. Fix: wykluczyć wszystkie button-like classes.
   2026-06-02 dodano: .sh-badge-red, .sh-single-hero-badge (badge w card-post/related/cross-blog/single
   hero — czerwone tło, biały tekst — nie chcemy red-dark na hover). */
a:not(.sh-btn):not([class*="sh-shop-store-cta"]):not([class*="sh-product-cta"]):not([class*="sh-contact-card"]):not([class*="sh-404-btn"]):not([class*="sh-shop-newsletter"]):not([class*="sh-cart-checkout"]):not([class*="sh-badge-red"]):not([class*="sh-single-hero-badge"]):not([class*="sh-zestaw-cta"]):hover {
  color: var(--sh-color-link-hover);
}

p { margin: 0; line-height: var(--sh-lh-relaxed); color: var(--sh-color-text); }
p + p { margin-top: var(--sh-space-4); }

strong, b { font-weight: var(--sh-fw-bold); }
em, i { font-style: italic; }

small { font-size: var(--sh-fs-sm); color: var(--sh-color-text-muted); }

blockquote {
  padding-left: var(--sh-space-5);
  border-left: 3px solid var(--sh-color-accent);
  font-style: italic;
  color: var(--sh-color-text-muted);
}

ul, ol { padding-left: var(--sh-space-5); }
li + li { margin-top: var(--sh-space-2); }

hr {
  border: 0;
  height: 1px;
  background: var(--sh-color-border);
  margin: var(--sh-space-8) 0;
}

/* -------- ACCESSIBILITY -------- */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--sh-black);
  color: var(--sh-offwhite);
  padding: 12px 20px;
  z-index: var(--sh-z-toast);
  font-weight: var(--sh-fw-bold);
}
.skip-link:focus {
  left: 8px;
  outline: 2px solid var(--sh-red);
  outline-offset: 2px;
}

/* Focus ring */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--sh-red);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------- LAYOUT PRIMITIVES -------- */
.sh-container {
  width: 100%;
  max-width: var(--sh-container);
  margin-inline: auto;
  padding-inline: var(--sh-gutter);
}

.sh-container-wide {
  width: 100%;
  max-width: var(--sh-container-wide);
  margin-inline: auto;
  padding-inline: var(--sh-gutter);
}

.sh-container-narrow {
  width: 100%;
  max-width: var(--sh-container-narrow);
  margin-inline: auto;
  padding-inline: var(--sh-gutter);
}

.sh-section {
  padding-block: var(--sh-space-20);
}

.sh-section-dark {
  background: var(--sh-black);
  color: var(--sh-offwhite);
}

.sh-section-dark h1,
.sh-section-dark h2,
.sh-section-dark h3,
.sh-section-dark h4 {
  color: var(--sh-offwhite);
}

.sh-section-dark p { color: rgba(248, 247, 244, 0.78); }

/* Red divider line above section titles */
.sh-divider-red {
  display: inline-block;
  width: 48px;
  height: 2px;
  background: var(--sh-red);
  margin-bottom: var(--sh-space-4);
}

/* Kicker — small red uppercase text */
.sh-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--sh-fs-xs);
  font-weight: var(--sh-fw-bold);
  letter-spacing: var(--sh-tracking-widest);
  text-transform: uppercase;
  color: var(--sh-red);
  line-height: 1;
}

.sh-kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--sh-red);
}

/* -------- TOAST POWIADOMIEŃ WOOCOMMERCE --------
   Snippet WPCode ustawia .woocommerce-notices-wrapper i same notice jako
   position:fixed; top:20px; right:20px — przez co toast ("Dodano/Usunięto…")
   przykrywa sticky header. Przesuwamy go PONIŻEJ headera (navbar 64px + subnav 48px).
   Nie ruszamy right/z-index/animacji — tylko offset od góry. */
body .woocommerce-notices-wrapper,
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
  top: 124px !important;
}
/* Pasek admina (zalogowany w panelu) przesuwa sticky header o 32px niżej. */
body.admin-bar .woocommerce-notices-wrapper,
body.admin-bar .woocommerce-message,
body.admin-bar .woocommerce-info,
body.admin-bar .woocommerce-error {
  top: 156px !important;
}
/* Mobile: subnav ukryty (<=1024px), więc header = sam navbar (64px). */
@media (max-width: 1024px) {
  body .woocommerce-notices-wrapper,
  body .woocommerce-message,
  body .woocommerce-info,
  body .woocommerce-error {
    top: 80px !important;
  }
}