/* --- Core Variables --- */
:root {
    --primary: #2c3e50;
    --accent: #e74c3c;
    --light: #f4f7f6;
    --white: #ffffff;
    --text: #333;
}

/* --- Reset & Base --- */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

/* * { outline: 1px solid red !important; } */

html {
    scroll-behavior: smooth;
    /* Adjust '80px' to match the actual height of your header */
    scroll-padding-top: 80px; 
    /* This reserves the space for the scrollbar even when it's hidden */
    scrollbar-gutter: stable;
}

body {
    /* Default font */
    font-family: Muli; 
    font-size: 16px; 
    font-weight: 400; 
    line-height: 1.8;
    /* font-family: 'Montserrat', sans-serif; */
    /* line-height: 1.6; */
    color: var(--text);
    /* background-color: var(--white); */
    background-color: #F3F7F6;
}

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
}

h1, h2 { 
    font-family: 'Playfair Display', serif; 
}

img {
    max-width: 100%; /* Adhere to container width. */
    height: auto; /* Make sure images are scaled correctly. */
    border: 0;
}

a img {
    border: none;
    vertical-align: middle;
}

img.custom-logo {
    max-height: 70%;
}

.identity {
    height: 100px;
    line-height: 100px;
}

section {
    width: 80%;
    margin: auto;
}

#header-image-main, #header-image-main-inside {
    position: relative;
    overflow: hidden;
}
#header-image-main-inside {
    height: 100vh;
}
#header-image-main-inside {
    display: block;
}
#header-overlay {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#masthead .header-image {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    opacity: 0;
    background-size: cover;
    background-position: 50% 50%;
    background-attachment: fixed;
    -webkit-transition: .2s ease-out opacity;
    transition: .2s ease-out opacity;
}

#header-page-title {
    position: absolute;
    z-index: 11;
    right: 0;
    top: -100px;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 2em;
}

.header-image {
    height: 100vh;
    width: 100%;
    object-fit: cover;
}

.entry-title, .title-year {
    color: #FFFFFF;
}

#header-page-title .entry-title {
    font-family: Playfair Display;
    font-size: 5em;
    font-weight: 700;
    font-size: clamp(2.5em, 5vw, 5em);
    line-height: 1.3;
}

