/*
Theme Name: Ostseebienen Classical
Theme URI: https://ostseebienen.de/
Author: Fabian Schmidt
Description: Editoriales Block-Theme für Ostseebienen — Cormorant Garamond über Lora, Gold als Strich statt Fläche, Fotos matt gerahmt. Farben, Typografie und Abstände kommen aus theme.json; hier steht nur, was theme.json nicht ausdrücken kann.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
Version: 0.6.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ostseebienen-classical
Tags: full-site-editing, block-patterns, e-commerce, one-column
*/

/* Alles Token-artige gehört in theme.json. Hier nur Dinge, für die es dort
   keine Entsprechung gibt: die Bildplatte, Blocksatz und ein paar Details des
   Systems, die WordPress nicht als Setting kennt. */

/* — Die Platte: Foto matt gerahmt wie eine eingeklebte Buchtafel. — */
.ob-plate img,
figure.ob-plate img {
  filter: sepia(0.22) saturate(0.82) contrast(1.05);
  box-sizing: border-box;
  border: 6px solid var(--wp--preset--color--surface);
  outline: 1px solid var(--wp--custom--color--divider);
}

/* — Blocksatz für längere Fließtextpassagen. Bewusst opt-in per Klasse,
     nicht global: Blocksatz in schmalen Spalten reißt Löcher. — */
.ob-justify p {
  text-align: justify;
  hyphens: auto;
}

/* — Haarlinie zwischen Abschnitten. — */
.ob-rule {
  height: 1px;
  border: 0;
  background: var(--wp--custom--color--divider);
}

/* — Der sekundäre Button —
     Core gibt is-style-outline einen 2px-Rahmen in der Textfarbe. Das
     Design-System will an dieser Stelle die graue Haarlinie (.btn-secondary):
     der Akzent gehört dem primären Button, sonst konkurrieren beide. — */
.wp-block-button.is-style-outline > .wp-block-button__link {
  border: 1px solid var(--wp--custom--color--divider);
  color: var(--wp--preset--color--text);
  background-color: transparent;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--neutral-500);
  background-color: var(--wp--preset--color--neutral-200);
  color: var(--wp--preset--color--text);
}

/* — Der Kicker: die kleine Versalzeile über einer Überschrift.
     Das Design-System gibt dafür h6 vor. Als echtes <h6> über einem <h1>
     zerschießt das aber die Gliederung, die Screenreader vorlesen — darum
     eine Klasse auf einem Absatz statt einer Überschriftenebene. — */
.ob-kicker {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--kicker);
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--accent-700);
  font-variant-numeric: tabular-nums;
}

/* — Die Schrittziffern in "Vom Volk ins Glas". Groß, licht, in Gold —
     als Zahl gesetzt, also tabellarisch. — */
.ob-numeral {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 400;
  line-height: 1;
  color: var(--wp--preset--color--accent);
  font-variant-numeric: tabular-nums;
}

/* — Die Linklisten im Fußbereich: Aufzählungspunkte weg, die Struktur
     tragen hier die Kicker-Überschriften. Die Zeilenabstände sind bewusst
     großzügig — am Telefon sind das Tippziele, keine Fließtextzeilen. — */
.ob-footer-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.ob-footer-list li {
  margin-bottom: var(--wp--preset--spacing--20);
}

.ob-footer-list a {
  display: inline-block;
  padding-block: var(--wp--preset--spacing--10);
}

/* — Das Menü am Telefon —
     Core öffnet das Overlay auf Weiß und drängt die Einträge nach rechts oben.
     Beides passt nicht: der Grund dieses Systems ist ein warmes Papierweiß,
     und ein halbleerer Bildschirm mit fünf gedrängten Zeilen in der Ecke liest
     sich wie ein Versehen. — */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--wp--preset--spacing--50);
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: var(--wp--preset--spacing--60);
}

