/* ── Variables ─────────────────────────────────────────── */
:root {
  --bg:            #000000;
  --card-bg:       #1a1a1a;
  --card-hover-bg: #242424;
  --card-border:   #2a2a2a;
  --text:          #ffffff;
  --text-muted:    #888888;
  --radius:        12px;
  --max-width:     480px;
  --font:          'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Reset ──────────────────────────────────────────────── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Body ───────────────────────────────────────────────── */
body {
  background:      var(--bg);
  color:           var(--text);
  font-family:     var(--font);
  min-height:      100vh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
}

/* ── Page container ─────────────────────────────────────── */
/* flex: 1 0 auto (a sticky-footer layout, paired with body's min-height:
   100vh above) makes this grow to fill any leftover viewport height, which
   is what pushes .impressum-footer down to the bottom of the screen on
   short pages - on tall pages there's no leftover space to fill, so the
   footer just sits at its natural position right after the content, never
   floating higher than that. position: relative anchors .lang-dock (see
   its own comment below), which is positioned relative to this box. */
.page {
  max-width:      var(--max-width);
  width:          100%;
  padding:        3rem 1.25rem;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0;
  flex:           1 0 auto;
  position:       relative;
}

/* ── Language switcher ──────────────────────────────────── */
/* Shows/hides any element carrying a `lang` attribute that doesn't match
   the page's own active language (set as html[lang] by js/app.js) - the
   same attribute doubles as the correct semantic `lang` marker for screen
   readers on whichever block is actually visible. */
html[lang="de"] [lang="en"],
html[lang="en"] [lang="de"] {
  display: none;
}

/* Pinned to the top-right corner of .page (which supplies the
   position: relative anchor - see its own comment above), tucked into the
   page's own top padding next to the avatar. */
.lang-dock {
  position:       absolute;
  top:            5px;
  right:          4px;
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            6px;
}

/* DOM order (trigger, then menu) puts the menu BELOW the trigger button -
   it opens downward, the normal direction, since this dock sits near the
   top of the page rather than flush against the bottom edge. */
.lang-menu[hidden] {
  display: none;
}

.lang-menu {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  background:     var(--card-bg);
  border:         1px solid var(--card-border);
  border-radius:  12px;
  padding:        4px;
  min-width:      108px;
  box-shadow:     0 8px 24px rgba(0, 0, 0, 0.4);
}

.lang-option {
  background:     none;
  border:         none;
  border-radius:  8px;
  color:          var(--text-muted);
  font-family:    var(--font);
  font-size:      0.75rem;
  font-weight:    600;
  text-align:     left;
  padding:        8px 12px;
  cursor:         pointer;
}

.lang-option:hover {
  background: var(--card-hover-bg);
  color:      var(--text);
}

.lang-option-active,
.lang-option-active:hover {
  background: var(--card-hover-bg);
  color:      var(--text);
}

.lang-trigger {
  display:        flex;
  align-items:    center;
  gap:            6px;
  background:     var(--card-bg);
  border:         1px solid var(--card-border);
  border-radius:  999px;
  color:          var(--text);
  font-family:    var(--font);
  font-size:      0.7rem;
  font-weight:    600;
  letter-spacing: 0.05em;
  padding:        6px 12px;
  cursor:         pointer;
}

.lang-caret {
  font-size: 0.5rem;
  color:     var(--text-muted);
}

/* ── Avatar ─────────────────────────────────────────────── */
.avatar {
  width:         96px;
  height:        96px;
  border-radius: 50%;
  object-fit:    cover;
  margin-bottom: 5px;
  border:        2px solid var(--card-border);
}

/* ── Name & tagline ─────────────────────────────────────── */
/* Stacked two-line wordmark ("SushiBar" / ".Studio", the second line
   indented to sit under the first) - line-height:1 keeps the pair tight. */
.name {
  font-size:   1.5rem;
  font-weight: 700;
  line-height: 1;
  margin:      4px 0 40px;
  text-align:  center;
}

.tagline {
  font-size:  0.875rem;
  color:      var(--text-muted);
  margin:     0 0 2rem;
  text-align: center;
}

/* ── Link buttons ───────────────────────────────────────── */
/* Grid (not a stacked column) so the known-brand cards - currently the
   only two visible links, Etsy and CGTrader - sit side by side. A third
   visible link (e.g. re-enabling eBay) would wrap to its own row rather
   than filling one; revisit the layout if that happens.
   width: max-content (not 100%) is deliberate: with a definite 100% width
   the 1fr columns would stretch each card to fill the whole available
   page width, puffing them out and widening the visual gap on anything
   wider than a narrow phone. Shrink-wrapping the grid to its own content
   keeps the two cards compact and centered (via .page's align-items:
   center) at any viewport width, matching the design - the 1fr columns
   still split evenly within that shrink-wrapped size, so both cards come
   out equal width regardless of "CGTrader" being longer text than "Etsy".
   max-width: 100% is just a safety net for phones too narrow to fit the
   natural content width without overflowing. */
.links {
  width:          max-content;
  max-width:      100%;
  display:        grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:            42px;
  margin-bottom:  40px;
}

/* ── Brand link cards (Etsy, CGTrader - real logos, real brand color) ── */
/* --accent is set inline per instance (js/app.js) from each brand's own
   color, e.g. "244, 88, 0" for Etsy - used here as an rgb() component list
   so the border/glow can carry alpha. */
.btn-brand {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  gap:             10px;
  background:      var(--card-bg);
  border:          1.5px solid rgba(var(--accent), 0.35);
  border-radius:   16px;
  padding:         16px 12px;
  box-shadow:      0 4px 20px rgba(var(--accent), 0.12);
  text-decoration: none;
  color:           var(--text);
  transition:      background 0.15s ease, transform 0.15s ease;
  cursor:          pointer;
}

.btn-brand:hover {
  background: var(--card-hover-bg);
  transform:  translateY(-2px);
}

.btn-brand:active {
  transform: translateY(0);
}

.btn-icon-wrap {
  width:         46px;
  height:        46px;
  border-radius: 12px;
  overflow:      hidden;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
}

.btn-icon-wrap img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.btn-brand-label {
  font-size:   0.9375rem;
  font-weight: 600;
  line-height: 1.2;
}

.btn {
  display:         flex;
  align-items:     center;
  gap:             14px;
  background:      var(--card-bg);
  border:          1px solid var(--card-border);
  border-radius:   var(--radius);
  padding:         14px 20px;
  text-decoration: none;
  color:           var(--text);
  transition:      background 0.15s ease, transform 0.15s ease;
  cursor:          pointer;
}

.btn:hover {
  background: var(--card-hover-bg);
  transform:  translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn-icon {
  width:       28px;
  height:      28px;
  flex-shrink: 0;
}

.btn-body {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.btn-label {
  font-size:   1rem;
  font-weight: 600;
  line-height: 1.2;
}

.btn-sub {
  font-size:   0.75rem;
  color:       var(--text-muted);
  line-height: 1.2;
}

/* ── Social icons ───────────────────────────────────────── */
.socials {
  display:         flex;
  gap:             26px;
  justify-content: center;
  align-items:     center;
  margin-bottom:   40px;
}

.social-link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           48px;
  height:          48px;
  border-radius:   50%;
  background:      var(--card-bg);
  border:          1px solid var(--card-border);
  transition:      background 0.15s ease, transform 0.15s ease;
}

.social-link:hover {
  background: var(--card-hover-bg);
  transform:  scale(1.08);
}

.social-link img {
  width:  22px;
  height: 22px;
}

/* Known-brand socials (WhatsApp, Instagram) use their own real logo
   graphic, which already carries its own shape and color - no circular
   background/border wrapper, unlike the .social-link fallback above. */
.social-bare {
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       37px;
  height:      37px;
  transition:  transform 0.15s ease;
}

.social-bare:hover {
  transform: scale(1.08);
}

.social-bare img {
  width:   100%;
  height:  100%;
  display: block;
}

/* ── Icon badge (fallback for icons not in Simple Icons) ── */
.btn-icon-badge {
  display:        flex;
  align-items:    center;
  justify-content: center;
  background:     var(--card-border);
  border-radius:  4px;
  font-size:      0.6rem;
  font-weight:    700;
  letter-spacing: 0.05em;
  color:          var(--text-muted);
}

/* ── Bot protection ─────────────────────────────────────── */
.bd-a { display: none; }
.bd-b { display: none; }
.bd-c { display: none; }
.bd-d { display: none; }
.bd-e { display: none; }

/* ── Impressum footer ───────────────────────────────────── */
.impressum-footer {
  width:          100%;
  max-width:      var(--max-width);
  margin:         55px auto 0;
  padding:        0 1.25rem 2rem;
  font-family:    var(--font);
  display:        flex;
  flex-direction: column;
  align-items:    center;
}

.impressum-details {
  width:        100%;
  border-top:   1px solid var(--card-border);
  padding-top:  1rem;
}

.impressum-details + .impressum-details {
  margin-top: 1rem;
}

.impressum-toggle {
  cursor:         pointer;
  font-size:      0.75rem;
  color:          var(--text-muted);
  list-style:     none;
  text-align:     center;
  letter-spacing: 0.05em;
  user-select:    none;
}

.impressum-toggle::-webkit-details-marker {
  display: none;
}

.impressum-toggle::after {
  content: " ▾";
}

details[open] .impressum-toggle::after {
  content: " ▴";
}

.impressum-body {
  margin-top: 1rem;
  font-size:  0.7rem;
  line-height: 1.7;
  color:      var(--text-muted);
  text-align: left;
  width:      100%;
}

.impressum-body p {
  margin-bottom: 0.75rem;
}

.impressum-body strong {
  color:         var(--text);
  display:       block;
  margin-bottom: 0.2rem;
}

.impressum-body a {
  color:           var(--text-muted);
  text-decoration: underline;
}