/* Shared brand layer for the home page and the German learn page.
   Tokens, Nunito, logo, header, footer and buttons live here and nowhere else.
   Load after themes.css and playful.css. */
:root {
  --brand-bg: #fafaf7;
  --brand-surface: #ffffff;
  --brand-text: #111111;
  --brand-muted: #4a4a4a;
  --brand-muted-2: #5c5c5c;
  --brand-border: #e6e6e1;
  --brand-divider: #e5e5e0;
  --brand-soft: #f2f2ee;
  --brand-yellow: #ffd23f;
  --brand-yellow-dark: #c9a200;
  --brand-yellow-soft: #fff4c2;
  --brand-flame: #f2a33a;
  --brand-flame-text: #b8650a;
  --brand-flame-bg: #fdf0dc;
  --brand-font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand-wrap: 1180px;
  --brand-gutter: 24px;
}

body.hm-body {
  margin: 0; padding: 0; background: var(--brand-bg); color: var(--brand-text);
  font-family: var(--brand-font); font-weight: 600; font-size: 17px; line-height: 1.6;
}
.hm *, .hm *::before, .hm *::after,
.site-header *, .site-footer * { box-sizing: border-box; }
body.hm-body :focus-visible { outline: 3px solid var(--brand-text); outline-offset: 3px; }

.hm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hm-skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--brand-text); color: var(--brand-yellow); padding: 12px 18px; border-radius: 12px; font-weight: 800; }
.hm-skip:focus { top: 12px; }

/* Content column: 1180px of content, 24px side padding */
.hm-wrap { max-width: calc(var(--brand-wrap) + 2 * var(--brand-gutter)); margin: 0 auto; padding-left: var(--brand-gutter); padding-right: var(--brand-gutter); }

/* ── Logo ── */
.site-logo { display: inline-flex; align-items: center; font: 900 24px/1.2 var(--brand-font); letter-spacing: -0.01em; color: var(--brand-text); text-decoration: none; min-height: 44px; }
.site-logo-hl { background: var(--brand-yellow); color: #111; padding: 0 8px; margin-left: 2px; border-radius: 8px; }

/* ── Header ── */
.site-header { background: var(--brand-bg); border-bottom: 2px solid var(--brand-divider); font-family: var(--brand-font); }
.site-header-in {
  max-width: calc(var(--brand-wrap) + 2 * var(--brand-gutter)); margin: 0 auto; padding: 18px var(--brand-gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
}
.site-header-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.site-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; font-size: 15px; letter-spacing: .06em; color: var(--brand-muted); text-decoration: none; }
.site-link:hover { color: var(--brand-text); }
.site-signin {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; background: #111; color: var(--brand-yellow);
  border-radius: 14px; margin-bottom: 4px;
  font-weight: 800; font-size: 15px; letter-spacing: .06em; text-decoration: none; transition: transform .1s ease, box-shadow .1s ease;
}
.site-signin:hover { transform: translateY(-1px); }
.site-signin:active { transform: translateY(3px); }

/* ── Footer ── */
.site-footer { border-top: 2px solid var(--brand-divider); font-family: var(--brand-font); background: var(--brand-bg); }
.site-footer-in {
  max-width: calc(var(--brand-wrap) + 2 * var(--brand-gutter)); margin: 0 auto; padding: 40px var(--brand-gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px;
}
.site-footer-text { margin: 0; color: var(--brand-muted); font-weight: 700; font-size: 16px; }
.site-footer-links { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.site-footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-muted); font-weight: 800; font-size: 15px; text-decoration: none; }
.site-footer-links a:hover { color: var(--brand-text); text-decoration: underline; }
@media (max-width: 600px) { .site-footer-links { margin-left: 0; } }

/* ── Buttons (3D) ── */
.hm-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px;
  border: 2px solid transparent; border-radius: 14px; font: 800 17px/1 var(--brand-font);
  text-decoration: none; cursor: pointer; margin-bottom: 6px; transition: transform .1s ease, box-shadow .1s ease;
}
.hm-btn:active:not(:disabled) { transform: translateY(4px); }
.hm-btn:disabled { opacity: .6; cursor: not-allowed; }
.hm-btn-yellow { background: var(--brand-yellow); color: #111; }
.hm-btn-yellow:hover:not(:disabled) { transform: translateY(-1px); }
.hm-btn-black { background: #111; color: var(--brand-yellow); }
.hm-btn-black:hover { transform: translateY(-1px); }
.hm-btn-lg { min-height: 60px; padding: 0 34px; font-size: 20px; font-weight: 900; border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { .hm-btn, .site-signin { transition: none; } }

/* Shared highlight: a thick yellow underline below the letters, nothing covers the text */
.hm-mark { text-decoration: underline; text-decoration-color: var(--brand-yellow); text-decoration-thickness: .14em; text-underline-offset: .1em; text-decoration-skip-ink: none; }
.hm-label { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-muted-2); }

/* Flat style: thin black outlines, no offset shadows */
.hm-btn-yellow { border-color: #ffd23f; }
.hm-btn-yellow:hover:not(:disabled) { background: #f5c518; transform: none; }
.hm-btn-black { border-color: #ffd23f; }
.hm-btn-black:hover { background: #2a2a2a; transform: none; }
.hm-btn:active:not(:disabled) { transform: scale(.98); }
.hm-btn { margin-bottom: 0; }
.site-signin { margin-bottom: 0; }
.site-signin:hover { background: #2a2a2a; transform: none; }
.site-signin:active { transform: scale(.98); }