/* ============================================
   DONAURAVE v2 - Main Stylesheet
   Exact match of original design
   ============================================ */

/* Font Face - Space Grotesk (exact match from original) */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/62328fecf9e80426-s.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1ea0-1ef9,U+20ab;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/c7eb187887c48af6-s.woff2') format('woff2');
  unicode-range: U+0100-02ba,U+02bd-02c5,U+02c7-02cc,U+02ce-02d7,U+02dd-02ff,U+0304,U+0308,U+0329,U+1d00-1dbf,U+1e00-1e9f,U+1ef2-1eff,U+2020,U+20a0-20ab,U+20ad-20c0,U+2113,U+2c60-2c7f,U+a720-a7ff;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/2d141e1a38819612-s.p.woff2') format('woff2');
  unicode-range: U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+0304,U+0308,U+0329,U+2000-206f,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd;
}

/* Fallback font with metrics matching Space Grotesk */
@font-face {
  font-family: 'Space Grotesk Fallback';
  src: local('Arial');
  ascent-override: 88.82%;
  descent-override: 26.36%;
  line-gap-override: 0.00%;
  size-adjust: 110.78%;
}

/* CSS Variables */
:root {
  --colors-primary-500: #f01368;
  --colors-secondary-500: #000026;
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

/* Body - matches original exactly */
body {
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', ui-sans-serif, system-ui, sans-serif;
  font-style: normal;
  font-weight: 500;
  margin: 0;
  line-height: inherit;
  /* Solid colour shows immediately; image fades in once decoded.
     background-attachment:fixed + background-size:cover pins the bg to the
     viewport rather than the whole document. Without this, on long-content
     pages (party finances, tasks list, dashboard) the mobile bg gets
     stretched to cover the entire scroll height and reads as a blurry haze
     instead of a crisp texture. */
  background-color: #0a0a1a;
  background-image: url('/images/background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media only screen and (min-width: 768px) {
  body {
    /* AVIF (~72 KB) — much smaller than the old WebP (~553 KB) */
    background-image: url('/images/hintergrund.avif');
  }
}

/* Main container */
main {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Typography */
a, button {
  letter-spacing: 0.95px;
  line-height: normal;
}

p {
  letter-spacing: 0.76px;
  line-height: 20px;
}

a {
  color: inherit;
  text-decoration: inherit;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Main page container */
.page-container {
  height: 100svh;
  max-height: 900px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Logo section */
.logo-section {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}

/* Content section - pink text */
.content-section {
  color: var(--colors-primary-500);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  line-height: 1.625;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  max-width: 24rem;
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
}

.content-section p {
  margin: 0.5rem;
}

.content-section .spaced {
  margin: 1.25rem;
}

/* Navigation buttons section */
.nav-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
  max-width: 24rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.nav-row {
  display: flex;
}

/* Button styles - exact match */
.btn {
  margin: 0.25rem;
  font-weight: 500;
  text-align: center;
  flex-grow: 1;
  flex-shrink: 0;
  border-radius: 5px;
  text-transform: uppercase;
  color: var(--colors-primary-500);
  border: 2px solid var(--colors-primary-500);
  padding: 0.25rem 0.5rem;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-family: inherit;
  letter-spacing: 0.95px;
}

.btn:hover {
  background-color: var(--colors-primary-500);
  color: var(--colors-secondary-500);
}

.btn.active {
  background-color: var(--colors-primary-500);
  color: var(--colors-secondary-500);
}

/* Larger buttons for donate */
.btn-lg {
  padding: 0.25rem 1rem;
  font-size: 1rem;
}

/* Desktop only - requires both width AND height for true "big screen" */
@media (min-width: 1024px) and (min-height: 600px) {
  .mobile-only {
    display: none;
  }
  .desktop-only {
    display: flex;
  }
}

/* Show mobile view on narrow OR short screens */
@media (max-width: 1023px), (max-height: 599px) {
  .desktop-only {
    display: none;
  }
}

/* Desktop layout - requires both width AND height for true "big screen" */
.desktop-container {
  display: none;
}

@media (min-width: 1024px) and (min-height: 600px) {
  .desktop-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .desktop-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100svh;
  }

  .desktop-hero img {
    z-index: -10;
    width: 100%;
    height: auto;
  }

  .desktop-heart {
    height: 100svh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* Mobile dialog */
.mobile-dialog {
  color: var(--colors-primary-500);
  border: 2px solid var(--colors-primary-500);
  border-radius: 5px;
  padding: 2rem;
  max-width: 90%;
  width: 400px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.mobile-dialog[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.mobile-dialog .dialog-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.mobile-dialog p {
  margin: 0.5rem;
}

.mobile-dialog .dialog-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.mobile-dialog .dialog-close svg {
  fill: var(--colors-primary-500);
  stroke: var(--colors-primary-500);
  width: 24px;
  height: 24px;
}

.mobile-dialog .lang-buttons {
  margin-top: 1rem;
}

/* Desktop dialogs - requires both width AND height */
.desktop-dialogs {
  display: none;
}

@media (min-width: 1024px) and (min-height: 600px) {
  .desktop-dialogs {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    /* These two wrappers are transparent and cover the whole viewport, so
       without this they swallow every click aimed at anything underneath. Only
       the buttons and open dialogs should take pointer events. */
    pointer-events: none;
  }

  .desktop-dialogs .dialog-btn,
  .desktop-dialogs dialog {
    pointer-events: auto;
  }

  .dialog-buttons {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }

  .dialog-btn {
    position: absolute;
    z-index: 50;
    font-size: 1.5rem;
    padding: 0.5rem 5rem;
  }

  .dialog-btn-about {
    bottom: 75%;
    left: 25%;
  }

  .dialog-btn-donate {
    top: 57%;
    left: 24%;
  }

  .dialog-btn-join {
    top: 33%;
    left: 50%;
  }

  .dialog-btn-feedback {
    bottom: 47%;
    right: 24%;
  }

  .dialog-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 50;
  }

  dialog {
    color: var(--colors-primary-500);
    border: 2px solid var(--colors-primary-500);
    border-radius: 5px;
    margin: auto;
    background: rgba(18, 18, 48, 0.8);
    width: 663px;
    max-width: 90vw;
    padding: 1rem;
  }

  dialog[open] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  dialog .dialog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 1.5rem;
  }

  dialog p {
    margin: 0.5rem;
  }

  .dialog-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: var(--colors-primary-500);
    cursor: pointer;
    padding: 8px;
  }

  .dialog-close svg {
    fill: var(--colors-primary-500);
    stroke: var(--colors-primary-500);
    width: 24px;
    height: 24px;
  }
}

/* Donate row */
.donate-row {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.donate-label {
  color: var(--colors-primary-500);
  font-weight: 600;
  font-size: 1rem;
}

.btn-amount {
  background: transparent;
  border: 1px solid var(--colors-primary-500);
  color: var(--colors-primary-500);
  padding: 0.25rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
}

.btn-amount:hover,
.btn-amount.active {
  background: var(--colors-primary-500);
  color: #fff;
}

/* QR Code section */
.qr-buttons {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.qr-buttons-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
}

.qr-code {
  display: none;
  margin-top: 1.25rem;
}

.qr-code.active {
  display: flex;
  justify-content: center;
}

.qr-code img {
  max-width: 150px;
  border-radius: 5px;
}

@media (min-width: 768px) {
  .qr-code img {
    max-width: 200px;
  }
}

/* Join page language buttons */
.lang-buttons {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0 1rem;
}

.lang-buttons .btn {
  flex: 1;
  padding: 0.5rem 1rem;
}

/* Form styles */
.form-page {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.form-container {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

.form-header {
  text-align: center;
  margin-bottom: 2rem;
}

.form-header img {
  margin: 0 auto 1rem;
}

.form-title {
  color: var(--colors-primary-500);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.form-subtitle {
  color: var(--colors-primary-500);
  opacity: 0.8;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  color: var(--colors-primary-500);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.form-label.required::after {
  content: ' *';
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--colors-primary-500);
  background: transparent;
  border: 2px solid var(--colors-primary-500);
  border-radius: 5px;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--colors-primary-500);
  opacity: 0.8;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
}

.form-input:focus::placeholder,
.form-textarea:focus::placeholder {
  color: transparent;
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
}

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23f01368' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

/* Custom Select Dropdown */
.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.custom-select-display {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--colors-primary-500);
  background: transparent;
  border: 2px solid var(--colors-primary-500);
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-select-arrow {
  font-size: 0.75rem;
  transition: transform 0.2s;
}

.custom-select-wrapper.open .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #000000;
  border: 2px solid var(--colors-primary-500);
  border-top: none;
  border-radius: 0 0 5px 5px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}

.custom-select-wrapper.open .custom-select-options {
  display: block;
}

.custom-select-option {
  padding: 0.75rem 1rem;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.custom-select-option:hover {
  background: var(--colors-primary-500);
  color: #000000;
}

.custom-select-option.selected {
  background: var(--colors-primary-500);
  color: #000000;
}

.custom-select-option.placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Collapsible file upload */
.file-upload-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 0.5rem 0;
  color: var(--colors-primary-500);
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
}

.file-upload-toggle:hover {
  opacity: 0.8;
}

.file-upload-toggle .toggle-icon {
  transition: transform 0.2s;
}

.file-upload-toggle.expanded .toggle-icon {
  transform: rotate(180deg);
}

.file-upload-content {
  display: none;
  margin-top: 0.5rem;
}

.file-upload-content.expanded {
  display: block;
}

.form-hint {
  color: var(--colors-primary-500);
  opacity: 0.7;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* Checkbox grid */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--colors-primary-500);
}

.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--colors-primary-500);
  cursor: pointer;
}

.form-check label {
  cursor: pointer;
  font-size: 0.9rem;
}

/* Submit button */
.btn-submit {
  width: 100%;
  padding: 0.75rem;
  margin-top: 1rem;
  font-size: 1rem;
}

/* Back link */
.back-link {
  display: block;
  text-align: center;
  margin-top: 1.5rem;
  color: var(--colors-primary-500);
  opacity: 0.8;
}

.back-link:hover {
  opacity: 1;
}

/* Alert messages */
.alert {
  padding: 0.75rem 1rem;
  border-radius: 5px;
  margin-bottom: 1rem;
  text-align: center;
}

.alert-success {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.5);
}

.alert-error {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.5);
}

/* Inline form feedback (replaces submit button) */
.inline-success {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.5;
}

.inline-error {
  color: #ef4444;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  text-align: center;
}

/* Submit button — progress bar state */
.btn-loading {
  position: relative;
  pointer-events: none;
  min-height: 2.6rem;
}

.btn-progress {
  display: block;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
}

.btn-progress-bar {
  display: block;
  height: 100%;
  width: 30%;
  background: #fff;
  border-radius: 2px;
  animation: progress-slide 1.2s ease-in-out infinite;
}

@keyframes progress-slide {
  0% { transform: translateX(-100%); width: 30%; }
  50% { width: 60%; }
  100% { transform: translateX(350%); width: 30%; }
}

/* Submit button — success state */
.btn-success {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #fff !important;
  pointer-events: none;
  opacity: 1 !important;
}

/* Spinner */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 0.5rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* File upload */
.file-upload {
  border: 2px dashed var(--colors-primary-500);
  border-radius: 5px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  color: var(--colors-primary-500);
  transition: background 0.2s;
}

.file-upload:hover,
.file-upload.dragover {
  background: rgba(240, 19, 104, 0.1);
}

.file-upload input[type="file"] {
  display: none;
}

.file-upload-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.file-list {
  margin-top: 0.5rem;
  text-align: left;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: rgba(240, 19, 104, 0.1);
  border-radius: 5px;
  margin-bottom: 0.25rem;
  color: var(--colors-primary-500);
}

.file-item-remove {
  background: none;
  border: none;
  color: var(--colors-primary-500);
  cursor: pointer;
  font-size: 1.2rem;
}

/* Star rating */
.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 0.25rem;
}

.star-rating input {
  display: none;
}

.star-rating label {
  font-size: 2rem;
  color: rgba(240, 19, 104, 0.3);
  cursor: pointer;
  transition: color 0.2s;
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: var(--colors-primary-500);
}

/* Utility */
.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-5 { margin-top: 1.25rem; }

/* Feedback page */
.feedback-page .content-section {
  text-align: center;
}

/* Hidden admin link */
.admin-link {
  position: fixed;
  bottom: 12px;
  right: 12px;
  color: var(--colors-primary-500);
  text-decoration: none;
  font-size: 0.5rem;
  line-height: 1;
  opacity: 0.35;
  transition: opacity 0.2s;
  z-index: 100;
}

.admin-link:hover {
  opacity: 0.8;
}

/* Feedback form in dialog */
.feedback-form {
  width: 100%;
  max-width: 500px;
}

.feedback-form .form-group {
  margin-bottom: 1rem;
  text-align: left;
}

.feedback-form .form-label {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.feedback-form .form-input,
.feedback-form .form-textarea,
.feedback-form .form-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}

.feedback-form .form-textarea {
  min-height: 80px;
}

.feedback-form .custom-select-display {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}

.feedback-success {
  text-align: center;
  padding: 1rem;
}

.feedback-success p {
  margin-bottom: 1rem;
}

/* Feedback form progressive disclosure */
.feedback-field.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.feedback-field.disabled .form-input,
.feedback-field.disabled .form-textarea,
.feedback-field.disabled .file-upload-toggle {
  cursor: not-allowed;
}

.feedback-form button[type="submit"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Social links — SoundCloud and Instagram, rendered by js/app.js on the
   landing page only. Two presentations of the same two links:

   Mobile — real .btn elements sitting at the end of the first nav row, so they
   are literally the same component as About and Donate. .nav-row is a flex row
   with the default align-items:stretch, which is what makes them exactly as
   tall as their neighbours; there is no height to keep in sync by hand.

   Desktop — the floating .social-bar below, placed in the gap of the hero's
   percentage-positioned button arrangement. The mobile nav is display:none at
   that breakpoint, so only one of the two is ever on screen. */
.social-btn {
  flex-grow: 0;          /* icons keep their width; the text buttons take the rest */
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.social-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* The same fill-on-hover swap the outlined .btn uses. */
.social-btn:hover,
.social-btn:focus-visible {
  background-color: var(--colors-primary-500);
  color: var(--colors-secondary-500);
}

/* Fixed, exactly like .desktop-dialogs — the layer that holds the page's own
   nav buttons. Those are pinned to the viewport, so anchoring the social links
   the same way keeps them still when the page scrolls or a dialog opens and
   shifts the layout. Hidden below the desktop breakpoint, where the inline
   buttons above take over. */
.social-bar {
  /* Off by default; the desktop block at the bottom of this section turns it
     on. Declared once — a second display later in the block would win. */
  display: none;
  position: fixed;
  top: 0.55rem;
  left: 0;
  right: 0;
  /* Below .desktop-dialogs (50) on purpose, so anything that layer puts on
     screen covers these the same way it covers the nav buttons. That layer no
     longer intercepts clicks, so sitting under it costs nothing. */
  z-index: 5;
  justify-content: center;
  gap: 0.4rem;
  pointer-events: none;   /* only the buttons take clicks, not the empty strip */
}

.social-bar .social-link { pointer-events: auto; }

/* Deliberately built from the same ingredients as .btn — 2px border, 5px
   radius, transparent fill, and the identical hover swap — so the icons read as
   part of the same button family rather than a separate widget. */
.social-link {
  width: 34px;
  height: 28px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--colors-primary-500);
  border-radius: 5px;
  color: var(--colors-primary-500);
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.social-link:hover,
.social-link:focus-visible {
  background-color: var(--colors-primary-500);
  color: var(--colors-secondary-500);
}

.social-link svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* On the big-screen landing layout the four nav buttons are placed by percentage
   around the hero (about 25%/left, join 50%/33%, feedback 24%/right…). This puts
   the social links in the gap between About and Donate, using the same
   coordinate system so they move with the rest of that arrangement. Same
   breakpoint as .desktop-dialogs and .mobile-only, so all three agree on which
   layout is on screen and exactly one set of icons is visible. */
@media (min-width: 1024px) and (min-height: 600px) {
  .social-bar {
    display: flex;
    top: 42%;
    left: 30%;
    right: auto;
    justify-content: flex-start;
    gap: 0.6rem;   /* the buttons are button-sized up here, so 0.4rem crowds them */
  }

  /* Match .dialog-btn's box rather than guess at a pixel height. Those buttons
     are .btn with font-size:1.5rem and padding:0.5rem 5rem, so taking the same
     font-size, the same vertical padding and the shared 2px border leaves only
     the line box to account for — and ::before below supplies exactly that. */
  .social-link {
    width: auto;
    height: auto;
    box-sizing: border-box;
    font-size: 1.5rem;
    padding: 0.5rem 0.85rem;
  }

  /* A zero-width space, so the link's content box is the button's text line box
     whatever the display font's metrics turn out to be. Sizing the icon in em
     below then keeps it inside that box instead of driving the height. */
  .social-link::before {
    content: "\200B";
    width: 0;
    flex: 0 0 auto;
  }

  .social-link svg {
    width: 1.05em;
    height: 1.05em;
  }
}