/*
 * City repair pages (/{city}/garage-door-repair): one plain card per section.
 * Owner, 2026-09-28: no chips, no boxes inside boxes, no button-shaped list items;
 * each section is a single card with its heading, text and a simple check list.
 *
 * Loaded ONLY by the 14 city garage-door-repair pages (their @section('style')),
 * after app.css, so nothing else on the site changes. The app.css rules it has to
 * beat carry !important and chain up to six classes, so every selector here starts
 * with "body .accordion:not(#_)": the :not(#_) counts like an id (it matches any
 * element without the id "_"), which outranks every class-only rule in app.css.
 * To undo the whole look: remove the link from those pages.
 */

/* ---- the column and the cards ------------------------------------------------ */
body .accordion:not(#_) {
    overflow: visible !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}
body .accordion:not(#_) > .accordion-item {
    background: #fff !important;
    border: 1px solid #e1e6ee !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(26, 42, 79, .06) !important;
    padding: 24px 28px 20px !important;
    margin: 0 0 22px !important;
}
/* the coupon block keeps its own dashed look */
body .accordion:not(#_) > .accordion-item.hw-coupon-wrap {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ---- headings ---------------------------------------------------------------- */
body .accordion:not(#_) .accordion-item .accordion-item-header {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    text-align: left !important;
}
body .accordion:not(#_) .accordion-item .accordion-item-header .h1-title,
body .accordion:not(#_) .accordion-item .accordion-item-header .h2-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
    color: #1a2a4f !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
/* "Why choose ..." repeats its own title inside the card */
body .accordion:not(#_) .accordion-item .accordion-item-body > h2.h3-title {
    display: none !important;
}
body .accordion:not(#_) .accordion-item .accordion-item-body .h3-title,
body .accordion:not(#_) .accordion-item:not(:first-child) .accordion-item-body > .h3-title {
    font-size: 17px !important;
    line-height: 1.3 !important;
    color: #1a2a4f !important;
    text-align: left !important;
    margin: 18px 0 10px !important;
    clear: none !important;
}

/* ---- text: no more tinted boxes ---------------------------------------------- */
body .accordion:not(#_) .accordion-item .accordion-item-body > p.text,
body .accordion:not(#_) .accordion-item .accordion-item-body > p.text:first-of-type {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    text-align: left !important;
}
body .accordion:not(#_) .accordion-item .accordion-item-body p {
    text-align: left !important;
}
/* "Serving {City}, CA ... 510-458-2048": keep the phone number (last nested span) on one line */
body .accordion:not(#_) .accordion-item .accordion-item-body > p.text > span > span:last-child {
    white-space: nowrap !important;
}
body .accordion:not(#_) .accordion-item-body [itemprop="priceRange"] {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}

/* ---- pictures ---------------------------------------------------------------- */
body .accordion:not(#_) .accordion-item .accordion-item-body > .logo-m {
    float: left !important;
    width: 96px !important;
    max-width: 96px !important;
    height: auto !important;
    margin: 4px 18px 8px 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
body .accordion:not(#_) .accordion-item:not(:first-child) .flex-container {
    margin: 0 !important;
}
body .accordion:not(#_) .accordion-item:not(:first-child) .flex-container .left-img {
    width: 210px !important;
    max-width: 34% !important;
    margin: 4px 24px 10px 0 !important;
}
body .accordion:not(#_) .accordion-item .img-s {
    box-shadow: none !important;
}

/* ---- lists: a plain check list instead of chips ------------------------------ */
body .accordion:not(#_) .accordion-item .accordion-item-body ul.grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
    gap: 7px 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 6px 0 16px !important;
    text-align: left !important;
    clear: none !important;
    width: auto !important;
}
/* in the "Why choose" card the list starts under the logo, not beside it */
body .accordion:not(#_) .accordion-item .accordion-item-body:has(> .logo-m) > ul.grid {
    clear: both !important;
}
/* lists of longer points ("Straight Pricing: ...") read better in one column */
body .accordion:not(#_) .accordion-item .accordion-item-body ul.grid:has(> li > p) {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
}
body .accordion:not(#_) .accordion-item .accordion-item-body ul.grid > li.li-c {
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 0 28px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23e2f3e9'/%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.4' fill='none' stroke='%231e9a52' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 2px / 19px 19px !important;
}
body .accordion:not(#_) .accordion-item .accordion-item-body ul.grid > li.li-c:hover {
    transform: none !important;
    box-shadow: none !important;
}
body .accordion:not(#_) .accordion-item .accordion-item-body ul.grid > li.li-c > span,
body .accordion:not(#_) .accordion-item .accordion-item-body ul.grid > li.li-c > p {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    text-align: left !important;
}
body .accordion:not(#_) .accordion-item .accordion-item-body ul.grid > li.li-c strong {
    display: inline !important;
    font-size: 15px !important;
    margin: 0 !important;
    color: #1a2a4f !important;
}
body .accordion:not(#_) .accordion-item .accordion-item-body ul.grid > li.li-c > span strong {
    font-weight: 600 !important;
}

/* opener brands: one quiet line, separated by dots */
body .accordion:not(#_) .accordion-item .accordion-item-body .brands-list {
    display: block !important;
    margin: 4px 0 14px !important;
    padding: 0 !important;
    text-align: left !important;
}
body .accordion:not(#_) .accordion-item .accordion-item-body .brands-list li {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #333 !important;
}
body .accordion:not(#_) .accordion-item .accordion-item-body .brands-list li:not(:last-child)::after {
    content: "\00B7";
    margin: 0 9px;
    color: #9aa6b8;
}

/* the hidden phone-only call buttons leave no gap behind */
body .accordion:not(#_) .accordion-item .accordion-item-body .custom,
body .accordion:not(#_) .accordion-item .accordion-item-body .custom .center-text {
    margin: 0 !important;
}

/* ---- FAQ: rows with thin dividers, no boxes ---------------------------------- */
body .accordion:not(#_) .accordion-item .faq-section .faq,
body .accordion:not(#_) .accordion-item .hw-faq {
    margin: 0 !important;
}
body .accordion:not(#_) .accordion-item .faq-section .faq details,
body .accordion:not(#_) .accordion-item .hw-faq details {
    border: 0 !important;
    border-top: 1px solid #e8edf4 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: none !important;
}
body .accordion:not(#_) .accordion-item .faq-section .faq details:last-child,
body .accordion:not(#_) .accordion-item .hw-faq details:last-child {
    border-bottom: 1px solid #e8edf4 !important;
}
body .accordion:not(#_) .accordion-item .faq-section .faq summary,
body .accordion:not(#_) .accordion-item .hw-faq summary {
    padding: 13px 30px 13px 0 !important;
    font-size: 16px !important;
    text-align: left !important;
}
body .accordion:not(#_) .accordion-item .faq-section .faq summary::after,
body .accordion:not(#_) .accordion-item .hw-faq summary::after {
    right: 2px !important;
}
body .accordion:not(#_) .accordion-item .hw-faq details[open] summary {
    border-bottom: 0 !important;
}
body .accordion:not(#_) .accordion-item .faq-section .faq details p,
body .accordion:not(#_) .accordion-item .hw-faq .hw-faq-a {
    padding: 0 0 14px !important;
    margin: 0 !important;
    text-align: left !important;
}

/* the spring calculator line at the bottom of the FAQ card */
body .accordion:not(#_) .accordion-item .scline {
    justify-content: flex-start !important;
    margin: 16px 0 2px !important;
}
body .accordion:not(#_) .accordion-item .scline-text {
    text-align: left !important;
}

/* ---- phones ------------------------------------------------------------------ */
@media (max-width: 768px) {
    body .accordion:not(#_) > .accordion-item {
        padding: 18px 16px 14px !important;
        margin: 0 0 16px !important;
        border-radius: 10px !important;
    }
    body .accordion:not(#_) .accordion-item .accordion-item-header .h1-title,
    body .accordion:not(#_) .accordion-item .accordion-item-header .h2-title {
        font-size: 20px !important;
    }
    body .accordion:not(#_) .accordion-item .accordion-item-body > .logo-m {
        width: 72px !important;
        max-width: 72px !important;
        margin: 3px 14px 6px 0 !important;
    }
    body .accordion:not(#_) .accordion-item:not(:first-child) .flex-container,
    body .accordion:not(#_) .accordion-item:not(:first-child) .flex-container .left-img {
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 2px 0 12px !important;
        text-align: center !important;
    }
    body .accordion:not(#_) .accordion-item:not(:first-child) .accordion-item-body .left-img .img-s {
        width: 170px !important;
        max-width: 60% !important;
        margin: 0 auto !important;
    }
    body .accordion:not(#_) .accordion-item .accordion-item-body ul.grid {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }
}