/* My Links In Bio app styles */
:root {
  /* Colors */
  --brand: #198754;
  --bg: #ffffff;
  --bg-muted: #f8f9fa;
  --text: #212529;
  --text-muted: #6c757d;
  --surface: #ffffff;
  --surface-dark: #1a1a1a;
  --border: rgba(0,0,0,.1);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 4px 10px rgba(0,0,0,.06);
  --shadow-md: 0 2px 4px rgba(0,0,0,.06), 0 8px 18px rgba(0,0,0,.08);

  /* Radii */
  --radius-sm: .5rem;
  --radius: .75rem;
  --radius-lg: 1rem;

  /* Spacing scale */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Typography */
  --font-size-base: 16px; /* prevent iOS zoom */
  --h1: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --h2: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  --h3: clamp(1.25rem, .9rem + 1vw, 1.5rem);

  /* Layout helpers */
  --header-offset: 56px; /* updated at runtime */
  --bottom-nav-height: 64px;
}

html { height: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body { height: 100%; background: var(--bg); color: var(--text); }

/* Safe areas */
body { padding-bottom: env(safe-area-inset-bottom); }
.sticky-top { padding-top: env(safe-area-inset-top); }

/* Account for sticky header on anchor jumps */
html { scroll-padding-top: calc(var(--header-offset) + 8px); }

.theme-light { background: #f8f9fa; min-height: 100vh; padding: 2rem 0 5.5rem; }
.theme-dark { background: #121212; color: #e9ecef; min-height: 100vh; padding: 2rem 0 5.5rem; }
.theme-gold { background: #000; color: #d4af37; min-height: 100vh; padding: 2rem 0 5.5rem; }
.theme-gold a { color: #ffd04d; }
.theme-gold .text-muted,
.theme-gold a.text-muted { color: #d4af37 !important; }
.theme-gold footer, .theme-gold footer .text-muted { color: #d4af37 !important; border-top: 0 !important; background: transparent; }
.theme-gold .opacity-75 { opacity: .95 !important; }
.theme-gold h1, .theme-gold h2, .theme-gold h3, .theme-gold .navbar-brand {
  background: linear-gradient(180deg, #fce58b 0%, #d4af37 55%, #8c6c1a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.theme-gradient { background: linear-gradient(135deg, #20c997, #0d6efd); color: #fff; min-height: 100vh; padding: 2rem 0 5.5rem; }
.theme-minimal { background: #ffffff; min-height: 100vh; padding: 2rem 0 5.5rem; }
.theme-dark .list-group-item { background: var(--surface-dark); color: #e9ecef; border-color: #2b2b2b; }
/* Gold theme link buttons */
.theme-gold .list-links .list-group-item {
  background: linear-gradient(180deg, #f2cf66 0%, #c9a227 55%, #7a5a14 100%);
  color: #111;
  border: 1px solid rgba(122, 90, 20, 0.9);
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 8px 18px rgba(212,175,55,.18), inset 0 1px 0 rgba(255,255,255,.5);
  cursor: pointer;
}
.theme-gold .list-links .list-group-item:hover {
  background: linear-gradient(180deg, #f5da77 0%, #d2ad34 55%, #8c6c1a 100%);
  box-shadow: 0 3px 8px rgba(0,0,0,.5), 0 10px 22px rgba(212,175,55,.22), inset 0 1px 0 rgba(255,255,255,.6);
  transform: translateY(-1px);
}
.theme-gold .profile-header .profile-avatar {
  border: 4px solid rgba(212,175,55,.6);
  box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 6px 20px rgba(212,175,55,.25);
}
/* Gold theme: profile header fine-tuning */
.theme-gold .profile-header p { color: #c49b2d; }
.theme-gold .profile-header .text-muted { color: #d4af37 !important; }
.profile-header .profile-avatar { border: 4px solid rgba(0,0,0,.05); object-fit: cover; }
.list-group-item-action { font-weight: 600; text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.navbar-brand { font-weight: 700; }
.badge.bg-info { background-color: #0dcaf0 !important; }
.card { border-radius: var(--radius); }

/* Headings scale */
h1, .display-1, .display-5 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }

/* Buttons and tap targets */
.btn, .btn-sm, .btn-lg { min-height: 44px; }
.btn-sm { padding-top: .375rem; padding-bottom: .375rem; }
/* Gold theme buttons */
.theme-gold .btn,
.theme-gold .btn-primary,
.theme-gold .btn-warning {
  background: linear-gradient(180deg, #f2cf66 0%, #c9a227 55%, #7a5a14 100%);
  color: #111;
  border-color: #7a5a14;
}
.theme-gold .btn-outline-secondary {
  color: #d4af37;
  border-color: #d4af37;
}
.theme-gold .btn-outline-secondary:hover {
  background: linear-gradient(180deg, #f2cf66 0%, #c9a227 55%, #7a5a14 100%);
  color: #111;
  border-color: #7a5a14;
}
/* Gold theme: QR icon behavior (white default, black on hover) */
.theme-gold .btn-qr { color: #fff !important; }
.theme-gold .btn-outline-secondary.btn-qr:hover { color: #000 !important; }
.theme-gold .btn:hover,
.theme-gold .btn-primary:hover,
.theme-gold .btn-warning:hover {
  filter: brightness(1.05);
}

/* Skip link */
.skip-link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: static; width: auto; height: auto; z-index: 1080; }

/* Elegant link list */
.list-links { border: 0; }
.list-links .list-group-item {
  border: 0;
  background: #ffffff;
  margin-bottom: .75rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.list-links .list-group-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.theme-dark .list-links .list-group-item {
  background: var(--surface-dark);
  color: #e9ecef;
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.35);
}
.theme-gradient .list-links .list-group-item {
  background: rgba(255,255,255,.95);
  color: #212529;
}

/* Accessibility/readability tweaks */
.theme-dark .text-muted { color: #f8f9fa !important; }
.theme-dark footer, .theme-dark footer .text-muted { color: #f8f9fa !important; border-top-color: #2b2b2b; }
.theme-dark footer { border-top: 0 !important; background: transparent; }

/* Images/media responsiveness */
img, video { max-width: 100%; height: auto; }

/* Bottom app navigation (mobile) */
.app-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,.96);
  border-top: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(8px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: .25rem env(safe-area-inset-right) calc(.25rem + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  height: var(--bottom-nav-height);
  z-index: 1030;
}
.theme-dark .app-bottom-nav { background: rgba(18,18,18,.96); border-top-color: #2b2b2b; }
.app-bottom-nav .nav-item { text-align: center; color: #6c757d; text-decoration: none; display: grid; place-items: center; gap: .125rem; padding: .25rem; border-radius: .5rem; min-height: 44px; }
.app-bottom-nav .nav-item i { font-size: 1.25rem; line-height: 1; }
.app-bottom-nav .nav-item span { font-size: .75rem; line-height: 1; }
.app-bottom-nav .nav-item.is-active { color: var(--brand); font-weight: 600; }
.app-bottom-nav .nav-item:active { background: rgba(25,135,84,.08); }

/* Prevent content from being overlapped by bottom nav on mobile */
@media (max-width: 991.98px) {
  body.has-bottom-nav main { padding-bottom: calc(var(--bottom-nav-height) + 1rem + env(safe-area-inset-bottom)); }
}

/* Utilities */
.container-narrow { max-width: 720px; }
.shadow-soft { box-shadow: var(--shadow-sm) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
@media (min-width: 992px) { .w-lg-auto { width: auto !important; } }

/* Tables */
.table-sticky thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Motion and transitions */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}