/* ===== Victor's Landscaping — responsive + modern layer ===== */
/* Task 1.1 — Foundation: viewport, fluid wrapper, design tokens, breakpoints  */
/* Loads after the live phx/style.css; uses !important only where needed to    */
/* override fixed-width rules in the upstream stylesheet.                       */

/* ------------------------------------------------------------------ */
/* 1. Design tokens                                                     */
/* ------------------------------------------------------------------ */
:root {
  --green:  #006326;
  --orange: #bb4e1a;
  --ink:    #1d1b18;
  --bg:     #e8e2db;
  --maxw:   1140px;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,.10);
}

/* ------------------------------------------------------------------ */
/* 2. Base resets                                                       */
/* ------------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
}

img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------ */
/* 3. Fluid wrapper + content area                                      */
/* Overrides the fixed 1000px width set by the parent theme.           */
/* ------------------------------------------------------------------ */
body .wrapper,
body #main {
  width: auto !important;
  max-width: var(--maxw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px;
  padding-right: 20px;
}

/* header wrapper has position:relative so it needs the right padding */
body header .wrapper {
  padding-left: 20px;
  padding-right: 20px;
}

/* ------------------------------------------------------------------ */
/* 4. Full-bleed sections — let them span full viewport width          */
/* (wrapper inside constrains the content)                             */
/* ------------------------------------------------------------------ */
#banner,
.features,
footer#sitemap {
  width: 100% !important;
  max-width: none !important;
}

/* ------------------------------------------------------------------ */
/* 5. Banner — prevent fixed-pixel inner elements from overflowing     */
/* The live CSS sets #banner at a large min-height; we just ensure     */
/* nothing inside bleeds beyond the viewport.                          */
/* ------------------------------------------------------------------ */
#banner,
#banner ul.slide,
#banner ul#rotator,
#banner li {
  max-width: 100% !important;
  overflow: hidden;
}

/* Banner text elements that ship with hard-coded 850px widths         */
div.newblog,
h2.convhx {
  width: auto !important;
  max-width: 90% !important;
}

/* ------------------------------------------------------------------ */
/* 6. Associations / halves block (live style sets min-width ~415px)   */
/* ------------------------------------------------------------------ */
div.associations,
div.halves,
div.halves.associations,
div.latest div.halves.associations {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* ------------------------------------------------------------------ */
/* 7. Inner layout — main section + aside                              */
/* The live theme floats section + aside at fixed widths inside #main. */
/* Do NOT un-float here — desktop (≥1024px) keeps the two-column      */
/* layout. Un-float lives in §11 (≤1023px) below.                     */
/* ------------------------------------------------------------------ */
#main > section,
#main > aside {
  padding-right: 0 !important;
}

/* ------------------------------------------------------------------ */
/* 8. Navigation — prevent horizontal overflow                         */
/* ------------------------------------------------------------------ */
#nav {
  overflow: visible;
}

#nav ul,
#nav ul li {
  white-space: normal;
}

/* ------------------------------------------------------------------ */
/* 9. Typography — fluid sizes                                          */
/* ------------------------------------------------------------------ */
body {
  font-size: 16px;
  line-height: 1.65;
}

h1 { font-size: clamp(28px, 6vw, 46px); }
h2 { font-size: clamp(24px, 5vw, 34px); }
h3 { font-size: clamp(20px, 4vw, 26px); }

/* ------------------------------------------------------------------ */
/* 10. Gravity Forms — prevent textarea / input overflow               */
/* ------------------------------------------------------------------ */
.gform_wrapper input,
.gform_wrapper textarea,
.gform_wrapper select {
  max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* 11. Tablet breakpoint (768px–1023px)                                */
/* ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  body .wrapper,
  body #main {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Keep main column and sidebar stacked */
  #main > section,
  #main > aside {
    width: 100% !important;
    float: none !important;
  }
}

/* ------------------------------------------------------------------ */
/* 12. Phone breakpoint (≤767px)                                       */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
  body .wrapper,
  body #main {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Fluid banner text */
  .converh1 {
    font-size: clamp(20px, 5vw, 34px) !important;
    width: 90% !important;
  }

  /* Feature callout list — stack items */
  .features ul.callouts {
    flex-wrap: wrap;
  }

  .features ul.callouts li {
    width: 100%;
  }

  /* Nav — allow wrapping on small screens */
  #nav ul {
    flex-wrap: wrap;
  }

  /* Footer wrapper stacking */
  footer#sitemap .wrapper {
    flex-direction: column;
  }
}

