/*
Theme Name: AllStar Insurance Native
Theme URI: https://allstarinsurance.agency/
Author: KitRunner
Author URI: https://5kingsmarketing.com
Description: Native WordPress theme matching AllStar Insurance Agency live site.
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: allstar-native
Tags: insurance, business, responsive, custom-header, custom-menu
*/

/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
    --allstar-blue: #16213e;
    --allstar-blue-dark: #0d1528;
    --allstar-blue-light: #1e2d4d;
    --allstar-accent: #2563eb;
    --text-dark: #333333;
    --text-muted: #666666;
    --bg-light: #f7f7f7;
    --footer-dark: #1a1a2e;
    --footer-darker: #16213e;
}

/* ========================================
   RESET & BASE STYLES
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth; scroll-padding-top: 90px;
}

body {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #666;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: #333;
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 10px;
}

h1 { font-size: 30px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

p { margin-bottom: 1em; }

a {
    color: var(--allstar-blue);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover { opacity: 0.8; }

img { max-width: 100%; height: auto; }

/* Container */
.container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
   HEADER STYLES - BLUE THEME
   ======================================== */

/* Top Header Bar */
#top-header {
    background-color: var(--allstar-blue) !important;
    background: var(--allstar-blue) !important;
    color: #ffffff;
    font-size: 13px;
    line-height: 1;
    padding: 10px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100000;
}

#top-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#et-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

#et-info a { color: #fff; font-weight: 600; }
#et-info-phone { font-weight: 700; font-size: 14px; }

#et-secondary-menu {
    display: flex;
    align-items: center;
    gap: 15px;
}

.et-info-gtranslate {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.et-info-gtranslate .gtranslate_wrapper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}
.et-info-gtranslate .gtranslate_wrapper a {
    display: inline-block;
    line-height: 1;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.et-info-gtranslate .gtranslate_wrapper a:hover {
    opacity: 1;
}
.et-info-gtranslate .gtranslate_wrapper a.gt-current-lang {
    opacity: 1;
    outline: 1px solid rgba(255,255,255,0.35);
    border-radius: 2px;
}
.et-info-gtranslate .gtranslate_wrapper img {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .et-info-gtranslate .gtranslate_wrapper img {
        width: 20px;
        height: 20px;
    }
}

/* Language switcher inside mobile hamburger panel */
.mobile-menu-gtranslate.et-info-gtranslate {
    display: none;
}

@media (max-width: 768px) {
    .mobile-menu-gtranslate.et-info-gtranslate {
        display: inline-flex;
        align-items: center;
        padding: 10px 0 15px;
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
        line-height: 1;
    }
    .mobile-menu-gtranslate.et-info-gtranslate .gtranslate_wrapper {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .mobile-menu-gtranslate.et-info-gtranslate .gtranslate_wrapper img {
        width: 24px;
        height: 24px;
    }
}

#secondary-menu {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
}

#secondary-menu a {
    color: rgba(255,255,255,0.9);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#secondary-menu a:hover { color: #fff; }

/* GTranslate Widget with US Flag */
.gtranslate-wrapper {
    display: inline-block;
}

.gtranslate-wrapper select,
.gtranslate-fallback select {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 6px 30px 6px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    min-width: 120px;
}

.gtranslate-wrapper select:hover,
.gtranslate-fallback select:hover {
    background: rgba(255,255,255,0.25);
}

.gtranslate-wrapper select option,
.gtranslate-fallback select option {
    color: #333;
    background: #fff;
    padding: 8px;
}

/* Main Header - Sticky */
#main-header {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    position: fixed;
    top: 38px;
    left: 0;
    right: 0;
    z-index: 99999;
    will-change: transform;
    transform: translateZ(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#main-header.header-hidden {
    transform: translateY(-100%);
}

#main-header.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

/* Adjust site content for fixed header (header is ~132px tall: 34 topbar + 94 main + 4 gap) */
#content {
    padding-top: 150px;
}

#main-header .container {
    text-align: left;
    position: relative;
    padding: 15px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo Container */
.logo_container {
    flex-shrink: 0;
}

.logo_container img {
    max-height: 55px;
    width: auto;
    display: block;
}

.custom-logo-link img {
    max-height: 55px;
    width: auto;
}

/* Navigation */
#et-top-navigation {
    display: flex !important;
    align-items: center;
    flex-direction: row;
}

#top-menu {
    display: flex !important;
    flex-direction: row !important;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 5px;
}

#top-menu li a {
    padding: 8px 10px;
}

#top-menu li {
    display: inline-block;
    position: relative;
}

#top-menu a {
    display: block;
    padding: 8px 12px;
    color: #333;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

#top-menu a:hover,
#top-menu .current-menu-item a {
    color: #E31E24;
}

/* Desktop Dropdown Submenu */
#top-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.06);
    list-style: none;
    margin: 0;
    padding: 8px 0;
    z-index: 9999;
}

#top-menu .menu-item-has-children:hover > .sub-menu,
#top-menu .menu-item-has-children:focus-within > .sub-menu {
    display: block;
}

#top-menu .sub-menu li {
    display: block;
    width: 100%;
}

#top-menu .sub-menu li a {
    display: block;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    transition: all 0.2s ease;
}

#top-menu .sub-menu li a:hover {
    background: rgba(227, 30, 36, 0.06);
    color: #E31E24;
}

/* Header CTA Button - One Line */
.header-cta-btn {
    background: linear-gradient(135deg, #E31E24 0%, #C41A1F 100%);
    color: #fff !important;
    padding: 12px 20px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 15px;
    transition: all 0.3s ease;
    display: inline-block;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(227, 30, 36, 0.3);
    border: 2px solid transparent;
}

.header-cta-btn:hover {
    background: linear-gradient(135deg, #16213e 0%, #2563eb 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(22, 33, 62, 0.4);
    border-color: #fff;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    width: 44px;
    height: 44px;
}

/* ========================================
   HERO SECTION - ENHANCED WITH IMAGE
   ======================================== */
.hero-section {
    background: linear-gradient(135deg, var(--allstar-blue) 0%, var(--allstar-blue-dark) 100%);
    padding: 80px 0;
    color: #fff;
    position: relative;
    overflow: auto;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-content { 
    max-width: 600px;
    text-align: left;
}

.hero-image {
    position: relative;
    text-align: center;
}

.hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.hero-image img:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.4);
}

.hero-image::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: linear-gradient(135deg, rgba(227, 30, 36, 0.1) 0%, rgba(22, 33, 62, 0.1) 100%);
    border-radius: 15px;
    z-index: -1;
}

.hero-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
    line-height: 1.1;
    white-space: nowrap;
    max-width: 100%;
}

.hero-subtitle {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    color: rgba(255,255,255,0.9);
}

.hero-description {
    font-size: 18px;
    margin-bottom: 30px;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Hero section with fallback for no image */
.hero-section.no-image .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
}

.hero-section.no-image .hero-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.hero-section.no-image .hero-buttons {
    justify-content: center;
}

/* Hero Badge - Decorative Element */
.hero-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #E31E24 0%, #C41A1F 100%);
    color: white;
    padding: 15px 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(227, 30, 36, 0.3);
    transform: rotate(-5deg);
    transition: all 0.3s ease;
    z-index: 2;
}

.hero-badge:hover {
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 15px 35px rgba(227, 30, 36, 0.4);
}

.badge-number {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 5px;
}

.badge-text {
    display: block;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hero Trust Indicators */
.hero-trust {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255,255,255,0.9);
}

.trust-icon {
    font-size: 16px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.trust-text {
    font-weight: 500;
}

/* ========================================
   BUTTON STYLES
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(135deg, #E31E24 0%, #16213e 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(227, 30, 36, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #16213e 0%, #E31E24 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(227, 30, 36, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, #fff 100%);
    color: #16213e;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-secondary:hover {
    background: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    color: #E31E24;
}

.btn-outline {
    background: linear-gradient(135deg, #16213e 0%, #1e3a5f 100%);
    border: none;
    color: #fff;
    box-shadow: 0 4px 15px rgba(22, 33, 62, 0.3);
}

.btn-outline:hover {
    background: linear-gradient(135deg, #E31E24 0%, #C41A1F 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(227, 30, 36, 0.4);
    color: #fff;
}

.btn-white {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    color: #16213e;
    border: 2px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.btn-white:hover {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    color: #E31E24;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    border-color: #E31E24;
}

/* ========================================
   ABOUT US PAGE ENHANCEMENTS
   ======================================== */
.about-hero {
    background: linear-gradient(135deg, var(--allstar-blue) 0%, var(--allstar-blue-dark) 100%);
    padding: 60px 0;
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
}

.about-hero h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
}

