/*════════════════════════════════════════════════════════════════════════════
 * header.css
 * Extracted from hackya_style.css — all rules related to the site header,
 * primary nav (.top-nav), sticky nav (.sticky-nav), legacy nav (.top-nav-hidden),
 * mini logo (.logo-hidden), nav hover bars (#lit / #lit2), breadcrumbs,
 * login/settings panel, world clock, and weather widget.
 *
 * Load order: after hackya_style.css (or replace the relevant sections in it).
 *════════════════════════════════════════════════════════════════════════════*/


/*────────────────────────────────────────────────────────────────────────────
 * MAIN HEADER  (.site-header)
 * The full-height header containing the animated logo, cog button, and
 * primary nav. It scrolls away with the page content.
 * Background: blue→purple diagonal gradient (matching sticky-nav for continuity).
 * text-align:center: centers the logo.
 * position:relative: needed so .logo-hidden (position:fixed inside the 3D
 *   context) behaves correctly — wait, .logo-hidden is outside #perspective
 *   so this only affects elements inside .site-header itself.
 *────────────────────────────────────────────────────────────────────────────*/

.site-header {
	background: linear-gradient(33deg, #00a2ff 13%, #38bfff 53%, #8d5eff 90%);
	width: 100%;
	text-align: center;
	position: relative;
}

/* logo */
.site-header h1 {
	margin: .5em 0 0 0;
}


/* Main logo 360 rotation effect */

/* 1. Perspective on the parent is mandatory for 3D */
.logo-scene {
  perspective: 1000px; 
  
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 2. Define the animation keyframes */
@keyframes intro-rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

/* 3. Apply the animation to the logo */
.logo-3d {
  width: 100%;
  height: auto;
  transform-style: preserve-3d;
  transform-origin: center center;
  /* - 1.5s: Duration
     - ease-out: Starts fast, slows down
     - 0.5s: Delay before starting
     - forwards: Keeps the final state (360deg)
  */
  animation: intro-rotate 1.5s ease-out 0.5s forwards;
}



/*────────────────────────────────────────────────────────────────────────────
 * PRIMARY NAV  (.top-nav)
 * The nav bar inside #masthead > .site-header (inside #perspective).
 * This nav scrolls away with the header — it is NOT sticky.
 * position:relative is needed so #lit (the hover underline bar, position:absolute)
 * positions itself relative to the nav, not the page.
 * border-top: subtle separator between logo and nav links.
 * animation: drop — nav drops in from above on page load.
 *────────────────────────────────────────────────────────────────────────────*/

.top-nav {
	/* position:relative — this nav lives inside .site-header and scrolls with it.
	   It is NOT sticky. The sticky version is .sticky-nav (outside #perspective).
	   position:fixed was a failed earlier attempt and has been removed. */
	position: relative;
	display: flex;
	justify-content: center;
	background: linear-gradient(33deg, #00a2ff 13%, #38bfff 53%, #8d5eff 90%);
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	animation: .5s ease-out 0s 1 drop;
}

#lit {
	/* highlight bottom border */
	height: .085em;
	background: rgba(255, 255, 255, 0.5);
	position: absolute;
	transition: left .2s ease-in;
}

/* Hover underline bar for .sticky-nav — identical behaviour to #lit in .top-nav */
#lit2 {
	height: .085em;
	background: rgba(255, 255, 255, 0.5);
	position: absolute;
	transition: left .2s ease-in;
}

.top-nav ul {
	display: flex;
	list-style: none;
	padding: 0;
	margin: .5em 0;
	/* position:relative so #lit (position:absolute) anchors to the ul, not .top-nav */
	position: relative;
}

.top-nav ul li {
	margin: 0 .5em;
}

.top-nav a {
	display: inline-block;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 1em;
	color: white;
	text-decoration: none;
}

.top-nav a:hover,
.nav a:focus,
.nav a:active {
	color: #00ffde;
}


/*────────────────────────────────────────────────────────────────────────────
 * STICKY NAV  (.sticky-nav)
 * Restored from the original 2017 theme. A fixed-position copy of the primary
 * nav that lives outside #perspective. Unlike .top-nav (inside #perspective),
 * this nav is not affected by the CSS transform on .container.
 *
 * Why a separate element instead of making .top-nav sticky?
 *   CSS transforms on ancestor elements break position:fixed for all descendants.
 *   .container gets transform:translateX(-290px) rotateY(-15deg) when the side
 *   panel opens. Any fixed element inside would position relative to .container,
 *   not the viewport. Placing .sticky-nav outside #perspective solves this.
 *
 * Scroll states (toggled by JS scroll handler in hackya_17.js):
 *   Default (no class / .hide):      visibility:hidden, opacity:0
 *   .scroll-up:                       visible, drop animation (falls from top)
 *   .scroll-down or .hide:            hidden again
 *
 * Appears when user scrolls UP past 104px — the original header has scrolled
 * away and the sticky nav provides persistent navigation access.
 *────────────────────────────────────────────────────────────────────────────*/

/* ── Sticky nav (restored from original — fixed nav outside #perspective) ── */

.sticky-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 12;
	background: linear-gradient(33deg, #00a2ff 13%, #38bfff 53%, #8d5eff 90%);
	display: flex;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
}

.sticky-nav.scroll-up {
	animation: .5s ease-out 0s 1 drop;
	visibility: visible;
	opacity: 1;
}

.sticky-nav.scroll-down,
.sticky-nav.hide {
	visibility: hidden;
	opacity: 0;
}

.sticky-nav ul {
	display: flex;
	list-style: none;
	padding: 0;
	margin: .5em 0;
	/* position:relative so #lit2 (position:absolute) anchors to the ul, not the viewport */
	position: relative;
}

.sticky-nav ul li {
	margin: 0 .5em;
}

.sticky-nav a {
	display: inline-block;
	box-sizing: border-box;
	padding: 1em;
	color: white;
	text-decoration: none;
}

.sticky-nav a:hover {
	color: #00ffde;
}


/*────────────────────────────────────────────────────────────────────────────
 * LEGACY NAV RULES (.top-nav-hidden)
 * These rules are from the original 2017 theme where .top-nav-hidden was
 * the sticky nav bar. The element has been repurposed as the right-side
 * comments panel. These base rules are now largely overridden by perspective.css
 * which resets ALL positioning and scroll-* states with !important.
 * They are kept here for reference and as fallback.
 * See perspective.css for the active .top-nav-hidden rules.
 *────────────────────────────────────────────────────────────────────────────*/

/* nav */

.top-nav-hidden {
	position: fixed;
	z-index: 1;
	background: linear-gradient(33deg, #46bcff 9%, #00a1ff 90%, #a37dff 99%);
	width: 100%;
	visibility: hidden;
	opacity: 0;
}

.top-nav-hidden.scroll-down {
	z-index: 2;
	/*animation: .5s ease-out 0s 1 rise;*/
}

.top-nav-hidden.scroll-up {
	animation: .5s ease-out 0s 1 drop;
	transform: translateZ(0) translateX(0) rotateY(0);
	transition: transform 0.4s;
	visibility: visible;
	opacity: 1;
}

.top-nav-hidden.scroll-up.hide {
	opacity: 0;
	z-index: 2;
	visibility: hidden;
}

.top-nav-hidden.tilt.scroll-up {
	animation: none;
	opacity: 0;
}

.top-nav-hidden ul {
	display: flex;
	list-style: none;
	justify-content: center;
	padding: 0;
	margin: .5em 0;
}

.top-nav-hidden ul li {
	margin: 0 .5em;
}

.top-nav-hidden a {
	display: inline-block;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 1em;
	color: white;
	text-decoration: none;
}

.top-nav-hidden a:hover,
.nav a:focus,
.nav a:active {
	color: #0053bd;
}

.top-nav-hidden.scroll-up {
	z-index: 12;
}

.top-nav-hidden.scroll-up {
	z-index: 12;
}


/*────────────────────────────────────────────────────────────────────────────
 * MINI LOGO  (.logo-hidden)
 * Fixed small logo that appears in the sticky nav area on scroll-up.
 * Animates in/out from the left.
 *────────────────────────────────────────────────────────────────────────────*/

.logo-hidden {
	position: fixed;
	top: 4px;       /* nudge down to vertically center in sticky-nav bar */
	left: 10px;
	margin: 0;
	font-size: 1rem;
	width: 60px;
	height: 60px;
	overflow: hidden;
	z-index: 201;
	/* hidden by default — animation + visibility controlled by state classes below */
	opacity: 0;
	visibility: hidden;
}

.logo-hidden svg {
	width: 100% !important;
	height: 100% !important;
	display: block;
}

/* Slide OUT to the left — animation provides the motion,
   fill-mode:forwards holds the final opacity:0 state after it ends */
.logo-hidden.hide {
	animation: .5s ease-in 0s 1 slide-out forwards;
	visibility: visible; /* must be visible during animation */
}

.logo-hidden.scroll-down {
	animation: .5s ease-in 0s 1 slide-out forwards;
	visibility: visible;
}

/* Slide IN from the left */
.logo-hidden.scroll-up {
	animation: .5s ease-out 0s 1 slide-in forwards;
	visibility: visible;
	opacity: 1;
}

.logo-hidden a {
	padding: 0 !important;
	position: static;
	display: block;
	width: 100%;
	height: 100%;
}


/* Breadcrumb */

#breadcrumbs {
	list-style: none;
	overflow: hidden;
	margin-bottom: 0;
}

#breadcrumbs li {
	display: inline-block;
	vertical-align: middle;
	margin-right: .375em;
}

