/*
 * Span Tech Semantic Header - styles
 *
 * Scoped under .spantech-header / .spantech-modal so we don't bleed into
 * the rest of the site (which still uses Divi's own classes for content).
 */

/* ---------------------------------------------------------------------
 * Hide Divi's Theme Builder header entirely.
 *
 * We render our own semantic <header class="spantech-header"> via
 * et_theme_builder_template_after_header. Divi's TB header still has
 * to render so divi-search-helper has a .et_pb_search module to
 * enhance with autocomplete -- spantech-nav.js then moves that live
 * .et_pb_search DOM node into our tophat's
 * [data-spantech-search-slot]. With the search element relocated the
 * TB header has nothing visible to contribute, so we just hide it.
 * ------------------------------------------------------------------- */
.et-l--header {
    display: none !important;
}

/* ---------------------------------------------------------------------
 * Slotted Divi search (inside our tophat).
 *
 * spantech-nav.js moves Divi's .et_pb_search element into
 * .spantech-tophat__search-slot. Style it to fit our tophat layout.
 * Layout uses position:relative on the input container with the
 * search/clear/spinner icons absolutely positioned on the right --
 * matches the visual Divi originally used and gives the autocomplete
 * dropdown a stable positioning context.
 * ------------------------------------------------------------------- */
.spantech-tophat__search-slot {
    /* Take up the right half of the tophat -- mirrors the legacy TB
       layout where the desktop search column was 50% wide. The
       autocomplete dropdown is positioned relative to this slot. */
    flex: 1 1 0;
    min-width: 280px;
    max-width: 560px;
    align-self: center;
    position: relative;
}

.spantech-tophat__search-slot .et_pb_search {
    margin: 0;
    padding: 0;
    width: 100%;
    border: 0;
    overflow: visible;
    background: transparent;
}

.spantech-tophat__search-slot .et_pb_searchform,
.spantech-tophat__search-slot .et_pb_searchform > div {
    margin: 0;
    padding: 0;
    width: 100%;
    background: transparent;
}

/* The .et_pb_input_container holds the input + icons. Mirrors the live
   TB rules:
     border: 1px solid #28479B (royal blue)
     background: #f0eeee (warm off-white)
     square corners (border-radius: 0)
   The container is the visible "pill" -- the input itself is transparent
   and stretches to fill it. */
.spantech-tophat__search-slot .et_pb_input_container {
    position: relative;
    width: 100%;
    height: 40px;
    background: var(--st-search-bg);
    border: 1px solid var(--st-search-blue);
    border-radius: 0;
    overflow: hidden;
}

/* Input fills the container; icon sits to the left of the text via
   padding-left: 42px (matches live site). */
.spantech-tophat__search-slot .et_pb_searchform input.et_pb_s {
    width: 100%;
    height: 100%;
    background: transparent;
    border: 0;
    color: var(--st-search-blue);
    padding: 0 14px 0 42px;
    font-size: 14px;
    line-height: 1.2;
    font-family: inherit;
    box-sizing: border-box;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
}

.spantech-tophat__search-slot .et_pb_searchform input.et_pb_s::placeholder {
    color: var(--st-search-blue);
    opacity: 0.85;
}

.spantech-tophat__search-slot .et_pb_searchform input.et_pb_s:focus {
    outline: none;
    background: transparent;
}

/* Magnifier icon on the LEFT side of the input -- matches the live
   site (.et_pb_search_0_tb_header .et_pb_search_icon { left: 1rem }). */
.spantech-tophat__search-slot .et_pb_search_icon {
    position: absolute;
    top: 0;
    left: 1rem;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: ETmodules;
    font-weight: 400;
    font-size: 18px;
    color: #666670;
    pointer-events: none;
}

/* Clear (X) icon on the right; only shown by divi-search-helper while
   text is in the field. */
