/* Focused follow-up fixes for Lovable parity, contrast, admin usability and object interactions. */
:root {
  --primary-foreground: 26 64% 11%;
  --gold-contrast: 26 64% 11%;
}

/* In light mode every interactive accent uses the same ochre-gold as the
   primary “Search Archive” action. Dark mode keeps its existing palette. */
:root:not(.dark) {
  --gold: 36 67% 49%;
  --gold-soft: 36 67% 45%;
  --gold-on-dark: 36 67% 49%;
  --accent: 36 67% 49%;
  --ring: 36 67% 49%;
  --sidebar-primary: 36 67% 49%;
  --sidebar-ring: 36 67% 49%;
}

.gradient-gold,
.gradient-gold h1,
.gradient-gold h2,
.gradient-gold h3,
.gradient-gold p,
.gradient-gold .eyebrow {
  color: hsl(var(--gold-contrast));
}

.gradient-gold .btn {
  background: hsl(var(--gold-contrast));
  color: hsl(36 33% 98%);
}

.gradient-gold .btn.ghost {
  border-color: hsl(var(--gold-contrast) / .5);
  background: transparent;
  color: hsl(var(--gold-contrast));
}

.dark .gradient-gold,
.dark .gradient-gold h1,
.dark .gradient-gold h2,
.dark .gradient-gold h3,
.dark .gradient-gold p,
.dark .gradient-gold .eyebrow {
  color: hsl(25 25% 10%);
}

/* Homepage follows the actual Lovable React hierarchy rather than flat Razor sections. */
.home-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.home-hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, hsl(var(--surface-dark)), hsl(var(--brown-on-dark)), hsl(var(--surface-dark)));
}

.home-hero__pattern {
  position: absolute;
  inset: 0;
  opacity: .06;
  background-image: repeating-linear-gradient(45deg, hsl(var(--gold)) 0, hsl(var(--gold)) 1px, transparent 0, transparent 50%);
  background-size: 60px 60px;
}

.home-hero__content,
.home-section__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 64rem);
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  text-align: center;
}

.home-hero__content {
  padding-top: 5rem;
}

.home-eyebrow {
  margin: 0 0 1rem;
  color: hsl(var(--gold));
  font: 500 .78rem/1.4 var(--font-body);
  letter-spacing: .3em;
  text-transform: uppercase;
}

.home-hero h1 {
  margin: 0 0 1.5rem;
  color: hsl(var(--cream-on-dark));
  font: 700 clamp(2.55rem, 6vw, 4.75rem)/1.08 var(--font-heading);
}

.home-hero h1 span,
.home-section h2 span {
  color: hsl(var(--gold));
  font-style: italic;
}

.home-hero__body,
.home-section__inner > p:not(.home-eyebrow) {
  max-width: 42rem;
  margin: 0 auto 2rem;
  color: hsl(var(--muted-foreground));
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  line-height: 1.7;
}

.home-hero__body {
  color: hsl(var(--cream-on-dark) / .7);
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.home-actions .btn {
  margin: 0;
  min-width: 10.5rem;
}

.home-scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  width: 1.5rem;
  height: 2.5rem;
  transform: translateX(-50%);
  border: 2px solid hsl(var(--gold) / .4);
  border-radius: 999px;
  display: flex;
  justify-content: center;
  padding-top: .5rem;
}

.home-scroll-indicator span {
  width: .25rem;
  height: .625rem;
  border-radius: 999px;
  background: hsl(var(--gold) / .6);
}

.home-stats {
  border-bottom: 1px solid hsl(var(--gold) / .1);
}

