/*
 * main.css
 * Fatoş Friseursalon — Globale Base-Styles & Resets abseits von UnoCSS.
 */

:root {
  /* Globale Growth-Deckelung (Max 2560px) */
  --cvw: min(1vw, 25.6px);
}

/*
 * Hero-Textblock: harte Begrenzung auf die SICHTBARE Viewport-Breite.
 * Hintergrund: In der Flex-Spalten-Konstruktion des Heros loest sich der
 * umschliessende Container an manchen Mobile-Breiten breiter als der Viewport
 * auf; der Text bricht dann an der (ausserhalb liegenden) Container-Kante um und
 * der Rest wird von overflow-x:clip abgeschnitten. Diese Regel bindet den
 * Textblock unabhaengig vom Vorfahren an min(48rem, Viewport - 3rem) und
 * erzwingt damit den Umbruch innerhalb des Bildschirms. --cvw kappt zugleich bei
 * 2560px, 48rem bleibt die Lese-Optimum-Obergrenze auf grossen Schirmen.
 */
.hero-copy {
  width: 100%;
  max-width: min(48rem, calc(100 * var(--cvw) - 3rem));
}

/*
 * Insel-Nav Priority-Collapse — CSS-Sicherheitsnetz (Graceful Degradation).
 * Die praezise, platz-basierte Steuerung macht das Nav-JS (Overflow-Messung) und
 * setzt dann inline display, was diese Regeln ueberschreibt. Greift JS nicht
 * (deaktiviert/Fehler), sorgen diese konservativen Breakpoints dafuer, dass auf
 * sehr schmalen Geraeten zuerst "Termin", dann "Anfahrt" verschwindet und der
 * Hamburger-Button niemals aus dem Viewport gedraengt wird. Kein !important,
 * damit das JS jederzeit die Oberhand behaelt.
 */
@media (max-width: 450px) { #nav-cta-termin { display: none; } }
@media (max-width: 400px) { #nav-cta-anfahrt { display: none; } }

/* Base Body Resets */
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 400;
  /* Umbruch-Determinismus: ein zu langes Wort (z. B. "Friseursalon" in einer
     grossen Headline auf schmalem Viewport) bricht um, statt rauszuragen und vom
     overflow-x:clip abgeschnitten zu werden. overflow-wrap vererbt an alle Texte
     und greift nur, wenn es sonst keinen Umbruchpunkt gibt (unsichtbar bei
     normalem Text). Headlines bekommen zusaetzlich saubere Silbentrennung. */
  overflow-wrap: break-word;
}

a {
  color: inherit; /* Default: Link erbt Container-Textfarbe statt Browser-Blau */
  text-decoration: none;
}

/* figure traegt im Browser-UA-Stylesheet margin: 1em 40px — entfernt, damit
   Bild-Kacheln (z. B. in der Galerie) randlos in ihrer Grid-Zelle sitzen. */
figure { margin: 0; }

/* Fokus-Determinismus: kein blauer Browser-Default-Rahmen.
   Maus-/Touch-Klick zeigt keinen Rahmen; nur Tastatur-Navigation bekommt einen
   eigenen, markenkonformen bronzefarbenen Outline. Elemente mit der .focus-ring-
   Utility bringen ihren eigenen Ring mit (deren outline:none hat hoehere Spezifitaet). */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid #8b6340; outline-offset: 3px; }

/* Markenkonformer Fokus-Outline fuer die .focus-ring-Utilities (literaler Hex statt
   ring-Box-Shadow, dessen Custom-Farbe im Runtime einen blauen Default-Ring ausloeste).
   bronze auf hellen Flaechen, creme auf dunklen. */
.focus-ring:focus-visible { outline: 2px solid #8b6340; outline-offset: 3px; }
.focus-ring-dark:focus-visible { outline: 2px solid #f7f2ec; outline-offset: 3px; }

/* Native <button>-Defaults zuruecksetzen: kein grauer UA-Rahmen / Outset-Border,
   keine native WebKit-Button-Optik (push-button) inkl. blauem System-Fokus-Glow, kein Mobile-
   Tap-Highlight. Hintergrund/Border/Fokus setzen die Komponenten selbst per Utility/main.css. */
button {
  border: 0;
  background-color: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* Native input/select/textarea-Defaults analog zum button-Reset zuruecksetzen,
   damit Formularfelder ohne native WebKit-Optik rendern.
   Hinweis: checkbox/radio braeuchten bei Bedarf ihr eigenes appearance zurueck. */
input, select, textarea {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
}

/* Heading-Default-Font (von .font-heading / .font-sans-Klassen ueberschreibbar) */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  /* Bewusst KEINE Silbentrennung auf den grossen Display-Headlines: die
     Trennung mitten im Wort ("Fri-seursalon") sah auf Desktop unsauber aus.
     Stattdessen brechen ganze Woerter um (ruhigeres Bild); .hero-copy deckelt
     die Breite ohnehin, sodass nichts ueber den Viewport laeuft. break-word
     bleibt als Notfall-Fallback fuer ein einzeln zu langes Wort. */
  overflow-wrap: break-word;
}

/* Scrollbar — dezent, zur warmen CI passend (native Fallback bleibt zulaessig) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #ede5d8; }
::-webkit-scrollbar-thumb { background: #c9a882; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #8b6340; }

/* Auto-Fill + Caret eigen ausgepraegt (kein Browser-Default-Look) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill {
  -webkit-text-fill-color: #1c1412;
  -webkit-box-shadow: 0 0 0 1000px #f7f2ec inset;
  caret-color: #8b6340;
  transition: background-color 5000s ease-in-out 0s;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea {
  caret-color: #8b6340;
}