.spantech-tophat__search-slot .et_pb_clear_icon,
.spantech-tophat__search-slot .et_pb_spinner_icon {
    position: absolute;
    top: 0;
    right: 1rem;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: ETmodules;
    font-weight: 400;
    font-size: 18px;
    color: #666670;
    cursor: pointer;
    pointer-events: auto;
}

/* divi-search-helper's autocomplete dropdown. Positioned relative to
   the slot so it spans the input width. */
.spantech-tophat__search-slot .dsh-live-search-container {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    background: #ffffff;
    color: var(--st-text-on-light);
    box-shadow: var(--st-shadow);
    border-radius: 0;
    max-height: 70vh;
    overflow: auto;
}

.spantech-header {
    /* Tophat dark navy matches the production TB layout's
       .et_pb_section_0_tb_header background-color (#173261). */
    --st-bg-tophat:       #173261;
    /* Brand blue used by the original Divi main nav row
       (matches background_color="#006BB6" in the TB layout). */
    --st-bg-nav:          #006bb6;
    --st-bg-panel:        #ffffff;
    --st-bg-panel-dark:   #173261;
    --st-text-on-dark:    #ffffff;
    --st-text-on-light:   #1a2733;
    --st-text-muted:      #5a6573;
    /* Brand yellow used by the original tophat phone link and the
       "Order Parts" CTA. */
    --st-accent:          #febf10;
    /* Royal blue used by the Divi search input border, text and
       placeholder on the live site. */
    --st-search-blue:     #28479b;
    /* Warm off-white background of the search input on the live site. */
    --st-search-bg:       #f0eeee;
    --st-border:          rgba(255, 255, 255, 0.18);
    --st-shadow:          0 8px 24px rgba(0, 0, 0, 0.18);
    --st-radius:          4px;
    --st-container:       1400px;
    /* Matches the legacy Divi main nav, which used 2% top + 2% bottom
       padding around a ~50px logo (logo_width="300px" auto-scaled). */
    --st-nav-height:      90px;
    /* Matches the legacy TB tophat row (.et_pb_row_1_tb_header height: 50px). */
    --st-tophat-height:   50px;
    --st-transition:      150ms ease-out;

    position: relative;
    z-index: 9999;
    background: var(--st-bg-nav);
    color: var(--st-text-on-dark);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
    /* Keep the header pinned to the viewport's width so its content
       (e.g. the mobile hamburger at the right edge) stays visible even
       if page-body content somewhere below forces horizontal overflow.
       overflow-x: clip lets absolute-positioned mega-menus still hang
       below the header (Y axis stays visible). The shorthand also
       releases the temporary `overflow: hidden` set by the inlined
       critical CSS in <head>. */
    width: 100vw;
    max-width: 100vw;
    overflow: clip visible;
    /* Release the fixed `height: 90px` set by the inlined critical CSS;
       the final styled header is sized by .spantech-nav__inner's
       min-height. */
    height: auto;
}

.spantech-header *,
.spantech-header *::before,
.spantech-header *::after {
    box-sizing: border-box;
}

.spantech-header ul,
.spantech-header ol,
.spantech-header li {
    list-style: none;
    margin: 0;
    padding: 0;
    /* The site's body CSS sets `padding: 0 0 23px 1em` on every <ul> in
       the page (via `.entry-content ul, .et-l--header ul, ...`). Belt
       and suspenders: also clear the logical-property variants in case
       some upstream rule sets one of those instead. */
    padding-inline-start: 0;
    padding-inline-end: 0;
}

.spantech-header a {
    color: inherit;
    text-decoration: none;
}

/* :where() keeps the specificity at 0 so component classes like
   .spantech-tophat__cta can set their own background/border without
   needing to fight a more-specific reset. */
.spantech-header :where(button),
.spantech-modal :where(button) {
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0;
}

.spantech-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===================== Top-hat ===================== */

.spantech-tophat {
    background: var(--st-bg-tophat);
    border-bottom: 1px solid var(--st-border);
    /* Release the fixed height/overflow set by the inlined critical
       CSS so the autocomplete dropdown can hang below. */
    height: auto;
    overflow: visible;
}

