/* The site chrome: header, navigation, footer.
 *
 * ⚠️ THIS FILE EXISTS SO brand.css CANNOT REACH THE CHROME AGAIN.
 * The first brand system set font-family and line-height on `body.ts-brand`.
 * The GeneratePress header inherited both, the nav bar grew taller than its
 * items, they stopped sitting centred in it, and the active-page chip became a
 * misaligned block. Casey's words: "the header nav spacing/alignment is way
 * off". Content styling lives in brand.css and is scoped to .entry-content;
 * chrome styling lives here and names chrome elements outright. Neither file
 * styles a bare element selector, so neither can leak into the other.
 *
 * What the stock theme gave us, and why none of it survives:
 *   - a transparent header floating over a 175px #19284a band. That navy is in
 *     no part of the logo; the mark is cyan #9ed3e4 and orange #f67623 on black.
 *   - the nav as a detached rgba(31,32,34,.7) slab starting 600px in, so the
 *     logo and the menu read as two unrelated objects on one photo.
 *   - the current page marked with a pale steel-blue chip, again off-palette.
 *   - no phone number, on a site whose entire proposition is speed to lead. It
 *     is published 70 times in the body copy and zero times where a person on a
 *     phone looks for it.
 *
 * The replacement treats the header as the shop sign at night: one solid black
 * field, the cyan mark lit on it, orange reserved for the two things we want
 * tapped. The black is the logo's own outline colour, so the die-cut edge of
 * the sign reads instead of dissolving into a photo.
 */

:root {
  --ts-header-h: 96px;
  --ts-header-pad: 40px;
}

/* ── the bar ──────────────────────────────────────────────────────────────── */

/* .header-wrap is absolutely positioned by the theme and the empty GB container
   below it is the spacer that reserves the room. Both get the same ground and
   the same height, or a sliver of the old navy shows under the bar whenever the
   logo's natural height and the spacer's fixed one disagree. */
/* ⚠️ `div.`, not `.`. The homepage HERO is a <section> with this same hashed
   class; the interior spacer is an empty <div>. Without the element name this
   rule clamped the homepage hero to 96px and painted it black, and the h1,
   proof line and both CTAs vanished under the header. */
.ts-brand .header-wrap,
.ts-brand div.gb-container-0d451bcf {
  background: var(--ts-outline);
}
.ts-brand div.gb-container-0d451bcf {
  height: var(--ts-header-h);
  min-height: var(--ts-header-h);
}
.ts-brand .site-header { background: transparent; }
/* A hairline under the bar. The homepage hero is black too, and without a
   seam the header and the hero read as one field. Casey: "something needs to
   subtly separate the two". The hero also sits a shade lighter (--ts-ink). */
.ts-brand .header-wrap { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .14); }

.ts-brand .inside-header {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--ts-header-h);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--ts-header-pad);
}

.ts-brand .site-logo { margin: 0 auto 0 0; display: flex; align-items: center; }
.ts-brand .site-logo a { display: block; line-height: 0; }
.ts-brand .site-logo img.header-image {
  height: 66px;
  width: auto;
  max-width: none;
  display: block;
}

/* ── navigation ───────────────────────────────────────────────────────────── */

