/* seo.css — stil för de genererade SEO-landningssidorna (stad/märke).
   Kompletterar style.css; återanvänder sidans variabler (--accent m.fl.) med fallback. */

.seo-page { padding-top: 24px; padding-bottom: 72px; }
.seo-page .lead { max-width: 46em; }

/* Stadsnavigering */
.seo-citynav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; font-family: "IBM Plex Mono", monospace; font-size: 13px; }
.seo-citynav a { color: #141414; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.seo-citynav a:hover { border-bottom-color: #141414; }
.seo-citynav .active { color: var(--accent, #FF3B1F); border-bottom: 1px solid var(--accent, #FF3B1F); padding-bottom: 2px; }

/* Lista med sales */
.seo-sales { list-style: none; margin: 20px 0 0; padding: 0; }
.seo-sale { padding: 22px 0; border-top: 1px solid rgba(20,20,20,.12); }
.seo-sale:last-child { border-bottom: 1px solid rgba(20,20,20,.12); }
.seo-sale-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.seo-brand { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.seo-brand a { color: #141414; text-decoration: none; border-bottom: 1px solid rgba(20,20,20,.2); }
.seo-brand a:hover { border-bottom-color: #141414; }
.seo-when { margin: 6px 0 0; font-family: "IBM Plex Mono", monospace; font-size: 13px; color: #141414; }
.seo-where { margin: 3px 0 0; color: #5b5b57; font-size: 15px; }
.seo-desc { margin: 8px 0 0; max-width: 44em; color: #333; }
.seo-links { margin: 8px 0 0; font-size: 13px; }
.seo-links a { color: #5b5b57; }

/* Statusprick/etikett */
.seo-tag { font-family: "IBM Plex Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #5b5b57; border: 1px solid rgba(20,20,20,.18); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.seo-tag.live { color: var(--accent, #FF3B1F); border-color: var(--accent, #FF3B1F); }

.seo-cta { margin-top: 44px; display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .seo-brand { font-size: 18px; }
  .seo-cta .btn { flex: 1 1 100%; text-align: center; }
}