/* 24London base layer.
   Sits on top of Listygo and pulls the existing site onto the brand:
   the type scale, square corners, rules instead of shadows, one accent.
   Tokens only. No hex values below. */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
}

/* Running text is the serif. Headings and interface stay sans. */
.entry-content p,
.entry-content li,
.rtcl-listing-description p,
.listing-description p {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 27px;
  color: var(--ink);
  max-width: 68ch;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .widget-title {
  font-family: var(--font-sans);
  color: var(--ink);
  text-wrap: balance;
}

h1, .entry-title { font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 27px; line-height: 32px; font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.005em; }

/* Postcodes, phone numbers, hours, prices and reference numbers are data. */
.rtcl-price, .rtcl-post-code, .rtcl-phone, .rtcl-business-hours,
.price, .postcode, time, .rtcl-listing-id {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-hover); }

/* One visible focus ring everywhere, in the focus blue, never the brand red. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Enamel signs are cut square. This is a brand rule, not a preference. */
img, .card, .rtcl-listing-item, .rtcl-card, .widget, .entry-thumbnail,
.rtcl-images, .rtcl-thumbnail, .listing-item, .post-thumbnail {
  border-radius: var(--radius-none) !important;
}

button, .button, input[type="submit"], .btn,
input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="url"], input[type="password"],
select, textarea {
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-sans);
}

/* Rules, not shadows. */
.card, .rtcl-listing-item, .rtcl-card, .widget, .listing-item, .rtcl-sidebar > * {
  box-shadow: var(--shadow-none) !important;
  border: 1px solid var(--rule);
  background: var(--surface-raised);
}

hr, .divider { border: 0; border-top: 1px solid var(--rule); }

/* Primary actions carry the one accent. */
.btn-primary, .button-primary, .rtcl-btn-primary,
input[type="submit"], button[type="submit"] {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--plaque-field);
}

.btn-primary:hover, .button-primary:hover, .rtcl-btn-primary:hover,
input[type="submit"]:hover, button[type="submit"]:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* The states. Green means checked, amber means claimed but unchecked. */
.badge-verified, .rtcl-verified {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--verified-wash);
  color: var(--verified);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 600;
}

.badge-claimed {
  color: var(--pending);
  font-size: 13px;
  font-weight: 600;
}

/* The plaque. Square, framed, never rotated or shadowed. */
.tfl-plaque {
  display: inline-flex;
  background: var(--plaque-field);
  border: 2px solid var(--plaque-frame);
  padding: 3px;
  border-radius: var(--radius-none);
  box-shadow: none;
  transform: none;
}

.tfl-plaque > span {
  border: 1px solid var(--plaque-frame);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tfl-plaque .tfl-plaque-borough {
  font-size: 11px;
  line-height: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--pillar-red);
  text-transform: uppercase;
}

.tfl-plaque .tfl-plaque-name {
  font-size: 22px;
  line-height: 22px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--plaque-ink);
  text-transform: uppercase;
}

/* Zones of the page are divided by the 2px rule borrowed from the frame. */
.site-header { border-bottom: 2px solid var(--rule-strong); background: var(--surface-raised); }
.site-footer { border-top: 2px solid var(--rule-strong); background: var(--surface-raised); }

/* Labels are uppercase only with their letter-spacing. */
.label, .rtcl-label, .widget-title {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}