/* ==========================================================================
   TopAir Electrical — Services Page Styles
   ========================================================================== */

/* ----- Quick nav ----------------------------------------------------- */
.service-quicknav { margin-top: -34px; position: relative; z-index: 5; }
.quicknav-inner {
    background: #fff;
    border: 1px solid var(--ta-grey-100);
    border-radius: var(--ta-radius);
    box-shadow: var(--ta-shadow);
    padding: 14px;
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center;
}
.quicknav-inner a {
    font-family: var(--ta-font-head); font-weight: 600;
    color: var(--ta-navy);
    padding: 12px 22px;
    border-radius: var(--ta-radius-pill);
    transition: all var(--ta-transition);
    display: inline-flex; align-items: center; gap: 8px;
}
.quicknav-inner a:hover { background: var(--ta-gradient); color: #fff; }
.quicknav-inner a i { color: var(--ta-blue); }
.quicknav-inner a:hover i { color: #fff; }

/* ----- Service media ------------------------------------------------- */
.service-media img {
    width: 100%;
    border-radius: var(--ta-radius-lg);
    box-shadow: var(--ta-shadow);
    object-fit: cover;
    aspect-ratio: 3/2;
}

/* ----- Service cards ------------------------------------------------- */
.svc-card {
    background: #fff;
    border: 1px solid var(--ta-grey-100);
    border-radius: var(--ta-radius);
    padding: 26px 22px;
    height: 100%;
    box-shadow: var(--ta-shadow-sm);
    transition: transform var(--ta-transition), box-shadow var(--ta-transition), border-color var(--ta-transition);
    position: relative;
    overflow: hidden;
}
.svc-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: var(--ta-gradient);
    transform: scaleY(0); transform-origin: top;
    transition: transform var(--ta-transition);
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--ta-shadow-lg); border-color: transparent; }
.svc-card:hover::before { transform: scaleY(1); }
.svc-card .ta-icon { width: 52px; height: 52px; font-size: 1.4rem; margin-bottom: 16px; }
.svc-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.svc-card p { color: var(--ta-muted); font-size: 0.92rem; margin: 0; }

/* ----- Inline CTA ---------------------------------------------------- */
.svc-cta {
    background: var(--ta-grey-50);
    border: 1px dashed var(--ta-grey-200);
    border-radius: var(--ta-radius);
    padding: 20px 24px;
    display: flex; flex-wrap: wrap; gap: 14px;
    align-items: center; justify-content: space-between;
}
.svc-cta span { font-family: var(--ta-font-head); font-weight: 600; color: var(--ta-navy); }

/* ----- Feature panels (maintenance / upgrades) ---------------------- */
.feature-panel {
    background: #fff;
    border: 1px solid var(--ta-grey-100);
    border-radius: var(--ta-radius-lg);
    overflow: hidden;
    box-shadow: var(--ta-shadow-sm);
    height: 100%;
    transition: transform var(--ta-transition), box-shadow var(--ta-transition);
}
.feature-panel:hover { transform: translateY(-8px); box-shadow: var(--ta-shadow-lg); }
.feature-panel-media { height: 240px; overflow: hidden; }
.feature-panel-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.feature-panel:hover .feature-panel-media img { transform: scale(1.06); }
.feature-panel-body { padding: 30px 30px 34px; }
.feature-panel-body .ta-icon { margin-top: -56px; background: var(--ta-gradient); color: #fff; box-shadow: var(--ta-shadow-blue); }
.feature-panel-body h3 { font-size: 1.4rem; margin-bottom: 10px; }
.feature-panel-body .tick-list { margin: 18px 0 22px; }

/* ----- FAQ (reused styling) ----------------------------------------- */
.faq-accordion .accordion-item { border: 1px solid var(--ta-grey-100); border-radius: var(--ta-radius) !important; margin-bottom: 14px; overflow: hidden; box-shadow: var(--ta-shadow-sm); }
.faq-accordion .accordion-button { font-family: var(--ta-font-head); font-weight: 600; color: var(--ta-navy); font-size: 1.04rem; padding: 20px 22px; }
/* .faq-accordion .accordion-button:not(.collapsed) { background: #fff; color: var(--ta-blue); box-shadow: none; } */
.faq-accordion .accordion-button:not(.collapsed) { background: var(--ta-blue); color: #fff; box-shadow: none; }
.faq-accordion .accordion-button:focus { box-shadow: none; }
.faq-accordion .accordion-body { color: var(--ta-muted); padding: 22px 22px; }

/* ----- Responsive ---------------------------------------------------- */
@media (max-width: 575.98px) {
    .feature-panel-media { height: 200px; }
    .svc-cta { flex-direction: column; align-items: stretch; text-align: center; }
}