/*
Theme Name: DTLA Guide
Theme URI: https://dtlabusinessguide.com
Description: Design system for DTLA Business Guide. Child of Kadence. Holds the
             brand tokens and the components the directory's credibility rests
             on: verification badges, source lines, sponsored labels and the
             common-ownership disclosure.
Author: Joshua Michael Shelton
Template: kadence
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: dtla-guide
*/

/* ==========================================================================
   FONTS — self-hosted, latin subset only.
   Not loaded from Google: keeps a third-party host off the critical path and
   keeps visitor IPs out of Google's logs, which the privacy policy would
   otherwise have to disclose. ~101KB for all five faces.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/archivo-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/archivo-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   TOKENS
   Palette derived from Downtown LA itself: the cool near-black of the towers
   at dusk, the brass of the Art Deco facades (Eastern Columbia, the Bradbury),
   a Broadway-neon red used only for signal, and a warm paper.
   ========================================================================== */

:root {
  --dtla-ink:        #16181d;
  --dtla-ink-soft:   #2a2e37;
  --dtla-muted:      #676d78;
  --dtla-rule:       #e3e0d9;
  --dtla-paper:      #fbfaf7;
  --dtla-paper-warm: #f3efe7;
  --dtla-brass:      #a8762a;
  --dtla-brass-lt:   #c8a15a;
  --dtla-signal:     #b8322a;
  --dtla-verified:   #2f6b4f;

  --dtla-display: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --dtla-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --dtla-measure: 68ch;
  --dtla-radius:  2px;   /* editorial, not app-like */
}

/* ==========================================================================
   TYPE
   Hierarchy through space and weight, not decoration.
   ========================================================================== */

body {
  font-family: var(--dtla-body);
  color: var(--dtla-ink);
  background: var(--dtla-paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.dtla-display {
  font-family: var(--dtla-display);
  color: var(--dtla-ink);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-weight: 700; line-height: 1.05; }
h2 { font-weight: 600; line-height: 1.12; }
h3 { font-weight: 600; line-height: 1.2; }

/* The small spaced caps used for eyebrows, labels and section marks. */
.dtla-eyebrow {
  font-family: var(--dtla-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dtla-muted);
  display: block;
  margin-bottom: 0.75rem;
}

.dtla-lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--dtla-ink-soft);
  max-width: var(--dtla-measure);
}