/* Die Desktop-Navigation ist rechtsbündig; die Klasse items-justified-right
   bleibt im Overlay stehen und setzt dort align-items: flex-end — im
   Spaltenfluss heißt das rechtsbündig. Eine Liste von Zielen liest sich
   linksbündig besser, also die Klassenkombination gezielt überschreiben. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container.items-justified-right {
  width: 100%;
  gap: var(--wp--preset--spacing--30);
  justify-content: flex-start;
  align-items: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--x-large);
  padding-block: var(--wp--preset--spacing--10);
}

/* — Die Preiszeile unter einer Sorte: Gewicht und Preis auf einer Linie. — */
.ob-preis {
  font-family: var(--wp--preset--font-family--heading);
  font-variant-numeric: tabular-nums;
  color: var(--wp--custom--color--muted);
}

/* Der Grundpreis je Kilo ist Pflichtangabe, aber nicht die Hauptsache —
   also eine Spur kleiner als der Verkaufspreis, in derselben Zeile. */
.ob-grundpreis {
  font-size: var(--wp--preset--font-size--small);
}

/* Der Versandkostenhinweis am Preis: Pflichtangabe, aber Beiwerk. Er soll
   lesbar sein, ohne dem Preis die Aufmerksamkeit zu nehmen. */
.ob-versandhinweis {
  display: block;
  margin-top: var(--wp--preset--spacing--10);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--custom--color--muted);
}

/* — Die drei Sorten —
     Jede Spalte endet mit einem Button. Die Beschreibungen sind unterschiedlich
     lang, also stehen die Buttons sonst auf drei Höhen und die Reihe franst
     unten aus. Spalte als Flex-Säule, Buttons ans Ende. — */
.ob-sorten > .wp-block-column {
  display: flex;
  flex-direction: column;
}

.ob-sorten > .wp-block-column > .wp-block-buttons {
  margin-top: auto;
  padding-top: var(--wp--preset--spacing--30);
}

/* Die Fotos der Sorten sind unterschiedlich geschnitten — eines hochkant, zwei
   quadratisch. Ohne einheitliches Format stehen die drei Spalten versetzt.
   Bewusst hier statt als Block-Attribut: nur so lässt sich das Format am
   Telefon ändern, und genau das ist weiter unten nötig. */
.ob-sorten .wp-block-image img,
.ob-prozess .wp-block-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.ob-prozess .wp-block-image img {
  aspect-ratio: 1 / 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   Am Telefon
   WordPress stapelt Spalten unterhalb von 782px. Jede Karte bekommt dann die
   volle Breite — und mit ihr ein Bild von 400px Höhe. Gemessen kamen so 6722px
   Seitenlänge zusammen, 8,3 Bildschirme, davon 42% Bildfläche. Das ist mehr
   Scrollen, als die Seite an Inhalt hergibt.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 781px) {

  /* Hochformat bei voller Breite drückt den Text aus dem Bild. Quer geschnitten
     bleibt das Motiv erkennbar und kostet halb so viel Höhe. */
  .ob-sorten .wp-block-image img,
  .ob-plate img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  /* Die drei Arbeitsschritte als Querzeilen: Bild links, Ziffer und Text
     rechts. Gestapelt kostet jeder Schritt rund 590px — als Zeile 180px. */
  .ob-prozess > .wp-block-column {
    display: grid;
    grid-template-columns: 88px 1fr;
    column-gap: var(--wp--preset--spacing--30);
    align-items: start;
  }

  .ob-prozess > .wp-block-column > figure {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin-bottom: 0;
  }

  .ob-prozess > .wp-block-column > :not(figure) {
    grid-column: 2;
  }

  .ob-prozess .wp-block-image img {
    aspect-ratio: 1 / 1;
  }

  /* Die Ziffer trägt in der Zeile keine Struktur mehr — der Umbruch tut das.
     Also zurücknehmen, statt sie gegen die Überschrift antreten zu lassen. */
  .ob-prozess .ob-numeral {
    font-size: var(--wp--preset--font-size--large);
    margin-bottom: var(--wp--preset--spacing--10);
  }
}

