/*
Theme Name: gehirnfrost
Theme URI: https://gehirnfrost.com
Description: Custom "Sticker Shelf" theme for gehirnfrost.com -- personal recipes/coffee/IT-admin notebook. Replaces Divi.
Author: Tobi
Version: 1.0
Text Domain: gehirnfrost
*/

:root {
  --ss-ink: #161616;
  --ss-ground: #fdfcf8;
  --ss-brand: #ff3d8f;
  --ss-muted: #4a4a45;
  /* For elements whose own fill color never themes (the brand-pink
     hero tag, any category-accent chip/badge) -- their outline
     shouldn't theme either, or a light dark-mode ink would render
     nearly invisible against them. Never redefine this in dark mode. */
  --ss-ink-fixed: #161616;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background-color: var(--ss-ground);
  background-image: radial-gradient(#16161614 1.4px, transparent 1.4px);
  background-size: 16px 16px;
  color: var(--ss-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.7;
}

h1, h2, h3, h4, h5 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}

a { color: inherit; }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- shared header / nav shelf ---------- */
.ss-header {
  background-color: var(--ss-ground);
  position: relative;
  /* Right padding clears the fixed dark-mode toggle circle (mu-plugin
     gehirnfrost-dark-mode.php: top:24px; right:30px; width:64px), which
     sits outside normal document flow and otherwise overlaps whatever
     nav content is flush right -- independent of how many nav items
     there are. */
  padding: 12px 110px 12px 24px;
}
.ss-nav ul {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}
.ss-nav ul li a {
  display: inline-block;
  background: #fff;
  border: 3px solid var(--ss-ink);
  border-radius: 0 0 7px 7px;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 3px 3px 0 var(--ss-ink);
  text-decoration: none;
  color: var(--ss-ink);
}
.ss-nav ul li:nth-child(odd) a { transform: rotate(-1.5deg); }
.ss-nav ul li:nth-child(even) a { transform: rotate(1.5deg); }
.ss-nav ul li.current-menu-item a,
.ss-nav ul li.current-menu-parent a,
.ss-nav ul li.current-menu-ancestor a {
  background: var(--ss-ink);
  color: #fff;
  position: relative;
}
.ss-nav ul li.current-menu-item a::before,
.ss-nav ul li.current-menu-parent a::before,
.ss-nav ul li.current-menu-ancestor a::before {
  content: "";
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ss-brand);
}

/* ---------- shared footer ---------- */
.ss-footer {
  background-color: var(--ss-ink);
  color: var(--ss-ground);
  padding: 20px 24px;
}
.ss-footer, .ss-footer a { color: var(--ss-ground); }
.ss-footer a { color: var(--ss-brand); }

/* ---------- title band (single post) ---------- */
.ss-title-band {
  background-color: var(--ss-ink);
  padding: 32px 24px;
}
.ss-title-band .container { padding: 0 24px; }
.ss-title-band h1.entry-title { color: var(--ss-ground); margin: 0; }

/* ---------- post / card styling (single + archive grid) ---------- */
.ss-card {
  background-color: #fff;
  border: 3px solid var(--ss-ink);
  border-radius: 6px;
  box-shadow: 7px 7px 0 var(--ss-ink);
  padding: 22px 24px 26px;
  margin: 20px 6px 34px;
  position: relative;
}
.ss-card::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 24px 24px 0;
  border-color: transparent #ece9e1 transparent transparent;
  filter: drop-shadow(-1px 1px 0 var(--ss-ink));
}

.ss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  align-items: start;
  padding: 20px 0;
}
.ss-grid .ss-card:nth-of-type(3n+1) { transform: rotate(-1.5deg); }
.ss-grid .ss-card:nth-of-type(3n+2) { transform: rotate(1deg); }
.ss-grid .ss-card:nth-of-type(3n+3) { transform: rotate(-1deg); }

