body, html {
	font-family: 'Open Sans', sans-serif;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
	color: #444;
	font-weight: 400;
	width: 100% !important;
	height: 100% !important;
	margin: 0;
	padding: 0;
}

/* Accessible skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    left: 8px;
    top: 8px;
    width: auto;
    height: auto;
    background: #fff;
    color: #000;
    border: 2px solid #653b00;
    padding: 6px 10px;
    border-radius: 4px;
    z-index: 10000;
}
  
h2 {
	font-family: 'Montserrat', sans-serif;
	margin: 0 0 20px 0;
	font-weight: 700;
	font-size: 32px;
	color: #333;
}
  
h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #333;
}
  
h4 {
	font-size: 18px;
}
  
p {
	font-size: 15px;
	line-height: 24px;
}
  
a {
	color: #653b00; /* Slightly darker brown */
	font-weight: 400;
}
  
a:hover,
a:focus {
	text-decoration: none;
	color: #3f2300; /* Even darker on hover */
}

/* Custom button style */
.btn-custom {
	text-transform: uppercase;
	color: #fff;
	background-color: #653b00; /* Brown button background */
	padding: 14px 20px;
	letter-spacing: 1px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	border-radius: 4px;
	transition: all 0.3s;
}
.btn-custom.narrow{
	padding: 0px 4px;
}

.btn-custom:hover,
.btn-custom:focus,
.btn-custom.focus,
.btn-custom:active,
.btn-custom.active {
	color: #fff;
	background-color: #2d4d2d; /* A greenish variant for hover */
}

/* Navigation */
#menu {
	padding: 20px;
	transition: all 0.8s;
}
  
#menu.navbar-default {
	background-color: #fdfdfd; 
	border-color: rgba(231, 231, 231, 0);
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
.navbar-header {
	display: flex;
	align-items: center;
	justify-content: flex-start; /* keep header compact so nav can sit on same line */
	/* width: 100%;  <-- removing this prevents the menu from jumping to next line */
}
.navbar-brand-wrap {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 0 0 auto; /* don't stretch brand on desktop */
}
#menu .navbar-toggle {
	margin-left: auto;
}
#menu a.navbar-brand {
	font-family: 'Montserrat', sans-serif;
	font-size: 32px;
	font-weight: 700;
	color: #653b00;
	text-transform: uppercase;
	letter-spacing: -1px;
}
/* New CSS rules to replace inline styles */
#footer-menu {
    text-align: center;
}
#footer-menu .navbar-nav {
    display: inline-block;
    float: none;
}
.navbar-nav .lang-item>a{padding:10px 4px;}
.section-title {
    margin-top: 30px;
}
#toggle-navody {
    padding-top: 10px;
}
.top-social-icons {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: 10px;
}
.top-social-icons a {
	color: #653b00;
	text-decoration: none;
	font-size: 28px;
	transition: color 0.3s ease;
}
.top-social-icons a:hover {
	color: #2d4d2d;
}

@media (max-width: 767px) {
	.navbar-header {
		flex-wrap: nowrap;
	}
	.navbar-brand-wrap {
		flex: 1 1 auto; /* allow brand to grow on mobile */
		justify-content: flex-start;
		margin-bottom: 0;
	}
	#menu a.navbar-brand {
		font-size: 24px;
	}
	.top-social-icons {
		display: none;
	}
	#menu .navbar-toggle {
		margin-left: auto;
	}
	.intro .overlay {
		padding-top: 180px;
		padding-bottom: 100px;
	}
}

/* Intro Section */
.intro {
	display: table;
	width: 100%;
	background: url("../img/intro-bg.jpg") top center no-repeat;
	background-color: #d1c9c1; /* fallback if image not loaded */
	background-size: cover;
}
  
.intro .overlay {
    background: rgba(0, 0, 0, 0.3);
    padding: 160px 0 140px; /* spacing handled here instead of <br> hacks */
}
  
.intro-text h1 {
	font-family: 'Montserrat', sans-serif;
	color: #fff;
	font-size: 48px;
	font-weight: 700;
	margin-bottom: 15px;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
  
.intro-text p {
	color: #fff;
	font-size: 17px;
	line-height: 28px;
	max-width: 600px;
	margin: 0 auto 30px auto;
	background: rgba(0, 0, 0, 0.4);
	padding: 10px;
}

/* Portfolio / Gallery */
#portfolio {
	padding: 80px 0;
	background: #fdfdfd;
}
  
.hover-bg {
	overflow: hidden;
	position: relative;
}
  
.hover-bg .hover-text {
	position: absolute;
	text-align: center;
	margin: 0 auto;
	color: #fff;
	background: rgba(0, 0, 0, 0.4); /* Lighter overlay background */
	padding: 30% 0 0 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: all 0.5s;
}
  
.hover-bg:hover .hover-text {
	opacity: 1;
}
  
