/* =============================================================
   Spartan Agency — Base
   Reset, typography defaults, layout primitives, and the shared
   button + form + a11y styles that section CSS builds on. No
   section-specific styling lives here.

   Palette + type + spacing tokens are declared in tokens.css and
   are safe to reference by their semantic aliases (--surface,
   --text, --accent) without pinning to the raw color values.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

/* Body defaults to LIGHT bg + INK text -- Spartan's Hibu original
   is a light-mode site with the plum header, plum sidebar blocks,
   and near-black footer as the local dark surfaces. Only .section--dark
   or an explicit dark shell should override to a dark surface. */
body {
  margin: 0;
  font-family: var(--font-prose);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--text);
  background-color: var(--surface-page);
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img { height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Body links render plum + underlined (Hibu's convention: prose
   copy links are always plum with an underline). Section-scoped
   nav / button styles override this locally. */
a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}

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

/* Nav and button anchors opt out of the underlined-link default
   (their own selectors set text-decoration: none). */
nav a,
.btn,
.btn:link,
.btn:visited {
  text-decoration: none;
}

ul, ol, li { list-style: none; padding: 0; margin: 0; }
p { margin: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: inherit;
}

/* Global heading-color rule: on light surfaces gold is the correct
   color for H3 section titles, but base --gold is only ~2.1:1 on
   bone/white, so use --gold-2 (>=3:1 for large text, and still
   >=4.8:1 on charcoal). Section CSS is free to override for hero H1
   (white on photo) and the single-property "For Rent" H3. */
.section h3,
.tx-h3 {
  color: var(--gold-2);
  line-height: var(--lh-h3);
}

input, textarea, select {
  font: inherit;
  color: inherit;
  background: transparent;
  color-scheme: light;
}

::selection {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* ---------- Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  padding-inline: var(--gutter);
  margin-inline: auto;
}

.wrap-narrow {
  width: 100%;
  max-width: var(--max-w-narrow);
  padding-inline: var(--gutter);
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* Section palette utilities. `.section--dark` is the new canonical
   class for dark-surface sections; `.section--plum` is retained as a
   legacy alias because block patterns and editor content still emit
   it — both resolve to `--surface-dark` (charcoal in the 2026 rebrand). */
.section--light  { background: var(--surface-content); color: var(--text); }
.section--bone   { background: var(--surface-page);    color: var(--text); }
.section--dark,
.section--plum   { background: var(--surface-dark);    color: var(--text-on-dark); }
.section--footer { background: var(--surface-footer);  color: var(--on-footer); }

/* Plum (`--link`) is tuned for light surfaces and drops to ~1.5:1 on
   charcoal, so inline links inside dark sections inherit the section
   ink and keep their underline as the affordance; hover/focus go gold
   (>=8:1 on charcoal). Buttons and nav anchors set their own colors. */
.section--dark a:not(.tx-btn):not(.btn):not(.wp-block-button__link),
.section--plum a:not(.tx-btn):not(.btn):not(.wp-block-button__link) {
  color: inherit;
}
.section--dark a:not(.tx-btn):not(.btn):not(.wp-block-button__link):hover,
.section--dark a:not(.tx-btn):not(.btn):not(.wp-block-button__link):focus-visible,
.section--plum a:not(.tx-btn):not(.btn):not(.wp-block-button__link):hover,
.section--plum a:not(.tx-btn):not(.btn):not(.wp-block-button__link):focus-visible {
  color: var(--accent);
}

/* ---------- Type utilities ---------- */
.tx-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  /* Eyebrows on light surfaces render charcoal (plum is reserved for
     hyperlinks in the 2026 palette; gold alone fails 4.5:1 on white).
     Dark-surface sections (`.section--dark`, `.section--plum`,
     `.site-footer`) opt into gold where gold-on-charcoal is >=8.24:1. */
  color: var(--charcoal-2);
}

.section--dark .tx-eyebrow,
.section--plum .tx-eyebrow,
.site-footer .tx-eyebrow {
  color: var(--accent);
}

/* Gold H1 for the Contact page hero. `--gold-2` (#A88320) on white
   is 3.20:1 -- clears the WCAG 1.4.3 "large text" 3:1 threshold at
   H1 sizes. Do NOT use for body-sized text on light surfaces. */
