/* =====================================================================
   custom.css – additions for this site.
   style.css + bootstrap.min.css are the unchanged files of chalet-hochkar.com
   (that is where all font sizes, line heights and spacing come from).
   ===================================================================== */

/* navbar bottom line (was an inline style on chalet-hochkar.com) */
.navbar-line { border-bottom: 1px solid #ededed; }

/* ---------- CHALETS dropdown (look of chalet-stanton.com) ---------- */
.navbar .dropdown > .nav-link { float: none; clear: none; cursor: pointer; }
.navbar .dropdown-toggle::after { display: none; }                 /* no caret, as on chalet-stanton.com */
.navbar .dropdown-menu {
	border: 1px solid #ededed; border-radius: 0; padding: 8px 0; min-width: 210px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
.navbar .dropdown-item,
.navbar .dropdown-item:link,
.navbar .dropdown-item:visited {
	font-family: 'Open Sans'; font-size: 9pt; letter-spacing: .06em; text-transform: uppercase;
	color: #666; padding: 9px 18px; text-decoration: none;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus { background: #f7f5f1; color: #a5957a; text-decoration: none; }
@media (min-width: 992px) {
	.navbar .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }   /* opens on mouse-over */
}

/* ---------- chalet photo sliders: square images (as on the original stanton site) ---------- */
.carousel-item-customy picture,
.carousel-item-customy img {
	width: 100% !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* jump from the dropdown: do not hide the chalet heading under the fixed navbar */
.chalet-anchor { scroll-margin-top: 110px; }

/* ---------- icons replacing FontAwesome (same size as the FA icons) ---------- */
.stars svg { width: 1.125em; height: 1em; vertical-align: -.125em; }
svg.insta { width: .875em; height: 1em; vertical-align: -.125em; }

/* phone number: clickable on phones, but looks like plain text as on chalet-hochkar.com */
a.tel-link, a.tel-link:link, a.tel-link:visited, a.tel-link:active { color: inherit; font-family: inherit; }
a.tel-link:hover { color: inherit; }

/* ---------- header image on phones (< 576 px) ----------
   chalet-hochkar.com places the caption at 25 % of the WINDOW height. Our title
   "PRIVATE CHALETS ST. ANTON" needs 3 lines on phones and would run out of the
   photo, so on phones the caption is centred inside the photo instead.
   Tablet and desktop: unchanged (exactly as on chalet-hochkar.com). */
@media (max-width: 575.98px) {
	.hero-col { position: relative; }
	.hero-col .img-caption {
		top: 60px; bottom: 0;                               /* = the photo area (photo has margin-top: 60px) */
		display: flex; flex-direction: column; justify-content: center; align-items: center;
	}
}
/* chalet entries in the menu: no links yet (only the logo leads home) – shown as plain text */
.navbar span.dropdown-item { cursor: default; }
.navbar span.dropdown-item:hover, .navbar span.dropdown-item:focus { background: transparent; color: #666; }
/* Chalet columns: the text block takes the free height, so the photo sliders of
   both columns start at the same height (shorter text gets the space below it) */
.chalet-text { flex-grow: 1; }

/* Links are disabled for now (anchors without href): same look, no click, no hover effect.
   To activate a link again, simply add its href back in index.html. */
a:not([href]) { pointer-events: none; cursor: default; }
a:not([href]):not([class]) { color: #a5957a; } /* e-mail + Instagram keep the gold link colour */

/* Mobile: the Private Chalets logo starts right at its left edge (unlike the hochkar logo),
   so move it away from the burger icon (style.css: margin-left 50px) */
@media (max-width: 575.98px) {
	.logo { margin-left: 68px !important; }
	.navbar-brand { margin-right: 0; } /* keeps ENQUIRE on the logo line down to 320px */
}
/* very small phones (320px): the 3-line title would not fit into the photo */
@media (max-width: 359.98px) {
	.hero-col .img-caption h1 { font-size: 32px; line-height: 44px; }
	.hero-col .img-caption h2 { font-size: 24px; }
}

/* GO TO CHALET: hover effect visible although the link is still disabled */
a.btn-customy-white:not([href]) { pointer-events: auto; }

/* White rating block before OUR SERVICES: 5 gold stars, same size as on chalet-stanton.com
   (80 x 20 px image there, 15 px per star) but as sharp SVG */
.stars-rating { display: flex; justify-content: center; gap: 1px; } /* block-level: exactly 48px above and below like the hochkar blocks */
.stars-rating svg { width: 15px; height: 20px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* holds the shared star symbol */
/* ENQUIRE in the header image + Imprint / Privacy Policy: hover effect visible, still no link */
a.btn-customy:not([href]), a.nav-link-footer:not([href]) { pointer-events: auto; }

/* Chalet sliders: arrows like the chalet-stanton.com chalet sliders (desktop + mobile):
   thin light chevron 25 x 25 px, 10 px from the edge, vertically centred, no background */
.chalet-anchor .carousel-control-prev,
.chalet-anchor .carousel-control-next {
	top: 50%; bottom: auto; width: 25px; height: 25px;
	transform: translateY(-50%); opacity: 1;
}
.chalet-anchor .carousel-control-prev { left: 10px; }
.chalet-anchor .carousel-control-next { right: 10px; }
.chalet-anchor .carousel-control-prev:hover, .chalet-anchor .carousel-control-prev:focus,
.chalet-anchor .carousel-control-next:hover, .chalet-anchor .carousel-control-next:focus { opacity: 1; }
.chalet-anchor .carousel-control-prev-icon,
.chalet-anchor .carousel-control-next-icon { width: 25px; height: 25px; background-size: 100% 100%; }
.chalet-anchor .carousel-control-prev-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3e%3cpath d='M129.5 36.6 69.6 99.5l59.9 62.9' fill='none' stroke='%23eee' stroke-opacity='.9' stroke-width='23.3' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}
.chalet-anchor .carousel-control-next-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3e%3cpath d='M70.5 36.6 130.4 99.5l-59.9 62.9' fill='none' stroke='%23eee' stroke-opacity='.9' stroke-width='23.3' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}
