/* Poprawki hazephoto.pl na kopii WordPressa (motyw Betheme). Ładowane po stylach motywu. */
:root {
  --haze-ink: #0b0a0a;
  --haze-paper: #c7c0b4;
  --haze-accent: #3e8055;
  --haze-btn: #356f49; /* zieleń marki przyciemniona do kontrastu 5,2 z jasnym tekstem (#3e8055 dawał 4,17) */
}

/* 1. Strzałki slidera. Hero #start stoi w tle (position: fixed), a strona przewija się nad nim.
   Motyw dawał mu z-index: -1, przez co leżał POD przezroczystym .content_wrapper, który zjadał
   kliknięcia i dotyk. Teraz hero ma 0, a sekcje nad nim i stopka 1: na ekranie kolejność warstw
   jest taka sama, ale kliknięcie trafia w strzałkę. Test: npm test (check.mjs) + pomiar w Playwright. */
#Content #start { z-index: 0; }
#Content .mcb-section:not(#start), #Footer { position: relative; z-index: 1; }

div#n2-ss-2 .nextend-arrow {
  border-radius: 50%;
  background: rgb(11 10 10 / 0.35);
  transition: background-color 0.2s ease, opacity 0.3s ease, visibility 0.3s;
}
div#n2-ss-2 .nextend-arrow:hover { background: rgb(11 10 10 / 0.6); }
/* sekcje nad hero są półprzezroczyste: po zjechaniu z hero strzałki przebijały przez nie */
.haze-scrolled div#n2-ss-2 .nextend-arrow { opacity: 0; visibility: hidden; }
div#n2-ss-2 .nextend-arrow img { width: 32px; height: 32px; padding: 8px; box-sizing: content-box; }

/* Telefon: strzałki zostają (motyw je chował), ale schodzą na dół, pod kciuk, żeby nie zasłaniać twarzy.
   Przesuwanie palcem działa niezależnie od nich. */
@media (orientation: landscape) and (max-width: 900px), (orientation: portrait) and (max-width: 700px) {
  /* kontenery strzałek to kolumny flex na pełną wysokość slidera: zmieniamy wyrównanie, nie top */
  div#n2-ss-2 .n2-ss-slider-controls-absolute-left-center,
  div#n2-ss-2 .n2-ss-slider-controls-absolute-right-center { align-items: flex-end; }
  div#n2-ss-2 .n2-ss-slider-controls-absolute-left-center > *,
  div#n2-ss-2 .n2-ss-slider-controls-absolute-right-center > * { margin-bottom: calc(22px + env(safe-area-inset-bottom)); }
  div#n2-ss-2 .nextend-arrow { background: rgb(11 10 10 / 0.5); }
  div#n2-ss-2 .nextend-arrow img { width: 24px; height: 24px; padding: 10px; } /* cel dotykowy 44 px */
}

/* Pierwsze zdjęcie pod sliderem (build.py): ten sam kadr co pierwszy slajd (fill, środek), widoczne przed startem skryptu */
.haze-hero-poster {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
}
#start .section_wrapper { position: relative; z-index: 1; }

/* 2. H1 strony głównej: niewidoczny na prośbę (napis na hero usunięty), ale zostaje dla Google i czytników
   ekranu; bez niego strona główna nie ma żadnego nagłówka pierwszego poziomu. */
