/* ============================================================
   HYDROBUD — shared.css
   STATE-ONLY. Wygląd (layout, kolory, typografia) pochodzi
   z assets/css/compiled.css (build Tailwind z prototypu React).
   Tu trafiają wyłącznie klasy stanu, którymi steruje interactive.js,
   oraz style treści z edytora WP (których Tailwind nie zna).

   3 reguły:
   1) STATE, nie LAYOUT — żadnego position/width/height w regułach .js-*
   2) tylko selektory klasowe, nigdy atrybutowe
   3) .bg-video bez position/width/height (sizing jest inline z helpera)
   ============================================================ */

/* ====== Menu mobilne (Header.jsx:105-143 — w React render warunkowy) ====== */
.js-mobile-menu { display: none; }
.js-mobile-menu.is-open { display: flex; }
/* odpowiednik `lg:hidden` z JSX — na desktopie menu nie pokazuje się nawet „otwarte" */
@media (min-width: 1024px) {
    .js-mobile-menu.is-open { display: none; }
}

/* ====== Blokada scrolla ====== */
body.mobile-menu-open,
body.modal-open { overflow: hidden; }

/* ====== Ikony hamburgera (Menu / X — zamiana zamiast re-renderu) ====== */
.js-menu-icon-close { display: none; }
.js-mobile-menu-toggle.is-open .js-menu-icon-open { display: none; }
.js-mobile-menu-toggle.is-open .js-menu-icon-close { display: inline-flex; }

/* ====== Nagłówek — przejście tła przy scrollu (Header.jsx:41) ======
   Konkretne klasy tła podmienia JS z atrybutów data-state-* — tutaj
   zostaje wyłącznie płynność przejścia. */
.js-scroll-header { transition: background-color 0.3s ease, border-color 0.3s ease; }

/* ====== Accordion ====== */
.js-accordion-content {
    overflow: hidden;
    transition: max-height 0.3s ease;
    max-height: 0;
}

/* ====== Hero slideshow ====== */
.js-hero-slide {
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}
.js-hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* ====== Modal ====== */
.js-modal { display: none; }
.js-modal.is-open { display: flex; }

/* ====== Tabs ====== */
.js-tab-content { display: none; }
.js-tab-content.is-active { display: block; }