#breadcrumbs .separator {
	font-size: 1em;
	font-weight: 600;
	display: inline-block;
	margin-bottom: .125em;
}


/*════════════════════════════════════════════════════════════════════════════
 * LOGIN / SETTINGS PANEL
 *
 * The login panel is a 3D flip-down drawer at the very top of the page.
 * It uses CSS perspective + rotateX to simulate a panel flipping down.
 *
 * Z-index stack (login area):
 *   #login-perspective  z:202  — panel container
 *   #login              z:203  — cog button (always above panel)
 *
 * Key animation: #login-area transitions from rotateX(55deg) → rotateX(0deg)
 * when .active is added to #login-perspective.
 * transform-origin: top center — panel hinges from its top edge.
 *════════════════════════════════════════════════════════════════════════════*/

/* Login UI */

#login-perspective {
	perspective: 50em;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 15.5em;
	z-index: 202;  /* above everything */
	pointer-events: none; /* closed: clicks pass through to page */
	overflow: hidden;
}

#login-perspective.active {
	pointer-events: auto; /* open: clicks land on form inputs */
}

#login-area h1 {
	position: absolute;
	top: 0.4em;
	left: 1em;
	z-index: 3;
	opacity: 0;
	transition: opacity 0.15s ease;
}

#login-area::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.3) 2px,
            rgba(0, 0, 0, 0.3) 3px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.3) 2px,
            rgba(0, 0, 0, 0.3) 3px
        );
}

