/* Base Variables */
:root {
    --primary-color: #8B5A2B;
    --secondary-color: #F4D03F;
    --background-color: #fafafa;
    --text-color: #333;
    --header-bg: #8B5A2B;
    --header-text: #fff;
    --link-color: #d84315;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --container-max-width: 1152px;
}

/* Enable View Transitions */
@view-transition {
    navigation: auto;
}

* {
    box-sizing: border-box;
}

/* Theme Colors */
:root {

    /* Brown 700 */

    /* Purple 900 */
    --color-zwh-primary: #1B5E20;
    /* Green 900 */
    --tab-inactive-bg: rgba(255, 255, 255, 0.2);
    --tab-inactive-text: rgba(255, 255, 255, 0.8);
}

/* Theme: Bibern (Default/Home) */

/* Theme: Zwetschgen Fest (ZWF) */

/* Theme: Zwetschgen Hütte (ZWH) */
/* Theme: Zwetschgen Hütte (ZWH) */
.theme-zwh {
    --primary-color: #795548;
    /* Warm Wood Brown */
    --secondary-color: #D7CCC8;
    /* Light Brown/Beige */
    --header-bg: #3E2723;
    /* Very Dark Brown */
    --header-text: #EFEBE9;
    /* Off-white */
    --background-color: rgba(215, 204, 200, 0.95);
    /* Warm Taupe */
    --text-color: #3E2723;
    /* Dark Brown */
    --link-color: #5D4037;
    /* Dark Brown */
}

