/* Gemensam, tillgänglig grund för samtliga äldre Traktens-block. */
:root {
  --trk-bg: #f7f3e9;
  --trk-surface: #fffdf7;
  --trk-surface-muted: #eee9dc;
  --trk-text: #24231e;
  --trk-text-muted: #59554b;
  --trk-green: #245a45;
  --trk-green-hover: #184534;
  --trk-green-soft: #6fae8c;
  --trk-action: #245a45;
  --trk-action-hover: #184534;
  --trk-gold: #c9a84c;
  --trk-gold-soft: #e2cc82;
  --trk-border: #b9ad96;
  --trk-on-dark: #fffdf7;
  --trk-on-accent: #17251d;
  --trk-danger: #9f2828;
  --trk-focus: #0067c5;
  --trk-scrim: rgb(12 18 14 / 0.72);
  --trk-directory-scrim: rgb(12 18 14 / 0.38);

  /* Bakåtkompatibla namn medan de gamla blocken fasas ut. */
  --traktens-bg: var(--trk-bg);
  --traktens-surface: var(--trk-surface);
  --traktens-muted: var(--trk-surface-muted);
  --traktens-text: var(--trk-text);
  --traktens-text-muted: var(--trk-text-muted);
  --traktens-green: var(--trk-green);
  --traktens-green-soft: var(--trk-green-soft);
  --traktens-gold: var(--trk-gold);
  --traktens-border: var(--trk-border);
  --traktens-on-accent: var(--trk-on-accent);
  --c-ink: var(--trk-text);
  --c-primary: var(--trk-green);
  --c-secondary: var(--trk-green);
  --c-accent: var(--trk-gold);
  --c-bg: var(--trk-surface);
  --c-bg-muted: var(--trk-surface-muted);
  --c-border: var(--trk-border);
  --color-primary: var(--trk-green);
  --color-secondary: var(--trk-green);
  --color-secondary-hover: var(--trk-green-hover);
  --color-accent: var(--trk-gold);
  --color-neutral: var(--trk-surface);
  --color-text-muted: var(--trk-text-muted);
  --color-border: var(--trk-border);
  --ui-bg: var(--trk-bg);
  --ui-surface: var(--trk-surface);
  --ui-border: var(--trk-border);
  --ui-text: var(--trk-text);
  --ui-muted: var(--trk-text-muted);
  --ui-green: var(--trk-green);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --trk-bg: #171a17;
  --trk-surface: #222722;
  --trk-surface-muted: #303730;
  --trk-text: #faf8f0;
  --trk-text-muted: #ded8ca;
  --trk-green: #8bcba8;
  --trk-green-hover: #a8ddbf;
  --trk-green-soft: #6fae8c;
  --trk-action: #286246;
  --trk-action-hover: #347c5a;
  --trk-gold: #c9a84c;
  --trk-gold-soft: #e2cc82;
  --trk-border: #718176;
  --trk-focus: #9fc9ff;
  --trk-scrim: rgb(5 8 6 / 0.78);
  --trk-directory-scrim: rgb(5 8 6 / 0.58);
  color-scheme: dark;
}

html { background: var(--trk-bg); }
body,
.traktens-app {
  background-color: var(--trk-bg) !important;
  color: var(--trk-text) !important;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.traktens-embed-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--trk-green);
  font: 700 18px/1.3 "Nunito Sans", system-ui, sans-serif;
}
.traktens-embed-brand img { width: 42px; height: 42px; object-fit: contain; }
:root[data-theme="dark"] .traktens-embed-brand { color: var(--trk-gold); }

