/**
 * Site UX corrections — Manish Aura Grand.
 *
 * 1. Footer links were too light to read on the gold ground, and their hover
 *    was a lighter gold (near-invisible against the same background).
 * 2. Contact form fields used two different colours (dark teal textarea vs
 *    gold inputs) with low-contrast placeholders.
 */

/* ---------------------------------------------------------------
   1. Footer links — heavier weight, dark hover instead of gold
   --------------------------------------------------------------- */

.site-footer .menu li a,
.elementor-location-footer .menu li a,
.elementor-location-footer .elementor-widget-nav-menu .menu li a,
.elementor-location-footer .elementor-nav-menu li a,
footer .elementor-nav-menu li a,
footer .menu li a {
	font-weight: 500;
	font-size: 15px;
	line-height: 1.9;
	letter-spacing: 0.01em;
	color: #FFFDF8;
	opacity: 1;
	transition: color 0.2s ease;
}

/* Hover / focus: dark theme green, not gold-on-gold */
.site-footer .menu li a:hover,
.site-footer .menu li a:focus-visible,
.elementor-location-footer .menu li a:hover,
.elementor-location-footer .menu li a:focus-visible,
.elementor-location-footer .elementor-nav-menu li a:hover,
.elementor-location-footer .elementor-nav-menu li a:focus-visible,
footer .elementor-nav-menu li a:hover,
footer .elementor-nav-menu li a:focus-visible,
footer .menu li a:hover,
footer .menu li a:focus-visible {
	color: #14352B;
	opacity: 1;
	text-decoration: none;
}

/* Keyboard focus stays visible */
.site-footer a:focus-visible,
footer a:focus-visible {
	outline: 2px solid #14352B;
	outline-offset: 3px;
	border-radius: 2px;
}

/* Column headings a touch stronger so the three columns read as headings */
.site-footer .elementor-widget-nav-menu .elementor-widget-container > h4,
footer .elementor-heading-title {
	font-weight: 500;
}

/* ---------------------------------------------------------------
   2. Contact form — one consistent field treatment

   The message box rendered dark teal while name/email were gold, and the
   light placeholder text on gold failed contrast. Unified to a single
   readable field style. Selectors are scoped to the widget so they beat
   Elementor's per-element rules without needing !important everywhere.
   --------------------------------------------------------------- */