/* The slab goes. The nav is type on the bar, not a panel sitting on it. */
.ts-brand nav.main-navigation {
  background: transparent;
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}
.ts-brand nav.main-navigation .inside-navigation {
  padding: 0;
  max-width: none;
  display: flex;
  align-items: center;
  gap: 22px;
}
.ts-brand .main-nav > ul {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ts-brand .main-nav > ul > li { margin: 0; }
.ts-brand .main-nav > ul > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
  font-family: var(--ts-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(255, 255, 255, .78);
  background: none;
  transition: color .15s ease;
}
.ts-brand .main-nav > ul > li > a:hover,
.ts-brand .main-nav > ul > li:hover > a,
.ts-brand .main-nav > ul > li:focus-within > a { color: #fff; background: none; }

/* The current page is marked with the sign's own orange on a rule, replacing a
   steel-blue block that matched nothing in the brand. */
.ts-brand .main-nav > ul > li.current-menu-item > a,
.ts-brand .main-nav > ul > li[class*="current-menu-ancestor"] > a {
  color: #fff;
  background: none;
}
.ts-brand .main-nav > ul > li.current-menu-item > a::after,
.ts-brand .main-nav > ul > li[class*="current-menu-ancestor"] > a::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 0;
  height: 2px;
  background: var(--ts-orange);
}

/* ── the two things we want tapped ────────────────────────────────────────── */

/* ⚠️ flex-direction is load-bearing. GeneratePress sets row-reverse here, so
   the markup order (phone, then button) rendered as button-then-phone and put
   the one orange object in the header in the middle of the bar instead of
   anchoring its corner. Naming the direction is what makes the DOM order mean
   what it reads as. */
.ts-brand .menu-bar-items {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  margin: 0;
}

/* Phone first and in the sky blue, because on a phone it is the whole point.
   Tabular figures so the number does not jitter against the button beside it. */
.ts-brand .ts-header-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ts-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .01em;
  color: var(--ts-sky);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ts-brand .ts-header-tel:hover { color: #fff; }
.ts-brand .ts-header-tel svg { width: 15px; height: 15px; flex: none; }

.ts-brand .menu-bar-items .gb-button {
  display: inline-flex;
  align-items: center;
  background: var(--ts-orange);
  color: #fff;
  border: 0;
  border-radius: 7px;
  padding: 12px 20px;
  font-family: var(--ts-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  transition: background .15s ease;
}
.ts-brand .menu-bar-items .gb-button:hover { background: #d85f12; color: #fff; }

/* ── narrow ───────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  :root { --ts-header-pad: 24px; }
  .ts-brand .main-nav > ul > li > a { padding: 10px 11px; font-size: 13.5px; }
  .ts-brand .ts-header-tel { font-size: 16px; }
}

/* The theme swaps to its slide-out menu at 768px. Below that the logo and the
   phone are the header: the number stays visible rather than collapsing into
   the hamburger, which is where a tap-to-call goes to die. */
@media (max-width: 768px) {
  :root { --ts-header-h: 78px; --ts-header-pad: 18px; }
  .ts-brand .site-logo img.header-image { height: 46px; }
  .ts-brand .inside-header { gap: 14px; }
  .ts-brand .menu-bar-items { gap: 12px; }
  .ts-brand .menu-bar-items .gb-button { display: none; }
  .ts-brand .ts-header-tel { font-size: 15px; }
}
/* 360, not 420. Phones are 375-430 wide and must see the NUMBER; a
   first cut collapsed it to "Call" at 420 and so hid it on every iPhone. At 390
   the logo, number, icon and toggle measure 260px of the 354 available. */
@media (max-width: 360px) {
  .ts-brand .ts-header-tel span { display: none; }
  .ts-brand .ts-header-tel::after { content: "Call"; }
}

/* Social buttons carried a 2px #5a6f9a border, the theme's navy a third time. */
.ts-brand footer .gb-container-3f768661 a.gb-button {
  border-color: rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .72);
}
.ts-brand footer .gb-container-3f768661 a.gb-button:hover {
  border-color: #fff; color: #fff; background: transparent;
}


/* ── the call band ────────────────────────────────────────────────────────── */

/* Orange band, and the theme put a #19284a button on it. Black is the logo's
   own outline and the only colour in the mark that holds its own against the
   orange. */
.ts-brand .gb-button-105d7364 {
  background: var(--ts-outline);
  color: #fff;
  border-radius: 7px;
  padding: 14px 26px;
  font-family: var(--ts-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
}
.ts-brand .gb-button-105d7364:hover { background: #2a3338; color: #fff; }
.ts-brand .gb-container-4ab78d56 .gb-headline-text {
  font-family: var(--ts-display);
  font-weight: 700;
  letter-spacing: -.005em;
}

/* Two buttons where the theme had one. Text first, because that is the ask,
   and the whole band sits on orange so both are black. */
.ts-brand .ts-band-cta { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ts-brand .ts-band-call { background: transparent; color: var(--ts-outline); border: 2px solid rgba(0,0,0,.55); padding: 12px 24px; }
.ts-brand .ts-band-call:hover { background: rgba(0,0,0,.08); color: var(--ts-outline); }
@media (max-width: 768px) {
  .ts-brand .ts-band-cta { width: 100%; justify-content: stretch; }
  .ts-brand .ts-band-cta a { flex: 1 1 100%; text-align: center; justify-content: center; }
}

/* ── footer ───────────────────────────────────────────────────────────────── */

/* Same move as the header, same reason: #19284a is a navy that appears nowhere
   in the mark, and the logo sitting on it is the one place the cyan sign had to
   compete with a colour instead of being lit by one. */
.ts-brand footer.gb-container-392a599f {
  background: var(--ts-outline);
  color: rgba(255, 255, 255, .72);
  font-family: var(--ts-text);
}
.ts-brand footer.gb-container-392a599f a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.ts-brand footer.gb-container-392a599f a:hover { color: #fff; }

/* The address, the hours and the phone are what a person opens a footer for.
   They get the display face and the sky blue; everything else stays quiet. */
.ts-brand footer.gb-container-392a599f strong,
.ts-brand footer.gb-container-392a599f .gb-headline-text {
  font-family: var(--ts-display);
  font-weight: 700;
  color: #fff;
}
.ts-brand footer.gb-container-392a599f a[href^="tel:"],
.ts-brand footer.gb-container-392a599f a[href^="mailto:"] { color: var(--ts-sky); }
.ts-brand footer.gb-container-392a599f a[href^="tel:"]:hover,
.ts-brand footer.gb-container-392a599f a[href^="mailto:"]:hover { color: #fff; }

/* The two inner panels were #384769, a second navy lifted off the first. On
   black they become a hairline instead, which is quieter and costs nothing. */
.ts-brand footer .gb-container-c3b0d1f3,
.ts-brand footer .gb-container-af1b3ea3 {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, .13);
}

/* The footer nav row: the same uppercase treatment as the header, so the two
   ends of the page are recognisably the same site. */
.ts-brand footer.gb-container-392a599f .gb-container-c3b0d1f3 a {
  font-family: var(--ts-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
}