/* Normal menu items - force white (overrides base grey) */
#header .main_menu .mod-menu > li > a,
#header .main_menu .mod-menu > li > span,
#header .main_menu .mod-menu > li.parent > .mod-menu__sub > li > a,
#header .main_menu .mod-menu > li.parent > .mod-menu__sub > li > span {
    color: #ffffff !important;
}

/* Hover - prevent orange from returning */
#header .main_menu .mod-menu > li > a:hover,
#header .main_menu .mod-menu > li > span:hover,
#header .main_menu .mod-menu > li.parent > .mod-menu__sub > li > a:hover,
#header .main_menu .mod-menu > li.parent > .mod-menu__sub > li > span:hover {
    color: #ffffff !important;
}

/* Active items - match the template's long selector chain exactly to override orange */
#header .main_menu .mod-menu > li.active > a,
#header .main_menu .mod-menu > li.active > span,
#header .main_menu .mod-menu > li.parent > .mod-menu__sub > li.active > span,
#header .main_menu .mod-menu > li.parent > .mod-menu__sub > li.active > a,
#header .main_menu .mod-menu > li.parent > .mod-menu__sub > li.parent > .mod-menu__sub > li.active > span,
#header .main_menu .mod-menu > li.parent > .mod-menu__sub > li.parent > .mod-menu__sub > li.active > a {
    color: #ffffff !important;
}

/* If icons or ::before pseudo-elements are still colored */
.main_menu .mod-menu > li > a::before,
.main_menu .mod-menu > li > span::before,
.main_menu i.fa,
.main_menu i.fas,
.main_menu i.far {
    color: #ffffff !important;
}

/* Normal menu items - white text */
.main_menu .mod-menu > li > a,
.main_menu .mod-menu > li > span {
    color: #ffffff !important;
}

/* Active menu items - override orange to white */
.main_menu .mod-menu > li.active > a,
.main_menu .mod-menu > li.active > span,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.active > span,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.active > a,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.parent > .mod-menu__sub > li.active > span,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.parent > .mod-menu__sub > li.active > a {
    color: #ffffff !important;
}

/* Prevent hover from turning orange (if it still does) */
.main_menu .mod-menu > li > a:hover,
.main_menu .mod-menu > li > span:hover,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li > a:hover,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li > span:hover {
    color: #ffffff !important;
}

/* Apply new background ONLY to the full hero container */
.wrapper-top-servicing-service-station {
    background-image: url('/images/os-cck/stelvio_hero_4.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Force the INNER text box to have NO background image (transparent) */
.wrapper-inner-top-servicing-service-station {
    background-image: none !important;
    background-color: transparent !important;   /* or rgba(0,0,0,0.4) for light dark overlay if needed */
}

/* Optional: Add a dark overlay over the whole hero for better text contrast */
.wrapper-top-servicing-service-station::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);  /* adjust opacity: 0.3–0.6 */
    z-index: 1;
}

/* Keep text above overlay */
.wrapper-inner-top-servicing-service-station {
    position: relative;
    z-index: 2;
}

/* Override copyright link color to white */
.copyrights a {
    color: #ffffff !important;
}

/* Optional: Make hover a subtle light gray or keep white */
.copyrights a:hover {
    color: #e0e0e0 !important;  /* or #ffffff if you want no change on hover */
}

/* Override copyright top border to white */
.copyrights {
    border-top-color: #ffffff !important;
}

/* Back to Top button icon + hover */
#toTop i {
    color: #0056b3 !important;
    transition: color 0.3s ease;
}

#toTop:hover i {
    color: #004092 !important;  /* darker blue shade on hover */
}

/* Override OS Gallery category tabs background to blue */
.wrapper-gallery-service-station [class^=os-gallery-tabs-main] .osgalery-cat-tabs li a {
    background: #0056b3 !important;
}