/* ------------------------------------------------------------------ */
/* 13. Hero — responsive modern hero with overlay (Task 3.1)           */
/* ------------------------------------------------------------------ */

/* Banner becomes a positioning context */
#banner {
  position: relative !important;
  min-height: 520px !important;
}

/* Rotator slides: fill the banner */
#banner ul#rotator,
#banner ul#rotator li {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 520px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Dark left-weighted gradient overlay (behind hero-overlay text) */
#banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,30,15,.82) 0%, rgba(20,30,15,.30) 100%);
  z-index: 100;
  pointer-events: none;
}

/* Hide the original slide caption text — our static overlay replaces it */
#banner .phrase,
#banner .heading,
#banner .converh1 {
  display: none !important;
}

/* Interior / archive / blog banner titles: lift above the #banner::after dark
   gradient (z-index 100) so they stay bright white, not dimmed to gray. Scoped
   to DIRECT children so the nested homepage hero title (.hero-title) is untouched. */
#banner > h1,
#banner > h2,
#banner > .newblog {
  position: relative;
  z-index: 200;
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

/* Hero overlay: sits above gradient (must beat #rotator z-index ~50 and upstream #banner z-index:400) */
.hero-overlay {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  display: flex;
  align-items: center;
}

.hero-overlay .wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Eyebrow */
.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #e07a44;
}

/* Hero headline */
.hero-title {
  color: #fff !important;
  font-size: clamp(34px, 4.5vw, 54px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  max-width: 640px;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* CTA row */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 6px;
}

/* Orange pill CTA — must beat upstream a:link{color:#bb4e1a} (0,1,1) */
a.btn-pill,
a.btn-pill:link,
a.btn-pill:visited,
a.btn-pill:hover,
a.btn-pill:active,
a.btn-pill:focus {
  color: #fff !important;
  text-decoration: none !important;
}

a.btn-pill {
  display: inline-flex;
  align-items: center;
  background: var(--orange);
  padding: 13px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  transition: background .2s, transform .15s;
}

a.btn-pill:hover {
  background: #9a3d0f;
  transform: translateY(-1px);
}

/* Ghost / outline phone CTA */
a.btn-ghost,
a.btn-ghost:link,
a.btn-ghost:visited,
a.btn-ghost:hover,
a.btn-ghost:active,
a.btn-ghost:focus {
  color: #fff !important;
  text-decoration: none !important;
}

a.btn-ghost {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 2px solid rgba(255,255,255,.75);
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  transition: background .2s, border-color .2s;
}

a.btn-ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: #fff;
}

/* ---- Phone: ≤767px — hero adjustments ---- */
@media (max-width: 767px) {
  #banner {
    min-height: 340px !important;
  }

  #banner ul#rotator,
  #banner ul#rotator li {
    min-height: 340px !important;
  }

  /* Heavier top-to-bottom gradient on mobile */
  #banner::after {
    background: linear-gradient(180deg, rgba(20,30,15,.80) 0%, rgba(20,30,15,.55) 100%);
  }

  .hero-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  a.btn-pill,
  a.btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------------------ */
/* 14. Header — sticky + mobile hamburger nav (Task 2.1)               */
/* ------------------------------------------------------------------ */

/* Desktop: sticky header */
body > header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Hamburger + call bar: hidden on desktop, shown on phone */
.nav-toggle,
.call-bar {
  display: none;
}

