/* ============================================================
   KARTECZKA — style.css
   WCAG 2.2 | RWD (mobile / tablet / desktop)
   ============================================================ */

/* ---- RESET ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---- ZMIENNE ---- */
:root {
  --yellow:        #FFE94E;
  --yellow-deep:   #F5D800;
  --yellow-mid:    #FFD700;
  --text:          #1a1a1a;
  --text-mid:      #3a3a3a;
  --focus:         #0050CC;
  --error:         #b91c1c;
  --success:       #166534;
  --btn-dark-bg:   #1f2937;
  --btn-dark-fg:   #ffffff;
  --btn-link-bg:   rgba(0,0,0,.09);
  --btn-send-bg:   #1f5c23;
  --btn-send-fg:   #ffffff;
  --shadow-note:
    0 1px 2px  rgba(0,0,0,.10),
    0 4px 8px  rgba(0,0,0,.12),
    0 10px 28px rgba(0,0,0,.16),
    2px 6px 12px rgba(0,0,0,.10);
  --radius:        2px;
  --font-note:     'Caveat', cursive;
  --font-ui:       system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- CZCIONKI / BAZA ---- */
html, body {
  height: 100%;
}

body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  overflow: hidden;          /* pełny ekran bez scroll */
}

/* ============================================================
   DOSTĘPNOŚĆ
   ============================================================ */

/* Skip-link (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: .5rem 1.25rem;
  background: #000;
  color: #fff;
  font-size: 1rem;
  font-family: var(--font-ui);
  border-radius: 0 0 4px 0;
  text-decoration: none;
  transition: top .15s;
}
.skip-link:focus {
  top: 0;
}

/* Wizualnie ukryte, ale czytniki widzą (WCAG 1.3.1) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Focus widoczny dla wszystkich elementów (WCAG 2.4.7 / 2.4.11) */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   TŁO — LODÓWKA
   ============================================================ */
.fridge {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;

  /* Biała lodówka — wielowarstwowe tło */
  background-color: #dce0e3;
  background-image:
    /* Pionowy połysk — środek jaśniejszy */
    linear-gradient(
      90deg,
      rgba(0,0,0,.07)  0%,
      rgba(255,255,255,.18) 10%,
      rgba(255,255,255,.28) 40%,
      rgba(255,255,255,.28) 60%,
      rgba(255,255,255,.12) 90%,
      rgba(0,0,0,.05) 100%
    ),
    /* Odbicie światła z góry */
    linear-gradient(
      180deg,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.10) 18%,
      transparent 35%
    ),
    /* Subtelna pozioma linia podziału drzwi */
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 49.5%,
      rgba(255,255,255,.4) 49.5%,
      rgba(255,255,255,.4) 50%,
      rgba(0,0,0,.04) 50%,
      rgba(0,0,0,.04) 50.5%,
      transparent 50.5%
    );
}

/* Boczne krawędzie lodówki */
.fridge::before,
.fridge::after {
  content: '';
  position: fixed;
  top: 0; bottom: 0;
  width: 18px;
  pointer-events: none;
  z-index: 0;
}
.fridge::before {
  left: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.12), transparent);
}
.fridge::after {
  right: 0;
  background: linear-gradient(270deg, rgba(0,0,0,.10), transparent);
}

/* ============================================================
   KARTECZKA — kontener
   ============================================================ */
.sticky-note {
  position: relative;
  width: min(440px, 90vw);
  background: var(--yellow);
  background-image:
    /* Delikatny połysk od lewej górnej */
    linear-gradient(
      135deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.04) 40%,
      transparent 60%
    );
  border-radius: var(--radius);
  box-shadow: var(--shadow-note);
  transform: rotate(-1.8deg);
  z-index: 1;
  transition:
    transform .3s cubic-bezier(.22,.68,0,1.2),
    box-shadow .3s ease;
}

.sticky-note:hover,
.sticky-note:focus-within {
  transform: rotate(-.6deg) translateY(-3px);
  box-shadow:
    0 2px 4px  rgba(0,0,0,.12),
    0 8px 16px rgba(0,0,0,.14),
    0 18px 40px rgba(0,0,0,.18);
}

/* ---- MAGNES ---- */
.note-magnet {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 35%,
      #f0f0f0 0%,
      #b0b0b0 45%,
      #606060 100%
    );
  box-shadow:
    0 2px 5px rgba(0,0,0,.35),
    inset 0 1px 2px rgba(255,255,255,.5);
  z-index: 2;
}

/* ---- PASEK ADHEZYJNY ---- */
.note-adhesive {
  height: 9px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.06) 0%,
    rgba(0,0,0,.10) 60%,
    rgba(0,0,0,.06) 100%
  );
  background-color: var(--yellow-mid);
  border-bottom: 1px solid rgba(0,0,0,.09);
}

/* ---- CIAŁO NOTATKI ---- */
.note-body {
  padding: 1.1rem 1.5rem 1.6rem;
}

/* ---- TYTUŁ ---- */
.note-title {
  font-family: var(--font-note);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: .6rem;
}

/* ---- TREŚĆ ---- */
.note-text {
  font-family: var(--font-note);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.75rem;        /* = 1 linia notatnika */
  white-space: pre-wrap;
  word-break: break-word;

  /* Kratka / linie notatnika */
  background-image: repeating-linear-gradient(
    transparent,
    transparent calc(1.75rem - 1px),
    rgba(0,0,0,.09) calc(1.75rem - 1px),
    rgba(0,0,0,.09) 1.75rem
  );
  padding-bottom: .25rem;
}

.note-text--sm {
  font-size: 1.1rem;
  background-image: none;
}

/* ---- LINK ---- */
.note-link-wrap {
  margin-top: 1rem;
}

/* ---- SEPARATOR ---- */
.note-hr {
  border: none;
  border-top: 1.5px dashed rgba(0,0,0,.18);
  margin: 1.1rem 0;
}

/* ---- FORMULARZ ODPOWIEDZI ---- */
.reply-wrap {
  /* widoczne gdy enabled */
}

.reply-success {
  margin-top: .6rem;
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 600;
  color: var(--success);
}

/* ---- ZAGIĘTY NAROŻNIK ---- */
.note-fold {
  position: absolute;
  bottom: 0; right: 0;
  width: 26px; height: 26px;
  background: linear-gradient(
    225deg,
    rgba(0,0,0,.13) 0%,
    rgba(0,0,0,.13) 50%,
    var(--yellow-deep) 50%,
    var(--yellow-deep) 100%
  );
  border-radius: 0 0 var(--radius) 0;
  box-shadow: -2px -2px 4px rgba(0,0,0,.08);
}

/* ============================================================
   DIALOGI — OVERLAY
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(5px);
  z-index: 200;
}

.sticky-note--dialog {
  width: min(400px, 100%);
  transform: rotate(-1.2deg);
}

/* ============================================================
   PRZYCISKI (WCAG: min 44×44px touch target)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  min-width: 44px;
  padding: .5rem 1.25rem;
  border-radius: 4px;
  border: 2px solid transparent;
  font-family: var(--font-note);
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, color .18s, border-color .18s, transform .1s;
  -webkit-user-select: none;
  user-select: none;
}
.btn:active { transform: scale(.97); }

/* Ciemny — dla hasła */
.btn--dark {
  background: var(--btn-dark-bg);
  color: var(--btn-dark-fg);
  border-color: var(--btn-dark-bg);
  font-family: var(--font-ui);
  font-size: .95rem;
}
.btn--dark:hover {
  background: #374151;
  border-color: #374151;
}

/* Link / akcja na karteczce */
.btn--link {
  background: var(--btn-link-bg);
  color: var(--text);
  border-color: rgba(0,0,0,.2);
  width: 100%;
}
.btn--link:hover {
  background: rgba(0,0,0,.15);
}

/* Wyślij odpowiedź */
.btn--send {
  background: var(--btn-send-bg);
  color: var(--btn-send-fg);
  border-color: var(--btn-send-bg);
  font-family: var(--font-ui);
  font-size: .9rem;
  margin-top: .4rem;
}
.btn--send:hover  { background: #14451a; border-color: #14451a; }
.btn--send:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   POLA FORMULARZA
   ============================================================ */
.field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: .75rem;
}

.field__label {
  font-family: var(--font-note);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.field__input,
.field__textarea {
  padding: .5rem .75rem;
  min-height: 44px;
  border: 2px solid rgba(0,0,0,.25);
  border-radius: 4px;
  background: rgba(255,255,255,.62);
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(0,80,204,.22);
}

/* Pole nieprawidłowe (WCAG 1.3.1) */
.field__input[aria-invalid="true"],
.field__textarea[aria-invalid="true"] {
  border-color: var(--error);
}

.field__textarea {
  resize: vertical;
  min-height: 84px;
  font-size: .95rem;
  line-height: 1.5;
}

.field__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  min-height: 1.2rem;
}

.field__error {
  font-family: var(--font-ui);
  font-size: .85rem;
  font-weight: 600;
  color: var(--error);
}

.field__counter {
  font-family: var(--font-ui);
  font-size: .78rem;
  color: #555;
  margin-left: auto;
}

/* ============================================================
   ANIMACJA WEJŚCIA
   ============================================================ */
@keyframes noteIn {
  from {
    opacity: 0;
    transform: rotate(-1.8deg) translateY(24px) scale(.96);
  }
  to {
    opacity: 1;
    transform: rotate(-1.8deg) translateY(0) scale(1);
  }
}

.sticky-note:not([hidden]) {
  animation: noteIn .45s cubic-bezier(.22,.68,0,1.1) forwards;
}

/* ============================================================
   RWD — TABLET (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  .fridge {
    padding: 1.5rem;
  }

  .sticky-note {
    width: min(400px, 92vw);
  }

  .note-title { font-size: 1.55rem; }
  .note-text  { font-size: 1.2rem; }
}

/* ============================================================
   RWD — MOBILE (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  body { overflow: auto; }  /* na małych ekranach scroll dozwolony */

  .fridge {
    min-height: 100vh;
    min-height: 100dvh;
    align-items: flex-start;
    padding: 2.5rem 1rem 2rem;
  }

  .sticky-note {
    width: 100%;
    max-width: 360px;
    transform: rotate(-.8deg);
  }
  .sticky-note:hover,
  .sticky-note:focus-within {
    transform: rotate(0deg) translateY(-2px);
  }

  .sticky-note--dialog {
    transform: rotate(-.6deg);
  }

  .note-body { padding: 1rem 1.25rem 1.4rem; }

  .note-title { font-size: 1.4rem; }
  .note-text  { font-size: 1.15rem; line-height: 1.6rem; }

  .btn--link {
    font-size: 1rem;
    padding: .5rem 1rem;
  }

  @keyframes noteIn {
    from {
      opacity: 0;
      transform: rotate(-.8deg) translateY(20px) scale(.97);
    }
    to {
      opacity: 1;
      transform: rotate(-.8deg) translateY(0) scale(1);
    }
  }
}

/* ============================================================
   DOSTĘPNOŚĆ — REDUCED MOTION (WCAG 2.3.3)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   TRYB WYSOKIEGO KONTRASTU
   ============================================================ */
@media (forced-colors: active) {
  .sticky-note,
  .sticky-note--dialog {
    border: 2px solid ButtonText;
  }
  .note-fold,
  .note-adhesive,
  .note-magnet {
    display: none;
  }
}