/* Optional: darker blue on hover (better contrast and UX) */
.wrapper-gallery-service-station [class^=os-gallery-tabs-main] .osgalery-cat-tabs li a:hover {
    background: #004092 !important;   /* slightly darker shade */
}

/* Optional: active/selected tab style if it has different color */
.wrapper-gallery-service-station [class^=os-gallery-tabs-main] .osgalery-cat-tabs li a.active,
.wrapper-gallery-service-station [class^=os-gallery-tabs-main] .osgalery-cat-tabs li.active a {
    background: #004092 !important;   /* or keep #0056b3 if you prefer */
}

/* Override gallery tab hover text color - prevent orange */
.wrapper-gallery-service-station [class^=os-gallery-tabs-main] .osgalery-cat-tabs li a:hover {
    color: #c0c0c0 !important;          /* classic silver / light gray */
    /* Alternative shades you might prefer: */
    /* color: #d3d3d3 !important; */     /* brighter silver */
    /* color: #e0e0e0 !important; */     /* almost white silver */
    /* color: #d0e0ff !important; */     /* very light blue tint */
}

/* Change mobile menu button "MENU" label to blue */
.main_menu .navbar-header button:after {
    color: #0056b3 !important;
}

.map-container {
  position: relative;
  width: 100%;              /* Fills parent container width */
  padding-bottom: 56.25%;   /* 16:9 aspect ratio (common for maps; adjust below if needed) */
  height: 0;
  overflow: hidden;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;                /* Extra safety */
}

/* Active parent (main level) - grey bg + white text */
.main_menu .mod-menu > li.active > a,
.main_menu .mod-menu > li.active > span {
    color: #ffffff !important;
    background-color: #3f3f41 !important;
    border-radius: 10px !important;
}

/* Active child (submenu) items - same grey bg + white text to prevent disappearing */
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.active > a,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.active > span,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.parent > .mod-menu__sub > li.active > a,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.parent > .mod-menu__sub > li.active > span {
    color: #ffffff !important;
    background-color: #3f3f41 !important;   /* dark grey so white text shows */
}

/* Hover on child (submenu) items - darker blue background, white text */
.main_menu .mod-menu > li.parent > .mod-menu__sub > li:hover > a,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li:hover > span,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.parent > .mod-menu__sub > li:hover > a,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.parent > .mod-menu__sub > li:hover > span {
    color: #ffffff !important;
    background-color: #0056b3 !important;   /* medium blue on hover */
    /* Or darker blue: background-color: #004092 !important; */
}

/* Hover on active items (prevent any conflict) */
.main_menu .mod-menu > li.active > a:hover,
.main_menu .mod-menu > li.active > span:hover,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.active > a:hover,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.active > span:hover {
    color: #ffffff !important;
    background-color: #2c2c2e !important;   /* slightly darker grey when hovering active */
}

.wrapper-gallery-service-station .img-block.dimas-effect .os-gallery-caption .os-gallery-img-title {
    color: #d3d3d3 !important;            /* white text */
    /* or silver: color: #d3d3d3 !important; */
    font-size: 32px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.9) !important;  /* stronger shadow for contrast */
}

/* Force horizontal pagination in CCK/blog context */
.cck-body .pagination__wrapper .pagination,
.cck-body #pagination,
.cck-body .pagination {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;  /* or flex-start / space-between as preferred */
    align-items: center !important;
    margin: 1rem auto !important;
    padding: 0 !important;
}

.cck-body .pagination li,
.cck-body .pagination .page-item,
.cck-body #pagination li {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin: 0 0.3rem !important;  /* Adjust spacing between buttons */
    padding: 0 !important;
    float: none !important;       /* Counter any float overrides */
    width: auto !important;       /* Prevent full-width stacking */
}

.cck-body .pagination .page-link,
.cck-body .pagination .page-item span.page-link,
.cck-body #pagination li > a,
.cck-body #pagination li > span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0.375rem 0.75rem !important;
    margin: 0 !important;
    line-height: 1;
}