.about-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

.about-content h2 {
    color: var(--allstar-blue);
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

.about-content p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 25px;
    text-align: justify;
}

.about-content .highlight {
    background: linear-gradient(135deg, rgba(227, 30, 36, 0.1) 0%, rgba(196, 26, 31, 0.05) 100%);
    padding: 20px;
    border-left: 4px solid #E31E24;
    border-radius: 0 8px 8px 0;
    margin: 25px 0;
}

.about-content .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.about-content .service-item {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
    transition: all 0.3s ease;
}

.about-content .service-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.about-content .service-item h3 {
    color: var(--allstar-blue);
    font-size: 18px;
    margin-bottom: 10px;
}

/* ========================================
   QUOTE PAGE ENHANCEMENTS
   ======================================== */
.quote-hero {
    background: linear-gradient(135deg, #E31E24 0%, #C41A1F 100%);
    padding: 80px 0;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: auto;
}

.quote-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.quote-hero h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

.hero-underline {
    width: 100px;
    height: 4px;
    background: rgba(255,255,255,0.8);
    margin: 20px auto;
    border-radius: 2px;
    position: relative;
    z-index: 1;
}

.quote-content {
    padding: 60px 0;
    background: #f8f9fa;
}

.quote-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.quote-sidebar {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    height: fit-content;
}

.contact-card h3 {
    color: var(--allstar-blue);
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

.contact-detail {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.contact-detail:hover {
    background: #f0f4f8;
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(227, 30, 36, 0.1);
}

.contact-detail i {
    color: #E31E24;
    font-size: 18px;
    margin-top: 2px;
}

.contact-detail p {
    margin: 0;
    line-height: 1.5;
}

.contact-detail a {
    color: var(--allstar-blue);
    font-weight: 600;
    text-decoration: none;
}

.contact-detail a:hover {
    color: #E31E24;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .quote-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .about-content .services-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   QUOTE FORM STYLES
   ======================================== */
.form-header {
    text-align: center;
    margin-bottom: 40px;
}

.form-header h2 {
    color: var(--allstar-blue);
    font-size: 32px;
    margin-bottom: 15px;
}

.form-header p {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
}

.default-quote-form {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
}

.form-section {
    margin-bottom: 40px;
}

.form-section h3 {
    color: var(--allstar-blue);
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #E31E24;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    color: #333;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #fff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #E31E24;
    box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.btn-large {
    padding: 18px 40px;
    font-size: 16px;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-note {
    margin-top: 20px;
    font-size: 13px;
    color: #666;
    text-align: center;
    line-height: 1.5;
}

.why-choose-us {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    margin-top: 30px;
}

.why-choose-us h4 {
    color: var(--allstar-blue);
    font-size: 18px;
    margin-bottom: 15px;
    text-align: center;
}

.why-choose-us ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.why-choose-us li {
    padding: 8px 0;
    font-size: 14px;
    color: #555;
    border-bottom: 1px solid #e9ecef;
}

.why-choose-us li:last-child {
    border-bottom: none;
}

/* Responsive form adjustments */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .default-quote-form {
        padding: 25px;
    }
    
    .form-header h2 {
        font-size: 24px;
    }
}

/* Contact detail icons */
.contact-detail i.icon-location,
.contact-detail i.icon-phone,
.contact-detail i.icon-clock,
.contact-detail i.icon-email {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    text-align: center;
    font-size: 18px;
    color: #E31E24;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ========================================
   AUTO INSURANCE HERO - STATIC IMAGES
   ======================================== */
.auto-insurance-hero-static {
    background: linear-gradient(135deg, #E31E24 0%, #C41A1F 100%);
    padding: 80px 0;
    text-align: center;
    color: #fff;
}

.auto-insurance-hero-static .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.auto-insurance-hero-static .page-title {
    color: #fff;
    margin: 0 0 20px 0;
    font-size: 48px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.auto-insurance-hero-static p {
    color: rgba(255,255,255,0.95);
    font-size: 22px;
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    margin-bottom: 30px;
}

.auto-insurance-hero-static .btn-primary {
    display: inline-block;
    padding: 15px 35px;
    font-size: 18px;
    background: #fff;
    color: #E31E24;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.auto-insurance-hero-static .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    background: #f8f9fa;
}

/* Image row styling for static layout */
.auto-insurance-hero-static .hero-images-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.auto-insurance-hero-static .hero-image-container {
    flex: 1;
    max-width: 400px;
    min-width: 250px;
}

.auto-insurance-hero-static .hero-image-container img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

.auto-insurance-hero-static .hero-image-container img:hover {
    transform: scale(1.05);
}

.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 1s ease-in-out;
}

.auto-insurance-hero .container {
    position: relative;
    z-index: 2;
    padding: 120px 0;
    text-align: center;
    color: #fff;
}

.auto-insurance-hero .page-title {
    color: #fff;
    margin: 0 0 20px 0;
    font-size: 48px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    animation: fadeInUp 1s ease-out;
}

.auto-insurance-hero p {
    color: rgba(255,255,255,0.95);
    font-size: 22px;
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    margin-bottom: 30px;
    animation: fadeInUp 1s ease-out 0.3s both;
}

.auto-insurance-hero .btn-primary {
    display: inline-block;
    padding: 15px 35px;
    font-size: 18px;
    background: #fff;
    color: #E31E24;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    animation: fadeInUp 1s ease-out 0.6s both;
}

.auto-insurance-hero .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    background: #f8f9fa;
}

.hero-slider-nav {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 12px;
}

/* Hero slide content styling */
.hero-slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.hero-slide.active .hero-slide-content {
    opacity: 1;
}

.hero-slide-content div {
    font-size: 80px;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero-slide-content h3 {
    color: #fff;
    margin: 0 0 10px 0;
    font-size: 24px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.hero-slide-content p {
    color: rgba(255,255,255,0.9);
    margin: 0;
    font-size: 16px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.hero-slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: #fff;
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-slider-dot:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

.hero-slider-dot.active {
    opacity: 0.9;
    transform: scale(1.2);
}

/* Hero slider animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive static hero images */
@media (max-width: 768px) {
    .auto-insurance-hero-static {
        padding: 60px 0;
    }
    
    .auto-insurance-hero-static .page-title {
        font-size: 42px;
    }
    
    .auto-insurance-hero-static p {
        font-size: 20px;
    }
    
    .auto-insurance-hero-static .hero-images-row {
        flex-direction: column;
        gap: 20px;
    }
    
    .auto-insurance-hero-static .hero-image-container {
        max-width: 100%;
        min-width: auto;
    }
}

@media (max-width: 1200px) {
    .auto-insurance-hero-static .hero-images-row {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    
    .auto-insurance-hero-static .hero-image-container {
        flex: 0 1 300px;
        max-width: 300px;
        min-width: 200px;
    }
    
    /* Make the main hero image larger on medium screens too */
    .auto-insurance-hero-static .hero-image-container:first-child {
        flex: 0 1 400px;
        max-width: 400px;
        min-width: 250px;
    }
}

/* Three-image layout for larger screens - updated for main hero image */
@media (min-width: 1201px) {
    .auto-insurance-hero-static .hero-images-row {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 25px;
    }
    
    .auto-insurance-hero-static .hero-image-container {
        flex: 1;
        max-width: 350px;
        min-width: 250px;
    }
    
    /* Make the first image (main hero) slightly larger */
    .auto-insurance-hero-static .hero-image-container:first-child {
        flex: 1.5;
        max-width: 500px;
        min-width: 300px;
    }
}
    
    .hero-slide-content div {
        font-size: 60px;
    }
    
    .hero-slide-content h3 {
        font-size: 20px;
    }
    
    .hero-slide-content p {
        font-size: 14px;
    }
}

.btn-service {
    background: linear-gradient(135deg, #16213e 0%, #2563eb 100%);
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    display: inline-block;
    box-shadow: 0 3px 10px rgba(22, 33, 62, 0.25);
    transition: all 0.3s ease;
}

.btn-service:hover {
    background: linear-gradient(135deg, #E31E24 0%, #C41A1F 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(227, 30, 36, 0.35);
    color: #fff;
}

/* ========================================
   SERVICES SECTION
   ======================================== */
.services-section {
    padding: 80px 0;
    background: #fff;
}

.section-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 50px;
    color: #333;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.service-card {
    background: #fff;
    padding: 35px 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(227, 30, 36, 0.1);
    position: relative;
    overflow: auto;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #E31E24 0%, #16213e 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover::before {
    opacity: 1;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(227, 30, 36, 0.15);
    border-color: rgba(227, 30, 36, 0.2);
}

.service-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(227, 30, 36, 0.1) 0%, rgba(22, 33, 62, 0.1) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--allstar-blue);
}

.service-icon svg {
    width: 32px;
    height: 32px;
}

.service-title {
    font-size: 18px;
    margin-bottom: 12px;
    color: #333;
    white-space: nowrap;
}

.service-description {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* ========================================
   CTA BAR
   ======================================== */
.cta-bar {
    background: linear-gradient(135deg, var(--allstar-blue) 0%, var(--allstar-blue-dark) 100%);
    padding: 40px 0;
    color: #fff;
}

.cta-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.cta-text {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

.cta-phone {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.cta-phone:hover { color: rgba(255,255,255,0.9); }

/* ========================================
   FOOTER
   ======================================== */
.site-footer {
    background: var(--footer-dark);
    color: rgba(255,255,255,0.7);
    padding: 60px 0 0;
}

#main-footer { padding-bottom: 40px; }

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.footer-column h4 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--allstar-blue);
    display: inline-block;
}

.footer-column p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 15px;
}

.footer-column a {
    color: rgba(255,255,255,0.7);
}

.footer-column a:hover { color: var(--allstar-blue); }

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px;
}

.footer-links li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--allstar-blue);
    font-size: 18px;
    line-height: 1;
}

.footer-links a { font-size: 14px; }

.footer-logo {
    max-height: 60px;
    width: auto;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
}

/* Footer Bottom */
.footer-bottom {
    background: var(--footer-darker);
    padding: 20px 0;
    margin-top: 40px;
}

.footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    margin: 0;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}

.footer-bottom, .footer-bottom a, .footer-bottom p, .footer-bottom span,
.footer-bottom .footer-copyright,
.footer-bottom .footer-bottom-links a {
    color: #ffffff;
}

.footer-bottom .footer-copyright {
    color: #ffffff;
}

.footer-bottom .footer-bottom-links {
    color: #ffffff;
}

.footer-credit-link {
    color: #d4af37 !important;
    font-weight: 600;
    transition: color 0.2s ease;
    text-decoration: none;
}
.footer-credit-link:hover,
.footer-credit-link:focus {
    color: #f0d56a !important;
    text-decoration: underline;
}

/* Crown above the dotless i in 'Kings' */
.kings-i {
    position: relative;
    display: inline-block;
    color: #d4af37;
}
.kings-i::before {
    /* Inline SVG crown, encoded as data URI, ~1em wide */
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'><path d='M2 14 L0 2 L5 6 L8 1 L12 6 L16 1 L19 6 L24 2 L22 14 Z' fill='%23d4af37' stroke='%23a8852c' stroke-width='0.5' stroke-linejoin='round'/><circle cx='3' cy='2.2' r='1.1' fill='%23d4af37' stroke='%23a8852c' stroke-width='0.4'/><circle cx='12' cy='0.6' r='1.3' fill='%23d4af37' stroke='%23a8852c' stroke-width='0.4'/><circle cx='21' cy='2.2' r='1.1' fill='%23d4af37' stroke='%23a8852c' stroke-width='0.4'/><rect x='1' y='12' width='22' height='3' fill='%23d4af37' stroke='%23a8852c' stroke-width='0.4'/><circle cx='8' cy='13.5' r='0.7' fill='%23a8852c'/><circle cx='16' cy='13.5' r='0.7' fill='%23a8852c'/></svg>");
    position: absolute;
    top: -0.85em;
    left: 50%;
    transform: translateX(-50%);
    width: 0.85em;
    height: 0.6em;
    line-height: 1;
    pointer-events: none;
}

.btn-footer {
    background: linear-gradient(135deg, #E31E24 0%, #C41A1F 100%);
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 3px 10px rgba(227, 30, 36, 0.3);
    transition: all 0.3s ease;
}

.btn-footer:hover {
    background: linear-gradient(135deg, #16213e 0%, #2563eb 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(22, 33, 62, 0.4);
}

.social-links {
    display: flex;
    gap: 12px;
    margin: 20px 0;
}

.social-links a {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: #E31E24;
    transform: translateY(-2px);
}

/* Footer Contact - Uniform Single Line Layout */
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    padding: 10px 0;
}

.footer-contact-icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #E31E24;
    transition: all 0.3s ease;
}

.footer-contact-item:hover .footer-contact-icon {
    background: #E31E24;
    color: #fff;
}

.footer-contact-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-contact-content strong {
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.footer-contact-content span,
.footer-contact-content a {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    line-height: 1.5;
}

.footer-contact-content a:hover {
    color: #E31E24;
}

/* ========================================
   FORM STYLES
   ======================================== */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="url"],
form input[type="password"],
form input[type="search"],
form input[type="number"],
form textarea,
form select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Open Sans', Arial, sans-serif;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: #fff;
    color: #333;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="tel"]:focus,
form textarea:focus,
form select:focus {
    border-color: var(--allstar-blue);
    box-shadow: 0 0 0 3px rgba(22, 33, 62, 0.1);
    outline: none;
}

form textarea {
    resize: vertical;
    min-height: 100px;
}

form select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

form .required {
    color: var(--allstar-blue);
}

/* Form Row Layout */
.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-submit {
    margin-top: 10px;
}

/* Quote Form Specific */
.allstar-quote-form {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
}

.btn-quote-submit {
    background: linear-gradient(135deg, #E31E24 0%, #C41A1F 100%);
    color: #fff;
    padding: 16px 40px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    box-shadow: 0 4px 15px rgba(227, 30, 36, 0.3);
    position: relative;
    overflow: auto;
}

.btn-quote-submit:hover {
    background: linear-gradient(135deg, #16213e 0%, #2563eb 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(22, 33, 62, 0.4);
}

.btn-quote-submit:active {
    transform: translateY(-1px);
}

/* ========================================
   STICKY BUTTONS & SCROLL TO TOP
   ======================================== */

/* Sticky Quote Button - Bottom Right */
.sticky-quote-btn {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background: linear-gradient(135deg, #E31E24 0%, #C41A1F 100%);
    color: #fff;
    padding: 14px 24px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(227, 30, 36, 0.4);
    z-index: 99998;
    transition: all 0.3s ease;
    text-decoration: none;
    border: 2px solid #fff;
}

.sticky-quote-btn:hover {
    background: linear-gradient(135deg, #16213e 0%, #2563eb 100%);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 25px rgba(22, 33, 62, 0.5);
    color: #fff;
}

.sticky-quote-btn svg {
    width: 20px;
    height: 20px;
}

/* Scroll to Top Button - ABOVE quote button */
.scroll-to-top {
    position: fixed;
    bottom: 140px;
    right: 20px;
    background: linear-gradient(135deg, #16213e 0%, #1e3a5f 100%);
    color: #fff;
    width: 50px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(22, 33, 62, 0.4);
    z-index: 99997;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: linear-gradient(135deg, #E31E24 0%, #C41A1F 100%);
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 20px rgba(227, 30, 36, 0.4);
}

.scroll-to-top svg {
    width: 24px;
    height: 24px;
}

/* ========================================
   MOBILE MENU PANEL
   ======================================== */

/* Mobile Menu Panel - Slides from right */
.mobile-menu-panel {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    background: #fff;
    z-index: 100001;
    transition: right 0.3s ease;
    overflow-y: auto;
    box-shadow: -2px 0 20px rgba(0,0,0,0.15);
}

/* Higher specificity to beat @media (min-width: 981px) { .mobile-menu-panel { display: none !important } } */
body .mobile-menu-panel.mobile-menu-panel.active {
    right: 0;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Higher specificity to beat @media (min-width: 981px) { .mobile-menu-overlay { display: none !important } } */
.mobile-menu-overlay.mobile-menu-overlay.active {
    display: block !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto !important;
}

.menu-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    color: #333;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu-content {
    padding: 70px 20px 20px;
}

.mobile-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-menu li {
    border-bottom: 1px solid #eee;
}

.mobile-nav-menu a {
    display: block;
    padding: 15px 0;
    color: #333;
    font-weight: 600;
    font-size: 15px;
}

.mobile-nav-menu a:hover { color: var(--allstar-blue); }

/* ========================================
   PAGE HEADER
   ======================================== */
.page-header {
    background: linear-gradient(135deg, var(--allstar-blue) 0%, var(--allstar-blue-dark) 100%);
    padding: 80px 0;
    text-align: center;
    color: #fff;
}

.page-header .page-title {
    color: #fff;
    font-size: 42px;
    font-weight: 600;
    margin: 0;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1024px) {
    #top-menu a {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cta-bar .container {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    /* Form rows stack on tablet */
    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Hide top bar on mobile */
    #top-header {
        display: none;
    }
    
    /* Adjust header position */
    #main-header {
        top: 0;
    }
    
    #content {
        padding-top: 100px;
    }
    
    /* Show hamburger menu */
    .mobile-menu-toggle {
        display: block;
    }
    
    /* Hide desktop nav */
    #et-top-navigation {
        display: none;
    }
    
    /* Hero adjustments */
    .hero-title { font-size: 28px; }
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    .btn { width: 100%; max-width: 280px; }
    
    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-bottom .container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    /* CTA */
    .cta-text { font-size: 18px; }
    .cta-phone { font-size: 22px; }
    
    /* Sticky buttons - mobile */
    .sticky-quote-btn {
        bottom: 80px;
        right: 15px;
        padding: 12px 18px;
        font-size: 13px;
    }
    
    .scroll-to-top {
        right: 15px;
        bottom: 110px;
        width: 45px;
        height: 45px;
    }
    
    /* Page header */
    .page-header .page-title { font-size: 32px; }
}

@media (max-width: 480px) {
    /* Smaller screens: circle button with text fitting inside */
    .sticky-quote-btn {
        bottom: 20px;
        right: 15px;
        width: 76px;
        height: 76px;
        padding: 0;
        border-radius: 50%;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.1;
        text-align: center;
        flex-direction: column;
        gap: 2px;
    }
    .sticky-quote-btn svg {
        width: 18px;
        height: 18px;
    }
    .sticky-quote-btn span {
        display: inline !important;
        font-size: 11px;
        line-height: 1.1;
    }
    
    .scroll-to-top {
        right: 15px;
        bottom: 110px;
    }
    
    /* Form adjustments */
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   ENHANCED MOBILE MENU STYLES
   ======================================== */

/* Mobile Menu Responsive Breakpoints */
@media screen and (max-width: 980px) {
    /* Show mobile menu toggle on tablets and smaller */
    .mobile-menu-toggle {
        display: block !important;
    }
    
    /* Hide desktop navigation */
    #site-navigation {
        display: none !important;
    }
    
    /* Adjust header for mobile menu */
    .header-main {
        position: relative;
    }
    
    /* Ensure mobile menu toggle is visible */
    .mobile-menu-toggle {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        z-index: 1001;
    }
}

@media screen and (max-width: 768px) {
    /* Mobile menu optimizations for phones */
    .mobile-menu-panel {
        width: 280px !important;
    }
    
    .mobile-menu-toggle {
        padding: 10px 12px !important;
        font-size: 20px !important;
    }
    
    .mobile-menu-header h3 {
        font-size: 18px !important;
    }
    
    .mobile-nav-menu a {
        font-size: 16px !important;
        padding: 12px 20px !important;
    }
}

@media screen and (max-width: 480px) {
    /* Mobile menu optimizations for small phones */
    .mobile-menu-panel {
        width: 260px !important;
    }
    
    .mobile-menu-toggle {
        right: 15px !important;
        padding: 8px 10px !important;
    }
    
    .mobile-menu-header {
        padding: 15px !important;
    }
    
    .mobile-nav-menu a {
        font-size: 15px !important;
        padding: 10px 15px !important;
    }
}

/* Mobile menu panel hidden on desktop (it should only show via JS) */
@media screen and (min-width: 981px) {
    .mobile-menu-overlay {
        display: none !important;
    }
    .mobile-menu-panel {
        display: none !important;
    }
}

/* Additional mobile menu enhancements */
@media screen and (max-width: 980px) {
    /* Ensure header doesn't overlap with mobile menu */
    #masthead {
        position: relative;
        z-index: 1000;
    }
    
    /* Adjust logo size for mobile */
    .site-branding {
        margin-right: 60px;
        /* Make space for hamburger menu */
    }
    
    .custom-logo {
        max-height: 50px !important;
    }
    
    /* Ensure mobile menu toggle is always accessible */
    .mobile-menu-toggle {
        position: absolute !important;
        top: 50% !important;
        right: 20px !important;
        transform: translateY(-50%) !important;
        z-index: 1001 !important;
    }
    
    /* Fix potential z-index issues */
    .mobile-menu-overlay {
        z-index: 9999 !important;
    }
    
    .mobile-menu-panel {
        z-index: 10000 !important;
    }
}

/* Touch device optimizations */
@media screen and (max-width: 980px) and (hover: none) {
    .mobile-menu-toggle {
        padding: 15px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    .mobile-nav-menu a {
        padding: 15px 20px !important;
        min-height: 44px !important;
    }
}

/* Landscape mobile optimizations */
@media screen and (max-width: 980px) and (orientation: landscape) {
    .mobile-menu-panel {
        max-height: 100vh !important;
        overflow-y: auto !important;
    }
    
    .mobile-menu-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1 !important;
    }
}

/* High DPI display optimizations */
@media screen and (max-width: 980px) and (-webkit-min-device-pixel-ratio: 2) {
    .mobile-menu-toggle {
        border-width: 2px !important;
    }
    
    .mobile-menu-panel {
        box-shadow: -4px 0 40px rgba(0,0,0,0.2) !important;
    }
}

/* CRITICAL FIX: Force mobile menu visibility on mobile devices */
@media screen and (max-width: 980px) {
    /* Override any conflicting display rules with maximum specificity */
    #masthead .mobile-menu-toggle,
    .site-header .mobile-menu-toggle,
    #main-header .mobile-menu-toggle,
    header .mobile-menu-toggle,
    .mobile-menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        z-index: 1001 !important;
    }
    
    /* Ensure mobile menu is always visible and accessible */
    .mobile-menu-toggle {
        top: 50% !important;
        right: 20px !important;
        transform: translateY(-50%) !important;
        background: rgba(255,255,255,0.1) !important;
        border: 2px solid rgba(255,255,255,0.3) !important;
        border-radius: 8px !important;
        padding: 12px 15px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    /* Make hamburger icon more visible */
    .mobile-menu-toggle .menu-icon {
        font-size: 24px !important;
        color: #fff !important;
        font-weight: bold !important;
        display: block !important;
    }
}


/* Mobile Menu Toggle - Enhanced */

/* Mobile Menu Header */
.mobile-menu-header {
    position: relative;
    padding: 20px;
    background: linear-gradient(135deg, var(--allstar-blue) 0%, var(--allstar-blue-dark) 100%);
    color: #fff;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobile-menu-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

/* Enhanced Mobile Menu Panel */
.mobile-menu-panel {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100vh;
    background: #fff;
    z-index: 100001;
    transition: right 0.3s ease;
    overflow-y: auto;
    box-shadow: -5px 0 25px rgba(0,0,0,0.2);
}

/* Higher specificity to beat @media (min-width: 981px) { .mobile-menu-panel { display: none !important } } */
body .mobile-menu-panel.mobile-menu-panel.active {
    right: 0;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

/* Enhanced Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(3px);
}

/* Higher specificity to beat @media (min-width: 981px) { .mobile-menu-overlay { display: none !important } } */
.mobile-menu-overlay.mobile-menu-overlay.active {
    display: block !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto !important;
}

/* Enhanced Mobile Menu Content */
.mobile-menu-content {
    padding: 0;
}

/* Enhanced Mobile Navigation Menu */
.mobile-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-menu li {
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.mobile-nav-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    color: #333;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.mobile-nav-menu a:hover {
    background: rgba(22, 33, 62, 0.05);
    color: var(--allstar-blue);
    padding-left: 25px;
}

/* Submenu Styles */
.mobile-nav-menu .menu-item-has-children > a::after {
    content: "▼";
    font-size: 12px;
    transition: transform 0.3s ease;
    margin-left: auto;
    padding-left: 10px;
}

.mobile-nav-menu .menu-item-has-children > a.submenu-open::after {
    transform: rotate(180deg);
}

.mobile-nav-menu .sub-menu {
    display: none;
    background: rgba(22, 33, 62, 0.03);
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-menu .sub-menu.active {
    display: block;
    max-height: 500px; /* Ensure sufficient space for expansion */
    overflow: auto;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 1;
    visibility: visible;
}

.mobile-nav-menu .sub-menu {
    display: none;
    max-height: 0;
    overflow: auto;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    visibility: hidden;
    background: rgba(0,0,0,0.03);
    border-left: 3px solid #E31E24;
    margin: 5px 0;
    border-radius: 0 0 5px 5px;
}

.mobile-nav-menu .sub-menu li {
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: background-color 0.2s ease;
}

.mobile-nav-menu .sub-menu li:last-child {
    border-bottom: none;
}

.mobile-nav-menu .sub-menu a {
    display: block;
    padding: 12px 20px 12px 30px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
    position: relative;
}

.mobile-nav-menu .sub-menu a::before {
    content: '→';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #E31E24;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mobile-nav-menu .sub-menu a:hover {
    background: rgba(227, 30, 36, 0.1);
    color: #E31E24;
    padding-left: 35px;
}

.mobile-nav-menu .sub-menu a:hover::before {
    opacity: 1;
}

/* DEBUG: Visual indicators for mobile dropdown testing */
.mobile-nav-menu .menu-item-has-children > a {
    position: relative;
    transition: all 0.3s ease;
}

.mobile-nav-menu .menu-item-has-children > a.submenu-open {
    background: rgba(227, 30, 36, 0.1);
    color: #E31E24;
}

/* Ensure dropdown arrow rotates properly */
.mobile-nav-menu .menu-item-has-children > a::after {
    content: '▼';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    transition: transform 0.3s ease;
    color: inherit;
}

.mobile-nav-menu .menu-item-has-children > a.submenu-open::after {
    transform: translateY(-50%) rotate(180deg);
}

/* CRITICAL: Touch device optimizations for dropdowns */
@media screen and (max-width: 980px) {
    /* STICKY MOBILE HEADER - New Feature */
    #masthead {
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: linear-gradient(135deg, #16213e 0%, #1a2847 100%) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
        transition: all 0.3s ease !important;
    }
    
    /* Enhanced sticky header with scroll behavior */
    #masthead.sticky-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        background: linear-gradient(135deg, #16213e 0%, #1a2847 100%) !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
        transform: translateY(0) !important;
        transition: all 0.3s ease !important;
    }
    
    /* Header scroll behavior - hide on scroll down, show on scroll up */
    #masthead.header-hidden {
        transform: translateY(-100%) !important;
        transition: transform 0.3s ease !important;
    }
    
    /* Ensure content doesn't jump when header becomes sticky */
    body.has-sticky-header {
        padding-top: 80px !important; /* Adjust based on your header height */
    }
    
    /* Smooth scroll behavior for better UX */
    html {
        scroll-behavior: smooth;
    }
    
    /* Ensure dropdown items are touch-friendly */
    .mobile-nav-menu .menu-item-has-children > a {
        min-height: 44px; /* Apple touch target size */
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 40px 12px 20px; /* Extra padding for touch */
        -webkit-tap-highlight-color: rgba(227, 30, 36, 0.3); /* Touch feedback */
        touch-action: manipulation; /* Prevent zoom on double-tap */
        user-select: none; /* Prevent text selection on touch */
    }
    
    /* Ensure submenu is properly positioned and visible */
    .mobile-nav-menu .sub-menu {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        top: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: rgba(0,0,0,0.05) !important;
    }
    
    /* Active submenu visibility */
    .mobile-nav-menu .sub-menu.active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: 400px !important; /* Increased max height */
        overflow: hidden !important;
        transition: max-height 0.4s ease, opacity 0.3s ease !important;
    }
    
    /* Ensure smooth animation on touch devices */
    .mobile-nav-menu .sub-menu {
        will-change: max-height, opacity; /* Performance optimization */
        transform: translateZ(0); /* Force hardware acceleration */
    }
    
    /* Prevent body scroll issues when dropdown is open */
    body.mobile-menu-open {
        /* overflow: hidden removed - allows page scroll after hamburger click */
        /* position: fixed removed - prevents scroll lock bug */
    }
    

}
}

.mobile-nav-menu .sub-menu a {
    padding: 12px 20px 12px 40px;
    font-size: 14px;
    color: #666;
    font-weight: 400;
}

.mobile-nav-menu .sub-menu a:hover {
    background: rgba(22, 33, 62, 0.08);
    color: var(--allstar-blue);
    padding-left: 45px;
}

/* Enhanced Close Button */
.menu-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255,255,255,0.1);
    border: none;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 10;
}

.menu-close:hover {
    background: rgba(255,255,255,0.2);
    transform: rotate(90deg);
}

/* Mobile Menu Quote Button */
.mobile-menu-content .header-cta-btn {
    display: block;
    margin: 20px;
    text-align: center;
    background: linear-gradient(135deg, #E31E24 0%, #C41A1F 100%);
    color: #fff;
    padding: 15px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(227, 30, 36, 0.3);
}

.mobile-menu-content .header-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(227, 30, 36, 0.4);
}

/* ========================================
   RESPONSIVE DESIGN ENHANCEMENTS
   ======================================== */

/* Tablet Responsive (768px - 1024px) */
@media (max-width: 1024px) {
    /* Show mobile menu toggle */
    .mobile-menu-toggle {
        display: block;
    }
    
    /* Hide desktop navigation */
    #et-top-navigation {
        display: none;
    }
    
    /* Adjust header layout */
    #et-top-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        z-index: 999;
    }
    
    #et-top-navigation.active {
        display: block;
    }
    
    /* Header adjustments */
    #main-header .container {
        position: relative;
        padding-right: 60px;
    }
    
    /* Logo adjustments */
    .logo_container img {
        max-height: 50px;
    }
    
    /* Content padding adjustment */
    #content {
        padding-top: 110px;
    }
}

