.elementor-kit-28{--e-global-color-primary:#334E68;--e-global-color-secondary:#E3EBF3;--e-global-color-text:#102A43;--e-global-color-accent:#8FA9C4;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-28 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Vertical Web — full-bleed layout fix, 2026-08-05. Pages moved from Elementor Canvas to Elementor Full Width so the Theme Builder header/footer can render. Astra then wraps page content in #content > .ast-container, which caps at 1320px and boxes every section background. Released here so section backgrounds run edge to edge while each container's own boxed_width still holds the inner content at 1320px. */ #page{max-width:100%;} #content > .ast-container{max-width:100%;padding-left:0;padding-right:0;} .ast-page-builder-template #content > .ast-container{max-width:100%;} .elementor-location-header,.elementor-location-footer{width:100%;} .elementor-location-header > .e-con,.elementor-location-footer > .e-con{max-width:100%;} /* --- Max Mega Menu header colors, 2026-09-02 ------------------------------- The primary nav is Max Mega Menu, output by a shortcode widget in the Site Header template. Colors live here rather than in the plugin: its color pickers do not take programmatic values and its compiled stylesheet did not pick up later saves. Sizing and typography ARE set in the plugin theme. Change a menu color here, not in Mega Menu, or the two will disagree. */ #mega-menu-wrap-primary, #mega-menu-wrap-primary #mega-menu-primary{background:transparent;} #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{ font-family:'Inter',sans-serif;font-size:10.5px;font-weight:400; text-transform:uppercase;letter-spacing:1.2px; color:#0A1E45;background:transparent;border:0;position:relative;} #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link{ color:#31C9D6;background:transparent;font-weight:400;} /* teal underline fading in, matching the Elementor pointer this replaced */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::after{ content:"";position:absolute;left:6px;right:6px;bottom:0;height:2px; background:#31C9D6;opacity:0;transition:opacity .3s ease;} #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover::after, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link::after{ opacity:1;} /* panels and flyouts */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu{ background:#FFFFFF;border:1px solid #DAE3EE;border-radius:0;box-shadow:none;} #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu a.mega-menu-link{ font-family:'Inter',sans-serif;font-size:12.5px;font-weight:300; letter-spacing:0;text-transform:none;color:#0A1E45;background:transparent;} #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu a.mega-menu-link:focus{ color:#1795A3;background:#FFFFFF;} /* column headings inside a mega panel, styled like the site's eyebrows */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link{ font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:1.6px; color:#1795A3;background:transparent;} #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover{ color:#0A1E45;background:transparent;} /* mobile toggle */ #mega-menu-wrap-primary .mega-menu-toggle, #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open{background:transparent;} #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block span, #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block button{color:#0A1E45;} #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary{background:#FFFFFF;} /* third level, the villages under Kingwood. Needs the extra li specificity to beat Max Mega Menu's own nested flyout rule, which paints them #666. */ #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item li.mega-menu-item a.mega-menu-link{ font-family:'Inter',sans-serif;font-size:12.5px;font-weight:300; letter-spacing:0;text-transform:none;color:#0A1E45;background:transparent;} #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item li.mega-menu-item a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item li.mega-menu-item a.mega-menu-link:focus{ color:#1795A3;background:#FFFFFF;} /* third level, the villages under Kingwood. These .elementor-kit-28s are copied verbatim from Max Mega Menu's own compiled rule for Third Level Menu Items, which paints them #666. Matching it exactly is what beats it: the kit stylesheet loads after the plugin's. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link{ font-family:'Inter',sans-serif;font-size:12.5px;font-weight:300; letter-spacing:0;text-transform:none;color:#0A1E45;background:transparent;} #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard li.mega-menu-item > a.mega-menu-link:focus, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link:focus{ color:#1795A3;background:#FFFFFF;} /* Panel geometry. Max Mega Menu anchors the panel under its own item at its natural width, which left four cramped columns and wrapped the longer village names. Widened and pinned to the right so it sits under the nav block. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu{ width:1040px;max-width:calc(100vw - 48px);left:auto;right:0; padding:28px 24px;column-gap:24px;} #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item{ padding-right:16px;} /* Kingwood holds 25 villages, which in a six column grid made one 700px column with five near-empty ones beside it. Give that one cell three columns of width and flow its list across three text columns, so the panel is wide and shallow instead of narrow and deep. Item 1135 is the Kingwood menu item. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li#mega-menu-item-1135{ width:50%;} #mega-menu-wrap-primary #mega-menu-primary > li#mega-menu-item-1135 > ul.mega-sub-menu, #mega-menu-wrap-primary #mega-menu-primary li#mega-menu-item-1135 > ul.mega-sub-menu{ column-count:3;column-gap:20px;} #mega-menu-wrap-primary #mega-menu-primary li#mega-menu-item-1135 > ul.mega-sub-menu > li.mega-menu-item{ break-inside:avoid;} /* The page you are on. White ground like everything else, marked by weight and color rather than a dark fill. Sara, 2 September: the dark block looked odd. */ #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard li.mega-menu-item.mega-current-menu-item > a.mega-menu-link{ color:#0A1E45;background:#FFFFFF;font-weight:500;} /* The flyout dropdowns keep the same white ground and teal hover as the mega panel. Copied from Max Mega Menu's own flyout .elementor-kit-28, which outranks the generic sub-menu rule above and would otherwise hover them grey. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link{ font-family:'Inter',sans-serif;font-size:12.5px;font-weight:300; letter-spacing:0;text-transform:none;color:#0A1E45;background:#FFFFFF;} #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus{ color:#1795A3;background:#FFFFFF;} #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item.mega-current-menu-item > a.mega-menu-link{ color:#0A1E45;background:#FFFFFF;font-weight:500;} /* top level active states. Max Mega Menu fills the item #222 or #333 when it is the current page's ancestor or while its panel is open. Sara, 2 September: the dark block looked wrong. The item is marked by the teal text and the underline instead. */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-parent, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor{ background:transparent;} #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link{ color:#31C9D6;background:transparent;font-weight:400;} #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link::after, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link::after, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link::after{ opacity:1;} /* --- end Max Mega Menu header colors ------------------------------------- *//* End custom CSS */