/* ---- Phone: ≤767px ---- */
@media (max-width: 767px) {

  /* Sticky header: dark background so nav floats cleanly */
  body > header {
    background: #1d1b18;
    padding: 10px 0 0;
  }

  /* Header wrapper: flex row, logo left + hamburger right */
  body > header .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    padding-bottom: 8px;
    position: relative;
    height: auto;
  }

  /* Logo: reset the absolute positioning from inline style */
  body > header #logo {
    position: static !important;
    width: auto !important;
    height: auto !important;
    font-size: 1em !important;
    margin: 0 !important;
    top: auto !important;
  }

  body > header #logo img {
    height: 52px;
    width: auto;
  }

  /* Tagline: hide on mobile — not enough room */
  body > header #tagline {
    display: none;
  }

  /* Hamburger button */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    padding: 10px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .nav-toggle span {
    width: 26px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    display: block;
  }

  /* Persistent tap-to-call: a compact pill centered in the header row,
     between the logo and the hamburger (no full-width bar — saves vertical
     space). The wrapper is flex/space-between, so this middle item centers. */
  .call-bar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1.5px solid var(--orange);
    color: #fff;
    text-align: center;
    padding: 7px 14px;
    font-weight: 700;
    text-decoration: none;
    font-size: 15px;
    min-height: 44px;
    border-radius: 999px;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* Force white text: upstream a, a:link { color:#bb4e1a } has higher specificity
     (pseudo-class beats class alone), so !important is required here. */
  a.call-bar,
  a.call-bar:link,
  a.call-bar:visited,
  a.call-bar:hover,
  a.call-bar:active,
  a.call-bar:focus {
    color: #fff !important;
  }

  /* Nav: hidden by default on mobile */
  #nav {
    display: none !important;
  }

  /* Nav: visible when open */
  #nav.is-open {
    display: block !important;
    background: #fff;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  /* Nav lists: override upstream theme inline-block/flex */
  #nav.is-open ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    flex-wrap: unset !important;
  }

  /* Nav list items: force block layout */
  #nav.is-open ul li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    position: static !important;
  }

  /* Nav links: big tap targets */
  #nav.is-open ul li a {
    display: block !important;
    padding: 14px 16px !important;
    min-height: 48px !important;
    line-height: 1.4 !important;
    border-bottom: 1px solid #eee !important;
    color: var(--ink) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    background: #fff !important;
  }

  /* Submenus: hidden by default */
  #nav li ul.sub-menu {
    display: none !important;
  }

  /* Submenus: show when parent li has .sub-open */
  #nav li.sub-open > ul.sub-menu {
    display: block !important;
    background: #f6f3ef !important;
    position: static !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    box-shadow: none !important;
  }

  /* Sub-menu items: slightly indented */
  #nav li.sub-open > ul.sub-menu li a {
    padding-left: 28px !important;
    font-weight: 400 !important;
    background: #f6f3ef !important;
  }

  /* Body scroll lock when nav open */
  body.nav-locked {
    overflow: hidden;
  }
}

/* ------------------------------------------------------------------ */
/* 15. Services — image-topped responsive cards (Task 4.1)             */
/* Replaces the old .features/.callouts icon list on the homepage.    */
/* ------------------------------------------------------------------ */
.svc {
  padding: 48px 0;
}

/* Section lead (override the generic orange .eyebrow for the light bg) */
.svc .svc-lead {
  text-align: center;
  margin-bottom: 28px;
}

.svc .eyebrow {
  color: var(--orange);
}

.svc .svc-lead h2 {
  margin: .25em 0 0;
  color: var(--ink);
  text-align: center; /* upstream h2{text-align:left} would otherwise win over inherited center */
}

/* Flex grid — cards flow and wrap, with the last (orphan) row centered.
   Handles any card count cleanly (currently 5): one row on desktop, wraps to
   centered rows on tablet, single column on phone. */
.svc-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}

/* Card — a.svc-card beats upstream a:link{color:#bb4e1a} (0,1,1) so the
   card body text stays ink, not orange. */
a.svc-card,
a.svc-card:link,
a.svc-card:visited {
  flex: 1 1 200px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--ink);
  transition: transform .15s, box-shadow .15s;
}

a.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
}

/* Photo top */
.svc-card .pic {
  display: block;
  height: 170px;
  background-size: cover;
  background-position: center;
}

/* Body */
.svc-card .bd {
  display: block;
  padding: 18px 20px 20px;
}

.svc-card .bd strong {
  display: block;
  color: var(--green);
  font-size: 20px;
  font-weight: 800;
}

.svc-card .bd em {
  display: block;
  color: #6b6358;
  font-style: normal;
  font-size: 14px;
  margin: 4px 0 12px;
}

.svc-card .more {
  color: var(--orange);
  font-weight: 700;
  font-size: 14px;
}

/* Phone: single full-width column */
@media (max-width: 767px) {
  .svc {
    padding: 34px 0;
  }

  .svc-grid {
    gap: 16px;
  }

  /* match the base a.svc-card:link specificity (0,2,1) so full-width wins */
  a.svc-card,
  a.svc-card:link,
  a.svc-card:visited {
    flex-basis: 100%;
    max-width: none;
  }

  .svc-card .pic {
    height: 190px;
  }
}

/* ------------------------------------------------------------------ */
/* 16. Interior pages + blog (Tasks 6.1 / 6.2)                         */
/* Interior layout already stacks the aside below content at ≤1023px  */
/* via §11; here we add readable typography + modern blog post cards.  */
/* ------------------------------------------------------------------ */

/* Interior content: comfortable reading measure + heading color */
#main > section article {
  max-width: 100%;
}

#main > section article h1 a,
#main > section article h2 a {
  color: var(--green);
}

/* Content images: rounded + never overflow (foundation caps max-width) */
#main > section article img {
  border-radius: 8px;
  height: auto;
}

/* Blog index / archives — turn each post into a modern card.
   Scoped to listing contexts so the single-post page is unaffected. */
body.blog #main > section article.post,
body.archive #main > section article.post,
body.search #main > section article.post {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 22px 24px;
  margin-bottom: 24px;
  overflow: hidden; /* contain the floated thumbnail */
}

body.blog #main > section article.post h1,
body.archive #main > section article.post h1,
body.search #main > section article.post h1 {
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.25;
  margin: 0 0 10px;
}

body.blog #main > section article.post img.wp-post-image,
body.archive #main > section article.post img.wp-post-image,
body.search #main > section article.post img.wp-post-image {
  float: left;
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 18px 10px 0;
}

a.read-more,
a.read-more:link,
a.read-more:visited {
  display: inline-block;
  color: var(--orange) !important;
  font-weight: 700;
  text-decoration: none;
}

/* Post meta line */
#main > section article .comment-meta,
#main > section article p.comment-meta {
  font-size: 13px;
  color: #6b6358;
}

/* Phone: stack the thumbnail above the excerpt for clean reading */
@media (max-width: 767px) {
  body.blog #main > section article.post img.wp-post-image,
  body.archive #main > section article.post img.wp-post-image,
  body.search #main > section article.post img.wp-post-image {
    float: none;
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
    margin: 0 0 14px;
  }

  body.blog #main > section article.post,
  body.archive #main > section article.post,
  body.search #main > section article.post {
    padding: 18px;
  }
}

/* ------------------------------------------------------------------ */
/* 17. Gravity Forms — modern responsive styling (Task 6.3)            */
/* The "Contact Us" form lives in the interior-page sidebar. Uses      */
/* reCAPTCHA v3 (invisible — no iframe). Foundation §10 already caps    */
/* field max-width; here we add full-width sizing + pill submit.       */
/* ------------------------------------------------------------------ */

/* Section title ("Contact Us") */
.gform_wrapper .gsection_title,
.gform_wrapper h2.gsection_title {
  color: var(--green);
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 14px;
}

/* Field spacing */
.gform_wrapper .gfield {
  margin-bottom: 14px;
}

/* All text-like inputs full-width + comfortable tap height */
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=url],
.gform_wrapper input[type=number],
.gform_wrapper select,
.gform_wrapper textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #cfc8bf;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px; /* ≥16px stops iOS zoom-on-focus */
  background: #fff;
  color: var(--ink);
}

.gform_wrapper textarea {
  min-height: 120px;
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0,99,38,.12);
}

