/* ==========================================================================
   Poly Lift Solutions — Custom CSS
   Brand:  #03a9f4 (primary) · #0782b8 (hover) · #f79007 (accent orange)
           #17252a (dark / headings) · #46707f (body text) · #f5fafd (light bg)
   Stack:  Bootstrap 5  →  Porto theme.css  →  theme-elements.css
           →  demo-auto-services.css  →  skin-auto-services.css  →  THIS FILE
   Rule:   Only write overrides here. Never modify Porto / vendor files.
   Updated: 2026-04-14
   ========================================================================== */


/* ─────────────────────────────────────────────────────────────────
   § 1  BASE TYPOGRAPHY
   ───────────────────────────────────────────────────────────────── */

body {
    color: #46707f;
}

h1, h2, h3, h4, h5, h6 {
    color: #17252a;
    letter-spacing: 0.02em;     /* refined — 0.04em was slightly spread  */
    line-height: 1.3;
}

/* Porto text-* utility classes set font-size directly, so !important needed */
h2 { font-size: clamp(1.35rem, 2.8vw, 1.75rem)  !important; }
h3 { font-size: clamp(1.1rem,  2vw,   1.3rem)   !important; }
h4 { font-size: clamp(1rem,    1.8vw, 1.15rem)  !important; }

p  { line-height: 1.75; }

html { scroll-behavior: smooth; }


/* ─────────────────────────────────────────────────────────────────
   § 2  HERO
   ───────────────────────────────────────────────────────────────── */

.hero-main {
    min-height: 560px;
}
@media (min-width: 992px) { .hero-main { min-height: 620px; } }
@media (max-width: 575px) { .hero-main { min-height: 440px; } }

/* Porto text-8 (~2.5 rem) is the hero H1 size — honour it; just tighten tracking */
.hero-main h1 {
    letter-spacing: 0.01em;
    line-height: 1.15;
}

/* Gradient overlay: text legibility left → transparent right */
.hero-gradient-overlay {
    background: linear-gradient(
        to right,
        rgba(23,37,42,0.88) 0%,
        rgba(23,37,42,0.70) 38%,
        rgba(23,37,42,0.28) 66%,
        rgba(23,37,42,0.04) 100%
    );
}
@media (max-width: 767px) {
    .hero-gradient-overlay { background: rgba(23,37,42,0.72); }
}

/* No text shadow needed when gradient overlay is present */
.hero-main h1,
.hero-main h2,
.hero-main p { text-shadow: none; }

/* Toned-down Ken Burns: 1.02× instead of Porto's default 1.2× */
.hero-main .kenBurnsToRight { animation-name: kenBurnsHomepage !important; }
@keyframes kenBurnsHomepage {
    from { transform: scale(1.02); }
    to   { transform: scale(1);    }
}

/* Page-header H1 on service pages */
.page-header h1,
.page-header-modern h1 {
    font-size: clamp(1.4rem, 3vw, 1.9rem) !important;
    line-height: 1.3;
}


/* ─────────────────────────────────────────────────────────────────
   § 3  HEADER & NAVIGATION
   ───────────────────────────────────────────────────────────────── */

.header-logo img {
    max-height: 72px !important;
    width: auto !important;
    height: auto !important;
}

.header-extra-info-text strong a {
    color: #03a9f4 !important;
    font-weight: 700;
}


/* ─────────────────────────────────────────────────────────────────
   § 4  NOTICE BAR
   ───────────────────────────────────────────────────────────────── */

