/* Please Keep this font import at the very top of any CSS file */
@charset "UTF-8";

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url("https://font.emtech.cc/css/emfont-LXGWFasmartGothicCL?");


@font-face {
  font-family: 'Johnston100-Hairline';
  src: url("https://seep.eu.org/https:/tfl.gov.uk/cdn/static/assets/fonts/Johnston100-Hairline.woff2") format("woff2"), url("https://seep.eu.org/https:/tfl.gov.uk/cdn/static/assets/fonts/Johnston100-Hairline.woff") format("woff"); }
@font-face {
  font-family: 'Johnston100-Light';
  src: url("https://seep.eu.org/https://tfl.gov.uk/cdn/static/assets/fonts/Johnston100-Light.woff2") format("woff2"), url("https://seep.eu.org/https://tfl.gov.uk/cdn/static/assets/fonts/Johnston100-Light.woff") format("woff"); }
@font-face {
  font-family: 'Johnston100-Medium';
  src: url("https://seep.eu.org/https://tfl.gov.uk/cdn/static/assets/fonts/Johnston100-Medium.woff2") format("woff2"), url("https://seep.eu.org/https://tfl.gov.uk/cdn/static/assets/fonts/Johnston100-Medium.woff") format("woff"); }
@font-face {
  font-family: 'Johnston100-Regular';
  src: url("https://seep.eu.org/https://tfl.gov.uk/cdn/static/assets/fonts/Johnston100-Regular.woff2") format("woff2"), url("https://seep.eu.org/https://tfl.gov.uk/cdn/static/assets/fonts/Johnston100-Regular.woff") format("woff"); }
@font-face {
  font-family: 'Astoria Roman';
  src: url("./fonts/Astoria-Roman.woff2") format("woff2"); }
@font-face {
  font-family: 'Chocolate Classical Sans';
  src: url("./fonts/Chocolate-classical-sans-v14-regular.woff2") format("woff2"); }

/* Header */
    header {
        position: sticky;
        top: 0;
        font-family: 'Johnston100-Regular', 'Alata', 'Noto Sans TC', sans-serif; 
        color:  white; 
    }
    h1 { text-align: center; }
    h2 { font-size: 1.3em;   }

