/* Loaded after the old sites' own stylesheets. Covers what Elementor's scripts did at runtime and
   the few elements the rebuild adds. Kept small: the backup's CSS does the styling. */

/* Sticky header: Elementor Pro fixed it with JavaScript; the header's own wrapper sticks instead. */
.elementor-location-header:has(.kp-sticky) { position: sticky; top: 0; z-index: 99; }

/* Desktop sub-menus: SmartMenus showed them on hover. */
.elementor-nav-menu--main .elementor-nav-menu li.menu-item-has-children:hover > ul,
.elementor-nav-menu--main .elementor-nav-menu li.menu-item-has-children:focus-within > ul { display: block; }
.elementor-nav-menu--main .elementor-nav-menu ul.sub-menu { z-index: 9999; }
/* SmartMenus also sized the sub-menu to its longest item; without it the box kept Elementor's fixed
   width and long items spilled out of it (operator review 2026-11-09). */
.elementor-nav-menu--main .elementor-nav-menu ul.sub-menu { width: max-content; min-width: 12em; }
/* The phone dropdown drops from below the burger. Its static position inside the flex widget box
   was the top of the header, so it covered the logo (operator review 2026-11-09). */
.elementor-widget-nav-menu.elementor-nav-menu--stretch > .elementor-widget-container { position: relative; }
.elementor-nav-menu--stretch .elementor-nav-menu__container.elementor-nav-menu--dropdown { top: 100%; }
/* Sub-menus in the mobile dropdown open on their arrow. */
.elementor-nav-menu--dropdown li.kp-open > ul { display: block; }
.elementor-nav-menu--dropdown .sub-arrow { cursor: pointer; }

/* Essential Addons accordion panels. */
.eael-adv-accordion .eael-accordion-content { display: none; }
.eael-adv-accordion .eael-accordion-content.active { display: block; }
.eael-adv-accordion .eael-accordion-header .eael-advanced-accordion-icon-opened,
.eael-adv-accordion .eael-accordion-header.show .eael-advanced-accordion-icon-closed { display: none; }
.eael-adv-accordion .eael-accordion-header.show .eael-advanced-accordion-icon-opened { display: inline-block; }

/* Filterable gallery, shown as a plain grid (its filtering script is not shipped). */
.kp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.kp-gallery .kp-gallery-img { width: 100%; height: auto; display: block; }

/* The old sites' custom CSS hides the form heading and every label. Two must show (Q34): the
   description saying who replies, which carries the implied consent, and the consent label. */
.gform_wrapper .gform_heading { display: block !important; }
.gform_wrapper .gform_heading .gform_required_legend { display: none; }
.gform_wrapper .gform_heading .gform_description { display: block; margin: 0 0 12px; font-size: 15px; }
.gform_wrapper .ginput_container_consent .gfield_consent_label { display: inline !important; font-size: 14px; font-weight: 400 !important; line-height: 1.5; }

/* The service list opens on "Select a Service" (Q53), shown like the other fields' placeholders
   (the input colour at 80% opacity, measured on the live site 2026-11-10) until a choice is made. */
.gform_wrapper select:invalid { color: rgba(50, 74, 109, 0.8) !important; }
/* The list's text at the inputs' 16px and on their left edge (operator 2026-11-10, Q67): 9px plus
   the select's 3px border matches the inputs' 12px. It was 7px while Chrome drew the select itself
   and indented its text about 5px more; since Q79 (appearance: none, below) there is no indent, so
   every browser places it the same. !important to beat the old Customizer CSS (.gfield_select at 15px). */
