/* ==========================================================
   Woody's Small Engine & Motorsports — site-specific overrides
   Loaded after the theme CSS (style.css + color scheme).
   ========================================================== */

/* Header bar: dark at 80% opacity over the hero/background image.
   Applies in every state — hero overlay (transparent), sticky
   (smaller), and inner pages. The topbar inherits the same wash
   so the whole header reads as one surface. */
header,
header.transparent,
body:not(.side-layout) header:not(.smaller):not(.header-mobile).header-light.transparent {
    background: rgba(var(--bg-dark-1-rgb), 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Contact topbar: same 80% dark wash (it sits inside the header,
   so it blends seamlessly rather than layering a second tint). */
#topbar {
    background: transparent;
}

/* Mobile dropdown menu panel: match the header so expanded menus
   don't flash a solid block against the translucent bar. */
header.header-mobile #mainmenu,
header.header-mobile nav {
    background: rgba(var(--bg-dark-1-rgb), 0.95);
}

/* ==========================================================
   "What We Service" cards — uniform height, image fills card
   ========================================================== */

/* The theme sizes each card to its <img>'s natural height, so
   mixed-aspect photos produce uneven cards. Fix the card height
   and stretch the image to cover it instead. */
#services .hover {
    height: 360px;
}

#services .hover > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Slightly shorter cards on mobile so 1-col stacking stays balanced */
@media (max-width: 767px) {
    #services .hover {
        height: 300px;
    }
}

/* ==========================================================
   Intake form — category picker
   ========================================================== */

.intake-category-card {
    transition: background-color .25s ease, transform .25s ease;
}

/* Selected category: John Deere green background */
.intake-category-card.active {
    background-color: var(--primary-color) !important;
}

/* On the green background, flip the accent-coloured title to white
   and lighten the description so everything stays readable. */
.intake-category-card.active h4,
.intake-category-card.active h4.id-color,
.intake-category-card.active p {
    color: #fff !important;
}

/* Hover nudge for unselected cards */
a:hover .intake-category-card:not(.active) {
    transform: translateY(-4px);
}

/* ==========================================================
   Sitemap page
   ========================================================== */

.sitemap-list li {
    padding: 6px 0 6px 18px;
    position: relative;
}

.sitemap-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-color);
}

.sitemap-list a {
    color: inherit;
    text-decoration: none;
}

.sitemap-list a:hover {
    color: var(--primary-color);
}

/* ==========================================================
   Mobile fixes
   ========================================================== */

@media (max-width: 992px) {

    /* --- Mobile nav: collapsed by default, toggled by #menu-btn ---
       The theme expands <header> (class "menu-open") on tap and expects
       it to clip the absolutely-positioned menu; without an explicit
       hidden state the menu shows on page load. */
    header.header-mobile {
        overflow: hidden;
    }

    header.header-mobile #mainmenu {
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
        pointer-events: none;
    }

    header.header-mobile.menu-open {
        overflow: visible;
    }

    header.header-mobile.menu-open #mainmenu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition: opacity .25s ease, transform .25s ease;
        pointer-events: auto;
    }

    /* --- About section: show only the quads photo on mobile ---
       (`.hidden-mobile` marks elements to hide below the lg breakpoint) */
    .about-img-secondary,
    .hidden-mobile {
        display: none !important;
    }

    /* --- Mobile logo: cap height and pad top/bottom --- */
    #logo img.logo-mobile,
    #logo img.logo-main {
        max-height: 60px;
        width: auto;
        margin-top: 8px;
        margin-bottom: 8px;
    }
}