/*
 * Tandem Data — Design Polish
 * Confirmed by wptandem's inspection of the live markup: the homepage is
 * classic Elementor Sections (elementor-section/elementor-top-section, no
 * e-con containers). All 41 interior pages are plain WordPress block-editor
 * (Gutenberg) content instead — .entry-content, .wp-block-heading,
 * .wp-block-list, .wp-block-paragraph — not Elementor at all. Rules below
 * are split accordingly. The homepage hero (.td-wave-hero / .td-wave__bg) is
 * a self-contained HTML-widget component built and owned by wptandem — its
 * own inline <style> ships with the markup, nothing for it lives here except
 * the "Transparent header" spacing rules below, which key off its class name.
 * The old .td-hero/.td-stat component (and its tandem-polish.js counter
 * animation) was retired along with the pre-bitmap hero; see git history /
 * prior versions of this file if it's ever needed again.
 */

:root {
  /* Sourced from Astra's own global palette (set up during the earlier brand-color
     pass) rather than hardcoded, so this stays in sync if the palette ever changes
     in the CMS. Hex values are fallbacks only, for the unlikely case those aren't
     defined on a given page. */
  --td-orange: var(--ast-global-color-0, #ed9700);
  --td-orange-dark: #c67c00;
  --td-green: var(--ast-global-color-1, #808000);
  --td-dark: #1a1d21;
  --td-dark-2: #24282e;
  --td-gray-bg: #f4f5f6;
  --td-text: #2b2e33;
  /* Typefaces are NOT named here: they come from the Elementor kit (Site Settings >
     Global Fonts: Primary = headings, Text = body) via tandem-polish.php. */
  --font-heading: var(--e-global-typography-primary-font-family), "Segoe UI", Arial, sans-serif;
  --font-body: var(--e-global-typography-text-font-family), "Segoe UI", Arial, sans-serif;
}

/* ---------- Typography ---------- */

/* Color set on body only, not on p/.elementor-widget-text-editor directly —
   this way it's inherited (lowest-priority) rather than competing with any
   element that already has its own explicit color (e.g. white hero text on
   a dark background), which a same-specificity, later-loaded rule would win
   and incorrectly override. Font/line-height are safe to set broadly since
   nothing depends on inheriting those instead. */
body {
  color: var(--td-text);
}

/* ---------- Heading typeface: single source = Elementor kit "Primary" token ---------- */

/* Every heading-style element takes its typeface from the kit's Primary typography
   token (Elementor > Site Settings > Global Fonts > Primary). Change the typeface
   there and the whole site follows: no font names live in widgets or in this file.
   Widgets keep only their own size/weight. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-counter-number-wrapper,
.elementor-icon-box-title,
.elementor-image-box-title,
.wp-block-heading {
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
}

/* Page titles on plain-content pages are h1.entry-title. Astra's static CSS pins .entry-title to font-weight 400 (specificity
   0,1,0) and doesn't emit the "page title weight" option, so it beat the h1 weight set in Customizer (700) and left the
   H1 lighter than the H2s. Keep it in step with Astra's H1 weight. Size/colour/line-height come from Astra's settings. */
.entry-title,
.entry-title a {
  font-weight: 700;
}

/* ---------- Header / nav ---------- */

/* The logo must keep its intrinsic size. With the logo in the desktop right column,
   Astra sizes its container from a 0% flex-basis, and the theme's img { max-width: 100% }
   then resolves against that and collapses the image to 0 width on the mobile header
   (logo left, hamburger right). */
.custom-logo {
  max-width: none;
}

.site-header,
.main-header-bar {
  border-bottom: 1px solid #eceeef;
}

.main-navigation ul li a {
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---------- Section rhythm (alternate bands down the page) ---------- */

/* :has(.elementor-widget) excludes empty spacer sections from the banding —
   per wptandem's finding, an empty section was picking up a gray band it
   shouldn't have. */
.elementor-top-section:has(.elementor-widget):nth-of-type(even) {
  background-color: var(--td-gray-bg);
}

/* ---------- Stat counters ---------- */

.elementor-counter-number-wrapper {
  font-family: var(--font-heading);
  color: var(--td-orange);
  font-weight: 700;
}

.elementor-counter-title {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

/* ---------- Icon lists -> cards (opt-in via .td-cards) ---------- */

/* Scoped under .td-cards so plain lists (e.g. the Service Areas city directory)
   keep Elementor's native layout. Add a "td-cards" CSS class (Advanced tab) to any
   icon-list widget that should render as a card grid. */

.td-cards .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.td-cards .elementor-icon-list-item {
  flex: 1 1 260px;
  background: #ffffff;
  border: 1px solid #e6e8ea;
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(20, 20, 20, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.td-cards .elementor-icon-list-item:hover {
  box-shadow: 0 6px 16px rgba(20, 20, 20, 0.09);
  transform: translateY(-2px);
}

.elementor-icon-list-icon i,
.elementor-icon-list-icon svg {
  color: var(--td-orange);
  fill: var(--td-orange);
}

/* ---------- Generic bullet lists (fallback for plain content lists) ---------- */

.elementor-widget-text-editor ul:not(.elementor-icon-list-items) li,
.entry-content ul li,
.wp-block-list li {
  padding-left: 4px;
  margin-bottom: 6px;
}

.elementor-widget-text-editor ul:not(.elementor-icon-list-items) li::marker,
.entry-content ul li::marker,
.wp-block-list li::marker {
  color: var(--td-orange);
}

/* ---------- List bullet styles (pilot, Nationwide Service only) ----------

   Two styles from Chuck's design-survey punch list, not yet locked in sitewide — he wants to
   see both rendered live first. Opt-in via a block className so every other page keeps the
   plain colored-native-bullet default above untouched until he decides.
     .td-list-check  = white checkmark on an orange square. For short, "feature list" content.
     .td-list-square = plain solid orange square, body text stays its normal color (not orange).
       For longer lists.
   Checkmark is an inline SVG data-URI (not an icon font) so it doesn't depend on Font Awesome
   being enqueued on a plain Gutenberg page. */
.entry-content .td-list-check,
.entry-content .td-list-square,
ul.td-list-check,
ul.td-list-square {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-content .td-list-check li,
.entry-content .td-list-square li,
ul.td-list-check li,
ul.td-list-square li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}

.entry-content .td-list-check li::before,
.entry-content .td-list-square li::before,
ul.td-list-check li::before,
ul.td-list-square li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.27em;
  width: 18px;
  height: 18px;
  background-color: var(--td-orange);
  border-radius: 3px;
}

ul.td-list-check li::before,
.entry-content .td-list-check li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.2 11.2 2.8 7.8l1.4-1.4 2 2 5-5 1.4 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}

/* ---------- Buttons ---------- */

.elementor-button,
.wpforms-submit,
.wp-block-button__link {
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.elementor-button:hover,
.wpforms-submit:hover,
.wp-block-button__link:hover {
  transform: translateY(-1px);
}

/* ---------- Interior (Gutenberg block) content pages ---------- */

.entry-content {
  max-width: 760px;
}

.entry-content a {
  color: var(--td-orange);
  font-weight: 500;
}

.entry-content a:hover {
  color: var(--td-orange-dark);
}

/* ---------- Transparent header (per page; homepage only via Astra's page-level switch) ---------- */

/* Astra removes the header from the flow and overlays it when body.ast-theme-transparent-header is set
   (Astra page setting "Transparent Header: Enabled", currently only on the homepage). The wave hero then
   starts at the very top, so it gets extra top padding equal to the header height, plus a soft top scrim so
   the white nav stays legible over the busiest part of the graphic. Header colours/logo live in Astra's
   transparent-header settings (Customizer), not here. */
.ast-theme-transparent-header {
  --td-header-h: 94px;
}

.ast-theme-transparent-header .td-wave-hero {
  padding-top: calc(var(--td-header-h) + clamp(48px, 6vw, 90px));
}

.ast-theme-transparent-header .td-wave-hero {
  min-height: calc(clamp(420px, 36vw, 520px) + var(--td-header-h));
}

/* no hairline between the transparent header and the hero */
.ast-theme-transparent-header .site-header,
.ast-theme-transparent-header .main-header-bar {
  border-bottom-color: transparent;
}

/* a touch heavier nav text so white stays crisp over the busy graphic */
.ast-theme-transparent-header .main-header-menu > .menu-item > .menu-link {
  font-weight: 600;
}

.ast-theme-transparent-header .td-wave-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 170px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}

@media (max-width: 1250px) {
  .ast-theme-transparent-header {
    --td-header-h: 92px;
  }

  /* submenu arrow buttons in the hamburger panel: plain chevrons, not the orange button style */
  .ast-theme-transparent-header #ast-hf-mobile-menu .ast-menu-toggle {
    background-color: transparent;
  }
}

/* ---------- Interior page header (opt-in, lightweight echo of the homepage hero) ---------- */

/* Not wired into any page yet — this is the "gradient + faint static wave lines"
   motif from the interior-header discussion: same brand palette as .td-hero, but
   with none of that hero's cost. No blur filter, no JS, no animation, and only two
   thin static SVG strokes (vs. the homepage wave's ~120 path instances across 3
   blurred layers) — cheap enough to repeat on all 41 interior pages without a
   measurable Core Web Vitals hit, even on low-end phones. Height is a single
   compact, uniform band (not the homepage's full hero height) meant to carry just
   an H1 and, optionally, a breadcrumb. Apply by giving a page's header/cover
   element the "td-page-header" class; content (h1, breadcrumb) goes inside a
   ".td-page-header__inner" wrapper, the same pattern as .td-hero__inner.

   The background lives on ::before rather than directly on the element so a
   per-page variant (below) can shift/tint just the artwork without touching the
   white H1/breadcrumb text sitting in front of it. */
.td-page-header {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: clamp(140px, 16vw, 200px);
  padding: 32px 24px;
  background-color: var(--td-dark);
}

.td-page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(237, 151, 0, 0.14), transparent 45%),
    radial-gradient(circle at 88% 75%, rgba(128, 128, 0, 0.16), transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'%3E%3Cpath d='M0,150 C200,60 350,190 550,90 C650,40 720,80 800,50' fill='none' stroke='%23ed9700' stroke-opacity='0.18' stroke-width='2'/%3E%3Cpath d='M0,80 C180,140 380,20 560,110 C680,170 740,120 800,150' fill='none' stroke='%23808000' stroke-opacity='0.14' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover, cover, 100% 100%;
  background-position: 50% center;
}

.td-page-header__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

/* ---------- Interior page header: per-page variation (opt-in, no JS) ----------

   Chuck asked whether the CMS could randomize this on the fly instead of every
   page getting the identical band. Two ways to read "randomize":

   - True per-request randomness (a different look on every reload) actively works
     against page caching — a cache serves the same bytes to everyone, so "random"
     either breaks the cache or means recomputing per visitor — and reads as buggy
     rather than intentional ("didn't this page look different a second ago?").
   - Per-PAGE variation that's stable every time you load that URL, but different
     from the next page's, gets the visual variety without either problem.

   So: a small fixed set of variants (5, td-hue-0..td-hue-4), picked once per page
   by hashing the post ID — deterministic, so it's cacheable exactly like the rest
   of the page and never flickers between visits. tandem-polish.php adds the class
   to body_class(); nothing here needs the class list to change if pages are added
   or removed later. Each variant only nudges hue (kept to a ±14deg band so orange
   stays orange-ish and olive stays olive-ish, never drifting to an off-brand color)
   and moves the artwork's focal point — no new assets, same one SVG + two
   gradients doing the work for every page. */
.td-hue-1 .td-page-header::before { filter: hue-rotate(7deg); background-position: 35% center; }
.td-hue-2 .td-page-header::before { filter: hue-rotate(-7deg); background-position: 65% center; }
.td-hue-3 .td-page-header::before { filter: hue-rotate(14deg); background-position: 30% 60%; }
.td-hue-4 .td-page-header::before { filter: hue-rotate(-14deg); background-position: 70% 40%; }
/* td-hue-0 is the default above: no filter, centered — deliberately left as one
   of the five rather than special-cased, so it's one variant among equals. */

.td-page-header h1 {
  font-family: var(--font-heading);
  color: #ffffff;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  margin: 0;
  font-weight: 700;
}

.td-page-header .td-breadcrumb,
.td-page-header .td-breadcrumb a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

.td-page-header .td-breadcrumb a:hover {
  color: #ffffff;
}

/* ---------- Homepage "Contact Us" band (charcoal, full-bleed) ---------- */

/* Colour (#201911, kit custom colour "Charcoal"), layout and the framed map are native Elementor settings on the
   section. This only tightens paragraph rhythm inside the contact details to match the approved mockup. */
.td-contact-band .elementor-widget-text-editor p {
  margin: 0 0 16px;
}

.td-contact-band .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* ---------- Entrance animations, dialled back ---------- */

/* Elementor's stock "Bounce In" overshoots and its "Fade In Left/Right" slide the element a full 100% of its own width, which
   is far too aggressive on big bands and image rows. The animation NAMES chosen in Elementor are kept (so nothing has to be
   re-picked per widget); these class rules re-point them at gentler keyframes: same character (scale-in / slide-in from the
   side), no overshoot, ~28px travel instead of 100%. Specificity (0,2,0) beats Elementor's (0,1,0) regardless of load order.
   Used today on the homepage only: bounceIn = the "When communications break down" band; fadeInLeft/Right = "More About
   Tandem Data". fadeIn / fadeInDown are left as Elementor ships them. */
@keyframes tdSoftScaleIn {
  from { opacity: 0; transform: scale3d(0.97, 0.97, 1); }
  to   { opacity: 1; transform: none; }
}

@keyframes tdSoftInLeft {
  from { opacity: 0; transform: translate3d(-28px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes tdSoftInRight {
  from { opacity: 0; transform: translate3d(28px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

.animated.bounceIn {
  animation-name: tdSoftScaleIn;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.animated.fadeInLeft {
  animation-name: tdSoftInLeft;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.animated.fadeInRight {
  animation-name: tdSoftInRight;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .animated.bounceIn,
  .animated.fadeInLeft,
  .animated.fadeInRight {
    animation: none;
  }
}

/* ---------- Footer ---------- */

/* Astra's footer builder paints each row (.site-primary-footer-wrap / .site-below-footer-wrap)
   with its own background, which hides a background set only on footer.site-footer and left the
   light text below unreadable on light rows. The dark band lives on the footer element; the rows
   are made transparent so it shows through. */
.site-footer,
footer.site-footer {
  background-color: var(--td-dark-2);
  color: rgba(255, 255, 255, 0.75);
}

.site-footer .site-primary-footer-wrap,
.site-footer .site-below-footer-wrap {
  background-color: transparent;
}

.site-footer .site-primary-footer-wrap {
  padding-top: 48px;
  padding-bottom: 24px;
}

.site-footer .site-below-footer-wrap {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer .site-footer-below-section-1 {
  justify-content: flex-start;
  text-align: left;
}

.site-footer .site-footer-below-section-2 {
  justify-content: flex-end;
  text-align: right;
}

.site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright p {
  text-align: left;
}

.site-footer .ast-footer-html-1,
.site-footer .ast-footer-html-1 .ast-builder-html-element,
.site-footer .ast-footer-html-1 p {
  text-align: right;
}

.site-footer .widget-title {
  color: #ffffff;
  font-size: 1.05rem;
  margin-bottom: 14px;
}

.site-footer p,
.site-footer .ast-footer-copyright,
.site-footer .ast-builder-html-element {
  color: rgba(255, 255, 255, 0.75);
}

.site-footer .widget_nav_menu ul,
.site-footer .widget_nav_menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer .widget_nav_menu li {
  margin-bottom: 8px;
}

.site-footer a {
  color: var(--td-orange);
}

.site-footer a:hover {
  color: #ffffff;
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
  .td-cards .elementor-icon-list-items {
    flex-direction: column;
  }
}