.hover-bg .hover-text h4 {
	opacity: 0;
	font-size: 17px;
	letter-spacing: 1px;
	font-weight: 400;
	text-transform: uppercase;
	transition: all 0.3s;
	transform: translateY(100%);
}
  
.hover-bg:hover .hover-text h4 {
	opacity: 1;
	transform: translateY(0);
}

/* Contact & Info sections */
#contact {
	padding: 100px 0 60px 0;
	background: #2f3d2f; /* slightly greenish/darker background */
	color: #fff;  /* Contact text set to pure white */
}
  
#contact h2 {
	color: #fff;
}
/* Make plain links (like email) inside contact details white */
#contact .contact-item a:not(.btn) {
    color: #fff;
    text-decoration: underline;
}
#contact .contact-item a:not(.btn):hover,
#contact .contact-item a:not(.btn):focus {
    color: #f6b24a;
}
  
#contact .form-control {
	display: block;
	width: 100%;
	padding: 6px 12px;
	font-size: 16px;
	color: #444;
	background-color: #fff;
	border: 1px solid #ddd;
	-webkit-box-shadow: none;
	box-shadow: none;
	transition: none;
}
  
#contact .form-control:focus {
	border-color: #999;
	outline: 0;
	box-shadow: transparent;
}
  
#contact .contact-item span {
	color: #fff;
	display: block;
}
  
/* Footer */
#footer {
	background: #333;
	padding: 30px 0;
	text-align: center;
}
  
#footer p {
	color: #fff;
	font-size: 14px;
}
  
#footer a {
    color: #fff;
}
#footer a:hover,
#footer a:focus {
    color: #f6b24a;
}

/* Ensure that any h4 inside the footer is white */
#contact h4 {
	color: #fff;
}

/* New styles for the footer social icons */
.footer-social-icons {
	background: #222; /* Darker background for footer icons */
	text-align: center;
	padding: 10px 0;
}

.footer-social-icons a {
	margin: 0 10px;
	display: inline-block;
	color: #fff;
	font-size: 24px;
	transition: color 0.3s ease;
}

.footer-social-icons a:hover {
	color: #2d4d2d;
}

.footer-booking-icons {
	background: #191919;
	text-align: center;
	padding: 12px 0;
}

.footer-booking-icons a {
	margin: 0 12px;
	display: inline-block;
	color: #fff;
	font-size: 24px;
	transition: color 0.3s ease, transform 0.3s ease;
}

.footer-booking-icons a:hover {
	color: #f6b24a;
	transform: translateY(-2px);
}

/* Footer menu styling for consistent dark theme */
.footer-menu {
    background: #262626;
    text-align: center;
    padding: 10px 0;
}
.footer-menu .navbar-nav {
    display: inline-block;
    float: none;
}
.footer-menu .navbar-nav > li > a {
    color: #fff;
    font-weight: 600;
    padding: 10px 14px;
}
.footer-menu .navbar-nav > li > a:hover,
.footer-menu .navbar-nav > li > a:focus {
    color: #f6b24a;
    background: transparent;
}

/* Testimonials Section */
#testimonials .testimonial {
	background: #f9f9f9;
	padding: 20px;
	border-radius: 4px;
	margin-bottom: 20px;
}
  
#testimonials .testimonial p {
	font-style: italic;
}

/* Extra styles for other sections remain unchanged */
.portfolio-item {
    margin-bottom: 30px;
}

/* New styling for Rýchle Navody section */
#rychle-navody-container {
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
	margin-top: 20px
}
#rychle-navody {
    display: none; /* initially hidden */
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

/* When you want it to be visible, add a helper class, e.g., .visible-flex */
#rychle-navody.visible-flex {
    display: flex;
}

.navod-item {
    flex: 0 1 200px;
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    position: relative;
}

.navod-item img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
}

/* Badge indicating the item is a GIF */
.navod-item .gif-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(101, 59, 0, 0.9); /* same brown */
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

