@import 'base.css';
@import 'layout.css';
@import 'components.css';
@import 'top.css';
@import 'pages.css';

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

/* Header */
.site-header {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.header-logo img {
    height: 40px;
}

.header-menu-pc ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-menu-pc li {
    margin-left: 20px;
}

.header-menu-pc a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    transition: color 0.3s;
}

.header-menu-pc a:hover {
    color: #d35400;
    /* Coffee color */
}

/* Mobile Menu */
.mobileonly {
    display: none;
}

@media (max-width: 768px) {
    .pconly {
        display: none;
    }

    .mobileonly {
        display: block;
    }

    /* Mobile Header Layout */
    .header-logo {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .hamburger {
        border: none;
        cursor: pointer;
        padding: 5px;
    }

    .hamburger img {
        width: 30px;
        height: auto;
    }

    /* Mobile Menu Drawer */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: -100%;
        /* Hidden off-screen */
        width: 80%;
        max-width: 300px;
        height: 100%;
        background-color: #fff;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
        z-index: 2000;
        transition: right 0.3s ease;
        padding: 20px;
        display: flex;
        flex-direction: column;
    }

    .mobile-menu.active {
        right: 0;
        /* Slide in */
    }

    .close-menu {
        align-self: flex-end;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        margin-bottom: 20px;
    }

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

    .mobile-menu li {
        margin-bottom: 15px;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }

    .mobile-menu a {
        text-decoration: none;
        color: #333;
        font-weight: bold;
        display: block;
    }

    /* Mobile Footer Menu: 3 columns */
    footer .footer-menu ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        text-align: center;
    }

    footer .footer-menu li {
        margin: 0;
        /* Reset margin */
        font-size: 0.9em;
    }
}

/* Contact Page Links */
.links-section {
    margin-bottom: 40px;
}

.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
    background: #fff;
    height: 100%;
}

.link-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.link-image-container {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    overflow: hidden;
}

.link-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Fallback for missing logos */
.link-placeholder {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #7f8c8d;
    font-size: 0.9em;
    text-align: center;
    padding: 5px;
}

/* Ensure hidden items are visible if we want 3 columns of ALL items, 
       but if user wants to keep some hidden, we keep .mobile-hide-footer.
       User said "header menu links match", and footer "3 per row".
       PC footer has more items. If we keep .mobile-hide-footer, the grid might have gaps or fewer items.
       Let's assume user wants to show them or just layout the visible ones.
       If we want to show all to match PC structure usually implies showing all. 
       Let's check parts/footer.php content again. It has .mobile-hide-footer class on some items.
       I will un-hide them for consistent layout if that seems to be the intent, 
       OR just style the visible ones. 
       "1行で3つずつ表示して" implies a grid.
       Let's override the display:none for .mobile-hide-footer if it makes sense, 
       but user didn't explicitly say "show hidden items".
       However, a grid of 3 looks best with more items.
       Let's just apply the grid to the ul. The hidden items won't take up space in a grid usually if display:none.
    
}*/

/* Contact Page */
.contact-section,
.related-section,
.links-section {
    margin-bottom: 50px;
    text-align: left;
}

.contact-section h2,
.related-section h2,
.links-section h2 {
    font-size: 1.5em;
    margin-bottom: 20px;
    border-left: 5px solid #d35400;
    padding-left: 10px;
    display: inline-block;
    /* or block if we want it to take full width but border only on left. 
       inline-block with text-align: left on parent works fine for the "bar" look. */
}

.sns-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.sns-btn {
    display: flex;
    align-items: center;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    font-weight: bold;
    min-width: 200px;
    justify-content: center;
}

.sns-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.sns-btn img {
    width: 30px;
    height: 30px;
    margin-right: 15px;
    object-fit: contain;
}

.related-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 600px;
}

.related-list li {
    margin-bottom: 15px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 5px;
}

.related-list a {
    text-decoration: none;
    color: #333;
    font-size: 1.1em;
    transition: color 0.3s;
    display: block;
}

.related-list a:hover {
    color: #d35400;
}

/* Hero Section */
.hero {
    /* Initial background will be set by JS, but keep a fallback or default here if needed */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../image/hero_bg.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 100px 20px;
    margin-bottom: 40px;
    transition: background-image 1s ease-in-out;
    /* Smooth transition */
}

.hero h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

/* Stats Section */
.stats {
    text-align: center;
    margin-bottom: 40px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.stats-number {
    font-size: 3em;
    font-weight: bold;
    color: #d35400;
}

/* Map Section */
.map-section {
    margin-bottom: 40px;
}

.map-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Gallery Section */
.gallery-section {
    margin-bottom: 40px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columns */
    gap: 20px;
}

.gallery-grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    /* Responsive */
    gap: 20px;
}

.gallery-item img {
    width: 100%;
    height: 250px;
    /* Slightly taller for fewer columns */
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s;
    cursor: pointer;
}

.gallery-item img:hover {
    transform: scale(1.05);
}



/* View More Button */
.view-more-container {
    text-align: center;
    margin-top: 30px;
}

.view-more-btn {
    display: inline-block;
    padding: 10px 30px;
    background-color: #d35400;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.2s;
}

.view-more-btn:hover {
    background-color: #e67e22;
    transform: translateY(-2px);
}

/* Page Hero (shared for Gallery, History, Blog, Contact etc) */
.gallery-hero,
.history-hero,
.page-hero {
    text-align: center;
    padding: 50px 20px;
    background-color: #fff;
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
}

.gallery-hero h1,
.history-hero h1,
.page-hero h1 {
    font-size: 2em;
    margin-bottom: 10px;
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Fallback */
    height: 100dvh;
    /* Modern mobile browsers */
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.lightbox.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.lightbox img {
    max-width: 90%;
    max-height: 80vh;
    border: 2px solid #fff;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    object-fit: contain;
    /* Ensure image aspect ratio is preserved */
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.lightbox-close:hover {
    color: #d35400;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Footer */
footer {
    background-color: #333;
    color: #eee;
    padding: 40px 0;
}

.footer-menu ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.footer-menu li {
    margin: 0 15px;
}

.footer-menu a {
    color: #eee;
    text-decoration: none;
}

.footer-bottom {
    text-align: center;
}

.copyright {
    margin-top: 10px;
    font-size: 0.9em;
    color: #aaa;
}

/* Visitor Counter */
.visitor-counter {
    margin-top: 20px;
    font-size: 0.9em;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
}

.visitor-counter span {
    font-weight: bold;
    font-size: 1.2em;
    color: #ffd700;
    /* Gold color for the number */
    margin: 0 2px;
}