/* Mobile Responsive (max-width: 768px) */
@media (max-width: 768px) {
    /* Hide top bar */
    #top-header {
        display: none;
    }
    
    /* Header adjustments */
    #main-header {
        top: 0;
        padding: 10px 0;
    }
    
    #main-header .container {
        padding: 0 15px;
    }
    
    /* Logo sizing */
    .logo_container img {
        max-height: 45px;
    }
    
    /* Mobile menu toggle positioning */
    .mobile-menu-toggle {
        right: 15px;
        padding: 10px 12px;
        font-size: 20px;
    }
    
    /* Mobile menu panel adjustments */
    .mobile-menu-panel {
        width: 280px;
        right: -280px;
    }
    
    /* Hero section mobile optimization */
    .hero-section {
        padding: 60px 0;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .hero-content {
        text-align: center;
        max-width: 100%;
    }
    
    .hero-title {
        font-size: 28px;
        line-height: 1.1;
        white-space: nowrap;
    }
    
    .hero-subtitle {
        font-size: 18px;
    }
    
    .hero-description {
        font-size: 16px;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        justify-content: center;
    }
    
    .hero-trust {
        justify-content: center;
    }
    
    .hero-badge {
        position: relative;
        top: auto;
        right: auto;
        margin: 20px auto 0;
        transform: rotate(0deg);
        max-width: 200px;
    }
    
    .btn {
        width: 100%;
        max-width: 280px;
        padding: 12px 20px;
        font-size: 14px;
    }
    
    /* Services mobile grid */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* Form mobile optimization */
    .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .default-quote-form {
        padding: 20px;
        margin: 0 -10px;
    }
    
    /* Footer mobile layout */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .footer-bottom .container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    /* CTA bar mobile */
    .cta-text {
        font-size: 18px;
    }
    
    .cta-phone {
        font-size: 22px;
    }
    
    /* Sticky buttons mobile optimization */
    .sticky-quote-btn {
        bottom: 20px;
        right: 15px;
        padding: 12px 18px;
        font-size: 13px;
    }
    
    .scroll-to-top {
        right: 15px;
        bottom: 110px;
        width: 45px;
        height: 45px;
    }
    
    /* Page header mobile */
    .page-header {
        padding: 50px 0;
    }
    
    .page-header .page-title {
        font-size: 28px;
    }
    
    /* Content mobile padding */
    #content {
        padding-top: 100px;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    /* Ultra-mobile optimizations */
    .mobile-menu-panel {
        width: 260px;
        right: -260px;
    }
    
    /* Auto Insurance Hero Slider for small screens */
    .auto-insurance-hero {
        height: 400px;
    }
    
    .auto-insurance-hero .container {
        padding: 60px 0;
    }
    
    .auto-insurance-hero .page-title {
        font-size: 32px;
    }
    
    .auto-insurance-hero p {
        font-size: 18px;
    }
    
    .hero-slider-nav {
        bottom: 15px;
    }
    
    .hero-slider-dot {
        width: 10px;
        height: 10px;
    }
    
    .hero-title {
        font-size: 20px;
        white-space: nowrap;
    }
    
    .hero-subtitle {
        font-size: 16px;
    }
    
    .hero-trust {
        gap: 15px;
        font-size: 12px;
    }
    
    .trust-icon {
        font-size: 14px;
    }
    
    .btn {
        max-width: 100%;
        padding: 10px 16px;
        font-size: 13px;
    }
    
    /* Sticky buttons - text-in-circle (defined in earlier @media (max-width: 480px) block) */
    .scroll-to-top {
        right: 15px;
        bottom: 110px;
        width: 40px;
        height: 40px;
    }
    
    /* Hero badge ultra-mobile */
    .hero-badge {
        padding: 10px 15px;
        font-size: 11px;
    }
    
    .badge-number {
        font-size: 20px;
    }
    
    .badge-text {
        font-size: 10px;
    }
    
    /* Extra small mobile hero title */
    @media (max-width: 360px) {
        .hero-title {
            font-size: 18px;
            white-space: nowrap;
        }
    }
    
    /* Tiny mobile hero title */
    @media (max-width: 320px) {
        .hero-title {
            font-size: 16px;
            white-space: nowrap;
        }
    }
    
    /* Form ultra-mobile */
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 10px 12px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Mobile menu font size */
    .mobile-nav-menu a {
        font-size: 14px;
        padding: 14px 15px;
    }
    
    .mobile-nav-menu .sub-menu a {
        font-size: 13px;
        padding: 10px 15px 10px 30px;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

.screen-reader-text {
    position: absolute;
    left: -9999px;
}

.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }


/* ============================================================
   LEGAL PAGES (Privacy / Terms / Accessibility)
   Per DESIGN.md "page-hero-legal" + "legal-page template"
   ============================================================ */

/* Wrapper for all legal page content (post-content) */
.legal-page {
    background-color: #ffffff;
    color: #333333;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    padding: 0 0 80px;
}

/* ---- Page hero (legal) ----
   Compact, left-aligned, gold eyebrow, white H1, 3px accent border bottom */
.page-hero-legal {
    background: linear-gradient(135deg, #0d1528 0%, #16213e 100%);
    color: #ffffff;
    padding: 64px 24px 48px;
    text-align: left;
    border-bottom: 3px solid #C41A1F;
    margin-bottom: 0;
}
.page-hero-legal .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.page-hero-legal-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d4af37;
    margin-bottom: 12px;
    padding: 4px 10px;
    background: rgba(212, 175, 55, 0.10);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 4px;
}
.page-hero-legal h1 {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 16px;
    max-width: 880px;
}
.page-hero-legal-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 16px;
}
.page-hero-legal-meta svg {
    width: 14px;
    height: 14px;
    color: #C41A1F;
    flex-shrink: 0;
}

