/*
 * Lone Star Roofing -- original site header styles.
 *
 * Generated by migration/extract_header_css.py.
 * The header template reproduces the original markup and class names,
 * so these rules style it exactly as they did on the live site.
 */

.built-exp-block .site_button { margin-left:0;margin-top:24px; }
.site_button { background-color:#a80d22;display:inline-block;width:auto;padding:0!important;border:2px solid var(--accent);border-radius:var(--radius);background:var(--accent);transition:all var(--transition);text-decoration:none;color:var(--white);box-shadow:none;font-weight:600;font-size:15px;max-width:260px;text-align:center;margin:25px 0; }
.header_wrapper { border-bottom:1px solid var(--gold);position:sticky;top:42px;width:100%;background:#f5f5f5;border-top:none!important;box-shadow:none;z-index:100;background-color:var(--white);height:150px; }
.mobile_logo { display:none; }
.ywp_header { position:relative;padding:18px;margin-left:auto;margin-right:auto;min-height:70px; }
.logo { display:inline-block;position:absolute;top:15px;left:30px;z-index:200; }
.logo img { max-height:none;max-width:196px;padding-top:0;min-height:101px; }
.menu_wrapper { position:absolute;display:inline-block;width:100%;max-width:84%!important;top:28px;right:0;padding:0;z-index:0;margin-top:30px;border-radius:5px; }
.menu ul { margin:0;padding:0;text-align:center;z-index:500000; }
.menu ul li { list-style:none;position:relative;display:inline-block;width:auto;color:#333;transition:all ease-in-out 120ms;font-size:16px!important;font-weight:bold;border-radius:8px;text-transform:uppercase;letter-spacing:.025em; }
.menu ul li:hover { color:#fff;cursor:pointer;background:transparent;border-radius:0; }
.menu ul li:hover>ul { display:inline-block;opacity:1;margin-top:0; }
.menu ul li ul { text-align:left;position:absolute;display:none;width:220px;top:38px;margin-top:-10px;left:0;background:var(--white);box-shadow:var(--shadow-md);border-radius:var(--radius);z-index:500000; }
.menu ul li ul li { font-size:15px;padding:0 15px;border-radius:2px; }
.menu ul li ul li:hover { background:var(--light);border-color:transparent; }
.menu ul li ul li a { padding:12px; }
.menu .multi_tier { top:0;left:220px; }
.menu a { color:inherit;text-decoration:none;display:block;padding:10px 25px; }
.menu ul li ul a { font-size:15px;padding:7px 0;width:190px;border-bottom:#ddd 1px dotted;box-sizing:border-box; }
.menu ul li ul a:hover { border-color:transparent; }
.mobile_menu_wrapper { display:none;position:fixed!important;top:0;width:100%;background:#efefef!important;z-index:99999999;left:-100%;height:100%!important; }
.mobile_menu { position:absolute;width:100%;margin:0 auto;background:#efefef!important;padding:0;max-height:100%!important;overflow-y:scroll!important; }
.mobile_menu.closed { height:0;overflow:hidden; }
.mobile_menu.open { height:auto; }
.mobile_menu_icon { display:block;cursor:pointer;width:50px;height:50px;margin:0 auto;background-image:url(/wp-content/uploads/2026/09/four_lines_40x19.png.png);background-repeat:no-repeat;background-position:center;box-sizing:border-box;position:absolute!important;left:100%!important;background:transparent!important;margin-left:0!important;top:0!important;border-radius:0 0 4px 0!important;margin-top:4px; }
.mobile_menu ul { margin:0;padding:0;text-align:left;border-top:#222 1px dotted;overflow:hidden; }
.mobile_menu ul li { list-style:none;position:relative;display:block;width:100%;color:#fff;transition:all ease-in-out 120ms;font-family:Segoe,"Segoe UI","DejaVu Sans","Trebuchet MS",Verdana,sans-serif;font-size:15px!important;font-weight:bold;border-bottom:#222 1px dotted;box-sizing:border-box;border-color:#ccc!important; }
.mobile_menu ul li:hover { color:#fff;cursor:pointer;background:#dfdfdf!important; }
.mobile_menu li li { padding:0 24px; }
.mobile_menu li li li { padding:0 0; }
.mobile_menu li li li li { padding:0 0; }
.mobile_menu li li li li li { padding:0 0; }
.mobile_menu ul li ul { position:relative;height:0;width:100%;top:0;margin-top:0;left:0;padding:0 12px;background:#dfdfdf!important; }
.mobile_menu ul li ul.open { height:auto; }
.mobile_menu .multi_tier { top:0;left:0; }
.mobile_menu a { color:inherit;text-decoration:none;display:block;padding:10px 25px; }
.mobile_menu ul li ul a { font-size:15px;padding:7px 0;width:100%;border-bottom:#111 1px dotted;box-sizing:border-box; }
.mobile_menu_wrapper_open { left:0;max-width:80%!important; }
.mobile_menu_icon .fa-bars { font-size:22px;color:#fff;padding:18px; }
.mobile_menu_icon .fa-times { font-size:22px;color:#fff;padding:18px; }
.mobile_menu ul li ul a, .mobile_menu ul li a, .mobile_menu ul li ul { border:none!important; }
.mobile_menu ul li a { color:#222!important; }
.mobile_menu ul li a:hover { background:#dfdfdf!important;border:none!important; }
.site_button:hover { opacity:.6;cursor:pointer;background:transparent;border-color:var(--accent); }
.site_button a { padding:12px 28px!important;text-decoration:none;color:var(--white);cursor:pointer;margin:0;display:block;font-weight:600; }
.site_button.round { border-radius:100px!important; }
.site_button.square { border-radius:3px!important; }
.menu ul li a { padding:12px 18px;color:#333;font-weight:500; }
.menu ul li a:hover { color:var(--accent);text-decoration:none; }
.menu ul li::before { transition:all ease-in-out 220ms;bottom:-50px;content:'';display:block;position:absolute;left:0;border-bottom:var(--accent) solid 3px;width:100%;opacity:0; }
.menu ul li:hover::before { bottom:-5px;opacity:1; }
.infobar-row { display:grid;grid-template-columns:1fr 1fr 1fr;justify-items:center;align-items:center;height:42px; }
.infobar-contact a { color:#fff; }
.infobar-contact p { margin:0; }
.infobar-contact-icon { margin-right:12px;border-radius:50%;border:2px solid #fff;color:#fff;width:40px;height:40px; }
.infobar-contact-icon svg { padding:11px 8px; }
.infobar-contact { display:flex;align-items:center; }
.infobar-contact-sm { display:none; }
.infobar-estimate { font-weight:800;color:#fff; }
.infobar-estimate:hover, .infobar-estimate:focus { color:#fff; }
body.scrolled .header_wrapper { background:var(--white);position:sticky;top:42px;box-shadow:0 2px 24px rgba(0,0,0,.1);height:150px!important; }
body.scrolled .header_wrapper li { text-shadow:none;color:#333; }
body.scrolled .header_wrapper .menu>ul>li>a { color:#333; }
body.scrolled .header_wrapper .menu ul li:hover>ul { display:inline-block;opacity:1; }
body.scrolled .menu { background:var(--white); }
.site_button:hover a { color:var(--accent); }
.site_button_white { border:2px solid var(--white);background:transparent; }
.site_button_white a { padding:10px 28px!important; }
.site_button_white:hover { background:var(--white); }
.site_button_white:hover a { color:var(--accent); }
.cta-buttons .site_button { margin:0; }

@media (max-width:1024px) {
  .menu_wrapper { display:none; }
  .mobile_menu_wrapper { display:block; }
  .mobile_logo { display:block;text-align:center; }
  .logo { display:none; }
}

@media (max-width:1200px) {
  .menu ul li { font-size:14px!important; }
  .menu ul li a { padding:12px 12px; }
}

@media screen and (max-width:1140px) {
  body.scrolled .header { margin-top:0; }
  body.scrolled .mobile_menu_wrapper { z-index:9999999; }
}

@media screen and (min-width:1025px) and (max-width:1140px) {
  body.scrolled .header { margin-top:35px; }
  body.scrolled .header_wrapper { height:140px!important; }
}

@media screen and (max-width:1024px) {
  .header_wrapper { top:0; }
}

@media screen and (max-width:1024px) {
  .infobar-contact-icon { margin:0 6px; }
  .infobar-contact-lg { display:none; }
  .infobar-contact-sm { display:block; }
  .header_wrapper { background-color:transparent;position:relative;box-shadow:none; }
  .mobile_logo img { width:100%;max-width:144px;min-height:0;margin-top:36px; }
}

@media screen and (max-width:767px) {
  body.scrolled .header_wrapper { position:relative; }
}

@media (max-width:700px) {
  .infobar-row { display:flex;justify-content:center; }
  .infobar-estimate { margin:0 15px 0 5px; }
}

@media (max-width:550px) {
  .infobar-row { justify-content:flex-end; }
}

/* ---- Sticky header ------------------------------------------
   The whole header travels with the page: the red info bar and the
   white nav bar stick together at the top.

   The original made the info bar position:fixed and the nav bar
   position:sticky separately. Inside Elementor the nav bar sat in a
   wrapper no taller than itself, so it had nowhere to travel and
   scrolled away. Making the whole header location sticky instead lets
   both bars move as one, and keeps them in normal flow so the page
   below needs no manual offset. */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 900;
}

/* Both bars now flow inside that sticky wrapper rather than pinning
   themselves to the viewport. */
.lsr-infobar {
  position: relative;
  width: 100%;
  text-align: center;
  background-color: #ab0d22;
  color: #ffffff;
  padding: 8px 0;
}
/* The nav bar is solid white. One of the original's page-specific
   stylesheets sets .header_wrapper to transparent for a hero overlay;
   merging those files together applied it site-wide, which left a
   see-through band between the info bar and the logo. */
.header_wrapper { position: relative; top: auto; background-color: #ffffff; }

/* The original header is transparent over the hero and only turns solid
   once body.scrolled is set by its scroll handler. That behaviour is
   reproduced in lsr-header.js; these rules are what it drives. */
/* The original's scrolled state re-applies top:42px (its nav bar used to
   sit under a fixed info bar). Inside the sticky header the bar is
   position:relative, so that offset just pushes it down 42px and opens
   a gap. Same specificity, declared later, so it wins. */
body.scrolled .header_wrapper { background: #ffffff; box-shadow: 0 2px 24px rgba(0,0,0,.1); position: relative; top: 0; }
body.scrolled .lsr-infobar { background-color: #ab0d22; }

/* Info bar links stay white, including on hover -- matching the live
   site. Any red here is invisible against the red bar. */
.lsr-infobar a, .lsr-infobar a:link, .lsr-infobar a:visited { color: #ffffff; text-decoration: none; }
.lsr-infobar a:hover, .lsr-infobar a:focus, .lsr-infobar a:active { color: #ffffff; opacity: 0.82; }
.lsr-infobar a { transition: opacity .25s cubic-bezier(.4,0,.2,1); }
.lsr-infobar svg, .lsr-infobar svg * { fill: currentColor; }
.lsr-infobar p { margin: 0; }

/* The header is in flow now, so the old fixed-bar offset is gone. */
body { padding-top: 0; }

/* ---- Mobile logo bar (deliberate change from the live site) ------
   The original kept the bar at its desktop height (150px, forced by an
   !important in its scrolled state) and the logo left-aligned. Shorter
   bar, slightly smaller logo, centred. */
@media (max-width: 1024px) {
  .header_wrapper, body.scrolled .header_wrapper { height: auto !important; min-height: 0; }
  .ywp_header { min-height: 0; padding: 12px 18px; }
  .mobile_logo { text-align: center; }
  .mobile_logo a { display: block; line-height: 0; }
  .mobile_logo img { display: block; width: 116px; max-width: 116px; height: auto; margin: 0 auto; }
}

/* The logo is absolutely positioned and overhangs the bar; let it show
   over the page rather than being clipped by the sticky wrapper. */
.header_wrapper, .ywp_header { overflow: visible; }
.logo { z-index: 200; }

/* The logo image is inline by default, which adds a few px of
   line-height below it and makes .logo taller than the original. */
.logo a, .logo img, .mobile_logo a, .mobile_logo img { display: block; }
.logo a { line-height: 0; }
/* 1.7 at 16px = the 27.2px line-height the original menu links use,
   which is what makes each item exactly 51px tall with 12px padding. */
.menu ul > li > a { line-height: 1.7; }

/* ---- Fixes for the widened desktop floor ---------------------

   The nav row is centred inside a wrapper right-anchored at 84% of the
   viewport, so the last top-level item sits ~239px right of centre. Its
   dropdown is 220px wide and opens at left:0 of that item, which runs
   past the right edge for any viewport below ~1093px -- the bottom of
   the band the 1024 switch just handed to the desktop nav -- and again
   from 1201px, where the item font steps back up. It also pushed the
   document wider, so a horizontal scrollbar appeared. Open it leftward.

   Scoped to .menu_wrapper (0,3,3) so it beats `.menu ul li ul` (0,1,3)
   regardless of source order, and can never reach the mobile panel. */
.menu_wrapper .menu > ul > li:last-child > ul { left: auto; right: 0; }

/* The original shrinks the bar 150px -> 140px on scroll, but only
   between 992px and 1140px (now 1025-1140). With the header sticky the
   shrink jumps the whole page up 10px mid-scroll and leaves the logo
   -- which is absolutely positioned and sized off the 150px bar --
   hanging 8px below the gold border over the hero. Hold 150px across
   the whole desktop range. (The original's companion
   `body.scrolled .header{margin-top:35px}` never fires: nothing in this
   build carries the class `header`.) */
@media screen and (min-width: 1025px) {
  body.scrolled .header_wrapper { height: 150px !important; }
}

/* Mobile menu icon: the original injects its SVG with JavaScript and
   swaps bars for a close cross when open. Rendered in markup instead,
   so only the swap needs styling. */
.mobile_menu_icon { background-image: none; }
.mobile_menu_icon img { display: block; width: 50px; height: 50px; }
.mobile_menu_icon .lsr-icon-close { display: none; }
.mobile_menu_icon.open .lsr-icon-open { display: none; }
.mobile_menu_icon.open .lsr-icon-close { display: block; }

/* The slide-in panel and its trigger are positioned off-screen in vw
   so they track the viewport rather than the document width. */
/* Only park the panel off-screen while it is closed, otherwise this
   rule (appended last) would beat .mobile_menu_wrapper_open's left:0
   and the panel could never slide in. */
.mobile_menu_wrapper:not(.mobile_menu_wrapper_open) { left: -100vw; }
/* Closed: full-width and parked at -100vw, so the toggle (left:100%
   of the panel) lands exactly at x=0 on the info bar. Open: 80vw, so
   the same toggle sits just past the panel edge as the close button. */
.mobile_menu_wrapper { width: 100vw; transition: left .4s cubic-bezier(.4,0,.2,1), width 0s .4s; }
/* vw, not the original's 80%: a percentage here resolves against the
   containing block, so any horizontal overflow on the page stopped it
   capping and the panel covered the full screen, hiding the toggle. */
.mobile_menu_wrapper.mobile_menu_wrapper_open { left: 0; width: 80vw; max-width: 80vw; transition: left .4s cubic-bezier(.4,0,.2,1), width 0s; }
.mobile_menu { width: 100%; max-width: 100%; }
.mobile_menu { box-sizing: border-box; }
/* left:100% of the panel, as the original has it -- that puts the
   toggle just past the panel edge, where it becomes the close button
   once the menu is open. (100vw pushed it off-screen.) */
.mobile_menu_icon { left: 100%; z-index: 2; }
.mobile_menu .sub_menu { position: static; width: 100%; max-width: 100%; }