.home-stats__grid {
  width: min(100%, 72rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-stats article {
  padding: 2.5rem 1rem;
  text-align: center;
  border-right: 1px solid hsl(var(--gold) / .07);
}

.home-stats article:last-child {
  border-right: 0;
}

.home-stats strong {
  display: block;
  margin-bottom: .25rem;
  color: hsl(var(--gold));
  font: 700 clamp(1.9rem, 3vw, 2.35rem)/1 var(--font-heading);
}

.home-stats span {
  color: hsl(var(--cream-on-dark) / .55);
  font-size: .9rem;
}

.home-section,
.home-sponsor {
  padding: 6rem 1.25rem;
}

.home-section__inner h2,
.home-sponsor h2 {
  margin: 0 0 1.5rem;
  font: 700 clamp(2.1rem, 4.5vw, 3rem)/1.14 var(--font-heading);
}

.home-section--dark .home-section__inner > p:not(.home-eyebrow) {
  color: hsl(var(--cream-on-dark) / .65);
}

.home-sponsor {
  position: relative;
  overflow: hidden;
}

.home-sponsor .home-section__inner {
  max-width: 48rem;
}

.home-sponsor p {
  max-width: 36rem;
  margin: 0 auto 2.5rem;
  color: hsl(var(--gold-contrast) / .78);
  font-size: 1.05rem;
  line-height: 1.7;
}

.home-sponsor__button {
  border: 1px solid hsl(var(--gold-contrast));
  background: hsl(var(--gold-contrast)) !important;
  color: hsl(36 33% 98%) !important;
}

.object-comparison-link {
  margin: .35rem 0 2.25rem;
}

.object-map {
  min-height: 0;
}

.object-map__canvas {
  width: 100%;
  height: clamp(18rem, 34vw, 25rem);
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: .55rem;
  background: hsl(var(--muted));
}

.object-map__fallback {
  margin-top: .75rem;
  border: 1px dashed hsl(var(--border));
  border-radius: .45rem;
  padding: 1rem;
  color: hsl(var(--muted-foreground));
}

.leaflet-container {
  font-family: var(--font-body);
  background: hsl(var(--muted));
}

.leaflet-control-attribution {
  font-size: .65rem;
}

/* site.css still contains the legacy .object-map svg rule. Restrict Leaflet's small attribution flag explicitly. */
.object-map .leaflet-control-attribution svg {
  display: inline-block !important;
  width: 12px !important;
  height: 8px !important;
  min-width: 12px !important;
  max-width: 12px !important;
  border-radius: 0 !important;
  background: transparent !important;
  vertical-align: baseline;
}

.object-map [data-map-zoom-in],
.object-map [data-map-zoom-out] {
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border-color: hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: none;
}

.object-map [data-map-zoom-in]:hover,
.object-map [data-map-zoom-out]:hover {
  border-color: hsl(var(--gold));
  background: hsl(var(--gold) / .12);
  color: hsl(var(--foreground));
}

.object-comment-delete {
  margin-top: .65rem;
}

.object-comment-delete button {
  border: 0;
  padding: 0;
  background: transparent;
  color: hsl(var(--destructive));
  font-size: .82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.two-factor-reminder {
  width: min(34rem, calc(100% - 2rem));
  max-width: none;
  border: 1px solid hsl(var(--gold) / .35);
  border-radius: .8rem;
  padding: 0;
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  box-shadow: 0 24px 80px rgba(0,0,0,.3);
}

.two-factor-reminder::backdrop {
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(3px);
}

.two-factor-reminder__panel {
  position: relative;
  padding: 2rem;
}

.two-factor-reminder__panel h2 {
  margin: 0 0 1rem;
  font: 700 clamp(1.65rem, 4vw, 2.15rem)/1.15 var(--font-heading);
}

.two-factor-reminder__panel > p:not(.lovable-eyebrow) {
  margin: 0;
  color: hsl(var(--muted-foreground));
  line-height: 1.65;
}

.two-factor-reminder__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 1.5rem;
}

.two-factor-reminder__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}

.admin-users-page {
  padding-top: 7.5rem !important;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.admin-stat-card {
  display: grid;
  gap: .2rem;
  min-height: 6.2rem;
  align-content: center;
  border: 1px solid hsl(var(--border));
  border-radius: .75rem;
  padding: 1rem 1.2rem;
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  text-decoration: none;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.admin-stat-card:hover {
  border-color: hsl(var(--gold));
  transform: translateY(-1px);
}

.admin-stat-card.is-active {
  border-color: hsl(var(--gold));
  box-shadow: inset 0 0 0 1px hsl(var(--gold) / .3);
}

.admin-stat-card strong {
  font: 700 1.8rem/1 var(--font-heading);
  color: hsl(var(--gold));
}

.admin-stat-card span {
  color: hsl(var(--muted-foreground));
}

.admin-user-search {
  display: flex;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.admin-user-search input[type="search"],
.admin-user-search input:not([type]) {
  min-width: 0;
  flex: 1;
}

.admin-user-table th,
.admin-user-table td {
  border-bottom: 1px solid hsl(var(--border));
  padding: .85rem .7rem;
  text-align: left;
  vertical-align: top;
}

.admin-user-table th {
  color: hsl(var(--muted-foreground));
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.admin-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-top: 2rem;
}

.admin-page-link {
  display: inline-flex;
  min-width: 2.5rem;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--border));
  border-radius: .4rem;
  padding: .45rem .75rem;
  background: hsl(var(--card));
  text-decoration: none;
}

.admin-page-link:hover:not(.is-disabled),
.admin-page-link.is-current {
  border-color: hsl(var(--gold));
  background: hsl(var(--gold));
  color: hsl(var(--primary-foreground));
}

.admin-page-link.is-disabled {
  opacity: .42;
  pointer-events: none;
}

.admin-page-ellipsis {
  padding: 0 .2rem;
  color: hsl(var(--muted-foreground));
}

.admin-artwork-form {
  display: grid;
  gap: 1.5rem;
}

.admin-artwork-fieldset {
  border: 1px solid hsl(var(--border));
  border-radius: .75rem;
  padding: 1.25rem;
  background: hsl(var(--card));
}

.admin-artwork-fieldset legend {
  padding: 0 .45rem;
  color: hsl(var(--gold));
  font: 600 1.05rem var(--font-heading);
}

.admin-artwork-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.admin-artwork-field {
  display: grid;
  gap: .4rem;
  margin: 0;
}

.admin-artwork-field > span,
.admin-artwork-field__value > span {
  color: hsl(var(--muted-foreground));
  font-size: .78rem;
  letter-spacing: .04em;
}

.admin-artwork-field__value {
  display: grid;
  gap: .4rem;
  margin: 0;
}

.admin-artwork-suggestion-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .25rem 0 0;
  color: hsl(var(--muted-foreground));
  font-size: .78rem;
}

.admin-artwork-suggestion-toggle input {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  accent-color: hsl(var(--gold));
}

.admin-artwork-field input,
.admin-artwork-field textarea {
  width: 100%;
  background: hsl(var(--background));
}

.admin-artwork-field--wide {
  grid-column: 1 / -1;
}

.admin-artwork-checkbox {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
}

.admin-artwork-checkbox input {
  width: 1rem;
  height: 1rem;
}

.admin-artwork-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

@media (max-width: 767px) {
  .home-hero__content { padding-top: 6rem; }
  .home-actions { flex-direction: column; }
  .home-actions .btn { width: min(100%, 22rem); }
  .home-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-stats article:nth-child(2) { border-right: 0; }
  .home-stats article:nth-child(-n+2) { border-bottom: 1px solid hsl(var(--gold) / .07); }
  .home-section, .home-sponsor { padding: 4.5rem 1.25rem; }
  .two-factor-reminder__actions { flex-direction: column; }
  .two-factor-reminder__actions .btn { width: 100%; }
  .admin-stat-grid,
  .admin-artwork-fields { grid-template-columns: 1fr; }
  .admin-user-search { flex-direction: column; }
  .admin-user-search .btn { width: 100%; }
}