.spantech-tophat__inner {
    max-width: var(--st-container);
    margin: 0 auto;
    padding: 0 24px;
    min-height: var(--st-tophat-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* The legacy DiviMenus_flex tophat (.et_pb_divimenus_flex_1_tb_header
   .dd-flex) used a 25px gap between items. */
.spantech-tophat__items {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

.spantech-tophat__item {
    display: flex;
    align-items: center;
}

/* Default tophat link style: medium-weight white text, no background.
   Get Estimate uses this default; Phone and Order Parts override below. */
.spantech-tophat__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: #ffffff;
    background: transparent;
    border: 0;
    border-radius: 0;
    text-transform: none;
    letter-spacing: 0;
    transition: color var(--st-transition), background-color var(--st-transition);
}

.spantech-tophat__link:hover,
.spantech-tophat__link:focus-visible {
    color: var(--st-accent);
    opacity: 1;
}

/* Phone link styled like the live site's
   .et_pb_divimenus_flex_item_3_tb_header .dd-mi .dd-menu-item-content.dd-text:
   yellow, bold, larger than the surrounding links. */
.spantech-tophat__phone {
    color: var(--st-accent);
    font-weight: 700;
    font-size: 18px;
}

.spantech-tophat__phone:hover,
.spantech-tophat__phone:focus-visible {
    color: #ffffff;
}

/* The phone glyph next to the number is the Divi ETmodules \e090
   handset icon (matches the live site, where the span renders the
   U+E090 character in font-family ETmodules at 23px). Keeping
   font-family: inherit on the default .spantech-tophat__icon and
   layering the ETmodules family + glyph here lets non-phone icons
   stay text-flavored if we add them later. */
.spantech-tophat__phone .spantech-tophat__icon {
    font-family: ETmodules;
    font-weight: 400;
    font-size: 23px;
    /* Live site uses padding-right: 0.6em on .dd-text-icon for the
       gap to the phone number; mirroring that as the gap between
       icon and label so the spacing feels identical. */
    margin-right: 0.6em;
}

/* "Get Estimate" + "Order Parts" share the live site's yellow CTA
   button styling (mirrors .et_pb_divimenus_flex_item_{1,5}_tb_header
   .dd-mi .dd-menu-item-content): yellow background, navy uppercase
   bold text, 5px padding all sides, no border-radius. The selectors
   chain `.spantech-tophat__link` so they out-specify the
   `.spantech-header a { color: inherit }` reset above (which was
   pulling Order Parts' text color back to the inherited white). */
.spantech-tophat__link.spantech-tophat__cta,
.spantech-tophat__link.spantech-tophat__parts {
    background: var(--st-accent);
    color: #173261;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    padding: 5px 5px;
    border-radius: 0;
}

.spantech-tophat__link.spantech-tophat__cta:hover,
.spantech-tophat__link.spantech-tophat__cta:focus-visible,
.spantech-tophat__link.spantech-tophat__parts:hover,
.spantech-tophat__link.spantech-tophat__parts:focus-visible {
    /* Live hover: rgba(254,191,16,0.63). */
    background: rgba(254, 191, 16, 0.63);
    color: #173261;
}

.spantech-tophat__icon {
    font-size: 15px;
    line-height: 1;
}

/* ===================== Main nav ===================== */

.spantech-nav {
    position: relative;
    background: var(--st-bg-nav);
    /* Release the fixed height set by the inlined critical CSS. */
    height: auto;
    overflow: visible;
}

.spantech-nav__inner {
    max-width: var(--st-container);
    margin: 0 auto;
    padding: 0 24px;
    min-height: var(--st-nav-height);
    display: flex;
    align-items: center;
    gap: 24px;
}

.spantech-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin-right: auto;
}

.spantech-logo img {
    display: block;
    /* The legacy Divi nav used logo_width="300px"; given the asset's
       2560x487 aspect ratio that's ~57px tall. */
    height: 56px;
    width: auto;
    max-width: 100%;
}

.spantech-nav__toggle {
    display: none;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border-radius: var(--st-radius);
    color: var(--st-text-on-dark);
    flex: 0 0 auto;
}

.spantech-nav__toggle:hover,
.spantech-nav__toggle:focus-visible {
    background: rgba(255, 255, 255, 0.1);
}

.spantech-burger {
    position: relative;
    display: block;
    width: 24px;
    height: 18px;
}

.spantech-burger::before,
.spantech-burger::after,
.spantech-nav__toggle .spantech-burger > span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform var(--st-transition), opacity var(--st-transition), top var(--st-transition);
    content: '';
}

.spantech-burger::before { top: 0; }
.spantech-burger::after { top: 16px; }

/* Middle bar via a background line on .spantech-burger itself. */
.spantech-burger {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: 0 8px;
    transition: background-size var(--st-transition);
}

.spantech-nav__toggle[aria-expanded="true"] .spantech-burger {
    background-size: 0 2px;
}

.spantech-nav__toggle[aria-expanded="true"] .spantech-burger::before {
    top: 8px;
    transform: rotate(45deg);
}

.spantech-nav__toggle[aria-expanded="true"] .spantech-burger::after {
    top: 8px;
    transform: rotate(-45deg);
}

/* The drawer wrapper. On desktop it's a transparent passthrough so the
   <ul> participates in the nav flex layout directly; on mobile it becomes
   a fullscreen overlay. */
.spantech-drawer {
    display: contents;
}

/* ===================== Primary menu (desktop) ===================== */

.spantech-menu {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.spantech-menu__item {
    display: flex;
    align-items: stretch;
    position: relative;
}

/* Mega-menus span the full nav width, so anchor them to .spantech-nav
   (the nearest positioned ancestor that's not the trigger's own <li>)
   instead of the individual menu item. Submenus keep position:relative
   on the <li> so they remain aligned under their trigger. */
.spantech-menu__item--megamenu {
    position: static;
}

.spantech-menu__link,
.spantech-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Tighter horizontal padding so the labels sit closer together,
       matching the visual density of the legacy Divi main nav. */
    padding: 0 10px;
    height: var(--st-nav-height);
    font-size: 14px;
    /* Divi's global body font weight is 500 (Open Sans Medium); the
       legacy DiviMenus row inherited that. Keeping it at 500 here so
       our triggers visually match. */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0;
    /* Legacy menu_item_text_color="#F0EEEE" - off-white, slightly
       softer than pure #fff. */
    color: #f0eeee;
    transition: color var(--st-transition), background-color var(--st-transition);
}

.spantech-menu__link:hover,
.spantech-menu__link:focus-visible,
.spantech-menu__trigger:hover,
.spantech-menu__trigger:focus-visible,
.spantech-menu__item--megamenu .spantech-menu__trigger[aria-expanded="true"],
.spantech-menu__item--submenu .spantech-menu__trigger[aria-expanded="true"] {
    color: var(--st-accent);
    background: rgba(255, 255, 255, 0.06);
}

.spantech-menu__caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform var(--st-transition);
}

.spantech-menu__trigger[aria-expanded="true"] .spantech-menu__caret {
    transform: rotate(180deg);
}

/* ===================== Submenus (Support & Resources, About Us) ===================== */

.spantech-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    /* Navy panel with off-white text, matching the mega-menus and the
       legacy DiviMenus dropdown look. */
    background: var(--st-bg-panel-dark);
    color: var(--st-text-on-dark);
    box-shadow: var(--st-shadow);
    border-top: 3px solid var(--st-accent);
    padding: 8px 0;
    z-index: 50;
}

.spantech-submenu[hidden] {
    display: none;
}

.spantech-submenu__item {
    position: relative;
}

.spantech-submenu__item--has-children > .spantech-submenu__link::after {
    content: '\203A';
    margin-left: auto;
    padding-left: 8px;
    color: rgba(255, 255, 255, 0.55);
}