/* — Tastaturfokus themen, nie den blauen Browser-Ring stehen lassen. — */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}
::selection {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
}

/* — WooCommerce, Block-Templates —
     Auf einem Block-Theme rendert WooCommerce ab Version 8 den Shop über
     Blöcke, nicht über die klassischen PHP-Templates. Die Buttons erben aus
     theme.json zwar Farbe, Schrift und Innenabstand, aber wc-blocks.css setzt
     border-width auf 0 — der Umriss, der dieses System ausmacht, verschwindet.
     Hier wird er zurückgeholt; die Selektoren sind gerade spezifisch genug,
     um das Block-Stylesheet zu schlagen, ohne !important. — */
.wp-block-button.wc-block-components-product-button
  .wc-block-components-product-button__button.wp-element-button {
  background-color: transparent;
  color: var(--wp--preset--color--accent-700);
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--radius--md);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
}

.wp-block-button.wc-block-components-product-button
  .wc-block-components-product-button__button.wp-element-button:hover {
  background-color: var(--wp--preset--color--accent-100);
  color: var(--wp--preset--color--accent-800);
  border-color: var(--wp--preset--color--accent-600);
}

/* Die übrigen Block-Buttons (Warenkorb-Widget, Filter) tragen die Regel
   ohne den Produkt-Wrapper — hier reicht die niedrigere Spezifität. */
.wc-block-components-button:not(.is-link) {
  background-color: transparent;
  color: var(--wp--preset--color--accent-700);
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--radius--md);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
}

.wc-block-components-button:not(.is-link):hover {
  background-color: var(--wp--preset--color--accent-100);
  color: var(--wp--preset--color--accent-800);
  border-color: var(--wp--preset--color--accent-600);
}

/* — WooCommerce, klassische Templates —
     Warenkorb und Kasse laufen weiterhin über die klassischen Shortcodes,
     solange die Block-Kasse nicht übernommen ist. Dort greifen diese Regeln. — */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: transparent;
  color: var(--wp--preset--color--accent-700);
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--radius--md);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  text-transform: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--wp--preset--color--accent-100);
  color: var(--wp--preset--color--accent-800);
}

/* Der Kaufen-Button darf sich abheben — aber weiterhin als Umriss, kräftiger,
   nicht als Farbfläche. */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt {
  border-width: 2px;
}

/* — Die Kopfzeile der Shop-Übersicht —
     Ergebniszahl links, Sortierung rechts. Der Block-Container bricht nicht um:
     am Telefon ist das Auswahlfeld breiter als der Platz, schiebt sich über den
     Rand und presst die Ergebniszahl in eine vierzeilige Spalte. Also umbrechen
     lassen und dem Feld erlauben, die volle Breite zu nehmen. — */
.wp-block-group.is-content-justification-space-between:has(.wc-block-catalog-sorting) {
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
}

.wc-block-catalog-sorting,
.woocommerce-ordering {
  max-width: 100%;
}

/* Das Auswahlfeld selbst kommt als nacktes Betriebssystem-Element daher —
   weißer Grund, blaue Fokusfarbe. Auf die Haarlinien-Optik ziehen. */
.wc-block-catalog-sorting select,
.woocommerce-ordering select {
  max-width: 100%;
  background-color: transparent;
  color: var(--wp--preset--color--text);
  border: 1px solid var(--wp--custom--color--divider);
  border-radius: var(--wp--custom--radius--md);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

/* Preis und Grundpreis stehen als Ziffern, also tabellarisch — sonst setzt
   Lora sie als Mediävalziffern, die in einer Preisspalte springen.
   Gilt für beide Welten: Block-Templates und klassische Templates. */
.wc-block-components-product-price,
.wc-block-formatted-money-amount,
.woocommerce .price,
.woocommerce .amount {
  font-family: var(--wp--preset--font-family--heading);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}