/* General Styles */
    body { 
        margin: 0; 
        background-color: #f4f4f4; 

    }

    section { 
      background-color: #ffffff;
      border: 1px solid #dddddd;
      border-radius: 4px;
      padding: 15px;
      margin: 0 auto 40px auto;
      max-width: 1000px; 
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    img { 
      max-width: 100%; height: auto; border-radius: 0px; 
    }

/* Two-coloured Section Styles */
        .nw-dc-section {
            background: linear-gradient(to right, #01ab4e 0%, #01ab4e 40%, #f37821 0%, #f37821 60%);
            color: white;
            text-align: left;
        }

        .nw-dc-section1 {
            background: linear-gradient(to top, #f37821 20%, white 0%, white 90%, #01ab4e 0.5%);
            color: #6b3e97;
            text-align: left;
        }

        .cv-dc-section {
            background: linear-gradient(to top, #0060af 0%, #0060af 30%, #d50001 0%, #d50001 70%);
            color: white;
            text-align: left;
        }
/* Nav Button */
        .nav-button {
            background-color: transparent;
            color: white;
            font-family: 'Johnston100-Medium', 'Alata', 'Noto Sans TC', sans-serif; 
            border: none;
            cursor: pointer;
            width: 100%;
            text-align: left;
        }
        .nav-button:hover {
            text-shadow: 1px 1px 3px rgba(0,150,150,0.5);
        }
        .dropdown-content {
            display: none;
            background-color: transparent;
            width: 100%;
            position: absolute;
            top: 100%;
            left: 0;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1000;
            opacity: 0;
            transform: translateY(-10px);
            /* MODIFIED: Added background-color to the transition for a smooth effect */
            transition: max-height 0.8s ease-in-out, opacity 0.8s ease, transform 0.8s ease, background-color 0.4s ease-in-out;

        }
        .dropdown-content.show {
            display: block;
            align-items: center;
            flex-wrap: wrap;
            opacity: 1;
            transform: translateY(0);
        }
        .dropdown-content a {
            display: block;
            color: #ffffff;
            background-color: transparent;
            padding: 20px 20px;
            text-decoration: none;
            text-align: left;
            -webkit-transition: 0.8s;
            -moz-transition: 0.8s;
            -o-transition: 0.8s;
            -ms-transition: 0.8s;
            transition: 0.8s  ease;
            flex-shrink: 0;
        }
        .dropdown-content a:hover {
            color: #ffffff;
            background-color: rgba(161,142,91,0.8);
        }
        .collapse-container {
            background-color: transparent;
            width: auto;
            display: flex;
            justify-content: flex-start;
            transition: 0.8s ease;
            flex-shrink: 0;
        }
        .collapse-button {
            display: block;
            color: #ffffff;
            background-color: transparent;
            padding: 10px 20px;
            text-decoration: none;
            text-align: left;
            font-size: 14px;
            cursor: pointer;
            border: none;
            width: auto;
            -webkit-transition: 0.8s;
            -moz-transition: 0.8s;
            -o-transition: 0.8s;
            -ms-transition: 0.8s;
            transition: 0.8s ease;
        }
        .collapse-button:hover {
            background-color: rgba(161,142,91,0.8);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

/* Submenu Toggling */
    .submenu {
        /* Hide by default and prepare for transition */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.8s ease-in-out;
    }

    .submenu.show {
        /* Expand to reveal content */
        max-height: 500px; /* Adjust if your submenu is taller */
    }
    
    .submenu a {
        /* Style for submenu links */
        font-size: 0.9em; /* Slightly smaller font */
        padding-top: 8px;
        padding-bottom: 8px;
    }

/* Status Bar Info Cycling */
    .info-box {
        background-color: #e6f7ff;
        border: 1px solid #91d5ff;
        border-radius: 4px;
        padding: 0px;
        margin: 0 auto 40px auto;
        max-width: 900px;
        text-align: center;
    }

    .loading-indicator {
        display: none;
        margin: 5px 0;
        color: #007BFF;
        font-weight: 500;
    }
    .loading-indicator.show {
        display: block;
    }
    .error-message {
        color: #dc3545;
        margin: 5px 0;
        padding: 8px;
        background: #f8d7da;
        border-radius: 4px;
        display: none;
    }
    .error-message.show {
        display: block;
    }

    #runwayInfo { 
        transition: opacity 0.5s; 
        color: white;
        display: flex; 
        align-items: center; 
        gap: 4px; 
    }
    .runway-icon { width: 16px; height: 14px; }
    #status-wind, #status-temp, #status-humidity, #status-visibility {
    transition: opacity 0.5s ease;
    }

/* Container for slider-style image viewers */
    .image-viewer-container {
        position: relative;
    }

/* Wrapper and Slider Styles */
    .wrapper {
      min-height: 100%;
    }

    .slider-container {
        position: relative;
        max-width: 1000px;
        max-height: 720px;
        margin: auto;
        overflow: hidden;
    }

/* Wrapper for the main content */
    .main-content-wrapper {
        display: flex;
        flex-direction: column;
        gap: 40px; /* Space between .gridback elements */
    }

/* Body container to hold sidebar and main content */
    #body-container {
        margin: 0 auto 40px auto;
        max-width: 1000px;
        display: flex;
        flex-direction: row; /* Arrange items horizontally */
        justify-content: center; /* Center the flex items */
        gap: 20px; /* Space between sidebar and main content */
        padding: 0; /* Top and bottom padding for the whole section */
    }


/* Tiles */
#tile_container {
        margin: 0 auto;
        max-width: 960px;
        height: auto;
        font-family: 'Astoria Roman', 'Chocolate Classical Sans', sans-serif;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 20px; 
    }

.tile {
        width:300px;
        height:300px;
        position:relative;
    }

.tile_image {
        width: 100%;
        height: 100%;
}

.tile_image img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Crops image to fill container, centered */
        position: absolute;
}