.spantech-submenu__link {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-transform: none;
    letter-spacing: 0;
    transition: background-color var(--st-transition), color var(--st-transition);
}

.spantech-submenu__link:hover,
.spantech-submenu__link:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: var(--st-accent);
}

.spantech-submenu__item--has-children:hover > .spantech-submenu__link::after,
.spantech-submenu__item--has-children:focus-within > .spantech-submenu__link::after {
    color: var(--st-accent);
}

.spantech-submenu--nested {
    position: absolute;
    top: 0;
    left: 100%;
    border-top: 0;
    border-left: 3px solid var(--st-accent);
    display: none;
}

.spantech-submenu__item--has-children:hover > .spantech-submenu--nested,
.spantech-submenu__item--has-children:focus-within > .spantech-submenu--nested {
    display: block;
}

/* ===================== Mega-menus ===================== */

.spantech-megamenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    /* Wider panel so 4-card / 5-column layouts breathe; --st-container
       caps it at 1400px so it never exceeds the main-nav row width. */
    width: min(1400px, calc(100vw - 32px));
    max-width: var(--st-container);
    background: var(--st-bg-panel-dark);
    color: var(--st-text-on-dark);
    box-shadow: var(--st-shadow);
    border-top: 3px solid var(--st-accent);
    z-index: 50;
}

.spantech-megamenu[hidden] {
    display: none;
}

.spantech-megamenu__inner {
    padding: 32px 40px;
}

.spantech-megamenu__heading {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--st-accent);
}

/* Card grid (Industries) */

.spantech-megamenu__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.spantech-megamenu__card {
    display: flex;
}

.spantech-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--st-radius);
    /* Background-only hover (no transform) so long card titles never
       reflow when the cursor enters the card. */
    transition: background-color var(--st-transition);
}

.spantech-card:hover,
.spantech-card:focus-visible {
    background: rgba(255, 255, 255, 0.10);
}

.spantech-card:hover .spantech-card__title,
.spantech-card:focus-visible .spantech-card__title {
    color: var(--st-accent);
}

.spantech-card__title {
    transition: color var(--st-transition);
}

.spantech-card__media {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--st-radius);
    overflow: hidden;
}

.spantech-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.spantech-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.spantech-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--st-text-on-dark);
    line-height: 1.25;
}

.spantech-card__description {
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}

/* Column grid (Conveyors / Components) */

.spantech-megamenu__columns {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 32px;
}

.spantech-megamenu__column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spantech-megamenu__column-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 36px;
    height: 36px;
    margin-bottom: 4px;
}

.spantech-megamenu__column-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ETmodules-font icons (used by the Components mega-menu where we
   don't have white PNG assets like the Conveyors columns). Divi
   loads the @font-face for ETmodules globally on the frontend, so
   we can render any character from icons.php's glyph map directly
   as text. Defaults to white to match the visual weight of the
   white PNGs on the Conveyors columns; hover lifts to the brand
   accent like the column title. */
.spantech-megamenu__column-icon--font {
    font-family: ETmodules;
    font-weight: 400;
    /* Sizing the font fills the 36x36 .column-icon slot. */
    font-size: 30px;
    line-height: 1;
    color: var(--st-text-on-dark);
    /* The glyph is decorative -- prevent it from being selectable
       or translated by Google Translate. */
    -webkit-user-select: none;
    user-select: none;
    speak: never;
}

.spantech-megamenu__column:hover .spantech-megamenu__column-icon--font,
.spantech-megamenu__column:focus-within .spantech-megamenu__column-icon--font {
    color: var(--st-accent);
}

.spantech-megamenu__column-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--st-accent);
    padding: 0 8px 6px;
    margin: 0 -8px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--st-radius) var(--st-radius) 0 0;
    transition: background-color var(--st-transition), color var(--st-transition);
}

a.spantech-megamenu__column-title:hover,
a.spantech-megamenu__column-title:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #ffd07b;
}