.elementor-widget-amoja-contactform .wpcf7-form input[type="text"],
.elementor-widget-amoja-contactform .wpcf7-form input[type="email"],
.elementor-widget-amoja-contactform .wpcf7-form input[type="tel"],
.elementor-widget-amoja-contactform .wpcf7-form textarea,
.elementor-widget-amoja-contactform .wpcf7-form .wpcf7-form-control {
	background-color: #FCFAF6;
	border: 1px solid #C9B893;
	color: #23301F;
	padding: 16px 24px;
	font-size: 15px;
	line-height: 1.6;
	width: 100%;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.elementor-widget-amoja-contactform .wpcf7-form textarea,
.elementor-widget-amoja-contactform .wpcf7-form textarea.wpcf7-form-control {
	min-height: 150px;
	resize: vertical;
	border-radius: 24px;
}

/* Placeholders: clearly secondary but legible (was near-white on gold) */
.elementor-widget-amoja-contactform .wpcf7-form input::placeholder,
.elementor-widget-amoja-contactform .wpcf7-form textarea::placeholder {
	color: #8A8271;
	opacity: 1;
}

/* Visible focus state — there was none before */
.elementor-widget-amoja-contactform .wpcf7-form input:focus,
.elementor-widget-amoja-contactform .wpcf7-form textarea:focus {
	border-color: #14352B;
	background-color: #FFFFFF;
	box-shadow: 0 0 0 3px rgba(20, 53, 43, 0.12);
	outline: none;
}

/* Inline validation messages readable on the cream page */
.elementor-widget-amoja-contactform .wpcf7-not-valid-tip {
	color: #B3402F;
	font-size: 13px;
	margin-top: 6px;
}

.elementor-widget-amoja-contactform .wpcf7-form input.wpcf7-not-valid,
.elementor-widget-amoja-contactform .wpcf7-form textarea.wpcf7-not-valid {
	border-color: #B3402F;
}

/* ---------------------------------------------------------------
   3. Room-card price overlay ("Other Rooms", room listings)

   The price sits inside .item_img, overlaid on the photo. "from" and the
   unit rendered white, but the amount inherited a dark colour and became
   unreadable — invisible entirely over bright images. Scoped to .item_img
   so prices on light backgrounds elsewhere are untouched.
   --------------------------------------------------------------- */

.item_img .item_info_price,
.item_img .item_info_price label,
.item_img .item_info_price .item_info_price_new,
.item_img .item_info_price .item_info_price_new *,
.item_img .item_info_price .currency_amount,
.item_img .item_info_price .currency_symbol {
	color: #FFFFFF;
}

/* Readable over both bright and dark photography */
.item_img .item_info_price {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.item_img .item_info_price .item_info_price_new {
	font-weight: 600;
}

/* Struck-through original price: present but clearly secondary */
.item_img .item_info_price .item_info_price_old {
	color: rgba(255, 255, 255, 0.75);
}

/* ---------------------------------------------------------------
   4. Header legibility over hero images

   The brand logo is dark green, but the nav sat in white — those need
   opposite backdrops, so no single background worked on every page
   (fine over pale heroes, unreadable over busy or dark ones).

   The logo colour is fixed, so the header is given a light frosted
   backdrop and the nav/contact text is darkened to match it. Contrast
   is then consistent regardless of the photo behind.
   --------------------------------------------------------------- */

/* WARNING: never use backdrop-filter, filter, opacity or transform on
   #masthead or its sections. Each creates a new stacking context, which
   drops the header behind the Revolution Slider on the homepage.
   Plain background-color is safe and is what is used below. */

/* Header styling deliberately left alone.

   Two attempts were made and both regressed the live site:
     1. backdrop-filter on #masthead  -> new stacking context, header fell
        behind the Revolution Slider on the homepage.
     2. background-color on #masthead + darkened nav text -> the background
        did not reach the visible layer (the Elementor section inside paints
        it), so only the text darkened, leaving dark-on-dark.

   The header background is painted by an element inside #masthead, not by
   #masthead itself. Identify that element from the rendered page before
   attempting this again, and change background and text colour together
   in the same commit — never text alone. */

/* ---------------------------------------------------------------
   Dining page — hide the "View Menu" popups

   Each amoja-menu-box renders a magnific-popup trigger plus its popup
   content. The menus are being replaced with downloadable PDFs, so the
   popups are hidden for now. The cards and their photography remain.

   Only the Dining page uses this widget, so the scope is contained.
   Reverting is deleting this block.
   --------------------------------------------------------------- */

/* IMPORTANT: .button-popup WRAPS the <img>. Never display:none it — that
   hides the photograph as well. Hide only the label and the popup panel,
   and neutralise the click on the anchor itself. */

.elementor-widget-amoja-menu-box .text-hover,
.elementor-widget-amoja-menu-box .menu-popup-content {
	display: none !important;
}

/* Anchor stays visible (it holds the image) but no longer opens anything */
.elementor-widget-amoja-menu-box a.button-popup {
	pointer-events: none;
	cursor: default;
}

/* ---------------------------------------------------------------
   Room card — "Book Now" button

   Added in the child-theme override of item-block-3.php, so it appears on
   both /rooms/ and the search-results page. Its href carries the visitor's
   dates and guest count, so the room page opens prefilled.
   --------------------------------------------------------------- */

.babe_items_3 .item_more_link_wrap {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

/* The search-results variant submits a form, so the same class lands on a
   <button>. Reset the UA button styling so both elements render identically. */
.babe_items_3 .item_book_now_form {
	display: contents;
}

/* No border reset here: the shared rule below already sets the 1px border that
   the hover state recolours, and a more specific reset would strip it. */
.babe_items_3 button.item_book_now_link {
	margin: 0;
	font-family: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.babe_items_3 .item_book_now_link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 26px;
	border-radius: 999px;
	background-color: #14352B;
	color: #FFFDF8;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid #14352B;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.babe_items_3 .item_book_now_link:hover,
.babe_items_3 .item_book_now_link:focus-visible {
	background-color: #A88A5C;
	border-color: #A88A5C;
	color: #FFFDF8;
	text-decoration: none;
}

.babe_items_3 .item_book_now_link:focus-visible {
	outline: 2px solid #14352B;
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.babe_items_3 .item_book_now_link {
		width: 100%;
	}
}

/* Nav separator dots.

   The theme draws them as a 2px circle on
   .main-navigation ul.menu > li.menu-item > a:before — too small to read at
   the header's type size. Enlarged and properly centred (the theme sets
   top:50% but only translateX, so a taller dot would hang below centre).

   This targets a pseudo-element deep inside the nav, not a header container,
   so it cannot affect header stacking. */

.main-navigation ul.menu > li.menu-item > a:before {
	height: 5px;
	width: 5px;
	transform: translate(-50%, -50%);
}

/* Keyboard focus visible in the header */
#masthead a:focus-visible,
#masthead button:focus-visible {
	outline: 2px solid #A88A5C;
	outline-offset: 3px;
	border-radius: 2px;
}

/* Search form: date field still needed.
   Added by booking-ux.js when a search is attempted with no dates, and
   removed as soon as a range is applied. */
.search_date_wrapper.mag-date-required {
	box-shadow: inset 0 -2px 0 0 #A88A5C;
}

.search_date_wrapper.mag-date-required input::placeholder {
	color: #A88A5C;
	opacity: 1;
}

/* ---------------------------------------------------------------
   Search-results cards

   The search-results widget emits a different wrapper chain from the
   all-items widget used on /rooms/: no .all-items-3, no
   .babe_shortcode_block_bg_inner, and an inert .ba-items-style-3 that
   carries no theme rules at all. Two consequences.

   1. The card block did not fill its container — it sat centred at
      roughly half the width of the filter row directly above it, which is
      where the wasted space on both sides came from. The theme then sizes
      the photo as calc(100% - 440px) against a fixed 440px text column, so
      a half-width block leaves almost nothing for the photo. Forcing the
      wrappers and the grid track to full width restores the /rooms/
      proportion — 440px of text, the rest photo — without overriding the
      theme's own sizing.

   2. The theme alternates the photo left/right via
      .all-items-3 .babe_shortcode_block_bg_inner ... :nth-child(2n+1)
      (theme style.css ~12826), which can never match here, so it is
      repeated below for the search context.

   Scoped to .babe_search_results, so /rooms/ is untouched.
   --------------------------------------------------------------- */

.babe_search_results .ba-items-style-3,
.babe_search_results .babe_shortcode_block,
.babe_search_results .babe_shortcode_block_inner,
.babe_search_results .babe_items {
	width: 100%;
	max-width: none;
}

/* Fill the track rather than shrink-wrapping the card to its content */
.babe_search_results .babe_shortcode_block_inner {
	grid-template-columns: 1fr;
	justify-items: stretch;
	justify-content: stretch;
}

@media (min-width: 768px) {
	.babe_search_results .babe_items_3 .babe_all_items_item_inner {
		width: 100%;
	}

	/* Text keeps the theme's 440px column; the photo takes every remaining
	   pixel. The theme's own calc(100% - 440px) ignores the 30px gap and so
	   overflows by exactly that much — growing into the free space instead
	   gives the same proportion with nothing clipped. */
	.babe_search_results .babe_items_3 .babe_all_items_item_inner .item_text {
		width: 440px;
		flex: 0 0 440px;
	}

	.babe_search_results .babe_items_3 .babe_all_items_item_inner .item_img {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}

	.babe_search_results .babe_items_3:nth-child(2n+1) .babe_all_items_item_inner {
		flex-direction: row-reverse;
	}
}