/* ---- Table of contents (sticky on desktop) ---- */
.legal-toc {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 20px;
    margin-top: 40px;
}
.legal-toc-inner {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-left: 4px solid #0d1528;
    border-radius: 8px;
    padding: 24px 32px;
}
.legal-toc-title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0d1528;
    margin: 0 0 12px;
}
.legal-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc-item;
}
.legal-toc-list li {
    counter-increment: toc-item;
    margin: 0;
    padding: 0;
}
.legal-toc-list a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0 8px 16px;
    color: #333333;
    text-decoration: none;
    font-size: 0.9375rem;
    line-height: 1.4;
    border-left: 2px solid transparent;
    margin-left: -16px;
    transition: all 120ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.legal-toc-list a::before {
    content: counter(toc-item) ".";
    color: #C41A1F;
    font-weight: 700;
    font-size: 0.8125rem;
    min-width: 22px;
    flex-shrink: 0;
}
.legal-toc-list a:hover {
    color: #2563eb;
    border-left-color: #C41A1F;
}
.legal-toc-list a.active {
    color: #C41A1F;
    border-left-color: #C41A1F;
    font-weight: 600;
}

/* ---- Article body (prose) ---- */
.legal-content {
    max-width: 880px;
    margin: 0 auto;
    padding: 56px 20px 0;
}
.legal-content .prose {
    color: #333333;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
}
.legal-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0d1528;
    line-height: 1.3;
    margin: 48px 0 16px;
    padding-top: 24px;
    border-top: 1px solid #e9ecef;
    scroll-margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.legal-content h2:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}