/* login button */

#login {
	position: fixed;
	font-size: 1.5em;
	color: white;
	left: 0;
	top: 5em;
	background: transparent;
	border: 0;
	outline: 0;
	z-index: 203;  /* above #login-perspective(202) so cog always clickable */
	cursor: pointer;
	animation: step-rotate 60s steps(60, end) infinite;
	transition: opacity 0.2s;
}

#login:hover {
	opacity: 0.75;
}

/* login toggle area */

#login-perspective #login-area {
	color: #FFF;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 15.5em;
	box-sizing: border-box;
	overflow: hidden;
	font-size: 1rem;
	visibility: hidden;
	transform-style: preserve-3d;
	transform: translateZ(1em) translateX(0) rotateX(55deg);
	transform-origin: top center;
	transition: transform 0.4s cubic-bezier(0.17, 0.04, 0.03, 0.94) 0s,
	            visibility 0s 0.4s;
}

#login-perspective.active #loginform {
	opacity: 1;
}

#login-perspective.active #login-area h1 {
	opacity: 1;
}

#login-perspective.active #login-area {
	visibility: visible;
	/*background-image: linear-gradient(to bottom, rgba(92, 112, 255, 0.75), rgba(120, 61, 133, 0.75));*/
	background-image: linear-gradient(to bottom, rgba(20, 30, 120, 0.92), rgba(40, 10, 60, 0.92));
	transform-style: preserve-3d;
	transform: translateZ(0) translateX(0) rotateX(0);
	transform-origin: top center;
	transition: transform 0.4s cubic-bezier(0.17, 0.04, 0.03, 0.94) 0s,
	            visibility 0s 0s;
}