/* ====== Back to top ====== */
.js-back-to-top {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.js-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ====== Sticky panel ====== */
.js-sticky-panel { transition: transform 0.3s ease; }
.js-sticky-panel.is-collapsed { transform: translateX(calc(100% - 40px)); }

/* ====== iframe responsive ====== */
iframe:not(.bg-video):not([data-bg-video]) { max-width: 100%; }

/* ====== .bg-video ======
   object-fit NIE działa na iframe — sizing wstawia theme_youtube_embed( bg = true )
   jako inline style. Tutaj wyłącznie ramka i blokada interakcji. */
.bg-video, [data-bg-video] {
    border: 0;
    pointer-events: none;
}

/* ====== Ikony SVG (theme_icon) ====== */
.icon-svg {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ====== Link rezerwacji desktop/mobile (opcja B, cache-safe) ======
   W tym projekcie NIEUŻYWANE (HYDROBUD nie ma rezerwacji online) — reguły
   zostają jako część standardowego szkieletu helpera theme_booking_link(). */
.booking-mobile { display: none; }
.booking-desktop { display: inline-flex; }
@media (max-width: 767px) {
    .booking-desktop { display: none; }
    .booking-mobile { display: inline-flex; }
}

/* ====== Treść z edytora WP (Regulamin, wpisy) ======
   Tailwind preflight kasuje list-style — przywracamy dla the_content(). */
.entry-content ul { list-style: disc; padding-left: 1.5em; margin: 1em 0; }
.entry-content ol { list-style: decimal; padding-left: 1.5em; margin: 1em 0; }
.entry-content li { margin: 0.35em 0; }
.entry-content h2 { font-size: 1.5em; font-weight: 700; margin: 1.5em 0 0.5em; }
.entry-content h3 { font-size: 1.25em; font-weight: 600; margin: 1.25em 0 0.5em; }
.entry-content p { margin: 1em 0; line-height: 1.7; }
.entry-content a { text-decoration: underline; }
.entry-content strong { font-weight: 600; }
.entry-content img { max-width: 100%; height: auto; }

/* Sekcje Polityki prywatności używają arbitrary variantów Tailwind prosto z JSX
   ([&_li]:before:content-['—'] — Privacy.jsx:195), które są w compiled.css.
   Dokładamy tylko odstępy akapitów/list, których JSX nie definiuje wprost. */
.privacy-content > p { margin: 0.75rem 0; }
.privacy-content > p:first-child { margin-top: 0; }
.privacy-content ul { margin: 0.75rem 0; }
.privacy-content li { margin: 0.5rem 0; }

/* ====== Contact Form 7 — CSS bridge (Rule 23) ======
   Opcja `class:` w tagach CF7 przyjmuje tylko [-0-9a-zA-Z_], więc klasy Tailwind
   z `:`, `[]` i `/` nie przechodzą. Poniżej odwzorowanie designu z Contact.jsx
   jako RAW CSS, scoped do wrappera .contact-form. Klasy proste (w-full, px-4,
   rounded, border, bg-navy-2 …) idą normalnie przez `class:` w _project/CF7_FORM.txt. */

.contact-form .wpcf7-form-control-wrap { display: block; }
.contact-form .wpcf7 form > div { margin: 0; }

/* input / textarea / select — odpowiednik text-[15px], placeholder:text-slate/70,
   focus:border-cyan, focus:shadow-[0_0_0_3px_rgba(0,172,224,0.18)] (Contact.jsx:354) */
.contact-form .wpcf7-form-control {
    font-size: 15px;
    color: #e8eef3;
}
.contact-form .wpcf7-form-control::placeholder { color: rgba(126, 144, 159, 0.7); }
.contact-form input.wpcf7-form-control:focus,
.contact-form textarea.wpcf7-form-control:focus,
.contact-form select.wpcf7-form-control:focus {
    border-color: #00ace0;
    box-shadow: 0 0 0 3px rgba(0, 172, 224, 0.18);
}
.contact-form textarea.wpcf7-form-control { resize: vertical; }

/* stan błędu — odpowiednik border-red-400/70 (Contact.jsx:278, :355) */
.contact-form .wpcf7-not-valid { border-color: rgba(248, 113, 113, 0.7) !important; }
.contact-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 0.375rem;
    font-size: 12px;
    color: #fca5a5;
}

/* zgoda RODO — odwzorowanie checkboxa z Contact.jsx:286-317
   (flex items-start gap-3 + appearance-none + checked:bg-cyan + svg „check") */
.contact-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.contact-form .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}
.contact-form .wpcf7-acceptance input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    margin-top: 0.125rem;
    height: 18px;
    width: 18px;
    flex-shrink: 0;
    cursor: pointer;
    border: 1px solid #13344f;
    border-radius: 3px;
    background-color: #0e2a45;
    background-size: 100% 100%;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.contact-form .wpcf7-acceptance input[type="checkbox"]:checked {
    border-color: #00ace0;
    background-color: #00ace0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230B1D30' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
}
.contact-form .wpcf7-acceptance input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(0, 172, 224, 0.5);
    outline-offset: 2px;
}

/* komunikat po wysyłce — odpowiednik ekranu „Dziękujemy" (Contact.jsx:189) */
.contact-form .wpcf7-response-output {
    margin: 1.5rem 0 0;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(0, 172, 224, 0.5);
    border-radius: 6px;
    background: rgba(0, 172, 224, 0.08);
    font-size: 15px;
    color: #c4d2dd;
}
.contact-form form.invalid .wpcf7-response-output,
.contact-form form.unaccepted .wpcf7-response-output,
.contact-form form.payment-required .wpcf7-response-output {
    border-color: rgba(248, 113, 113, 0.7);
    background: rgba(248, 113, 113, 0.08);
}
.contact-form .wpcf7-spinner { margin: 0 0.5rem; }

/* Uwaga: @media (prefers-reduced-motion: reduce) { *, *::before, *::after { … } }
   jest już w compiled.css (index.css:103-112) i obejmuje także klasy .js-* — nie duplikować. */