/*
 * Hotel Atlanta - corrections on top of Calluna.
 *
 * Scope is deliberately narrow. The theme uses the gold #967A50 as its global
 * accent in 186 rules, and that colour is only a problem where it meets the dark
 * navy: on white it measures 4.04:1, and lightening it would drop that to 3.29:1.
 * So the gold is corrected only on navy backgrounds, never globally.
 */

/* ------------------------------------------------------------------
 * 1. Rooms grid on wide screens
 *
 * The rooms block is built from hand-written .RoomLeft / .RoomRight blocks,
 * each a fixed 600px, floated to opposite edges. The theme's container is
 * fluid, so past ~1450px of viewport the leftover width turns into a hole
 * between the two columns - 400px at 1920, ~1000px at 2560. Capping the
 * wrapper at the 1200px the block was designed for turns that hole back into
 * symmetric outer margin.
 * ------------------------------------------------------------------ */
.front-page-content .wpb_wrapper:has(> .RoomLeft),
.front-page-content .wpb_wrapper:has(> .RoomRight) {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------
 * 2. Gold on navy: 3.72:1 -> 4.57:1 (WCAG AA needs 4.5:1 for this size)
 *
 * Affects the current menu item in the desktop bar and every link in the
 * mobile drawer, which is gold on navy throughout.
 * ------------------------------------------------------------------ */
.navigation ul li.current-menu-item > a,
.navigation ul li.current_page_item > a,
.navigation ul li.current-menu-ancestor > a,
.navigation ul li.menu-item-home.current-menu-item > a,
.mobile-nav .mobile-menu ul li a,
.mobile-menu ul li.current-menu-item > a,
.mobile-menu ul li.current_page_item > a,
.mobile-nav .mobile-menu ul li a:hover,
.mobile-nav .mobile-menu ul li a:focus,
.mobile-nav .close-mobile-nav,
.mobile-nav .close-mobile-nav:hover,
.mobile-nav .close-mobile-nav:focus {
	color: #A38A65;
}

/* ------------------------------------------------------------------
 * 3. White text on gold buttons: 4.04:1 -> 4.58:1
 * ------------------------------------------------------------------ */
/* The theme paints this button through .event2-carousel .event-image-button,
 * so the override has to match that specificity to win. */
.event2-carousel .event-image-button,
.event-image-button,
.calluna-button.style-2,
.calluna-pricing.featured .calluna-pricing-header h4 {
	background-color: #8C714A;
}

/* ------------------------------------------------------------------
 * 4. Mobile menu tap targets
 *
 * Rows were 36px tall; 44px is the usual minimum for a comfortable target.
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.mobile-nav .mobile-menu ul li a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ------------------------------------------------------------------
 * 5. The active menu item
 *
 * The header is transparent over the slider, so the menu sits on photographs
 * ranging from a dusk skyline to a bright autumn park. Marking the active item
 * by colour alone fails there: gold is always paler than the white of its
 * neighbours, so the active item reads as dimmed rather than highlighted.
 *
 * The theme already draws a rule under the current item (.nav-menu a::after);
 * it is thin and the same gold. So the item keeps the white of its neighbours
 * and the existing rule is made thicker and lighter - a shape holds up over any
 * photograph, a hue does not.
 *
 * Specificity is raised with .site-header because the theme sets the gold from
 * an inline <style> block that the customiser prints after this file.
 *
 * WordPress also marks any custom link whose URL matches the current request as
 * current, and "Zimmer" points at /#RoomsHeader - an anchor on the home page -
 * so it too was lit up. Custom links get no marker.
 * ------------------------------------------------------------------ */
/* Only on the home page, where the header lies over the slider photographs. */
.home .site-header .nav-menu ul li > a {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.site-header .nav-menu ul li.current-menu-item > a,
.site-header .nav-menu ul li.current_page_item > a,
.site-header .nav-menu ul li.current-menu-ancestor > a {
	color: #FFFFFF;
}

.site-header .nav-menu ul li.current-menu-item:not(.menu-item-type-custom) > a::after,
.site-header .nav-menu ul li.current_page_item:not(.menu-item-type-custom) > a::after {
	background-color: #E3B778;
	height: 3px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.site-header .nav-menu ul li.menu-item-type-custom > a::after {
	background-color: transparent;
}

/* The drawer has a solid navy background, so colour alone is enough there. */
.mobile-menu ul li.menu-item-type-custom.current-menu-item > a,
.mobile-menu ul li.menu-item-type-custom.current_page_item > a {
	color: #A38A65;
}

/* ------------------------------------------------------------------
 * 6. Hover
 *
 * The theme both underlines the item and turns its text gold on hover. Over the
 * slider photographs that reads as the label fading out rather than responding,
 * for the same reason the active item did. The underline alone is the feedback;
 * the text keeps its white.
 *
 * .site-header again raises specificity over the customiser's inline block.
 * ------------------------------------------------------------------ */
.site-header .nav-menu ul li > a:hover,
.site-header .nav-menu ul li > a:focus,
.site-header .nav-menu ul li > a:active {
	color: #FFFFFF;
}

.site-header .nav-menu ul li > a:hover::after,
.site-header .nav-menu ul li > a:focus::after {
	background-color: #E3B778;
	height: 3px;
	opacity: 1;
}

/* ------------------------------------------------------------------
 * 7. Hero on room pages
 *
 * Calluna halves the hero on screens from 1600px up:
 *   @media (min-width: 1600px) { .single-room .image-background { width: 50% !important } }
 * which leaves a dead white band beside the photograph and pushes the title
 * against its edge. The band is full width again, as it is below 1600px.
 * ------------------------------------------------------------------ */
@media only screen and (min-width: 1600px) {
	.single-room .image-background {
		width: 100% !important;
	}
}

/* ------------------------------------------------------------------
 * 8. The menu vanishing mid-scroll
 *
 * The bar starts out position:absolute, so it scrolls away with the page, and
 * the theme only pins it (position:fixed, .navbar-shrink) once a threshold is
 * passed - with a 0.4s transition on top of that. Between the two the menu is
 * simply not on screen, which is the blink you see while scrolling.
 *
 * Pinning it from the start closes the gap. Nothing moves in the layout: the bar
 * was already out of flow as an absolutely positioned element.
 * ------------------------------------------------------------------ */
.site-header .navigation.sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

/* ------------------------------------------------------------------
 * 9. Text sitting against images
 *
 * Blocks holding a photograph carry no bottom margin, so a paragraph that
 * follows one starts at a 0px gap, and stacked photographs sit 20px apart.
 * The slider lives outside .wpb_wrapper, so it is untouched by this.
 * ------------------------------------------------------------------ */
.front-page-content .wpb_wrapper > div:has(img),
.front-page-content .wpb_wrapper > div:has(iframe),
.content-area .wpb_wrapper > div:has(img),
.content-area .wpb_wrapper > div:has(iframe),
/* Pages written in the plain editor put the image inside a paragraph, which
 * carries only an 11px bottom margin. */
.content-area .page-content p:has(> img),
.content-area .entry-content p:has(> img) {
	margin-bottom: 28px;
}

/* ------------------------------------------------------------------
 * 10. Background for the pinned bar
 *
 * Now that the bar is pinned from the start, it must not stay transparent once
 * the page scrolls past the hero, or white labels end up on white content. The
 * theme paints it navy through a scroll handler, but that only fires on real
 * user scrolling - anchor jumps and restored scroll positions leave it clear.
 *
 * A scroll-driven animation paints it from the page position itself, with no
 * script involved. Browsers without support fall back to the theme's handler.
 * ------------------------------------------------------------------ */
@supports (animation-timeline: scroll()) {
	.site-header .navigation.sticky {
		animation: sp-nav-background linear both;
		animation-timeline: scroll(root block);
		animation-range: 60px 160px;
	}

	@keyframes sp-nav-background {
		to {
			background-color: #0F2453;
		}
	}
}

/* ------------------------------------------------------------------
 * 11. Paragraph rhythm on room pages
 *
 * The theme gives paragraphs an 11px bottom margin. At 18px type on a 32px
 * line, consecutive paragraphs nearly run together - the room description sits
 * right under its heading line on every room page.
 * ------------------------------------------------------------------ */
.single-room .content-area p {
	margin-bottom: 20px;
}

.single-room .content-area img {
	margin-top: 8px;
	margin-bottom: 28px;
}

/* ------------------------------------------------------------------
 * 12. Paragraph rhythm and embeds in page content
 *
 * Same 11px paragraph margin as on the room pages. On the Anfahrt page each
 * fact is its own paragraph, so the block reads as one dense lump, and the map
 * sits 11px under the last line.
 * ------------------------------------------------------------------ */
.content-area .page-content p {
	margin-bottom: 20px;
}

.content-area .page-content iframe {
	margin-top: 8px;
	margin-bottom: 28px;
}

/* ------------------------------------------------------------------
 * 13. The old language flags
 *
 * header.php carries a hand-written pair of flags that jump to the previous
 * English site on the old server. Polylang now feeds the theme's own language
 * switcher, so the hard-coded block is hidden rather than edited into the theme,
 * where a theme update would undo it.
 * ------------------------------------------------------------------ */
.languageswitch {
	display: none !important;
}