/* 
 * Simple Standard Header CSS
 * Clean and maintainable implementation
 * Overrides existing header styles
 */

/* Hide original header elements - using high specificity instead of !important */
body #header, 
body #belt, 
body #hd_top, 
body #menu_toggle, 
body .navBtn {
    display: none;
}

/* Header Container - using high specificity */
body .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: #fff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 769px;
    margin: 0 auto;
    padding: 0 15px;
    height: 79px;
}

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

.logo img {
    height: 50px;
    width: auto;
}

/* Header Right Section */
.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cta-button {
    flex-shrink: 0;
}

.cta-button img {
    height: 45px;
    width: auto;
}

/* Navigation Toggle Button */
.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #f5f5f5;
    border: none;
    cursor: pointer;
    padding: 10px;
    gap: 5px;
    border-radius: 4px;
}

.nav-toggle span {
    width: 30px;
    height: 3px;
    background: #333;
    transition: all 0.3s ease;
    border-radius: 1px;
}

/* Hover effect for navigation toggle */
.nav-toggle:hover {
    background: #eeeeee;
}

.nav-toggle:active {
    background: #e8e8e8;
}

/* Active state for hamburger menu */
.nav-open .nav-toggle span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.nav-open .nav-toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Drawer Menu */
.drawer-menu {
    position: fixed;
    top: 79px;
    right: -100%;
    width: 300px;
    height: calc(100vh - 79px);
    background: #f5f5f5;
    transition: right 0.3s ease;
    overflow-y: auto;
    border-left: 1px solid #ddd;
}

.nav-open .drawer-menu {
    right: 0;
}

.menu-content {
    padding: 20px 0;
}

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

.menu-list li {
    border-bottom: 1px solid #e0e0e0;
}


.menu-list li a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.menu-list li a:hover {
    background-color: #e8e8e8;
}

.menu-list li img {
    max-height: 30px;
    width: auto;
}

/* Size adjustments for logo images in drawer menu */
.menu-list li:first-child,
.menu-list li:nth-child(8) {
    text-align: center;
}

.menu-list li:first-child img,
.menu-list li:nth-child(8) img {
    max-width: 95%;
    max-height: 90px;
    width: auto;
    height: auto;
}

/* Overlay */
.nav-overlay {
    display: none;
    position: fixed;
    top: 79px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

.nav-open .nav-overlay {
    display: block;
}

/* Desktop Styles */
@media (min-width: 769px) {
    .nav-toggle {
        display: none;
    }
    
    .drawer-menu {
        display: none;
    }
    
    .header-right {
        gap: 20px;
    }
}

/* Fix 770px breakpoint issues - extend desktop styles to cover 768px-770px range */
@media (min-width: 768px) and (max-width: 770px) {
    /* Apply desktop-style centering for image-gallery */
    #index #lead ul.image-gallery {
        margin: 0 auto;
        max-width: 769px;
    }
    
    /* Apply desktop-style centering for sec01 headers */
    #index #sec01 h2,
    #index #sec01 h3 {
        text-align: center;
    }
    
    #index #sec01 h2 img,
    #index #sec01 h3 img {
        width: auto;
        max-width: 100%;
        height: auto;
    }
}

/* Mobile CTA adjustments */
@media (max-width: 767px) {
    body#index .pc-container main section#lead .cta-section {
        text-align: center;
        clear: both;
    }
    
    body#index .pc-container main section#lead .cta-section img {
        width: 95%;
        max-width: 370px;
    }
    
    body#index .pc-container main section#lead .cta-section p.notice {
        text-align: center;
    }
}

/* Mobile Adjustments */
@media (max-width: 480px) {
    .header-content {
        padding: 0 10px;
        height: 70px;
    }
    
    .logo img {
        height: 35px;
    }
    
    .cta-button img {
        height: 30px;
    }
    
    .drawer-menu {
        top: 70px;
        height: calc(100vh - 70px);
        width: 280px;
    }
    
    .nav-overlay {
        top: 70px;
    }
}

