/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 23 2026 | 14:55:35 */
.brand-callout {
    color: #F26522;
    font-weight: 700;
}

.pill-badge-emergency {
background-color: #D61C22;
color: #ffffff;
padding: 4px 8px;
border-radius: 4px;
font-size: 14px;
}

.pill-badge-brand {
background-color: #F26522;
color: #ffffff;
padding: 4px 8px;
border-radius: 4px;
font-size: 18px;
}


/* 1. TARGET THE CORE TEXT CONTAINER */
.magnetic-link,
.magnetic-link a,
.magnetic-link .elementor-heading-title,
.magnetic-link .elementor-item {
    position: relative !important;
    display: inline-block !important;
    text-decoration: none !important;
    
    /* --- THE COMPOSITING STABILIZERS --- */
    /* 1. Forces the text onto the GPU permanently so it never "snaps" rendering engines on hover */
    transform: translateZ(0); 
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    /* 2. Tightens the browser anti-aliasing engine for crisp, unshifting outlines */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    
    /* OPTIONAL PROTECTION: If these links are menu items or button headlines, 
       uncomment the line below to physically guarantee the text can NEVER wrap lines */
    /* white-space: nowrap !important; */
}

/* 2. RIGID LOCKS TO MUZZLE THEME OVERRIDES
   Ensures Astra or Elementor doesn't silently try to inject a native bold/spacing shift on hover */
.magnetic-link:hover,
.magnetic-link a:hover,
.magnetic-link .elementor-heading-title:hover,
.magnetic-link .elementor-item:hover {
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    font-size: inherit !important;
    transform: translateZ(0);
}