/* Keep your existing color/border styles, but ensure no block-level interference */
.cck-body #pagination li > span,
.cck-body #pagination li > a {
    border: 1px solid #bbb !important;  /* Override to match your theme if needed */
}

/* Optional: Allow wrap on tiny screens */
@media (max-width: 576px) {
    .cck-body .pagination__wrapper .pagination {
        flex-wrap: wrap !important;
    }
    .cck-body .pagination li {
        margin: 0.3rem !important;
    }
}

/*
  ==============================================
  WHEEL STRAIGHTENING SERVICE SECTION STYLING
  - Styles for the two-column layout (text left, image right on desktop)
  - Responsive: image stacks above text on mobile
  - Used with HTML block: wheel-straightening-section class
  - Image: /images/os-cck/bend_before_after.jpg
  - Colors: Uses #0056b3 as accent (change to your brand primary if needed)
  - Last updated: March 14, 2026
  - Location: templates/[your_template]/css/custom.css
  ==============================================
*/

.wheel-straightening-section {
    max-width: 1200px;
    margin: 0 auto 2rem;          /* Centers block + adds bottom spacing */
}

.wheel-straightening-section h2 {
    margin-bottom: 1.25rem;
    color: #222;                  /* Dark neutral for main title */
    font-size: 2.25rem;           /* Adjust if your template has different scale */
}

.wheel-straightening-section h3 {
    margin: 1.5rem 0 0.75rem;
    color: #0056b3;               /* Accent color - change to match site palette */
    font-size: 1.75rem;
}

.wheel-straightening-section ul {
    padding-left: 1.5rem;
    margin: 1rem 0;
    list-style-type: disc;
}

.wheel-straightening-section li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.call-to-action {
    font-size: 1.15rem;
    font-weight: bold;
    padding: 1rem;
    background: #f8f9fa;          /* Light gray background for emphasis */
    border-left: 5px solid #0056b3; /* Colored left border as visual anchor */
    margin-top: 1.5rem;
}

/* Image styling */
.wheel-straightening-section img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;      /* Soft rounded corners */
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15); /* Subtle drop shadow */
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .wheel-straightening-section .col-lg-5 {
        order: -1;                /* Image above text on smaller screens */
        margin-bottom: 1.5rem;
    }
    
    .wheel-straightening-section h2 {
        font-size: 1.875rem;      /* Slightly smaller title on mobile */
    }
}

/*
  ==============================================
  CRACK REPAIR SERVICE SECTION STYLING
  - Matches Wheel Straightening section exactly
  - Two-column layout (text left, image right on desktop)
  - Responsive stacking on mobile
  - Last updated: March 14, 2026
  ==============================================
*/

.crack-repair-section {
    max-width: 1200px;
    margin: 0 auto 2rem;
}

.crack-repair-section h2 {
    margin-bottom: 1.25rem;
    color: #222;
    font-size: 2.25rem;
}

.crack-repair-section h3 {
    margin: 1.5rem 0 0.75rem;
    color: #0056b3;               /* Change to your brand primary color */
    font-size: 1.75rem;
}

.crack-repair-section ul {
    padding-left: 1.5rem;
    margin: 1rem 0;
    list-style-type: disc;
}

.crack-repair-section li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.call-to-action {
    font-size: 1.15rem;
    font-weight: bold;
    padding: 1rem;
    background: #f8f9fa;
    border-left: 5px solid #0056b3;
    margin-top: 1.5rem;
}

/* Image styling (same as wheel straightening) */
.crack-repair-section img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .crack-repair-section .col-lg-5 {
        order: -1;                /* Image above text on smaller screens */
        margin-bottom: 1.5rem;
    }
    
    .crack-repair-section h2 {
        font-size: 1.875rem;
    }
}

