/*
Theme Name: Pferde Tante Yvonne
Description: Theme für die Pferdebetreuung von Yvonne Wendel in Mertingen. Aufgebaut auf dem Classical-Designsystem: Cormorant Garamond über Lora, Haarlinien, Gold als Kontur.
Author: Yvonne Wendel
Version: 1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: pferde-tante
*/

/* Farbgrund der Seite: hellgrün statt des Systemweiß. */
:root {
  --color-bg: oklch(0.955 0.032 145);
  --color-surface: oklch(0.975 0.018 145);
}

body { margin: 0; text-wrap: pretty; background: var(--color-bg); }
html { scroll-behavior: smooth; }
a { color: var(--color-accent-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }

/* Hinweis-/Fehlerzeilen der Formulare. */
.pt-notice {
  font-family: var(--font-body); font-size: 15px; line-height: 28px;
  border: 1px solid var(--color-accent); padding: 14px 18px; margin: 28px 0 0;
}
.pt-notice-error { color: var(--color-accent-700); }

/* ---------------------------------------------------------------
   Handy und Tablet: mehrspaltige Blöcke untereinander,
   schmalere Ränder, keine Blocksatz-Lücken.
   --------------------------------------------------------------- */

@media (max-width: 900px) {
  /* Navigation umbrechen und kompakter setzen. */
  .nav {
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 16px;
    padding-block: 12px;
    padding-inline: 18px !important;
  }
  .nav-brand { flex: 1 0 100%; }
  .nav-brand img { height: 34px !important; }

  /* Seitencontainer: schmalere Ränder. */
  body > div[style*="max-width: 1160px"] { padding-inline: 18px !important; }
}

@media (max-width: 720px) {
  /* Alle Spaltenraster einspaltig. */
  [style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Senkrechte Trennlinien werden zu waagerechten. */
  [style*="border-left: 1px solid var(--color-divider)"] {
    border-left: 0 !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--color-divider);
    padding-top: 24px;
  }

  /* Angehängte Seitenleiste läuft mit. */
  [style*="position: sticky"][style*="top: 24px"] { position: static !important; }

  /* Blocksatz und hängende Einzüge sind auf schmalen Zeilen unruhig. */
  p, blockquote, figcaption, li {
    text-align: left !important;
    text-indent: 0 !important;
    hyphens: auto;
  }

  /* Überschriften nicht in den Rand hängen. */
  h1, h2 { margin-left: 0 !important; }

  /* Bilder und Tabellen halten sich im Rahmen. */
  img { max-width: 100%; height: auto; }
  .table { display: block; overflow-x: auto; font-size: 14px; }

  /* Abschnitte etwas dichter. */
  section[style*="padding: 72px 0"] { padding-block: 42px !important; }
  section[style*="padding: 96px 0"] { padding-block: 56px !important; }

  /* Knöpfe über die volle Breite, damit sie gut zu treffen sind. */
  .btn { min-height: 48px; }
}

@media (max-width: 480px) {
  .btn { width: 100%; justify-content: center; }
}