/* ============================================================
   Göhler's Feinbäckerei — Modal System (CSS-only :target)
   Phase 2.1: Blueprint-Modultechnik + Nav-Trennung
   ============================================================ */

/* --- 1. Blueprint-Drift-Keyframes (geteilter, sehr langsamer Scroll) ------ */
@keyframes bpDrift {
  from { transform: translateY(0); }
  to   { transform: translateY(-6%); }        /* nahtlos dank -inset-Puffer     */
}

@media (prefers-reduced-motion: reduce) {
  .blueprint-dialog::before { animation: none; }
}

/* v1.2-2 · 10.10.2026 — Feedback-Moal (#modal-feedback): Formularfelder im Blau-Blatt-
   Glas-Stil, Honeypot-Feld unsichtbar (Bot-Schlange), Footer-Feedback-Link. */
#modal-feedback .modal__dialog input[type="text"],
#modal-feedback .modal__dialog input[type="email"] {
  width: 100%;
  margin-top: .35rem;
  padding: .65rem .95rem;
  border: none !important;                /* anfrage-Modal-Stil ist spezifischer — ablösen */
  border-radius: 8px;
  background: rgba(21, 53, 140, .07);     /* Glasfeld wie das Blueprint-Papier hinter den Linien */
  color: var(--clr-text, #3E2410);
  font-size: 1rem;
}
#modal-feedback .modal__dialog input::placeholder,
#modal-feedback .modal__dialog textarea::placeholder { color: rgba(62, 36, 16, .5); }

/* Honeypot-Feld (v1.2-2): ausgefüllt => Bot; für Menschen unsichtbar halten */
.hp-field { position:absolute !important; left:-300% !important; width:1px !important; height:1px !important; overflow:hidden !important; white-space:nowrap !important; }

/* Footer-Feedback-Link (ersetzt das offene mailto, v1.2/5) */
.footer-fb-link { color: var(--clr-gold, #9BB3CE); font-weight: 600; }

/* --- 2. Modal Overlay ---------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(62, 36, 16, .55);      /* abgedunkelter Hintergrund */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);

  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}

/* :target aktiviert das Modal (URL = #modal-login etc.) */
.modal-overlay:target {
  opacity: 1;
  visibility: visible;
}

/* --- 3. Modal Dialog-Box -------------------------------------------------- */
.modal-overlay > .modal__dialog {
  width: min(620px, 105vw);
  max-height: 98vh;           /* kein Clipping auf kleinen Screens */
  overflow-y: auto;
  background: var(--clr-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elev);
  padding: var(--space-lg) var(--space-xl);

  transform: scale(.85);      /* startet leicht verkleinert */
  transition: transform .35s cubic-bezier(.22, 1.44, .58, 1);
}

/* When overlay becomes :target, dialog scales to 1 */
.modal-overlay:target > .modal__dialog {
  transform: scale(1);
}

/* --- 4. Blueprint-Variante für die Modals ----------------------------------
   (nur #modal-anfrage & #modal-brett — HAUPTseite/Produktside bleiben clean.)  */
