/* ════════════════════════════════════════════════════════════
   DigiMATA — blocks.css
   Stylowanie bloków natywnych (nagłówek/nawigacja FSE), tak by
   wyglądały jak navbar z makiety. Bez Bootstrapa.
   ════════════════════════════════════════════════════════════ */

/* ── Root: bez odstępów między blokami strukturalnymi (header/main/footer) ── */
/* Domyślny block-gap roota WP wstawia 1.5rem między <main> a <footer> (biały pasek)
   oraz margin-top na <main>. Sekcje stykają się ze stopką jak w makiecie. */
.wp-site-blocks > * { margin-block: 0 !important; }

/* ── Header / navbar ── */
.navbar-digimata {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
  padding: 0.6rem 0;
  transition: box-shadow 0.3s;
}
.navbar-digimata .dm-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.navbar-digimata .dm-logo img,
.navbar-digimata .custom-logo,
.navbar-digimata .wp-block-site-logo img { height: 60px; width: auto; }

.navbar-digimata .wp-block-navigation {
  font-family: 'Quicksand', sans-serif;
  --wp--style--block-gap: 0;
}
/* odstęp między pozycjami daje padding linków (jak w makiecie), nie gap bloku */
.navbar-digimata .wp-block-navigation,
.navbar-digimata .wp-block-navigation__container,
.navbar-digimata .wp-block-navigation__responsive-container-content { gap: 0 !important; }
.navbar-digimata .wp-block-navigation .wp-block-navigation-item__content,
.navbar-digimata .wp-block-navigation a {
  font-weight: 600;
  color: var(--wp--preset--color--dark, #2c3e50);
  padding: 0.5rem 1rem;
  transition: color 0.2s;
}
.navbar-digimata .wp-block-navigation .wp-block-navigation-item__content:hover,
.navbar-digimata .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--primary, #4e54c8);
}

/* przycisk CTA w navbarze (wariant ciepły) */
.navbar-digimata .dm-nav-cta .wp-block-button__link {
  white-space: nowrap;
  background: var(--wp--preset--gradient--dm-warm, linear-gradient(135deg, #f77062 0%, #fe5196 100%));
  color: #fff; border: none; border-radius: 50px; font-weight: 700;
  padding: 0.5rem 1.25rem; box-shadow: 0 4px 15px rgba(247,112,98,0.3);
}
.navbar-digimata .dm-nav-cta .wp-block-button__link:hover { transform: translateY(-2px); }

@media (max-width: 991.98px) {
  .navbar-digimata .dm-logo img,
  .navbar-digimata .wp-block-site-logo img { height: 36px; }
  /* Mobilne menu (overlay): jawne, pełnoekranowe — niezależne od stylów core,
     które na tym motywie nie rozciągały kontenera (zostawał wys. ~62px,
     a pozycje menu „wylewały się" na stronę). */
  /* UWAGA: navbar ma backdrop-filter, więc jest blokiem zawierającym dla
     position:fixed potomków → height:100%/inset rozwiązują się względem navbara
     (~62px). Dlatego używamy jednostek viewport (dvh/vw), nie %. */
  .navbar-digimata .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    padding: 5rem 1.75rem 2rem;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .navbar-digimata .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .navbar-digimata .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0 !important;
  }
  .navbar-digimata .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100%;
  }
  .navbar-digimata .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
  .navbar-digimata .wp-block-navigation__responsive-container.is-menu-open a {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 1.2rem;
    padding: 0.9rem 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  /* przycisk zamknięcia (X) — wyraźnie w prawym górnym rogu nakładki */
  .navbar-digimata .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute;
    top: 1.3rem;
    right: 1.5rem;
    z-index: 100001;
  }
}

/* odsunięcie treści spod przyklejonego navbara (dla stron bez wysokiego hero) */
.dm-page-offset { padding-top: 96px; }

/* ── Style przycisków (bloki natywne) odwzorowujące .btn-dm-* z makiety ── */
.wp-block-button.is-style-dm-primary > .wp-block-button__link {
  background: var(--wp--preset--gradient--dm-primary, linear-gradient(135deg,#4e54c8 0%,#8f94fb 100%));
  color: #fff; border: none; border-radius: 50px; font-weight: 700; padding: 0.75rem 2rem;
  box-shadow: 0 4px 15px rgba(78,84,200,0.3);
}
.wp-block-button.is-style-dm-primary > .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(78,84,200,0.4); color: #fff; }

.wp-block-button.is-style-dm-warm > .wp-block-button__link {
  background: var(--wp--preset--gradient--dm-warm, linear-gradient(135deg,#f77062 0%,#fe5196 100%));
  color: #fff; border: none; border-radius: 50px; font-weight: 700; padding: 0.85rem 2.2rem;
  box-shadow: 0 4px 15px rgba(247,112,98,0.3);
}
.wp-block-button.is-style-dm-warm > .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(247,112,98,0.4); color: #fff; }

.wp-block-button.is-style-dm-secondary > .wp-block-button__link {
  background: #fff; color: var(--wp--preset--color--primary, #4e54c8); border: 2px solid var(--wp--preset--color--primary, #4e54c8);
  border-radius: 50px; font-weight: 700; padding: 0.7rem 2rem;
}
.wp-block-button.is-style-dm-secondary > .wp-block-button__link:hover { background: var(--wp--preset--color--primary, #4e54c8); color: #fff; }

.wp-block-button.is-style-dm-outline-light > .wp-block-button__link {
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.6);
  border-radius: 50px; font-weight: 700; padding: 0.8rem 2.2rem;
}
.wp-block-button.is-style-dm-outline-light > .wp-block-button__link:hover { background: rgba(255,255,255,0.15); border-color: #fff; color: #fff; }

/* ── Drobne normalizacje bloków ── */
.wp-block-group.alignfull > .dm-section,
.wp-block-group .container { margin-inline: auto; }

/* obrazy w treści wpisów */
.post-article .wp-block-image img { border-radius: 16px; }

/* core/image: klasa zaokrąglenia jest na <figure>, więc zaokrąglamy <img> w środku */
.wp-block-image.rounded-1 img { border-radius: .25rem; }
.wp-block-image.rounded-2 img { border-radius: .375rem; }
.wp-block-image.rounded-3 img { border-radius: .5rem; }
.wp-block-image.rounded-4 img { border-radius: 1rem; }
.wp-block-image.rounded-5 img { border-radius: 2rem; }
.wp-block-image.how-it-works-img img { border-radius: 20px; }
.wp-block-image.how-it-works-img { box-shadow: 0 16px 48px rgba(0,0,0,0.10); border-radius: 20px; }

/* ── Fasada YouTube (lazy-load odtwarzacza po kliknięciu) ──
   Wypełnia kontener proporcji (.video-wrapper / .ratio-short / inline padding-bottom box). */
.yt-facade {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; cursor: pointer;
  background: #000; overflow: hidden; display: block;
}
.yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease, opacity .3s ease; }
.yt-facade:hover img,
.yt-facade:focus-visible img { transform: scale(1.04); opacity: .9; }
.yt-facade-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 50px; border-radius: 14px; background: rgba(0,0,0,.62);
  transition: background .25s ease; pointer-events: none;
}
.yt-facade:hover .yt-facade-play,
.yt-facade:focus-visible .yt-facade-play { background: #f00; }
.yt-facade-play::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid; border-width: 9px 0 9px 16px;
  border-color: transparent transparent transparent #fff;
}
.yt-facade:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }