/* Saenz Landscaping — site styles.
   Layout and component styling is inline in each page (it came straight from the
   design canvas). This file holds the brand tokens and the few global rules. */

:root {
  /* Brand palette — Indigo, Olive & Amber */
  --dark: #2b2e42;         /* indigo: header, hero, footer */
  --deep: #2f4058;         /* navy: stats strip */
  --accent: #cb8015;       /* amber: buttons and calls to action only */
  --on-accent: #17120c;    /* text on amber */
  --accent-text: #5b5f33;  /* olive: labels, numbers, links on light backgrounds */
  --accent-light: #eaa64e; /* amber for text on dark backgrounds */
  --ground: #f4f3ee;       /* page background */
  --surface: #fffffc;      /* cards */
  --ink: #22253a;          /* body text */
  --muted: #4f5568;        /* secondary text */
  --line: #d3dcd1;         /* borders */
  --ash: #c0d2bf;          /* ash grey: soft panels */
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Public Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

img { max-width: 100%; }
a { color: inherit; }
a:hover { opacity: .85; }
[hidden] { display: none !important; }

/* Bilingual: both languages are in the markup; site.js sets data-lang on <html>. */
html[data-lang="en"] [lang="es"] { display: none !important; }
html[data-lang="es"] [lang="en"] { display: none !important; }

/* Language switch */
.lang-toggle button {
  min-width: 44px;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: 700 13px 'Public Sans', sans-serif;
  letter-spacing: .06em;
  cursor: pointer;
}
.lang-toggle button[aria-pressed="true"] { background: #fff; color: var(--ink); }

/* Keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* Quote form status line */
.form-status { margin: 0; font-weight: 600; min-height: 1.5em; }
.form-status:empty { display: none; }
.form-status.ok { color: var(--accent-text); }
.form-status.err { color: #a3261b; }

@media (max-width: 600px) {
  .logo-img { width: 220px !important; }
}