/* Tabular numerals wherever numbers line up: prices, dates, ZIPs. */
.dtla-tnum { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   KADENCE CHROME
   ========================================================================== */

/* The site title renders but inherits a colour that vanishes against the
   header. Set it explicitly rather than trusting the palette cascade. */
.site-title {
  font-family: var(--dtla-display) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.02em;
  color: var(--dtla-ink) !important;
  margin: 0;
}

.site-header { border-bottom: 1px solid var(--dtla-rule); }

/* Kadence hides the site title in the MOBILE header by default — it assumes a
   logo image is there instead. With no logo uploaded that leaves phone users
   looking at a header containing nothing but a hamburger. Kadence marks it with
   `vs-md-false`. Until there is a real logo, show the wordmark. */
.mobile-site-branding .site-title,
.site-title.vs-md-false {
  display: block !important;
  font-size: 1rem !important;
  white-space: nowrap;
}

/* The front page supplies its own full-bleed sections, so drop Kadence's
   boxed white card and its padding there only. Interior pages keep it. */
.home .content-bg.entry-content-wrap,
.home .content-area .content-bg {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.home .entry-content-wrap { padding: 0 !important; }

/* Brand the block buttons. */
.wp-block-button__link {
  font-family: var(--dtla-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  background: var(--dtla-ink);
  color: var(--dtla-paper);
  border-radius: var(--dtla-radius);
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--dtla-ink);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
  background: var(--dtla-brass);
  border-color: var(--dtla-brass);
  color: #fff;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--dtla-ink);
  border: 1px solid var(--dtla-ink);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  background: var(--dtla-ink);
  color: var(--dtla-paper);
}

.dtla-newsletter .wp-block-button__link {
  background: var(--dtla-brass);
  border-color: var(--dtla-brass);
  color: #fff;
}

.dtla-newsletter .wp-block-button__link:hover {
  background: var(--dtla-brass-lt);
  border-color: var(--dtla-brass-lt);
  color: var(--dtla-ink);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.dtla-hero {
  padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--dtla-rule);
}

.dtla-hero h1 {
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
  margin: 0 0 1.25rem;
}

.dtla-hero .dtla-lede { font-size: clamp(1.1rem, 2vw, 1.4rem); }

/* ==========================================================================
   GRIDS — neighborhoods and categories
   ========================================================================== */

.dtla-grid {
  display: grid;
  gap: 1px;
  background: var(--dtla-rule);
  border: 1px solid var(--dtla-rule);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.dtla-grid a {
  background: var(--dtla-paper);
  padding: 1.4rem 1.25rem;
  text-decoration: none;
  color: var(--dtla-ink);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: background 120ms ease, color 120ms ease;
}

.dtla-grid a:hover,
.dtla-grid a:focus-visible {
  background: var(--dtla-ink);
  color: var(--dtla-paper);
}

.dtla-grid a:hover .dtla-grid-meta,
.dtla-grid a:focus-visible .dtla-grid-meta { color: var(--dtla-brass-lt); }

.dtla-grid-name {
  font-family: var(--dtla-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.dtla-grid-meta {
  font-size: 0.8rem;
  color: var(--dtla-muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   TRUST COMPONENTS
   These are the product. If they are ever visually weakened, the site's
   claim to be "verified" weakens with them.
   ========================================================================== */

.dtla-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--dtla-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: var(--dtla-radius);
  border: 1px solid currentColor;
}

.dtla-badge--verified { color: var(--dtla-verified); }
.dtla-badge--stale    { color: var(--dtla-muted); }
.dtla-badge--closed   { color: var(--dtla-signal); }

/* Sponsored / featured must never be mistakable for editorial. */
.dtla-badge--sponsored {
  color: var(--dtla-ink);
  background: var(--dtla-paper-warm);
  border-color: var(--dtla-brass);
}

.dtla-checked {
  font-size: 0.8rem;
  color: var(--dtla-muted);
  font-variant-numeric: tabular-nums;
}

.dtla-sources {
  font-size: 0.8rem;
  color: var(--dtla-muted);
  border-top: 1px solid var(--dtla-rule);
  padding-top: 0.75rem;
  margin-top: 1.5rem;
}

.dtla-sources a { color: var(--dtla-muted); }

/* Ownership / sponsorship disclosure. Deliberately prominent: a disclosure
   nobody notices is not a disclosure. */
.dtla-disclosure {
  border-left: 3px solid var(--dtla-brass);
  background: var(--dtla-paper-warm);
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
  border-radius: 0 var(--dtla-radius) var(--dtla-radius) 0;
}

.dtla-disclosure strong {
  font-family: var(--dtla-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* Draft policy pages carry this until counsel has reviewed them. */
.dtla-pending-review {
  border: 1px dashed var(--dtla-signal);
  color: var(--dtla-signal);
  background: #fff;
  padding: 0.9rem 1.1rem;
  font-size: 0.88rem;
  margin: 0 0 2rem;
  border-radius: var(--dtla-radius);
}

/* ==========================================================================
   EDITORIAL
   ========================================================================== */

.dtla-takeaways {
  background: var(--dtla-paper-warm);
  border: 1px solid var(--dtla-rule);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  border-radius: var(--dtla-radius);
}

.dtla-takeaways ul { margin: 0; padding-left: 1.15rem; }
.dtla-takeaways li { margin-bottom: 0.5rem; line-height: 1.5; }
.dtla-takeaways li:last-child { margin-bottom: 0; }

.dtla-answer {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--dtla-ink);
  border-left: 3px solid var(--dtla-ink);
  padding-left: 1.1rem;
  margin: 0 0 2rem;
  max-width: var(--dtla-measure);
}

.dtla-dateline {
  font-size: 0.8rem;
  color: var(--dtla-muted);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--dtla-rule);
}

/* Wide content must scroll inside itself, never the page. */
.dtla-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.dtla-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 34rem;
}

.dtla-table th,
.dtla-table td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--dtla-rule);
  vertical-align: top;
}

.dtla-table th {
  font-family: var(--dtla-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dtla-muted);
}

.dtla-table td.dtla-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */

.dtla-newsletter {
  background: var(--dtla-ink);
  color: var(--dtla-paper);
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--dtla-radius);
}

.dtla-newsletter h2 { color: var(--dtla-paper); margin-top: 0; }
.dtla-newsletter p  { color: #c9ccd2; max-width: 46ch; }
.dtla-newsletter .dtla-eyebrow { color: var(--dtla-brass-lt); }

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--dtla-brass);
  outline-offset: 2px;
}

.dtla-skip {
  position: absolute;
  left: -9999px;
}

.dtla-skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 999;
  background: var(--dtla-ink);
  color: var(--dtla-paper);
  padding: 0.75rem 1rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}