/**
 * Fenceology header chrome.
 *
 * Adapts the Elementor header template (70290) to the design handoff. The nav
 * itself is not styled here - that lives in fenceology-nav.css alongside the
 * [fenceology_nav] markup it belongs to.
 *
 * No Elementor auto-generated element IDs (.elementor-element-1cc41b7 and
 * friends) are used here, deliberately. Those IDs are regenerated whenever a
 * widget is deleted and rebuilt, so CSS keyed to them dies silently - that
 * already happened once during this build: rules written against the circular
 * logo widget stopped matching the moment the widget was replaced, with no
 * error anywhere.
 *
 * Everything is addressed semantically instead, scoped to #rs-header:
 *
 *   .top-bar    utility bar section  ] author classes already set on the
 *   .menu-part  main bar section     ] sections in Elementor
 *
 * Columns carry no classes, so they are identified by what they contain:
 *
 *   logo column     .elementor-column:has(.elementor-widget-site-logo)
 *   nav column      .elementor-column:has(.elementor-widget-shortcode)
 *   actions column  .elementor-column:has(.elementor-widget-rs-button)
 *
 * Widgets are addressed by type, which is unique per widget within the header,
 * except rs-contact-box which appears four times (address, hours, email,
 * phone) - the phone one is the only with a .phone child, hence
 * `.elementor-widget-rs-contact-box:has(.phone)`.
 *
 * This survives widgets being rebuilt, columns being reordered, and IDs
 * changing. It breaks only if the .top-bar / .menu-part classes are removed
 * from the sections, or a second widget of the same type is added to the header
 * - both deliberate acts, unlike an ID silently rotating.
 *
 * @package roofio
 */

/* ---------------------------------------------------------------------------
   Nav shortcode widget
   ------------------------------------------------------------------------ */

/* The widget carries a custom width from Elementor (max-width: 148.562%),
   which makes it 749px wide inside a 504px column. On desktop the overflow
   spills harmlessly to the right, but once the widget wrap right-aligns for the
   drawer layout it spills left instead and carries the burger off-screen. Pin
   the widget to its column at every width. Targeted by widget class rather than
   element ID so it survives the widget being rebuilt.

   The same thing can be cleared in Elementor: select the Shortcode widget,
   Advanced > Width > Default. This rule makes that unnecessary. */
   #rs-header {font-family: 'Nunito Sans';}
#rs-header .elementor-widget-shortcode {
	width: 100%;
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Sticky header offset
   ------------------------------------------------------------------------ */

/* default.css pushes the sticky header down 30px for logged-in users, to clear
   the admin bar:

     body.logged-in .header-inners.sticky header.elementor-section { top: 30px }

   Two problems. The bar is 32px, not 30. And below 783px WordPress switches the
   admin bar to position:absolute so it scrolls away - the offset stays, leaving
   an empty 30px band above the sticky header. Anonymous visitors never see any
   of this, which is why it only shows up while you are working in the editor.

   Tie the offset to the admin bar actually being present and fixed. No
   !important needed: the ID out-specifies the theme rule. */
body.logged-in #rs-header .header-inners.sticky header.elementor-section {
	top: 0;
}

@media screen and (min-width: 783px) {

	body.logged-in.admin-bar #rs-header .header-inners.sticky header.elementor-section {
		top: 32px;
	}
}

/* ---------------------------------------------------------------------------
   Utility bar - 56px, #152132, cyan icons
   ------------------------------------------------------------------------ */

/* The theme's responsive.css forces `flex-wrap: wrap !important` on every
   .elementor-container below 1512px, which splits the address and hours onto
   two rows and doubles the bar height. */
#rs-header .top-bar > .elementor-container {
	flex-wrap: nowrap !important;
	align-items: center;
	min-height: 56px;
}
.elementor-70290 .elementor-element.elementor-element-3037338 {
  padding: 12px 16px;
}

#rs-header .top-bar .address-text .des,
#rs-header .top-bar .address-text a {
	white-space: nowrap;
}

#rs-header .top-bar .elementor-widget-wrap {
	flex-wrap: nowrap;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
}

/* The address and hours widgets share one column; without nowrap they stack as
   soon as the column narrows. */
