/* ============================================================================
   YOINK ATLAS — VISUAL REFRESH OVERRIDES
   Mature, warm, premium explorer's-atlas feel. Tones down sticker effects;
   moves primary CTAs from brass-shine to deep forest green; replaces the
   nth-child sticker pill palette with a parchment-and-gold ledger style.
   ============================================================================ */

/* --- Header: rich leather "binding" with grain + candlelight glow --------- */
#main-header {
  background-color: var(--yoink-ink);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(216, 180, 106, 0.18), transparent 70%),
    url("../../images/atlas-leather.jpg");
  background-size: auto, cover;
  background-position: center;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

#main-header::before {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--yoink-gold-soft) 18%,
    var(--yoink-gold) 50%,
    var(--yoink-gold-soft) 82%,
    transparent 100%);
  opacity: 0.7;
  height: 2px;
}

.logo-button {
  background: linear-gradient(135deg, var(--yoink-gold-soft) 0%, var(--yoink-gold) 100%);
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* --- Discover / Log / Share core action buttons --------------------------- */
.btn-core {
  background: var(--yoink-forest-2);
  background-image: linear-gradient(180deg, var(--yoink-forest-2) 0%, var(--yoink-forest) 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 0 0 1px rgba(216, 180, 106, 0.35) inset,
    0 6px 14px rgba(0, 0, 0, 0.28);
  letter-spacing: 0.06em;
}

/* The inner <span class="btn-text"> label inherits the .btn-text rule
   elsewhere (used for text-only delete buttons in muted color). Force it
   to inherit from the parent button so Discover/Log/Share stay white. */
.btn-core .btn-text {
  color: inherit;
  text-shadow: inherit;
}

.btn-core:hover {
  background-image: linear-gradient(180deg, #366851 0%, var(--yoink-forest) 100%);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 0 0 1px rgba(216, 180, 106, 0.55) inset,
    0 10px 20px rgba(0, 0, 0, 0.32);
}

.btn-core:focus-visible {
  outline: 2px solid var(--yoink-gold-soft);
  outline-offset: 3px;
}

/* Login / generic secondary buttons */
.btn-secondary,
#login-btn {
  background: transparent;
  background-image: none;
  color: var(--yoink-bg);
  border: 1.5px solid var(--yoink-gold-soft);
  box-shadow: none;
}

.btn-secondary:hover,
#login-btn:hover {
  background: rgba(216, 180, 106, 0.18);
  border-color: var(--yoink-gold-soft);
  color: var(--yoink-bg);
}

.help-button {
  background: rgba(216, 180, 106, 0.15);
  border: 1.5px solid var(--yoink-gold-soft);
  color: var(--yoink-bg);
}

.help-button:hover {
  background: var(--yoink-gold);
  color: var(--yoink-ink);
  border-color: var(--yoink-gold);
}

/* --- Cards: drop polaroid tilt, soften shadow, hairline border ------------ */
.yoink-card,
.yoink-card:nth-child(odd),
.yoink-card:nth-child(even),
.yoink-card:nth-child(3n),
.yoink-card:nth-child(5n) {
  transform: none;
  background-color: var(--yoink-surface);
  background-image: none;
  border: 1px solid var(--yoink-border);
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgba(36, 24, 15, 0.08),
    0 12px 28px rgba(36, 24, 15, 0.12);
}

.yoink-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(36, 24, 15, 0.10),
    0 18px 36px rgba(36, 24, 15, 0.16);
}

/* --- Category pills: ledger-tag style, no sticker rotation ---------------- */
.category-pill,
.category-pill:nth-child(odd),
.category-pill:nth-child(even),
.category-pill:nth-child(3n) {
  transform: none;
  background: var(--yoink-surface);
  color: var(--yoink-ink);
  border: 1px solid var(--yoink-border);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(36, 24, 15, 0.06);
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 600;
}

/* Override the nth-child(4n+) saturated-color rotation */
.category-pill:nth-child(4n+1),
.category-pill:nth-child(4n+2),
.category-pill:nth-child(4n+3),
.category-pill:nth-child(4n) {
  background: var(--yoink-surface);
  color: var(--yoink-ink);
}

.category-pill:hover {
  transform: translateY(-1px);
  background: #fffaf0;
  border-color: rgba(90, 52, 29, 0.4);
  box-shadow: 0 2px 6px rgba(36, 24, 15, 0.12);
}

.category-pill.active:not(.category-pill-all),
.category-pill[aria-pressed="true"]:not(.category-pill-all) {
  background: var(--yoink-forest-2);
  color: var(--yoink-bg);
  border-color: var(--yoink-forest);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 6px rgba(36, 24, 15, 0.18);
  transform: none;
}

