/*
 * Hotelft child - design layer
 *
 * One place for how the whole site looks, so the Hotel Booking Manager plugin
 * does not have to be touched for styling. Loaded after the parent theme and
 * Elementor's kit CSS (see functions.php).
 *
 * 1. Brand      - ONE brand colour, chosen in the backend (Hotel Booking ->
 *                 Settings -> Style -> Primary colour). The plugin prints
 *                 --hft-gold / -hover / -dark / --hft-cream / --hft-on-brand
 *                 derived from it (see hbm_print_style_overrides), so changing
 *                 it restyles the whole site. The values below are only the
 *                 defaults for a site that never picked one (the "gold").
 * 2. Polish     - selection, focus rings, smooth scrolling.
 * 3. Blog       - the single article page (typography, headings, lists, meta).
 * 4. Pages      - compact title banner, section headings, mobile header, Contact.
 *
 * To switch this layer off: remove the enqueue in functions.php.
 */

/* ========== 1. BRAND ========== */

:root:root {
	--hft-gold: #d4a656;
	--hft-gold-dark: #9a6b1c;   /* gold for TEXT/links on white: 4.9:1 contrast */
	--hft-ink: #14181f;
	--hft-text: #3d4147;
	--hft-muted: #6b7280;
	--hft-line: #ece6d9;
	--hft-cream: #fff8ef;
	--hft-gold-hover: #c4953f;  /* hover of the brand colour */
	--hft-on-brand: #14181f;    /* text that reads ON the brand colour */

	/* The parent theme's accent was teal (#0f97aa). */
	--primary: var(--hft-gold);
}

/* Elementor's kit primary / accent were orange (#E28D1D): every widget that
   uses the global colours (amenity icons, bars, buttons) follows the brand. */
body[class*="elementor-kit-"] {
	--e-global-color-primary: var(--hft-gold);
	--e-global-color-accent: var(--hft-gold);
}

/* Two spots Elementor hard-codes in orange (a widget colour, not the global
   colour): the Reservation button in the sticky header and the bar at the
   bottom of the footer. They are found through the THEME's own classes
   (.header_sticky, .wrap_footer), not Elementor template / element IDs, so
   this works unchanged on any site and follows the colour picked in the
   backend. :root:root outranks Elementor's per-element rules. */
:root:root body .header_sticky .elementor-widget-button .elementor-button.elementor-button {
	background-color: var(--hft-gold);
	border-color: var(--hft-gold);
	color: var(--hft-on-brand);
}

:root:root body .header_sticky .elementor-widget-button .elementor-button.elementor-button:hover,
:root:root body .header_sticky .elementor-widget-button .elementor-button.elementor-button:focus {
	background-color: var(--hft-gold-hover);
	border-color: var(--hft-gold-hover);
	color: var(--hft-on-brand);
}

/* The footer's last section is the copyright bar. */
:root:root body .wrap_footer .elementor > .elementor-top-section:last-child:not(.elementor-motion-effects-element-type-background) {
	background-color: var(--hft-gold);
}

:root:root body .wrap_footer .elementor > .elementor-top-section:last-child,
:root:root body .wrap_footer .elementor > .elementor-top-section:last-child a,
:root:root body .wrap_footer .elementor > .elementor-top-section:last-child .elementor-heading-title {
	color: var(--hft-on-brand);
}

/* ========== 2. POLISH ========== */

html {
	scroll-behavior: smooth;
}

::selection {
	background: color-mix(in srgb, var(--hft-gold) 35%, transparent);
	color: var(--hft-ink);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--hft-gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ========== 3. BLOG: SINGLE ARTICLE ========== */

/* Title banner: long guide titles were set very large and all caps. */
body.single-post .wrap_header_banner .header_banner_el {
	padding-left: 20px;
	padding-right: 20px;
}

body.single-post .wrap_header_banner .header_title {
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
}

/* Date / author as soft chips; the "Comment off" chip is noise. */
body.single-post .post-wrap ul.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

body.single-post .post-wrap ul.post-meta li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--hft-cream);
	color: var(--hft-text);
	font-size: 13px;
	line-height: 1.3;
}

