/*
Theme Name: Praxis Possnigg
Theme URI: https://www.possnigg.at
Author: Possnigg Consulting
Author URI: https://possnigg-consulting.at
Description: Child-Theme von Twenty Twenty-Five für possnigg.at. Ersetzt den Enfold-Baukasten. Das gesamte Design liegt hier und in der theme.json - die Seiteninhalte bestehen aus normalen Blöcken und lassen sich im Editor bearbeiten, ohne dass sich die Gestaltung verschiebt.
Template: twentytwentyfive
Version: 1.1.1
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: possniggpraxis
*/

/* ==========================================================================
   Alle Maße in dieser Datei sind am Bestand gemessen, nicht geschätzt.
   Kopfbereich 118 px, Inhaltsspalte 1180 px, halbe Spalten mit 71 px Abstand,
   Bandabstand 50 px, Fließtext 16 px auf 1,65.
   ========================================================================== */

:root,
.editor-styles-wrapper {
  --pp-gruen: #396959;
  --pp-logogruen: #448351;
  --pp-olive: #86a525;
  --pp-olive-tief: #5e7419;
  --pp-lind: #dee8be;
  --pp-tinte: #2b2b2b;
  --pp-flaeche: #f8f8f8;
  --pp-linie: #f2f2f2;

  --pp-kopf-hoehe: 118px;
  --pp-band: 50px;
}

/* ==========================================================================
   1. Grundlagen
   ========================================================================== */

/* Sichtbarer Fokusrahmen. Enfold hat gar keinen - wer mit der Tastatur
   bedient, sieht heute nicht, wo er steht. */
:where(a, button, input, textarea, select, summary, details):focus-visible {
  outline: 2px solid var(--pp-gruen);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Bilder nie über die Spalte hinaus. */
img,
figure img {
  max-width: 100%;
  height: auto;
}

/* Wortumbruch in langen Fachbegriffen statt waagrechter Bildlaufleiste. */
.wp-block-post-content p,
.wp-block-post-content li {
  overflow-wrap: break-word;
}

/* ==========================================================================
   2. Kopfbereich
   Weiß, klebt oben, 118 px hoch, schmaler Schatten statt Trennlinie -
   so wie heute. Er schrumpft beim Scrollen bewusst nicht.
   ========================================================================== */

.pp-kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
  min-height: var(--pp-kopf-hoehe);
}

.pp-kopf > .wp-block-group {
  min-height: var(--pp-kopf-hoehe);
}

/* Logo: 300 px breit, höchstens 100 px hoch - wie die Handeinstellung,
   die heute im Customizer steht. */
.pp-kopf .wp-block-site-logo img {
  width: 300px;
  max-width: 46vw;
  height: auto;
  max-height: 100px;
}

/* Brief-Symbol rechts neben dem Menü. */
.pp-kopf .pp-brief a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--pp-tinte);
  text-decoration: none;
}

.pp-kopf .pp-brief a:hover {
  color: var(--pp-gruen);
}

/* ==========================================================================
   3. Navigation
   13 px, halbfett, schwarz. Untermenüs als weiße Klappe mit schmalem Rand.
   ========================================================================== */

.pp-kopf .wp-block-navigation {
  --navigation-layout-align: center;
}

.pp-kopf .wp-block-navigation .wp-block-navigation-item__content {
  padding: 0 12px;
}

/* Untermenü */
.pp-kopf .wp-block-navigation .wp-block-navigation__submenu-container {
  background: #fff;
  border: 1px solid var(--pp-linie);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  min-width: 260px;
  padding: 6px 0;
}

.pp-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 8px 15px;
  font-weight: 400;
  line-height: 1.35;
}

.pp-kopf .wp-block-navigation__submenu-container li:hover > .wp-block-navigation-item__content {
  background: var(--pp-flaeche);
  color: var(--pp-gruen);
}

/* Aktuelle Seite kennzeichnen - das fehlt heute völlig. */
.pp-kopf .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.pp-kopf .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
  color: var(--pp-gruen);
  box-shadow: inset 0 -2px 0 var(--pp-olive);
}

/* Ab Tablet abwärts das Klappmenü, so wie heute (av_mobile_menu_tablet). */
@media (max-width: 989px) {
  .pp-kopf .wp-block-navigation__responsive-container-open {
    display: flex;
  }
}

.wp-block-navigation__responsive-container.is-menu-open {
  padding: 24px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 18px;
  font-weight: 500;
}