.legal-content h2 .section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    background-color: #f0f4f8;
    color: #C41A1F;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: 9999px;
    line-height: 1;
}
.legal-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #16213e;
    line-height: 1.4;
    margin: 32px 0 8px;
}
.legal-content p {
    margin: 0 0 16px;
    color: #333333;
    line-height: 1.7;
}
.legal-content strong {
    color: #16213e;
    font-weight: 600;
}
.legal-content a {
    color: #2563eb;
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, 0.30);
    text-underline-offset: 3px;
    font-weight: 500;
    transition: all 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.legal-content a:hover {
    color: #C41A1F;
    text-decoration-color: #C41A1F;
}
.legal-content ul, .legal-content ol {
    margin: 0 0 24px;
    padding-left: 32px;
}
.legal-content li {
    margin-bottom: 8px;
    line-height: 1.7;
}
.legal-content blockquote {
    border-left: 4px solid #C41A1F;
    padding: 16px 24px;
    margin: 24px 0;
    color: #4a5568;
    font-style: italic;
    background-color: #f8f9fa;
    border-radius: 0 4px 4px 0;
}
.legal-content blockquote p:last-child {
    margin-bottom: 0;
}
.legal-content code {
    background: #f0f4f8;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875em;
    color: #16213e;
}

/* ---- Card-legal callouts (accent, info, warning) ---- */
.card-legal {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-left: 4px solid #C41A1F;
    border-radius: 8px;
    padding: 24px 32px;
    margin: 24px 0;
    box-shadow: 0 1px 2px rgba(13, 21, 40, 0.04);
}
.card-legal-info {
    background-color: #eff6ff;
    border: 1px solid #1e40af;
    border-left-width: 4px;
    border-radius: 8px;
    padding: 24px 32px;
    margin: 24px 0;
}
.card-legal-info p:last-child { margin-bottom: 0; }
.card-legal-warning {
    background-color: #fff7ed;
    border: 1px solid #b45309;
    border-left-width: 4px;
    border-radius: 8px;
    padding: 24px 32px;
    margin: 24px 0;
}
.card-legal-warning p:last-child { margin-bottom: 0; }
.card-legal h4 {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #C41A1F;
    margin: 0 0 8px;
}
.card-legal-info h4 { color: #1e40af; }
.card-legal-warning h4 { color: #b45309; }

/* ---- Contact card (Accessibility page) ---- */
.contact-card {
    background: linear-gradient(135deg, #0d1528 0%, #16213e 100%);
    color: #ffffff;
    border-radius: 12px;
    padding: 32px;
    border-left: 4px solid #C41A1F;
    margin: 32px 0;
    max-width: 720px;
}
.contact-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d4af37;
    margin-bottom: 4px;
    margin-top: 16px;
}
.contact-card-label:first-child { margin-top: 0; }
.contact-card-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.5;
}
.contact-card a {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    text-underline-offset: 3px;
    transition: all 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.contact-card a:hover {
    color: #d4af37;
    text-decoration-color: #d4af37;
}

/* ---- Last-updated (in hero meta) ---- */
.last-updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #666666;
}
.last-updated-icon {
    width: 14px;
    height: 14px;
    color: #C41A1F;
    flex-shrink: 0;
}

/* ---- Mobile adjustments ---- */
@media (max-width: 768px) {
    .page-hero-legal { padding: 40px 16px 32px; }
    .page-hero-legal h1 { font-size: 2rem; }
    .legal-toc, .legal-content { padding-left: 16px; padding-right: 16px; }
    .legal-content h2 { font-size: 1.25rem; margin: 40px 0 12px; padding-top: 20px; }
    .legal-toc-inner { padding: 20px; }
    .card-legal, .card-legal-info, .card-legal-warning { padding: 16px 20px; }
    .contact-card { padding: 24px; }
}


/* ============================================================
   Widget positioning — keep third-party floating widgets from
   overlapping our own sticky UI (sticky-quote-btn, scroll-to-top)
   ============================================================ */

/* UserWay accessibility widget: keep it on the left, but well above the
   site footer (so the user can still read footer links). UserWay's widget
   is a small circular icon that opens a side panel; default position is
   bottom-left. Force it to bottom-left at a clean offset.
   The inner #userwayAccessibilityIcon is relatively offset by UserWay's own
   CSS (left:20px / top:-24px), and the .usr pulse ring spills 10px outside
   the icon, so the wrapper must be inset far enough that the whole visual
   stays inside the viewport. */
#userway-widget,
.userway-widget,
[class*="userway"][class*="widget"],
div[id^="userway"],
div[class^="userway"] {
    bottom: 24px !important;
    left: 48px !important;
    top: auto !important;
    right: auto !important;
    z-index: 99997 !important;
}

/* UserWay's panel can be wide; on small screens allow it to scroll the page
   rather than overlap content. */
@media (max-width: 768px) {
    #userway-widget,
    .userway-widget,
    [class*="userway"][class*="widget"],
    div[id^="userway"],
    div[class^="userway"] {
        bottom: 16px !important;
        left: 40px !important;
    }
}

/* The actual clickable icon is offset relative to the wrapper. Make sure it
   remains fully inside the viewport on the left. */
#userwayAccessibilityIcon,
#userwayAccessibilityIcon.uai,
.userway_buttons_wrapper #userwayAccessibilityIcon {
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    transform: none !important;
}

