/*
Theme Name: Hemma Child – Duplex77
Description: duplex77.fr child of Hemma. Photos are real responsive images (srcset, lazy) instead of CSS backgrounds; on phones photo blocks take the photo's own shape, on desktop portrait photos are shown whole on a blurred backdrop; per-photo focus point (Media Library field "Focus point"). 1.3.0: Polylang support (theme texts + photo alt texts in string translations, x-default hreflang, language switcher in the menu).
Version: 1.9.0
Template: hemma
Text Domain: hemma
License: GNU General Public License v2 or later
*/

/* ------------------------------------------------------------------
   1. The photo element that replaces the theme's CSS background
   (added by duplex_responsive_backgrounds() in functions.php)
   ------------------------------------------------------------------ */
.duplex-has-bg { overflow: hidden; overflow: clip; background-image: none !important; } /* clip: crops like hidden but keeps position:sticky working */
.duplex-has-bg:not(.block-figure) { position: relative; } /* the split figure keeps the theme's own positioning */

.duplex-bg,
.duplex-bg-backdrop {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	max-width: none;
	margin: 0;
	display: block !important;
	z-index: 0;
	pointer-events: none;
}
.duplex-bg { object-fit: cover; object-position: var(--duplex-focus, 50% 50%); }
.duplex-has-bg > *:not(.duplex-bg):not(.duplex-bg-backdrop) { position: relative; z-index: 1; }
/* never let the theme's flex/min-height rules for box children apply to the photo layers */
.duplex-has-bg > .duplex-bg,
.duplex-has-bg > .duplex-bg-backdrop { flex: none !important; min-height: 0 !important; }

/* blurred copy behind a photo shown whole (desktop only) */
.duplex-bg-backdrop { object-fit: cover; filter: blur(28px) saturate(1.1) brightness(.9); transform: scale(1.15); }

/* ------------------------------------------------------------------
   2. Desktop: portrait photos in banners / full-width blocks, and every
   photo in a text + photo block, are shown whole instead of cropped
   ------------------------------------------------------------------ */
@media screen and (min-width: 769px) {
	.duplex-has-bg.is-portrait:not(.block-figure) > .duplex-bg { object-fit: contain; }
	/* text + photo blocks: the photo box is half the screen wide and as tall as the text, so show the whole photo
	   (any shape) on its blurred copy instead of cropping it */
	.block-figure.duplex-has-bg > .duplex-bg { object-fit: contain; }
	/* long texts make the box taller than the screen: keep the photo in view (sticky) while the text scrolls */
	.block-figure.duplex-has-bg > .duplex-bg {
		position: sticky !important;
		top: calc(90px + var(--duplex-topbar, 0px)); /* below the always-visible menu (section 6) and the review bar (section 7) */
		height: min(100%, calc(100vh - 90px - var(--duplex-topbar, 0px)));
		object-position: 50% 50%;
	}
}

/* Block Height "Photo height" (option added in functions.php): the block is as tall as its photo, at most one
   screen; a longer text still makes it taller (then the photo stays sticky). The theme's 100vh/50vh don't apply. */
.block.is-photoheight { display: flex; flex-direction: column; justify-content: center; }
.block.is-photoheight > :first-child { display: flex; flex: 1 0 auto; flex-direction: column; justify-content: center; }
/* full-width photo blocks: the photo at full width */
.block.is-bg-image.is-photoheight,
.block.is-bg-image.is-photoheight > :first-child { min-height: min(100vh, calc(100vw / var(--duplex-ar, 1.5))); }
/* text + photo blocks side by side (theme: from 1020px): the photo at half the block's width */
@media screen and (min-width: 1020px) {
	.block.duplex-split-fit.is-photoheight { container-type: inline-size; min-height: 0; }
	.block.duplex-split-fit.is-photoheight > .block-content { min-height: min(100vh, calc(50cqw / var(--duplex-split-ar, 1.5))); }
}

/* bedroom lists (template-room.php hard-codes a full-screen height, no setting): always photo height */
@media screen and (min-width: 1020px) {
	.block.block-split.duplex-split-fit { container-type: inline-size; }
	.block.block-split.duplex-split-fit > .block-content.is-fullheight { min-height: min(100vh, calc(50cqw / var(--duplex-split-ar, 1.5))) !important; }
	.block.block-split.duplex-split-fit > .block-content.is-fullheight > .block-figure { min-height: 0 !important; }
}

/* Block Height "Banner (compact strip)" (option added in functions.php): a short band, e.g. for an advert. The text
   sets the height (tight padding, smaller title); the photo is cropped to fill its half (focus point applies). */
.block.is-bandheight .block-title { font-size: 30px; font-size: clamp(1.5rem, 2.2vw, 2.25rem); margin-bottom: .2em; }
.block.is-bandheight .block-subtitle { margin-bottom: .6em; }
@media screen and (min-width: 1020px) {
	.block.is-bandheight > .block-content { min-height: 0 !important; }
	.block.is-bandheight .block-text { padding-top: 44px; padding-bottom: 44px; }
	.block.is-bandheight .block-figure.duplex-has-bg > .duplex-bg {
		position: absolute !important; top: 0; height: 100%;
		object-fit: cover; object-position: var(--duplex-focus, 50% 50%);
	}
	.block.is-bandheight .block-figure > .duplex-bg-backdrop { display: none !important; }
}

/* ------------------------------------------------------------------
   3. Phones: photo blocks follow the photo's own shape (whole photo visible)
   ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
	.duplex-has-bg > .duplex-bg-backdrop { display: none !important; } /* not shown, so a lazy image is never downloaded */

	/* full-width photo blocks */
	.block.duplex-has-bg.is-fullheight,
	.block.duplex-has-bg.is-halfheight,
	.block.duplex-has-bg.is-fullheight > :first-child,
	.block.duplex-has-bg.is-halfheight > :first-child { min-height: 0 !important; }
	.block.duplex-has-bg { aspect-ratio: var(--duplex-ar, 1.5); }

	/* page banner: tall enough for the title, otherwise the photo's shape */
	.hero.duplex-has-bg.is-fullheight,
	.hero.duplex-has-bg.is-fullheight > :first-child {
		min-height: min(calc(100vh - 90px), max(55vh, calc(100vw / var(--duplex-ar, 1.5)))) !important;
	}

	/* text + photo blocks: the photo above the text, at its own shape */
	.block-figure.duplex-has-bg { min-height: 0 !important; aspect-ratio: var(--duplex-ar, 1.5); }
	/* Banner blocks: a wide crop of the photo above the text */
	.block.is-bandheight .block-figure.duplex-has-bg { aspect-ratio: 2; }
	.block.is-bandheight .block-figure.duplex-has-bg > .duplex-bg { object-fit: cover; }
	/* bedroom lists: the template's full-screen box would stretch the photo box beyond the photo */
	.block.block-split > .block-content.is-fullheight { min-height: 0 !important; }
	.block.block-split > .block-content.is-fullheight > .block-figure.duplex-has-bg { flex: none !important; }
}

/* ------------------------------------------------------------------
   4. Phone/tablet menu (theme's full-screen overlay below 1020px):
   left-aligned (theme centres it, no setting), sections fold open on
   tap (js/mobile-menu.js), sub-pages smaller and indented
   ------------------------------------------------------------------ */
.duplex-fold { display: none; }
@media screen and (max-width: 1019px) {
	.main-navigation { font-size: 26px; font-size: 1.625rem; line-height: 1.25; text-align: left; }
	.main-navigation .menu { padding-left: 32px; padding-right: 32px; }
	.main-navigation .menu > li { padding: .3em 0; }
	.main-navigation li.menu-item-has-children > .sub-menu { display: none; }
	.main-navigation li.menu-item-has-children.duplex-open > .sub-menu { display: block; }
	.main-navigation .sub-menu {
		font-size: .75em;
		margin: .35em 0 .2em;
		padding: .1em 0 .1em .9em;
		max-width: 20em;
		border-left: 2px solid #222; /* the thin black rule of the duplex77 logo */
	}
	.main-navigation .sub-menu li { padding: .3em 0; }
	.main-navigation .sub-menu a { color: #6b6b6b; }
	.main-navigation .duplex-fold {
		display: inline-block;
		width: .38em; height: .38em;
		margin-left: .4em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-.2em) rotate(45deg);
		transition: transform .2s;
		opacity: .6;
	}
	.main-navigation .duplex-open > a .duplex-fold { transform: translateY(.05em) rotate(-135deg); }
}

/* ------------------------------------------------------------------
   6. The menu bar stays visible while scrolling (the theme hides it on
   the way down and only brings it back when scrolling up; no setting)
   ------------------------------------------------------------------ */
.site-header.is-header-fixed,
.site-header.is-header-fixed.is-header-hidden { transform: none !important; visibility: visible !important; opacity: 1 !important; }
.is-menu-desktop .site-header.is-header-fixed.is-header-hidden .main-navigation { visibility: visible !important; }
/* menu above the banner (Customizer → Header Position 2, body.is-header-static): simply keep it fixed from the start,
   so it never scrolls away first (the theme's scroll script reacts late) */
body.is-header-static .site-header { position: fixed !important; top: 0; }
body.admin-bar.is-header-static .site-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar.is-header-static .site-header { top: 46px; } }
@media screen and (max-width: 600px) { body.admin-bar.is-header-static .site-header { top: 0; } }

/* ------------------------------------------------------------------
   7. Language switcher (Polylang "Languages" menu item, dropdown:
   current language as parent, the others below; phones: folds open
   like the other sections, via js/mobile-menu.js)
   ------------------------------------------------------------------ */
@media screen and (min-width: 1020px) {
	/* the dropdown is the last item: anchor it to the right so it never runs off the screen; names are short */
	.is-menu-desktop .main-navigation .pll-parent-menu-item:hover > .sub-menu,
	.is-menu-desktop .main-navigation .pll-parent-menu-item.focus > .sub-menu { left: auto; right: 0; }
	.is-menu-desktop .main-navigation .pll-parent-menu-item .sub-menu a { width: 150px; }
}
/* the extra item made the menu wrap to two lines on small laptops (1020–1279px): tighten the spacing there
   (checked in all five languages: one line from 1020px up) */
@media screen and (min-width: 1150px) and (max-width: 1279px) {
	.is-menu-desktop .main-navigation .menu > li { padding-left: 6px; padding-right: 6px; }
	.is-menu-desktop .main-navigation .menu > li > a { letter-spacing: .5px; }
}
@media screen and (min-width: 1020px) and (max-width: 1149px) {
	.is-menu-desktop .main-navigation .menu > li { padding-left: 4px; padding-right: 4px; }
	.is-menu-desktop .main-navigation .menu > li > a { letter-spacing: 0; font-size: 13px; }
}

/* ------------------------------------------------------------------
   7. Review bar above the menu (functions.php, wp_body_open): selling
   points left, Airbnb rating right (plain text, no review schema)
   ------------------------------------------------------------------ */
:root { --duplex-topbar: 34px; }
.duplex-topbar {
	height: var(--duplex-topbar); background: #222; color: #fff;
	font-size: 13px; line-height: var(--duplex-topbar); letter-spacing: .02em;
	z-index: 10; overflow: hidden;
}
.duplex-topbar-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 100%; padding: 0 24px; }
.duplex-topbar-usp { display: flex; gap: 0; white-space: nowrap; overflow: hidden; }
.duplex-topbar-usp > span + span::before { content: ""; display: inline-block; width: 1px; height: 14px; background: rgba(255,255,255,.4); margin: 0 14px; vertical-align: -2px; }
.duplex-topbar-rating { display: flex; align-items: center; gap: 7px; color: #fff !important; text-decoration: none; white-space: nowrap; }
.duplex-topbar-rating::after { display: none !important; } /* theme link underline */
.duplex-topbar-rating:hover .duplex-tb-count { text-decoration: underline; }
/* 1.12/1.6: Airbnb + VRBO summary → reviews page ("★★★★★ 4.89 Airbnb · 10/10 VRBO · 57 reviews"); phones: "★ 4.89 · 57 reviews" */
.duplex-tb-vrbo { display: inline-flex; align-items: center; gap: 7px; }
.duplex-tb-plat { opacity: .85; }
.duplex-star1 { display: none; color: #e4c9a2; }
.duplex-tb-exc { opacity: .85; }
/* tablets (769–1023px): drop the label and the second selling point so the summary fits (checked in all 6 languages) */
@media screen and (max-width: 1023px) { .duplex-tb-exc, .duplex-topbar-extra { display: none; } .duplex-topbar-usp > span:nth-child(2) { display: none; } }
.duplex-topbar-rating b { font-weight: 600; }
.duplex-topbar-sep { opacity: .5; }
.duplex-topbar-extra .duplex-topbar-sep { margin-right: 4px; }
/* five stars, filled to the rating (e.g. 4.89 → 97.8%) */
.duplex-stars {
	position: relative; display: inline-block; font-size: 15px; letter-spacing: 2px; line-height: 1;
	color: rgba(255,255,255,.25);
}
.duplex-stars::before {
	content: "★★★★★"; position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap;
	width: var(--duplex-fill, 100%); color: #f2c94c;
}
.is-nav-open .duplex-topbar { visibility: hidden; }
@media screen and (max-width: 768px) {
	:root { --duplex-topbar: 30px; }
	.duplex-topbar { font-size: 12px; }
	.duplex-topbar-in { justify-content: center; padding: 0 12px; }
	.duplex-topbar-usp, .duplex-topbar-extra, .duplex-tb-exc, .duplex-stars, .duplex-tb-plat, .duplex-tb-vrbo { display: none; }
	.duplex-star1 { display: inline; }
}
@media print { .duplex-topbar { display: none; } }

/* ------------------------------------------------------------------
   7b. Review bar: every selling point stays (js/topbar.js packs what fits
   and rotates the rest); below 1024px two lines: rotating selling points
   + the full rating, wrapping if needed. Overrides the hiding rules above.
   ------------------------------------------------------------------ */
.duplex-tb-js .duplex-topbar-usp > span { display: none !important; }
.duplex-tb-js .duplex-topbar-usp > span.is-on { display: inline !important; animation: duplex-tb-fade .6s ease; }
.duplex-tb-js .duplex-topbar-usp > span.is-first::before { display: none !important; }
.duplex-tb-js .duplex-topbar-usp.is-measuring > span { display: inline !important; animation: none; }
.duplex-tb-js .duplex-topbar-usp { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@keyframes duplex-tb-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .duplex-tb-js .duplex-topbar-usp > span.is-on { animation: none; } }
/* the full rating everywhere (it used to be shortened on small screens) */
.duplex-topbar .duplex-tb-exc, .duplex-topbar .duplex-topbar-extra, .duplex-topbar .duplex-tb-plat, .duplex-topbar .duplex-tb-vrbo { display: inline !important; }
.duplex-topbar .duplex-stars { display: inline-block !important; }
/* spacing inside the grouped parts ("· 10/10 VRBO (Exceptional)", "· Alosa Terrace") */
.duplex-topbar .duplex-tb-vrbo, .duplex-topbar .duplex-topbar-extra { display: inline-flex !important; align-items: center; gap: 5px; }
@media screen and (max-width: 1023px) {
	.duplex-topbar { height: auto; line-height: 1.4; padding: 6px 0; }
	.duplex-topbar-in { flex-direction: column; justify-content: center; align-items: center; gap: 3px; padding: 0 12px; text-align: center; }
	.duplex-tb-js .duplex-topbar-usp { display: block !important; max-width: 100%; white-space: nowrap; }
	.duplex-topbar-rating { flex-wrap: wrap; justify-content: center; white-space: normal; row-gap: 0; column-gap: 6px; }
	.duplex-topbar-rating > * { white-space: nowrap; }
}
/* the five-star row is shown everywhere now, so never the single compact star */
.duplex-topbar .duplex-star1 { display: none !important; }
/* phones: only the review summary (owner's choice), on as many lines as it needs */
@media screen and (max-width: 768px) { .duplex-tb-js .duplex-topbar-usp { display: none !important; } .duplex-topbar-in { gap: 0; } }

/* duplex: the menu floats over the banner and is only fixed after scrolling, so the bar sits on top of the page and
   scrolls away; the floating menu starts just below it */
.duplex-topbar { position: relative; }
.site-header:not(.is-header-fixed) { top: var(--duplex-topbar); }
body.admin-bar .site-header:not(.is-header-fixed) { top: calc(32px + var(--duplex-topbar)); }
@media screen and (max-width: 782px) { body.admin-bar .site-header:not(.is-header-fixed) { top: calc(46px + var(--duplex-topbar)); } }

/* ------------------------------------------------------------------
   9. "Guest reviews" page (build/reviews/: text inside the composer's
   text + photo blocks; classes duplex-rv-*). Plain text, no review schema.
   ------------------------------------------------------------------ */
.duplex-rv { text-align: left; }
.duplex-rv p { margin: 0 0 .9em; }
.duplex-rv-total { font-size: 1.15em; }
.duplex-rv-total strong { font-size: 1.6em; font-weight: 600; margin-right: 2px; }
.duplex-rv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0 0 1.6em; }
.duplex-rv-card { border: 1px solid rgba(0,0,0,.12); border-radius: 4px; padding: 14px 16px 6px; background: rgba(0,0,0,.02); }
.duplex-rv-card p { margin: 0 0 6px; line-height: 1.45; }
.duplex-rv-platform { font-size: .8em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.duplex-rv-badge { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 10px; background: #e4c9a2; color: #222; font-size: .95em; letter-spacing: .04em; text-transform: none; font-weight: 600; }
.duplex-rv-score strong { font-size: 1.9em; font-weight: 600; line-height: 1.1; }
.duplex-rv-star { color: #c9a46a; font-size: 1.5em; }
.duplex-rv-scale { opacity: .7; }
.duplex-rv-source { font-size: .82em; opacity: .7; }
.duplex-rv-link { font-size: .9em; }
.duplex-rv-h { font-size: 1.05em; font-weight: 600; margin: 0 0 .5em; }
.duplex-rv-new { padding: 10px 14px; border-left: 3px solid #e4c9a2; background: rgba(228,201,162,.15); }
.duplex-rv-note { font-size: .85em; opacity: .75; }
.duplex-rv-quote { margin: 0 0 1.5em; padding: 0 0 0 16px; border: 0; border-left: 3px solid #e4c9a2; font-size: inherit; font-style: normal; quotes: none; }
.duplex-rv-quote::before, .duplex-rv-quote::after { content: none !important; display: none !important; }
.duplex-rv-quote p { margin: 0 0 .35em; font-size: inherit; line-height: 1.55; }
.duplex-rv-tr { font-size: .92em; opacity: .75; }
.duplex-rv-by { font-size: .82em; letter-spacing: .03em; opacity: .8; }
.duplex-rv-btns a { display: inline-block; margin: 0 8px 8px 0; padding: 7px 14px; border: 1px solid currentColor; border-radius: 3px; text-decoration: none; }
.duplex-rv-btns a::after { display: none !important; }
.duplex-rv-btns a:hover { background: rgba(0,0,0,.05); }
/* "Meet your hosts" card (reviews pages + last block of the contact pages): Airbnb host stats as plain text */
.duplex-host { text-align: left; max-width: 520px; }
.duplex-host p { margin: 0 0 .9em; }
.duplex-host-card { display: flex; align-items: center; gap: 24px; margin: 0 0 1.3em; padding: 22px 24px; border-radius: 16px; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.12); color: #222; }
.duplex-host-id { flex: 1 1 55%; text-align: center; }
.duplex-host .duplex-host-photo { display: block; width: 96px; height: 96px; margin: 0 auto 10px; border-radius: 50%; object-fit: cover; }
.duplex-host .duplex-host-name { margin: 0; font-size: 1.35em; font-weight: 600; line-height: 1.2; }
.duplex-host .duplex-host-sub { margin: 3px 0 0; font-size: .85em; opacity: .75; }
.duplex-host-stats { flex: 0 1 45%; list-style: none; margin: 0 !important; padding: 0 !important; }
.duplex-host-stats li { display: flex; flex-direction: column; margin: 0; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.12); list-style: none; }
.duplex-host-stats li::before { content: none !important; }
.duplex-host-stats li:last-child { border-bottom: 0; }
.duplex-host-stats strong { font-size: 1.3em; font-weight: 600; line-height: 1.15; }
.duplex-host-stats span { font-size: .78em; opacity: .8; }
.duplex-host-stats .duplex-host-star { font-size: .8em; opacity: 1; color: #c9a46a; }
.duplex-rv-scorebox { display: inline-block; min-width: 2.1em; padding: 2px 7px; border-radius: 8px; background: #222; color: #fff; font-size: 1.45em; font-weight: 600; line-height: 1.25; text-align: center; margin-right: 3px; }
.duplex-rv-label { margin-left: 6px; font-weight: 600; }
.duplex-host-btn { display: inline-block; padding: 10px 22px; border-radius: 4px; background: #222; color: #fff !important; text-decoration: none; letter-spacing: .03em; }
.duplex-host-btn::after { display: none !important; }
.duplex-host-btn:hover { opacity: .88; }
.duplex-host .duplex-host-source { font-size: .8em; opacity: .65; }
@media screen and (max-width: 420px) {
	.duplex-host-card { gap: 14px; padding: 18px 16px; }
	.duplex-host .duplex-host-photo { width: 80px; height: 80px; }
}

/* ------------------------------------------------------------------
   10. Desktop menu a little more compact on laptop widths (1.6.0: the
   menu got a "Reviews" item; with it every language stays on one row
   from 1020px, checked en/fr/nl/es/de/it)
   ------------------------------------------------------------------ */
@media screen and (min-width: 1020px) and (max-width: 1599px) {
	.is-menu-desktop .main-navigation > div > ul > li { padding-left: 8px; padding-right: 8px; }
	.is-menu-desktop .main-navigation > div > ul > li > a { font-size: 13px; letter-spacing: .5px; }
}
@media screen and (min-width: 1020px) and (max-width: 1099px) {
	.is-menu-desktop .main-navigation > div > ul > li { padding-left: 6px; padding-right: 6px; }
}

/* language switcher flags (Polylang "show flags"): inline with the text, not pushed up by the theme's image margin */
.main-navigation .lang-item img,
.main-navigation .pll-parent-menu-item > a img { display: inline-block; width: 16px; height: 11px; margin: 0 7px 0 0 !important; vertical-align: -1px; }

/* ------------------------------------------------------------------
   11. Language suggestion bar (js/lang-suggest.js): a small one-time
   card at the bottom centre; never redirects
   ------------------------------------------------------------------ */
.duplex-lang-suggest {
	position: fixed; left: 50%; bottom: 18px; z-index: 95; transform: translate(-50%, 20px); opacity: 0;
	display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px);
	padding: 10px 10px 10px 14px; background: #fff; color: #2f3d3b; border-radius: 12px;
	box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: 14px; line-height: 1.3;
	transition: opacity .35s, transform .35s;
}
.duplex-lang-suggest.is-in { opacity: 1; transform: translate(-50%, 0); }
.duplex-lang-suggest img { width: 16px; height: 11px; margin: 0 !important; flex: none; }
.duplex-ls-view { font-weight: 600; white-space: nowrap; color: inherit !important; text-decoration: underline; }
.duplex-ls-view::after { display: none !important; }
.duplex-ls-close { border: 0; background: none; font-size: 20px; line-height: 1; padding: 2px 6px; cursor: pointer; color: #6b7a77; }
@media screen and (max-width: 768px) {
	.duplex-lang-suggest { bottom: 92px; font-size: 13px; } /* above the house badge / chat bubble */
}
@media print { .duplex-lang-suggest { display: none; } }