.tile_triangle{
        width: 0;
        height: 0;
        /* This creates a diagonal overlay from top-left to bottom-right */
        border-top: 300px solid rgba(0,150,150,0.3);
        border-right: 300px solid transparent;
        position: absolute;
        top: 0PX;
        left: 0;
        z-index: 2; /* Stacking order */
        transition: border-color 0.4s ease; /* Animate the color change */
}

.tile_triangle:hover{
        border-top-color: transparent; /* Makes the triangle disappear on hover */
}

    .tile_title {
        font-size:23px;
        font-weight:500;
        color:#ffffff;
        position:absolute;
        top: 120px; /* Use top for positioning */
        left: 20px;  /* Use left for positioning */
        z-index: 3;  /* Ensure it's on top of the triangle */
        pointer-events: none; /* Allow clicks to pass through to the link */
    }

    .tile_sub {
        font-size:14px;
        font-weight:300;
        color:#ffffff;
        position:absolute;
        top: 152px;  /* Use top for positioning */
        left: 32px;   /* Use left for positioning */
        z-index: 3;   /* Ensure it's on top of the triangle */
        pointer-events: none; /* Allow clicks to pass through to the link */
    }


/* Menu Bar */
#orig-menubar{
    width:150px;
    padding:0px 0px;
    color:#fff;
    font-family: 'Astoria Roman', 'Chocolate Classical Sans', sans-serif;
    font-size:20px;
    font-weight:300;
    flex-shrink: 0; /* Prevent sidebar from shrinking */
    background-color: rgba(0,0,0,0.3);
    overflow-y: auto; /* FIXED: Allows scrolling for tall menus */
    -webkit-backdrop-filter: blur(10px); 
    -moz-backdrop-filter: blur(10px); 
}

#glass{
    -webkit-filter: blur(4px);
	-ms-filter: blur(4px);
  	filter: blur(4px);
}

div#menu-top {
	font-size:20px;
	padding:15px 20px;
/*	border-bottom:1px solid #222222;*/
}

#orig-menubar ul{
    margin:0;
    padding:0;
    list-style:none;
}

#orig-menubar ul a {
    display:block;
        color:#ffffff;
        text-decoration:none;
    padding:20px 20px;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        -ms-transition: 0.3s;
        transition: 0.8s  ease;
}

#orig-menubar ul a:hover{
        color:#ffffff;
    background-color: rgba(161,142,91,0.80);
}

/* Menu Bar Toggle */
#menu-toggle {
    display: none; /* Hidden by default on large screens */
    width: 100%;
    padding: 15px 20px;
    background-color: rgba(0,0,0,0.5); /* Match the menu's aesthetic */
    color: #fff;
    font-family: 'Astoria Roman', 'Chocolate Classical Sans', sans-serif;
    font-size: 20px;
    font-weight: 300;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background-color 0.8s ease;
}

#menu-toggle:hover {
    background-color: rgba(161,142,91,0.80); /* Match link hover effect */
}

/* Grid */
div.gridback {
	font-family: 'Astoria Roman', 'Chocolate Classical Sans', sans-serif;
	font-size: 20px;
	font-weight: 300;
	color:#000000;
    background-color:  rgba(0,0,0,0.3);
    padding: 20px 20px;
    margin:0;
	width: 980px;
	height:auto;
}

div.categorytitle {
	font-family: 'Astoria Roman', 'Chocolate Classical Sans', sans-serif;
	font-size: 40px;
	font-weight: 300;
	color:#ffffff;
	margin-bottom:10px;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        -ms-transition: 0.5s;
        transition: 0.5s  ease;
}

.container {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}

.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12 {
  margin-bottom: 0; /* Replaced by gap */
  color:#ffffff;
}

.grid0px, .grid10px, .grid20px {
  margin-bottom: 0; /* Replaced by gap */
}

