/* ==========================================================================
   Etmanskie Contracting — global.css
   Design tokens, reset, typography, and site-wide chrome (top bar, nav,
   footer, buttons, section headers). Loaded on every page.
   ========================================================================== */

/* --- Fonts (self-hosted) --------------------------------------------------
   Both files are variable fonts covering every weight this site uses in a
   single woff2 (matches what Google Fonts itself was serving — same exact
   bytes, just fetched from fonts/ now instead of fonts.gstatic.com), so one
   @font-face per family is enough; the browser interpolates the requested
   weight from the range declared below. Latin subset only (no accented/
   non-Latin characters appear anywhere on this site). */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/oswald-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/work-sans-latin.woff2") format("woff2");
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  --red: #e41f27;
  --red-dark: #8c1b24;
  --ink: #262223;
  --paper: #f2f2f2;

  --paper-70: rgba(242, 242, 242, 0.72);
  --paper-50: rgba(242, 242, 242, 0.5);
  --paper-45: rgba(242, 242, 242, 0.45);
  --paper-25: rgba(242, 242, 242, 0.25);
  --hairline: rgba(242, 242, 242, 0.1);

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Work Sans", system-ui, -apple-system, sans-serif;

  --shell: 1200px;
  --gutter: 24px;
  --section-y: 88px;
  --grid-gap: 3px; /* the tight seam between cards is the layout's signature */

  --ease: 0.15s ease;
}

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

html {
  scroll-behavior: smooth;
  /* keep anchored sections clear of the sticky nav */
  scroll-padding-top: 62px;
  /* Firefox draws an always-visible scrollbar with an opaque track by
     default (unlike Chrome's auto-hiding overlay). Transparent track lets
     whatever section is behind it show through instead of painting a
     mismatched solid box over the hero/light sections. */
  scrollbar-width: thin;
  scrollbar-color: rgba(38, 34, 35, 0.45) transparent;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--paper);
  color: var(--ink);
  /* clip, not hidden — overflow-x: hidden turns body into a scroll
     container and silently breaks position: sticky on the nav */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: inherit;
}

button {
  font: inherit;
}

/* --- Accessibility ------------------------------------------------------- */
.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 {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--red);
  color: var(--paper);
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

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

/* --- Layout helper ------------------------------------------------------- */
.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Section background rhythm ---------------------------------------------
   Shared by every page (home + subpages) — alternate ink/paper/red down the
   page, avoid two adjacent sections sharing a background. */
.section {
  padding-block: var(--section-y);
}

.section--ink {
  background-color: var(--ink);
  color: var(--paper);
}

.section--paper {
  background-color: var(--paper);
  color: var(--ink);
}

.section--red {
  background-color: var(--red-dark);
  color: var(--paper);
}

/* --- Shared type patterns ------------------------------------------------ */
.eyebrow {
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.eyebrow--muted {
  color: var(--paper-50);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 56px;
}

@media (max-width: 480px) {
  .section-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Underlined text link used beside section headings */
.rule-link {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--red);
  border-bottom: 2px solid var(--red);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color var(--ease), border-color var(--ease);
}

.rule-link:hover {
  color: var(--paper);
  border-bottom-color: var(--paper);
}

.rule-link--paper {
  color: var(--paper);
  border-bottom-color: var(--paper-50);
}

.rule-link--paper:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* For a .rule-link sitting on a paper/light background — the base
   .rule-link:hover turns paper-colored (invisible on light backgrounds),
   so this swaps the hover to ink instead. */
.rule-link--ink:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 36px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease),
    border-color var(--ease);
}

.btn--solid {
  background-color: var(--red);
  color: var(--paper);
}

.btn--solid:hover {
  background-color: var(--red-dark);
}

.btn--ghost {
  border-color: rgba(242, 242, 242, 0.4);
  color: var(--paper);
}

.btn--ghost:hover {
  border-color: var(--red);
  color: var(--red);
}

/* --- Top bar ------------------------------------------------------------- */
/* .topbar {
  background-color: var(--ink);
  padding-block: 9px;
}

.topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.topbar__area {
  color: var(--paper-50);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.topbar__phone {
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  white-space: nowrap;
} */