#header-overlay {
    background-color: #49a1b9;
    background: -webkit-linear-gradient(90deg, #49a1b9 0%, #1c110a 100%);
    background: linear-gradient(180deg, #49a1b9 0%, #1c110a 100%);
    opacity: 0.6;
    pointer-events: none;
}

.container {
    background-color: white;
    /* max-width: 1100px;  */
    /* margin: auto;  */
    margin-top: 40px;
    padding: 20px;
    border-radius: 24px;
    text-align: center;
}

.container h2 {
    color: #707070;
}

.iframe {
    padding: 20px 0px;
}

.container h2 {
    text-align: center;
    font-size: 2em;
}

.welcome h1, 
.welcome h2, 
.welcome h3, 
.welcome h4, 
.welcome h5, 
.welcome h6, 
.welcome p
{
    text-align: left;
    /* text-align: justify;
    hyphens: auto; */
    /*-webkit-hyphens: auto; /* For Safari/iOS */
    /*-ms-hyphens: auto;     /* For older Windows browsers */
}

.page-wrapper {
    width: 100%;
    overflow-x: hidden; /* This clips the content without breaking the header */
    position: relative;
}

/* --- Header & Nav --- */

/* The default "Fixed/Solid" state (when scrolling) */
.main-header {
    /* Layout */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* padding: 15px 0; */

    /* Style */
    background: linear-gradient(180deg, #49a1b9 0%, rgb(220,220,220) 100%);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

    /* Animation */
    opacity: 1;
    transition: opacity 0.4s ease, transform 0.4s ease, top 0.4s ease;
    transform: translateY(0);
    will-change: transform, opacity; /* for slower mobile devices, instructs use of gpu */
}

/* Helper class to handle the smart-hide */
.main-header.smart-hidden {
    transform: translateY(-110%); /* make sure we're totally offscreen */
    opacity: 0;
}

/* The "At Top" state (Transparent and scrolls away) */
.main-header.main-header-at-top {
    /* Layout */
    position: absolute; /* This allows it to scroll UP and OFF the screen */
    /* Style */
    background: transparent;
    box-shadow: none;
    /* Animation */
    opacity: 1;
    transform: translateY(0);
    transition: none !important; /* CRITICAL: Remove transitions so it feels pinned to the page */
}

/* The "Hidden Zone" to prevent flickering while scrolling */
.main-header.is-hidden {
    /* Animation */
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.2s ease; /* Short fade out when leaving the top */
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0 2.5em;
}

.logo { 
    font-weight: 700; 
    font-size: 1.2rem; 
    color: var(--primary); 
}

.nav-menu { 
    display: flex; 
    list-style: none; 
    /* height: 100vw; */
}

.nav-menu li { 
    text-align: center; 
    padding: 15px;
}

.nav-menu li a { 
    margin: 0; 
    text-decoration: none; 
    color: white;
    font-weight: 700; 
    font-size: 1.2rem;
    padding: 15px;
}

/* 3. The Hover Effect */
nav ul li a:hover {
    /* Using RGBA: Red, Green, Blue, Alpha (0.0 to 1.0) */
    background-color: rgba(255, 255, 255, 0.2); 
    /* Optional: change text color on hover if needed */
    /* color: #f0f0f0; */
}

/* --- Checkbox Hack Setup --- */
.menu-checkbox { 
    display: none; 
}
.menu-toggle { 
    display: none; 
    cursor: pointer; 
}
.bar {
    width: 40px;
    height: 4px;
    /* background-color: var(--primary); */
    background-color: white;
    margin: 4px 0;
    transition: 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6); /* Adds a nice "snap" effect */
    transform-origin: center; /* Crucial for symmetrical rotation */
    display: block; /* Ensures margins are calculated correctly */
}

/* --- Hero --- */
/* .hero {
    height: 70vh;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://via.placeholder.com/1600x900') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
} */

.hero h1 { 
    font-size: 3rem; 
    margin-bottom: 10px; 
}
.btn {
    display: inline-block;
    background: var(--accent);
    color: white;
    padding: 14px 35px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    margin-top: 25px;
    transition: background 0.3s;
}
.btn:hover { 
    background: #c0392b; 
}

/* --- Layout Blocks --- */
.content-block { 
    padding: 100px 0; 
}
.alt-bg { 
    background: var(--light); 
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.box { 
    background: #e2e2e2; 
    height: 350px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 8px; 
}

/* --- Table --- */
.rates-table { 
    width: 100%; 
    border-collapse: collapse; 
    background: white; 
    margin-top: 30px; 
}
.rates-table th, .rates-table td { 
    padding: 18px; 
    border: 1px solid #eee; 
    text-align: left; 
}
.rates-table th { 
    background: var(--primary); 
    color: white; 
}

/* --- Footer --- */
footer { 
    background: var(--primary); 
    color: white; 
    padding: 40px 0; 
    text-align: center; 
}

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background-color: var(--accent); /* Using your red accent color */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 999;
    
    /* Start hidden for the fade-in effect */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    /* Disables the default blue highlight box on mobile tap */
    -webkit-tap-highlight-color: transparent;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

@media ( any-pointer: fine ) {
    .back-to-top:hover {
        background-color: var(--primary); /* Only turns blue/dark on desktop mouse-over */
        transform: translateY(-5px); /* Nice little bounce on hover */
    }
}

/* The Mobile Tap State */
.back-to-top:active {
    background-color: #c0392b; /* A slightly darker red when pressed */
    transform: scale(0.95);      /* Physical feedback: button "squishes" slightly */
    transition: 0.1s;
}

/* --- RESPONSIVE MOBILE MENU --- */
@media (max-width: 768px) {

    section {
        width: 95%;
    }

    .header-flex {
        padding: 0 1.05em;
    }

    .grid { 
        grid-template-columns: 1fr; 
    }

    .rates-table { 
        width: 100%; 
    }

    .rates-table th, .rates-table td { 
        padding: 8px; 
    }

    .menu-toggle { 
        display: flex; 
        flex-direction: column; 
        justify-content: center; /* This is the key: it stacks them in the middle */
        align-items: center;
        width: 40px;
        height: 36px; /* Setting a fixed height makes the math consistent */
        margin-left: auto; 
        cursor: pointer;
        /* padding-right: 0; */
    }

    .nav-menu {
        display: flex; /* Always 'flex' now so it can animate */
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background:#49a1b9;
        /* background: rgba(73,161,185,0.93); */
        padding: 20px 0;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);

        /* --- THE FADE EFFECTS --- */
        opacity: 0;                                 /* Start invisible */
        visibility: hidden;                         /* Ensure it's not clickable while invisible */
        transform: translateY(-10px);               /* Optional: slight "slide down" effect */
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
    }

    .nav-menu li { 
        text-align: center; 
        padding: 15px 0; 
    }
    .nav-menu li a { 
        margin: 0; 
        font-size: 1.1rem; 
        color: white;
    }

    /* The Toggle Logic */
    .menu-checkbox:checked ~ nav .nav-menu {
        opacity: 1;                  /* Fade in */
        visibility: visible;         /* Make it clickable */
        transform: translateY(0);    /* Slide to final position */
    }

    /* When the main header's menu checkbox is checked, set background and other properties */
    .main-header:has(.menu-checkbox:checked) {
        background: linear-gradient(180deg, #49a1b9 0%, rgb(220,220,220) 100%) !important;
        position: fixed !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }

    /* Prevent scrolling on the main page when menu is open */
    body:has(.menu-checkbox:checked) {
        /* Stop scrolling */
        overflow: hidden;

        /* Mobile scroll lock without the "jump" */
        /* This prevents the user from "dragging" the page behind the menu */
        touch-action: none;

        /* Optional: prevents the page from 'jumping' if the scrollbar disappears */
        /*height: 100vh; */

        /* Ensures the body doesn't shift if the scrollbar disappears */
        padding-right: var(--scrollbar-width, 0px);
    }

    /* Hamburger Transform to X calculation: 
    ----------------------------------------
    Bar Height = 4px, Top/Bott Margin = 4px
    Translate Y px = 
    Bar 1 Half Height: 2px
    Bar 2 Half Height: 2px
    Bar 1 Bot Margin:  4px
    Bar 2 Top Margin:  4px
    ----------------------
                      12px
    */
    
    /* Transform Hamburger to X */
    .menu-checkbox:checked ~ .menu-toggle .bar:nth-child(1) { 
        /* Move down 12px to overlap middle bar exactly, then rotate */
        transform: translateY(12px) rotate(45deg);
    }
    .menu-checkbox:checked ~ .menu-toggle .bar:nth-child(2) { 
        /* Fade out and slide left so it doesn't interfere visually */
        opacity: 0; 
        /*transform: translateX(-10px);*/
    }
    .menu-checkbox:checked ~ .menu-toggle .bar:nth-child(3) { 
        /* Move up 7px to overlap middle bar exactly, then rotate */
        transform: translateY(-12px) rotate(-45deg);
    }
}

@media (max-width: 468px) {
    section {
        width: 98%;
    }
    .header-flex {
        padding: 0 0.35em;
    }
}

@media screen and (max-height: 450px) and (orientation: landscape) {
    .nav-menu li { 
        padding: 2px;
    }
    .nav-menu li a { 
        font-size: 1.0rem;
    }
}

.arrow {
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 15px solid white;
  display: inline-block;
}

.rates-table .separator-row td {
    padding: 4px;
}
.rates-table .separator {
    padding: 4px;
}
.rates-table-br {
    display: none;
}
.rate-week-text-sm{
    display: none;
}
.rate-week-text{
    display: block;
}
.rate {
    font-size: 2.0rem;
    font-weight: 700;
}
.rates-table th {
    text-align: center;
}
.rates-table td.center{
    text-align: center;
}
@media (max-width: 768px) {
    .rate-week-text-sm{
        display: none;
    }
}
@media (max-width: 468px) {
    .rate {
        font-size: 1.0rem;
    }
    .rates-table-br {
        display: inline;
    }
    .rate-week-text{
        display: none;
    }
    .rate-week-text-sm{
        display: inline;
    }
}
.deadline-seb, .deadline-eb {
    font-weight: 700;
}

/* Expired Pricing */
.rate-expired {
    color: rgba(255,0,0,0.25);
}
.rate-wk-expired, .rate-unavailable {
    color: rgba(0,0,0,0.25);
}

.multi-child-warning {
    background-color: #F0822D; 
    color: white; 
    font-size: 24px;
    margin-top: 10px;
}

/* Interserver */
.interserver {
    font-family: 'Inter', sans-serif; /* Or your site's main font */
    font-size: 13px;
    color: #6c757d; /* Subtle grey */
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;	
}

.interserver:hover {
    color: #007bff; /* InterServer blue or your brand color */
    background: rgba(0, 123, 255, 0.05); /* Very faint background tint */
    border: 1px solid rgba(0, 123, 255, 0.2);
    text-shadow: 0 0 1px rgba(0, 123, 255, 0.2);
}

.interserver strong {
    font-weight: 700;
    letter-spacing: -0.2px;
}