/*
 * Cabentry child theme: the small bits the old plugins' JavaScript or settings used to do.
 * The look of the pages themselves comes from the live site's own CSS (assets/legacy) and the old
 * plugins' widget CSS (assets/compat). Loaded after both.
 */

/* ---------- Header menu dropdowns (were opened by Elementor Pro's SmartMenus script) ---------- */
.elementor-nav-menu--main .elementor-nav-menu li { position: relative; }
.elementor-nav-menu--main .elementor-nav-menu li:hover > ul,
.elementor-nav-menu--main .elementor-nav-menu li:focus-within > ul { display: block; z-index: 100; top: 100%; left: 0; }
.elementor-nav-menu--main .elementor-nav-menu ul li { display: block; }
.elementor-nav-menu--main .sub-arrow { display: inline-flex; align-items: center; margin-left: 6px; font-size: 10px; line-height: 1; }

/* ---------- Mobile menu (was an Elementor Pro popup): right side, full height, dark overlay ---------- */
.cab-offcanvas { position: fixed; inset: 0; z-index: 9999; }
.cab-offcanvas[hidden] { display: none; }
.cab-offcanvas__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .8); opacity: 0; transition: opacity .25s ease; }
.cab-offcanvas__panel {
	position: absolute; top: 0; right: 0; height: 100vh; width: 80vw; max-width: 100%;
	background: #fff; overflow-y: auto; padding: 10px; box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2);
	transform: translateX(100%); transition: transform .25s ease;
}
@media (max-width: 767px) { .cab-offcanvas__panel { width: 85vw; padding: 5px 5px 5px 10px; } }
.cab-offcanvas.is-open .cab-offcanvas__overlay { opacity: 1; }
.cab-offcanvas.is-open .cab-offcanvas__panel { transform: none; }
html.cab-offcanvas-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .cab-offcanvas__overlay, .cab-offcanvas__panel { transition: none; } }

/* ---------- Load-order fixes: on live, Hello's theme.min.css loaded AFTER Elementor 3.19; here the 3.19 copy loads after Hello ---------- */
.wp-caption img { display: block; margin-left: auto; margin-right: auto; }
/* Icon box, laid out the way Elementor 3.19 (live) did. `body` because Elementor 4 prints its widget CSS
   (widget-icon-box.min.css) after this file.
   - Icon ABOVE the text: plain blocks, icon row at the text line height, spaced by the icon's bottom margin.
     (Elementor 4's flex column + gap stops the title's top margin merging into that space: +8px per box.)
   - Icon BESIDE the text: flex row (Elementor 4's own), icon an inline-flex box exactly the icon's height. */
body .elementor-widget-icon-box .elementor-icon-box-icon { line-height: inherit; }
body .elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-wrapper { display: block; }
body .elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-icon { display: block; margin-bottom: var(--icon-box-icon-margin, 15px); }
body .elementor-widget-icon-box:is(.elementor-position-inline-start, .elementor-position-inline-end) .elementor-icon-box-icon { display: inline-flex; }
@media (max-width: 1024px) {
	body .elementor-widget-icon-box.elementor-tablet-position-block-start .elementor-icon-box-wrapper { display: block; }
	body .elementor-widget-icon-box.elementor-tablet-position-block-start .elementor-icon-box-icon { display: block; margin-bottom: var(--icon-box-icon-margin, 15px); }
	body .elementor-widget-icon-box:is(.elementor-tablet-position-inline-start, .elementor-tablet-position-inline-end) .elementor-icon-box-wrapper { display: flex; }
	body .elementor-widget-icon-box:is(.elementor-tablet-position-inline-start, .elementor-tablet-position-inline-end) .elementor-icon-box-icon { display: inline-flex; margin-bottom: 0; }
}
@media (max-width: 767px) {
	body .elementor-widget-icon-box.elementor-mobile-position-block-start .elementor-icon-box-wrapper { display: block; }
	body .elementor-widget-icon-box.elementor-mobile-position-block-start .elementor-icon-box-icon { display: block; margin-bottom: var(--icon-box-icon-margin, 15px); }
	body .elementor-widget-icon-box:is(.elementor-mobile-position-inline-start, .elementor-mobile-position-inline-end) .elementor-icon-box-wrapper { display: flex; }
	body .elementor-widget-icon-box:is(.elementor-mobile-position-inline-start, .elementor-mobile-position-inline-end) .elementor-icon-box-icon { display: inline-flex; margin-bottom: 0; }
}