/* --- Nav ----------------------------------------------------------------- */
/* position: sticky lives on <header>, not .site-nav — header wraps nav with
   no extra height of its own, which gives a sticky nav zero room to stick */
header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-nav {
  background-color: var(--paper);
  border-bottom: 2px solid var(--ink);
  box-shadow: 0 8px 20px rgba(38, 34, 35, 0);
  transition: box-shadow var(--ease);
}

/* JS adds this once the page scrolls, to lift the nav off the content */
.site-nav--scrolled {
  box-shadow: 0 8px 20px rgba(38, 34, 35, 0.12);
}

.site-nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand__mark {
  height: 52px;
  width: 90px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  position: relative;
  display: inline-block;
  padding-block: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--ease);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background-color: var(--red);
  transition: right var(--ease);
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--red);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  right: 0;
}

/* Services dropdown */
.nav-item--dropdown {
  position: relative;
}

/* The caret is taller than the link text, so left to inline-block baseline
   alignment it pulls "Services" out of line with the other nav items —
   make the trigger its own flex group so text + caret center on each
   other instead. */
.nav-item--dropdown > a {
  display: inline-flex;
  align-items: center;
}

.nav-caret {
  display: inline-block;
  font-size: 18px;
  margin-left: 2px;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background-color: var(--ink);
  box-shadow: 0 12px 24px rgba(38, 34, 35, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
}

.nav-item--dropdown:hover .nav-dropdown,
.nav-item--dropdown:focus-within .nav-dropdown,
.nav-item--dropdown.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown a {
  position: static;
  display: block;
  padding: 10px 18px;
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--ease), color var(--ease);
}

.nav-dropdown a::after {
  content: none;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background-color: var(--red-dark);
  color: var(--paper);
}

.nav-cta {
  background-color: var(--red);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 9px 18px;
  transition: background-color var(--ease);
}

.nav-cta:hover {
  background-color: var(--red-dark);
}

/* Hamburger — sized to a 44x44 touch target per WCAG target-size guidance */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color var(--ease);
}

.nav-toggle:hover {
  background-color: rgba(38, 34, 35, 0.06);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--ink);
  transition: transform var(--ease), opacity var(--ease);
}

/* Morph into an X when the drawer is open */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-drawer {
  background-color: var(--ink);
  padding: 12px var(--gutter) 20px;
}

.nav-drawer[hidden] {
  display: none;
}

.nav-drawer:not([hidden]) {
  animation: nav-drawer-in 180ms ease;
}

@keyframes nav-drawer-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.nav-drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-drawer a {
  display: block;
  color: var(--paper);
  text-decoration: none;
  padding: 14px 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(242, 242, 242, 0.08);
  transition: background-color var(--ease);
}

.nav-drawer a:hover,
.nav-drawer a:active {
  background-color: rgba(242, 242, 242, 0.06);
  color: var(--red);
}

.nav-drawer__sub a {
  padding-left: 20px;
  font-size: 12px;
  opacity: 0.75;
}

.nav-drawer__cta {
  margin-top: 16px;
  background-color: var(--red);
  font-family: var(--font-display);
  font-size: 14px;
  text-align: center;
  padding: 13px !important;
  border-bottom: 0 !important;
}

@media (max-width: 860px) {
  .nav-links,
  .nav-cta {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
}

@media (min-width: 861px) {
  .nav-drawer {
    display: none;
  }
}

/* Laptop and up gets a slightly taller, more substantial nav bar */
@media (min-width: 1024px) {
  .site-nav__inner {
    height: 76px;
  }

  .brand__mark {
    height: 66px;
    width: 115px;
  }

  .nav-links {
    gap: 32px;
  }

  .nav-links a {
    font-size: 13px;
  }

  .nav-cta {
    padding: 12px 22px;
    font-size: 13px;
  }
}

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background-color: var(--ink);
  padding-block: 56px 0;
}