.haze-hero-title {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 3. Przyciski w sekcji "Umów się" i pływający na telefonie */
.haze-cta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
  padding: 0 16px 72px;
  margin-top: -40px;
}
.haze-btn, .haze-float {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid var(--haze-btn);
  border-radius: 999px;
  background: var(--haze-btn);
  color: #f3f0ea !important;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.haze-btn:hover, .haze-float:hover { background: #2c6340; border-color: #2c6340; }
.haze-btn--ghost { background: transparent; border-color: var(--haze-paper); color: var(--haze-paper) !important; }
.haze-btn--ghost:hover { background: rgb(199 192 180 / 0.12); border-color: var(--haze-paper); }

.haze-float { display: none; }
@media (max-width: 767px) {
  .haze-float {
    display: inline-flex;
    position: fixed;
    z-index: 9000;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 6px 24px rgb(0 0 0 / 0.45);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .haze-scrolled:not(.haze-cta-in-view) .haze-float { opacity: 1; transform: none; pointer-events: auto; }
}

/* 4. Responsywność */
@media (max-width: 767px) {
  /* Slogan "Uwiecznij emocje" miał na sztywno 400 px w kolumnie 1400 px i wystawał poza ekran */
  .mcb-section .mcb-wrap .mcb-item-bf217fc08 { width: 100% !important; }
  .mcb-section .mcb-wrap .mcb-item-bf217fc08 .image_frame { width: 100% !important; max-width: 400px; }
  /* tekst ciągły 14 px był za drobny na telefonie */
  #o-mnie p, #opinie .column_column p, #opinie .desc { font-size: 16px; line-height: 1.7; }
}
@media (min-width: 768px) {
  #o-mnie p { font-size: 15px; line-height: 1.75; }
}
/* Ikony społecznościowe (stopka, menu boczne, menu telefonu): cel dotykowy 44 px (były ~16 px) */
ul.social li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
#Footer .copyright a { display: inline-block; padding: 12px 4px; color: #4c9466; } /* kontrast 5,2 na tle stopki (było 4,0) */

/* 5. Dostępność */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--haze-paper);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .animate { animation: none !important; opacity: 1 !important; transform: none !important; }
  .haze-float, div#n2-ss-2 .nextend-arrow { transition: none; }
}

/* 6. Animacje wejścia motywu (fadeInUp). Było: 1 s + sztywne 250 ms opóźnienia + przesunięcie o 200 px,
   więc treść wyraźnie spóźniała się za przewijaniem. Teraz krótko, blisko i bez opóźnienia. */
.animate.fadeInUp {
  animation-name: haze-fade-up;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.mcb-section .mcb-wrap .animate { animation-delay: 0s !important; }
@keyframes haze-fade-up {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: none; }
}

/* 7. Strona kontaktowa: była czarna z samym formularzem. Teraz tło jak na stronie głównej (zdjęcie z hero
   pod przyciemnieniem), widoczny tytuł, wprowadzenie z bezpośrednim kontaktem i czytelny formularz
   (tekst wpisywany w pola miał kolor rgb(5,0,0) na czarnym tle, czyli był niewidoczny). */
.haze-contact::before {
  /* fixed na pseudo-elemencie zamiast background-attachment: fixed, którego iOS nie obsługuje */
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgb(11 10 10 / 0.5), rgb(11 10 10 / 0.76)),
    url(/wp-content/uploads/2025/11/IMG_8786-scaled.jpg) 50% 50% / cover no-repeat;
}
.haze-contact #Subheader { opacity: 1 !important; background: none !important; padding: clamp(40px, 9vh, 110px) 0 0 !important; }
.haze-contact #Subheader .title {
  font-family: Oswald, sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 46px);
  font-style: normal;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--haze-paper);
}
.haze-contact #Subheader .breadcrumbs, .haze-contact #Subheader .breadcrumbs li, .haze-contact #Subheader .breadcrumbs a { color: rgb(199 192 180 / 0.8) !important; }
.haze-contact .the_content_wrapper {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(32px, 6vh, 72px);
}
@media (min-width: 960px) {
  .haze-contact .the_content_wrapper { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.haze-contact .the_content_wrapper > p:empty { display: none; }
.haze-contact-intro { color: var(--haze-paper); font-size: 16px; line-height: 1.75; }
.haze-contact-intro p { margin: 0 0 14px; }
.haze-contact-lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; }
.haze-contact-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.haze-contact .wpcf7 {
  padding: clamp(20px, 3vw, 40px);
  background: rgb(11 10 10 / 0.62);
  border: 1px solid rgb(199 192 180 / 0.14);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.haze-contact .wpcf7 label { display: block; color: var(--haze-paper); font-size: 15px; }
.haze-contact .wpcf7 input:not([type="submit"]):not([type="hidden"]), .haze-contact .wpcf7 textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  font-size: 16px; /* 16 px: iOS nie powiększa strony przy wejściu w pole */
  color: #f3f0ea !important;
  background: rgb(11 10 10 / 0.55) !important;
  border: 1px solid rgb(199 192 180 / 0.4) !important;
  border-radius: 8px;
  box-shadow: none;
}
.haze-contact .wpcf7 input:focus, .haze-contact .wpcf7 textarea:focus { border-color: var(--haze-paper) !important; }
.haze-contact .wpcf7 .wpcf7-submit {
  min-height: 48px;
  padding: 0 34px;
  border: 1px solid var(--haze-btn) !important;
  border-radius: 999px;
  background: var(--haze-btn) !important;
  color: #f3f0ea !important;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.haze-contact .wpcf7 .wpcf7-submit:hover { background: #2c6340 !important; border-color: #2c6340 !important; }
.haze-contact .wpcf7-response-output { color: var(--haze-paper); border-radius: 8px; }
/* Błąd pola: motyw chował treść komunikatu (text-indent -9999px) i pokazywał czerwony kwadrat z "x" poza panelem.
   Teraz zwykły komunikat pod polem i obramowanie pola (15A.13: błąd inline + podsumowanie pod formularzem). */
body.haze-contact:not(.cf7p-message) .wpcf7-not-valid-tip {
  position: static !important;
  display: block;
  width: auto !important;
  height: auto !important;
  margin-top: 6px;
  transform: none;
  text-indent: 0 !important;
  background: none;
  color: #f0a59b;
  font-size: 14px;
  line-height: 1.4;
}
body.haze-contact:not(.cf7p-message) .wpcf7-not-valid-tip::before,
body.haze-contact:not(.cf7p-message) .wpcf7-not-valid-tip::after { content: none; }
.haze-contact .wpcf7 .wpcf7-not-valid { border-color: #f0a59b !important; }

/* 8. Logo nad sloganem "Uwiecznij emocje": połowa ramki sloganu (800 px -> 400 px, na telefonie 50% do 200 px).
   Przycięte logo-haze.svg (build.py) ma napis na 81,5% szerokości jak slogan, więc "haze." = 50% szerokości
   sloganu. Pełna szerokość okazała się zdecydowanie za duża (decyzja klienta 2026-10-18); proporcję zmienia się tutaj. */
#umow-sie .mcb-item-4dd844852 .image_frame { width: 400px; max-width: 50%; margin: 0 auto; }
#umow-sie .mcb-item-4dd844852 .image_frame.mfn-coverimg .image_wrapper img { width: 100%; height: auto !important; object-fit: contain; }
@media (max-width: 767px) {
  #umow-sie .mcb-item-4dd844852 .image_frame { width: 50%; max-width: 200px; }
  /* motyw podsuwa slogan o 120 px w górę (bottom: 120px); przy wyższym logo na telefonie wchodził na nie */
  /* plik sloganu ma 31% pustego miejsca nad tekstem, a między kolumnami stoi pusty wypełniacz motywu */
  .mcb-section .mcb-wrap .mcb-item-bf217fc08 { bottom: 0 !important; margin-top: -36px; }
  #umow-sie .mcb-item-fff36d517 { display: none; }
  .mcb-section .mcb-wrap .mcb-item-bf217fc08 .mcb-column-inner-bf217fc08 { height: auto !important; }
  .haze-cta { margin-top: 28px; }
}

/* 9. Link do kontaktu w tekście "Kim jestem": kolor jak tekst, podkreślony (zieleń motywu ma za mały kontrast na tle) */
#o-mnie .haze-inline-link { color: var(--haze-paper); text-decoration: underline; text-underline-offset: 3px; }
#o-mnie .haze-inline-link:hover { color: #f3f0ea; }