/* ==========================================================================
   Trattoria La Perfetta — Global CSS
   Animations, Utility Classes
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts: NICHT hier per @font-face einbinden!
   Fonts werden via Elementor Custom Fonts geladen:
   WP-Admin → Elementor → Custom Fonts → WOFF2 hochladen
   Elementor generiert @font-face automatisch.
   Doppeltes @font-face = doppelter HTTP-Request = schlechtere Performance.
   
   WOFF2-Dateien herunterladen: https://gwfh.mranftl.com/fonts
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */

.tlp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.tlp-text-gold    { color: var(--color-secondary); }
.tlp-text-green   { color: var(--color-primary); }
.tlp-text-sage    { color: var(--color-accent); }
.tlp-text-terra   { color: var(--color-accent); }

.tlp-bg-cream     { background-color: var(--color-light); }
.tlp-bg-dark      { background-color: var(--color-primary); color: var(--color-light); }

.tlp-divider {
  width: 60px;
  height: 2px;
  background-color: var(--color-secondary);
  margin: var(--spacing-sm) auto;
}

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tlp-fade-in-up {
  animation: fadeInUp 0.6s ease-out both;
}

/* --------------------------------------------------------------------------
   Responsive Headings — Fluid Scale + Auto-Trennung
   Best Practice: clamp() mit sinnvollen Min/Max-Werten für Mobile/Desktop.
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-hyphens: none;
  hyphens: none;
}

h1 {
  font-size: clamp(1.5rem, 4.8vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: 0.028em;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(1.25rem, 3.2vw, 2.375rem);
  line-height: 1.16;
  letter-spacing: 0.022em;
  text-transform: uppercase;
}

h3 {
  font-size: clamp(1.1rem, 2.4vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: 0.006em;
}

h4 {
  font-size: clamp(1rem, 1.9vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: 0.004em;
}

h5 {
  font-size: clamp(0.95rem, 1.4vw, 1.2rem);
  line-height: 1.3;
}

h6 {
  font-size: clamp(0.875rem, 1.1vw, 1.1rem);
  line-height: 1.35;
}