/* ============================================================
   Haldatec - Elementor bridge  (rewritten 12 Oct 2026)

   The pages are native Elementor containers + widgets (converted from the
   coded .hx build by Website/build/elementor/oct12/convert.js). The
   design system in haldatec-design.css still owns TYPE, COLOUR and
   DECORATION; this file decides who owns LAYOUT and re-expresses the
   rules that stop matching once Elementor wraps every element.

   Rule of thumb: Elementor owns the block axis (vertical margin/padding,
   gaps, flex/grid behaviour) so the editor controls actually work; the
   design system owns the inline axis (.wrap's centring + side padding,
   the full-bleed .fb breakout), because overriding that de-centres every
   column (see reference_elementor_json_build_traps #11).
   ============================================================ */

/* ---- 1. Layout: let Elementor's settings win over design classes ----
   Elementor applies container layout through custom properties consumed at
   (0,1,0)-(0,2,0), so any plain design class (.hx .wrap, .hx .pgrid ...) beats
   the editor. Re-assert at (0,3,0)+; this file loads after both. */
.hx .e-con.e-con{display:var(--display);margin-block-start:var(--margin-block-start);margin-block-end:var(--margin-block-end);min-height:var(--min-height);}
.hx .e-con-full.e-con-full{padding-block-start:var(--padding-block-start);padding-block-end:var(--padding-block-end);gap:var(--row-gap) var(--column-gap);}
.hx .e-con-full.e-flex.e-flex{flex-direction:var(--flex-direction);flex-wrap:var(--flex-wrap);align-items:var(--align-items);justify-content:var(--justify-content);}
.hx .e-con.e-grid.e-grid{grid-template-columns:var(--e-con-grid-template-columns);grid-template-rows:var(--e-con-grid-template-rows);align-items:var(--align-items);justify-items:var(--justify-items);}

/* Alignment flows down like ordinary HTML. Elementor sets `--text-align:initial` on every container,
   which reset any centring inherited from a design class (.band, .whychoose) to left. A per-container
   setting written by Elementor is (0,3,0) and still wins. (QA review, 12 Oct) */
.hx .e-con{--text-align:inherit;}

/* Cards kept whole inside a text widget (`<a class="pcard">`, `.cscard`) must fill their grid cell, as
   they did when they WERE the grid item; otherwise a row of cards ends at different heights and the
   "View product" links stop lining up. Only bites where the grid stretches its items. */
.hx .e-grid > .elementor-widget-text-editor > .elementor-widget-container{height:100%;}
.hx .e-grid > .elementor-widget-text-editor > .elementor-widget-container > :only-child{height:100%;}

/* ---- 2. Widgets: the converter measured every gap into the widget's own
   bottom margin, so the elements INSIDE a widget must not add their own.
   (Margins do not collapse out of a flex item.) Block axis only: .band p
   is centred with margin:auto. */
/* A widget's Margin setting lands on its inner .elementor-widget-container, so a design class on
   the WRAPPER (.vals-head{margin:44px 0 8px}) would add on top. Elementor already zeroes the
   wrapper's end margin; zero the start too. */
.hx .e-con .elementor-widget.elementor-widget{margin-block-start:0;}
.hx .e-con .elementor-widget.elementor-widget-heading .elementor-heading-title{margin-top:0;margin-bottom:0;}
/* NB the widget's own Margin setting lands on `> .elementor-widget-container`, so that
   layer must NOT be zeroed - only the content inside it. */
.hx .e-con .elementor-widget.elementor-widget-text-editor > :not(.elementor-widget-container),
.hx .e-con .elementor-widget.elementor-widget-text-editor > .elementor-widget-container > *{margin-top:0;margin-bottom:0;}
/* a list's last item margin used to collapse out through the <ul> into the gap */
.hx .e-con .elementor-widget.elementor-widget-text-editor > :is(ul,ol) > li:last-child,
.hx .e-con .elementor-widget.elementor-widget-text-editor > .elementor-widget-container > :is(ul,ol) > li:last-child{margin-bottom:0;}
/* Elementor's text widget adds nothing else; keep the inherited design colour */
.hx .elementor-widget-text-editor{color:inherit;}

/* ---- 3. Headings that carried a class: the class now sits on the widget
   WRAPPER, so `h2.pd-title` no longer matches. Same values as haldatec-design.css. */
/* scoped EXACTLY as the design system scopes them: on category pages .pd-h is a section
   heading at Bootstrap's 2rem, and an unscoped rule shrank all of them to 18px (trap #13) */
.hx .pdetail .pd-title .elementor-heading-title{color:var(--ink);font-weight:700;font-size:clamp(1.8rem,2.8vw,2.5rem);}
.hx :is(.pd-how,.pdetail) .pd-h .elementor-heading-title{color:var(--ink);font-weight:700;font-size:1.15rem;}
.hx .vals-head .elementor-heading-title{color:var(--ink);font-weight:700;font-size:1.4rem;}

