/* Longhorn Towing - Custom Layout Fixes */

/* 1. Fix Logo Size */
/* Force the logo to be constrained and not fill width */
header img[alt*="Longhorn"],
header a.flex.items-center.gap-2.mb-6 img {
    height: 33px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
}

@media (min-width: 768px) {

    header img[alt*="Longhorn"],
    header a.flex.items-center.gap-2.mb-6 img {
        height: 36.5px !important;
    }
}

@media (min-width: 1024px) {

    header img[alt*="Longhorn"],
    header a.flex.items-center.gap-2.mb-6 img {
        height: 40px !important;
    }
}

/* 2. Fix Navigation Bar Sizing */
/* Reduce padding to make it sleeker */
header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 60px !important;
}

header .container {
    padding-top: 0.75rem !important;
    /* py-3 equivalent */
    padding-bottom: 0.75rem !important;
}

/* Ensure the nav container items align continuously */
header nav {
    align-items: center !important;
}

/* 3. Restore Hero Background Image */
/* Add the missing background image behind the gradient/canvas */
.hero-mobile-optimized .absolute.inset-0.z-0.bg-brand-dark,
section.hero-mobile-optimized .absolute.inset-0.z-0 {
    background-image: url('/hero-section.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #111827 !important;
    /* Fallback brand-dark */
}

/* Adjust canvas opacity so image is visible */
.hero-mobile-optimized canvas {
    opacity: 0.3 !important;
    /* Reduced opacity for better text visibility */
    mix-blend-mode: screen !important;
}

/* Adjust gradient to be slightly more transparent to let image show */
.hero-mobile-optimized .bg-gradient-to-b {
    background: linear-gradient(to bottom,
            rgba(17, 24, 39, 0.8) 0%,
            rgba(17, 24, 39, 0.5) 50%,
            rgba(17, 24, 39, 0.9) 100%) !important;
}

/* 4. Optimize Headline Sizes */
/* User requested "perfect" previous size, so we remove the 107% scale */
/* But we ensure subheadline is smaller than main headline */
h1 {
    /* No manual font-size override, let Tailwind classes (text-5xl etc) take over */
    /* or maybe ensure it is big enough if it was too small before? */
    /* The user said "that version was perfect", referring to BEFORE I added the 107% rule */
}

/* Ensure subheadline (p tag usually) is smaller */
.hero-mobile-optimized p {
    font-size: 1.25rem !important;
    /* text-xl */
    line-height: 1.75rem !important;
}

/* 5. Fix Logo Text Visibility on Service Pages */
/* Ensure logo text is readable if header background is transparent on light pages */
/* But since we just fixed the dark hero background, white text SHOULD be visible. */
/* However, to be safe, if the sticky header triggers white bg, we need dark text. */
/* The main.js handles this, but let's add a safety shadow for white text */
header .text-white {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Mobile Menu Z-Index Fix */
/* Ensure mobile menu sits on top of everything */
.fixed.top-0.right-0.z-50.w-\[280px\] {
    z-index: 9999 !important;
}

/* UI Refinement System */
.section-spacing {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.ui-card-white {
    background: #FFFFFF !important;
    padding: 24px !important;
    border-radius: 1.5rem !important;
    /* matches existing 24px/2.5rem aesthetics */
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease !important;
}

.ui-card-white:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1) !important;
}