/* Site chrome: the header and footer shared by the marketing pages and the
   guest pages (/guest/book, /guest/stays, ...), which load app CSS that defines
   its own :root tokens, .container and so on. Everything here is scoped to
   .site-header / .site-footer so it cannot restyle a guest page, and it carries
   its own copy of the tokens it reads.

   The rules between the "mirrors site.css" markers are copied verbatim from
   site.css, which the marketing pages and the static demo still load whole.
   test/lib/marketing/chrome_css_test.rb fails if the two copies drift: change
   a rule in both files or in neither. */

.site-header, .site-footer {
  --navy-950: #070d18;
  --navy-900: #0b1220;
  --navy-800: #101828;
  --navy-700: #18243a;
  --orange: #f97316;
  --orange-dark: #c2410c;
  --orange-focus: #b93808;
  --cream: #faf7f2;
  --white: #ffffff;
  --ink: #16202e;
  --light-muted: #b8c2d0;
  --line: rgba(11, 18, 32, 0.14);
  --line-dark: rgba(255, 255, 255, 0.14);
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --container: 1240px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --radius: 6px;
}

.site-header, .site-footer {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
}
.site-header *, .site-header *::before, .site-header *::after,
.site-footer *, .site-footer *::before, .site-footer *::after { box-sizing: border-box; }

body.nav-open { overflow: hidden; }

/* Scoped copies of the generic .container, .button and .scale-rule that the
   header and footer markup uses. */
.site-header .container, .site-footer .container {
  width: min(100%, var(--container));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header .button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.78rem 1.25rem;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.89rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.site-header .button:hover { transform: translateY(-1px); }
.site-header .button--small { min-height: 42px; padding: 0.65rem 1rem; font-size: 0.8rem; }
.site-header .button--orange { color: var(--navy-950); background: var(--orange); }
.site-header .button--orange:hover { color: var(--white); background: var(--orange-dark); }

.site-footer .scale-rule {
  width: 100%;
  height: 18px;
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 10px 7px, 80px 15px;
}
.site-footer .scale-rule--dark {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, var(--orange) 0 2px, transparent 2px 80px);
}

.site-header a, .site-footer a { color: inherit; text-decoration: none; }
.site-header img { display: block; max-width: 100%; }
.site-header p, .site-footer p { margin: 0; }
.site-header [hidden] { display: none !important; }
.site-header :where(a, button):focus-visible, .site-footer :where(a):focus-visible {
  outline: 3px solid var(--orange-focus);
  outline-offset: 3px;
}

/* ---- mirrors site.css: begin ---- */
/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  color: var(--cream);
  background: rgba(11, 18, 32, 0.96);
  border-bottom: 1px solid var(--line-dark);
  backdrop-filter: blur(12px);
}

.site-header__inner {
  display: flex;
  min-height: 72px;
  align-items: center;
  gap: 2rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.55rem; flex: none; }
.brand__mark { width: 38px; height: 38px; }
.brand__name {
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand__name span { color: var(--orange); }

.site-nav { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; }
.site-nav a, .manage-link {
  color: var(--light-muted);
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 140ms ease;
}
.site-nav a:hover, .manage-link:hover { color: var(--white); }

.site-header__actions { display: flex; align-items: center; gap: 1.1rem; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  background: var(--cream);
  transition: transform 160ms ease, opacity 160ms ease;
}

.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); }

.mobile-nav { background: var(--navy-800); border-top: 1px solid var(--line-dark); }
.mobile-nav--fallback { display: none; }
.mobile-nav nav { display: grid; padding: 0.65rem var(--gutter) 1rem; }
.mobile-nav a {
  padding: 0.8rem 0.25rem;
  color: var(--cream);
  border-bottom: 1px solid var(--line-dark);
  font-weight: 600;
}
.mobile-nav a:last-child { color: var(--orange); border-bottom: 0; }

/* Header contact strip — call/text number and language switch */
.header-contact {
  background: var(--navy-950);
  border-bottom: 1px solid var(--line-dark);
}

.header-contact__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.15rem 1rem;
  padding-block: 0.42rem;
}

.header-contact__phone {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
  line-height: 1.2;
}

.header-contact__phone::before {
  content: "";
  align-self: center;
  flex: none;
  width: 1.15rem;
  height: 2px;
  background: var(--orange);
}

.header-contact__phone span {
  color: var(--light-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.header-contact__phone strong {
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: color 140ms ease;
}

.header-contact__phone:hover strong { color: var(--orange); }

.header-contact__lang {
  flex: none;
  color: var(--light-muted);
  font-size: 0.82rem;
  font-weight: 600;
  transition: color 140ms ease;
}

.header-contact__lang:hover { color: var(--white); }

/* Footer */
.site-footer { color: var(--light-muted); background: var(--navy-950); }
.site-footer__grid { display: grid; grid-template-columns: 1.8fr 0.8fr 1fr; gap: clamp(2rem, 6vw, 5rem); padding-block: clamp(3rem, 6vw, 4.5rem); }
.brand--footer { margin-bottom: 1rem; }
.site-footer__blurb { max-width: 24rem; color: #8e9bad; }
.site-footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.site-footer__links p { margin-bottom: 0.35rem; color: #7e8b9d; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.site-footer__links a { color: var(--light-muted); font-size: 0.9rem; }
.site-footer__links a:hover { color: var(--orange); }
.site-footer__base { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.3rem; border-top: 1px solid var(--line-dark); color: #69778b; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* Footer: four columns when the job-site list is present */
.site-footer__grid--sites { grid-template-columns: 1.4fr 0.7fr 0.9fr 1.3fr; }
.site-footer__links p a:hover { color: var(--orange); }
.site-footer__links [aria-current="page"] { color: var(--orange); }

@media (max-width: 1100px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  .mobile-nav--fallback { display: block; }
  .site-header__actions { margin-left: auto; }
}

@media (max-width: 720px) {
  .site-header__actions .manage-link { display: none; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .site-header__actions .button { display: none; }
  .header-contact__phone::before { display: none; }
  .brand__name { font-size: 1.55rem; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__grid > div:first-child { grid-column: auto; }
  .site-footer__base { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 900px) {
  .site-footer__grid--sites { grid-template-columns: 1fr 1fr; }
  .site-footer__grid--sites > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .site-footer__grid--sites { grid-template-columns: 1fr; }
  .site-footer__grid--sites > div:first-child { grid-column: auto; }
}
/* ---- mirrors site.css: end ---- */