/* Fotografier får ett jämnt mörkt lager; skuggor används inte som läsbarhetslösning. */
.header::before { background: var(--trk-scrim) !important; }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--trk-scrim);
  pointer-events: none;
}
.site-header > * { position: relative; z-index: 1; }
.p-hero-overlay { background: var(--trk-scrim) !important; }
.header .title,
.header .subtitle,
.site-header .site-title,
.site-header .site-description,
.site-header .site-subtitle,
.site-header .site-tagline,
.p-hero-h1,
.p-hero-tagline {
  color: var(--trk-on-dark) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
.header .title,
.site-header .site-title,
.p-hero-h1 {
  color: var(--trk-gold) !important;
  font-family: "Lora", Georgia, serif !important;
  font-weight: 700 !important;
}
.header .subtitle,
.site-header .site-description,
.site-header .site-subtitle,
.site-header .site-tagline { font-size: max(1rem, 16px) !important; }

/* Ytor och vanlig text. */
.app,
.container,
.card,
.panel,
.overlay-panel,
.table-wrap,
.collection-card,
.category-card,
.filter-box,
.sponsor-block,
.sponsor-message,
.messages-container,
.message.bot .message-bubble,
.input-container,
.producer-card,
input,
select,
textarea,
table,
th,
td {
  border-color: var(--trk-border) !important;
}
.card,
.panel,
.overlay-panel,
.table-wrap,
.collection-card,
.category-card,
.filter-box,
.sponsor-block,
.sponsor-message,
.messages-container,
.message.bot .message-bubble,
.input-container,
.producer-card,
input,
select,
textarea,
table,
td { background: var(--trk-surface) !important; color: var(--trk-text) !important; }
.section-title,
.category-title,
.overlay-title,
.search h3,
.label,
.producer-card h4,
.collection-card h4 { color: var(--trk-text) !important; }
.sponsor-header,
.sponsor-signature,
.message-time,
.no-site,
.producer-card-label { color: var(--trk-text-muted) !important; }

/* Gult har alltid mörk text. */
.banner,
.p-cta-banner {
  background: var(--trk-gold-soft) !important;
  color: var(--trk-on-accent) !important;
}
.banner *,
.p-cta-banner * { color: var(--trk-on-accent) !important; }
.banner .btn,
.btn-site,
.sponsor-btn.yellow,
.mobile-toggle,
.category-link.special {
  background: var(--trk-gold) !important;
  color: var(--trk-on-accent) !important;
  border-color: var(--trk-on-accent) !important;
}

/* Gröna åtgärder får ett uttryckligt, kontrasterande textpar. */
.category-link,
.category-link.primary,
.sponsor-btn.green,
.filter-btn.active,
.category-filter-btn.active,
.link-card {
  background: var(--trk-action) !important;
  color: var(--trk-on-dark) !important;
  border-color: var(--trk-action) !important;
  font-size: max(1rem, 16px) !important;
}
.category-link *,
.category-link.primary *,
.sponsor-btn.green *,
.filter-btn.active *,
.category-filter-btn.active *,
.link-card * { color: inherit !important; }
.category-link:hover,
.category-link.primary:hover,
.sponsor-btn.green:hover,
.btn-site:hover,
.banner .btn:hover {
  background: var(--trk-action-hover) !important;
  color: var(--trk-on-dark) !important;
}
.badge {
  background: var(--trk-surface-muted) !important;
  color: var(--trk-text) !important;
  border-color: var(--trk-border) !important;
}

/* Tabeller, kartor och kontroller. */
thead,
th { background: var(--trk-action) !important; color: var(--trk-on-dark) !important; }
tbody tr:nth-child(even) { background: var(--trk-surface-muted) !important; }
#map { border-color: var(--trk-green) !important; }
.map-meta { background: var(--trk-surface-muted) !important; color: var(--trk-text) !important; }
.leaflet-control,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip { background: var(--trk-surface) !important; color: var(--trk-text) !important; }
:root[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.88) contrast(1.05) saturate(.85); }