.spantech-megamenu__links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.spantech-megamenu__links a {
    display: block;
    /* Horizontal padding so the hover-background fills a clean rectangle.
       Symmetric negative margin keeps the resting text edge flush with
       the column title and bleeds the hover rectangle out into the
       column gutter equally on both sides. */
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: var(--st-radius);
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--st-transition), background-color var(--st-transition);
}

.spantech-megamenu__links a:hover,
.spantech-megamenu__links a:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: var(--st-accent);
}

/* ===================== Modal ===================== */

.spantech-modal {
    border: 0;
    padding: 0;
    background: transparent;
    width: min(720px, 90vw);
    max-width: 90vw;
    max-height: 90vh;
    color: var(--st-text-on-light);
}

.spantech-modal::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.spantech-modal__inner {
    background: #ffffff;
    border-radius: 6px;
    box-shadow: var(--st-shadow);
    padding: 28px;
    position: relative;
    overflow: auto;
    max-height: 90vh;
}

.spantech-modal__title {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 700;
    color: var(--st-text-on-light);
    padding-right: 36px;
    line-height: 1.25;
}

.spantech-modal__iframe {
    display: block;
    width: 100%;
    border: 0;
}

.spantech-modal__close-form {
    margin: 0;
    position: absolute;
    top: 12px;
    right: 12px;
}

.spantech-modal__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f3f6fa;
    color: var(--st-text-on-light);
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--st-transition);
}

.spantech-modal__close:hover,
.spantech-modal__close:focus-visible {
    background: #e2e8f0;
}

/* ===================== Responsive ===================== */