.gform_wrapper.gravity-theme select { font-size: 16px !important; padding-left: 9px !important; }
.gform_wrapper select option { color: #324a6d; }

/* The service list and the suburb field look the same (operator 2026-11-10, Q79). Each browser
   draws its own arrow on a select and a different one on a field with a suggestion list, so both
   lose theirs and share one drawn on the field's container, in the field's text colour (kp.js sets
   --kp-arrow from it; without JavaScript the container's colour). The suburb field's list is drawn
   by kp.js in the fields' own font and colours (.kp-suggest). */
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme input[data-kp-place] { -webkit-appearance: none; appearance: none; padding-right: 36px !important; }
.gform_wrapper input[data-kp-place]::-webkit-calendar-picker-indicator { display: none !important; }
.gform_wrapper .ginput_container_select,
.gform_wrapper .ginput_container:has(> input[data-kp-place]) { position: relative; }
.gform_wrapper .ginput_container_select::after,
.gform_wrapper .ginput_container:has(> input[data-kp-place])::after {
  content: ''; position: absolute; top: 50%; right: 14px; width: 11px; height: 7px; margin-top: -3px; pointer-events: none;
  background-color: var(--kp-arrow, currentColor);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.gform_wrapper .kp-suggest {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px 0; list-style: none;
  max-height: 330px; overflow-y: auto; background: #fff; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); font: inherit; font-size: 16px; line-height: 24px;
}
.gform_wrapper .kp-suggest[hidden] { display: none; }
/* With JavaScript a tap or click on the service list lands on this cover, which opens the drawn
   list, so no phone opens its own picker (U5). */
.gform_wrapper select.kp-drawn { pointer-events: none; }
.gform_wrapper .kp-select-cover { position: absolute; inset: 0; cursor: pointer; }
.gform_wrapper .kp-suggest li { margin: 0; padding: 4px 12px; color: var(--kp-arrow, inherit); cursor: pointer; }
.gform_wrapper .kp-suggest li[aria-selected="true"] { background: Highlight; color: HighlightText; }
/* Phone: the first and last name inputs stacked 5px apart, against 13px between other fields (D10). */
@media (max-width: 640px) {
  .gform_wrapper.gravity-theme .ginput_container--name { row-gap: 16px; }
  .gform_wrapper.gravity-theme .ginput_container--name .gform-grid-col { margin-bottom: 0; }
}

/* Design fixes from the operator's review of the Bunbury preview (2026-11-09). Element ids are
   shared by the network's sites, which were built from one Elementor design. */
/* D3: image box pictures centre under a centred heading; Elementor's display: block on the image
   ignored the box's text alignment. */
.elementor-widget-image-box .elementor-image-box-img img { display: inline-block; vertical-align: top; }
/* D7: "Our Focus" icons in the brand colour, like every other icon. */
.elementor-widget-icon-box.elementor-view-framed .elementor-icon { color: var(--e-global-color-primary) !important; border-color: var(--e-global-color-primary) !important; }
.elementor-widget-icon-box.elementor-view-framed .elementor-icon svg { fill: var(--e-global-color-primary) !important; }
/* D8: service cards in a row share one height, with "Learn More" on a common line at the bottom. */
.elementor-widget-wrap:has(> .elementor-widget-call-to-action:only-child) { align-content: stretch !important; align-items: stretch !important; }
.elementor-widget-call-to-action.elementor-cta--layout-image-above > .elementor-widget-container,
.elementor-cta--layout-image-above .elementor-cta { height: 100%; }
.elementor-cta--layout-image-above .elementor-cta { display: flex; flex-direction: column; }
.elementor-cta--layout-image-above .elementor-cta__content { flex-grow: 1; display: flex; flex-direction: column; }
.elementor-cta--layout-image-above .elementor-cta__button-wrapper { margin-top: auto; }
/* D9: the three process cards span the full column; a right padding left a gap on desktop and set
   them off centre on phones. */
.elementor .elementor-section.elementor-element.elementor-element-82215a1 { padding-right: 0; }

/* Quote form additions: the notice after a failed send, and the consent checkbox row. */
.kp-form-notice { margin: 0 0 16px; padding: 12px 16px; border: 1px solid #c02b0a; color: #c02b0a; border-radius: 3px; }
.gform_wrapper .ginput_container_consent { display: flex; gap: 8px; align-items: flex-start; }
.gform_wrapper .ginput_container_consent input[type="checkbox"] { margin-top: 4px; flex: none; }