#rs-header .top-bar .elementor-column:not(:has(.elementor-widget-social-icons)) > .elementor-widget-wrap {
	justify-content: flex-start;
}

#rs-header .top-bar .elementor-column:has(.elementor-widget-social-icons) > .elementor-widget-wrap {
	justify-content: flex-end;
}

#rs-header .top-bar .elementor-widget-wrap > .elementor-widget {
	width: auto;
	margin-bottom: 0;
}

#rs-header .top-bar .elementor-widget-rs-contact-box {
	margin-bottom: 0;
}

#rs-header .top-bar .address-text .des,
#rs-header .top-bar .address-text a {
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.4;
	color: #e2e8f0;
}

#rs-header .top-bar .address-text a:hover {
	color: #00aeef;
}

#rs-header .top-bar .address-icon svg,
#rs-header .top-bar .address-icon i {
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: #00aeef;
	fill: #00aeef;
}

/* Social icons - the widget defaults render these several times too large. */
#rs-header .top-bar .elementor-widget-social-icons .elementor-social-icons-wrapper {
	display: flex;
	align-items: center;
	gap: 20px;
}

#rs-header .top-bar .elementor-widget-social-icons .elementor-grid-item {
	width: auto;
	margin: 0;
}

#rs-header .top-bar .elementor-widget-social-icons .elementor-social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	min-width: 0;
	padding: 0;
	background-color: transparent;
	font-size: 18px;
	transition: color 0.2s ease;
}

#rs-header .top-bar .elementor-widget-social-icons .elementor-social-icon svg,
#rs-header .top-bar .elementor-widget-social-icons .elementor-social-icon i {
	width: 18px;
	height: 18px;
	font-size: 18px;
	color: #fff;
	fill: #fff;
}

#rs-header .top-bar .elementor-widget-social-icons .elementor-social-icon:hover svg,
#rs-header .top-bar .elementor-widget-social-icons .elementor-social-icon:hover i {
	color: #00aeef;
	fill: #00aeef;
}

/* ---------------------------------------------------------------------------
   Main bar - 90px, logo cell / nav / actions
   ------------------------------------------------------------------------ */

@media only screen and (min-width: 1200px) {

	/* The theme's responsive.css sets `flex-wrap: wrap !important` on every
	   .elementor-container below 1512px, so !important is the only way to keep
	   the bar on one row. */
	#rs-header .menu-part > .elementor-container {
		flex-wrap: nowrap !important;
		align-items: stretch;
		min-height: 90px;
	}

	/* Elementor sizes these as equal thirds, which leaves the nav 465px - too
	   narrow for six items. Logo takes a fixed cell, nav takes the slack. */
	#rs-header .menu-part .elementor-column:has(.elementor-widget-site-logo) {
		width: 200px;
		flex: 0 0 200px;
	}

	#rs-header .menu-part .elementor-column:has(.elementor-widget-shortcode) {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}

	#rs-header .menu-part .elementor-column:has(.elementor-widget-rs-button) {
		width: auto;
		flex: 0 0 auto;
	}

	#rs-header .menu-part .elementor-widget-wrap {
		align-content: center;
		align-items: center;
		padding-top: 0;
		padding-bottom: 0;
	}

	/* Logo spans the bar height with no vertical padding. */
	#rs-header .menu-part .elementor-widget-site-logo .elementor-widget-container {
		padding: 0;
	}
  @media (max-width:1199px) {
    .hfe-site-logo-set .hfe-site-logo-container {
      text-align: left !important;
    }
  }
	#rs-header .menu-part .elementor-widget-site-logo img {
		width: auto;
		max-width: 100%;
		max-height: 64px;
		height: auto;
	}

	/* The nav column hosts the shortcode; let the panels escape it. */
	#rs-header .menu-part .elementor-column:has(.elementor-widget-shortcode) > .elementor-widget-wrap {
		justify-content: flex-start;
	}

	/* Phone + CTA sit on one row, CTA flush to the right edge. */
	#rs-header .menu-part .elementor-column:has(.elementor-widget-rs-button) > .elementor-widget-wrap {
		flex-wrap: nowrap;
		justify-content: flex-end;
		gap: 0;
	}

	#rs-header .menu-part .elementor-column:has(.elementor-widget-rs-button) .elementor-widget {
		width: auto;
		margin-bottom: 0;
	}

	#rs-header .menu-part .elementor-widget-rs-contact-box:has(.phone) .phone .label {
		font-size: 15px;
		font-weight: 500;
		line-height: 1.3;
	}

	#rs-header .menu-part .elementor-widget-rs-contact-box:has(.phone) .phone a {
		font-size: 16px;
		font-weight: 700;
		line-height: 1.3;
	}

	#rs-header .menu-part .elementor-widget-rs-button .elementor-widget-container,
	#rs-header .menu-part .elementor-widget-rs-button .rs-btn {
		height: 100%;
	}

	#rs-header .menu-part .elementor-widget-rs-button a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		min-height: 55px;
		padding: 0 24px;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0.04em;
		background-color: #00aeef;
		color: #fff;
	}

	#rs-header .menu-part .elementor-widget-rs-button a:hover {
		background-color: #0098c9;
		color: #fff;
	}

	/* 1200-1399px: measured, the bar needs 1334px with everything showing. Drop
	   the "Need any help?" label and the number, keeping the phone icon, and
	   trim the CTA - that frees ~120px so the six nav items keep their spacing
	   instead of being squeezed. The number is still in the utility bar above,
	   and below 1200 it returns as the drawer's cyan call button.

	   From 1400 up nothing here applies and the bar shows everything, which is
	   also where the panel goes to five columns. */
	@media only screen and (max-width: 1399px) {

		#rs-header .menu-part .elementor-widget-rs-contact-box:has(.phone) .phone .label,
		#rs-header .menu-part .elementor-widget-rs-contact-box:has(.phone) .phone a,
		#rs-header .menu-part .elementor-widget-rs-contact-box:has(.phone) .address-text {
			display: none;
		}

		#rs-header .menu-part .elementor-widget-rs-contact-box:has(.phone) .elementor-widget-container {
			padding-left: 0;
			padding-right: 0;
		}

		#rs-header .menu-part .elementor-widget-rs-button a {
			gap: 10px;
			padding: 0 22px;
			font-size: 14px;
			letter-spacing: 0.03em;
		}
	}
}