/*
  ==============================================
  TIRE MOUNTING & BALANCING SERVICE SECTION STYLING
  - Consistent with Wheel Straightening, Crack Repair, etc.
  - Two-column layout (text left, image right on desktop)
  - Responsive stacking on mobile
  - Last updated: March 14, 2026
  ==============================================
*/

.tire-service-section {
    max-width: 1200px;
    margin: 0 auto 2rem;
}

.tire-service-section h2 {
    margin-bottom: 1.25rem;
    color: #222;
    font-size: 2.25rem;
}

.tire-service-section ul {
    padding-left: 1.5rem;
    margin: 1rem 0;
    list-style-type: disc;
}

.tire-service-section li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.tire-service-section img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .tire-service-section .col-lg-5 {
        order: -1;                /* Image above text on smaller screens */
        margin-bottom: 1.5rem;
    }
    
    .tire-service-section h2 {
        font-size: 1.875rem;
    }
}

/*
  ==============================================
  OEM REFINISHING SERVICE SECTION STYLING
  - Consistent with Wheel Straightening, Crack Repair, Tire Mounting, etc.
  - Two-column layout (text left, image/placeholder right on desktop)
  - Responsive stacking on mobile
  - Includes placeholder styling for image area
  - Reuses .call-to-action from previous sections
  - Last updated: March 14, 2026
  ==============================================
*/

.oem-refinishing-section {
    max-width: 1200px;
    margin: 0 auto 2rem;
}

.oem-refinishing-section h2 {
    margin-bottom: 1.25rem;
    color: #222;
    font-size: 2.25rem;
}

.oem-refinishing-section img,
.oem-refinishing-section .image-placeholder {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

/* Placeholder styling (remove when real image is added) */
.oem-refinishing-section .image-placeholder {
    background-color: #f8f9fa;
    border: 2px dashed #ccc;
    color: #6c757d;
    font-size: 1.1rem;
    min-height: 300px;
}

/* Call-to-action (reused from Straightening/Crack Repair) */
.call-to-action {
    font-size: 1.15rem;
    font-weight: bold;
    padding: 1rem;
    background: #f8f9fa;
    border-left: 5px solid #0056b3; /* Change color to match your brand */
    margin-top: 1.5rem;
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .oem-refinishing-section .col-lg-5 {
        order: -1;                /* Image/placeholder above text on smaller screens */
        margin-bottom: 1.5rem;
    }
    
    .oem-refinishing-section h2 {
        font-size: 1.875rem;
    }
}

/* Modern enhancements for all service sections */
.service-section h2 {
    font-weight: 700;
    letter-spacing: -0.5px;
}

.service-bullets {
    list-style: none;
    padding-left: 0;
}

.service-bullets li {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.service-bullets i {
    color: #0056b3; /* brand color */
    margin-right: 12px;
    font-size: 1.3rem;
}

.btn-primary {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

img.hover-zoom {
    transition: transform 0.4s ease;
}

img.hover-zoom:hover {
    transform: scale(1.05);
}

.rounded-lg {
    border-radius: 0.75rem !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.15) !important;
}

/* 
  ==============================================
  MODERN SERVICE SECTIONS – SHARED STYLING
  - Icons on bullets, CTA buttons, hover effects
  - Alternating image sides via flex-row-reverse
  - Last updated: March 14, 2026
  ==============================================
*/

.service-section {
    max-width: 1200px;
    margin: 0 auto 3rem;
    padding: 2rem 1rem;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.08);
}

.service-section h2 {
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: #222;
    font-size: 2.25rem;
}

.service-bullets {
    list-style: none;
    padding-left: 0;
    margin: 1.25rem 0;
}

.service-bullets li {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: flex-start;
}

.service-bullets i {
    color: #0056b3; /* your brand accent color */
    font-size: 1.4rem;
    margin-right: 12px;
    margin-top: 4px;
}

.btn-primary {
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,86,179,0.25);
}