/* Hide the decorative pulse/ripple ring (.usr) that UserWay draws 10px outside
   the icon. On small viewports that ring spills over the left edge and makes
   the widget look clipped. The icon itself stays interactive. */
#userwayAccessibilityIcon .usr,
.uai .usr {
    display: none !important;
}

/* end widget positioning */


/* ============================================================
   Mobile UX fixes — quick answer readability + footer contact centering
   ============================================================ */

/* Quick Answer (homepage) — on mobile, stack the "Quick Answer" label
   above the long paragraph so the body copy can use the full row width.
   The default desktop grid (auto 1fr) crushes the paragraph into a
   narrow column on phones, which makes the long sentence hard to read. */
@media (max-width: 768px) {
    .hp-qa {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 22px 22px;
    }
    .hp-qa .label {
        padding-top: 0;
    }
    .hp-qa p {
        font-size: 1rem;
        line-height: 1.75;
    }
}
@media (max-width: 480px) {
    .hp-qa {
        padding: 18px 18px;
        margin: 0 0 30px;
    }
    .hp-qa p {
        font-size: 0.98rem;
    }
}

/* Footer "Contact Us" — on mobile the contact column is the last item
   in a single-column stack. Centering the icon+text rows matches the
   visual weight of the other footer headings (which inherit center
   alignment from the column flow) and looks more like a finished card
   than a ragged left-aligned list. */