/* iPhone SE and very small screens */
@media (max-width: 375px) {
    .header-content {
        padding: 0 8px;
        gap: 8px;
    }
    
    .header-right {
        gap: 8px;
        flex-shrink: 0;
    }
    
    .logo {
        flex-shrink: 1;
        min-width: 0;
    }
    
    .logo img {
        height: 30px;
    }
    
    .cta-button img {
        height: 26px;
    }
    
    .nav-toggle {
        width: 40px;
        height: 40px;
        padding: 6px;
    }
    
    .nav-toggle span {
        width: 24px;
        height: 2px;
    }
}

/* Body padding to account for fixed header - using higher specificity */
html body {
    padding-top: 79px;
}

@media (max-width: 480px) {
    html body {
        padding-top: 70px;
    }
}

/* Navigation state class */
.nav-open {
    overflow: hidden;
}

/* Fix PC/Tablet content alignment - using CSS specificity */
@media screen and (min-width: 768px) {
    body .pc-container {
        max-width: 769px;
        margin: 0 auto;
        width: 100%;
    }
    
    body main {
        max-width: 769px;
        margin: 0 auto;
        width: 100%;
    }
    
    /* Ensure all main sections are properly centered */
    body main > * {
        max-width: 769px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Fix specific sections that might be misaligned */
    body #key, 
    body #lead, 
    body section {
        max-width: 769px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Fix footer alignment */
    body footer {
        max-width: 769px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Fix footer content alignment */
    body footer .footer-content,
    body footer > * {
        max-width: 769px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
    
    /* Fix footer text alignment - override left-aligned defaults */
    body footer .agency-info,
    body footer .contact-info,
    body footer .contact-info p,
    body footer .footer-links,
    body footer .legal-info,
    body footer .legal-info p,
    body footer .insurance-company,
    body footer .insurance-company p,
    body footer p,
    body footer address,
    body footer nav {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 769px;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
    
    /* Fix footer image alignment */
    body footer .footer-image {
        text-align: center;
    }
    
    /* Override existing margin settings */
    body footer ul {
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Additional tablet-specific fixes */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    body .pc-container {
        padding: 0 20px;
    }
    
    body main {
        padding: 0 20px;
    }
}

/* Large desktop fixes */
@media screen and (min-width: 1025px) {
    body .pc-container {
        padding: 0;
    }
    
    body main {
        padding: 0;
    }
}

/* Center alignment for common content containers - using CSS specificity */
@media screen and (min-width: 768px) {
    body .block, 
    body .clearfix, 
    body article, 
    body section, 
    body div[id],
    body footer {
        max-width: 769px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Fix specific #lead section alignment */
    body #lead {
        max-width: 769px;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }
    
    body #lead .icon, 
    body #lead .cta-section, 
    body #lead .image-gallery,
    body #lead ul.icon,
    body #lead ul.list,
    body #lead ul.image-gallery {
        max-width: 769px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
    
    /* Fix icon list alignment - using higher specificity */
    body #lead ul.icon li {
        float: left;
        width: 33.3333334%;
        text-align: center;
    }
    
    /* Fix image gallery alignment */
    body #lead .image-gallery,
    body #lead ul.list {
        margin: 0 auto;
    }
    
    body #lead .image-gallery li,
    body #lead ul.list li {
        margin-bottom: 6px;
    }
    
    /* Override existing mobile-specific margins using specificity */
    @media screen and (min-width: 768px) {
        body #lead ul.list {
            margin: 0 auto; /* Override margin: 0 4.2vw; */
        }
    }
    
    /* CTA section - consolidated styles */
    body#index .pc-container main section#lead .cta-section {
        text-align: center;
        margin: 0 auto;
        clear: both;
        display: block;
        width: 100%;
    }
    
    body#index .pc-container main section#lead .cta-section img {
        width: 90%;
        max-width: 350px;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    body#index .pc-container main section#lead .cta-section p.notice {
        font-weight: bold;
    }
    
    /* Fix any remaining left-aligned content */
    div, p, ul, ol, dl {
        box-sizing: border-box;
    }
}

