/* ==========================================================================
   Huhn & Hopp - galdromante.com
   Neo-Brutalism / bold poster. Tailwind (CDN) carries layout utilities;
   this file owns the design DNA: borders, hard shadows, typography, motion.
   ========================================================================== */

:root {
  --paper: #f4f4ef;
  --ink: #111111;
  --lime: #c6f432;
  --red: #ff3b30;
  --shadow: 4px 4px 0 var(--ink);
  --shadow-lg: 7px 7px 0 var(--ink);
  --border: 3px;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tiny dotted grid texture so the off-white never reads as flat default Tailwind */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(var(--ink) 1px, transparent 1.4px);
  background-size: 26px 26px;
  opacity: 0.05;
}

h1, h2, h3, .display {
  font-family: "Archivo Black", "IBM Plex Sans", sans-serif;
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* --- Reusable brutalist primitives ---------------------------------------- */

.bx { border: var(--border) solid var(--ink); }

.card {
  border: var(--border) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.card-lift {
  transition: transform .12s ease, box-shadow .12s ease;
}
.card-lift:hover,
.card-lift:focus-within {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
}

/* Section eyebrow / label (rationed across pages) */
.eyebrow {
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  display: inline-block;
  background: var(--ink);
  color: var(--lime);
  padding: 0.3rem 0.7rem;
  transform: rotate(-1.5deg);
}

/* Rectangular sticker badge */
.badge {
  border: var(--border) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.45rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.badge--lime { background: var(--lime); }
.badge--red  { background: var(--red); color: var(--paper); }

/* Buttons */
.btn {
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  border: var(--border) solid var(--ink);
  box-shadow: var(--shadow);
  padding: 0.95rem 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1;
  text-align: center;
  transition: transform .1s ease, box-shadow .1s ease, background-color .1s ease;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
  outline: none;
}
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

.btn--play  { background: var(--lime); color: var(--ink); }
.btn--ink   { background: var(--ink);  color: var(--paper); }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--red   { background: var(--red);  color: var(--paper); }

/* Accessible focus ring everywhere */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

/* Links inside prose */
.prose a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.prose a:hover { background: var(--lime); }

/* Underline-marker for inline emphasis */
.mark {
  background: linear-gradient(transparent 58%, var(--lime) 58%);
  padding: 0 0.1em;
}
.mark--red {
  background: linear-gradient(transparent 58%, var(--red) 58%, var(--red) 92%, transparent 92%);
}

/* Header / nav */
.site-header { border-bottom: var(--border) solid var(--ink); background: var(--paper); }
.nav-link { font-weight: 600; padding: 0.35rem 0; position: relative; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  height: 3px; width: 0; background: var(--red); transition: width .15s ease;
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { width: 100%; }

/* Mobile menu */
#mobileMenu { border-top: var(--border) solid var(--ink); }
#mobileMenu.is-open { display: block; }

/* FAQ accordion */
.faq-item { border: var(--border) solid var(--ink); background: var(--paper); box-shadow: var(--shadow); }
.faq-item + .faq-item { margin-top: 1rem; }
.faq-q {
  width: 100%; text-align: left; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; cursor: pointer;
  font-family: "Archivo Black", sans-serif; text-transform: uppercase;
  font-size: 0.95rem; letter-spacing: -0.01em; background: transparent;
}
.faq-q .sign {
  flex: none; width: 2rem; height: 2rem; border: 3px solid var(--ink);
  display: grid; place-items: center; background: var(--lime);
  font-size: 1.3rem; line-height: 1; transition: transform .15s ease;
}
.faq-q[aria-expanded="true"] .sign { background: var(--red); color: var(--paper); transform: rotate(45deg); }
.faq-a { display: none; padding: 0 1.2rem 1.2rem; }
.faq-q[aria-expanded="true"] + .faq-a { display: block; }

/* Marquee strip (used once, on index) */
.marquee { overflow: hidden; border-top: var(--border) solid var(--ink); border-bottom: var(--border) solid var(--ink); background: var(--ink); }
.marquee__track {
  display: inline-flex; white-space: nowrap; will-change: transform;
  animation: scroll-x 24s linear infinite;
}
.marquee__track span {
  font-family: "Archivo Black", sans-serif; text-transform: uppercase;
  color: var(--lime); font-size: 1.05rem; letter-spacing: 0.05em; padding: 0.6rem 1.2rem;
}
.marquee__track span:nth-child(even) { color: var(--paper); }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* Form */
.field-label { font-family: "Archivo Black", sans-serif; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.06em; }
.field {
  width: 100%; border: var(--border) solid var(--ink); background: var(--paper);
  padding: 0.8rem 0.9rem; font-size: 1rem; font-family: inherit;
}
.field::placeholder { color: #6b6b66; }
.field:focus { background: #fffef6; }

/* App overview card (store-style) */
.appcard { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center; }
.appcard__icon {
  width: 128px; height: 128px; flex: none; display: block;
  border: var(--border) solid var(--ink); box-shadow: var(--shadow); border-radius: 20px;
}
@media (max-width: 520px) {
  .appcard { grid-template-columns: 1fr; text-align: left; }
  .appcard__icon { width: 92px; height: 92px; }
}

/* Spec grid (factual, no fake stats) */
.spec {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: var(--border) solid var(--ink); border-left: var(--border) solid var(--ink);
}
.spec > div {
  padding: 1rem 1.15rem;
  border-right: var(--border) solid var(--ink); border-bottom: var(--border) solid var(--ink);
  background: var(--paper);
}
.spec dt { font-family: "Archivo Black", sans-serif; text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.09em; color: #6b6b66; }
.spec dd { font-weight: 700; margin-top: 0.25rem; font-size: 1.02rem; }

/* Rating pips (visual, not a fake score claim) */
.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: var(--border) solid var(--ink); background: var(--paper);
  font-weight: 700; font-size: 0.82rem; padding: 0.35rem 0.7rem;
}
.pill svg { display: block; }

/* Feature card icon chip */
.chip {
  width: 3rem; height: 3rem; display: grid; place-items: center; flex: none;
  border: var(--border) solid var(--ink); box-shadow: var(--shadow); background: var(--lime);
}
.chip svg { display: block; }

/* Consent checkbox (DSGVO) */
.consent { display: flex; align-items: flex-start; gap: 0.6rem; }
.consent input[type="checkbox"] {
  flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem;
  border: var(--border) solid var(--ink); accent-color: var(--red); cursor: pointer;
}
.consent label { font-size: 0.8rem; line-height: 1.5; }

/* Decorative offset rotations for stickers (kept subtle, hand-placed) */
.tilt-1 { transform: rotate(-1.5deg); }
.tilt-2 { transform: rotate(1.2deg); }
.tilt-3 { transform: rotate(-0.8deg); }

/* Reduced motion: kill the marquee + smooth scroll */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  .card-lift, .btn { transition: none; }
}

/* Print-ish guard: keep borders crisp on small screens */
@media (max-width: 640px) {
  :root { --shadow: 3px 3px 0 var(--ink); --shadow-lg: 5px 5px 0 var(--ink); }
}