@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

:root {
    --primary-color: #F49D37;
    /* Orange from reference */
    --text-color: #333;
    --bg-color: #fff;
    --gray-bg: #f5f5f5;
    --border-color: #ddd;
    --header-height: 80px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
    padding-top: var(--header-height);
    /* For fixed header */
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

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

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

/* Header & Nav */
header {
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
}

.logo {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    /* Reset line-height for image alignment */
}

.logo img {
    max-height: 50px;
    /* Fit within 80px header with padding */
    width: auto;
}

.nav-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
}

#primary-nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

#primary-nav a {
    font-weight: 700;
    font-size: 0.95rem;
}

/* Mobile Nav Toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.nav-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: #333;
}

/* Search Form (Top Right) */
.search-form {
    display: flex;
    align-items: center;
}

#searchInput {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    outline: none;
    font-size: 0.9rem;
    width: 200px;
}

#searchBtn {
    padding: 8px 15px;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Nav Bar Orange Strip (Sub-header style) */
.nav-strip {
    background-color: var(--primary-color);
    padding: 15px 0;
    text-align: center;
    margin-bottom: 30px;
}

.nav-strip ul {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 40px;
    flex-wrap: wrap;
}

.nav-strip a {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Main Visual */
.main-visual {
    margin-bottom: 30px;
    text-align: center;
}

.main-visual img {
    margin: 0 auto;
}

/* Sections */
section {
    margin-bottom: 60px;
}

.section-title {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.program-info h1 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.broadcast-info {
    color: #666;
    margin-bottom: 15px;
}

.tags {
    margin-bottom: 20px;
}

.tag {
    display: inline-block;
    background: var(--primary-color);
    color: #fff;
    padding: 2px 10px;
    font-size: 0.8rem;
    border-radius: 2px;
    margin-right: 10px;
}

.tag-secondary {
    background: transparent;
    color: #d14;
    font-weight: bold;
    border: 1px solid #eee;
    /* Visual filler */
    border: 0;
}

.content-block {
    background: #fff;
    padding: 20px;
}

/* Footer & SNS */
.sns-share {
    background-color: #e0e0e0;
    padding: 40px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 50px;
}

.sns-share span {
    font-weight: bold;
}

.sns-icon {
    display: inline-block;
    transition: transform 0.3s ease;
}

.sns-icon img {
    width: 40px;
    height: auto;
    display: block;
}

.sns-icon:hover {
    transform: scale(1.1);
}

/* Search Overlay */
#searchOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
}

.overlay-content {
    background: #fff;
    width: 80%;
    max-width: 600px;
    margin: 100px auto;
    padding: 20px;
    border-radius: 8px;
    position: relative;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

#closeBtn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

#resultsContent {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 10px;
    overflow-y: auto;
    flex-grow: 1;
    min-height: 200px;
    font-family: monospace;
    background: #f9f9f9;
    padding: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    :root {
        --header-height: 60px;
    }

    header {
        padding: 10px 15px;
        height: auto;
        /* Allow growth */
        min-height: var(--header-height);
    }

    .nav-toggle {
        display: flex;
    }

    #primary-nav {
        position: absolute;
        top: 100%;
        /* Attach to bottom of header */
        left: -15px;
        /* Offset parent padding */
        width: calc(100% + 30px);
        /* Fill full width including padding offset */
        background: #fff;
        border-bottom: 2px solid var(--primary-color);
        padding: 20px;
        transform: translateY(-150%);
        transition: transform 0.3s ease;
        z-index: 999;
    }

    #primary-nav.open {
        transform: translateY(0);
    }

    #primary-nav ul {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    /* Move search to inside nav on mobile or keep it small? 
       Request said "top right" and "follow scroll". 
       Let's keep it in header but maybe hide input until clicked if space is tight?
       For now, let's shrink it.
    */
    .search-form {
        margin-left: auto;
        margin-right: 15px;
    }

    #searchInput {
        width: 120px;
    }

    .nav-strip ul {
        gap: 15px;
        font-size: 0.9rem;
    }

    .overlay-content {
        width: 95%;
        margin: 60px auto;
        max-height: 85vh;
    }

    /* Mobile Title Line Break */
    .mobile-br {
        display: inline;
    }
}

/* Hide mobile break on desktop */
@media (min-width: 769px) {
    .mobile-br {
        display: none;
    }
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 40px;
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

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

/* Lightbox */
#lightboxOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

#lightboxOverlay img {
    max-width: 90%;
    max-height: 90vh;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    border: 2px solid #fff;
    cursor: default;
}


.gallery-item img {
    cursor: zoom-in;
}

/* Base Styles for Search Feedback Animations (Global) */
@keyframes shake-anim {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

@keyframes success-anim {
    0% {
        transform: scale(1);
        box-shadow: 0 0 20px #00ff00;
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 0 50px #00ff00;
        background-color: rgba(0, 255, 0, 0.1);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 20px #00ff00;
    }
}

.shake {
    animation: shake-anim 0.4s cubic-bezier(.36, .07, .19, .97) both;
    border-color: #ff0000 !important;
}

.highlight-success {
    animation: success-anim 0.5s ease-out both !important;
    border-color: #00ff00 !important;
}

/* Injected Overlay Search Input */
.overlay-search-wrapper {
    margin-top: 15px;
    border-top: 1px dashed #333;
    padding-top: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.overlay-search-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid #666;
    color: inherit;
    font-family: monospace;
    font-size: 1rem;
    padding: 5px;
    outline: none;
}

.overlay-search-input:focus {
    border-bottom-color: #00ff00;
}

.overlay-search-wrapper::before {
    content: '>';
    font-family: monospace;
    font-weight: bold;
}