/* 3. CREATE THE LINE ANCHOR */
.magnetic-link::after,
.magnetic-link a::after,
.magnetic-link .elementor-heading-title::after,
.magnetic-link .elementor-item::after {
    content: '' !important;
    position: absolute;
    width: 100%;
    transform: scaleX(0); /* Hidden by default */
    height: 2px;
    bottom: -4px; /* Hugs right beneath the text baseline */
    left: 0;
    background-color: #F26522 !important; /* Conversion Orange */
    transform-origin: bottom center;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    
    /* Prevents the underline asset from shaking the parent layer layout rules */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 4. TRIGGER THE REVEAL ON HOVER */
.magnetic-link:hover::after,
.magnetic-link a:hover::after,
.magnetic-link .elementor-heading-title:hover::after,
.magnetic-link .elementor-item:hover::after {
    transform: scaleX(1) !important;
}

.brand-gradient-text {
    background: linear-gradient(180deg, #D61C22 0%, #F26522 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}



/* Target the features list container inside our custom price table wrapper */
.premium-price-1 .elementor-price-table__features-list::before {
    content: '' !important;
    display: block !important;
    
    /* 1. SET THE VISUAL DIMENSIONS */
    width: 100%;                  /* Tweak this value to size your graphic */
    height: 428px;                 /* Tweak this value to size your graphic */
    
    /* 2. SPACING CRITERIA */
    /* 10px margin at the top creates space below the price numbers.
       20px margin at the bottom pushes the first text list item down neatly. */
    margin: 0px 0px 20px 0px;  
    
    /* 3. CALL THE RAW IMAGE ASSET */
    background-image: url('/media/GlowWorm7-GoodPlumbing.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Target the features list container inside our custom price table wrapper */
.premium-price-2 .elementor-price-table__features-list::before {
    content: '' !important;
    display: block !important;
    
    /* 1. SET THE VISUAL DIMENSIONS */
    width: 100%;                  /* Tweak this value to size your graphic */
    height: 428px;                 /* Tweak this value to size your graphic */
    
    /* 2. SPACING CRITERIA */
    /* 10px margin at the top creates space below the price numbers.
       20px margin at the bottom pushes the first text list item down neatly. */
    margin: 0px 0px 20px 0px;  
    
    /* 3. CALL THE RAW IMAGE ASSET */
    background-image: url('/media/Worcester-2000-GoodPlumbing.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Target the features list container inside our custom price table wrapper */
.premium-price-3 .elementor-price-table__features-list::before {
    content: '' !important;
    display: block !important;
    
    /* 1. SET THE VISUAL DIMENSIONS */
    width: 100%;                  /* Tweak this value to size your graphic */
    height: 428px;                 /* Tweak this value to size your graphic */
    
    /* 2. SPACING CRITERIA */
    /* 10px margin at the top creates space below the price numbers.
       20px margin at the bottom pushes the first text list item down neatly. */
    margin: 0px 0px 20px 0px;  
    
    /* 3. CALL THE RAW IMAGE ASSET */
    background-image: url('/media/Worcester-4000-GoodPlumbing.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}




/* 1. THE CHASSIS: THE COMBINED PILL BADGE FOR CHECKATRADE */
.hero-review-badge {
    /* --- THE MASTER SCALING ENGINE --- */
    /* Default scale fallback. Inline HTML styles will seamlessly override this per instance. */
    --badge-scale: 1.0;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    background-color: #ffffff !important;
    
    /* Geometry & Spacing matching the bespoke design, tied to the scaling engine */
    padding: calc(6px * var(--badge-scale)) calc(16px * var(--badge-scale)) !important;
    border-radius: 100px !important;
    gap: calc(12px * var(--badge-scale)) !important;
    width: max-content;
    max-width: 100%; /* Ensures it doesn't overflow container boundaries */
    
    /* Typography Overrides */
    text-decoration: none !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: calc(13px * var(--badge-scale)) !important;
    font-weight: 500 !important;
    color: #334155 !important; /* The custom Slate Grey token */
    
    /* Clean tactile layer shadow and transition tracks */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.25s ease !important;
}

/* Premium Agency Hover Feedback */
.hero-review-badge:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(51, 65, 85, 0.12) !important;
}

/* 2. THE STAR ICONS GRAPHICS */
.hero-review-stars {
    display: flex !important;
    gap: calc(3px * var(--badge-scale)) !important;
    align-items: center;
}

.hero-review-stars svg {
    width: calc(15px * var(--badge-scale)) !important;
    height: calc(15px * var(--badge-scale)) !important;
    color: #FBBF24 !important; /* Deep, luxury gold star rating colour */
    flex-shrink: 0;
}

/* 3. THE THIN VERTICAL DIVIDER LINES */
.hero-review-divider {
    width: 1px !important;
    height: calc(14px * var(--badge-scale)) !important;
    background-color: #E2E8F0 !important; /* Clean light gray outline tint */
    display: inline-block;
    flex-shrink: 0;
}

/* 4. THE CHECKATRADE LOGO SCALING ENGINES */
.hero-review-logo {
    height: calc(18px * var(--badge-scale)) !important; /* Scaled seamlessly alongside typography */
    width: auto !important;   /* Protects image aspect-ratio from stretching */
    object-fit: contain !important;
    display: inline-block;
    flex-shrink: 0;
}

/* 5. THE TEXT WRAP CONSTRAINTS */
.hero-review-text {
    letter-spacing: -0.01em;
    white-space: nowrap !important; /* Prevents text breaking mid-sentence on desktop */
}

/* --- RESPONSIVE MOBILE OPTIMISATION (MULTI-LINE) --- */
@media (max-width: 576px) {
    .hero-review-badge {
        flex-wrap: wrap !important; /* Allows children to drop to the next line */
        border-radius: calc(24px * var(--badge-scale)) !important; /* Softens the pill into a premium card shape for multi-line */
        padding: calc(10px * var(--badge-scale)) calc(16px * var(--badge-scale)) !important;
        gap: calc(8px * var(--badge-scale)) !important;
    }
    
    /* Removes the second divider so the text can cleanly drop beneath the logo */
    .hero-review-badge .hero-review-divider:last-of-type {
        display: none !important;
    }
    
    /* Forces the verification string onto its own dedicated row */
    .hero-review-text {
        flex-basis: 100% !important; /* Commands full width of the parent container */
        white-space: normal !important; /* Permits natural text wrapping on very narrow screens */
        text-align: center !important;
        margin-top: calc(2px * var(--badge-scale)) !important;
    }
}

/**
 * GoodPlumbing Custom Stylesheet Overrides
 *
 * @package    GoodPlumbing
 * @author     Isle Creative (WebCentriX Ltd)
 * @version    1.0.1
 *
 * DEVELOPER NOTE:
 * This block contains our bespoke CSS overrides for the Astra theme UI components.
 * The scroll-to-top button has been specifically decoupled from the global Astra 
 * colour palette to enforce the high-visibility GoodPlumbing brand orange (#F26522).
 * This increases user tactile engagement and ensures swift access to the header 
 * navigation for emergency plumbing and boiler enquiries.
 */

/* --- ASTRA SCROLL TO TOP OVERRIDE --- */

#ast-scroll-top {
    /* Forcing the primary brand orange over Astra's global root variable */
    background-color: #F26522 !important;
    
    /* Re-declaring the font size to ensure consistency across all viewports */
    font-size: 15px !important; 
    
    /* Smoothing the transition for our bespoke hover states below */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Premium Agency Hover Feedback */
#ast-scroll-top:hover {
    /* A slightly darker, richer orange to provide visual confirmation on hover */
    background-color: #D9531E !important; 
    
    /* Subtle elevation and glow to match the luxury branding */
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(242, 101, 34, 0.25) !important;
}