body.single-post .post-wrap ul.post-meta li.comment {
	display: none;
}

/* Reading text. Direct children only (> ...) so the plugin's blocks under the
   article (share row, stay card, related posts) keep their own styling. */
body.single-post .post-wrap .post-content {
	color: var(--hft-text);
	font-size: 17px;
	line-height: 1.85;
}

body.single-post .post-wrap .post-content > p {
	margin: 0 0 1.3em;
}

body.single-post .post-wrap .post-content > p:first-of-type {
	color: var(--hft-ink);
	font-size: 19px;
	line-height: 1.75;
}

body.single-post .post-wrap .post-content > h2 {
	margin: 2.2em 0 0.7em;
	padding-left: 16px;
	border-left: 4px solid var(--hft-gold);
	color: var(--hft-ink);
	font-size: clamp(24px, 2.6vw, 30px);
	line-height: 1.3;
}

body.single-post .post-wrap .post-content > h3 {
	margin: 1.8em 0 0.5em;
	color: var(--hft-ink);
	font-size: 21px;
	line-height: 1.35;
}

body.single-post .post-wrap .post-content > ul {
	margin: 0 0 1.5em;
	padding: 0;
	list-style: none;
}

body.single-post .post-wrap .post-content > ul > li {
	position: relative;
	margin: 0 0 12px;
	padding-left: 28px;
}

body.single-post .post-wrap .post-content > ul > li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hft-gold);
}

body.single-post .post-wrap .post-content > ol {
	margin: 0 0 1.5em;
	padding-left: 24px;
}

body.single-post .post-wrap .post-content > ol > li {
	margin: 0 0 10px;
	padding-left: 6px;
}

body.single-post .post-wrap .post-content > p strong,
body.single-post .post-wrap .post-content > ul strong,
body.single-post .post-wrap .post-content > ol strong {
	color: var(--hft-ink);
}

body.single-post .post-wrap .post-content > p a,
body.single-post .post-wrap .post-content > ul a,
body.single-post .post-wrap .post-content > ol a {
	color: var(--hft-gold-dark);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--hft-gold) 55%, transparent);
	text-underline-offset: 3px;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

body.single-post .post-wrap .post-content > p a:hover,
body.single-post .post-wrap .post-content > ul a:hover,
body.single-post .post-wrap .post-content > ol a:hover {
	color: var(--hft-ink);
	text-decoration-color: var(--hft-gold);
}

body.single-post .post-wrap .post-content > blockquote {
	margin: 1.8em 0;
	padding: 18px 24px;
	border-left: 4px solid var(--hft-gold);
	border-radius: 0 12px 12px 0;
	background: var(--hft-cream);
	color: var(--hft-ink);
	font-style: italic;
}

body.single-post .post-wrap .post-content img {
	height: auto;
	border-radius: 12px;
}

@media (max-width: 680px) {
	body.single-post .post-wrap .post-content {
		font-size: 16px;
		line-height: 1.8;
	}

	body.single-post .post-wrap .post-content > p:first-of-type {
		font-size: 17px;
	}
}

/* ========== 4. PAGES: COMPACT TITLES, SECTION HEADINGS, MOBILE HEADER ========== */

/* Page title banner (About, Gallery, posts...): the theme sets it ~40px, all
   caps, with ~90px of padding above and below - a 400px+ strip on a phone. */
/* Elementor writes the banner size on the header template widget, so this uses :root:root to outrank it. */
:root:root body .wrap_header_banner .header_banner_el .header_title.header_title {
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
	padding: 48px 0 52px;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
}

/* Elementor section headings (Ovatheme "ova-heading": 36-55px, all caps). */
/* Some pages (About) also carry their own per-widget size, hence the long selector. */
:root:root body .elementor .elementor-element .ova-heading .title {
	font-size: clamp(24px, 3.2vw, 36px);
	line-height: 1.25;
}

/* Gap Elementor leaves between the banner and the page content (90px). */
:root:root body .elementor-top-section:has(.wrap_header_banner) {
	margin-bottom: 40px;
}

