/* highlandsranchroofingco.com skin + layout overrides.
   Palette derived from the HR badge logo: navy #0A3051, steel #6E7275. */

:root {
  --theme: #0A3051;
  --theme2: #143F66;
  --header: #071E33;
  --bg: #0A2740;
  --text: #5c6670;
  --box-shadow: 0px 4px 30px 0px rgba(10, 48, 81, 0.12);
}

/* logo sizing (square badge, not the template's wide svg) */
.main-logo img,
.logo.d-none img,
.offcanvas__logo img { max-height: 64px; width: auto; }
.hr-footer-logo { max-height: 84px; width: auto; }

/* ONE header at every width. The template's >=1900px angled wedge is drawn at
   18% viewport width (percent!) while .main-logo sits on fixed pixel offsets,
   so the two drift apart with window width/zoom and the logo keeps landing
   half off the wedge. Kill the wedge and its logo slot entirely; the in-row
   navy badge on white (the <1900px layout) becomes the only header. */
.header-section-2::before { display: none !important; }
.header-1 { margin-left: 0 !important; }
.header-top-wrapper { margin-left: 0 !important; }
.header-1 .main-logo { display: none !important; }
.header-1 .header-main .logo { display: block !important; margin-right: 40px; }

/* header top strip */
.header-top-section { background-color: var(--header); }
.header-top-wrapper .xh6,
.header-top-wrapper .xh6 a { color: #ffffff; font-size: 14px; }
.header-top-wrapper .top-right span { color: #c9d3dd; font-size: 14px; }

/* ---------------- hero + capture card ---------------- */
.hr-hero {
  position: relative;
  padding: 150px 0 110px;
  background-size: cover;
  background-position: center;
}
.hr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(92deg, rgba(7, 30, 51, 0.90) 15%, rgba(7, 30, 51, 0.55) 60%, rgba(7, 30, 51, 0.35));
}
.hr-hero .container { position: relative; z-index: 2; }
.hr-hero .hero-content .xh3 {
  color: #b8c9d9;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hr-hero .hero-content h1 {
  color: #ffffff;
  font-size: 56px;
  line-height: 1.12;
  margin-bottom: 22px;
}
.hr-hero .hero-content p {
  color: #dbe4ec;
  font-size: 17px;
  max-width: 560px;
  margin-bottom: 30px;
}
.hr-hero .hero-button { display: flex; gap: 16px; flex-wrap: wrap; }
.hr-btn-ghost {
  background-color: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
}
.hr-btn-ghost::after { display: none; }
.hr-btn-ghost:hover { border-color: #ffffff !important; }

.hr-hero-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 34px 32px 30px;
  box-shadow: 0 20px 60px rgba(4, 18, 32, 0.45);
  max-width: 430px;
  margin-left: auto;
}
.hr-hero-card .xh3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--header);
  margin-bottom: 8px;
  font-family: "DM Sans", sans-serif;
}
.hr-hero-card > p { font-size: 14px; color: var(--text); margin-bottom: 18px; }
.hr-hero-card input {
  width: 100%;
  border: 1px solid #d7dee5;
  border-radius: 6px;
  background: #f7f9fb;
  padding: 13px 16px;
  margin-bottom: 12px;
  font-size: 15px;
  outline: none;
}
.hr-hero-card input:focus { border-color: var(--theme); background: #ffffff; }
.hr-hero-card .theme-btn { width: 100%; padding: 18px 20px; }
.hr-form-status { font-size: 13px; color: var(--theme); margin-top: 10px; }

/* breadcrumb active item: template uses --theme (navy) which vanishes on the
   dark banner photo; force light steel */
.breadcrumb-wrapper .breadcrumb-items li { color: #c9d3dd; }
.breadcrumb-wrapper .breadcrumb-items li a { color: #ffffff; }

/* ---------------- misc layout ---------------- */
.hr-proj-note p { font-size: 14px; color: var(--text); padding: 14px 4px 0; }
.hr-area-card { min-height: 100%; }
.hr-404 h1 { font-size: 72px; margin: 10px 0; }
.hr-footer-contact { margin-top: 14px; }
.hr-footer-contact a { color: #ffffff; }

/* preloader reads "HR ROOFING": gap after the HR pair */
.hr-preload-gap { margin-right: 0.55em; }

/* marquee: kill the hollow outline style (Bike 8/5: "not lines crossing thru");
   every item renders solid white like the rest of the band */
.scrolling-wrap .comm .cmn-textslide.text-custom-storke {
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
}

/* chrome text demoted from headings keeps heading look via prep_css :is() */
.cta-contact-content .xh2 { margin-bottom: 6px; }
.cta-contact-content .xh3 a { color: #ffffff; }

/* contact page textarea */
.hr-contact-form textarea {
  width: 100%;
  border: 1px solid #d7dee5;
  border-radius: 6px;
  background: #f7f9fb;
  padding: 14px 16px;
  min-height: 140px;
  outline: none;
}

/* ---------------- responsive ---------------- */
@media (max-width: 1199px) {
  .hr-hero .hero-content h1 { font-size: 44px; }
}
@media (max-width: 991px) {
  .hr-hero { padding: 110px 0 80px; }
  .hr-hero-card { margin: 10px auto 0; max-width: 520px; }
}
@media (max-width: 767px) {
  .hr-hero { padding: 90px 0 60px; }
  .hr-hero .hero-content h1 { font-size: 34px; }
  .hr-hero .hero-content .xh3 { font-size: 14px; }
  .hr-hero-card { padding: 26px 20px 22px; }
  .breadcrumb-wrapper .page-heading h1 { font-size: 30px; }
  .hr-404 h1 { font-size: 48px; }
}