body {
    font-family: var(--font-family);
    color: var(--text-color);
    background-color: #333;
    /* Dark background outside the box */
    margin: 0;
    line-height: 1.6;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    animation: fadeIn 0.6s ease-out forwards;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Page Wrapper for Boxed Layout */
.page-wrapper {
    max-width: 1152px;
    width: 100%;
    margin: 20px auto;
    background-color: var(--background-color);
    box-shadow: 0 0 15px var(--secondary-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.fade-out {
    opacity: 0;
}

/* Ensure images within content are responsive */
.post-content img,
.content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    /* Optional: adds rounded corners */
    display: block;
    margin: 1rem 0;
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.gallery-grid a {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.gallery-grid a:hover {
    transform: scale(1.05);
}

.gallery-grid img {
    width: 100%;
    height: 100px;
    /* Fixed height for thumbnails */
    object-fit: cover;
    display: block;
    margin: 0;
    /* Override page-content img margin */
}

a {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 600;
}

a:hover {
    text-decoration: underline;
}

.container {
    max-width: 100%;
    /* tailored to the boxed layout */
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
    box-sizing: border-box;
}

/* Header */
.site-header {
    height: 300px;
    background-color: var(--header-bg);
    background-image: url('../images/header-dvb.jpg');
    background-size: cover;
    /* Supports filling the area, assuming image is ~960x250 */
    background-position: center;
    background-repeat: no-repeat;
    color: var(--header-text);
    padding: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    transition: background-color 0.5s ease, color 0.5s ease;
    position: relative;
    z-index: 10;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    /* Improve text readability */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Specific Header for Zwetschgen Fest */

/* Specific Header for Zwetschgen Hütte */
.theme-zwh .site-header {
    background-image: url('../images/header-zwh.jpg');
}

.site-header .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Title top, Nav bottom */
    height: 100%;
    padding-top: 1rem;
    /* Align with top-positioned elements */
}

.header-top {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    /* Title to left */
    position: relative;
}

.site-title {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.site-title a {
    color: var(--header-text);
    text-decoration: none;
}

.site-nav {
    align-self: flex-end;
    /* Push to right */
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    /* Small gap between tabs */
}

.menu-toggle {
    display: none;
    /* Hidden by default on desktop */
}

/* Register Tab Styling */
.site-nav a {
    color: var(--tab-inactive-text);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 10px 10px 0 0;
    /* Top rounded corners only */
    transition: transform 0.2s, background-color 0.2s, color 0.2s;
    background-color: var(--tab-inactive-bg);
    margin-bottom: 0;
    display: block;
    border-bottom: none;
}

.site-nav a:hover {
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    transform: translateY(-2px);
}

.site-nav a.active {
    color: var(--text-color);
    /* Active text color depends on body theme? No, usually dark or consistent */
    color: #333;
    /* Dark text for active tab usually looks like it connects to page */
    background-color: var(--background-color);
    /* Matches page background */
    font-weight: 700;
    transform: none;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* To make active tab look connected to main content, we might need adjustments. 
   But since header has bg color and body has another, "register" style implies 
   active tab takes the body's background color. */

/* Specific Tab Colors (Active State) 
   Actually, for a register look, the active tab should likely match the PAGE background color 
   to look like it opens into the page. 
   Checking existing body styles:
   .theme-bibern background-color: #FFF8E1
   .theme-zwf background-color: #F3E5F5
   .theme-zwh background-color: #E8F5E9
*/

/* We need to override the active color dynamically or rely on the var(--background-color) which is set on ROOT/BODY. 
   Since header is outside body content flow in terms of background, this visual trick relies on 
   var(--background-color) being correct. */

.site-nav a.active {
    background-color: var(--background-color);
    color: var(--text-color);
}

/* Specific styling for inactive tabs to distinguish them by section color if desired, 
   or keep them uniform 'inactive' style. User asked for "same color as respective bodys". 
   Let's interpret: 
   Home tab -> Brown-ish
   Zwetschgen Fest -> Purple-ish
   Zwetschgen Hütte -> Green-ish
*/

.site-nav a.menu-item-home {
    background-color: rgba(93, 64, 55, 0.5);
    /* Brown 700 semi-transparent */
    color: rgba(255, 255, 255, 0.9);
}

.site-nav a.menu-item-home.active {
    background-color: #FDFBF7;
    /* Match DVB Body (White/Light) */
    color: #3E2723;
}

.site-nav a.menu-item-zwf {
    background-color: rgba(89, 81, 62, 0.5);
    /* Olive Brown semi-transparent */
    color: rgba(254, 254, 224, 0.9);
}

.site-nav a.menu-item-zwf.active {
    background-color: #59513e;
    /* Match ZWF Body (Olive Brown) */
    color: #FEFEE0;
}

.site-nav a.menu-item-zwh {
    background-color: rgba(62, 39, 35, 0.5);
    /* Dark Brown semi-transparent */
    color: rgba(255, 255, 255, 0.9);
}

.site-nav a.menu-item-zwh.active {
    background-color: rgba(215, 204, 200, 0.95);
    /* Warm Taupe - Matches ZWH Body */
    color: #3E2723;
}

/* Main Content */
.site-main {
    flex: 1;
    padding: 3rem 0;
    display: flex;
    flex-direction: column;
}

.content-wrapper {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

/* Sidebar */
.sidebar {
    width: 230px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    /* More transparent for dark ease */
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Ensure it doesn't break layout on slightly smaller screens */
    max-width: 100%;
}

.sidebar h3 {
    margin-top: 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 1.2rem;
}

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

.sidebar li {
    margin-bottom: 0.5rem;
}

.sidebar a {
    display: block;
    padding: 0.5rem;
    border-radius: 6px;
    color: var(--text-color);
    transition: background-color 0.2s, color 0.2s;
}

.sidebar-toggle {
    display: none;
}

.sidebar-header {
    display: block;
}

.sidebar a:hover,
.sidebar a.active {
    background-color: var(--primary-color);
    color: var(--background-color);
    /* Inverted for contrast */
    text-decoration: none;
}

/* Content */
.content {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--secondary-color);
    box-shadow: 0 0 10px var(--secondary-color);
    border-radius: 12px;
    padding: 2em;
}

/* Hero */
.hero {
    text-align: center;
    margin-bottom: 4rem;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    border-radius: 16px;
    border: 2px solid var(--primary-color);
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-color);
}

/* Grid */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    width: 100%;
}

.post-card {
    border-top: 6px solid var(--primary-color);
    transition: transform 0.2s, box-shadow 0.2s;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.post-item {
    border-left: 6px solid var(--secondary-color);
    margin-bottom: 2rem;
}

.post-header h1 {
    color: var(--primary-color);
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.post-meta {
    font-size: 1rem;
    color: #666;
    margin-bottom: 1.5rem;
}

/* Footer */
.site-footer {
    background-color: #333;
    color: #fff;
    padding: 1rem 0;
    margin-top: auto;
    width: 100%;
    /* Ensure footer spans full width */
}

.site-footer .container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem;
}

.footer-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-logo {
    height: 50px;
    /* Adjust size as needed */
    width: auto;
}

.site-footer p {
    margin: 0;
    text-align: right;
    flex-grow: 1;
    /* Push text to the right */
}

@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        margin-bottom: 2rem;
    }
}

/* Tablet / Intermediate responsiveness */
@media (max-width: 900px) {
    .content-wrapper {
        gap: 1.5rem;
    }

    .sidebar {
        width: 200px;
        /* Reduce width on tablet */
    }
}

@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        margin-bottom: 2rem;
    }

    .sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid var(--primary-color);
        margin-bottom: 0.5rem;
    }

    .sidebar h3 {
        border-bottom: none;
        padding-bottom: 0;
        margin: 0;
    }

    .sidebar-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 24px;
        height: 20px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .sidebar-toggle span {
        width: 100%;
        height: 2px;
        background: var(--primary-color);
        border-radius: 2px;
        transition: all 0.3s linear;
    }

    .sidebar-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(4px, 4px);
    }

    .sidebar-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .sidebar-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .map-container {
        margin-top: 2rem;
    }

    .map-responsive {
        overflow: hidden;
        padding-bottom: 56.25%;
        position: relative;
        height: 0;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        margin-bottom: 2rem;
    }

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

    .route-planner {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(5px);
        padding: 2rem;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .route-planner h3 {
        margin-top: 0;
        color: var(--primary-color);
    }

    .form-group {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .route-planner input {
        flex: 1;
        padding: 0.75rem;
        border-radius: 6px;
        border: 1px solid #ddd;
        font-size: 1rem;
        min-width: 200px;
    }

    .btn-route {
        background-color: var(--primary-color);
        color: var(--header-text);
        /* Use header text color which contrasts with primary */
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 6px;
        font-weight: bold;
        cursor: pointer;
        transition: opacity 0.2s;
    }

    .btn-route:hover {
        opacity: 0.9;
    }

    .sidebar nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .sidebar nav ul.visible {
        display: flex;
    }

    .sidebar li {
        width: 100%;
    }

    /* Mobile Navigation */
    .menu-toggle {
        display: flex;
        /* Show on mobile */
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 25px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 20;
        margin-bottom: 20px;
        /* Raise it up a bit */
    }

    .menu-toggle span {
        width: 100%;
        height: 3px;
        background: var(--header-text);
        border-radius: 2px;
        transition: all 0.3s linear;
    }

    /* Hamburger Animation */
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

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

    .site-nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        bottom: 0;
        /* Position relative to header bottom */
        left: 0;
        background-color: rgba(0, 0, 0, 0.9);
        padding: 1rem 0;
        gap: 0;
        transform: translateY(100%);
        /* Move it below the header */
    }

    .site-nav ul.visible {
        display: flex;
    }

    .site-nav a {
        background-color: transparent !important;
        border-radius: 0;
        color: #fff !important;
        padding: 1rem 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        text-align: center;
    }

    .site-nav a:hover,
    .site-nav a.active {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
}

/* Scroll to Top Button */
#scrollTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: var(--primary-color);
    color: var(--header-text);
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, transform 0.3s;
    text-align: center;
    line-height: 50px;
    /* Center the arrow vertically */
    align-items: center;
    justify-content: center;
}

