/* ========================================
   Header Navigation Styles
   ========================================
   Note: Navigation styles for the header component.
   Uses flexbox for layout and CSS variables for theming.
*/

/* Main Navigation Container */
.main-nav {
    --nav-link-padding-y: 0.5rem;
    --nav-link-padding-x: 1rem;
    --nav-link-color: var(--color-gray-800, #333333);
    --nav-link-hover-color: var(--color-primary, #0066cc);
    --nav-link-hover-bg: rgba(0, 102, 204, 0.05);
    --nav-link-active-color: var(--color-primary, #0066cc);
    --nav-link-active-bg: rgba(0, 102, 204, 0.05);
    --nav-link-active-border: var(--color-primary, #0066cc);
    --nav-link-transition: color 0.3s ease, background-color 0.3s ease;
    
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Navigation List */
.main-nav > ul {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Navigation Items */
.main-nav > ul > li {
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Navigation Links */
.main-nav > ul > li > a {
    text-decoration: none;
    font-weight: 500;
    height: 100%;
}

/* Active State */
.main-nav > ul > li > a.active {
    color: var(--nav-link-active-color);
    background-color: var(--nav-link-active-bg);
}

/* Active Link Indicator */
.main-nav > ul > li > a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--nav-link-padding-x);
    right: var(--nav-link-padding-x);
    height: 0.2rem;
    background-color: var(--nav-link-active-border);
    border-radius: 0.1rem;
}
/* 
 * ハンバーガーメニュー関連スタイルは hamburger-menu.css に移動しました
 * このファイルではハンバーガーメニュー関連のスタイルは削除し、
 * 他のヘッダー関連スタイルのみを保持します
 */

/* ========================================
   Tablet Styles (1201px - 1439px)
   ======================================== */
@media (min-width: 1201px) and (max-width: 1439px) {
    .main-nav {
        --nav-link-padding-x: 0.75rem;
        --nav-link-padding-y: 0.4rem;
    }
    
    .main-nav > ul {
        gap: var(--spacing-md, 1.5rem);
    }
    
    .main-nav > ul > li > a {
        font-size: var(--font-size-sm, 0.875rem);
    }
}

/* ========================================
   Medium Width (769px - 1023px)
   ======================================== */
@media (max-width: 1023px) {
    .header-container .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .main-nav {
        --nav-link-padding-x: 0.5rem;
        --nav-link-padding-y: 0.3rem;
    }
    
    .main-nav > ul {
        gap: clamp(
            var(--spacing-xs, 0.5rem), 
            0.9vw, 
            var(--spacing-sm, 1rem)
        );
    }
    
    .main-nav > ul > li > a {
        font-size: clamp(
            0.85rem, 
            0.8rem + 0.2vw, 
            0.95rem
        );
    }
}

/* ========================================
   Mobile Styles (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {
    .main-nav {
        --nav-link-padding-x: 0.5rem;
        --nav-link-padding-y: 0.3rem;
    }
    
    /* Hide desktop navigation on mobile */
    .main-nav.desktop-nav { 
        display: none; 
    }
    
    /* Mobile menu toggle button */
    .hamburger {
        --hamburger-bg: var(--white, #ffffff);
        --hamburger-border-color: var(--primary, #1976D2);
        --hamburger-border-width: 2px;
        --hamburger-size: 2.5rem;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: var(--hamburger-bg);
        border: var(--hamburger-border-width) solid var(--hamburger-border-color);
        border-radius: var(--border-radius-sm, 0.25rem);
        width: var(--hamburger-size);
        height: var(--hamburger-size);
        padding: 0.5rem;
        cursor: pointer;
    }
    
    .hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--hamburger-border-color);
        margin: 2px 0;
        transition: all 0.3s ease;
    }
}

/* ========================================
   Mobile Navigation Styles
   ======================================== */
/* Mobile navigation */
.mobile-nav {
    position: var(--mobile-nav-position, fixed);
    top: var(--mobile-nav-top, 0);
    right: var(--mobile-nav-right, -100%);
    width: var(--mobile-nav-width, 80%);
    max-width: var(--mobile-nav-max-width, 20rem);
    height: var(--mobile-nav-height, 100vh);
    background: var(--mobile-nav-bg, var(--white, #ffffff));
    box-shadow: var(--mobile-nav-shadow, -2px 0 8px rgba(0, 0, 0, 0.1));
    z-index: var(--mobile-nav-z-index, var(--z-50, 999));
    overflow-y: var(--mobile-nav-overflow-y, auto);
    overflow-x: var(--mobile-nav-overflow-x, hidden);
}

/* Active state for mobile navigation */
.mobile-nav.active {
    right: var(--mobile-nav-active-right, 0);
    box-shadow: var(--mobile-nav-active-shadow, -4px 0 15px rgba(0, 0, 0, 0.1));
}


/* Mobile navigation list */
.mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav li {
    border-bottom: var(--mobile-nav-item-border-width, 1px) solid 
                  var(--mobile-nav-item-border-color, #f0f0f0);
    background: var(--mobile-nav-item-bg, transparent);
}

.mobile-nav li:last-child {
    border-bottom: var(--mobile-nav-item-last-border, none);
}

/* Mobile navigation close button */
.mobile-nav-close {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mobile-nav-close-color, var(--text-color, #333333));
    font-size: var(--mobile-nav-close-font-size, 1.5rem);
    line-height: 1;
}

/* Mobile navigation link states */
.mobile-nav a:hover,
.mobile-nav a:focus,
.mobile-nav a.active {
    color: var(--mobile-nav-link-hover-color, var(--primary-color, #1976d2));
    background-color: var(--mobile-nav-link-hover-bg, #f8f9fa);
    text-decoration: none;
}

/* ========================================
   Navigation Menu Styles
   ======================================== */
.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--nav-menu-gap, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu > li {
    position: relative;
    margin: 0;
    padding: 0;
}

/* Navigation Links */
.nav-menu a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--nav-link-color, var(--gray-800, #333));
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* Navigation Link States */
.nav-menu a:hover,
.nav-menu a:focus,
.nav-menu a.active {
    color: var(--nav-link-hover-color, var(--primary, #1976D2));
    background-color: var(--nav-link-hover-bg, rgba(25, 118, 210, 0.05));
    text-decoration: none;
}

/* ========================================
   Page Content Margin Adjustments
   ======================================== */
body {
    padding-top: var(--body-padding-top, var(--header-padding-top, 4rem)) !important;
}

@media (max-width: 768px) {
    body {
        padding-top: var(--body-padding-top-mobile, var(--header-padding-top-mobile, 3.5rem)) !important;
    }
}

/* ========================================
   Z-index Management
   ======================================== */
.site-header {
    z-index: var(--z-site-header, var(--z-50, 1000)) !important;
}

.mobile-nav {
    z-index: var(--z-mobile-nav, var(--z-40, 999)) !important;
}


/* ========================================
   Aggregated Header Styles
   ======================================== */

/* Container styles (combining .header-container and .header-content) */
.header-container,
.header-content {
    position: relative;
    max-width: var(--header-container-max-width, var(--container-max-width, 75rem));
    margin: var(--header-container-margin, 0 auto);
    height: var(--header-container-height, 100%);
    display: var(--header-container-display, flex);
    align-items: var(--header-container-align-items, center) !important;
    justify-content: var(--header-container-justify-content, space-between) !important;
    padding: var(--header-container-padding-y, 0) 
             var(--header-container-padding-x, var(--container-padding-x, 1rem)) !important;
}

/* Logo styles (covers existing .header-logo) */
.logo {
    display: flex;
    align-items: center;
}
.logo-icon {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 7.5rem;
    width: auto;
}
/* Backward compatibility classes */
.logo-text { 
    gap: var(--logo-gap, 0.75rem);
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    height: 3rem;
    width: auto;
}
@media (max-width: 480px) {
    .logo-text {
        display: none;
    }
}
.desktop-buttons { 
    display: var(--desktop-buttons-display, flex) !important; 
    align-items: var(--desktop-buttons-align-items, center) !important; 
    gap: var(--desktop-buttons-gap, 0.9375rem) !important;
    justify-content: var(--desktop-buttons-justify-content, flex-start) !important;
    flex-wrap: var(--desktop-buttons-flex-wrap, nowrap) !important;
    margin: var(--desktop-buttons-margin, 0) !important;
    padding: var(--desktop-buttons-padding, 0) !important;
}

/* Header Row Wrapper */
.header-nav {
    display: var(--header-nav-display, flex);
    justify-content: var(--header-nav-justify-content, space-between);
    align-items: var(--header-nav-align-items, center);
    padding: var(--header-nav-padding-y, 1.25rem) var(--header-nav-padding-x, 0);
    gap: var(--header-nav-gap, 0.75rem) !important;
    width: var(--header-nav-width, 100%) !important;
    max-width: var(--header-nav-max-width, 100%) !important;
    margin: var(--header-nav-margin, 0) !important;
    position: var(--header-nav-position, relative) !important;
}

/* Price Simulator and LINE Buttons (in header) */
.price-simulator-btn {
    display: var(--price-simulator-btn-display, inline-flex) !important;
    align-items: var(--price-simulator-btn-align-items, center) !important;
    justify-content: var(--price-simulator-btn-justify-content, center) !important;
    gap: var(--price-simulator-btn-icon-gap, 0.5rem) !important;
    background: var(--price-simulator-btn-bg, var(--orange-500, #ff6b00)) !important;
    color: var(--price-simulator-btn-color, var(--white, #fff)) !important;
    padding: var(--price-simulator-btn-padding-y, 0.625rem) var(--price-simulator-btn-padding-x, 1.25rem) !important;
    border-radius: var(--price-simulator-btn-border-radius, 30px) !important;
    font-size: var(--price-simulator-btn-font-size, 0.95rem) !important;
    font-weight: var(--price-simulator-btn-font-weight, 600) !important;
    line-height: var(--price-simulator-btn-line-height, 1.5) !important;
    text-decoration: var(--price-simulator-btn-text-decoration, none) !important;
    text-align: var(--price-simulator-btn-text-align, center) !important;
    white-space: var(--price-simulator-btn-white-space, nowrap) !important;
    box-shadow: var(--price-simulator-btn-shadow, 0 2px 10px rgba(255, 107, 0, 0.2)) !important;
    border: var(--price-simulator-btn-border, none) !important;
    cursor: var(--price-simulator-btn-cursor, pointer) !important;
    position: var(--price-simulator-btn-position, relative) !important;
    overflow: var(--price-simulator-btn-overflow, visible) !important;
}

.price-simulator-btn:hover {
    background: var(--price-simulator-btn-hover-bg, var(--orange-600, #e65c00)) !important;
    color: var(--price-simulator-btn-hover-color, var(--price-simulator-btn-color, var(--white, #fff))) !important;
    transform: var(--price-simulator-btn-hover-transform, translateY(-2px)) !important;
    box-shadow: var(--price-simulator-btn-hover-shadow, 0 4px 20px rgba(255, 107, 0, 0.3)) !important;
    text-decoration: var(--price-simulator-btn-hover-text-decoration, none) !important;
}

.price-simulator-btn i {
    font-size: var(--price-simulator-btn-icon-size, 1.1rem) !important;
    color: var(--price-simulator-btn-icon-color, inherit) !important;
    display: var(--price-simulator-btn-icon-display, inline-flex) !important;
    align-items: var(--price-simulator-btn-icon-align, center) !important;
}

.header-line-button {
    display: var(--header-line-btn-display, inline-flex) !important;
    align-items: var(--header-line-btn-align-items, center) !important;
    justify-content: var(--header-line-btn-justify-content, center) !important;
    gap: var(--header-line-btn-icon-gap, 0.5rem) !important;
    background: var(--header-line-btn-bg, var(--green-600, #00B900)) !important;
    color: var(--header-line-btn-color, var(--white, #fff)) !important;
    padding: var(--header-line-btn-padding-y, 0.625rem) var(--header-line-btn-padding-x, 1.25rem) !important;
    border-radius: var(--header-line-btn-border-radius, 25px) !important;
    border: var(--header-line-btn-border, none) !important;
    text-decoration: var(--header-line-btn-text-decoration, none) !important;
    font-weight: var(--header-line-btn-font-weight, 700) !important;
    font-size: var(--header-line-btn-font-size, 0.95rem) !important;
    line-height: var(--header-line-btn-line-height, 1.5) !important;
    white-space: var(--header-line-btn-white-space, nowrap) !important;
    box-shadow: var(--header-line-btn-shadow, none) !important;
    cursor: var(--header-line-btn-cursor, pointer) !important;
    position: var(--header-line-btn-position, relative) !important;
    overflow: var(--header-line-btn-overflow, visible) !important;
}

.header-line-button:hover { 
    background: var(--header-line-btn-hover-bg, var(--green-700, #00A000)); 
    color: var(--header-line-btn-hover-color, var(--header-line-btn-color, var(--white, #fff)));
    transform: var(--header-line-btn-hover-transform, translateY(-2px)); 
    box-shadow: var(--header-line-btn-hover-shadow, 0 5px 15px rgba(0, 185, 0, 0.3));
    text-decoration: var(--header-line-btn-hover-text-decoration, none) !important;
}

.header-line-button i { 
    font-size: var(--header-line-btn-icon-size, 1.2rem) !important;
    color: var(--header-line-btn-icon-color, inherit) !important;
    display: var(--header-line-btn-icon-display, inline-flex) !important;
    align-items: var(--header-line-btn-icon-align, center) !important;
}

/* Hamburger Menu (matching existing class names) */
.hamburger-menu {
    display: var(--hamburger-display, flex) !important;
    flex-direction: var(--hamburger-flex-direction, column) !important;
    background: var(--hamburger-bg, rgba(255, 255, 255, 0.9)) !important;
    border: var(--hamburger-border, 1px solid var(--gray-300, #ddd)) !important;
    border-radius: var(--hamburger-border-radius, 4px) !important;
    cursor: var(--hamburger-cursor, pointer) !important;
    padding: var(--hamburger-padding, 0.5rem) !important;
    gap: var(--hamburger-gap, 0.25rem) !important;
    width: var(--hamburger-width, auto) !important;
    height: var(--hamburger-height, auto) !important;
    align-items: var(--hamburger-align-items, center) !important;
    justify-content: var(--hamburger-justify-content, center) !important;
    position: var(--hamburger-position, relative) !important;
    z-index: var(--hamburger-z-index, 1000) !important;
}

.hamburger-menu:hover { 
    background: var(--hamburger-hover-bg, var(--gray-100, #f5f5f5)) !important; 
    border-color: var(--hamburger-hover-border-color, var(--gray-500, #999)) !important;
    transform: var(--hamburger-hover-transform, none) !important;
}

.hamburger-menu span { 
    display: var(--hamburger-line-display, block) !important;
    width: var(--hamburger-line-width, 1.5625rem) !important; 
    height: var(--hamburger-line-height, 0.1875rem) !important; 
    background: var(--hamburger-line-bg, var(--black, #000)) !important; 
    border-radius: var(--hamburger-line-border-radius, 2px) !important; 
    box-shadow: var(--hamburger-line-shadow, 0 1px 3px rgba(0, 0, 0, 0.2)) !important;
    margin: var(--hamburger-line-margin, 0.125rem 0) !important;
    position: var(--hamburger-line-position, relative) !important;
}

.hamburger-menu.active span:nth-child(1) { 
    transform: var(--hamburger-active-line1-transform, rotate(45deg) translate(0.375rem, 0.375rem)) !important;
    transform-origin: var(--hamburger-active-line1-transform-origin, center) !important;
    background: var(--hamburger-active-line-bg, var(--hamburger-line-bg, var(--black, #000))) !important;
}

.hamburger-menu.active span:nth-child(2) { 
    opacity: var(--hamburger-active-line2-opacity, 0) !important;
    visibility: var(--hamburger-active-line2-visibility, hidden) !important;
    transform: var(--hamburger-active-line2-transform, scaleX(0)) !important;
}

.hamburger-menu.active span:nth-child(3) { 
    transform: var(--hamburger-active-line3-transform, rotate(-45deg) translate(0.375rem, -0.375rem)) !important;
    transform-origin: var(--hamburger-active-line3-transform-origin, center) !important;
    background: var(--hamburger-active-line-bg, var(--hamburger-line-bg, var(--black, #000))) !important;
}



.main-nav a:hover,
.main-nav a:focus,
.mobile-nav a:hover,
.mobile-nav a:focus { 
    color: var(--mobile-nav-link-hover-color, var(--blue-600, #0066cc));
}

/* Mobile Button Widths (consolidated from responsive) */
@media (max-width: 768px) {
    .mobile-buttons {
        width: var(--mobile-buttons-width, 100%);
        display: var(--mobile-buttons-display, flex);
        flex-direction: var(--mobile-buttons-flex-direction, column);
        gap: var(--mobile-buttons-gap, 1rem) !important;
        margin: var(--mobile-buttons-margin, 1.5rem 0) !important;
        padding: var(--mobile-buttons-padding, 0 1.5rem) !important;
    }
    
    .mobile-buttons .price-simulator-btn,
    .mobile-buttons .header-line-button { 
        width: var(--mobile-button-width, 100%) !important;
        margin: var(--mobile-button-margin, 0) !important;
        justify-content: var(--mobile-button-justify-content, center) !important;
    }
}

/* CTA Button */
.desktop-nav a.header-cta-button {
    background: var(--cta-button-bg, var(--green-600, #00B900));
    color: var(--cta-button-color, var(--white, #fff));
    padding: var(--cta-button-padding-y, 0.625rem) var(--cta-button-padding-x, 1.5rem);
    border-radius: var(--cta-button-border-radius, 30px);
    font-size: 1rem;
    font-weight: var(--cta-button-font-weight, 600);
    line-height: var(--cta-button-line-height, 1.5);
    text-align: var(--cta-button-text-align, center);
    text-decoration: none;
    white-space: var(--cta-button-white-space, nowrap);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cta-button-icon-gap, 0.5rem);
    box-shadow: var(--cta-button-shadow, 0 2px 10px rgba(0, 185, 0, 0.2));
    height: 3rem;
}

.desktop-nav a.header-cta-button:hover,
.desktop-nav a.header-cta-button:focus {
    background: var(--cta-button-hover-bg, var(--green-700, #00A000));
    color: var(--cta-button-hover-color, var(--white, #fff));
    transform: var(--cta-button-hover-transform, translateY(-2px));
    box-shadow: var(--cta-button-hover-shadow, 0 4px 15px rgba(0, 160, 0, 0.3));
    text-decoration: none;
}

/* CTA Button Icon */
.desktop-nav a.header-cta-button i {
    font-size: var(--cta-button-icon-size, 1.2rem);
    color: var(--cta-button-icon-color, inherit);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}