.gridimage1, .gridimage2, .gridimage3, .gridimage4, .gridimage5, .gridimage6, .gridimage6s, .gridimage7, .gridimage8, .gridimage9, .gridimage10, .gridimage11, .gridimage12, .gridimage420 {
  float: left;
  margin-bottom: 0;
        object-fit: cover; /* Crops image to fill container, centered */
}

.grid1 {width: 60px;}
.grid2 {width: 140px;}
.grid3 {width: 220px;}
.grid4 {width: 300px;}
.grid5 {width: 380px;}
.grid6 {width: 460px;}
.grid7 {width: 540px;}
.grid8 {width: 620px;}
.grid9 {width: 700px;}
.grid10 {width: 780px;}
.grid11 {width: 860px;}
.grid12 {width: 940px;}

.gridimage6 {
	width: 460px; height:220px;
}

.gridimage3 {
	width: 220px; height:220px;
}

.gridimage4 {
	width: 300px; height:220px;
}

.gridimage5 {
	width: 380px; height:220px;
}

.gridimage12 {
	width: 940px; height:220px;
}

/* Grid Figure */
figure, div.figure {
	position: relative;
	overflow: hidden;
}

figcaption {
	position: absolute;
	bottom: -100%;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,150,150,0.2);
	-webkit-transition: .3s;
	transition: 0.8s  ease;
	opacity: 1;
}

figure:hover figcaption {
	top: 0;
	left: 0;
}

div.figcaption {
	position: absolute;
	bottom: -100%;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s  ease;
	opacity: 1;
}

div.figure:hover figcaption {
	bottom: 0;
	left: 0;
}

div.cap {
	font-family: 'Astoria Roman', 'Chocolate Classical Sans', sans-serif;
	font-size:16px;
	font-weight:300;
	color:#eeeeff;
	text-align:left;
	padding: 8px 0 0 70px;
}

div.captitle {
	font-family: 'Astoria Roman', 'Chocolate Classical Sans', sans-serif;
	font-size:26px;
	font-weight:500;
	color:#ffffff;
	text-align:center;
	padding: 50px 0 5px;
}


div.cap3 {
	font-family: 'Astoria Roman', 'Chocolate Classical Sans', sans-serif;
	font-size:14px;
	font-weight:300;
	color:#eeeeff;
	text-align:left;
	padding: 8px 0 0 30px;
}

div.captitle3 {
	font-family: 'Astoria Roman', 'Chocolate Classical Sans', sans-serif;
	font-size:22px;
	font-weight:400;
	color:#ffffff;
	text-align:center;
	padding: 70px 0 5px;
}

figcaption h3 {
	padding: 5px 0 0;
	font-size: 18px;
}
		
figcaption p {
	font-size: 13px;
}

/* Gallery */
.gallery img {
	border: 7px solid #fff;
	color:#ffffff;
}
.gallery{
	margin:10px 5% 30px;
}
.gallery-single img{
	width:98%;
	margin:0px 1% 15px 1%;
}
.gallery-double img{
	width: calc(96% /2);
	height: 100%;
	float:left;
	margin:0px 1% 20px 1%;
}
.gallery-double-mix .tate img{
	width: calc((( 96% - 40px) * (4 / 13) ) + 20px);
	height: 100%;
	float:left;
	margin:0px 1% 20px 1%;
}
.gallery-double-mix .yoko img{
	width: calc((( 96% - 40px) * (9 / 13) ) + 20px);
	height: 100%;
	float:left;
	margin:0px 1% 20px 1%;
}
.gallery-triple img{
	width: calc(94% /3);
	height: 100%;
	float:left;
	margin:0px 1% 25px 1%;
}
.l-gallery-single-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1000px;
            margin: 0 auto;
            padding: 15px;
}
.l-gallery-single img{
	width: 100%;
            padding: 10px;
}
.r-gallery-single-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
}
.r-gallery-single img{
	width:100%;
}

.f-i-text{
	text-align: left;
	font-family: 'Astoria Roman', 'Chocolate Classical Sans', sans-serif;
	margin: 5px 0px 0px 5px;
}
.f-i-text h1{
	text-align: left;
	font-size: 30px;
	font-weight: 600;
}
.f-i-text p, .f-i-text a{
	font-size: 16px;
	font-weight: 200;
}