/* ==========================================================================
   4. Inhaltsbereich
   Enfold setzt 50 px über und unter den Inhalt. Das bilden wir nach,
   damit die Seiten nicht am Kopfbereich kleben.
   ========================================================================== */

.pp-inhalt {
  padding-top: var(--pp-band);
  padding-bottom: var(--pp-band);
}

/* Der erste Block einer Seite braucht keinen zusätzlichen Abstand oben. */
.pp-inhalt > .wp-block-post-content > *:first-child {
  margin-top: 0;
}

/* Ein Kopfbild in voller Breite sitzt bündig unter dem Kopfbereich. */
.pp-inhalt > .wp-block-post-content > .alignfull:first-child {
  margin-top: calc(-1 * var(--pp-band));
}

/* Bilder, die es in zwei Zuschnitten gibt - ein breiter fürs Fenster, ein
   hoher fürs Handy. Auf der Startseite ist das Empfangsfoto so gebaut.
   Entspricht av-desktop-hide / av-medium-hide aus Enfold. */
.pp-nur-gross { display: none; }

@media (min-width: 990px) {
  .pp-nur-gross { display: block; }
  .pp-nur-klein { display: none; }
}

/* Zwei Textspalten: auf schmalen Geräten untereinander mit Luft dazwischen. */
@media (max-width: 781px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:first-child) {
    margin-top: 30px;
  }
}

/* Listen: Enfold gibt jedem Punkt 3 px Luft. */
.wp-block-post-content li {
  padding: 3px 0;
}

/* ==========================================================================
   5. Fußbereich
   Praxisgrün, vier Spalten, lindgrüner Text. Links ohne Unterstrich,
   aber mit Unterstrich beim Überfahren - sonst sind sie nicht erkennbar.
   ========================================================================== */

.pp-fuss {
  background: var(--pp-gruen);
  color: var(--pp-lind);
  padding-top: 45px;
  padding-bottom: 45px;
}

.pp-fuss :where(p, li, h2, h3, h4) {
  color: var(--pp-lind);
}

.pp-fuss a {
  color: var(--pp-lind);
  text-decoration: none;
}

.pp-fuss a:hover {
  text-decoration: underline;
}

.pp-fuss h3 {
  color: #fff;
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 10px;
}

/* ==========================================================================
   6. Blockstile
   Wählbar in der Seitenleiste unter "Stile", statt Klassen zu tippen.
   Angemeldet in inc/blockstile.php.
   ========================================================================== */

/* Dachzeile - die kleine Zeile über einer Überschrift. */
.is-style-pp-dachzeile {
  font-family: var(--wp--preset--font-family--raleway);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pp-olive-tief);
  margin-bottom: 4px;
}

/* Untertitel - der zweite, hellere Satz unter einer Überschrift. */
.is-style-pp-untertitel {
  font-size: 20px;
  line-height: 1.45;
  color: var(--pp-gruen);
}

/* Hinweiskasten, hell. */
.is-style-pp-kasten {
  background: var(--pp-flaeche);
  border-left: 4px solid var(--pp-lind);
  padding: 22px 26px;
}

/* Notfallkasten - derselbe Bau, aber deutlich. Für die Notfall-Seite und
   überall dort, wo eine Nummer sofort ins Auge springen muss. */
.is-style-pp-notfall {
  background: #fdf6e8;
  border-left: 4px solid #c07a00;
  padding: 22px 26px;
}

.is-style-pp-notfall strong {
  color: #8a5600;
}

/* Bandfarben für Gruppen. */
.is-style-pp-band-hell { background: var(--pp-flaeche); }
.is-style-pp-band-weiss { background: #fff; }

.is-style-pp-band-gruen {
  background: var(--pp-gruen);
  color: var(--pp-lind);
}

.is-style-pp-band-gruen :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
.is-style-pp-band-gruen a { color: var(--pp-lind); }

:where(.is-style-pp-band-hell, .is-style-pp-band-weiss, .is-style-pp-band-gruen) {
  padding-top: var(--pp-band);
  padding-bottom: var(--pp-band);
}

/* ==========================================================================
   7. Aufklapper
   Ersetzt Enfolds Toggle. Der Details-Block bringt die Mechanik mit,
   hier kommt nur das Aussehen dazu.
   ========================================================================== */

.wp-block-details {
  border-bottom: 1px solid var(--pp-linie);
  padding: 14px 0;
}

.wp-block-details summary {
  font-family: var(--wp--preset--font-family--heebo);
  font-size: 18px;
  font-weight: 500;
  color: var(--pp-gruen);
  cursor: pointer;
  list-style: none;
  padding-right: 30px;
  position: relative;
}

.wp-block-details summary::-webkit-details-marker { display: none; }

.wp-block-details summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 0.45em;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--pp-gruen);
  border-bottom: 2px solid var(--pp-gruen);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.wp-block-details[open] summary::after {
  transform: rotate(-135deg);
  top: 0.7em;
}