/* YouTube background video — fills login-area, behind all content */
#video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s;
	background-color: #000;
}

/* #player div: fill the #video container completely */
#login-perspective #player {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	border: none !important;
	pointer-events: none !important;
}

/* iframe inside #player: oversized for 16:9 cover fill */
#login-perspective iframe {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 177.78vh !important; /* vh so it scales with panel height, not width */
	height: 100vh !important;
	min-width: 100% !important;
	min-height: 100% !important;
	transform: translate(-50%, -50%) !important;
	border: none !important;
	pointer-events: none !important;
}

#login-perspective.active #video {
	opacity: 0.5;
}

/* login-area content z-index handled per-element below */

#loginform {
	position: absolute;
	top: 0.5em;
	left: 7em;
	z-index: 3;
	width: auto;
	color: #fff;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.login-remember,
.login-submit {
	margin: 0 0 0.25rem 0;
}

#rememberme {
	margin-left: 1.5em;
}

.login-username,
.login-password {
	margin-left: 1rem;
}

#user_login,
#user_pass {
	width: 6em;
	vertical-align: top;
	display: table-cell;
	margin-top: 2px;
	padding: .25em .5em;
	border-radius: 0.5em;
	transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
}

#user_login:focus,
#user_pass:focus {
	border-color: rgba(82, 168, 236, 0.8);
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	outline: 0;
	outline: thin dotted \9;
	/* IE6-9 */
	padding: 0.25em;
	width: 10em;
}

.login-username:before,
.login-password:before {
	content: '';
	display: block;
	float: left;
	width: 1.5em;
	height: 1.5em;
	margin: .3em .5em 0 0;
	background-color: #43d2ff;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	z-index: 1;
	flex-shrink: 0;
}

.login-username:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M230.92%20212c-15.23-26.33-37.57-45.7-63.4-54.19a72%2072%200%201%200-79%200C62.65%20166.29%2040.3%20185.66%2025.08%20212a8%208%200%201%200%2013.85%208c18.84-32.56%2052.14-52%2089.07-52s70.23%2019.44%2089.07%2052a8%208%200%201%200%2013.85-8ZM72%2096a56%2056%200%201%201%2056%2056A56.06%2056.06%200%200%201%2072%2096Z%22/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M230.92%20212c-15.23-26.33-37.57-45.7-63.4-54.19a72%2072%200%201%200-79%200C62.65%20166.29%2040.3%20185.66%2025.08%20212a8%208%200%201%200%2013.85%208c18.84-32.56%2052.14-52%2089.07-52s70.23%2019.44%2089.07%2052a8%208%200%201%200%2013.85-8ZM72%2096a56%2056%200%201%201%2056%2056A56.06%2056.06%200%200%201%2072%2096Z%22/%3E%3C/svg%3E");
}

.login-password:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M208%2080h-32V56a48%2048%200%200%200-96%200v24H48A16%2016%200%200%200%2032%2096v112a16%2016%200%200%200%2016%2016h160a16%2016%200%200%200%2016-16V96a16%2016%200%200%200-16-16ZM96%2056a32%2032%200%200%201%2064%200v24H96Zm112%20152H48V96h160v112Zm-80-80a8%208%200%200%200-8%208v24a8%208%200%200%200%2016%200v-24a8%208%200%200%200-8-8Z%22/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M208%2080h-32V56a48%2048%200%200%200-96%200v24H48A16%2016%200%200%200%2032%2096v112a16%2016%200%200%200%2016%2016h160a16%2016%200%200%200%2016-16V96a16%2016%200%200%200-16-16ZM96%2056a32%2032%200%200%201%2064%200v24H96Zm112%20152H48V96h160v112Zm-80-80a8%208%200%200%200-8%208v24a8%208%200%200%200%2016%200v-24a8%208%200%200%200-8-8Z%22/%3E%3C/svg%3E");
}