/* Name first/last: side by side, with a sensible gap */
.gform_wrapper .ginput_complex.ginput_container--name {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gform_wrapper .ginput_complex.ginput_container--name > span {
  flex: 1 1 140px;
}

/* Orange pill submit (input, not an anchor — no a:link override here) */
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform_footer button,
.gform_wrapper input.gform_button {
  background: var(--orange);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 14px 32px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: background .2s, transform .15s;
}

.gform_wrapper .gform_footer input[type=submit]:hover,
.gform_wrapper input.gform_button:hover {
  background: #9a3d0f;
  transform: translateY(-1px);
}

/* Phone: full-width submit, stacked name fields */
@media (max-width: 767px) {
  .gform_wrapper .gform_footer input[type=submit],
  .gform_wrapper input.gform_button {
    width: 100%;
  }

  .gform_wrapper .ginput_complex.ginput_container--name {
    flex-direction: column;
  }
}

/* ------------------------------------------------------------------ */
/* 18. Dark footer (#sitemap) — responsive (Task 7.1)                 */
/* The .latest band + associations block already reflow via §4/§6;    */
/* (the associations credentials strip is replaced in Phase 5.)       */
/* Here we tidy the dark logo+widget footer and center it on phone.   */
/* ------------------------------------------------------------------ */
body > footer#sitemap {
  padding: 28px 0;
}

@media (max-width: 767px) {
  body > footer#sitemap .wrapper {
    display: block;
    text-align: center;
  }

  body > footer#sitemap #footer-logo,
  body > footer#sitemap #footer-widget-1 {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  body > footer#sitemap #footer-logo {
    margin-bottom: 16px;
  }
}

/* ------------------------------------------------------------------ */
/* 19. Credentials & Memberships logo grid (Task 5.2)                 */
/* Replaces the old .associations single-image hotspot map (assoc3)   */
/* — a real responsive white-chip logo grid on the light .latest band.*/
/* Also retires the VL-001 Rachio-hotspot / inner-scroll issues.      */
/* ------------------------------------------------------------------ */

/* Latest band now stacks: posts full width, then the creds grid */
.latest .latest-posts.halves {
  width: 100%;
  float: none;
}

.creds {
  width: 100%;
  clear: both;
  margin-top: 30px;
}

.creds-h {
  text-align: center;
  color: var(--green);
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 16px;
}

.creds-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 14px;
  align-items: stretch;
}

.creds-grid li {
  margin: 0;
  padding: 0;
}

/* Each logo sits in a uniform white chip (hides bg differences). */
.creds-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding: 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

.creds-grid img {
  max-width: 100%;
  max-height: 54px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(.35);
  opacity: .9;
  transition: filter .2s, opacity .2s;
}

.creds-grid a:hover img {
  filter: none;
  opacity: 1;
}

/* Tablet: 4 across */
@media (max-width: 1023px) {
  .creds-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Phone: 3 across */
@media (max-width: 767px) {
  .creds-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .creds-grid a {
    height: 72px;
    padding: 10px;
  }

  .creds-grid img {
    max-height: 46px;
  }
}

/* ------------------------------------------------------------------ */
/* 20. Desktop content + sidebar — fill the wider wrapper (≥1024px)    */
/* Foundation widened #main to max-width 1140px, but the upstream theme */
/* floats section (≈675px) + aside (≈275px) at fixed widths sized for  */
/* the old ~1000px layout, leaving dead space to the right of the form. */
/* Make #main a 2-column flex that fills the width: content + the       */
/* contact-form sidebar both grow, with a real gutter between them.     */
/* (≤1023px still stacks via §11.)                                      */
/* ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  body #main {
    display: flex;
    gap: 32px;
    align-items: flex-start;
  }

  /* Content grows to fill; the form sidebar is a fixed, comfortable width.
     This widens the content area and tightens the gap to the form. */
  body #main > section {
    flex: 1 1 auto;
    width: auto !important;
    float: none !important;
    min-width: 0;
  }

  body #main > aside {
    flex: 0 0 360px;
    width: 360px !important;
    float: none !important;
  }
}

/* ------------------------------------------------------------------ */
/* 21. Footer NAP line (SEO Pass 1) — complete name/address/phone on   */
/* every page, in the dark footer.                                     */
/* ------------------------------------------------------------------ */
#sitemap #footer-nap {
  clear: both;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: #cfc8bf;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

#sitemap #footer-nap strong {
  color: #fff;
}

/* keep footer phone light (beats upstream a:link{color:#bb4e1a}) */
#sitemap #footer-nap a,
#sitemap #footer-nap a:link,
#sitemap #footer-nap a:visited {
  color: #fff;
  text-decoration: none;
}