/* ---- 4. Images inside a fixed frame (aspect-ratio boxes) must fill it.
   The coded page had <img> directly in the frame; now a widget sits between. */
.hx :is(.media,.ic-media,.tl-media,.kp-media,.ps-media,.tm-ph,.acc-photo) > .elementor-widget-image{flex:1 1 auto;height:100%;}
.hx :is(.media,.ic-media,.tl-media,.kp-media,.ps-media,.tm-ph) > .elementor-widget-image img{width:100%;height:100%;object-fit:cover;display:block;}
.hx .acc-photo > .elementor-widget-image img{width:100%;height:auto;display:block;}
.hx .elementor-widget-image{text-align:inherit;}
/* product shots: contain on white, centred (was .pd-media.fit img) */
.hx .pd-media.fit > .elementor-widget-image{text-align:center;}
.hx .pd-media.fit > .elementor-widget-image img{width:auto;max-width:100%;max-height:400px;display:inline-block;}
.hx .pd-media.fit.tall > .elementor-widget-image img{max-height:440px;}
.hx .ic-media.auto > .elementor-widget-image img{height:auto;object-fit:contain;}
.hx .thumbs.fit > .elementor-widget-image img{object-fit:contain;background:#fff;padding:10px;}
.hx .thumbs > .elementor-widget-image img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;}
.hx .logos > .elementor-widget-image img{max-height:40px;width:auto;filter:grayscale(1);opacity:.62;transition:opacity .2s ease,filter .2s ease;}
.hx .logos > .elementor-widget-image img:hover{filter:grayscale(0);opacity:1;}

/* ---- 5. Buttons: the design's hover lift + arrow nudge */
.hx .elementor-button{transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;}
.hx .elementor-button:hover{transform:translateY(-2px);}
.hx .elementor-button .elementor-button-icon{transition:transform .18s ease;}
.hx .elementor-button:hover .elementor-button-icon{transform:translateX(4px);}
.hx .blueform .elementor-widget-button,.hx .blueform .elementor-button{width:100%;}

/* ---- 6. About page team grid (was an inline <style> on the coded page) */
.hx .tm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.hx .tm-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 14px 34px rgba(18,22,42,.1)}
.hx .tm-ph{aspect-ratio:2/3;overflow:hidden}
.hx .tm-ph img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.hx .tm-init{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;font-family:Poppins,sans-serif;font-weight:700;font-size:3rem}
.hx .tm-body{padding:22px 24px 26px}
.hx .tm-body .nm{color:var(--ink);font-family:Poppins,sans-serif;font-weight:700;font-size:1.1rem}
.hx .tm-body .rl{color:var(--blue);font-weight:600;font-size:.88rem;margin:2px 0 10px}
.hx .tm-body .bio{color:var(--muted);font-size:.93rem;line-height:1.6;margin:0}
@media(max-width:900px){.hx .tm-grid{grid-template-columns:1fr}}

/* ---- 7. Heroes: in the coded build the hero's .wrap is a FLEX ITEM of
   `.phero{display:flex}`, so it shrink-wraps to its text and margin:auto centres
   it. An Elementor container is width:100% by default, which left-aligned every
   hero title (Filters: x 641 -> 168). Restore the shrink-wrap. */
.hx :is(.phero,.hero) > .e-con.e-con{width:auto;max-width:1200px;}

/* ---- 8. Elementor draws its background overlay with `.e-con:before{position:absolute;...}`
   (0,1,1). The testimonial card's big opening quote is ALSO a :before, but in normal flow
   (display:block; margin-bottom:14px). Absolute, it fell out of flow and every card lost
   ~54px. Put it back in flow. */
.hx .tcard.e-con.e-con:before{position:static;width:auto;height:auto;left:auto;top:auto;border:0;}

/* ---- 9. Button icons are the coded site's own SVGs (media library). Elementor sizes every icon
   to 1em of the button text (15px); the originals are 20x14 (arrow), 18x18 (download) and
   17x17 (phone), and a 4px-narrower PDF button let two fit per line. Use the SVG's own size. */
.hx .elementor-button .elementor-button-icon svg{width:auto;height:auto;}

/* ============================================================
   Header + footer (Elementor Theme Builder templates "Haldatec Header" / "Haldatec Footer",
   12 Oct 2026). Values match the coded header/footer they replace.
   ============================================================ */
