/* ============================================================
   MOBILE FIX — veleznovi.pl (motyw Assembler, edytor blokowy)
   Wklej całość w: WordPress → Dodatkowy CSS (instrukcja w czacie)
   Naprawia: górną belkę (fixed header) i sekcję hero na telefonach
   ============================================================ */

@media (max-width: 781px) {

  /* ---------- 1. GÓRNA BELKA (przyklejony pasek z logo i menu) ----------
     Na telefonie belka ma ~94px wysokości (logo 74px + 2x10px paddingu).
     Zmniejszamy logo do 44px -> belka ma ~64px, standard mobilny. */
  header.wp-block-template-part .wp-block-site-logo img {
    width: 44px !important;
    height: 44px !important;
  }

  /* Mniejsze boczne odstępy w belce, żeby nic nie wystawało poza ekran */
  header.wp-block-template-part .wp-block-columns {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Kompaktowy przycisk ZAPISZ SIĘ w belce */
  header.wp-block-template-part .wp-block-button__link {
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
  }

  /* ---------- 2. HERO (sekcja pod belką) ----------
     Górny padding covera dopasowany do nowej wysokości belki
     (~64px belki + luz). Wcześniej: 17.5vw = ~66px, czyli MNIEJ
     niż wysokość belki 94px - stąd problemy z nakładaniem. */
  .header-cover {
    padding-top: 76px !important;
  }

  /* Spacer 100px pod belką jest stały (nie skaluje się z ekranem)
     i na telefonie robi wielką pustą dziurę. Zmniejszamy do 24px. */
  .header-cover .wp-block-spacer[style*="height:100px"] {
    height: 24px !important;
  }

  /* Hero nie musi wymuszać 66vh wysokości na telefonie -
     dzięki temu tekst i przycisk mieszczą się na pierwszym ekranie.
     Jeśli wolisz wyższe hero, zamień auto na np. 55vh. */
  .header-cover .wp-block-group[style*="min-height:66vh"] {
    min-height: auto !important;
  }

  /* Duże logo w hero odrobinę mniejsze, żeby zostało miejsce
     na tekst i przycisk bez przewijania */
  .header-cover .wp-block-image img {
    max-width: 82% !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  /* Wymuszone łamania linii (<br>) w akapicie hero psują tekst
     na wąskim ekranie - wyłączamy je, tekst zawija się naturalnie */
  .header-cover p br {
    display: none;
  }
  .header-cover p {
    padding-left: 8px;
    padding-right: 8px;
  }
}
@keyframes hero-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.header-cover .wp-block-cover__image-background {
  animation: hero-breathe 14s ease-in-out infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .header-cover .wp-block-cover__image-background {
    animation: none;
  }
}
@media (max-width: 781px) {
  body { font-size: 16px; }
  main p,
  main li { font-size: 16px; line-height: 1.7; }

  main h2 { font-size: 28px; line-height: 1.15; overflow-wrap: break-word; }
  main h3 { font-size: 21px; line-height: 1.3; }

  main .wp-block-button__link { font-size: 16px; padding: 12px 28px; min-height: 44px; }

  main .wp-block-image img {
    width: 100%;
    height: auto;
    max-height: 75vh;
    object-fit: contain;
  }
  main .wp-block-image { margin-left: auto; margin-right: auto; }
}
/* ============================================================
   KOD 2 (WERSJA 3): MENU HAMBURGEROWE NA TELEFONACH — veleznovi.pl
   NAJPIERW USUŃ z Dodatkowego CSS cały poprzedni kod menu
   (wersję 2), potem wklej ten w to samo miejsce.

   Co nowego względem wersji 2:
   - idealne wyrównanie: wyzerowane odziedziczone marginesy/paddingi,
     wszystko w jednej osi (koniec wrażenia "lewo-prawo nierówno")
   - design: główne pozycje jako neonowe pigułki o RÓWNEJ szerokości
     z delikatną poświatą, podkategorie jako mniejsze chipy Ice Blue
   ============================================================ */

@media (max-width: 781px) {

  /* Większa ikona hamburgera i przycisku zamknięcia (X) */
  .wp-block-navigation__responsive-container-open svg,
  .wp-block-navigation-overlay-close svg {
    width: 32px;
    height: 32px;
  }

  /* Pełnoekranowe czarne tło rozwiniętego menu */
  .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    inset: 0 !important;
    background-color: #101010 !important;
  }
  .wp-block-navigation__overlay-container > .wp-block-group {
    display: flex;
    flex-direction: column;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }

  /* Lista linków: na środku ekranu w pionie i poziomie */
  .wp-block-navigation__overlay-container .is-vertical.wp-block-navigation {
    flex-grow: 1;
    justify-content: center;
    align-items: center;
  }
  .wp-block-navigation__overlay-container .wp-block-navigation__container.is-vertical {
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Zerowanie odziedziczonych odstępów - to one dawały wrażenie
     przesunięcia lewo-prawo */
  .wp-block-navigation__overlay-container .wp-block-navigation-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    text-align: center;
    gap: 10px;
    width: 100%;
    margin: 0 !important;
    padding: 12px 0 0 !important;
    background-color: transparent !important;
    border: none !important;
  }

  /* GŁÓWNE POZYCJE (HOME, BLOG, O NAS): neonowe pigułki o równej
     szerokości - równe krawędzie z obu stron, spójny rytm */
  .wp-block-navigation__overlay-container .wp-block-navigation__container.is-vertical > .wp-block-navigation-item > .wp-block-navigation-item__content {
    display: block;
    width: min(270px, 80vw);
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    font-size: 1.5rem !important;      /* ~24px */
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 12px 20px;
    border: 1px solid rgba(204, 255, 51, 0.55);
    border-radius: 999px;
    box-shadow:
      0 0 14px rgba(204, 255, 51, 0.14),
      inset 0 0 14px rgba(204, 255, 51, 0.07);
  }

  /* PODKATEGORIE (O NAS / VIDEO / GRAFIKA): mniejsze chipy
     w brandowym Ice Blue - wyraźnie niższy poziom hierarchii */
  .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block;
    width: min(210px, 62vw);
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    font-size: 1rem !important;        /* ~16px */
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--custom-ice-blue, #56bba9) !important;
    padding: 7px 16px;
    border: 1px solid rgba(86, 187, 169, 0.4);
    border-radius: 999px;
  }
}
@media (max-width: 781px) {
  .vn-tail { display: none; }

  .page-id-214 .entry-content .wp-container-core-group-is-layout-a8d21250,
  .page-id-215 .entry-content .wp-container-core-group-is-layout-a8d21250 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .page-id-214 .entry-content .wp-block-group.has-base-2-background-color,
  .page-id-215 .entry-content .wp-block-group.has-base-2-background-color {
    padding: 24px 16px !important;
  }
  .page-id-214 .entry-content h2.has-large-font-size,
  .page-id-215 .entry-content h2.has-large-font-size {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }
  .page-id-214 .entry-content .wp-block-spacer[style*="height:100px"],
  .page-id-215 .entry-content .wp-block-spacer[style*="height:100px"] {
    height: 40px !important;
  }
}
@media (max-width: 781px) {
  footer .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: wrap !important;
    gap: 24px 16px !important;
  }
  footer .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:first-child {
    flex-basis: 100% !important;
  }
  footer .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:first-child) {
    flex-basis: calc(50% - 8px) !important;
    flex-grow: 0;
  }
  footer .wp-block-column:last-child { text-align: right; }
  footer .wp-block-column:last-child .wp-block-social-links {
    justify-content: flex-end;
    gap: 10px;
  }
  footer p { font-size: 14px; }
  footer .wp-block-column p { overflow-wrap: anywhere; }

  footer .wp-block-group.is-content-justification-space-between {
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 12px;
  }
  footer .wp-block-group.is-content-justification-space-between > .wp-block-group { order: 2; }
  footer .wp-block-group.is-content-justification-space-between > p {
    order: 1;
    font-size: 11px !important;
    opacity: 0.75;
    margin: 0;
  }
  footer .wp-block-group.is-content-justification-space-between a {
    font-size: 12px;
    white-space: nowrap;
  }
}
/* ============================================================
   PAKIET RESPONSYWNOŚCI I DROBNYCH OPTYMALIZACJI — veleznovi.pl
   Wklej w: WordPress → Dodatkowy CSS, na samym końcu.
   Siatka bezpieczeństwa dla wszystkich urządzeń - nic nie zmienia
   wyglądu, zapobiega typowym problemom responsywności.
   ============================================================ */

html {
  /* telefony nie powiększają samowolnie tekstu przy obrocie ekranu */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* płynne przewijanie do kotwic (np. przycisk ZAPISZ SIĘ -> #kontakt) */
  scroll-behavior: smooth;
  /* cel kotwicy nie chowa się pod przyklejoną górną belką */
  scroll-padding-top: 110px;
}

/* nic nigdy nie wystaje poza ekran w poziomie
   (clip zamiast hidden - nie psuje elementów przyklejonych) */
html, body {
  overflow-x: clip;
}

/* każdy obraz i osadzenie skaluje się do szerokości ekranu */
img {
  max-width: 100%;
  height: auto;
}
video, iframe, embed, object {
  max-width: 100%;
}

/* długie słowa, adresy www i e-maile łamią się zamiast rozpychać layout */
h1, h2, h3, h4, p, li, a {
  overflow-wrap: break-word;
}

@media (max-width: 781px) {
  /* belka na telefonie jest niższa - mniejszy margines dla kotwic */
  html {
    scroll-padding-top: 84px;
  }
  /* iOS nie przybliża strony przy stukaniu w pole formularza
     (robi to zawsze, gdy pole ma czcionkę mniejszą niż 16px) */
  input, select, textarea {
    font-size: 16px !important;
  }
  /* każdy przycisk ma wygodny rozmiar pod palec */
  .wp-element-button {
    min-height: 44px;
  }
}

/* szacunek dla systemowego "ogranicz ruch" */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* ============================================================
   PORTFOLIO — blur + napisy na hover (kafelki .vn-card)
   ============================================================ */
.vn-card{
  position: relative;
  overflow: hidden;
}
.vn-card .wp-block-image{
  margin: 0;
  height: 100%;
}
.vn-card .wp-block-image img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter .45s ease, transform .45s ease;
}
.vn-card .wp-block-group{
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(18,18,20,.55);
  opacity: 0;
  transition: opacity .45s ease;
}
.vn-card .wp-block-group h3,
.vn-card .wp-block-group p{ margin: 0; }

.vn-card:hover .wp-block-image img{
  filter: blur(6px) brightness(.85);
  transform: scale(1.05);
}
.vn-card:hover .wp-block-group{ opacity: 1; }

@media (max-width: 781px){
  .vn-card .wp-block-group{
    opacity: 1;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    background: linear-gradient(to top, rgba(18,18,20,.75), rgba(18,18,20,0) 55%);
  }
}