img.hover-zoom {
    transition: transform 0.4s ease;
}

img.hover-zoom:hover {
    transform: scale(1.05);
}

.rounded-lg {
    border-radius: 0.75rem !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.15) !important;
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .service-section .col-lg-5 {
        margin-bottom: 2rem;
    }
    
    .service-section h2 {
        font-size: 1.875rem;
    }
}

/* 
  ==============================================
  SINGLE SERVICES PAGE ENHANCEMENTS
  - Hero, jump menu, final CTA bar
  - Consistent with previous modern service blocks
  - Last updated: March 15, 2026
  ==============================================
*/

/* ==============================================
   HERO SERVICES SECTION 
   - Main homepage/services hero with welding background
   - Image path & overlay controlled inline in HTML for easy edits
   - All typography, spacing, shadows here
   ============================================== */

.hero-services {
    min-height: 450px;               /* prevents collapse on wide screens */
    color: white;
    padding: 6rem 1rem;              /* vertical spacing — adjust as needed */
}

.hero-services h1,
.hero-services .lead {
    text-shadow: 0 2px 5px rgba(0,0,0,0.7);   /* helps readability on bright sparks */
}

/* Light outline buttons on dark bg */
.hero-services .btn-outline-light {
    border-color: white;
    color: white;
}

.hero-services .btn-outline-light:hover,
.hero-services .btn-outline-light:focus {
    background-color: rgba(255,255,255,0.15);
    color: white;
}

/* Optional: tighter spacing on small screens */
@media (max-width: 576px) {
    .hero-services {
        min-height: 380px;
        padding: 4rem 1rem;
    }
}

/* Jump Menu */
.jump-menu {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.jump-menu a {
    color: #0056b3;
    text-decoration: none;
    font-weight: 600;
}

.jump-menu a:hover {
    color: #003d82;
}

/* Final CTA */
.final-cta {
    background: #0056b3; /* your brand primary */
}

.final-cta h3 {
    font-weight: 700;
}

.btn-light:hover, .btn-outline-light:hover {
    transform: translateY(-2px);
}

/* General service section polish (already in previous CSS) */
.service-section {
    padding: 3rem 1rem;
    border-bottom: 1px solid #eee;
}

.service-section:last-child {
    border-bottom: none;
}

/* ======================================================================
   === HOME PAGE SERVICE BOXES (CLICKABLE CARDS) ========================
   === Controls layout, hover effects, and clickability of the 6 boxes ===
   === that link to /services sections ==================================
   ====================================================================== */

.wrapper-services-service-station .row {
    /* Optional: add negative margin fix if columns have extra spacing issues */
    margin-left: -15px;
    margin-right: -15px;
}

.wrapper-services-service-station .row > div {
    display: flex;                    /* makes columns equal height */
}

.wrapper-inner-services-service-station {
    position: relative;               /* required for stretched-link */
    flex: 1;                          /* fills column height */
    padding: 2.5rem 1.5rem;           /* adjust to match your design */
    background-color: #ffffff;        /* or your card background */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    overflow: hidden;                 /* prevents content overflow on hover */
}

.wrapper-inner-services-service-station:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 32px rgba(0,0,0,0.15);
}

/* Make the invisible link cover the entire card */
.wrapper-inner-services-service-station .stretched-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Keep icons, headings, text above the link layer */
.wrapper-inner-services-service-station i,
.wrapper-inner-services-service-station h3,
.wrapper-inner-services-service-station p {
    position: relative;
    z-index: 2;
}

/* Icon styling (optional – customize as needed) */
.wrapper-inner-services-service-station i {
    font-size: 3.2rem;
    margin-bottom: 1.25rem;
    color: #0d6efd;                   /* or your brand color */
    display: block;
}

/* Responsive tweaks */
@media (max-width: 991px) {
    .wrapper-inner-services-service-station {
        padding: 2rem 1.25rem;
    }
}