.tx-h1--gold-large {
  color: var(--gold-2);
}

.tx-hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--on-plum);          /* hero H1 sits on dark photo overlay */
  text-align: center;
}

.tx-hero-sub {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--on-plum);
  text-align: center;
  margin-top: var(--s-3);
}

.tx-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--accent);
}

.tx-h3--plum { color: var(--plum); }
.tx-h3--on-dark { color: var(--on-plum); }

.tx-body {
  font-family: var(--font-prose);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.tx-body a { color: var(--link); text-decoration: underline; }

/* ---------- Buttons ----------
   Two variants match Hibu exactly: slate (Learn More / Pay Online /
   Get Directions) and plum (Write a Review / Apply Now). Both use
   the same pill shape (border-radius = var(--r-pill) = 50px). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px 30px;
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  font-weight: 400;
  line-height: 22px;
  letter-spacing: var(--tracking-nav);
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  text-align: center;
  min-width: 160px;
}

.btn--slate,
.btn--slate:link,
.btn--slate:visited {
  background: var(--slate);
  border-color: var(--slate);
  color: var(--on-plum);
}

.btn--slate:hover,
.btn--slate:focus-visible,
.btn--slate:active {
  background: var(--slate-2);
  border-color: var(--slate-2);
  color: var(--on-plum);
  /* 2026 refresh — subtle hover lift on all filled buttons.
     Uses --elev-1 (a 1px+2px ambient stack) so it modernizes the
     look without introducing the heavy drop shadows Hibu avoided.
     Skipped when prefers-reduced-motion is on (see @media below). */
  box-shadow: var(--elev-1);
  transform: translateY(-1px);
}

/* Primary CTA — 2026 rebrand: gold background, charcoal ink. `.btn--plum`
   is kept as a legacy alias because block patterns and Editor content
   both reference the old class name; the visual is identical to
   `.btn--primary` so existing pages get the new brand automatically. */
.btn--primary,
.btn--primary:link,
.btn--primary:visited,
.btn--plum,
.btn--plum:link,
.btn--plum:visited {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-primary-ink);
}

.btn--primary:hover,
.btn--primary:focus-visible,
.btn--primary:active,
.btn--plum:hover,
.btn--plum:focus-visible,
.btn--plum:active {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--brand-primary-ink);
  box-shadow: var(--elev-1);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .btn--slate:hover, .btn--slate:focus-visible, .btn--slate:active,
  .btn--primary:hover, .btn--primary:focus-visible, .btn--primary:active,
  .btn--plum:hover,  .btn--plum:focus-visible,  .btn--plum:active {
    transform: none;
    box-shadow: none;
  }
}

/* Gold ghost — used inside plum surfaces where a filled plum button
   would disappear (e.g. sidebar block CTA). Border + text switch to
   gold on plum for a 4.6:1 contrast ratio. */
.btn--gold-ghost,
.btn--gold-ghost:link,
.btn--gold-ghost:visited {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

.btn--gold-ghost:hover,
.btn--gold-ghost:focus-visible,
.btn--gold-ghost:active {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* ---------- .tx-btn pill utilities (2026) ----------
   Lighter-weight sibling of `.btn` used by templates and shortcodes
   (footer CTA, listing cards, property single, home ledger).
     --gold        primary on light or dark surfaces
     --gold-ghost  secondary on dark surfaces
     --outline     secondary on light surfaces (charcoal)
   `--lg` bumps padding for hero/primary placements. */
.tx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 10px 22px;
  min-height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-btn);
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.tx-btn--lg {
  padding: 14px 28px;
  font-size: 1rem;
}

.tx-btn--gold {
  background: var(--brand-primary);
  color: var(--brand-primary-ink);
  border-color: var(--brand-primary);
}
.tx-btn--gold:hover,
.tx-btn--gold:focus-visible {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--brand-primary-ink);
}

.tx-btn--gold-ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.tx-btn--gold-ghost:hover,
.tx-btn--gold-ghost:focus-visible {
  background: var(--accent);
  color: var(--ink);
}

