/*
 * Theme Name: KHAC wordpress Theme
 * Theme URI: https://khac.club/
 * Author: KHAC
 * Author URI: https://khac.club/
 * Description: KHAC wordpress Theme
 * Version: 1.0
 */

@import url('./assets/css/reset.css');
@import url('./assets/css/page-content.css');

.site-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	padding: 0 2rem;
    transition: background 0.3s, box-shadow 0.3s;
    height: 60px;
    z-index: 20080410;

    .site-nav-toggle {
        display: none;
    }

    .site-nav-toggle-checkbox {
        display: none;
    }

    @media (max-width: 600px) {
        padding: 0 1rem;
        height: 45px;

        .site-nav-toggle {
            display: block;
            width: 25px;
            height: 30px;
            position: relative;
            cursor: pointer;
            transition: transform 0.3s;
            z-index: 1001;

            span {
                position: absolute;
                left: 0;
                width: 100%;
                height: 3px;
                background: white;
                border-radius: 2px;
                transition: transform 0.3s, top 0.3s, background 0.3s;

                &:nth-child(1) {
                    top: 6px;
                }

                &:nth-child(2) {
                    top: 14px;
                }

                &:nth-child(3) {
                    top: 22px;
                }
            }
        }

        .site-nav-toggle-checkbox:checked + .site-nav-toggle {
            transform: rotate(45deg);

            span:nth-child(1) {
                top: 14px;
                transform: rotate(90deg);
                background: black;
            }

            span:nth-child(2) {
                opacity: 0;
            }

            span:nth-child(3) {
                top: 14px;
                background: black;
            }
        }

		.site-nav-list:has(+ .site-nav-toggle-checkbox:checked) {
            right: 0;
        }
    }
    
    &.scrolled {
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: black;

        .site-logo {
            filter: invert(100%);
        }

        .site-nav {
            .site-nav-list {
                .menu-item {
                    a {
                        color: black;
                    }
                }
            }
        }

        .site-nav-toggle {
            span {
                background: black;
            }
        }
    }

	.site-nav {
		width: 100%;
		height: 100%;
        display: flex;
		justify-content: space-between;
        align-items: center;

        .site-logo-link {
            height: 80%;
            width: auto;
            text-decoration: none;

            .site-logo {
                height: 100%;
                width: auto;
                transition: filter 0.3s;
            }
        }
		
		.site-nav-list {
			display: flex;
            width: fit-content;
	
            @media (max-width: 700px) {
                position: absolute;
                top: 0;
                right: -100%;
                background: rgba(255, 255, 255, 0.95);
                flex-direction: column;
                width: 100%;
                padding: 1rem 0;
                transition: right 0.3s;
                height: 100svh;

                display: flex;
                justify-content: center;
                align-items: flex-start;
                flex-direction: column;
                padding: 0 1rem;
                gap: 1rem;

                .menu-item {
                    padding: 1rem 0;
                    width: 100%;
                    justify-content: start !important;
                    display: flex;

                    a {
                        color: black !important;
                        font-size: 2rem;
                        display: flex;
                        align-items: center;

                        &::before {
                            content: '>';
                            margin-right: 1.2rem;
                            color: black;
                            opacity: 0;
                            transform: translateX(-10px);
                            transition: opacity 0.3s ease-out, transform 0.3s ease-out;
                            font-size: 1em;
                            line-height: 1;
                        }
                    }

                    &:hover a::before {
                        opacity: 1;
                        transform: translateX(0);
                    }
                }
            }

			.menu-item {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 .7rem;

				a {
					color: white;
					text-decoration: none;
                    transition: color 0.3s;
					
					&:hover {
						opacity: 0.9;
					}
				}
			}
		}
	}
}

.hero {
	width: 100%;
	height: 90svh;
	position: relative;
	overflow: hidden;

	.hero__bg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		z-index: 0;
	}
	
	.container {
		position: relative;
		z-index: 1;
		height: 100%;
		background: rgba(2, 2, 2, 0.32);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		gap: .4rem;
		color: white;
		
		.hero-title {
			font-size: 2.4rem;
            text-align: center;
		}

        .hero-br {
            display: none;
        }

        @media (max-width: 600px) {
            .hero-br {
                display: block;
            }
        }
	}
}