@media (max-width: 768px) {
    .footer-column .footer-contact-item {
        justify-content: center;
        text-align: center;
    }
    .footer-column .footer-contact-content {
        align-items: center;
    }
    .footer-column .footer-contact-content span,
    .footer-column .footer-contact-content a {
        text-align: center;
    }
}


/* ============================================================
   Sitewide safety net for Quick Answer boxes (added 2026-06-15)
   ------------------------------------------------------------
   The homepage (.hp-qa), resources (.res-qa), reviews (.revp-qa),
   and about (.ab-qa) pages all use the same 2-column grid layout
   (auto / 1fr) for their "Quick Answer" callout, which squeezes
   the long description text into a narrow column on phones.
   Each template also has its own per-class @media override that
   stacks the label above the description. This sitewide rule is
   a safety net for any future template that follows the same
   pattern but forgets the per-class override.
   ============================================================ */
@media (max-width: 768px) {
    .hp-qa, .res-qa, .revp-qa, .ab-qa {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 22px 22px !important;
    }
    .hp-qa .label, .res-qa .label, .revp-qa .label, .ab-qa .label {
        padding-top: 0 !important;
    }
    .hp-qa p, .res-qa p, .revp-qa p, .ab-qa p {
        font-size: 1rem !important;
        line-height: 1.75 !important;
    }
}
@media (max-width: 480px) {
    .hp-qa, .res-qa, .revp-qa, .ab-qa {
        padding: 18px 18px !important;
        margin: 0 0 30px !important;
    }
    .hp-qa p, .res-qa p, .revp-qa p, .ab-qa p {
        font-size: 0.98rem !important;
    }
}


/* ============================================================
   Responsive tables for .svc-page (RV, life, car, home, etc.)
   ------------------------------------------------------------
   The .svc-page template (used by car, motorcycle, RV, home,
   business, life, renters, and boat insurance pages) renders
   3-4 column comparison tables that don't fit on 375px phones.
   Each post's inline <style> block has a small @media rule that
   only shrinks the font; the table still overflows horizontally
   and the right-most column is cut off. This sitewide rule
   converts any .svc-page table into a card-per-row layout on
   mobile (max-width: 768px): the first cell becomes a dark
   header, and the remaining cells stack vertically inside the
   card. !important is used to win against the post's inline
   mobile rules that would otherwise keep the table in 3-4
   column mode.
   ============================================================ */