/* ---------------------------------------------------------------------------
   Mobile + tablet - 72px bar: logo, then the nav's call + burger buttons
   ------------------------------------------------------------------------ */

@media only screen and (max-width: 1199px) {

	/* See the desktop note - the theme forces flex-wrap with !important. */
	#rs-header .menu-part > .elementor-container {
		display: flex;
		flex-wrap: nowrap !important;
		align-items: center;
		min-height: 72px;
	}

	/* The section has Elementor's "reverse columns" enabled for tablet, which
	   sets order:10 on the first child up to 1024px and puts the logo last.
	   Restore document order: logo, nav, actions. */
	#rs-header .menu-part .elementor-column:has(.elementor-widget-site-logo) {
		order: 1;
	}

	#rs-header .menu-part .elementor-column:has(.elementor-widget-shortcode) {
		order: 2;
	}

	#rs-header .menu-part .elementor-column:has(.elementor-widget-rs-button) {
		order: 3;
	}

	#rs-header .menu-part .elementor-widget-wrap {
		padding-top: 0;
		padding-bottom: 0;
		align-content: center;
	}

	#rs-header .menu-part .elementor-column:has(.elementor-widget-site-logo) {
		width: auto;
		flex: 0 0 auto;
	}

	/* The nav column carries the buttons, pushed to the right. */
	#rs-header .menu-part .elementor-column:has(.elementor-widget-shortcode) {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}

	#rs-header .menu-part .elementor-column:has(.elementor-widget-shortcode) > .elementor-widget-wrap {
		justify-content: flex-end;
	}

	/* The bar is logo + call + burger only. The phone block and CTA live in the
	   drawer footer at this size, so the whole actions column stands down -
	   Elementor only hides those widgets at 767px, which left them crowding the
	   burger all the way from 768 to 1199. */
	#rs-header .menu-part .elementor-column:has(.elementor-widget-rs-button) {
		display: none;
	}

	#rs-header .menu-part .elementor-widget-site-logo .elementor-widget-container {
		padding: 0;
	}

	#rs-header .menu-part .elementor-widget-site-logo img {
		width: 132px;
		max-width: 132px;
		height: auto;
	}

}