/* Desktop hover dropdowns for the main menu (the original menu script isn't in the static build) */
@media (min-width: 1025px) {
  nav[aria-label="Menu"] li { position: relative; }
  nav[aria-label="Menu"] li:hover > ul,
  nav[aria-label="Menu"] li:focus-within > ul { display: block; }
  /* bridge the gap between the menu item and its dropdown so it doesn't close mid-move */
  nav[aria-label="Menu"] > ul > li > ul::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 40px; }
  /* third-level menus fly out to the side */
  /* doubled attribute selector outranks the captured ".x .y > li ul { top: 100% !important }" rule */
  nav[aria-label="Menu"][aria-label] ul ul ul { top: 0 !important; left: 100% !important; margin-top: 0 !important; }
  /* dropdowns had a fixed width captured from the old menu; size them to their longest item instead */
  nav[aria-label="Menu"][aria-label] ul ul { width: max-content !important; min-width: 200px !important; max-width: none !important; }
  nav[aria-label="Menu"][aria-label] ul ul > li { width: 100% !important; }
  nav[aria-label="Menu"][aria-label] ul ul a { white-space: nowrap !important; width: 100% !important; box-sizing: border-box; }
}

/* Third-level menus that would run off the screen are moved into view by assets/replay/nav-flyouts.js
   (like the original Elementor menu); when one is taller than the screen it scrolls. */
@media (min-width: 1025px) {
  nav[aria-label="Menu"][aria-label] ul ul ul[data-flyout-scroll] { overflow-y: auto !important; overscroll-behavior: contain; }
}

/* Mobile/tablet header (below 1025px): the captured logo size depends on its column's percentage width, which
   made it about 510px wide (spilling out of the header) at 500-768px and only 90-120px at 800-1024px.
   Keep it a steady size. The header holds only the logo image. */
@media (max-width: 767px) {
  header img { width: auto !important; max-width: min(245px, 100%) !important; height: auto !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  header img { width: 100% !important; max-width: 220px !important; height: auto !important; }
}

/* Small desktops (1025-1279px): the menu wrapped onto a second row. Tighten the item spacing so it stays on one line. */
@media (min-width: 1025px) and (max-width: 1279px) {
  nav[aria-label="Menu"][aria-label] > ul { flex-wrap: nowrap !important; }
  nav[aria-label="Menu"][aria-label] > ul > li > a { padding-left: 9px !important; padding-right: 9px !important; font-size: 15px !important; white-space: nowrap; }
}

/* Blog posts: photos floated left/right in the article (WordPress alignleft/alignright) left the text a sliver of
   room from 769px to 1279px, where the article column is only ~430-700px wide, so words broke a few letters per
   line (the live site does the same). Stop the float there and put the photo on its own line above the text, as
   phones already do below 769px. Emoji images stay inline with their text. */
@media (min-width: 769px) and (max-width: 1279px) {
  body[itemtype="https://schema.org/Blog"] p > img:not([src*="/emoji/"]),
  body[itemtype="https://schema.org/Blog"] p > a > img:not([src*="/emoji/"]) { float: none !important; display: block; margin: 0 auto 1.5em !important; }
}

/* Full-width ("stretched") sections had their width frozen at the captured screen size (e.g. 1440px), so on wider
   screens their background photo stopped part-way across. Their parents are full width, so 100% is the stretch. */
section[data-rg][data-rg] { width: 100% !important; left: 0 !important; }

/* Sticky header: the whole header sticks, offset by the top bar's height (set in mobile-menu.js) so only the
   logo + menu row stays on screen */
html, body { overflow-x: clip !important; }
header:has(nav[aria-label="Menu"]) { position: sticky !important; top: var(--sticky-top, 0px); z-index: 999; }

/* "Accredited by" logo strips (homepage, Why Hire Spartan). The logos are background images set to cover their box,
   so they were cropped, and from 769px to 1024px each box was ~1300px tall, turning them into thin strips. Show each
   logo whole at a steady height; assets/replay/logo-slider.js sizes the slides and slides them along (the captured
   strip had no arrows or autoplay, so most logos could never be seen). */
[data-logo-strip], [data-logo-strip] [data-carousel-track] { height: auto !important; min-height: 0 !important; }
[data-logo-strip] { overflow: hidden !important; }
[data-logo-strip] [data-carousel-track] { display: flex !important; flex-wrap: nowrap !important; align-items: center; }
[data-logo-strip] [data-carousel-slide] { flex: 0 0 auto !important; height: auto !important; box-sizing: border-box; }
[data-logo-strip] [data-carousel-slide] [style*="background-image"] {
  background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important;
  height: 120px !important; min-height: 0 !important;
}

/* Photo grids: tiles take each photo's own shape, so one portrait photo (Sylvan Lake Craftsman) stood twice as
   tall as the rest and left a gap. Galleries marked data-tile-ratio crop every tile to the gallery's usual shape
   (--tile-ratio); the full photo still opens in the lightbox. */
[data-tile-ratio] a > img { aspect-ratio: var(--tile-ratio); width: 100%; height: auto !important; object-fit: cover; object-position: center; }

/* House plan details table (Lifestyle Series plan pages): it needs about 800px, so below 1280px it ran out of its
   column under the sidebar (and was cut off on phones). Keep it in its column with sideways scrolling, and
   tighten it so it fits without scrolling on most tablets. */
@media (max-width: 1279px) {
  [data-plan-table] { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  [data-plan-table] table { margin: 0; font-size: 14px; }
  [data-plan-table] :is(td, th) { padding: 6px 8px !important; }
  [data-plan-table]:focus-visible { outline: 2px solid #f49c22; outline-offset: 2px; }
}
/* In-page links (/#about, /testimonials/#name, Standard Features…) jumped the section under the sticky header
   (120px tall; 160px from 769px to 1024px). Leave that room, plus a little air, when scrolling to an anchor. */
html { scroll-padding-top: 136px; }
@media (min-width: 769px) and (max-width: 1024px) { html { scroll-padding-top: 176px; } }

/* Emoji stay on the same line as the word before them instead of wrapping onto a line of their own. */
.emoji-nowrap { white-space: nowrap; }