.tx-btn--outline {
  background: transparent;
  color: var(--charcoal-2);
  border-color: var(--charcoal-2);
}
.tx-btn--outline:hover,
.tx-btn--outline:focus-visible {
  background: var(--charcoal-2);
  color: var(--text-on-dark);
}

.tx-btn:focus-visible {
  outline: 2px solid var(--charcoal-2);
  outline-offset: 3px;
}
.section--dark .tx-btn:focus-visible,
.site-footer .tx-btn:focus-visible {
  outline-color: var(--accent);
}

/* WordPress core Button block bridge — inline styles picked from the
   editor should still land inside the pill shape and default text
   contrast. Only apply the border-radius; colors stay editor-driven. */
.wp-block-button__link {
  border-radius: var(--r-pill);
}

/* ---------- wp:button block styles (site-wide) ----------
   Registered in theme.json / block-patterns. Gold fill is the primary
   CTA; outline (charcoal) is the secondary; gold-ghost is for dark
   surfaces. `is-style-btn-slate` is a compatibility shim for content
   authored before the 2026 rebrand. */
.wp-block-button.is-style-btn-gold .wp-block-button__link,
.wp-block-button.is-style-btn-gold-ghost .wp-block-button__link,
.wp-block-button.is-style-btn-outline .wp-block-button__link,
.wp-block-button.is-style-btn-slate .wp-block-button__link {
  border-radius: var(--r-pill);
  padding: 0.65rem 1.65rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.wp-block-button.is-style-btn-gold .wp-block-button__link {
  background-color: var(--brand-primary);
  border: 2px solid var(--brand-primary);
  color: var(--brand-primary-ink);
}
.wp-block-button.is-style-btn-gold .wp-block-button__link:hover,
.wp-block-button.is-style-btn-gold .wp-block-button__link:focus-visible {
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--brand-primary-ink);
}

.wp-block-button.is-style-btn-outline .wp-block-button__link {
  background-color: transparent;
  border: 2px solid var(--charcoal-2);
  color: var(--charcoal-2);
  font-weight: 700;
}
.wp-block-button.is-style-btn-outline .wp-block-button__link:hover,
.wp-block-button.is-style-btn-outline .wp-block-button__link:focus-visible {
  background-color: var(--charcoal-2);
  border-color: var(--charcoal-2);
  color: var(--surface-content);
}

.wp-block-button.is-style-btn-gold-ghost .wp-block-button__link {
  background-color: transparent;
  border: 2px solid var(--brand-primary);
  color: var(--brand-primary);
  font-weight: 700;
}
.wp-block-button.is-style-btn-gold-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-btn-gold-ghost .wp-block-button__link:focus-visible {
  background-color: var(--brand-primary);
  color: var(--brand-primary-ink);
}

.wp-block-button.is-style-btn-slate .wp-block-button__link {
  background-color: var(--slate);
  border: 2px solid var(--slate);
  color: #fff;
}
.wp-block-button.is-style-btn-slate .wp-block-button__link:hover,
.wp-block-button.is-style-btn-slate .wp-block-button__link:focus-visible {
  background-color: var(--slate-2);
  border-color: var(--slate-2);
}

/* Keep the global focus ring on every block-button variant; the
   variants above change color/background only. */
.wp-block-button .wp-block-button__link:focus-visible {
  outline: 2px solid var(--charcoal-2);
  outline-offset: 3px;
}
.section--dark .wp-block-button .wp-block-button__link:focus-visible,
.section--plum .wp-block-button .wp-block-button__link:focus-visible {
  outline-color: var(--brand-primary);
}

/* ---------- Pill (small inline tag / badge) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}

/* ---------- Form primitives (2026 refresh) ----------
   Modernize the default look of unstyled inputs / textareas /
   selects across CF7, Site Reviews, and any editor-authored HTML.
   Section-scoped forms are free to override, but every input under
   `.section` will inherit these defaults. Contrast: border --ink-muted
   (#464646) on --surface (#FFFFFF) = 9.85:1, above WCAG 1.4.11 3:1
   non-text threshold. Focus ring inherits the global :focus-visible
   plum outline (7.98:1). */
