/*
Theme Name: Keks und Kaffee
Theme URI: https://keksundkaffee.de
Author: Martin
Description: Ein frisches, luftiges FSE-Theme für ein Buchblog. Keine Sidebar, keine Zusatzfelder: der Beitragstitel ist der Buchtitel, alles Weitere steht im Text. Abstände auf 8-px-Raster, Zeilenhöhen als Vielfache von 8 px. Schriften sind selbst gehostet.
Version: 0.4.1
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: keks-und-kaffee
*/

/* ------------------------------------------------------------------
   Raster
   Abstände: 8 · 16 · 24 · 32 · 48 · 64 · 96 px (0,5 · 1 · 1,5 · 2 · 3 · 4 · 6 rem)
   Zeilenhöhen: 24 · 32 · 40 · 48 · 64 px
   Layout: Inhalt 640 px, breit 1088 px, Spaltenabstand 32 px
   Bilder: Karten 3:2 (528 × 352), Aufmacher 2:1 (1088 × 544)
------------------------------------------------------------------- */
:root{
  --kk-gap:2rem;            /* Spaltenabstand */
  --kk-row:4rem;            /* Zeilenabstand im Raster */
  --kk-band:4rem;           /* Innenabstand der Titelzone */
  --kk-main-top:4rem;
  --kk-main-bottom:6rem;
  --kk-footer:4rem;
  --kk-radius:4px;
  /* Titelgrößen, Stufe 1: mobil (< 782 px) */
  --kk-xxl:2rem;   --kk-xxl-lh:2.5rem;   /* 32/40 */
  --kk-xl:2rem;    --kk-xl-lh:2.5rem;    /* 32/40 */
  --kk-l:1.5rem;   --kk-l-lh:2rem;       /* 24/32 */
}
/* Stufe 2: Tablet (782–1023 px) */
@media (min-width:782px){
  :root{
    --kk-xxl:2.5rem; --kk-xxl-lh:3rem;   /* 40/48 */
    --kk-xl:2.5rem;  --kk-xl-lh:3rem;    /* 40/48 */
    --kk-l:2rem;     --kk-l-lh:2.5rem;   /* 32/40 */
  }
}
/* Stufe 3: Desktop (ab 1024 px) */
@media (min-width:1024px){
  :root{ --kk-xxl:3.5rem; --kk-xxl-lh:4rem; }   /* 56/64 */
}
@media (max-width:781px){
  :root{ --kk-row:3rem; --kk-band:3rem; --kk-main-top:3rem; --kk-main-bottom:4rem; --kk-footer:3rem; }
}

body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.wp-site-blocks{ min-height:100vh; display:flex; flex-direction:column; }
/* Block-CSS setzt 2rem Abstand über jedes Hauptelement (:where(.wp-site-blocks) > *): hier abschalten, Abstände regelt das Raster */
.wp-site-blocks > *{ margin-block:0; }
.wp-site-blocks > main{ flex:1 0 auto; }
:where(a,button,input,textarea,summary):focus-visible{ outline:2px solid var(--wp--preset--color--ziegel); outline-offset:2px; }
h1,h2,h3,h4,.wp-block-post-title{ text-wrap:balance; overflow-wrap:break-word; hyphens:auto; }
:where(.wp-site-blocks) :where(h1,h2,h3,h4,.wp-block-post-title){ margin-block:0; }

/* Kopfzeile: 80 px hoch (24 + 32 + 24) */
.kk-header{ background:var(--wp--preset--color--rosenhauch); border-bottom:1px solid var(--wp--preset--color--linie); }
.kk-header > .alignwide{ padding-block:1.5rem; }
.kk-header .wp-block-site-title{ margin:0; }
.kk-header .wp-block-navigation{ min-height:2rem; }

/* Titelzone (Startseite, Beitrag, Seite, Archiv) */
.kk-band{ background:var(--wp--preset--color--rosenhauch); border-bottom:1px solid var(--wp--preset--color--linie); padding-block:var(--kk-band); }
.kk-band > * + *{ margin-block-start:1rem; }
.kk-band .wp-block-post-date{ margin-block-end:0; }
.kk-page-title{ font-size:var(--kk-xl); line-height:var(--kk-xl-lh); margin:0; }
.kk-intro{ font-size:var(--kk-xxl); line-height:var(--kk-xxl-lh); font-weight:300; letter-spacing:-0.015em; max-width:20em; margin:0; text-wrap:balance; }

/* Hauptbereich */
.kk-main{ padding-top:var(--kk-main-top); padding-bottom:var(--kk-main-bottom); }
.kk-main > * + *{ margin-block-start:var(--kk-row); }

/* Raster und Karten */
.kk-grid .wp-block-post-template.is-layout-grid{ gap:var(--kk-row) var(--kk-gap); padding:0; }
.kk-card > *{ margin-block:0; }
.kk-card .wp-block-post-featured-image{ margin:0 0 1rem; }
.kk-card .wp-block-post-featured-image img{ width:100%; height:100%; object-fit:cover; border-radius:var(--kk-radius); display:block; }
.kk-card .wp-block-post-date{ margin:0 0 0.5rem; }
.kk-card-title{ font-size:1.5rem; line-height:2rem; margin:0 0 1rem; }
.kk-excerpt{ margin:0; color:var(--wp--preset--color--grau); font-size:1rem; line-height:1.5rem; hyphens:auto; }
.kk-excerpt p{ margin:0; }

/* Aufmacher: neuester Beitrag auf Seite 1 der Startseite */
@media (min-width:782px){
  body:is(.home,.blog):not(.paged) .kk-grid .wp-block-post-template > li:first-child{ grid-column:1 / -1; }
  body:is(.home,.blog):not(.paged) .kk-grid li:first-child .kk-card{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--kk-gap); align-items:start; }
  body:is(.home,.blog):not(.paged) .kk-grid li:first-child .wp-block-post-featured-image{ grid-column:1 / -1; margin-bottom:2rem; }
  body:is(.home,.blog):not(.paged) .kk-grid li:first-child .wp-block-post-featured-image img{ aspect-ratio:2 / 1 !important; }
  body:is(.home,.blog):not(.paged) .kk-grid li:first-child .wp-block-post-date{ grid-column:1; grid-row:2; }
  body:is(.home,.blog):not(.paged) .kk-grid li:first-child .kk-card-title{ grid-column:1; grid-row:3; font-size:var(--kk-xxl); line-height:var(--kk-xxl-lh); margin-bottom:0; }
  body:is(.home,.blog):not(.paged) .kk-grid li:first-child .kk-excerpt{ grid-column:2; grid-row:2 / 4; font-size:1.25rem; line-height:2rem; }
}
@media (max-width:781px){
  .kk-grid .wp-block-post-template.is-layout-grid{ grid-template-columns:1fr; }
}

/* Seitennavigation */
.wp-block-query-pagination{ margin-top:var(--kk-row); gap:1.5rem; align-items:center; }
.wp-block-query-pagination-numbers{ display:flex; gap:1rem; }
.wp-block-query-pagination a{ text-underline-offset:0.25em; }
.wp-block-query-pagination .page-numbers.current{ font-weight:600; text-decoration:none; color:var(--wp--preset--color--druckschwarz); }

/* Einzelbeitrag */
.kk-single-image{ margin-block:0 !important; }
.kk-single-image img{ width:100%; height:auto; border-radius:var(--kk-radius); display:block; }
.kk-single-image + .kk-content{ margin-block-start:var(--kk-row); }
.kk-content{ hyphens:auto; }
.kk-content > *{ margin-block:0; }
.kk-content > * + *{ margin-block-start:1.5rem; }
.kk-content h2{ font-size:var(--kk-l); line-height:var(--kk-l-lh); margin-block-start:3rem; }
.kk-content h3{ font-size:1.5rem; line-height:2rem; margin-block-start:2rem; }
.kk-content h2 + *, .kk-content h3 + *{ margin-block-start:1rem; }
.kk-content a{ text-underline-offset:0.25em; text-decoration-thickness:1px; }
.kk-content a:hover{ text-decoration-thickness:2px; }
.kk-postnav{ border-top:1px solid var(--wp--preset--color--linie); padding-top:1.5rem; gap:2rem; font-family:var(--wp--preset--font-family--sans); font-size:1rem; line-height:1.5rem; }
.kk-postnav a{ text-underline-offset:0.25em; }
.kk-postnav .post-navigation-link-next{ text-align:right; margin-left:auto; }

