/* RMB Header Offer Strip 2026.11.07.8 (MU 94): top offer strip, phone call icon, the phone header up to 1200 px and the style A desktop header row. */

/* Top strip, before #wrap. The overlay headers (templates 6 and 15702) are positioned against
   #wrap so they stay under the strip instead of covering it. */
.rmb-offer-strip{box-sizing:border-box;position:relative;z-index:1000;width:100%;margin:0;padding:8px 16px;background:#090b0a;color:#fff;font-family:"Be Vietnam Pro",Arial,sans-serif;font-size:13px;font-weight:600;line-height:1.4;letter-spacing:0;text-align:center;text-transform:none}
.rmb-offer-strip__inner{margin:0!important;padding:0;color:inherit;font:inherit}
.rmb-offer-strip a{color:#fff!important;text-decoration:none;text-underline-offset:3px}
.rmb-offer-strip a:hover,.rmb-offer-strip a:focus-visible{text-decoration:underline}
.rmb-offer-strip a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.rmb-offer-strip__sep{opacity:.7}
.rmb-offer-strip__short{display:none}
body.rmb-has-offer-strip #wrap{position:relative}
@media (max-width:767px){
	.rmb-offer-strip{padding:8px 12px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
	.rmb-offer-strip__long{display:none}
	.rmb-offer-strip__short{display:inline}
}

/* Desktop header cluster (2-header-desktop): withdrawn 2026-11-07. It wrapped under the menu below
   about 1900 px and pushed the menu row under the strip. MU 94 no longer prints it; this hides any
   copy still kept in a saved Elementor header output. */
.rmb-hdr-cluster{display:none!important}

/* Menu link padding on laptop widths (kept from 2026.11.07.1). Without it the header menu and the
   search button do not fit on one row at 1201-1439 px: the search button wraps and the menu row
   moves up under the strip. */
@media (min-width:1201px) and (max-width:1439px){
	.main-header .main-nav>li>a{padding-left:12px!important;padding-right:12px!important}
}

/* Phone header from 993 to 1200 px (2026.11.07.4, owner: "Evet, düzelt"). The theme switches its
   navigation at 1200 px (body data-mobile-nav-breakpoint) and Elementor hides the desktop rows of the
   home (6) and commercial (15702) headers up to 1200 px (tablet_extra), but the theme shows its phone
   header (.lqd-mobile-sec) only up to 992 px, or up to 1024 px once Elementor's script has set the
   tablet device mode. So 1025-1200 px had no header at all on those pages (no logo, menu or phone),
   and the inner header (7812) showed its desktop row there, which does not fit (menu labels under the
   strip, search button on a second row). Here the phone header (logo, call icon, menu button) shows
   and the desktop rows are hidden, as at 1024 px. The fixed side bar of the commercial header
   (.lqd-stickybar-wrap) is not a header row and stays as it is. */
@media (min-width:993px) and (max-width:1200px){
	.main-header .lqd-mobile-sec{display:block}
	.main-header>.elementor:not(.lqd-mobile-sec)>.elementor-section:not(.lqd-stickybar-wrap){display:none!important}
}

/* Phone header call icon (slot reserved before the script fills it, so nothing shifts).
   2026.11.07.7 (owner: "Evet, düzelt"): the theme gives each phone header item a third of the row
   (".lqd-mobile-sec .navbar-header > *{width:33.33%}"), so the call icon sat left of a wide empty menu
   button box, mid-row at tablet widths. The menu button box is now 44 x 44 px, right-aligned as before
   (the bars do not move), and the logo starts at the left edge at every phone and tablet width. */
.rmb-hdr-mcall{display:none}
@media (max-width:1200px){
	.lqd-mobile-sec .lqd-mobile-sec-inner{align-items:center}
	.lqd-mobile-sec .lqd-mobile-sec-inner>.navbar-brand{order:1;justify-content:flex-start!important}
	.lqd-mobile-sec .lqd-mobile-modules-container{display:flex!important;order:2;flex:0 0 44px;align-items:center;justify-content:center;width:44px;height:44px;margin:0 4px 0 auto}
	.lqd-mobile-sec .lqd-mobile-sec-inner>.navbar-toggle{order:3;flex:0 0 44px;width:44px;min-height:44px;align-items:center}
	.rmb-hdr-mcall{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:#141414!important;text-decoration:none!important}
	.rmb-hdr-mcall:focus-visible{outline:3px solid #8eb6ff;outline-offset:2px}
}

/* Header on the same grid as the page sections on every page (2026.11.07.5, owner: "Evet, hizala").
   The home page did this first (MU 109, header 6 row b463295): wrap 1280px with 28px side padding, so
   the left and right edges are max(28px, (width - 1280px) / 2). Here it applies to every header:
   home and commercial (b463295 in headers 6 and 15702) and the inner header 7812 (row 1476945d).
   In 7812 the logo column and the menu column were 50% each; with the narrower row the menu and the
   search button no longer fit in 50%, so the logo column takes only its own width and the menu column
   the rest. The last menu link loses its right padding only in b463295, where the menu is the last
   item; in 7812 the search button is the last item and ends on the grid line. */
@media (min-width:1201px){
	.main-header>.elementor:not(.lqd-mobile-sec)>.elementor-section:not(.lqd-stickybar-wrap){padding-left:max(28px,calc((100% - 1280px) / 2))!important;padding-right:max(28px,calc((100% - 1280px) / 2))!important}
	.main-header .elementor-element-b463295 #main-header-collapse>ul>li:last-child>a{padding-right:0!important}
	.main-header .elementor-element-1476945d>.elementor-container>.elementor-element-11f6becc{width:auto!important;flex:0 0 auto}
	.main-header .elementor-element-1476945d>.elementor-container>.elementor-element-612c9013{width:auto!important;flex:1 1 0;min-width:0}
}
/* 981-1200 px shows the phone header: the logo starts at 28px like the page sections. */
@media (min-width:981px) and (max-width:1200px){
	.main-header .lqd-mobile-sec-inner{padding-left:28px!important;padding-right:28px!important}
	.main-header .lqd-mobile-sec-inner>.navbar-brand{justify-content:flex-start!important}
	.main-header .lqd-mobile-sec-inner>.navbar-brand .navbar-brand-inner{margin-right:0!important}
}

/* Commercial page header (2026.11.07.6, owner: "Evet, düzelt"): /commercial/ (page 15650) uses its own
   header (15702, row b463295). Over the dark hero photo its dark logo was hard to see, so it turns white
   there, as the home logo does (MU 97); the filter sits on the wrapper because the image failsafe sets
   an inline filter on every img. The stuck header has a white background and keeps the dark logo.
   The "Residential" button and the menu share one column: at 1440 px and up the menu links had wider
   padding than at 1201-1439 px, so the button took its own row above the menu and the logo sat 30 px
   higher than the menu words. From 1440 px the links keep the 1201-1439 px padding, so button and menu
   fit on one row. From 1201 to 1275 px they still need two rows (measured: one row from 1279 px), so
   there the logo moves down 30 px to the menu row (also when stuck: the offset is the same). */
@media (min-width:1201px){
	body.page-id-15650 #header.main-header:not(.is-stuck) .elementor-widget-ld_header_image .navbar-brand .navbar-brand-inner{filter:brightness(0) invert(1)}
}
@media (min-width:1201px) and (max-width:1275px){
	body.page-id-15650 #header.main-header .elementor-element-b463295 .elementor-widget-ld_header_image{transform:translateY(30px)}
}
@media (min-width:1440px){
	body.page-id-15650 .main-header .elementor-element-b463295 .main-nav>li>a{padding-left:12px!important;padding-right:12px!important}
}

/* Desktop header row, style A (2026.11.07.8, owner: "A tarzı"). Home header (6, row b463295) and inner
   header (7812, row 1476945d), 1201 px and up: a white 84 px row with a line under it, the logo 46 px
   tall, the menu in normal case at 15 px without the "Main" and "Free Estimate" links (the logo goes
   home, the new button goes to the estimate page) and without the search button, then the phone number
   and a black "Free estimate" button (printed by MU 94 after the menu widget). The commercial header
   (15702) shares the menu widget id and keeps its own row: the pair is hidden there. Phones and
   tablets (1200 px and below) keep the phone header. On the home page the header stays positioned over
   the first screen (MU 109 leaves 84 px free), and its logo stays dark: the first screen is white now. */
.rmb-hdr-actions{display:none}
@media (min-width:1201px){
	#header :is(.elementor-6 .elementor-element-b463295,.elementor-7812 .elementor-element-1476945d){min-height:84px;padding-top:0!important;padding-bottom:0!important;border-bottom:1px solid #ece9e3;background:#fff!important}
	#header :is(.elementor-6 .elementor-element-b463295,.elementor-7812 .elementor-element-1476945d)>.elementor-container{min-height:84px;align-items:center}
	#header :is(.elementor-6 .elementor-element-b463295,.elementor-7812 .elementor-element-1476945d) :is(.elementor-column,.elementor-widget-wrap,.elementor-widget-container){padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important}
	#header :is(.elementor-6,.elementor-7812) .elementor-widget-ld_header_image .navbar-brand{padding:0!important}
	#header :is(.elementor-6,.elementor-7812) .elementor-widget-ld_header_image .navbar-brand-inner img{width:auto!important;height:46px!important;max-height:none!important}
	body.home.page-id-8382 #header.main-header .elementor-6 .elementor-widget-ld_header_image .navbar-brand .navbar-brand-inner{filter:none!important}
	#header :is(.elementor-6 .elementor-element-d6e1242,.elementor-7812 .elementor-element-612c9013)>.elementor-widget-wrap{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-end!important;gap:0 32px}
	#header :is(.elementor-6,.elementor-7812) .elementor-widget-ld_header_menu{width:auto!important;margin:0!important}
	#header :is(.elementor-6,.elementor-7812) .elementor-widget-ld_header_search{display:none!important}
	#header :is(.elementor-6,.elementor-7812) #primary-nav{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:0 30px}
	#header :is(.elementor-6,.elementor-7812) #primary-nav>:is(#menu-item-8385,#menu-item-8654){display:none!important}
	#header :is(.elementor-6,.elementor-7812) #primary-nav>li{margin:0!important;padding:0!important}
	#header :is(.elementor-6,.elementor-7812) #primary-nav>li>a{display:inline-flex!important;align-items:center;min-height:44px;margin:0!important;padding:0!important;color:#2a2d31!important;-webkit-text-fill-color:#2a2d31!important;font-family:"Be Vietnam Pro",Arial,sans-serif!important;font-size:15px!important;font-weight:500!important;line-height:1.3!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap}
	#header :is(.elementor-6,.elementor-7812) #primary-nav>li>a:is(:hover,:focus-visible),#header :is(.elementor-6,.elementor-7812) #primary-nav>li.current-menu-item>a{color:#000!important;-webkit-text-fill-color:#000!important}
	#header :is(.elementor-6,.elementor-7812) #primary-nav>li>a .submenu-expander{margin-left:4px;color:inherit}
	#header :is(.elementor-6,.elementor-7812) .rmb-hdr-actions{display:flex;flex:none;align-items:center;gap:24px}
	#header .rmb-hdr-actions a{text-decoration:none!important;letter-spacing:0;text-transform:none}
	#header .rmb-hdr-actions__tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#15171a!important;font-family:"Be Vietnam Pro",Arial,sans-serif;font-size:15.5px;font-weight:600;line-height:1;white-space:nowrap}
	#header .rmb-hdr-actions__icon{flex:none;width:18px;height:18px}
	#header .rmb-hdr-actions__tel:is(:hover,:focus-visible) span{text-decoration:underline;text-underline-offset:3px}
	#header .rmb-hdr-actions__btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border-radius:999px;background:#111315;color:#fff!important;-webkit-text-fill-color:#fff;font-family:"Be Vietnam Pro",Arial,sans-serif;font-size:15px;font-weight:600;line-height:1;white-space:nowrap;transition:background-color .2s ease}
	#header .rmb-hdr-actions__btn:is(:hover,:focus-visible){background:#2c2f33}
	#header .rmb-hdr-actions a:focus-visible{outline:3px solid #3457d5;outline-offset:3px}
}
@media (min-width:1201px) and (max-width:1339px){
	#header :is(.elementor-6,.elementor-7812) #primary-nav{gap:0 22px}
	#header :is(.elementor-6 .elementor-element-d6e1242,.elementor-7812 .elementor-element-612c9013)>.elementor-widget-wrap{gap:0 24px}
	#header :is(.elementor-6,.elementor-7812) .rmb-hdr-actions{gap:18px}
}
@media (prefers-reduced-motion:reduce){#header .rmb-hdr-actions__btn{transition:none}}