.section input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
.section select,
.section textarea {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text);
  background: var(--surface-content);
  border: 1px solid var(--ink-muted);
  border-radius: var(--r-input);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.section input:hover:not(:focus),
.section select:hover:not(:focus),
.section textarea:hover:not(:focus) {
  border-color: var(--plum);
}

/* Focus state is handled by the global :focus-visible outline —
   we just tighten the border to plum so the two visuals compose
   cleanly. */
.section input:focus,
.section select:focus,
.section textarea:focus {
  border-color: var(--plum);
}

.section input[aria-invalid="true"],
.section select[aria-invalid="true"],
.section textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

/* ---------- Card primitive (2026 refresh) ----------
   Reusable card container consumed by property cards, review
   cards, and the Site Reviews plugin skin. Sits on --surface-page
   (--bone #EEEEEE) with a subtle white --surface-elevated fill and
   --elev-2 shadow for a modern layered feel. All values are tokens
   so a future re-skin can retune without editing this rule. */
.card {
  background: var(--surface-elevated);
  border-radius: var(--r-card);
  box-shadow: var(--elev-2);
  padding: var(--s-5);
  transition:
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.card:hover,
.card:focus-within {
  box-shadow: var(--elev-3);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .card:hover, .card:focus-within {
    transform: none;
    box-shadow: var(--elev-2);
  }
}

/* ---------- Reveal (used by reveal.js) ----------
   Hidden state only applies when <html> has `.has-js`, so JS-off
   users still see every reveal element as static content. */
.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}

.has-js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

.has-js [data-reveal-delay="1"] { transition-delay: 80ms;  }
.has-js [data-reveal-delay="2"] { transition-delay: 160ms; }
.has-js [data-reveal-delay="3"] { transition-delay: 240ms; }
.has-js [data-reveal-delay="4"] { transition-delay: 320ms; }
.has-js [data-reveal-delay="5"] { transition-delay: 400ms; }

/* ---------- A11y helpers ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-link becomes a high-contrast plum-on-gold jump target the
   moment a keyboard user tabs into the document. Fixed to the
   viewport top-left so header scroll position never hides it.
   Gold bg + plum text hits WCAG 1.4.3 at ~4.6:1. */
.skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  width: auto;
  height: auto;
  padding: 0.75em 1.5em;
  margin: 0;
  overflow: visible;
  clip: auto;
  background: var(--accent);
  color: var(--plum);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  outline: 2px solid var(--plum);
  outline-offset: 2px;
}

/* Global focus outline -- plum ring at 2.5px, 3px offset. Plum on
   the bone body surface hits 7.98:1 and plum on white hits 7.98:1
   too, both well past the WCAG 1.4.11 3:1 non-text-contrast
   threshold. On plum / near-black surfaces the outline flips to
   gold (5.28:1 on plum, 6.42:1 on footer-ink) so the ring stays
   visible against dark backgrounds. Ring thickness stays >=2px so
   we also pass WCAG 2.4.11 (Focus Not Obscured / Minimum). */
:focus-visible {
  outline: 2.5px solid var(--plum);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.section--dark :focus-visible,
.section--plum :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.tx-contact-block :focus-visible,
.tx-callout-block :focus-visible,
.sidebar-plum :focus-visible {
  outline-color: var(--accent);
}

/* ---------- Device visibility utilities ----------
   Single-source toggle classes for hiding any element below or above
   the theme's canonical breakpoints (declared as --bp-* in
   tokens.css). Use these on markup that genuinely needs to swap per
   device instead of writing a one-off @media rule in a section CSS
   file. Numeric values mirror --bp-mobile (720) and --bp-nav (900);
   keep them in sync if tokens.css changes. */
@media (max-width: 719px) {
  .hide-on-mobile { display: none !important; }
}
@media (min-width: 720px) and (max-width: 899px) {
  .hide-on-tablet { display: none !important; }
}
@media (min-width: 900px) {
  .hide-on-desktop { display: none !important; }
}

@media (min-width: 720px) {
  .show-on-mobile-only { display: none !important; }
}
@media (max-width: 719px), (min-width: 900px) {
  .show-on-tablet-only { display: none !important; }
}
@media (max-width: 899px) {
  .show-on-desktop-only { display: none !important; }
}