/* ===== Conrad — Elementor + Hello Elementor integration fixes ===== */

/* 1) Hide the theme's page title / header ("Home") so the site header sits flush at the very top */
.page-header,
.entry-title,
h1.entry-title,
.elementor-page-title,
.site-main > article > header,
.hello-elementor .site-main > .page-header { display: none !important; }

/* 2) Full-bleed section widgets — strip Elementor's wrapper padding, gaps and width caps */
.elementor-section > .elementor-container,
.elementor-section.elementor-section-boxed > .elementor-container { max-width: 100% !important; }
.elementor-widget-wrap { padding: 0 !important; }
.elementor-widget:not(:last-child) { margin-bottom: 0 !important; }
[data-widget_type^="conrad-"] > .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.elementor-element[data-widget_type^="conrad-"] { width: 100% !important; }

/* 3) No top gap above the header */
.site-main, .page-content, .elementor { padding-top: 0 !important; margin-top: 0 !important; }
.elementor-section { margin-top: 0 !important; margin-bottom: 0 !important; }

/* 4) Suppress Hello Elementor's own header/footer if it ever slips through (Theme Builder provides them) */
body #site-header.dynamic-header:not([data-elementor-type]),
body #site-footer.dynamic-footer:not([data-elementor-type]) { display: none !important; }

/* 5) FIX: Elementor/Hello force img{height:auto}, which blows up the fixed-size
   logo & certification-badge images. Restore the design's exact dimensions. */
.hdr .hdr-logo img { height: 52px !important; width: auto !important; max-width: none !important; }
.hdr.scrolled .hdr-logo img { height: 44px !important; }
.ftr .ftr-logo img { height: 58px !important; width: auto !important; max-width: none !important; }
.ftr .certs .cert-b { height: 66px !important; min-width: 70px !important; }
.ftr .certs .cert-b img { height: 100% !important; width: auto !important; max-width: 160px !important; object-fit: contain !important; }
.ftr .soc a { width: 36px !important; height: 36px !important; }
.ftr .soc svg { width: 17px !important; height: 17px !important; }

/* keep the fixed site header contained and above content */
.elementor-location-header { position: relative; z-index: 130; }
.elementor-location-header .elementor-widget-container { padding: 0 !important; }

/* 6) FIX: theme button styles (padding/min-width) stretch the round slider dots into ovals.
   Force perfect circles and reset the slider arrow buttons. */
.sl-dots button, .testi-dots button {
	width: 7px !important; height: 7px !important; min-width: 0 !important; min-height: 0 !important;
	padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important;
	box-shadow: none !important; line-height: 0 !important; -webkit-appearance: none !important; appearance: none !important;
}
.sl-dots { gap: 8px !important; }
.car-btn {
	width: 46px !important; height: 46px !important; min-width: 0 !important; padding: 0 !important;
	border-radius: 50% !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important;
}
/* keep the header CTA button from clipping its label */
.hdr .btn, .hdr .btn-sm { white-space: nowrap !important; }

/* 7) FIX: theme's global link color turns footer phone/email links red/pink.
   Higher-specificity selectors so the design's light footer links win. */
.ftr a[href], .ftr .fline a[href], .elementor-location-footer .ftr a[href],
.ftr a[href^="tel"], .ftr a[href^="mailto"] { color: rgba(255,255,255,0.85) !important; text-decoration: none !important; }
.ftr a[href]:hover, .elementor-location-footer .ftr a[href]:hover { color: #C9A063 !important; }
.ftr .soc a[href] { color: #fff !important; } /* social icon circles keep white glyphs */
.area .area-p2:empty{display:none}

/* Fix white sliver at top of page (Firefox rendering gap between fixed header and content) */
/* Give the fixed header wrapper the same dark background so any 1px gap does not show a white sliver on Firefox */
header[data-elementor-type="header"] { background: #081720; }
header.hdr, header.hdr .wrap { background: transparent; }

/* Center home hero content */
.hero .hero-copy { text-align: center; max-width: 780px; margin-inline: auto; }
.hero .hero-sub { max-width: 760px; margin-left: auto; margin-right: auto; text-wrap: pretty; }
.hero .hero-btns { justify-content: center; }
.hero .eyebrow, .hero .tagline { display: block; }

/* 8) Hello Elementor's reset.css loads after cnc.css and sets `body { font-family }` at the
   same specificity, so the theme's system stack won and body copy never used the brand font.
   Raise specificity so Urbanist applies everywhere, including form controls. */
html body { font-family: var(--ff-body); }
html body input, html body select, html body textarea,
html body button, html body optgroup { font-family: inherit; }

/* Mobile drawer: close button + collapsed submenus by default */
.drawer-close { position: absolute; top: 22px; right: 20px; background: transparent; border: 0; color: #fff;
  cursor: pointer; padding: 6px; opacity: .8; z-index: 2; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .28s var(--ease), color .28s var(--ease), opacity .28s var(--ease); }

/* Theme button defaults paint these controls on hover/focus — force the brand palette instead */
.drawer-close:hover, .drawer-close:focus, .drawer-close:focus-visible,
.drawer-close:active { background: var(--gold) !important; color: #081720 !important; opacity: 1; outline: none; }
.burger, .burger:hover, .burger:focus, .burger:focus-visible, .burger:active {
  background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none; }
.burger:hover span, .burger:focus-visible span { background: var(--gold); }

.drawer .mnav > li.menu-item-has-children > a { position: relative; padding-right: 32px; }
.drawer .mnav > li.menu-item-has-children > a::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 7px; height: 7px;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: translateY(-70%) rotate(45deg); opacity: .6;
  transition: transform .3s var(--ease), opacity .3s var(--ease); }
.drawer .mnav > li.menu-item-has-children.open > a::after { transform: translateY(-25%) rotate(-135deg); opacity: 1; }
.drawer .mnav .sub-menu { max-height: 0; overflow: hidden; padding: 0 0 0 14px; transition: max-height .35s ease, padding .35s ease; }
.drawer .mnav > li.menu-item-has-children.open > .sub-menu { max-height: 600px; padding: 4px 0 10px 14px; }