/* Loading overlay + spinner when GIF is fetched */
.navod-item.loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.75);
    border-radius: 4px;
}
.navod-item.loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid #ccc;
    border-top-color: #653b00; /* brown */
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Mobile layout: make quick guides full-width */
@media (max-width: 767px) {
    #rychle-navody {
        flex-direction: column;
    }
    .navod-item {
        flex: 1 1 100%;
        width: 100%;
    }
    .navod-item img {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* About section read-more behaviour */
.about-description .about-preview {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 12px;
    color: #3a3a3a;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.about-preview-icon {
    font-size: 18px;
    color: #653b00;
    margin-top: 3px;
}
.about-full-content {
    margin-top: 20px;
}
.js .about-full-content[data-collapsible="true"] {
    display: none;
}
.about-actions {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 18px 0 10px;
}
.about-read-more,
.about-read-less {
    margin-top: 15px;
}
.about-actions .about-read-more {
    order: 2;
    flex-basis: 100%;
    margin-top: 24px;
}
.about-read-less {
    margin-bottom: 0;
}
.about-book {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.about-book span {
    font-weight: 600;
}
.js-read-toggle {
    display: none;
}
.about-calendar-helper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    color: #444;
}
.about-helper-icon {
    font-size: 16px;
    color: #2d4d2d;
    margin-top: 3px;
}
.about-description ul {
    padding-left: 18px;
}
.about-description ul li {
    position: relative;
    list-style: none;
    padding-left: 24px;
    margin-bottom: 8px;
}
.about-description ul li:before {
    content: "\f00c";
    font-family: "FontAwesome";
    position: absolute;
    left: 0;
    top: 0;
    color: #2d4d2d;
    font-size: 14px;
}
.about-description h3,
.about-description h4 {
    position: relative;
    padding-left: 28px;
    margin-top: 24px;
}
.about-description h3:before,
.about-description h4:before {
    position: absolute;
    left: 0;
    top: 2px;
    font-family: "FontAwesome";
    color: #653b00;
    font-size: 18px;
}
.about-description h3:before {
    content: "\f009";
}
.about-description h4:before {
    content: "\f148";
}

.hero-booking-links {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    /* Stack reservation buttons vertically (one under another) */
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
}

.btn-outline {
    border: 1px solid #fff;
    color: #fff;
    background: rgba(255,255,255,0.08);
    padding: 10px 18px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.6px;
    border-radius: 999px;
    transition: all 0.3s ease;
}
.btn-outline:hover,
.btn-outline:focus {
    background: #fff;
    color: #653b00;
    border-color: #653b00;
}
.hero-booking-icon,
.about-book-icon {
    font-size: 18px;
    line-height: 1;
    margin-right: 6px;
}
.hero-booking-icon {
    font-size: 20px;
    margin-right: 6px;
}
.hero-booking span {
    display: inline-block;
    margin-left: 6px;
    font-weight: 600;
}
.hero-booking {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}
/* === tidy language switcher ======================================= */
.language-menu{                         /* the enclosing <li class="language-menu"> */
    display:inline-flex!important;      /* flags sit next to each other            */
    align-items:center;
    padding:0!important;                /* kill navbar default padding             */
}
.language-menu a{                       /* each flag link */
    display:inline-block!important;
    padding:0 4px!important;
}
.language-menu img{width:24px;height:16px;display:block;border:1px solid #ddd;border-radius:2px; width: 24px; height: 16px;}
.language-menu a.current-lang img{opacity:.6;border-color:#653b00}

/* Side badges — fixed bottom-right, peek & hide on scroll */
.side-badges {
  position: fixed;
  bottom: 20px;
  right: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  transition: transform .4s ease;
}
.side-badges.is-hidden {
  transform: translateX(calc(100% + 20px));
}
.side-badge {
  display: block;
  transform: translateX(87%);
  transition: transform .4s ease;
  cursor: pointer;
  text-decoration: none;
}
.side-badge:hover,
.side-badge.is-expanded {
  transform: translateX(0);
}
.megau-badge {
  transform: translateX(80%);
}
/* MegaUbytovanie badge */
.megau-badge img {
  display: block;
  width: 200px;
  height: auto;
  border-radius: 6px 0 0 6px;
  box-shadow: -2px 2px 8px rgba(0,0,0,.25);
}
/* Booking badge */
.booking-badge img {
  display: block;
  width: 300px;
  height: auto;
  border-radius: 6px 0 0 6px;
  box-shadow: -2px 2px 8px rgba(0,0,0,.25);
}
/* Sauna badge */
.sauna-badge {
  transform: translateX(72%);
}
.sauna-badge-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #d4451a 0%, #e8732a 100%);
  color: #fff;
  padding: 10px 18px 10px 14px;
  border-radius: 30px 0 0 30px;
  box-shadow: -2px 2px 12px rgba(0,0,0,.3);
  white-space: nowrap;
}
.sauna-badge-icon {
  font-size: 1.6em;
  line-height: 1;
}
.sauna-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.sauna-badge-text strong {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.sauna-badge-text small {
  font-size: 12px;
  opacity: .9;
}
@media (max-width: 767px) {
  .side-badges { bottom: 12px; gap: 6px; }
  .side-badge { transform: translateX(90%); }
  .side-badge:hover,
  .side-badge.is-expanded { transform: translateX(0); }
  .megau-badge { transform: translateX(85%); }
  .megau-badge img { width: 160px; }
  .booking-badge img { width: 240px; }
  .sauna-badge { transform: translateX(75%); }
  .sauna-badge-inner { padding: 8px 14px 8px 10px; gap: 8px; }
  .sauna-badge-icon { font-size: 1.3em; }
  .sauna-badge-text strong { font-size: 11px; }
  .sauna-badge-text small { font-size: 10px; }
}

/* Render performance optimizations for below-the-fold sections */
@supports (content-visibility: auto) {
  #portfolio,
  #testimonials,
  #contact,
  #rychle-navody-container,
  #footer {
    content-visibility: auto;
    contain-intrinsic-size: 1000px;
  }
}