/* =====================================================================
   Hotel Varsavuori — home page layout
   Div/flexbox structure (replaces the old table-based layout).
   ===================================================================== */

/* ---------- Base ---------- */
* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #72272B;
}

img {
	border: 0;
}

/* ---------- Text helpers (kept from the legacy theme) ---------- */
.txt  { font-size: 11px; color: #72272B; }
.txt1 { font-size: 12px; color: #F6EDDA; }
.txt2 { font-size: 11px; color: #F6EDDA; }
.txt3 { font-size: 11px; color: #ffffff; }

/* ---------- Links ---------- */
a            { text-decoration: none; color: #BC777A; }
a:hover      { text-decoration: none; color: #72272B; }

a.white      { color: #F6EDDA; }
a.white:hover { color: #DDA9AC; }

a.blue       { color: #ffffff; }
a.blue:hover { color: #a4bed9; }

/* =====================================================================
   Page shell — sidebar + main column
   ===================================================================== */
.page {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: 100vh;
}

/* ---------- Left sidebar ---------- */
.sidebar {
	flex: 0 0 200px;
	background-color: #0A7298;
	background-image: url("pics/ship.jpg");
	background-repeat: no-repeat;
	background-position: center bottom;
	padding-bottom: 120px;        /* leave room for the ship image */
	text-align: center;
}

.sidebar__logo {
	display: block;
	margin: 0;
	height: 152px;                 /* match the logo / bg strip height */
	background-image: url("pics/bg_top.gif");
	background-repeat: repeat-x;    /* bg_top.gif is 1x152 — tiles horizontally */
	background-position: left top;
}

.sidebar__logo img {
	display: block;                /* logo sits at the left; bg fills to the right */
	max-width: 100%;               /* keep wider logos (e.g. mikkeli.gif 204px) inside the sidebar */
}

/* weather widget box under the side menu (inner pages) */
.sidebar__weather {
	margin: 10px 8px 0;
}

/* white 1px frame around the menu (was built from white spacer cells) */
.side-box {
	display: inline-block;
	margin: 0 auto;
	border: 1px solid #ffffff;
	padding: 8px;
	text-align: left;
}

.side-box a {
	display: inline-block;
	padding: 1px 0;
}

.side-box__links {
	margin: 8px 0 0;
	color: #ffffff;
}

.sidebar__home {
	margin: 12px 0;
	text-align: center;
	color: #ffffff;
}

/* =====================================================================
   Main column
   ===================================================================== */
.main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* ---------- Top bar (logo + hotel info + language switch) ---------- */
.topbar {
	display: flex;
	align-items: center;
	gap: 16px;
	background-color: #E0D0B0;
	background-image: url("pics/bg_top.gif");
	background-repeat: no-repeat;
	background-position: left top;
	padding: 4px 8px;
}

.topbar__lang {
	flex: 0 0 auto;
	text-align: center;
	font-size: 11px;
	color: #72272B;
}

.topbar__info {
	flex: 1 1 auto;
	text-align: right;
	font-size: 11px;
	color: #72272B;
}

.topbar__logo {
	flex: 0 0 auto;
	padding: 4px;
}

/* ---------- Navigation menu ---------- */
.navbar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	background-image: url("pics/bg_menu.gif");
	background-repeat: repeat-x;
	font-size: 12px;
}

.navbar a {
	display: block;
	padding: 0 12px;
	line-height: 24px;
	color: #F6EDDA;
}

.navbar__sep {
	width: 4px;
	height: 24px;
}

.divider {
	height: 1px;
	background-color: #E0D0B0;
	font-size: 0;
	line-height: 0;
}

/* ---------- Hero (theme image + welcome text) ---------- */
.hero {
	display: flex;
	align-items: stretch;
	background-color: #72272B;
}

.hero__image {
	flex: 0 0 auto;
}

.hero__image img {
	display: block;
}

.hero__text {
	flex: 1 1 auto;
	max-width: 600px;
	margin: 0 auto;                /* center horizontally */
	padding: 3px 12px;
	font-size: 11px;
	color: #F6EDDA;
	display: flex;
	flex-direction: column;
	justify-content: center;       /* center vertically within the hero */
}

/* ---------- Gallery strip (inner pages — replaces the hero) ---------- */
.gallery-strip {
	background-color: #ffffff;
	background-image: url("pics/bg.jpg");
	background-repeat: repeat-y;
	background-position: right top;
	padding: 10px;
}

.gallery-strip .gallery-thumbs {
	justify-content: flex-start;
}

/* ---------- Inner-page content (single column) ---------- */
.inner-content {
	flex: 1 1 auto;        /* grow to push the footer to the bottom */
	background-color: #F5EEE0;
	padding: 8px;
	font-size: 11px;
	color: #72272B;
}

.inner-content p {
	margin: 0 0 12px;
}

/* ---------- News header strip ---------- */
.news-header {
	display: flex;
	justify-content: space-between;
	background-color: #E0D0B0;
	background-image: url("pics/tema_bot.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	padding: 3px 8px;
	font-size: 11px;
	margin-bottom: 20px;
	color: #72272B;
}

/* ---------- Content area: news + aside ---------- */
.content {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background-color: #F5EEE0;
	padding: 8px;
	font-size: 11px;
	color: #72272B;
	flex: 1 1 auto;        /* grow to fill space, pushing the footer to the bottom */
}

.content__news {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 800px;
	margin: 0 auto;        /* center the news column within its space */
}

.content__news p {
	margin: 0 0 12px;
}

.content__aside {
	flex: 0 0 210px;
}

/* Visulahti promo box */
.promo {
	background-color: #FBF7F0;
	border: 1px solid #E9CACC;
	padding: 8px;
	width: 190px;
}

.promo p {
	margin: 0 0 10px;
}

.promo__title {
	text-align: center;
}

/* ---------- Footer ---------- */
.footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	background-color: #E0D0B0;
	padding: 8px;
	font-size: 11px;
	color: #72272B;
}

.footer__design {
	text-align: right;
}

/* =====================================================================
   Mobile burger menu — hidden on desktop, shown under the breakpoint
   ===================================================================== */
.nav-toggle,
.burger,
.mobile-menu {
	display: none;
}

/* Burger button (three bars) */
.burger {
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 1000;
	width: 44px;
	height: 44px;
	padding: 10px;
	flex-direction: column;
	justify-content: space-between;
	background-color: #72272B;
	cursor: pointer;
}

.burger span {
	display: block;
	height: 3px;
	background-color: #F6EDDA;
	transition: transform 0.25s, opacity 0.25s;
}

/* Slide-down menu panel */
.mobile-menu {
	position: fixed;
	top: 64px;
	right: 10px;
	left: 10px;
	z-index: 999;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	flex-direction: column;
	background-color: #0A7298;
	border: 1px solid #ffffff;
	padding: 8px 0;
}

.mobile-menu a {
	display: block;
	padding: 10px 16px;
	color: #ffffff;
	font-size: 14px;
}

.mobile-menu a:hover {
	background-color: #72272B;
	color: #F6EDDA;
}

.mobile-menu__sep {
	display: block;
	height: 1px;
	margin: 6px 16px;
	background-color: rgba(255, 255, 255, 0.3);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.page {
		flex-direction: column;
	}
	.content {
		flex-direction: column;
	}
	.content__aside,
	.promo {
		width: 100%;
	}

	/* Stack the hero: text below the image */
	.hero {
		flex-direction: column;
	}
	.hero__text {
		max-width: 100%;
	}

	/* Move the tema_bot.jpg strip directly under the tema.jpg image */
	.hero__image {
		background-image: url("pics/tema_bot.jpg");
		background-repeat: no-repeat;
		background-position: left bottom;
		padding-bottom: 12px;          /* tema_bot.jpg is 346x12 */
	}
	.news-header {
		background-image: none;
	}
	.topbar {
		flex-wrap: wrap;
		padding-right: 60px;          /* keep info clear of the burger */
	}

	/* Hide the top menu and the left-side block on mobile */
	.sidebar,
	.navbar,
	.divider {
		display: none;
	}

	/* Reveal the burger; the menu shows when the toggle is checked */
	.burger {
		display: flex;
	}
	.nav-toggle:checked ~ .mobile-menu {
		display: flex;
	}

	/* Animate bars into an X when open */
	.nav-toggle:checked ~ .burger span:nth-child(1) {
		transform: translateY(9px) rotate(45deg);
	}
	.nav-toggle:checked ~ .burger span:nth-child(2) {
		opacity: 0;
	}
	.nav-toggle:checked ~ .burger span:nth-child(3) {
		transform: translateY(-9px) rotate(-45deg);
	}
}