.login-username label,
.login-password label {
	display: none;
}

#wp-submit {
	width: 12em;
	height: 3em;
	border: 1px solid #898EFB;
	background-color: #6743FF;
	color: #B0BDFF;
	border-radius: .5em;
	cursor: pointer;
}

#wp-submit:hover {
	background-color: #7162FB;
	color: white;
}

#wp-submit:active {
	box-shadow: inset 0 0 0 1px #27496d, inset 0 2px 30px #193047;
	color: white;
}

#perspective {
	transition: margin-top 0.4s cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

#perspective.active {
	margin-top: 15.5em;
}

/* Lock page scroll when login panel is open */
html.scroll-locked,
body.login-open {
	overflow-y: hidden;
}

body {
    overflow-y: scroll; /* always reserve scrollbar column */
}

body.login-open #search-toggle-btn {
	opacity: 0 !important;
	pointer-events: none !important;
}


/*════════════════════════════════════════════════════════════════════════════
 * WORLD CLOCK
 *════════════════════════════════════════════════════════════════════════════*/

#world-clock {
    position: absolute;
    bottom: 9.5em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
}

#world-clock .offices--one {
    display: flex;
    gap: 20px;
    padding: 10px 20px;
    margin-bottom: 0;
}

#world-clock .offices--one__item {
    position: relative;
    display: block;
    width: 70px;
    height: 50px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.55px;
    text-decoration: none;
    text-align: center;
}

/* city name: fade in/out only, never moves */
#world-clock .offices--one__name {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25px;
    line-height: 25px;
    z-index: 1;
    transition: opacity 300ms ease;
}

#world-clock .offices--one__item:hover .offices--one__name {
    opacity: 0;
}

/* horizontal bar: slides up on hover, never disappears */
#world-clock .offices--one__item::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ffffff;
    z-index: 2;
    transition: transform 500ms ease;
}

#world-clock .offices--one__item:hover::before {
    transform: translateY(-24px);
}

/* date: always in position, hidden by default, fades in on hover */
#world-clock .offices__date {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25px;
    line-height: 25px;
    color: #ffffff;
    opacity: 0;
    transition: opacity 300ms ease;
}

#world-clock .offices--one__item:hover .offices__date {
    opacity: 1;
}

/* time: always visible at bottom, never moves */
#world-clock .offices__time {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25px;
    line-height: 25px;
    color: #ffffff;
}

#login-perspective #world-clock {
    opacity: 1;
    transition: opacity 0.3s ease;
}

#login-perspective:not(.active) #world-clock {
    opacity: 0;
}


/*════════════════════════════════════════════════════════════════════════════
 * WEATHER WIDGET
 * Positioned absolute top-right inside #login-area (z:3, above video at z:0).
 * Populated by weather_17.js via OpenWeatherMap API.
 * .weather-wrapper: the outer container (position:absolute, right:1.5em)
 * .forecast: current conditions (city, icon, summary, high/low temps)
 * .weekly: 5-day forecast list, shown/hidden by #weather-toggle button
 * .unit-toggle: C°/F° buttons; active unit shown white/bold, other dimmed
 *════════════════════════════════════════════════════════════════════════════*/

/* ─── Weather Widget ────────────────────────────────────────────────────────── */
/* ── Weather wrapper ─────────────────────────────── */
.weather-wrapper {
    position: absolute;
    top: 1.5em;
    right: 1.5em;
    color: #fff;
    font-size: 1em;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 22em;
}

/* ── Toggle buttons row ──────────────────────────── */
.weather-wrapper header {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.3em;
}