/* header buttons: one line, phone icon at its own 17px */
.hd-header .hd-hbtn .elementor-button{white-space:nowrap;}
.hd-header .hd-hbtn .elementor-button-icon svg{width:17px;height:17px;}
/* menu: Bootstrap-style caret sits tight against the label */
.hd-nav .elementor-nav-menu--main .elementor-item.has-submenu .sub-arrow{padding:0 0 0 4px;margin:0;}
.hd-nav .elementor-nav-menu--main .sub-arrow svg{width:.6em;height:.6em;}
.hd-nav .elementor-nav-menu--main .elementor-item.has-submenu{gap:0;}
/* dropdown: the "All ..." link is bold with a divider under it (was .fw-semibold + <hr>) */
.hd-nav .elementor-nav-menu--main .sub-menu{padding:8px 0;box-shadow:none;min-width:200px;}
.hd-nav .sub-menu .mm-all > a{font-weight:600 !important;}
.hd-nav .elementor-nav-menu--main .sub-menu .mm-all{border-bottom:1px solid rgba(0,0,0,.176);margin-bottom:8px;padding-bottom:8px;}
/* Products: two columns (grid, so a long label never breaks across the column edge - Monique 30 Jul) */
@media (min-width:901px){
  .hd-nav .elementor-nav-menu--main .mm-2col > ul.sub-menu{width:620px !important;max-width:620px !important;}
  .hd-nav .elementor-nav-menu--main .mm-2col > ul.sub-menu[style*="display: block"]{display:grid !important;grid-template-columns:repeat(2,minmax(280px,1fr));column-gap:1.5rem;}
  .hd-nav .elementor-nav-menu--main .mm-2col > ul.sub-menu > li.mm-all{grid-column:1 / -1;}
  .hd-nav .elementor-nav-menu--main .mm-2col > ul.sub-menu .elementor-sub-item{white-space:nowrap;}
}
/* the header must sit ABOVE the page: the hero's .wrap is z-index:2, which painted the white hero
   title through the open Products dropdown. Bootstrap's dropdown used z-index 1000. */
.elementor-location-header{position:relative;z-index:1000;}
/* phone/tablet menu: blue panel with white items, like the coded collapsed navbar. Scoped to
   nav.elementor-nav-menu--dropdown - the DESKTOP menu also carries .elementor-nav-menu__container,
   and its submenus .elementor-nav-menu--dropdown, so anything looser whitewashed the desktop dropdown.
   Elementor's own per-widget colour rule is (0,4,0), hence the doubled class. */
.elementor-location-header .hd-nav.hd-nav nav.elementor-nav-menu--dropdown,
.elementor-location-header .hd-nav.hd-nav nav.elementor-nav-menu--dropdown .sub-menu{background-color:#0000ff;}
.elementor-location-header .hd-nav.hd-nav nav.elementor-nav-menu--dropdown a{color:#fff !important;background:transparent !important;font-family:Montserrat,sans-serif !important;font-size:17px !important;font-weight:600 !important;line-height:25.5px !important;}
.elementor-location-header .hd-nav.hd-nav nav.elementor-nav-menu--dropdown .sub-menu a{font-size:15px !important;font-weight:500 !important;padding-left:36px !important;}
.elementor-location-header .hd-nav.hd-nav nav.elementor-nav-menu--dropdown .sub-arrow,
.elementor-location-header .hd-nav.hd-nav nav.elementor-nav-menu--dropdown .sub-arrow svg{color:#fff;fill:#fff;}
.elementor-location-header .hd-nav.hd-nav nav.elementor-nav-menu--dropdown .mm-all{border-bottom:0;margin:0;padding:0;}
.hd-nav .elementor-menu-toggle{border:1px solid rgba(0,0,0,.15);padding:4px 12px;}

/* ---- Search results + 404 (theme templates, not Elementor pages). Their title used to come from
   header.php, which the Elementor header replaces; give them the site's width and type. */
body.search #primary,body.error404 #primary{max-width:1296px;margin:0 auto;padding:56px 12px 80px;font-family:'Inter',sans-serif;color:#12162a;}
.hd-sys-title{font-family:'Poppins',sans-serif;font-weight:700;color:#1a24e8;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.15;margin:0 0 28px;}
body.search #post-wrap article{padding:20px 0;border-bottom:1px solid #e5e7ee;}
body.search #post-wrap .entry-title{display:block !important;font-family:'Poppins',sans-serif;font-size:1.2rem;font-weight:700;line-height:1.3;margin:0 0 6px;}
body.search #post-wrap .entry-title a{color:#12162a;text-decoration:none;}
body.search #post-wrap .entry-title a:hover{color:#1a24e8;}
body.search #post-wrap .entry-content{color:#5b6172;font-size:15px;line-height:1.6;}
body.search .navigation.pagination{margin-top:28px;font-family:'Poppins',sans-serif;}
body.search .navigation.pagination .page-numbers{display:inline-block;padding:6px 12px;margin-right:4px;border:1px solid #e5e7ee;border-radius:8px;color:#12162a;text-decoration:none;}
body.search .navigation.pagination .page-numbers.current{background:#1a24e8;border-color:#1a24e8;color:#fff;}
body.error404 .entry-content p{font-size:1.05rem;color:#5b6172;margin:0 0 20px;}
body.error404 .search-form input[type=search],body.error404 .search-form input[type=text]{border:1px solid #e5e7ee;border-radius:10px;padding:12px 14px;font-size:1rem;min-width:280px;}
/* an existing inline rule `.post .entry-header{display:none}` hid every result's title */
body.search #post-wrap .entry-header{display:block !important;}