.blueprint-dialog {
  --bp-image: url('../media/Produktbilder/blueprint_original.jpg');
  --bp-opacity: 0.40;          /* ← zentraler Subtilitäts-Parameter (helles Feld) */
  --bp-brightness: 1.12;       /* hellere Linien                                  */
  --bp-content-bg: rgba(247, 240, 229, .86);   /* milchige Scheibe hinter Inputs   */

  position: relative;
  isolation: isolate;
  background: linear-gradient(175deg, #f3ead7 0%, var(--clr-bg) 55%);             /* Papier-Grund */
}

.blueprint-dialog::before {
  content: '';
  position: absolute;
  inset: -60px;                        /* größer als Dialog → Parallax-Stufe    */
  z-index: 0;                          /* hinter header/body/footer, vor Grund   */
  pointer-events: none;                /* niemals Klicks stören                  */

  background-image: var(--bp-image);
  background-size: cover;
  background-position: center top;

  opacity: var(--bp-opacity);          /* ← zentraler Subtilitäts-Parameter     */
  filter: brightness(var(--bp-brightness)) contrast(.85) grayscale(.15);
  animation: bpDrift 90s linear infinite;
}

/* Anschlagbrett bekommt die dunklere Variant (nachts, "Backstube-Gefühl")   */
.blueprint-dialog--dark {
  --bp-image: url('../media/Produktbilder/blueprint_dark.jpg');
  --bp-opacity: 0.14;                  /* dunkler Grund → mehr Struktur sichtbar */
  --bp-brightness: .85;

  background: linear-gradient(175deg, #2e1d0f 0%, #3e2410 60%);   /* dunkles Holz */
}

.blueprint-dialog--dark::before {
  opacity: var(--bp-opacity);
}

/* Inhalts-Ebenen schieben wir klar über das Blueprint (z-index 1)           */
.blueprint-dialog > .modal__header,
.blueprint-dialog > .modal__body,
.blueprint-dialog > .modal__footer {
  position: relative;
  z-index: 1;
}

/* Formular-Fields + Bretteinträge: milchige Glasscheibe — Text bleibt lesbar */
.blueprint-dialog input[type="text"],
.blueprint-dialog input[type="email"],
.blueprint-dialog input[type="password"],
.blueprint-dialog textarea,
.blueprint-dialog .brett-item,
.blueprint-dialog .modal__header {
  background: var(--bp-content-bg);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(2px) saturate(120%);
  -webkit-backdrop-filter: blur(2px) saturate(120%);
}

.blueprint-dialog label,
.blueprint-dialog .modal__header h2 {
  color: var(--clr-heading);           /* dunkler = starker Kontrast zum hellen Grund */
}

/* Brettpanels: ein leicht abgesetztes Glas für die Einträge              */
.brett-item {
  background: rgba(247, 240, 229, .86);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

.brett-item--placeholder {
  opacity: .45;
  font-style: italic;
}

/* Dunkles Brett-Panel (Variante --dark) braucht hellen Text             */
.blueprint-dialog--dark label,
.blueprint-dialog--dark .modal__header h2 {
  color: #f7f0e5;
}

.blueprint-dialog--dark input[type="text"],
.blueprint-dialog--dark input[type="email"],
.blueprint-dialog--dark textarea {
  background: rgba(62, 36, 16, .88);       /* fast undurchsichtig → Input bleibt hell */
  color: #f7f0e5;
}

/* --- 5. Modal Header ---------------------------------------------------- */
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.modal__header h2 {
  font-family: var(--ff-display);
  font-size: 1.3rem;
  color: var(--clr-heading);
}

/* Close Button (link to # ohne Anker = Modal schließt) */
.modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--clr-surface);
  color: var(--clr-heading);
  text-decoration-thickness: 0;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.modal__close:hover {
  background: var(--clr-primary);
  color: var(--clr-on-primary);
}

/* --- 6. Modal Body & Forms ---------------------------------------------- */
.modal__body {
  margin-bottom: var(--space-md);
}

.modal__body p,
.modal__body textarea,
.modal__body input[type="text"],
.modal__body input[type="email"],
.modal__body input[type="password"] {
  display: block;
  width: 100%;
  font-size: .9rem;
  color: var(--clr-text);
  margin-bottom: var(--space-sm);
}

.modal__body label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--clr-heading);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}

.modal__body textarea,
.modal__body input[type="text"],
.modal__body input[type="email"],
.modal__body input[type="password"] {
  border: 1px solid rgba(92, 53, 13, .2);
  border-radius: var(--radius-sm);
  padding: .6rem .8rem;
}

/* --- 7. Extended Nav Buttons (Login, Anfrage, etc.) — TRENNGRUPPE ----------
   Phase 2.1: deutlich abgesetzte Funktions-Kapsel statt flachen Buttons.      */
.nav__extra {
  list-style: none;
  display: flex;
  gap: .35rem;
  align-items: center;

  /* ABSETZUNG: eigene Fläche, Abstand vom Rest der Primär-Nav            */
  margin-left: var(--space-lg);          /* vorher --space-md (=1rem) → jetzt 2rem */
  padding: .35rem .85rem;
  border-radius: 2rem;                    /* Kapsel-Form                       */
  background: rgba(62, 36, 16, .05);      /* dezentes dunkles Glas               */
  border: 1px solid rgba(92, 53, 13, .14);
}

/* Thin vertical separator (vor den Funktions-Buttons)                     */
.nav__extra::before {
  content: '';
  width: 1px;
  height: 1.1rem;
  background: rgba(92, 53, 13, .28);       /* kräftiger als vorher (0,22→0,28)   */
  margin-right: var(--space-sm);           /* größerer Abgang zur Kapsel          */
}

.nav__btn--outline {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: .72rem;                       /* kleiner → hierarchisch unter Primär-Links  */
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--clr-heading);
  background: transparent;
  border: none;                            /* Kapsel übernimmt, kein Doppelborder     */
  padding: .25rem .45rem;
  border-radius: 1rem;
  text-decoration-thickness: 0;
  transition: background var(--transition), color var(--transition);
}

.nav__btn--outline:hover {
  color: #fff;
  background: var(--clr-gold);             /* Gold-Akzent → klare Abgrenzung zu Primär   */
}


/* --- 8. Mobile Nav adjustment --------------------------------------------- */
@media (max-width: 768px) {
  /* Ensure nav__extra is visible inside the mobile hamburger menu */
  .nav__extra {
    flex-direction: column;
    gap: var(--space-sm);
    margin-left: 0;
    margin-top: var(--space-md);

    /* Kapsel auf Mobile: volle Breite, aber trotzdem abgehoben     */
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
  }

  .nav__extra::before {
    width: 1.5rem;
    height: 1px;
    margin-left: 0;
    margin-right: 0;
    display: none;                         /* horizontale → vertikale Trennung ist klar genug */
  }

  .nav__btn--outline {
    width: fit-content;
    justify-self: center;                  /* mittig in der Kapsel, nicht links flush       */
    padding: var(--space-sm) 1rem;
    font-size: .82rem;
  }
}

@media (max-width: 768px) {
  .modal-overlay > .modal__dialog {
    padding: var(--space-md);
  }
}