#scrollTopBtn:hover {
    background-color: var(--secondary-color);
    color: #333;
    /* Make sure contrast is good on hover */
}

/* Booking Page Styles */
.booking-form-container {
    background: rgba(255, 255, 255, 0.8);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
}

.booking-form .form-group {
    margin-bottom: 1.5rem;
}

.booking-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #3E2723;
    /* Dark Brown for better contrast */
}

.booking-form input,
.booking-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1rem;
    background-color: #fff;
}

.booking-form input:focus,
.booking-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(230, 184, 0, 0.2);
}

.btn-submit {
    background-color: var(--primary-color);
    color: var(--header-text);
    padding: 1rem 2rem;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    width: 100%;
}

.btn-submit:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
}

/* FullCalendar Overrides */
#calendar {
    max-width: 100%;
    margin: 2rem 0;
    padding: 1rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.fc-toolbar-title {
    font-size: 1.5rem !important;
    color: var(--secondary-color);
}

.fc-button-primary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.fc-button-primary:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Countdown Overlay */
#countdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #1F1B18;
    background-image: linear-gradient(135deg, #1F1B18 0%, #5D4037 100%);
    z-index: 9999;
    display: flex;
    /* Will be toggled to 'none' via JS */
    justify-content: center;
    align-items: center;
    color: #FDFBF7;
    text-align: center;
    backdrop-filter: blur(10px);
}

.countdown-content {
    background: rgba(255, 255, 255, 0.1);
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    max-width: 90%;
}

.countdown-title {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    color: #FDFBF7;
}

.countdown-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

#countdown-timer {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.time-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 10px;
    min-width: 100px;
}

.time-unit .number {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
    font-family: monospace;
}

.time-unit .label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* Mobile Responsiveness for Countdown */
@media (max-width: 600px) {
    .countdown-title {
        font-size: 2rem;
    }

    #countdown-timer {
        gap: 1rem;
    }

    .time-unit {
        min-width: 70px;
        padding: 0.5rem;
    }

    .time-unit .number {
        font-size: 2rem;
    }
}

/* Matomo Cookie Consent Banner */
.cookie-consent-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* Position bottom-right similar to scroll-top btn */
    max-width: 400px;
    background-color: rgba(215, 204, 200, 0.95);
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 20px;
    z-index: 10000;
    /* Ensure it stays on top */
    border-radius: 8px;
    font-family: var(--font-family);
}

.cookie-content p {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 0.95rem;
    color: #3E2723;
    line-height: 1.5;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.cookie-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.cookie-btn.accept {
    background-color: #4CAF50;
    /* Green */
    color: white;
}

.cookie-btn.accept:hover {
    background-color: #45a049;
}

.cookie-btn.reject {
    background-color: #f44336;
    /* Red for clear rejection option */
    color: white;
}

.cookie-btn.reject:hover {
    background-color: #da190b;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .cookie-consent-banner {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: none;
    }
}