.h-text p{
	text-align: center;
	color:#ffffff;
	font-family: 'Astoria Roman', 'emfont-LXGWFasmartGothicCL', 'Chocolate Classical Sans', sans-serif;
	font-size: 14px;
	font-weight: 300;
	margin:10px 0px 10px 0px;
}
.h-text h1{
	text-align: center;
	color:#ffffff;
	font-family: 'Astoria Roman', 'emfont-LXGWFasmartGothicCL', 'Chocolate Classical Sans', sans-serif;
	font-size: 25px;
	font-weight: 500;
	margin:10px 0px 10px 0px;
}
.h-text h2{
	text-align: center;
	color:#ffffff;
	font-family: 'Astoria Roman', 'emfont-LXGWFasmartGothicCL', 'Chocolate Classical Sans', sans-serif;
	font-size: 20px;
	font-weight: 300;
	margin:0px 0px 20px 0px;
}

.hp-text h1{
	text-align: center;
	font-family: 'Astoria Roman', 'Chocolate Classical Sans', sans-serif;
	font-size: 35px;
	font-weight: 500;
	margin:10px 0px 10px 0px;
}
.hp-text p{
	text-align: center;
	font-family: 'Astoria Roman', 'Chocolate Classical Sans', sans-serif;
	font-size: 14px;
	font-weight: 200;
	margin:5px 0px 10px 0px;
}

.t-i-text{
	text-align: left;
	font-family: 'Astoria Roman', 'emfont-LXGWFasmartGothicCL', 'Chocolate Classical Sans', sans-serif;
	margin: 5px 0px 0px 5px;
}
.t-i-text h1{
	text-align: left;
	font-size: 60px;
	font-weight: 700;
}
.t-i-text h2{
	font-size: 40px;
	font-weight: 700;
}
.t-i-text p{
	font-size: 18px;
	font-weight: 500;
}

.i-text{
	text-align: left;
	font-family: 'Astoria Roman', 'Chocolate Classical Sans', sans-serif;
	margin: 5px 0px 0px 5px;
}
.i-text h1{
	text-align: left;
	font-size: 30px;
	font-weight: 500;
}
.i-text h2{
	text-align: left;
	font-size: 25px;
	font-weight: 500;
}
.i-text p{
	font-size: 16px;
	font-weight: 200;
}
.i-text px{
	font-size: 16px;
	font-weight: 600;
}

.l-i-text{
	text-align: left;
	font-family: 'Astoria Roman', 'Chocolate Classical Sans', sans-serif;
	max-width: 500px;
	margin: 10px 0px 0px 10px;
}
.l-i-text h1{
	text-align: left;
	font-size: 30px;
	font-weight: 500;
}
.l-i-text p{
	font-size: 16px;
	font-weight: 200;
}

/* Footer */
    .footer {
      font-family: 'Aboreto', serif;
      position: absolute;
      width: 100%;
      height: 50px;
      margin-top: -50px;
      background-color: black;
      color: white; /* Added for visibility on black background */
      padding: 10px 0; /* Added for spacing */
    }

/* Scroll to Top Button */
    #scrollToTopBtn {
        display: none; /* Hidden by default */
        position: fixed;
        bottom: 80px; /* Positioned to avoid the footer */
        right: 10px;
        z-index: 99;
        border: none;
        outline: none;
        background-color: rgba(0, 150, 150, 0.3);
        color: white;
        cursor: pointer;
        padding: 15px;
        font-size: 18px;
        transition: opacity 0.8s ease, visibility 0.8s ease-in;
        opacity: 0;
        visibility: hidden;
    }

    #scrollToTopBtn.show {
        display: block;
        visibility: visible;
        opacity: 1;
            transition: 0.8s ease;
    }

    #scrollToTopBtn:hover {
        background-color: rgba(0, 150, 150, 0.5);
    }