.site-footer__grid {
  display: grid;
  /* Content-sized, not proportional (1.4fr/1fr/1fr/1fr) -- with fixed-ratio
     tracks the visual gap between columns varied a lot (Explore's short
     one-word links left a wide gap before Services; Services' long
     "Property Care & Lawn Maintenance" left almost none before Contact)
     even though the actual grid gap was already a uniform 40px. Sizing each
     column to its own content keeps that 40px reading as visually
     consistent regardless of how long each column's text is.
     justify-content: space-between pushes the leftover row width (now that
     columns aren't stretched to fill it) out into the gaps themselves
     instead of leaving it stranded after the last column -- keeps the row
     edge-to-edge like the nav above it, while gaps stay equal. */
  grid-template-columns: repeat(4, max-content);
  justify-content: space-between;
  gap: 40px;
}

.site-footer__logo {
  height: 42px;
  width: auto;
  margin-bottom: 14px;
}

.site-footer__tag {
  font-size: 13px;
  line-height: 1.65;
  color: var(--paper-45);
  max-width: 34ch;
}

.site-footer__social {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.site-footer__social a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--red);
  transition: background-color var(--ease);
}

.site-footer__social a:hover {
  background-color: var(--red-dark);
}

.site-footer__heading {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Kept in lockstep with the link padding/margin below (2x padding must
     stay <= gap or adjacent tap targets overlap again). */
  gap: 14px;
}

.site-footer__col li {
  font-size: 13px;
  color: var(--paper-45);
}

.site-footer__col ul a {
  display: inline-block;
  /* Padding/negative-margin cancel exactly for layout purposes, but the tap
     target itself is still the full padded box. 7px was chosen (not 5px)
     to clear the 24px WCAG 2.5.8 minimum with real margin -- 5px measured
     24.9px tall in one browser, which is close enough to the 24px floor
     that a different rendering engine (e.g. what Lighthouse's mobile audit
     uses) could round it under 24px and fail. 7px measures ~29px, safely
     clear regardless of engine. */
  padding: 7px 6px;
  margin: -7px -6px;
  color: inherit;
  text-decoration: none;
}

.site-footer__col ul a:hover {
  color: var(--paper);
}

.site-footer__legal {
  border-top: 1px solid rgba(242, 242, 242, 0.07);
  margin-top: 48px;
  padding-block: 20px;
  text-align: center;
  font-size: 11px;
  color: var(--paper-25);
}

.site-footer__legal a {
  color: var(--paper-45);
  text-decoration: underline;
}

.site-footer__legal a:hover {
  color: var(--paper);
}

@media (max-width: 800px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .site-footer__col--brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .site-footer__col {
    text-align: center;
  }

  .site-footer__logo {
    margin-inline: auto;
  }

  .site-footer__tag {
    margin-inline: auto;
  }

  .site-footer__social {
    justify-content: center;
  }

  .site-footer__col ul {
    align-items: center;
  }

  /* Shorter overall page: tighten the gap between logo/Explore/Services/
     Contact blocks, and let the two link-heavy lists (Explore, Services)
     run two-per-row instead of one-per-row. Contact stays single-column —
     its 3 lines (address/phone/email) are uneven lengths and don't split
     into a tidy pair. DOM order is untouched, so reading/tab order for
     assistive tech still matches what's visually first.

     auto-fit + minmax (not a fixed repeat(2, ...)) so this collapses back
     to one column if the available width can't fit two ~130px tracks —
     e.g. at high browser zoom (WCAG 1.4.10 reflow), not just at a fixed
     viewport width. */
  .site-footer__grid {
    gap: 28px;
  }

  .site-footer__col:nth-of-type(2) ul,
  .site-footer__col:nth-of-type(3) ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    /* Row-gap kept in lockstep with the link padding above (14px total
       vertical intrusion from 7px padding x2) -- this grid has its own
       separate gap from the single-column list above, and a mismatch here
       reintroduces the exact tap-target overlap that was already fixed
       once for the non-grid layout. */
    gap: 14px 24px;
  }

  .site-footer__legal {
    margin-top: 28px;
  }
}

/* --- Sticky call tab ------------------------------------------------------ */
.call-tab {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 90;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  background-color: var(--red);
  color: var(--paper);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 18px 10px;
  transition: background-color var(--ease);
}

.call-tab:hover {
  background-color: var(--red-dark);
}

@media (max-width: 600px) {
  .call-tab {
    display: none;
  }
}

/* --- Scrollbar ----------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--ink);
}
::-webkit-scrollbar-thumb {
  background: var(--red);
  border-radius: 3px;
}