.ss-empty {
  color: var(--ss-muted);
  font-style: italic;
  padding: 30px 0 50px;
}

/* category chip base (per-category background color injected by
   mu-plugin gehirnfrost-category-colors.php, keyed by href) */
.post-meta a[href*="/category/"] {
  border: 2px solid var(--ss-ink);
  border-radius: 3px;
  padding: 2px 8px;
  font-weight: 800;
  font-size: 0.8em;
  text-transform: uppercase;
  text-decoration: none;
}

/* ---------- front page ---------- */
.ss-front {
  background-color: var(--ss-ground);
  background-image: radial-gradient(#16161614 1.4px, transparent 1.4px);
  background-size: 16px 16px;
  color: var(--ss-ink);
  min-height: 100vh;
}
.ss-hero {
  text-align: center;
  padding: 80px 24px 56px;
}

/* Name-tag wordmark -- background/text never theme (always brand pink
   + white), so its border/shadow use the fixed ink tone, not the one
   dark mode would otherwise flip. */
.tag-sticker {
  position: relative;
  display: inline-block;
  background: var(--ss-brand);
  border: 4px solid var(--ss-ink-fixed);
  border-radius: 16px;
  box-shadow: 9px 9px 0 var(--ss-ink-fixed);
  padding: 34px 52px 38px;
  transform: rotate(-2deg);
}
.tag-sticker::before {
  content: "";
  position: absolute;
  top: 16px; left: -14px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ss-ground);
  border: 4px solid var(--ss-ink-fixed);
}
.tag-sticker h1.wordmark {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 0.95;
  margin: 0;
  color: #fff;
  text-shadow: 3px 3px 0 var(--ss-ink-fixed);
}
.tag-sticker p {
  margin: 14px 0 0;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* Hero category chips -- the fast "jump to a section" path. Each
   shares its view-transition-name with the matching category-page
   badge/switcher chip, so the click morphs it into place there. */
.chip-row {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ss-cat-chip {
  display: inline-block;
  border: 3px solid var(--ss-ink-fixed);
  border-radius: 6px;
  padding: 9px 16px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--ss-ink-fixed);
  box-shadow: 4px 4px 0 var(--ss-ink-fixed);
  text-decoration: none;
}
.chip-row .ss-cat-chip:nth-child(odd),
.ss-cat-switcher .ss-cat-chip:nth-child(odd) { transform: rotate(-3deg); }
.chip-row .ss-cat-chip:nth-child(even),
.ss-cat-switcher .ss-cat-chip:nth-child(even) { transform: rotate(2deg) translateY(6px); }

/* Current category, in the switcher -- same chip as everywhere else
   (so the view-transition morph is always chip-to-chip, never chip-
   to-badge), just marked with the same dot convention the nav already
   uses for "you are here", and not a link since you're already on
   this page. */
.ss-cat-chip.is-current {
  position: relative;
  cursor: default;
}
.ss-cat-chip.is-current::before {
  content: "";
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ss-brand);
  border: 2px solid var(--ss-ink-fixed);
}

/* ---------- category page header: chip switcher ---------- */
.ss-cat-header {
  padding: 40px 24px 48px;
  text-align: center;
  border-bottom: 8px solid var(--ss-ink);
}
.ss-cat-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ss-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  padding: 40px 24px 60px;
  max-width: 1080px;
  margin: 0 auto;
}
.nf-tile {
  background: #fff;
  border: 3px solid var(--ss-ink);
  border-radius: 6px;
  box-shadow: 7px 7px 0 var(--ss-ink);
  position: relative;
  padding: 20px 20px 28px;
}
.nf-tile::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 22px 22px 0;
  border-color: transparent #ece9e1 transparent transparent;
  filter: drop-shadow(-1px 1px 0 var(--ss-ink));
}
.ss-tiles .nf-tile:nth-of-type(3n+1) { transform: rotate(-1.5deg); }
.ss-tiles .nf-tile:nth-of-type(3n+2) { transform: rotate(1deg); }
.ss-tiles .nf-tile:nth-of-type(3n+3) { transform: rotate(-1deg); }