/* Fix hero section layout - using CSS specificity */
body #key {
    position: relative;
    overflow: hidden;
    z-index: 10;
    padding-top: 0;
    margin-top: 0;
}

body #key #logo {
    position: absolute;
    left: 0;
    top: -5px; /* Moved above header level */
    z-index: 20;
}

/* Ensure hero image displays properly */
.hero-image {
    position: relative;
    z-index: 10;
    margin-top: -20px; /* Pull image up to overlap with logo */
}

.hero-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile adjustments for hero section and header */
@media (max-width: 480px) {
    body .header-content {
        height: 70px;
    }
    
    /* Adjust header elements for smaller mobile screens */
    body .logo img {
        height: 42px;
    }
    
    body .cta-button img {
        height: 38px;
    }
    
    body .nav-toggle {
        width: 45px;
        height: 45px;
        padding: 8px;
        background: #f5f5f5;
        border-radius: 4px;
    }
    
    body .nav-toggle span {
        width: 26px;
        height: 2.5px;
    }
    
    body #key #logo {
        top: -4px; /* Moved above header on mobile */
    }
    
    body .hero-image {
        margin-top: -15px; /* Less overlap on mobile */
    }
    
    /* Small mobile CTA adjustments */
    body#index .pc-container main section#lead .cta-section {
        text-align: center;
        clear: both;
    }
    
    body#index .pc-container main section#lead .cta-section img {
        width: 95%;
        max-width: 320px;
    }
    
    body#index .pc-container main section#lead .cta-section p.notice {
        text-align: center;
    }
}

/* Standardize all CTA button sizes to match the first one */
html body#index .pc-container main p.bnr a.btn_link img {
    width: 90%;
    max-width: 350px;
    height: auto;
    display: block;
    margin: 0 auto;
}

html body#index .pc-container main p.bnr {
    text-align: center;
    margin: 0 auto;
}

/* Override inline width="100%" attributes */
html body#index .pc-container main p.bnr a.btn_link img[width="100%"] {
    width: 90%;
    max-width: 350px;
}

/* Mobile adjustments for other CTA buttons */
@media (max-width: 768px) {
    html body#index .pc-container main p.bnr a.btn_link img {
        width: 95%;
        max-width: 370px;
    }
    
    html body#index .pc-container main p.bnr a.btn_link img[width="100%"] {
        width: 95%;
        max-width: 370px;
    }
}

@media (max-width: 480px) {
    html body#index .pc-container main p.bnr a.btn_link img {
        width: 95%;
        max-width: 320px;
    }
    
    html body#index .pc-container main p.bnr a.btn_link img[width="100%"] {
        width: 95%;
        max-width: 320px;
    }
}

/* Fix sec01 responsive images */
#index #sec01 h2 img,
#index #sec01 h3 img,
#index #sec01 h4 img,
#index #sec01 .box .item dl dt img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Fix image-gallery responsive images */
#index #lead ul.image-gallery li img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Apply mobile margin to image-gallery like ul.list */
#index #lead ul.image-gallery {
    margin: 0 4.2vw;
}

#index #lead ul.image-gallery li {
    margin-bottom: 6px;
}

/* Fix mobile footer text alignment */
@media (max-width: 767px) {
    body footer .agency-info,
    body footer .contact-info,
    body footer .contact-info p,
    body footer .footer-links,
    body footer .legal-info,
    body footer .legal-info p,
    body footer .insurance-company,
    body footer .insurance-company p,
    body footer p,
    body footer address,
    body footer nav {
        text-align: center;
    }
    
    body footer .footer-image {
        text-align: center;
    }
    
    /* Override existing footer styles */
    body footer .footer-content {
        padding: 0 15px;
        text-align: center;
    }
}