/* Datapunkter ser likadana ut i ljust och mörkt läge: fyllda färger, ljus kant, mörk siffra. */
.marker-cluster { background: rgb(255 255 255 / 0.85) !important; box-shadow: 0 1px 4px rgb(0 0 0 / 0.45); }
.marker-cluster div { color: #17251d !important; font-weight: 800 !important; font-size: 13px !important; }
.marker-cluster-small div { background: #7cc96b !important; }
.marker-cluster-medium div { background: #f2c94c !important; }
.marker-cluster-large div { background: #f2994a !important; }
.leaflet-marker-icon { filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.5)); }

button,
a,
input,
select,
textarea { min-height: 44px; }
:focus-visible {
  outline: 3px solid var(--trk-focus) !important;
  outline-offset: 3px !important;
}

/* --- Hitta och Registrera (startsida-2) komponenter --- */
.site-header {
  position: relative;
  padding: 4rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 400px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.site-title {
  font-size: clamp(2rem, 5vw, 3rem) !important;
  font-weight: 900 !important;
  margin: 0;
}

.site-subtitle {
  font-size: clamp(1.25rem, 3vw, 1.5rem) !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  color: var(--trk-on-dark) !important;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 2rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.category-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.category-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.category-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: auto;
}

.category-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none !important;
  min-height: 44px;
}

.category-link:hover {
  background: var(--trk-action-hover) !important;
  transform: translateX(4px);
}

@media (max-width: 600px) {
  body, .traktens-app { font-size: 17px; }
  .site-header .site-description,
  .site-header .site-subtitle,
  .site-header .site-tagline { font-size: 16px !important; line-height: 1.65 !important; }
  .category-link, .banner .btn, .sponsor-btn { min-height: 48px; }
  .site-header { padding: 3rem 1rem; min-height: 300px; }
  .categories-grid { grid-template-columns: 1fr; padding: 1rem; }
}
@media (prefers-contrast: more) {
  :root { --trk-border: currentColor; --trk-scrim: rgb(0 0 0 / 0.9); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Hitta och registrera: samma innehåll i en nättare, lättläst katalog. */
.traktens-directory .container {
  border: 1px solid var(--trk-border) !important;
  border-radius: 8px !important;
}
.traktens-directory .site-header {
  min-height: 220px !important;
  padding: 32px 24px !important;
}
.traktens-directory .site-header::before {
  background: var(--trk-directory-scrim) !important;
}
.traktens-directory .site-icon {
  color: var(--trk-gold) !important;
}
.traktens-directory .header-content {
  margin-bottom: 12px !important;
}
.traktens-directory .site-description {
  max-width: 760px !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
}
.traktens-directory .site-subtitle {
  margin: 8px 0 2px !important;
  color: var(--trk-on-dark) !important;
  font-size: 1.05rem !important;
}
.traktens-directory .site-tagline {
  font-size: 1rem !important;
}
.traktens-directory .main-content {
  padding: 24px !important;
}
.traktens-directory .categories-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 0 !important;
}
.traktens-directory .category-card,
.traktens-directory .category-card.special {
  padding: 14px !important;
  border: 1px solid var(--trk-border) !important;
  border-radius: 8px !important;
  background: var(--trk-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}
.traktens-directory .category-card::before {
  display: none !important;
}
.traktens-directory .category-header {
  gap: 8px !important;
  margin-bottom: 10px !important;
}
.traktens-directory .category-icon {
  font-size: 1.1rem !important;
}
.traktens-directory .category-title {
  font: 600 1rem/1.3 "Lora", serif !important;
}
.traktens-directory .category-links {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.traktens-directory .category-link {
  min-height: 44px !important;
  padding: 8px 10px !important;
  border-width: 1px !important;
  border-radius: 6px !important;
  font-size: 0.9rem !important;
  transform: none !important;
}
.traktens-directory .category-link::before {
  display: none !important;
}
.traktens-directory .site-footer {
  padding: 18px 24px !important;
  border-top: 2px solid var(--trk-gold) !important;
  background: var(--trk-action) !important;
  color: var(--trk-on-dark) !important;
}
.traktens-directory .footer-content {
  max-width: 900px !important;
}
.traktens-directory .footer-title {
  margin-bottom: 4px !important;
  color: var(--trk-on-dark) !important;
  font: 600 1.05rem/1.3 "Lora", serif !important;
}
.traktens-directory .footer-description,
.traktens-directory .footer-contact {
  margin-bottom: 2px !important;
  color: var(--trk-on-dark) !important;
  font-size: 0.9rem !important;
}
.traktens-directory .footer-contact a {
  color: var(--trk-gold) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

@media (max-width: 600px) {
  .traktens-directory .site-header {
    min-height: 190px !important;
    padding: 24px 16px !important;
  }
  .traktens-directory .main-content {
    padding: 14px !important;
  }
  .traktens-directory .categories-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .traktens-directory .category-card,
  .traktens-directory .category-card.special {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(150px, auto) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 10px !important;
  }
  .traktens-directory .category-header {
    min-width: 0;
    margin-bottom: 0 !important;
  }
  .traktens-directory .category-title {
    font-size: 0.9rem !important;
  }
  .traktens-directory .category-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  .traktens-directory .category-link {
    justify-content: center !important;
    gap: 4px !important;
    padding: 6px !important;
    font-size: 0.75rem !important;
  }
  .traktens-directory .link-icon {
    font-size: 0.75rem !important;
  }
  .traktens-directory .site-footer {
    padding: 16px !important;
  }
}