/* Kommentare
   Titel -> 32 px -> Liste. Trennlinien nur ZWISCHEN Kommentaren, nicht über dem ersten.
   Innerhalb eines Kommentars: Kopfzeile -> 8 px -> Text -> 16 px -> Antworten. */
.wp-block-comments-title{ margin:0 0 2rem; }
.wp-block-comment-template{ padding:0; margin:0; list-style:none; }
.wp-block-comment-template li{ margin:0; padding:0; }
.wp-block-comment-template li + li,
.wp-block-comment-template li > ol > li:first-child{ margin-top:2rem; padding-top:2rem; border-top:1px solid var(--wp--preset--color--linie); }
.wp-block-comment-template li > ol{ padding:0; margin:2rem 0 0 1.5rem; list-style:none; }
.kk-comment-meta{ gap:0 1rem; margin:0 0 0.5rem; font-family:var(--wp--preset--font-family--sans); font-size:0.875rem; line-height:1.5rem; color:var(--wp--preset--color--grau); }
.kk-comment-meta .wp-block-comment-author-name{ font-weight:600; color:var(--wp--preset--color--druckschwarz); }
.wp-block-comment-content{ font-size:1.125rem; line-height:1.75rem; margin:0 0 1rem; }
.wp-block-comment-content p{ margin:0 0 0.5rem; }
.wp-block-comment-content p:last-child{ margin-bottom:0; }
.wp-block-comment-reply-link{ margin:0; font-family:var(--wp--preset--font-family--sans); font-size:0.875rem; line-height:1.5rem; }
.wp-block-comments-pagination{ margin-top:2rem; font-family:var(--wp--preset--font-family--sans); font-size:1rem; line-height:1.5rem; }
.wp-block-post-comments-form{ margin-top:var(--kk-row); }
.comment-reply-title{ font-size:1.5rem; line-height:2rem; margin:0 0 1.5rem; }
.wp-block-post-comments-form form > *{ margin-block:0 1rem; }
.wp-block-post-comments-form label{ display:block; font-family:var(--wp--preset--font-family--sans); font-size:0.875rem; line-height:1.5rem; margin-bottom:0.25rem; }
.wp-block-post-comments-form textarea,
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"]{
  width:100%; box-sizing:border-box; padding:0.75rem 1rem; font:inherit; font-size:1rem; line-height:1.5rem;
  color:inherit; background:var(--wp--preset--color--papier); border:1px solid var(--wp--preset--color--rand); border-radius:var(--kk-radius); }
.wp-block-post-comments-form .comment-form-cookies-consent{ display:flex; gap:0.75rem; align-items:flex-start; font-size:0.875rem; line-height:1.5rem; }
.wp-block-post-comments-form .comment-form-cookies-consent input{ margin-top:0.25rem; }
.wp-block-post-comments-form .form-submit{ margin-bottom:0; }

/* Suche */
.wp-block-search__inside-wrapper{ gap:1rem; }
.wp-block-search__input{ padding:0.75rem 1rem; font:inherit; font-size:1rem; line-height:1.5rem; background:var(--wp--preset--color--papier); border:1px solid var(--wp--preset--color--rand); border-radius:999px; }

/* Cover-Wand ("Alle Bücher"): nur Bilder, ganze Kachel verlinkt.
   Spalten: 2 (mobil) · 3 (ab 600 px) · 4 (ab 1024 px); Abstand 16 · 24 · 32 px.
   Der Titel liegt als Overlay über dem Bild (Hover/Fokus), bleibt für Screenreader immer lesbar. */
