/* foefel - Homepage theme
   File: /nerdbird/docker/homepage/config/custom.css   (Ctrl+F5 after changes)
   Palette: Asfalt #26221E  Kegel #E8622C  Roze Koek #F28CB1  Patat #C9A26B
            Zweet #7FB3E0   Papier #ECE7DD  Grind #8C857B
*/

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,800&display=swap");

/* 1. Repaint Homepage's colour ramp ("R G B"); [class] beats the built-in .theme-stone */
html[class],
html[class].dark {
  --color-50:  236 231 221;
  --color-100: 227 221 208;
  --color-200: 209 200 182;
  --color-300: 184 172 151;
  --color-400: 140 133 123;
  --color-500: 107  99  90;
  --color-600:  90  83  75;
  --color-700:  58  52  46;
  --color-800:  46  41  37;
  --color-900:  30  26  23;
  --foefel-kegel: #E8622C;
  --foefel-roze:  #F28CB1;
  --foefel-patat: #C9A26B;
  --foefel-zweet: #7FB3E0;
}

body {
  font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
}

/* 2. De Patat as logo: bigger, and he wiggles on hover */
#information-widgets img[src*="patat"] {
  width: 76px !important;
  height: auto !important;
  max-height: none !important;
  transform-origin: 50% 90%;
  transition: transform 0.2s ease;
}
#information-widgets img[src*="patat"]:hover {
  animation: foefel-wiggle 0.6s ease-in-out 2;
}
@keyframes foefel-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  #information-widgets img[src*="patat"]:hover { animation: none; }
}

/* 3. Banner from custom.js: greeting, countdown, quote */
#foefel-banner {
  margin: 0.5rem 1rem 1.25rem;
  padding: 1.1rem 1.4rem;
  border-radius: 22px;
  background: rgb(var(--color-800) / 0.85);
  border: 2px solid rgb(var(--color-700));
  display: grid;
  gap: 0.15rem;
}
#foefel-banner .foefel-hello {
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--foefel-kegel);
}
#foefel-banner .foefel-next {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--foefel-patat);
}
#foefel-banner .foefel-quote {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  color: rgb(var(--color-400));
  font-style: italic;
}

/* 4. Group titles */
.services-group h2,
.bookmark-group h2 {
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--foefel-patat) !important;
}

/* 5. Tiles: rounded, bigger icons, orange edge and a little lift on hover */
.service-card {
  background-color: rgb(var(--color-800) / 0.9) !important;
  border: 2px solid rgb(var(--color-700)) !important;
  border-radius: 20px !important;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.service-card:hover {
  border-color: var(--foefel-kegel) !important;
  transform: translateY(-3px);
}
.service-card img[src^="/images/"] {
  width: 44px !important;
  height: 44px !important;
  max-width: none !important;
  max-height: none !important;
}
.service-name {
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  color: rgb(var(--color-50)) !important;
}
.service-description {
  color: rgb(var(--color-400)) !important;
}

/* 6. Bookmarks as pills */
.bookmark { border-radius: 999px !important; }
.bookmark:hover { outline: 2px solid var(--foefel-roze); }

/* 7. Focus */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--foefel-roze) !important;
  outline-offset: 2px;
}

/* 8. Phone: a bit tighter */
@media (max-width: 640px) {
  #foefel-banner { margin: 0.25rem 0.5rem 1rem; padding: 0.9rem 1rem; }
}