/* ==========================================================
   Service pages (Redesign 2026) — e.g. page-agricultural-roofing.php
   Colours / fonts / buttons / typography: main.css
   Responsive rules: services-responsive.css
   ========================================================== */


/* ---------- page hero (shared by service pages) ---------- */
.page-hero {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 270px 0 190px;
}
.page-hero h1 {
    text-shadow: 0 15px 10px rgba(0, 0, 0, 0.25);
}
.page-hero .breadcrumb-nav {
    font-size: 40px;
    line-height: 1.6;
    text-shadow: 0 10px 15px rgba(0, 0, 0, 0.25);
}
.agricultural-hero {
    background-image: url(../img/agricultural/hero-bg.jpg);
}
.commercial-hero {
    background-image: url(../img/commercial/hero-bg.jpg);
}
.industrial-hero {
    background-image: url(../img/industrial/hero-bg.jpg);
}
.residential-hero {
    background-image: url(../img/residential/hero-bg.jpg);
}
.services-hero {
    background-image: url(../img/services/hero-bg.jpg);
}
.materials-hero {
    background-image: url(../img/materials/hero-bg.jpg);
}
.steel-hero {
    background-image: url(../img/steel/hero-bg.jpg);
}
.r-panel-hero {
    background-image: url(../img/r-panel/hero-bg.jpg);
}
.tuff-rib-hero {
    background-image: url(../img/tuff-rib/hero-bg.jpg);
}
.standing-seam-hero {
    background-image: url(../img/standing-seam/hero-bg.jpg);
}


/* ---------- intro ---------- */
.intro-section {
    padding: 86px 0 40px;
}


/* ---------- why choose ---------- */
.why-section {
    padding: 40px 0 70px;
}


/* ---------- installation cards ---------- */
.installation-section {
    padding: 50px 0 100px;
}
.installation-section .service-card {
    background-color: var(--color-white);
    transition: background-color 0.3s, color 0.3s;
}
.installation-section .service-card:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.installation-section .read-more {
    color: inherit;
}


/* ---------- roofing systems ---------- */
.systems-section {
    background-color: var(--color-light);
    padding: 80px 0;
}


/* ---------- farm building considerations ---------- */
.considerations-section {
    padding: 100px 0 0;
}


/* ---------- topic cards (icon + title cards used in several sections) ---------- */
.topic-card .topic-icon {
    width: 32px;
    height: 32px;
    background-color: var(--color-light);
}


/* ---------- cost factors ---------- */
.cost-section {
    padding: 100px 0 60px;
}


/* ---------- work gallery ---------- */
.work-gallery-section {
    padding: 40px 0 0;
}


/* ---------- panel systems (commercial) ---------- */
.panel-systems-section {
    padding: 64px 0 80px;
}


/* ---------- buildings we serve (commercial) ---------- */
.buildings-section {
    background-color: var(--color-light);
    padding: 100px 0;
}


/* ---------- materials and specifications (commercial) ---------- */
.specs-section {
    padding: 100px 0;
}


/* ---------- prices and quote factors (commercial) ---------- */
.prices-section {
    background: var(--color-dark) url(../img/commercial/prices-bg.jpg) center / cover no-repeat;
    padding: 70px 0 80px;
}


/* ---------- replacement and installation (residential) ---------- */
.replacement-section {
    background: var(--color-dark) url(../img/residential/replacement-bg.jpg) center / cover no-repeat;
    padding: 70px 0 80px;
}


/* ---------- what is standing seam (standing seam) ---------- */
.what-is-section {
    background-color: var(--color-light);
    padding: 100px 0;
}


/* ---------- building applications (standing seam) ---------- */
.applications-section {
    padding: 80px 0 100px;
}


/* ---------- panel specifications table (standing seam) ---------- */
.panel-specs-section {
    background-color: var(--color-light);
    padding: 100px 0 80px;
}
.panel-specs-section th,
.panel-specs-section td {
    border-color: var(--color-border);
    padding: 12px 0;
}


/* ---------- panel profiles band + colours (standing seam) ---------- */
.profiles-section {
    background: var(--color-dark) url(../img/home/bg-usp.png) center / cover no-repeat;
    padding: 60px 0;
}
.colours-section {
    padding: 80px 0 20px;
}


/* ---------- roofing materials page ---------- */
.profile-basics-section,
.compare-section,
.profile-costs-section,
.materials-colours-section {
    background-color: var(--color-light);
    padding: 88px 0;
}
.profiles-list-section,
.building-uses-section,
.conditions-section,
.completed-projects-section,
.faq-list-section {
    padding: 88px 0;
}
.profiles-list-section {
    padding-top: 100px;
}
.compare-section .table {
    --bs-table-bg: var(--color-white);
}
.compare-section thead th {
    --bs-table-bg: var(--color-primary);
    --bs-table-color: var(--color-white);
}
.compare-section tbody tr:nth-child(even) > * {
    --bs-table-bg: var(--color-light-alt);
}
.compare-section th,
.compare-section td {
    padding: 22px;
    border: 0;
}
.building-uses-section .building-card {
    background-color: var(--color-light);
}
.faq-list-section .faq-item {
    border-bottom: 1px solid var(--color-border);
}


/* ---------- services page ---------- */
.service-types-section,
.choose-system-section {
    background-color: var(--color-light);
    padding: 88px 0;
}
.install-systems-section {
    padding: 88px 0;
}


/* ---------- types of buildings band (industrial) ---------- */
.building-types-section {
    background: var(--color-dark) url(../img/home-v2/advantages-bg.jpg) center / cover no-repeat;
    padding: 60px 0;
}


/* ---------- work gallery carousel dots ---------- */
.work-gallery-section .owl-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}
.work-gallery-section .owl-carousel button.owl-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--color-white);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.work-gallery-section .owl-carousel button.owl-dot.active {
    background-color: var(--color-primary);
}