.kk-wall .wp-block-post-template.is-layout-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; padding:0; }
@media (min-width:600px){ .kk-wall .wp-block-post-template.is-layout-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.5rem; } }
@media (min-width:1024px){ .kk-wall .wp-block-post-template.is-layout-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:2rem; } }
.kk-cover{ position:relative; overflow:hidden; border-radius:var(--kk-radius); background:var(--wp--preset--color--rosenhauch); }
.kk-cover > *{ margin:0; }
.kk-cover .wp-block-post-featured-image{ margin:0; }
.kk-cover .wp-block-post-featured-image img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; transition:transform 0.4s ease; }
.kk-cover:hover .wp-block-post-featured-image img,
.kk-cover:focus-within .wp-block-post-featured-image img{ transform:scale(1.03); }
.kk-cover-title{ position:absolute; inset:0; margin:0; display:flex; align-items:flex-end; font-size:1rem; line-height:1.5rem; font-weight:400; letter-spacing:0; opacity:0; transition:opacity 0.2s ease;
  background:linear-gradient(to top, rgba(18,18,16,0.85), rgba(18,18,16,0) 65%); }
.kk-cover .kk-cover-title a,
.kk-cover .kk-cover-title a:hover,
.kk-cover .kk-cover-title a:focus{ position:static; display:block; padding:1rem; color:#fff; text-decoration:none; }
.kk-cover-title a::after{ content:""; position:absolute; inset:0; }
.kk-cover:hover .kk-cover-title,
.kk-cover:focus-within .kk-cover-title{ opacity:1; }
.kk-cover-title a:focus-visible{ outline:2px solid #fff; outline-offset:-4px; }

/* Fußzeile */
.kk-footer{ background:var(--wp--preset--color--schiefer); color:#F3EEEC; margin-top:0; padding-block:var(--kk-footer); font-family:var(--wp--preset--font-family--sans); font-size:1rem; line-height:1.5rem; }
.kk-footer > * + *{ margin-block-start:1rem; }
.kk-footer a{ color:inherit; text-decoration:none; }
.kk-footer a:hover{ text-decoration:underline; text-underline-offset:0.25em; }
.kk-footer .wp-block-site-title{ margin:0; font-family:var(--wp--preset--font-family--serif); }
.kk-footer .wp-block-site-tagline{ margin:0; color:#B5BDBC; font-size:0.875rem; line-height:1.5rem; }
.kk-footer :focus-visible{ outline-color:#F3EEEC; }
/* leerer Untertitel-Container (wenn in WordPress kein Untertitel gesetzt ist): kein Abstand */
.kk-footer > .wp-block-group:not(:has(*)){ display:none; }
@media (max-width:781px){
  .kk-footer .wp-block-site-title{ font-size:1.25rem; line-height:2rem; }
  .kk-footer .wp-block-navigation{ font-size:0.875rem; }
}

/* Dunkler Modus
   Folgt der Einstellung des Geräts (prefers-color-scheme), kein Skript nötig.
   Die Palette aus theme.json wird nur umbelegt; alle Komponenten nutzen ohnehin Variablen.
   Der Editor bleibt hell (Ausnahme über .editor-styles-wrapper).
   Kontraste: Text 14,5:1, Grau 7,0:1, Akzent 7,0:1, Eingabefeld-Rand 4,7:1. */
:root{ color-scheme:light dark; }
@media (prefers-color-scheme:dark){
  html body:not(.editor-styles-wrapper){
    --wp--preset--color--papier:#151818;
    --wp--preset--color--rosenhauch:#1E1B1B;
    --wp--preset--color--linie:#342E2D;
    --wp--preset--color--rand:#8A8280;
    --wp--preset--color--druckschwarz:#EDE6E3;
    --wp--preset--color--grau:#A8A09D;
    --wp--preset--color--ziegel:#E8877F;
    --wp--preset--color--ziegel-dunkel:#F2A8A2;
    --wp--preset--color--schiefer:#0E1111;
  }
  /* Fotos leicht zurücknehmen, damit helle Cover nicht blenden */
  body:not(.editor-styles-wrapper) .wp-block-post-featured-image img{ filter:brightness(0.92); }
}

@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; } }