@media (max-width: 768px) {
    .svc-page table {
        display: block !important;
        width: 100% !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 18px 0 !important;
        overflow: visible !important;
    }
    .svc-page thead {
        display: none !important;
    }
    .svc-page tbody {
        display: block !important;
        width: 100% !important;
    }
    .svc-page tbody tr {
        display: block !important;
        background: #fff !important;
        border: 1px solid #e9ecef !important;
        border-radius: 8px !important;
        margin: 0 0 14px 0 !important;
        padding: 0 !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    }
    .svc-page tbody tr:last-child {
        margin-bottom: 0 !important;
    }
    .svc-page tbody th,
    .svc-page tbody td {
        display: block !important;
        width: auto !important;
        padding: 10px 14px !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        background: transparent !important;
        color: #333 !important;
        text-align: left !important;
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    .svc-page tbody th:last-child,
    .svc-page tbody td:last-child {
        border-bottom: none !important;
    }
    /* The first cell of each row is the "name" (Coverage, Type, etc.)
       — style as a card header so each card has a clear title */
    .svc-page tbody tr td:first-child,
    .svc-page tbody tr th:first-child {
        background: #16213e !important;
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;
        border-radius: 8px 8px 0 0 !important;
        border-bottom: 1px solid #16213e !important;
        padding: 12px 14px !important;
        letter-spacing: 0.01em;
    }
    /* Override the .svc-page strong color which would render as #16213e
       (same as the dark header bg) and make the cell heading invisible.
       The first cell uses <strong> to wrap the row name (e.g. "Term Life"). */
    .svc-page tbody tr td:first-child strong,
    .svc-page tbody tr th:first-child strong,
    .svc-page tbody tr td:first-child *,
    .svc-page tbody tr th:first-child * {
        color: #fff !important;
        background: transparent !important;
        font-weight: 700 !important;
    }
    /* Compact padding on subsequent cells */
    .svc-page tbody tr td,
    .svc-page tbody tr th {
        padding: 8px 14px !important;
    }
    /* For cells after the first, add a small left accent and
       slightly indent to differentiate from the header */
    .svc-page tbody tr td + td,
    .svc-page tbody tr th + td,
    .svc-page tbody tr td + th,
    .svc-page tbody tr th + th {
        color: #333 !important;
    }
}
@media (max-width: 480px) {
    .svc-page tbody th,
    .svc-page tbody td {
        font-size: 0.88rem !important;
    }
    .svc-page tbody tr td:first-child,
    .svc-page tbody tr th:first-child {
        font-size: 0.92rem !important;
    }
}


/* ============================================================
   Homepage mobile hero refinements (added 2026-06-15)
   ------------------------------------------------------------
   1. Trim the hero top/bottom padding so the H1, lede, and
      primary CTAs are visible above the fold on phones.
   2. Place the "Get My Free Quote" and phone number side-by-side
      in a 2-column grid (instead of stacking full-width).
   3. Keep the four trust callouts (4.8★ Google, A+ BBB, 30+
      Years, 5 min Quote) on a single row by tightening the gap
      and font size.
   4. Re-flow the six stat cards into a 2- or 3-column grid on
      mobile (instead of 1-per-line stacking).
   ============================================================ */
@media (max-width: 768px) {
    /* 1. Trim hero padding — saves ~80px above the fold */
    .hp-hero {
        padding: 80px 0 50px !important;
    }
    /* The H1 may also be slightly too big on small phones */
    .hp-hero h1 {
        font-size: 1.95rem !important;
        line-height: 1.15 !important;
        margin: 0 0 14px !important;
    }
    .hp-hero p.lede {
        font-size: 0.98rem !important;
        line-height: 1.5 !important;
        margin: 0 0 22px !important;
    }

    /* 2. Two CTAs side-by-side — short labels for the phone */
    .hp-hero-btns {
        display: grid !important;
        grid-template-columns: 1.4fr 1fr !important;
        gap: 10px !important;
        margin-bottom: 22px !important;
        flex-wrap: nowrap !important;
    }
    .hp-hero-btns a {
        justify-content: center !important;
        padding: 12px 14px !important;
        font-size: 0.92rem !important;
        gap: 6px !important;
        white-space: nowrap !important;
        text-align: center !important;
    }
    /* 3. Trust callouts in a single row — tighten gap and font */
    .hp-hero-trust {
        gap: 14px !important;
        font-size: 0.82rem !important;
        justify-content: space-between !important;
    }
    .hp-hero-trust .ti {
        gap: 4px !important;
        font-size: 0.82rem !important;
    }
    .hp-hero-trust .ti .num {
        font-size: 0.95rem !important;
    }
}
@media (max-width: 480px) {
    /* 1b. Even tighter hero on the smallest phones */
    .hp-hero {
        padding: 60px 0 40px !important;
    }
    .hp-hero h1 {
        font-size: 1.7rem !important;
    }
    .hp-hero p.lede {
        font-size: 0.95rem !important;
    }

    /* 3b. Trust callouts: use 4-column grid to force equal widths and
       prevent right-edge overflow at 375px. Each item gets 1/4 of the
       row, text-align center, font-size compact. */
    .hp-hero-trust {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
        font-size: 0.7rem !important;
        letter-spacing: -0.01em;
    }
    .hp-hero-trust .ti {
        justify-content: center !important;
        gap: 3px !important;
        font-size: 0.7rem !important;
        text-align: center !important;
    }
    .hp-hero-trust .ti .num {
        font-size: 0.82rem !important;
    }

    /* 4. Stats strip: 2 columns instead of 1 (so 6 cards become
       3 rows of 2 instead of 6 rows of 1) */
    .hp-stats {
        padding: 26px 0 !important;
    }
    .hp-stats .container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    .hp-stat .num {
        font-size: 1.85rem !important;
    }
    .hp-stat .lbl {
        font-size: 0.78rem !important;
    }
}
@media (max-width: 340px) {
    /* For very narrow phones (e.g. iPhone SE 1st gen 320px),
       allow the trust row to wrap to 2x2 instead of clipping. */
    .hp-hero-trust {
        flex-wrap: wrap !important;
        justify-content: center !important;
        row-gap: 8px !important;
    }
    .hp-hero-trust .ti {
        flex: 0 0 calc(50% - 5px) !important;
        justify-content: center !important;
    }
}


/* ============================================================
   HEADER ADDRESS BLOCK (added 2026-06-15)
   ------------------------------------------------------------
   Inserted between the logo and the nav on desktop. Sits in the
   center of the header, with a small map-pin icon and two neat
   lines (street + city/state/zip). Linked to Google Maps. Hidden
   on mobile (the mobile menu sheet and footer already show
   the address).
   ============================================================ */
.header-address {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto;            /* center between logo and nav */
    padding: 4px 14px;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    color: #16213e;
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.2s ease;
    white-space: nowrap;
}
.header-address:hover {
    color: #E31E24;
}
.header-address-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #E31E24;
    flex-shrink: 0;
}
.header-address-icon svg {
    display: block;
}
.header-address-text {
    display: inline-flex;
    flex-direction: column;
    font-size: 13px;
    font-weight: 500;
}
.header-address-line1 {
    color: #16213e;
    font-weight: 600;
}
.header-address-line2 {
    color: #4b5563;
    font-weight: 500;
}
.header-address:hover .header-address-line1,
.header-address:hover .header-address-line2 {
    color: #E31E24;
}

/* Address: hide on tablets (769-1024), show on desktop and mobile (≤768)
   On mobile we render it compactly between the logo and the hamburger. */
@media (min-width: 1025px) {
    .header-address { display: inline-flex !important; }
}
@media (max-width: 768px) {
    .header-address {
        display: inline-flex !important;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 8px;
        padding: 0;
        border: 0;
        gap: 6px;
        align-items: center;
        white-space: normal;
    }
    .header-address-icon { flex-shrink: 0; }
    .header-address-icon svg { width: 14px; height: 14px; }
    .header-address-text {
        font-size: 11px;
        line-height: 1.25;
        gap: 1px;
    }
    .header-address-line1,
    .header-address-line2 {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* ========================================
   MENU FIXES 2026-07-02
   ======================================== */

/* Fix 1: Desktop nav overflow — smaller font on narrow desktops */
@media (min-width: 981px) and (max-width: 1240px) {
    #top-menu > li > a {
        padding: 6px 6px !important;
        font-size: 10px !important;
    }
    .header-cta-btn {
        padding: 8px 12px !important;
        font-size: 11px !important;
    }
}

/* Fix 2: Business name above address, address icon inline with text (both viewports) */
.header-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    text-align: center;
}
.site-name-mobile {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #16213e;
    line-height: 1.2;
    margin: 0;
}
.header-address {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    font-size: 13px;
    line-height: 1.3;
    max-width: 100%;
}
.header-address-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.header-address-icon svg {
    width: 16px;
    height: 16px;
}
.header-address-text {
    display: inline-flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.3;
}
.header-address-line1,
.header-address-line2 {
    display: block;
}

@media (max-width: 480px) {
    .site-name-mobile {
        font-size: 14px;
    }
    .header-address {
        font-size: 12px;
        gap: 6px;
    }
    .header-info {
        padding-right: 60px;
    }
}

/* Header layout: logo | header-info | toggle (always) */
#main-header .container {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    min-height: 70px;
}
.logo_container {
    flex-shrink: 0;
}
.mobile-menu-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 0;
}

/* Fix 3: Three-bar hamburger icon */
.mobile-menu-toggle .menu-bar {
    display: block;
    width: 22px;
    height: 3px;
    background: #16213e;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Mobile hamburger: same look as desktop (high specificity to beat CRITICAL FIX) */
@media (max-width: 768px) {
    #masthead .mobile-menu-toggle,
    .site-header .mobile-menu-toggle,
    #main-header .mobile-menu-toggle,
    header .mobile-menu-toggle,
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 7px !important;
        padding: 0 !important;
        width: 44px;
        height: 44px;
    }
    #masthead .mobile-menu-toggle .menu-bar,
    .site-header .mobile-menu-toggle .menu-bar,
    #main-header .mobile-menu-toggle .menu-bar,
    header .mobile-menu-toggle .menu-bar,
    .mobile-menu-toggle .menu-bar {
        display: block !important;
        width: 22px;
        height: 3px;
        background: #16213e;
        border-radius: 2px;
    }
}

@media (max-width: 980px) {
    .mobile-menu-toggle .menu-icon { display: none !important; }
    .mobile-menu-toggle .menu-bar { display: block !important; }
}
/* Animate hamburger to X when open */
.mobile-menu-toggle[aria-expanded="true"] .menu-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.mobile-menu-toggle[aria-expanded="true"] .menu-bar:nth-child(2) {
    opacity: 0;
}
.mobile-menu-toggle[aria-expanded="true"] .menu-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}