/* --- Custom Scroll Effects --- */
    #page-header {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(black 8px, transparent);
        background-color: transparent;
        transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        z-index: 1000; /* Ensure it is on top of other content */
    }

    #page-header.scrolled {
        background-color: black;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* ADDED: Styles for dropdown when header is scrolled */
    #page-header.scrolled .dropdown-content {
        background-color: #f9f9f9; /* Original background */
    }

    #page-header.scrolled .dropdown-content a {
        background-color: #333; /* Original background */
    }

    #page-header.scrolled .collapse-container {
        background-color: #333; /* Original background */
    }

    #page-header.scrolled .collapse-button {
        background-color: #333; /* Original background */
    }

    #page-header.scrolled .dropdown-content a:hover {
        background-color: rgba(161,142,91); /* Original hover background */
    }

    #page-header.scrolled .collapse-button:hover {
        background-color: rgba(161,142,91); /* Original hover background */
    }

/* Page Header Banner Height */
    #scroll-content {
        position: relative;
        z-index: 2; /* Position on top of the fixed banner */
        margin-top: 400px; /* Must be the same as the banner's height */
        background-color: #f4f4f4; /* Match body background to hide banner during scroll */
    }

/* --- Dropdown Styles for Non-Scrolled Header --- */

/*  This section applies a semi-transparent background to the header and
  its dropdown menu when the menu is open AND the user has not scrolled down. */

/*  NOTE: This rule requires JavaScript to add the 'dropdown-open' class to the
  #page-header element when the dropdown is toggled. This allows the header's
  background to change. */
#page-header.dropdown-open:not(.scrolled) {
  background: linear-gradient(black 8px, rgba(0,0,0,0.5));
  /* Ensures a smooth transition for the background change */
  transition: background 0.8s ease;
}

/* Styles the dropdown container and its contents when it is visible (.show)
  within a non-scrolled header. */

#page-header:not(.scrolled) .dropdown-content.show,
#page-header:not(.scrolled) .dropdown-content.show .collapse-container,
#page-header:not(.scrolled) .dropdown-content.show a,
#page-header:not(.scrolled) .dropdown-content.show .collapse-button {
  background-color: rgba(0, 0, 0, 0.3);
}

/*  Maintains the existing hover effect for links and buttons within the
  dropdown to ensure a consistent user experience. */
#page-header:not(.scrolled) .dropdown-content.show a:hover,
#page-header:not(.scrolled) .dropdown-content.show .collapse-button:hover {
  background-color: rgba(161, 142, 91, 0.8);
}

#page-header:not(.scrolled) .page-header {
        background-color: black;
}

/* --- RESPONSIVE DESIGN --- */

/* On large tablets and below, adjust main layout */
@media (max-width: 1024px) {
    #body-container {
        align-items: flex-start; 
        padding: 0 0px; 
        gap: 12px; 
    }

    #orig-menubar {
        width: auto; 
        max-width: 150px; 
    height: full;
    }

    .main-content-wrapper {
        flex: 3 1 300px; 
        min-width: 0; 
    }

    div.gridback {
        width: 100%; 
        padding: 15px;
    }

    .container {
        width: auto; 
        justify-content: center; /* Center flex items when they wrap */
    }

    .gridimage1, .gridimage2, .gridimage3, .gridimage4, .gridimage5, .gridimage6, .gridimage6s, .gridimage7, .gridimage8, .gridimage9, .gridimage10, .gridimage11, .gridimage12, .gridimage420 {
        /* Width is now controlled by their base class and flexbox wrapping */
        height: auto; /* Allow height to adjust to maintain aspect ratio */
        margin-left: 0; /* Handled by flex gap */
    }

.t-i-text h1, .t-i-text h2, .t-i-text p{
	text-align: center;
}            
  
.i-text h1, .i-text h2, .i-text p{
	text-align: center;
}
}