#weather-toggle {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 3px;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    font-size: 0.85em;
    padding: 0.15em 0.5em;
    transition: background 0.2s;
}

#weather-toggle:hover,
#weather-toggle.active {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.unit-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.1em;
    font-size: 0.85em;
}

.unit-toggle button {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 0;
    font-size: 1em;
}

.unit-toggle button:disabled {
    color: #fff;
    font-weight: bold;
    cursor: default;
}

.unit-toggle .divider {
    color: rgba(255,255,255,0.4);
}

/* ── Current forecast — 2 column layout ─────────── */
.forecast {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "city    icon"
        "country icon"
        "summary icon"
        "cont    cont";
    gap: 0 0.8em;
    align-items: center;
    width: 100%;
}

.forecast p { margin: 0; line-height: 1.4; }

.forecast_city {
    grid-area: city;
    font-weight: bold;
    font-size: 1.05em;
}

.forecast_country {
    grid-area: country;
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
}

.forecast_icon {
    grid-area: icon;
    font-size: 2.2em;
    color: #fff;
    text-align: center;
    align-self: center;
}

.forecast_summary {
    grid-area: summary;
    color: rgba(255,255,255,0.85);
}

.forecast_cont {
    grid-area: cont;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em 0.6em;
    margin-top: 0.3em;
    font-size: 0.95em;
}

.forecast_high,
.forecast_low {
    margin: 0;
    display: inline;
}

.temp-label {
    font-size: 0.8em;
    color: rgba(255,255,255,0.6);
    margin-right: 0.2em;
}

.current-temp {
    margin: 0;
    color: rgba(255,255,255,0.9);
    font-size: 1em;
    width: 100%;
}

.forecast_temp { display: none; }

/* ── Weekly forecast — horizontal ───────────────── */
.weekly {
    margin-top: 0.4em;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 0.3em;
    width: 100%;
}

#weekly_list {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}

#weekly_list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15em;
    font-size: 0.8em;
}

.weekly-day {
    color: rgba(255,255,255,0.7);
}

.weekly-icon {
    font-size: 1em;
    color: #fff;
}

.weekly-high {
    color: #ffdd88;
}

.weekly-low {
    color: #88ddff;
}

/* ── Move toggle button below icon ───────────────── */
.forecast_icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
}

.forecast_icon + * { }

#weather-toggle {
    /*order: 99;*/
	margin-top: -1.25rem;
}

.weather-wrapper header {
    /*order: 99;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
    margin-bottom: 0;
}

.forecast {
    grid-template-areas:
        "city    header"
        "country header"
		"cont    cont"
        "summary header";
        
}

.weather-wrapper header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4em;
}


/*════════════════════════════════════════════════════════════════════════════
 * KEYFRAME ANIMATIONS
 *
 * step-rotate:  cog icon slow spin (60s, 60 steps — simulates mechanical rotation)
 * drophead:     login panel flip-in (rotateX 55deg → 0deg, used in perspective.css)
 * drop:         elements falling in from above (nav bar, sticky-nav, search button)
 * rise:         elements rising off-screen upward (scroll-down state)
 * slide-in:     mini-logo slides in from left (scroll-up state)
 * slide-out:    mini-logo slides out to left (hide state)
 *════════════════════════════════════════════════════════════════════════════*/

@keyframes step-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes drophead {
    0%   { transform: translateZ(1em) rotateX(55deg); opacity: 0; }
    100% { transform: translateZ(0)   rotateX(0deg);  opacity: 1; }
}

@keyframes drop {
    0%   { transform: translateY(-3.75em); opacity: 0; }
    100% { transform: translateY(0);       opacity: 1; }
}

@keyframes rise {
    0%   { transform: translateY(0);       opacity: 1; }
    100% { transform: translateY(-3.75em); opacity: 0; }
}

@keyframes slide-in {
    0%   { transform: translateX(-3em); opacity: 0; }
    100% { transform: translateX(0);    opacity: 1; }
}

@keyframes slide-out {
    0%   { transform: translateX(0);    opacity: 1; }
    100% { transform: translateX(-3em); opacity: 0; }
}