.custom-text-underline-1 {
    border-bottom: 2px solid rgba(255,255,255,0.5);
    padding-bottom: 2px;
    transition: border-color 0.2s ease;
}
.custom-text-underline-1:hover { border-bottom-color: #fff; }


/* ─────────────────────────────────────────────────────────────────
   § 5  BUTTONS
   ───────────────────────────────────────────────────────────────── */

.btn-primary {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(3, 169, 244, 0.32);
}


/* ─────────────────────────────────────────────────────────────────
   § 6  SECTION BACKGROUNDS & COLOURS
   ───────────────────────────────────────────────────────────────── */

/* Blue gradient on CTA banners and service-areas strip.
   Angle 160° feels more deliberate than the generic 135°.        */
section.bg-primary {
    background: linear-gradient(160deg, #039be5 0%, #0272a0 100%) !important;
}

/* Force white headings inside bg-primary containers
   (our body h1-h6 rule sets #17252a which would otherwise win)  */
.bg-primary h1, .bg-primary h2, .bg-primary h3,
.bg-primary h4, .bg-primary h5, .bg-primary h6 {
    color: #fff !important;
}

/* Prevent Porto from uppercasing the CTA banner heading */
.section.bg-primary.banner-cta h2 {
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}

/* Services-grid section — distinctive light tint, not plain white */
.bg-brand-light { background-color: #f5fafd !important; }

/* Trust-signals row background */
.trust-signals-section { background-color: #f4f4f4; }


/* ─────────────────────────────────────────────────────────────────
   § 7  HOMEPAGE — PROBLEM CARDS
   Professional touch: top brand-colour stripe instead of plain card.
   ───────────────────────────────────────────────────────────────── */

.section.custom-bg-color-grey-1 .card.h-100 {
    border-top: 3px solid #03a9f4 !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.section.custom-bg-color-grey-1 .card.h-100:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(3, 169, 244, 0.10) !important;
}


/* ─────────────────────────────────────────────────────────────────
   § 8  HOMEPAGE — CTA BANNER
   ───────────────────────────────────────────────────────────────── */

.banner-cta {
    padding-top:    1.75rem !important;
    padding-bottom: 1.75rem !important;
}
.banner-cta h2 { margin-bottom: 0.5rem !important; }
.banner-cta p  { margin-bottom: 0     !important; }


/* ─────────────────────────────────────────────────────────────────
   § 9  HOMEPAGE — TRUST SIGNAL ICON BOXES
   ───────────────────────────────────────────────────────────────── */

/* Diamond border — slightly thicker for visibility */
.custom-icon-style-1::before {
    border-width: 2px;
    border-color: var(--primary, #03a9f4);
}

/* Icon itself: sits above the ::before diamond */
.custom-icon-style-1 i {
    font-size: 2.2rem !important;
    position: relative;
    z-index: 1;
}

/* On hover: fill diamond → icon inverts to white */
.custom-icon-box-style-1:hover .custom-icon-style-1 i {
    color: #fff !important;
}


/* ─────────────────────────────────────────────────────────────────
   § 10  HOMEPAGE — SERVICE CARDS
   ───────────────────────────────────────────────────────────────── */

.custom-thumb-info-style-1 {
    transition: transform 0.25s ease;
}
.custom-thumb-info-style-1:hover { transform: translateY(-5px); }

/* Service grid card captions — transparent so bg-brand-light section bg shows through */
.custom-thumb-info-style-1 .rounded-bottom {
    background: transparent !important;
}



/* ─────────────────────────────────────────────────────────────────
   § 10b  GOOGLE REVIEW BUTTON (footer)
   ───────────────────────────────────────────────────────────────── */

.btn-google-review {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85) !important;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 0.78rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background 0.2s ease, color 0.2s ease;
    margin-top: 0.75rem;
}
.btn-google-review:hover {
    background: rgba(255,255,255,0.22);
    color: #fff !important;
}

/* Bottom CTA sections (service pages + homepage areas strip) —
   slightly compact h2 so it reads as a CTA rather than a page heading */
section.bg-primary h2.cta-heading {
    font-size: clamp(1.05rem, 2vw, 1.3rem) !important;
}

/* ─────────────────────────────────────────────────────────────────
   § 11  SERVICE PAGES — SIDEBAR & LAYOUT
   ───────────────────────────────────────────────────────────────── */

/* 27 / 73 split: sidebar gets ~3% more room to avoid 2-line nav wraps */
@media (min-width: 992px) {
    .col-lg-3.order-lg-1 {
        flex: 0 0 27%;
        max-width: 27%;
    }
    .col-lg-9.order-lg-2 {
        flex: 0 0 73%;
        max-width: 73%;
    }
    /* Recover space: pull sidebar padding inward */
    .col-lg-3.order-lg-1 .pe-lg-4 {
        padding-right: 0.75rem !important;
    }
    /* Slightly smaller font prevents long service names wrapping */
    .col-lg-3.order-lg-1 .custom-nav-list-effect-1 a {
        font-size: 0.82rem !important;
    }
}

/* Sidebar CTA card padding */
.card.bg-primary .card-body {
    padding-top:    1.75rem !important;
    padding-bottom: 1.75rem !important;
    margin: 0 !important;
}

/* Sidebar trust-signal icons: scale down from text-7 for narrow column */
.col-lg-3 .justify-content-around i,
.col-lg-4 .justify-content-around i {
    font-size: 1.5rem !important;
    margin-bottom: 0.3rem !important;
}
.col-lg-3 .justify-content-around p,
.col-lg-4 .justify-content-around p {
    font-size: 0.875rem !important;
    line-height: 1.35;
}


/* ─────────────────────────────────────────────────────────────────
   § 12  SERVICE PAGES — CONTENT H2 SPACING
   Consolidated from two conflicting rules (Round 5 + M3).
   Single rule; first h2 after h1 gets tighter top margin.
   ───────────────────────────────────────────────────────────────── */

.col-lg-9.order-lg-2 h2,
.col-lg-9 > h2 {
    margin-top:    2.75rem !important;
    margin-bottom: 0.75rem !important;
}
/* First h2 immediately following the page h1 stays closer */
.col-lg-9 > h1 + h2 {
    margin-top: 1.75rem !important;
}


/* ─────────────────────────────────────────────────────────────────
   § 13  SERVICE PAGES — FEATURE CARDS (white card sections)
   ───────────────────────────────────────────────────────────────── */

.card.border-0.box-shadow-1 .card-body {
    padding: 1.5rem 1.25rem;
}


/* ─────────────────────────────────────────────────────────────────
   § 14  PROCESS STEP CIRCLES
   ───────────────────────────────────────────────────────────────── */

.process-step-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Porto text-color-light may not cascade into <strong> */
.process-step-circle.bg-primary strong,
.process-step-circle.bg-primary .process-step-circle-content {
    color: #fff !important;
    font-size: 1.1rem;
    font-weight: 700;
}


/* ─────────────────────────────────────────────────────────────────
   § 15  FAQ ACCORDION
   ───────────────────────────────────────────────────────────────── */

.accordion.accordion-modern .card-header {
    background-color: rgba(0,136,204,0.07);
    border-bottom: 1px solid rgba(0,136,204,0.12);
}
.accordion.accordion-modern .card-header a.accordion-toggle {
    text-transform: none !important;
    color: #1a3c5e !important;
    padding: 13px 20px;
}
.accordion.accordion-modern .card-header a.accordion-toggle:not(.collapsed) {
    color: #0088cc !important;
    background-color: rgba(0,136,204,0.12);
}


/* ─────────────────────────────────────────────────────────────────
   § 16  GALLERY LIGHTBOX
   ───────────────────────────────────────────────────────────────── */

.gallery-lightbox { display: block; }
.gallery-lightbox img {
    cursor: zoom-in;
    transition: opacity 0.2s ease;
}
.gallery-lightbox:hover img { opacity: 0.82; }

/* Symmetric grid images (e.g. waterproofing application gallery) */
.gallery-grid-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}


/* ─────────────────────────────────────────────────────────────────
   § 17  FOOTER
   ───────────────────────────────────────────────────────────────── */

#footer { background-color: #17252a; }

#footer a:not(.no-footer-css) {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}
#footer a:not(.no-footer-css):hover { color: #03a9f4; }

/* Slight gap between footer list items for readability */
#footer .list li.mb-0 { margin-bottom: 0.4rem !important; }


/* ─────────────────────────────────────────────────────────────────
   § 18  CONTACT PAGE
   ───────────────────────────────────────────────────────────────── */

/* Force white text on all children of the gradient card */
.contact-info-card,
.contact-info-card * { color: #fff !important; }

/* Spring 2026 promo confirmation inside the quote form card */
.promo-applied-badge {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: linear-gradient(135deg, rgba(3, 169, 244, 0.10) 0%, rgba(13, 79, 110, 0.08) 100%);
	border: 1px solid rgba(40, 167, 69, 0.55);
	border-left: 3px solid #03a9f4;
	color: #0d4f6e;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	font-size: 0.95rem;
	line-height: 1.35;
}
.promo-applied-badge i {
	color: #03a9f4;
	font-size: 1.1rem;
	flex-shrink: 0;
}
.promo-applied-badge .promo-applied-text {
	display: flex;
	flex-direction: column;
}
.promo-applied-badge .promo-applied-sub {
	font-size: 0.85rem;
	opacity: 0.85;
}
.promo-applied-badge .promo-applied-disclaimer {
	font-size: 0.75rem;
	font-style: italic;
	opacity: 0.7;
	margin-top: 0.15rem;
}


/* ─────────────────────────────────────────────────────────────────
   § 19  TESTIMONIALS
   ───────────────────────────────────────────────────────────────── */

.custom-testimonial-style-1 blockquote p { font-style: italic; }


/* ─────────────────────────────────────────────────────────────────
   § 20  ANIMATIONS
   ───────────────────────────────────────────────────────────────── */

/* All appear-animation elements run at 0.2 s (Porto default ≈ 1 s) */
.animated { animation-duration: 0.2s !important; }


/* ─────────────────────────────────────────────────────────────────
   § 21  RESPONSIVE
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .hero-main h1 { font-size: 1.8rem  !important; }
    .hero-main p  { font-size: 1rem    !important; }
}


/* ─────────────────────────────────────────────────────────────────
   § 22  ACCESSIBILITY
   ───────────────────────────────────────────────────────────────── */

a:focus, button:focus, input:focus {
    outline: 2px solid #03a9f4;
    outline-offset: 2px;
}