:root:root body .wrap_footer .elementor-element .ova-heading .title {
	font-size: 20px;
}

/* Standard pages (Refund policy, Offers...): centred compact title + gold bar. */
body header.page-header {
	margin: 0 0 24px;
	padding: 0;
	text-align: center;
}

body header.page-header .page-title {
	margin: 0;
	padding: 0 0 14px;
	font-size: clamp(26px, 3.2vw, 34px);
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
}

body header.page-header .page-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin: 12px auto 0;
	border-radius: 3px;
	background: var(--hft-gold);
}

/* Contact page card: hard-coded orange in the page, brand gold here. */
/* SOHI-ONLY (page-specific, not site-wide): this card is orange inside the Contact page itself. Pointing that column at Elementor's Global Accent colour makes this block unnecessary. */
body .elementor-3776 .elementor-element.elementor-element-56744bf:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap {
	background-color: var(--hft-gold);
}

body .elementor-3776 .elementor-element-56744bf > .elementor-widget-wrap,
body .elementor-3776 .elementor-element-56744bf > .elementor-widget-wrap a,
body .elementor-3776 .elementor-element-56744bf > .elementor-widget-wrap .title,
body .elementor-3776 .elementor-element-56744bf > .elementor-widget-wrap i {
	color: var(--hft-on-brand);
}

/* "Leave your Message" was a dark teal. */
body .elementor-3776 .elementor-element.elementor-element-d54a5bf .elementor-heading-title {
	color: var(--hft-ink);
}

@media (max-width: 767px) {
	:root:root body .wrap_header_banner .header_banner_el .header_title.header_title {
		padding: 28px 0 30px;
		font-size: 24px;
	}

	:root:root body .elementor .elementor-element .ova-heading .title {
		font-size: 24px;
	}

	:root:root body .elementor-top-section:has(.wrap_header_banner) {
		margin-bottom: 24px;
	}
}

@media (max-width: 1024px) {
	/* Header: the guest "Login" pill wrapped under the logo / overlapped the menu
	   icon on tablets and phones; there it is just the user icon (still a link). */
	.hbm-account-guest .hbm-account-login-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.hbm-account-guest .hbm-account-login {
		padding: 8px;
		gap: 0;
	}

	.hbm-account-guest.hbm-account-guest {
		width: auto;
	}
}

/* Standard pages with no banner (Blog, Offers, Refund...): the content began
   flush against the header. */
:root:root body.page:not(:has(.wrap_header_banner)) .container_site > .main {
	padding-top: 40px;
}

@media (max-width: 767px) {
	:root:root body.page:not(:has(.wrap_header_banner)) .container_site > .main {
		padding-top: 24px;
	}
}

/* ========== 5. APP MODE (plugin: Settings -> Mobile App) ========== */

/* body.hbm-app is added by the plugin only when app mode is on. On a phone the
   header becomes one compact row (logo + menu): the Login / account lives in
   the bottom tab bar, so the header copy goes, and the header stops wrapping
   into two rows (it was ~160px tall). The footer is excluded. */
@media (max-width: 767px) {
	:root:root body.hbm-app .elementor-widget-hbm_elementor_account_menu {
		display: none;
	}

	:root:root body.hbm-app .elementor-top-section:has(.elementor-widget-ova_logo):not(.wrap_footer *) {
		padding-top: 6px;
		padding-bottom: 6px;
	}

	:root:root body.hbm-app .elementor-top-section:has(.elementor-widget-ova_logo):not(.wrap_footer *) > .elementor-container {
		flex-wrap: nowrap;
		align-items: center;
	}

	:root:root body.hbm-app .elementor-top-section:has(.elementor-widget-ova_logo):not(.wrap_footer *) > .elementor-container > .elementor-column {
		width: auto;
		flex: 0 0 auto;
	}

	:root:root body.hbm-app .elementor-top-section:has(.elementor-widget-ova_logo):not(.wrap_footer *) > .elementor-container > .elementor-column:has(.elementor-widget-ova_logo) {
		flex: 1 1 auto;
	}
}