.wp-block-details > *:not(summary) {
  margin-top: 12px;
}

/* ==========================================================================
   8. Beitragslisten
   Blog, Videos, Jour Fixe. Bild oben, Titel, Anrisstext, Datum.
   ========================================================================== */

.pp-beitraege .wp-block-post-title {
  font-size: 20px;
  line-height: 1.25;
  margin: 14px 0 6px;
}

.pp-beitraege .wp-block-post-title a { text-decoration: none; }
.pp-beitraege .wp-block-post-title a:hover { text-decoration: underline; }

.pp-beitraege .wp-block-post-date {
  font-size: 14px;
  color: #6b6b6b;
}

.pp-beitraege .wp-block-post-featured-image img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

/* ==========================================================================
   9. Kontaktformular
   Eigenes Formular aus inc/kontaktformular.php. Ersetzt Contact Form 7 -
   und damit auch dessen Spamschutz, der jede Anfrage an Akismet in die USA
   weitergereicht hat.
   ========================================================================== */

.pp-formular {
  max-width: 640px;
}

.pp-feld {
  margin: 0 0 18px;
}

.pp-feld label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 15px;
  color: var(--pp-gruen);
}

.pp-feld .pp-klein {
  font-weight: 400;
  color: var(--pp-tinte);
}

.pp-feld input[type="text"],
.pp-feld input[type="email"],
.pp-feld textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--pp-linie);
  background: var(--pp-flaeche);
  border-radius: 3px;
  font-family: var(--wp--preset--font-family--raleway);
  font-size: 16px;
  line-height: 1.5;
  color: var(--pp-tinte);
}

.pp-feld input:focus,
.pp-feld textarea:focus {
  border-color: var(--pp-gruen);
  background: #fff;
  outline: 2px solid var(--pp-gruen);
  outline-offset: 1px;
}

/* Einverständnis: Haken und Text nebeneinander, Text nicht fett. */
.pp-feld--haken {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pp-feld--haken input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex: none;
}

.pp-feld--haken label {
  font-weight: 400;
  color: var(--pp-tinte);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

.pp-formular-hinweis {
  font-size: 14px;
  color: #5c5c5c;
  margin: 0 0 18px;
}

/* Der Honigtopf muss für Menschen unsichtbar sein, für Bots aber im Markup
   stehen - deshalb nicht display:none, das durchschauen manche. */
.pp-honigtopf {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pp-meldung {
  padding: 16px 20px;
  margin-bottom: 24px;
  border-left: 4px solid;
  border-radius: 3px;
}

.pp-meldung:focus {
  outline: 2px solid var(--pp-gruen);
  outline-offset: 2px;
}

.pp-meldung p { margin: 0 0 6px; }
.pp-meldung ul { margin: 6px 0 0 20px; }
.pp-meldung li { padding: 2px 0; }

.pp-meldung--gut {
  background: #eef5ee;
  border-color: var(--pp-logogruen);
}

.pp-meldung--fehler {
  background: #fdf3f1;
  border-color: #b23b2a;
}

/* ==========================================================================
   10. Editor
   Damit die Redaktion im Editor dasselbe sieht wie auf der Seite.
   ========================================================================== */

.editor-styles-wrapper .pp-fuss a { color: var(--pp-lind); }

.editor-styles-wrapper .pp-kopf {
  position: static;
  box-shadow: none;
}

/* ==========================================================================
   11. Druck
   Menü, Fußbereich und Aufklapp-Pfeile weg, alles aufgeklappt.
   Patientinnen und Patienten drucken solche Seiten tatsächlich aus.
   ========================================================================== */

@media print {
  .pp-kopf,
  .pp-fuss,
  .wp-block-navigation { display: none !important; }

  .wp-block-details > *:not(summary) { display: block !important; }
  .wp-block-details summary::after { display: none; }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 11px;
    word-break: break-all;
  }

  body { font-size: 11pt; }
}