@media (max-width: 980px) {
    .spantech-header {
        --st-nav-height: 56px;
    }

    /* On mobile keep the three CTAs visible (phone, Get Estimate,
       Order Parts). Search is hidden on mobile by collapsing the
       slot, so the tophat row stays a single line. */
    .spantech-tophat__inner {
        flex-wrap: wrap;
        gap: 12px;
        row-gap: 6px;
        padding: 6px 12px;
    }

    .spantech-tophat__items {
        gap: 14px;
        flex: 1 1 auto;
    }

    .spantech-tophat__link {
        font-size: 14px;
    }

    .spantech-tophat__phone {
        font-size: 16px;
    }

    .spantech-tophat__phone .spantech-tophat__icon {
        font-size: 20px;
    }

    .spantech-tophat__cta,
    .spantech-tophat__parts {
        padding: 5px 8px;
        font-size: 13px;
    }

    /* Hide the search on mobile. The Divi search element is still
       moved into the slot by JS (so divi-search-helper's listeners
       stay live), but the slot itself is collapsed -- we don't need
       search on small viewports. */
    .spantech-tophat__search-slot {
        display: none;
    }

    .spantech-nav__inner {
        padding: 0 12px;
        gap: 12px;
    }

    .spantech-logo img {
        height: 32px;
    }

    .spantech-nav__toggle {
        display: inline-flex;
    }

    /* Drawer: full-viewport overlay below the header. */
    .spantech-drawer {
        display: block;
        position: fixed;
        top: calc(var(--st-tophat-height) + var(--st-nav-height));
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--st-bg-nav);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 16px 0 32px;
        z-index: 60;
    }

    .spantech-drawer[hidden] {
        display: none;
    }

    /* Drawer menu (the <ul>). */
    .spantech-drawer .spantech-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: transparent;
        padding: 0;
    }

    .spantech-menu__item,
    .spantech-menu__item--megamenu {
        flex-direction: column;
        position: static;
        border-bottom: 1px solid var(--st-border);
    }

    .spantech-menu__item:last-child {
        border-bottom: 0;
    }

    .spantech-menu__link,
    .spantech-menu__trigger {
        height: auto;
        min-height: 52px;
        padding: 0 20px;
        justify-content: space-between;
        width: 100%;
        font-size: 15px;
        border-bottom: 0;
        background: transparent;
    }

    .spantech-menu__link:hover,
    .spantech-menu__trigger:hover,
    .spantech-menu__trigger[aria-expanded="true"] {
        background: rgba(0, 0, 0, 0.2);
    }

    /* Mega-menus & submenus collapse into in-place accordions inside the
       drawer instead of floating panels. */
    .spantech-megamenu,
    .spantech-submenu {
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
        box-shadow: none;
        border-top: 0;
        background: rgba(0, 0, 0, 0.22);
        color: var(--st-text-on-dark);
    }

    .spantech-submenu {
        padding: 4px 0;
        border-left: 4px solid var(--st-accent);
    }

    .spantech-submenu__item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .spantech-submenu__item:last-child {
        border-bottom: 0;
    }

    .spantech-submenu__link {
        color: var(--st-text-on-dark);
        padding: 12px 24px;
        min-height: 44px;
    }

    .spantech-submenu__link:hover,
    .spantech-submenu__link:focus-visible {
        background: rgba(255, 255, 255, 0.08);
        color: var(--st-accent);
    }

    .spantech-submenu__item--has-children > .spantech-submenu__link::after {
        content: '+';
        font-size: 18px;
        font-weight: 400;
        color: var(--st-accent);
    }

    .spantech-submenu--nested {
        position: static;
        display: block;
        border-left: 0;
        background: rgba(0, 0, 0, 0.25);
        padding: 0;
    }

    .spantech-submenu--nested .spantech-submenu__link {
        padding-left: 44px;
        font-size: 14px;
        min-height: 40px;
    }

    .spantech-megamenu__inner {
        padding: 8px 0 12px;
    }

    .spantech-megamenu__cards,
    .spantech-megamenu__columns {
        display: block;
        gap: 0;
    }

    /* Cards become compact link rows on mobile (no description / image). */
    .spantech-megamenu__card {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .spantech-megamenu__card:last-child {
        border-bottom: 0;
    }

    .spantech-card {
        display: block;
        padding: 12px 24px;
        background: transparent;
        border-radius: 0;
        min-height: 44px;
    }

    .spantech-card:hover,
    .spantech-card:focus-visible {
        background: rgba(255, 255, 255, 0.08);
    }

    .spantech-card__media,
    .spantech-card__description {
        display: none;
    }

    .spantech-card__title {
        font-size: 14px;
        font-weight: 600;
    }

    /* Column-flavored mega-menus (Conveyors, Components) */
    .spantech-megamenu__column {
        gap: 0;
        padding: 4px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .spantech-megamenu__column:last-child {
        border-bottom: 0;
    }

    .spantech-megamenu__column-icon {
        display: none;
    }

    .spantech-megamenu__column-title {
        padding: 10px 24px 6px;
        margin: 0;
        font-size: 12px;
        border-bottom: 0;
        color: var(--st-accent);
    }

    .spantech-megamenu__links {
        gap: 0;
    }

    .spantech-megamenu__links a {
        padding: 10px 24px 10px 36px;
        font-size: 14px;
        min-height: 40px;
    }

    .spantech-megamenu__links a:hover,
    .spantech-megamenu__links a:focus-visible {
        padding-left: 36px;
        background: rgba(255, 255, 255, 0.06);
    }

    /* Modal sizing: fill more of the viewport on mobile. */
    .spantech-modal {
        width: 95vw;
        max-height: 95vh;
    }

    .spantech-modal__inner {
        padding: 20px 16px;
        max-height: 95vh;
    }

    .spantech-modal__title {
        font-size: 18px;
    }
}

/* Body-scroll lock when the mobile drawer is open. */
body.spantech-nav-open {
    overflow: hidden;
}

@media (min-width: 981px) {
    .spantech-drawer[hidden] {
        /* On desktop the drawer wrapper is display:contents; never hide it
           even if JS errantly toggles [hidden]. */
        display: contents !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .spantech-header *,
    .spantech-modal * {
        transition-duration: 0.01ms !important;
    }
}