/* ---------- Forms ---------- */
/* Hidden labels on the call-request forms (Elementor 3.19 rule that 4.x dropped) */
.elementor-screen-only { position: absolute; top: -10000em; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* Button icon side (Elementor 3.19 rule that Elementor 4 dropped; the form buttons still use it) */
.elementor-button .elementor-align-icon-right { margin-left: 5px; order: 15; }
.elementor-button .elementor-align-icon-left { margin-right: 5px; order: 5; }
/* Elementor 4 adds a 5px gap inside form buttons; 3.19 had none (the icon's own margin spaces it) */
.elementor-form .elementor-button > span { gap: 0; }
/* Pro hides hidden-field rows, but the 3.19 .elementor-column{display:flex} loads later and shows them */
.elementor-form .elementor-field-type-hidden { display: none; }
.cab-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.elementor-form .elementor-message { margin-top: 10px; font-size: 14px; }
.elementor-form .elementor-message-danger { color: #b00000; }
.elementor-form .elementor-message-success { color: #1C9C42; }

/* ---------- Jet accordion: open/close animation (was Jet's script) ---------- */
.jet-toggle__content { overflow: hidden; transition: height .3s ease; }
.jet-toggle__control { cursor: pointer; }
.jet-toggle .icon-active { display: none; }
.jet-toggle.active-toggle .icon-normal { display: none; }
.jet-toggle.active-toggle .icon-active { display: inline-flex; }

/* ---------- Customer listing: whole card is the link (was JetEngine's overlay link) ---------- */
.jet-listing-grid__item { position: relative; }
/* `body .jet-listing-grid` beats compat/jet-listing.css (z-index -1; live used a click script instead) */
body .jet-listing-grid .jet-engine-listing-overlay-link { position: absolute; inset: 0; z-index: 2; }

/* ---------- Customer portal pages (WordPress blocks, styles from the block build) ---------- */
.cab-portal-main { max-width: none; padding: 0; }
.cab-portal-main > .alignfull { margin-left: 0; margin-right: 0; }
.cab-portal-main .wp-block-button__link { background: var(--wp--preset--color--red-dark); color: #fff; border-radius: 7px; padding: .7rem 1.4rem; text-decoration: none; font-weight: 600; }
.cab-portal-main .wp-block-button:not(.is-style-cab-text):not(.is-style-outline) .wp-block-button__link::after { content: "\00a0\203A"; }
.cab-portal-main .wp-block-button__link:hover { background: var(--wp--preset--color--black); }
.cab-card { background: #fff; border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,.09); padding: 1.75rem; height: 100%; }
.cab-card--rule { border-top: 3px solid var(--wp--preset--color--red); }
.cab-rule::before { content: ""; display: block; width: 48px; height: 3px; background: var(--wp--preset--color--red); margin-bottom: 0.9rem; }
.cab-steps { list-style: none; counter-reset: cab-step; padding-left: 0; }
.cab-steps li { counter-increment: cab-step; position: relative; padding-left: 3rem; margin-bottom: 1rem; min-height: 2.1rem; padding-top: .2rem; }
.cab-steps li::before { content: counter(cab-step); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--wp--preset--color--red-dark); color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.cab-notice { background: #fff; border-left: 4px solid var(--wp--preset--color--green); border-radius: 4px; padding: 1rem 1.25rem; margin-bottom: 2rem; box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.cab-notice p { margin: 0; }
.cab-portal-logo img { max-height: 90px; width: auto; }
.cab-portal-list { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem; }
.cab-portal-list a { display: flex; flex-direction: column; align-items: center; gap: .75rem; height: 100%; padding: 1.25rem 1rem; background: #fff; border: 1px solid #e3e3e3; border-radius: 6px; text-decoration: none; color: var(--wp--preset--color--black); font-weight: 500; text-align: center; transition: box-shadow .15s, border-color .15s; }
.cab-portal-list a:hover, .cab-portal-list a:focus-visible { border-color: var(--wp--preset--color--red-dark); box-shadow: 0 6px 22px rgba(0,0,0,.1); }
.cab-portal-list__logo { height: 70px; display: flex; align-items: center; justify-content: center; }
.cab-portal-list__logo img { max-height: 70px; max-width: 100%; width: auto; height: auto; }

/* Portal forms ([cabentry_form], inc/forms.php) */
.cab-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.cab-form .cab-field { display: flex; flex-direction: column; gap: 0.35rem; }
.cab-form .cab-field--full { grid-column: 1 / -1; }
.cab-form label { font-weight: 500; font-size: 0.9375rem; color: #000; }
.cab-form input, .cab-form textarea { font: inherit; font-size: 1rem; padding: 0.7rem 0.85rem; border: 1px solid #bdbdbd; border-radius: 4px; background: #fff; color: #000; }
.cab-form input:focus, .cab-form textarea:focus { outline: 2px solid #000; outline-offset: 1px; border-color: #000; }
.cab-form button { grid-column: 1 / -1; justify-self: start; font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; border: 0; border-radius: 7px; padding: 0.85rem 1.75rem; background: #C90302; color: #fff; }
.cab-form button:hover, .cab-form button:focus-visible { background: #000; }
.cab-form--compact { grid-template-columns: 1fr; }
.cab-form fieldset.cab-field { border: 0; padding: 0; margin: 0; }
.cab-form legend { font-weight: 500; font-size: 0.9375rem; color: #000; margin-bottom: .35rem; padding: 0; }
.cab-form .cab-field--radio label { display: flex; align-items: flex-start; gap: .55rem; font-weight: 400; cursor: pointer; }
.cab-form .cab-field--radio input { margin-top: .3rem; padding: 0; width: 1.05rem; height: 1.05rem; accent-color: #C90302; flex: none; }
.cab-form-error { grid-column: 1 / -1; background: #fdecec; border-left: 4px solid #C90302; padding: 0.75rem 1rem; color: #000; }
@media (max-width: 600px) { .cab-form { grid-template-columns: 1fr; } }

/* Header dropdown links: dark grey as on live (#33373D). Here the kit's red link colour prints after pro-nav.css and won; hover/current rules are more specific and still apply (Jeff, 10-14). */
body .elementor-nav-menu--dropdown a { color: #33373d; }

/* Features cards: the whole card opens its section, not just the icon and title (Jeff, 10-14). The title link is
   stretched over the card (the column wrap); only image boxes that are alone in their card. */
body .elementor-widget-wrap > .elementor-widget-image-box:only-child:has(.elementor-image-box-title a) { position: static; }
body .elementor-widget-wrap > .elementor-widget-image-box:only-child .elementor-image-box-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }