/* ---------------------------------------------------------------------------
* Brand colours
*
* The theme shipped a soft brown (#b99d75) as its accent, which sat next to the
* gold logo rather than with it. These map the accent onto the logo's own gold,
* sampled from its wordmark (#cb962c), and keep a lighter tone for small text
* and icons on the dark green, where the mid tone is too close in value.
*
* Declared at :root so a colour picked later in the Customizer (printed inline,
* after this file) still wins.
* ------------------------------------------------------------------------- */

:root {
	--hk-gold: #c9962c;
	--hk-gold-strong: #b3801d;
	--hk-gold-light: #e5b84f;
	--primary-color: var(--hk-gold);
	--theme-primary-color: var(--hk-gold);
	--primary-color-semi: rgba(201, 150, 44, 0.3);
}

/*
* Small gold text and icons sitting on the dark green or on black: the mid gold
* is only 2.5:1 against it, the light one 3.7:1. The selectors carry one class
* more than the rules they override, which live in the component stylesheets.
*/
#masthead.hkh-header .hkh-topbar .hkh-topbar-item .hkh-icon,
.hkp-single .hkp-rail .hkp-cta .hkp-cta-eyebrow,
.hkc-page .hkc-details .hkc-card .hkc-eyebrow,
.hkc-page .hkc-details .hkc-list .hkc-list-icon,
.hkc-page .hkc-details .hkc-list .hkc-list-link,
.hkb-media .hkb-media-text {
	color: var(--hk-gold-light);
}

.hkc-page .hkc-details .hkc-list .hkc-list-link {
	border-bottom-color: var(--hk-gold-light);
}

/* The same on the dark green menu panel: its accent drives small text, while
* the primary button keeps the mid gold so white text stays readable on it. */
.hkh-header-active .sidemenu-native .hkh-mm-blog,
.hkh-header-active .sidemenu-native .cs-mm-toggle[aria-expanded="true"] {
	color: #fff;
}

/*
* Branded stand-in for a missing featured image
*
* Markup: CozyStay_Brand_Media::the_placeholder()
*   - in the blog list, inside .featured-img.featured-img-brand
*   - in the single post header, as .page-title-bg.hkb-media-header
*
* The logo url arrives as --hkb-logo (inline style from the same class), so the
* watermark follows whatever logo is set in the Customizer.
*/

.hkb-media {
	--hkb-green: var(--secondary-color, #53624e);
	--hkb-gold: var(--primary-color, #c9962c);
	position: relative;
	display: block;
	overflow: hidden;
	background-color: var(--hkb-green);
	background-image:
		radial-gradient(120% 120% at 15% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(135deg, #5b6b55 0%, #47543f 100%);
	color: #fff;
	text-decoration: none;
}

/* A second, very quiet copy of the mark, bled off the corner, so the block
* does not read as a plain coloured rectangle. */
.hkb-media:after {
	position: absolute;
	right: -8%;
	bottom: -22%;
	width: 52%;
	padding-top: 48%;
	background-image: var(--hkb-logo, none);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.07;
	content: "";
	pointer-events: none;
}

.hkb-ratio-3-2 {
	aspect-ratio: 3 / 2;
}

.hkb-ratio-4-3 {
	aspect-ratio: 4 / 3;
}

.hkb-media-inner {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
}

/* The theme centres card images absolutely
* (.posts.layout-grid .featured-img a img); the mark has to stay in the flex
* flow so the block can place it, hence the long selector. */
.posts .featured-img a.hkb-media img.hkb-media-logo,
.hkb-media .hkb-media-logo,
.hkb-media-logo {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	-webkit-transform: none;
	transform: none;
	display: block;
	/* Sized by width: the logo is a wide lockup, and a height based size left
	* it as a thin strip. */
	width: 62%;
	max-width: 260px;
	height: auto;
	max-height: 60%;
	object-fit: contain;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The logo's wordmark is white, so it only appears on the dark block — which
* is exactly where this is used. */
.hkb-media-text {
	color: var(--hkb-gold);
	font-family: var(--heading-font, serif);
	font-size: 42px;
	letter-spacing: 0.08em;
	line-height: 1;
}

a.hkb-media:hover .hkb-media-logo,
.hkb-media:hover .hkb-media-logo {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}

/* ---------------------------------------------------------------------------
* Blog list card
* ------------------------------------------------------------------------- */

.featured-img-brand {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
}

.featured-img-brand .hkb-media {
	border-radius: 4px;
}

/* The date badge the theme drops into .featured-img must stay above the block. */
.featured-img-brand .post-date,
.featured-img-brand .meta-item.time,
.featured-img-brand .format-label {
	position: relative;
	z-index: 2;
}

/*
* Overlay cards: the card is the image, with the title written over it.
*
* For a post with no thumbnail the theme prints a spacer
* (.post:not(.has-post-thumbnail):before, padding-top: var(--img-ratio)) that
* gives the card its height, then leaves the media area empty. The block is
* lifted out of the flow to cover exactly that spacer — in the flow it would
* add a second card's worth of height below it.
*/
.posts.layout-overlay .post .featured-img.featured-img-brand-overlay,
.featured-img-brand-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
}

/* .featured-img a is position: relative in the theme, hence the extra class
* here: the block has to fill the card, not sit in its flow. */
.featured-img .hkb-media-overlay,
.hkb-media-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}

.hkb-media-overlay .hkb-media-inner {
	align-items: flex-start;
	/* Below the date badge the theme pins to the top left, and above where a
	* four line title starts. */
	padding-top: 22%;
}

.posts .featured-img a.hkb-media.hkb-media-overlay img.hkb-media-logo,
.hkb-media-overlay .hkb-media-logo {
	width: 180px;
	max-width: 66%;
	height: auto;
	max-height: 86px;
	opacity: 0.95;
}

.hkb-media-overlay:after {
	right: -12%;
	bottom: -14%;
	width: 46%;
	padding-top: 42%;
	opacity: 0.06;
}

/* ---------------------------------------------------------------------------
* Single post header
* ------------------------------------------------------------------------- */

/*
* .page-title-bg is the theme's absolutely positioned background layer, so the
* stand-in fills the whole band; the ratio classes must not fight that.
*/
.hkb-media-header {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	aspect-ratio: auto;
	border-radius: 0;
}

.hkb-media-header .hkb-media-inner {
	align-items: center;
	justify-content: center;
	padding: 0;
}

/* Behind the title, not beside it: the logo sits low and faint so the heading
* keeps the contrast it needs. */
.hkb-media-header .hkb-media-logo {
	width: 300px;
	max-width: 46%;
	height: auto;
	max-height: 150px;
	opacity: 0.2;
}

.hkb-media-header:after {
	display: none;
}

/* The theme colours the header text for a photo background; the same rules
* apply here because the block is just as dark. */
.hkb-title-brand,
.hkb-title-brand .entry-title,
.hkb-title-brand .meta-wrap,
.hkb-title-brand .meta-wrap a,
.hkb-title-brand .cat-links a {
	color: #fff;
}

.hkb-title-brand .cat-links a:hover,
.hkb-title-brand .meta-wrap a:hover {
	color: var(--primary-color, #c9962c);
}

.hkb-title-brand .container {
	position: relative;
	z-index: 2;
}

@media only screen and (max-width: 767px) {
	.hkb-media-header .hkb-media-logo {
		width: 200px;
		max-width: 62%;
		max-height: 90px;
	}

	.hkb-media-logo {
		max-height: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hkb-media-logo {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
* Slider dots and arrows
*
* Elementor's site kit styles every <button> on the site — a 1px border,
* 5em corners, 12px 32px of padding, a background colour and a real font
* size. Slick's dots and arrows are buttons too, and the kit's rule loads
* after the theme's, so it won: the dots turned into outlined ovals with
* their numbers ("1", "2" … "27") showing, and the arrows picked up the same
* frame and their "Previous"/"Next" text.
*
* "html body" lifts these just above the kit's ".elementor-kit-N button"
* without reaching the theme's own slider variations (".cs-gallery…",
* ".cs-slider…"), which are more specific still and keep their say.
* ------------------------------------------------------------------------- */

html body .slick-dots li button {
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 6px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font-size: 0;
	line-height: 0;
	letter-spacing: 0;
	text-indent: 0;
}

html body .slick-arrow {
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 99px;
	background: #fff;
	color: #111;
	font-size: 0;
	letter-spacing: 0;
}

/*
* Dots laid over a photograph: a faint shadow keeps them visible over its
* bright parts — a white roof, a sky.
*/
html body .slider-dots-overlap .slick-dots li button:before {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.35);
}

/*
* A gallery with a dozen slides or more (27 on the home page) makes a long
* row: the dots close up so it stays well inside the slide, and on a phone
* they tighten further so the row still fits on one line.
*/
html body .slick-dots:has(li:nth-child(12)) li button {
	padding: 4px;
}

@media only screen and (max-width: 767px) {
	html body .slick-dots:has(li:nth-child(12)) li button {
		padding: 3px;
	}

	html body .slick-dots:has(li:nth-child(12)) li button:before {
		width: 5px;
		height: 5px;
	}
}

/* ---------------------------------------------------------------------------
* Background video (hk-video.js)
*
* The player is sized like object-fit: cover — container query units let it
* measure its own box — then scaled a little further, so YouTube's title strip
* along the top and its logo in the corner fall outside the frame. It cannot
* be clicked, and it fades in over the poster as soon as it starts playing.
* ------------------------------------------------------------------------- */

.hkv {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: #0f1411;
	container-type: size;
	pointer-events: none;
}

.hkv-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s ease;
}

.hkv iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	width: max(100cqw, 177.78cqh);
	height: max(100cqh, 56.25cqw);
	border: 0;
	opacity: 0;
	transform: translate(-50%, -50%) scale(1.22);
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.hkv.is-playing iframe {
	opacity: 1;
}

.hkv.is-playing .hkv-poster {
	opacity: 0;
}

/* ---------------------------------------------------------------------------
* Header height, for the heroes that sit under it
*
* hk-header.js writes the measured height here; these are the measured
* defaults (top bar + main bar on desktop, main bar alone on a phone), so the
* heroes are already in the right place before the script runs.
* ------------------------------------------------------------------------- */

:root {
	--hk-header-h: 156px;
	--hk-hero-gap: 72px;
}

@media only screen and (max-width: 1199px) {
	:root {
		--hk-header-h: 140px;
		--hk-hero-gap: 56px;
	}
}

@media only screen and (max-width: 767px) {
	:root {
		--hk-header-h: 116px;
		--hk-hero-gap: 48px;
	}
}

/* ---------------------------------------------------------------------------
* Buttons to the service pages (CozyStay_HK_Services::buttons())
*
* Used in the related sections of every HK template, on dark and light
* backgrounds alike: the text takes the section's colour, the outline is gold.
* ------------------------------------------------------------------------- */

.hks-more {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 26px 0 0;
}

.hks-more-center {
	justify-content: center;
	margin-top: 36px;
}

.hks-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	padding: 0 22px;
	border: 1px solid rgba(201, 150, 44, 0.75);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hks-more-btn span[aria-hidden] {
	color: #c9962c;
	transition: transform 0.2s ease, color 0.2s ease;
}

.hks-more-btn:hover,
.hks-more-btn:focus-visible {
	border-color: #c9962c;
	background: #c9962c;
	color: #1a1305;
}

.hks-more-btn:hover span[aria-hidden],
.hks-more-btn:focus-visible span[aria-hidden] {
	color: #1a1305;
	transform: translateX(3px);
}

@media only screen and (max-width: 767px) {
	.hks-more-btn {
		min-height: 44px;
		padding: 0 18px;
		font-size: 13px;
	}
}