.mini-hero {
    height: 40svh;
    min-height: 300px;
    width: 100%;
    position: relative;
    overflow: hidden;

    .mini-hero__bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 0;
    }

    .cover {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.70) 100%
        );
        display: flex;
        align-items: center;

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 1.5rem 2rem;

            .hero-meta {
                display: flex;
                justify-content: center;
                gap: 1rem;
                color: rgba(255, 255, 255, 0.80);
                font-size: .875rem;
                letter-spacing: 0.05em;
                margin-bottom: .5rem;
            }

            .hero-title {
                font-size: 2.1rem;
                letter-spacing: 0.03em;
                color: white;
                font-weight: bold;
                text-align: center;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                overflow: hidden;
                text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
            }
        }
    }
}

.news-area {
    width: 100%;
    height: 32px;
    background: #f5f5f5;
    text-align: center;
    background: rgb(37, 46, 113);
    color: white;
    padding: 4px 0;
    display: block;
    text-decoration: none;

    .container {
        max-width: 1000px;
        margin: 0 auto;
        width: 100%;
        height: 100%;

        * {
            max-width: 100%;
        }
    }
}

.page-content {
	width: 100%;
	padding: 3rem 2rem;

    /* レスポンシブ対応 */
    @media (max-width: 600px) {
        padding: 1rem 1rem;
    }
	
	.container {
		margin: auto;
		max-width: 900px;
		width: 100%;
		line-height: 2;

		* {
			max-width: 100%;
		}
    }
}

.archive {
    .page-content {
        .container {
            max-width: 1100px;
        }
    }

    .archive-posts-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;

        @media (max-width: 1000px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @media (max-width: 700px) {
            grid-template-columns: 1fr;
        }
    }

    .archive-post-card {
        border: 1px solid #dedede;
        border-radius: 6px;
        overflow: hidden;
        background: #fff;

        .archive-post-card-main-link {
            display: flex;
            flex-direction: column;
            height: 100%;
            color: inherit;
            text-decoration: none;
            cursor: pointer;
        }

        &:focus-within {
            border-color: #0073aa;
        }

        .archive-post-card-image-link {
            display: block;
            min-height: 0;
            aspect-ratio: 16 / 9;
            background: #f4f4f4;
        }

        .archive-post-card-image-link-placeholder {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #7a7a7a;
            font-size: .78rem;
            letter-spacing: 0.1em;
            text-decoration: none;
        }

        .archive-post-card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .archive-post-card-body {
            padding: .85rem 1rem 1rem;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            min-height: 0;
        }

        .archive-post-card-meta {
            color: #666;
            font-size: .92rem;
            margin: 0 0 .4rem;
            line-height: 1.4;
        }

        .archive-post-card-title {
            margin: 0 0 .5rem;
            line-height: 1.5;
            font-size: 1.05rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            overflow: hidden;
        }

        .archive-post-card-excerpt {
            color: #222;
            line-height: 1.65;
            margin: 0;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            overflow: hidden;
        }
    }

    .navigation.pagination {
        margin-top: 1.5rem;

        .nav-links {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
        }

        .page-numbers {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2rem;
            height: 2rem;
            border: 1px solid #d0d0d0;
            color: black;
            text-decoration: none;
            padding: 0 .5rem;

            &.current {
                background: #252E71;
                border-color: #252E71;
                color: white;
            }

            &:hover {
                color: #0073aa;
                border-color: #0073aa;
            }
        }
    }
}

.footer {
    .promotion {
        position: relative;
        overflow: hidden;

        .promotion__bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            z-index: 0;
        }

        .container {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.26);
            backdrop-filter: blur(7px);
            padding: 4rem 0;
            display: flex;
            flex-direction: column;
            gap: .6rem;
            justify-content: center;
            align-items: center;
            color: white;

            .promotion-description {
                text-align: center;
            }

            a.promotion-button {
                display: inline-block;
                padding: .5rem 1.5rem;
                background: white;
                color: black;
                text-decoration: none;
                border-radius: 4px;
                width: fit-content;

                &:hover {
                    opacity: 0.9;
                }
            }
        }
    }

    .last-footer {
        background: #252E71;
        color: white;
        text-align: center;
        padding: 1rem 0;
        display: flex;
        flex-direction: column;
        gap: .4rem;

        p {
            margin: 0;

            a {
                color: white;
                text-decoration: none;

                &:hover {
                    opacity: 0.9;
                }
            }
        }
    }
}