/* On medium screens (tablets), convert menu and adjust banner */
@media (max-width: 768px) {
    .status-bar-weather > div:not(:last-child) { display: none; }
    .status-bar-weather { gap: 0.75rem; }
    

/* Convert sidebar to a dropdown menu */
    #body-container {
        flex-direction: column; /* Stack menu and content vertically */
        align-items: stretch;   /* Make children fill the width */
        gap: 20px;              /* Space between menu and content */
    }

    #orig-menubar {
        width: 100%;       /* Occupy full width */
        max-width: none;   /* Override desktop/large tablet constraints */
        height: auto;
        overflow: visible; /* Ensure dropdown isn't clipped */
    }

/* Show the toggle button on mobile */
    #menu-toggle {
        display: block;
    }

/* Hide the menu list by default on mobile */
    #orig-menubar ul {
        display: none;
    }

    #orig-menubar.menu-open ul {
        display: block;
    }

.r-gallery-single-container {
	flex-direction: column;
}

.r-gallery-single img{
	padding: 0px;
}

.l-gallery-single-container {
	flex-direction: column;
}

.l-gallery-single img{
	padding: 0px;
}

.t-i-text h1, .t-i-text h2{
	text-align: center;
}               
.t-i-text p{
	text-align: center;
	font-size: 16px;
}         
  
.i-text h1{
	text-align: center;
	max-width: 350px;
	font-size: 26px;
}
.i-text h2{
	text-align: center;
	max-width: 350px;
	font-size: 20px;
}
.i-text p, .i-text px{
	text-align: center;
	max-width: 350px;
	font-size: 16px;
}

.l-i-text h1{
	text-align: center;
	max-width: 350px;
	font-size: 26px;
}
.l-i-text p{
	text-align: center;
	max-width: 350px;
	font-size: 16px;
}

/* TILE STYLES @ 768px */
#tile_container {
        align-items: center;    /* Center the stacked tiles */
        max-width: 480px;   /* Initial smaller size on load */
        gap: 0px;              /* Add space between them */
    }

    .tile {
        width: 140px;   /* Initial smaller size on load */
        height: 170px;
        background-color: rgba(0, 0, 0, 0.5); /* 60% black transparent */
        transition: width 0.4s ease, height 0.4s ease; /* Animate resizing */
    }

    .tile_image {
        width: 140px;   /* Initial smaller size on load */
        height: 170px;
    }

    .tile_title {
        font-size: 18px;
        text-align: center;
        left: 10px;
    }

/* Hide tile elements by default on mobile */
    .tile_sub,
    .tile_triangle {
        display: none;
        opacity: 0;
        transition: opacity 0.8s ease;
    }

/* This class is added by JavaScript to expand the tile */
    .tile.expanded {
        width: 300px;
        height: 300px;
    }

/* When expanded, show the triangle again */
    .tile.expanded .tile_triangle {
        display: block;
        opacity: 1;
        /* The triangle's border size is already set for a 300px container */
    }
    
    /* When expanded, show the text again */
    .tile.expanded .tile_title,
    .tile.expanded .tile_sub {
        display: block;
        opacity: 1;
    }

/* --- Force grid image sizes --- */
    .gridimage6 {
        width: 460px;
        height: 220px;
    }

    .gridimage3 {
        width: 220px;
        height: 220px;
    }

    figure figcaption, div.figcaption, figure:hover figcaption {
        bottom: 0; /* Force figcaption to be visible, overriding the hover effect */
        left: 0;
    }
}

/* On small screens (mobile), stack controls and grid items vertically */
@media (max-width: 600px) {
    .controls { 
        flex-direction: column; 
        align-items: stretch; 
    }

#tile_container {
        align-items: center;    /* Center the stacked tiles */
        max-width: 400px;   /* Initial smaller size on load */
        gap: 0px;              /* Add space between them */
    }

    .tile {
        width: 120px;   /* Initial smaller size on load */
        height: 150px;
        background-color: rgba(0, 0, 0, 0.5); /* 60% black transparent */
        transition: width 0.4s ease, height 0.4s ease; /* Animate resizing */
    }

    .tile_image {
        width: 120px;   /* Initial smaller size on load */
        height: 150px;
    }

}