.nf-tile-heading { position: relative; padding-left: 22px; }
.nf-tile-heading h3 { margin: 0; }
.nf-tile-heading h3 a { text-decoration: none; }
.nf-tile-heading::before {
  content: "";
  position: absolute; left: 0; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--ss-ink);
}
.nf-tile .tile-desc { margin: 0 0 14px; font-size: 0.85rem; color: var(--ss-muted); }
.nf-tile .tile-divider {
  border: none;
  border-top: 2px dashed color-mix(in srgb, currentColor 30%, transparent);
  margin: 14px 0;
}
.nf-tile .tile-latest-label {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ss-muted);
  margin: 0 0 5px;
}
.nf-tile .tile-latest-title {
  display: block;
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  margin-bottom: 4px;
}
.nf-tile .tile-latest-snippet { margin: 0; font-size: 0.8rem; color: var(--ss-muted); line-height: 1.45; }
.nf-tile .tile-latest-empty { margin: 0; font-size: 0.8rem; color: var(--ss-muted); font-style: italic; }

/* ---------- the header/hero divider bar ---------- */
/* Was a plain border-bottom on .ss-header / .ss-hero; now a real
   element split into two named halves so it can participate in view
   transitions. Ordinarily (any non-front-page navigation) the two
   halves just hold their position like any other shared element --
   the split/slide effect below only fires for a transition that
   touches the front page (see gehirnfrost-page-transitions.php). */
.ss-bar-row {
  display: flex;
  width: 100%;
}
.ss-bar-half {
  flex: 1;
  height: 8px;
  background: var(--ss-ink);
}
.bar-left  { view-transition-name: bar-left; }
.bar-right { view-transition-name: bar-right; }

html.ss-dark .ss-bar-half {
  background: var(--ss-ink-dark);
}

/* Front-page-involved transition: the bar splits and each half exits
   vertically in opposite directions; the new page's halves enter
   continuing that same rotation rather than mirroring straight back. */
html.vt-home-transition::view-transition-old(bar-left) {
  animation: bar-exit-up 0.5s cubic-bezier(.5,0,.85,0) forwards;
}
html.vt-home-transition::view-transition-old(bar-right) {
  animation: bar-exit-down 0.5s cubic-bezier(.5,0,.85,0) forwards;
}
html.vt-home-transition::view-transition-new(bar-left) {
  animation: bar-enter-from-below 0.5s cubic-bezier(.15,1,.5,1) 0.12s backwards;
}
html.vt-home-transition::view-transition-new(bar-right) {
  animation: bar-enter-from-above 0.5s cubic-bezier(.15,1,.5,1) 0.12s backwards;
}
@keyframes bar-exit-up    { to { transform: translateY(-420%); } }
@keyframes bar-exit-down  { to { transform: translateY(420%); } }
@keyframes bar-enter-from-below { from { transform: translateY(420%); }  to { transform: translateY(0); } }
@keyframes bar-enter-from-above { from { transform: translateY(-420%); } to { transform: translateY(0); } }
/* Already covered by the general prefers-reduced-motion rule further
   up (::view-transition-old(*)/-new(*) { animation-duration: 0.001s
   !important }) -- !important on that longhand wins regardless of
   this rule's own specificity, so no separate override is needed here. */

/* ---------- View Transitions: hero chip <-> category badge/chip ---------- */
/* Unsupported browsers simply ignore this at-rule and every named
   property below -- no animation, instant navigation, no breakage. */
@view-transition {
  navigation: auto;
}
::view-transition-group(*) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(.3, .9, .3, 1);
}
/* Only the matched cat-* elements should morph; the rest of the page
   should just cut, not crossfade, on every ordinary navigation. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.001s !important;
  }
}