/* styles.css */
/* Unified stylesheet for all kk1.fi pages (home, parkki, vedenkulutus, varaus) */

/* --------------------------------- */
/* Global/Body Reset */
/* --------------------------------- */
body {
    background-color: #f0f2f1;
    /* We remove max-width and margin from body here,
       and apply the content width to the .page-content container below */
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

/* Container to group the header and date reference */
.header-container {
    display: flex;         /* Use flexbox for horizontal layout */
    align-items: baseline; /* Aligns content based on the text baseline (looks best) */
    flex-wrap: wrap;       /* Allows the elements to wrap onto the next line on mobile if necessary */
    margin-bottom: 20px;
}

/* Style the main header */
.header-container h1 {
    /* Remove any default margins that might interfere with flexbox */
    margin: 0;
    padding: 0;
    /* Ensure the H1 content is not unnecessarily bolded/styled here */
}

/* Style the date reference */
.date-ref {
    display: inline;      /* Ensures it takes up minimal space */
    font-size: 1.2em;     /* Smaller text */
    font-weight: normal;
    margin-left: 10px;    /* Space after the main header */
    color: #666;
    /* Important: Remove any styles that might apply to a span inside an h1 */
}

/* --------------------------------- */
/* Sticky Header Styling */
/* --------------------------------- */
.main-header {
    /* 🛑 Key to stickiness: 🛑 */
    position: sticky; /* Makes the header stay put relative to the viewport */
    top: 0;          /* Aligns it to the top edge */

    /* Layout and aesthetics */
    display: flex;
    justify-content: space-between; /* Puts title on the left, flags on the right */
    align-items: center;
    padding: 10px 20px;
    background-color: #ffffff; /* White background for the bar */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    z-index: 1000; /* Ensures the header is always on top of other content */
}

.main-header h1 a,
.site-title {
    text-decoration: none;
    color: #333;
    font-size: 20px;
    font-weight: bold;
    align-items: center;
    white-space: nowrap;
}

/* --------------------------------- */
/* Hamburger Button and Menu Styling */
/* --------------------------------- */

.menu-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 1. Hamburger Icon Button */
.hamburger-menu {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
    padding: 5px 10px;

    /* 🛑 CHANGE: SHOW the button by default on desktop 🛑 */
    display: block;
}

/* 2. The Navigation Menu Container */
/* .dropdown-nav is the shared base for both the top-level site nav and the
   per-page in-page section nav; .site-navigation / .section-navigation only
   set which one sits to the left so both can be open without overlapping. */
.dropdown-nav {
    /* 🛑 CHANGE: Hide the menu by default (closed state) on all screens 🛑 */
    display: none;
    flex-direction: column;
    width: 250px;

    /* Position the menu underneath the header, flushed left */
    position: absolute;
    top: 60px; /* Adjust if your main-header height is different */

    /* Ensure the menu doesn't scroll off-screen */
    max-height: calc(100vh - 60px);
    overflow-y: auto;

    background-color: #f8f8f8;
    border-right: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    padding: 10px 0;
    z-index: 999;
}

.site-navigation {
    left: 0;
}

.section-navigation {
    left: 260px;
}

.dropdown-nav a {
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;
}

.dropdown-nav a:hover {
    background-color: #e9e9e9;
}

/* 3. State: Menu is Open (Toggled by JavaScript) */
.dropdown-nav.is-open {
    display: flex; /* Show the menu */
}

/* --------------------------------- */
/* Content Adjustments */
/* --------------------------------- */

/* IMPORTANT: This padding prevents your main content from being hidden
   behind the fixed header. Adjust the height (e.g., 60px) to match your header's total height. */
.page-content {
    /* Existing rule to prevent content from hiding behind the header: */
    padding-top: 80px;

    /* 🛑 NEW RULE: Scroll Padding for Anchor Links 🛑 */
    /* Must be slightly larger than the header height (e.g., 80px) */
    scroll-padding-top: 80px;

    max-width: 800px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Apply this to ALL elements that are targets of your anchor links */
.page-content h3:before {
    /* 1. Create a pseudo-element before the H3 */
    content: "";
    display: block;

    /* 2. Push it up by the height of the header (e.g., 80px) */
    height: 80px;

    /* 3. Pull the entire section back up by the same amount */
    margin-top: -80px;

    /* Ensure the browser scrolls to the pseudo-element's starting point */
    visibility: hidden;
    pointer-events: none;
}

/* --------------------------------- */
/* Flag Switcher (Keep existing styles for flags) */
/* --------------------------------- */
.language-switcher {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0;
}

.flag-container {
    display: flex;
    gap: 10px; /* Space between flags */
    align-items: center;
    padding-bottom: 5px; /* Small space above the disclaimer */
}

.disclaimer {
    font-size: 0.7em; /* Keep it small and subtle */
    color: #999;
    margin-top: 5px; /* Add a little vertical space */
    text-align: right;
    width: 100%; /* Ensure it spans the width of the nav/flag container */
}

.language-switcher img {
    /* Define a small, consistent size for all flags */
    width: 30px;
    height: 20px;

    /* Optional: make the flags look like buttons */
    border: 1px solid #ccc;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer; /* Ensures the cursor indicates clickability */
    transition: transform 0.1s;
}

.language-switcher img:hover {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* Container for the image, ensures centering */
figure {
    /* Centering the image block itself */
    display: block;
    margin: 20px auto; /* Adds vertical space and centers horizontally */
    max-width: 550px;  /* 🛑 Sets the maximum width for the image container 🛑 */
    width: 100%;       /* Ensures the container respects max-width */
    text-align: center; /* Centers any captions or content inside the figure */
}

/* Image styling for responsiveness */
figure img {
    /* 🛑 Key for responsiveness 🛑 */
    max-width: 100%; /* Ensures the image never exceeds its parent container (550px) */
    height: auto;    /* Maintains the image's aspect ratio */
    display: block;  /* Ensures correct spacing and behavior  <-- This might conflict if not overridden/unset */
    border-radius: 8px; /* Optional: adds a nice soft edge */
}

/* --- NEW BLOCK FOR SIDE-BY-SIDE IMAGES --- */
.image-pair-container {
    display: flex;         /* Activates side-by-side layout */
    justify-content: center; /* Centers the images if total width is less than 550px */
    gap: 10px;             /* Optional: Adds a small space between the two images */
    width: 100%;           /* Ensures the container fills the parent figure's 550px max-width */
}

/* Style individual images inside the new container */
.image-pair-container img {
    /* Each image takes up roughly half the container width,
       with flex-grow ensuring they share space. */
    width: 50%;
    max-width: 50%;
    flex-grow: 1; /* Ensures they equally share the remaining space */

    /* Important: You can remove the 'display: block;' inherited from figure img */
    display: unset;
}

/* 3. Media Query for Mobile Responsiveness */
@media (max-width: 600px) {
    .main-header {
        padding: 10px 10px;
    }

    .language-switcher {
        align-items: center;
    }

    .language-switcher button {
        /* Make buttons full width */
        width: 100%;
        margin-bottom: 5px;
        align-items: center;
    }

    .flag-container {
        /* Keep flags centered horizontally */
        justify-content: center;
        /* Ensure the flag container doesn't get too wide */
        width: auto;
    }

    .disclaimer {
        /* 🛑 Change alignment to center the wrapped text 🛑 */
        text-align: center;

        /* Allow the disclaimer to span the full width of its parent (.language-switcher)
           to ensure text wrapping is clean and not limited by flags. */
        width: 100%;

        /* Adjust font size to fit more neatly */
        font-size: 0.65em;

        margin-top: 8px;
    }

    /* This rule isn't strictly necessary if the above rules are set,
       but ensures the image takes up nearly the full screen width */
    figure {
        padding: 0 10px;
    }

    /* Ensure the menu takes full width if open, or stays contained */
    .dropdown-nav {
        /* You might want the menu to take the full height for a more immersive mobile experience */
        height: 100vh;
        top: 50px; /* Adjust if your header is taller than 50px */
        width: 60%; /* Menu covers 60% of the screen */
        left: 0; /* Stack full-width on mobile instead of sitting side by side */
    }
}

@media (max-width: 450px) {
    .image-pair-container {
        flex-direction: column; /* Stacks the images vertically */
        align-items: center;    /* Centers the stacked images */
        gap: 20px;
    }

    .image-pair-container img {
        width: 90%; /* Let each image take up most of the screen width when stacked */
        max-width: 90%;
    }
}

/* --------------------------------- */
/* Breadcrumb (site-map layer, not the in-page tip menu) */
/* --------------------------------- */
.breadcrumb {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px 20px 0;
    font-size: 0.85em;
    color: #666;
}

.breadcrumb a {
    color: #4a6b8a;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* --------------------------------- */
/* Site Footer (shared across all pages) */
/* --------------------------------- */
.site-footer {
    text-align: center;
    font-size: 0.8em;
    color: #888;
    padding: 30px 20px 20px;
}

.site-footer .disclaimer {
    display: block;
    margin-top: 6px;
    font-size: 0.9em;
    color: #999;
}

/* --------------------------------- */
/* Simple centered page intro (home / parkki) */
/* --------------------------------- */
.center {
    text-align: center;
}