.category-pill-all {
  background: var(--yoink-ink);
  background-image: none;
  color: var(--yoink-gold-soft);
  border: 1px solid var(--yoink-gold);
}

.category-pill-all:hover {
  background: var(--yoink-brown);
  background-image: none;
  color: var(--yoink-gold-soft);
  border-color: var(--yoink-gold-soft);
}

.category-pill-all.active {
  background: var(--yoink-forest);
  background-image: none;
  color: var(--yoink-gold-soft);
  border-color: var(--yoink-gold);
}

.category-pill-cta {
  background: var(--yoink-surface);
  background-image: none;
  border: 1px dashed var(--yoink-gold);
  color: var(--yoink-brown);
}

.category-pill-cta:hover {
  background: #fffaf0;
  background-image: none;
  border-color: var(--yoink-forest-2);
  color: var(--yoink-forest);
}

/* --- Map / Grid view toggle (lives in dark header) ------------------------ */
.header-view-toggle {
  background: rgba(216, 180, 106, 0.12);
  border: 1px solid rgba(216, 180, 106, 0.35);
}

.view-toggle-btn {
  color: rgba(244, 234, 216, 0.65);
}

.view-toggle-btn:hover {
  background: rgba(216, 180, 106, 0.18);
  color: var(--yoink-bg);
}

.view-toggle-btn.active,
.view-toggle-btn[aria-pressed="true"] {
  background: var(--yoink-bg);
  color: var(--yoink-forest);
  box-shadow: inset 0 0 0 1px var(--yoink-gold);
}

.view-toggle-btn.active:hover {
  background: var(--yoink-surface);
}

/* --- Modal & auth modal --------------------------------------------------- */
.modal-backdrop {
  background: rgba(36, 24, 15, 0.72);
  backdrop-filter: blur(6px);
}

.modal-content {
  background-color: var(--yoink-surface);
  background-image: url("../../images/atlas-card-paper.jpg");
  border: 1px solid var(--yoink-gold);
  box-shadow:
    var(--yoink-shadow),
    0 4px 12px rgba(36, 24, 15, 0.18);
}

.modal-content::before {
  /* keep the inner ledger rule but make it antique gold, hairline */
  border: 1px solid rgba(184, 137, 53, 0.35);
}

.modal-close {
  background: var(--yoink-bg);
  border: 1px solid var(--yoink-border);
  color: var(--yoink-brown);
}

.modal-close:hover {
  background: var(--yoink-gold);
  border-color: var(--yoink-gold);
  color: var(--yoink-ink);
}

.auth-tabs {
  background: var(--yoink-bg);
  border: 1px solid var(--yoink-border);
}

.auth-tab {
  color: var(--yoink-muted);
}

.auth-tab:hover {
  color: var(--yoink-ink);
}

.auth-tab.active {
  background: var(--yoink-surface);
  color: var(--yoink-forest);
  box-shadow: 0 1px 2px rgba(36, 24, 15, 0.12);
}

.auth-btn-primary {
  background: var(--yoink-forest-2);
  color: var(--yoink-bg);
}

.auth-btn-primary:hover:not(:disabled) {
  background: var(--yoink-forest);
}

.auth-btn-secondary {
  background: var(--yoink-bg);
  color: var(--yoink-ink);
  border: 1px solid var(--yoink-border);
}

.auth-btn-secondary:hover:not(:disabled) {
  background: var(--paper-aged);
  border-color: var(--yoink-brown);
}

.auth-btn-google {
  background: var(--yoink-surface);
  color: var(--yoink-ink);
  border: 1px solid var(--yoink-border);
}

.auth-btn-google:hover:not(:disabled) {
  background: var(--paper-aged);
  border-color: var(--yoink-brown);
}

.form-group input {
  background: var(--yoink-surface);
  border: 1px solid var(--yoink-border);
  color: var(--yoink-ink);
}

.form-group input:focus {
  border-color: var(--yoink-forest-2);
  box-shadow: 0 0 0 3px rgba(47, 90, 67, 0.18);
}

/* --- Profile / user dropdown menu ----------------------------------------- */
.user-menu-dropdown {
  background: var(--yoink-surface);
  border: 1px solid var(--yoink-border);
  border-radius: 10px;
  box-shadow: var(--yoink-shadow);
}

.user-menu-header {
  border-bottom: 1px solid var(--yoink-border);
}

.user-menu-item {
  color: var(--yoink-ink);
}

.user-menu-item:hover {
  background: var(--paper-aged);
}

.user-menu-divider {
  background: var(--yoink-border);
}

.user-avatar {
  border: 2px solid var(--yoink-gold-soft);
  background-color: rgba(216, 180, 106, 0.25);
}

/* --- Quiet decorative rotations on social/etc. --------------------------- */
.social-link,
.beta-notice {
  transform: none !important;
}