/* englewoodroofingco.com overrides on the Rufers template.
   Template default scheme kept: --thm-base #e63a27, --thm-black #1e1e2a.
   .xh1-.xh6 = demoted chrome headings; template selectors were rewritten
   to :is(hN,.xhN) by prep_css.py so these style identically to headings. */

.xh1, .xh2, .xh3, .xh4, .xh5, .xh6 {
    display: block;
    margin: 0;
}

/* headings used in demoted slots keep heading typography even where no
   template selector reaches them */
.xh3 { font-size: 24px; line-height: 1.3; font-weight: 700; color: var(--thm-black); font-family: var(--thm-font); }
.xh6 { font-size: 14px; font-weight: 600; color: var(--thm-black); font-family: var(--thm-font); }

/* :is(h1,.xh1) rendered inside slots the template styled for :is(h2,.xh2) */
:is(h1,.xh1).xh2 { margin: 0; }

/* header: no search / cart boxes; keep CTA aligned right */
.header-right { justify-content: flex-end; }

/* breadcrumb :is(h1,.xh1) sizing safety (template styled .title :is(h2,.xh2)) */
.breadcrumb-area .inner-content .title :is(h1,.xh1) {
    color: #ffffff;
}

/* footer contact widget demoted headings keep spacing */
.footer-widget-contact-info ul li .xh6 {
    color: #ffffff;
    margin-bottom: 6px;
    font-size: 16px;
}
.single-footer-widget .title .xh3 { color: #ffffff; }
.footer-top .title .xh3 { color: #ffffff; }

/* header topbar phone/email demoted headings */
.header-contact-info ul li .text .xh6 a { color: inherit; }

/* long nav fits one row */
.main-menu .navigation > li { margin-right: 24px; }

/* answer-block styling for content pages */
.service-details-content .top .img-box { margin-top: 24px; }
.local-note {
    background: #f5f5f7;
    border-left: 4px solid var(--thm-base);
    padding: 18px 22px;
    margin: 22px 0;
}
.local-note p { margin: 0; }

/* simple data table used on cost + permit pages */
.ew-table { width: 100%; border-collapse: collapse; margin: 18px 0 26px; }
.ew-table th, .ew-table td { border: 1px solid #e4e4e8; padding: 10px 14px; text-align: left; font-size: 15px; }
.ew-table th { background: var(--thm-black); color: #fff; font-weight: 600; }
.ew-table tr:nth-child(even) td { background: #f7f7f9; }

/* ---------------- hero lead capture ---------------- */
.main-slider { position: relative; }
.main-slider .owl-nav { display: none; }   /* form panel sits where the right arrow was */
.hero-quote {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 60px;
    width: 380px;
    z-index: 20;
}
.hero-quote__inner {
    background: #ffffff;
    padding: 30px 30px 22px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
    border-top: 5px solid var(--thm-base);
}
.hero-quote .xh3 { font-size: 22px; margin-bottom: 4px; }
.hero-quote__lede { font-size: 14px; color: var(--thm-gray); margin: 0 0 16px; }
.hero-quote input {
    width: 100%;
    height: 46px;
    border: 1px solid #e4e4e8;
    background: #f8f8fa;
    padding: 0 14px;
    margin-bottom: 10px;
    font-size: 14px;
    outline: none;
}
.hero-quote input:focus { border-color: var(--thm-base); background: #fff; }
.hero-quote .btn-one { width: 100%; text-align: center; margin-top: 2px; }
.hero-quote .btn-one .txt { display: inline-block; }
.hero-quote__note { font-size: 11.5px; color: #9a9aa4; margin: 10px 0 0; line-height: 1.4; }

@media (max-width: 1199px) {
    .hero-quote {
        position: relative;   /* static ignores z-index; the card was sliding UNDER the slider */
        top: auto;
        right: auto;
        z-index: 30;
        transform: none;
        width: auto;
        max-width: 560px;
        margin: -60px auto 0;
        padding: 0 15px 30px;
    }
}

/* mobile: trim the empty hero so the H1 and the capture card share the first screen */
@media (max-width: 767px) {
    .main-slider.style1 .content {
        padding-top: 120px;
        padding-bottom: 130px;
    }
    .main-slider .content .big-title :is(h2,.xh2) {
        font-size: 34px;
    }
    /* interior page banner H1s were rendering near-desktop size and clipping */
    .breadcrumb-area .inner-content .title :is(h1,h2,.xh2) {
        font-size: 30px;
        line-height: 1.25;
    }
    /* data tables scroll inside their own container instead of squeezing */
    .ew-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .ew-table th, .ew-table td { white-space: normal; min-width: 130px; }
}

/* keep hero text clear of the form panel on wide screens */
@media (min-width: 1200px) {
    .main-slider.style1 .auto-container { padding-right: 480px; }
}

/* ---------------- footer CTA band: keep logo / title / buttons from colliding ---------------- */
.footer-top__content { row-gap: 26px; }
.footer-top__content .left-box { flex: 1 1 auto; min-width: 0; }
.footer-top__content .left-box .title { max-width: 450px; }
.footer-top__content .left-box .title .xh3 { font-size: 22px; line-height: 30px; }
.footer-top__content .right-box {
    flex: 0 0 auto;
    line-height: normal;
    white-space: nowrap;
}
@media (min-width: 1200px) {
    /* one row on desktop: title wraps its own lines, buttons stay right */
    .footer-top__content { flex-wrap: nowrap; }
}

/* fact counter band sits on its dark bg: kicker must be light too */
.fact-counter-area .sub-title .xh6 { color: #ffffff; }

/* checklist bullets */
.ew-list { margin: 0 0 22px; padding: 0; list-style: none; }
.ew-list li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.ew-list li:before {
    content: "\2713";
    position: absolute; left: 0; top: 0;
    color: var(--thm-base); font-weight: 700;
}