/*
Theme Name: Alloggio Child
Theme URI: https://alloggio.qodeinteractive.com
Description: A child theme of Alloggio
Author: Edge Themes
Author URI: https://qodeinteractive.com
Version: 1.0.0
Text Domain: alloggio
Template: alloggio
*/

/*
 * Polylang language switcher (replaces the theme's old hardcoded demo
 * WPML widget, which linked nowhere). Native <select>, styled to sit
 * cleanly in the divided-header right widget area instead of butting up
 * against the Contact link.
 */
.widget_polylang {
	display: inline-block;
	margin-left: 14px;
}
.widget_polylang .pll-switcher-select {
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 1px solid rgba(0, 0, 0, 0.2);
	background-color: transparent;
	color: inherit;
	padding: 4px 8px;
	border-radius: 3px;
	cursor: pointer;
}
.widget_polylang .pll-switcher-select option {
	color: #1a1a1a;
	text-transform: none;
}

/*
 * Team page body content - wraps the classic (non-Elementor) content in
 * the same width/centering the rest of the site's Elementor pages use
 * (.qodef-content-grid), plus section spacing to match.
 */
.nb-team-page-content {
	padding: 60px 0 40px;
}
.nb-team-page-content h2 {
	margin-top: 50px;
	margin-bottom: 20px;
}
.nb-team-page-content h2:first-child {
	margin-top: 0;
}
.nb-team-page-content ul {
	margin: 0 0 20px;
	padding-left: 20px;
}
.nb-team-page-content li {
	margin-bottom: 10px;
}
.nb-team-page-content p,
.nb-team-page-content li {
	font-size: 21px;
	line-height: 1.588;
	color: rgb(2, 1, 1);
}

/*
 * Horizontal infinite-scroll TRUE masonry gallery for team photos -
 * matches loop.co.ke/about-us's "Join Our Team" section structure:
 * most photos are single full-height tiles, but tiles with a matching
 * aspect ratio (here, the two landscape shots) stack as a pair sharing
 * one column - the two-in-a-column create the masonry "layering" look.
 */
.nb-team-scroll {
	position: relative;
	overflow: hidden;
	height: 760px;
	margin: 30px 0 50px;
	/* Break out of .qodef-content-grid to span the full browser width. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	-webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
	mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
}
.nb-team-scroll-track {
	display: flex;
	align-items: stretch;
	gap: 6px;
	height: 100%;
	width: max-content;
	animation: nb-team-scroll 28s linear infinite;
}
.nb-team-scroll:hover .nb-team-scroll-track {
	animation-play-state: paused;
}
.nb-team-scroll-track > img {
	height: 100%;
	width: auto;
	max-width: none;
	display: block;
	object-fit: cover;
	border-radius: 0;
	flex-shrink: 0;
}
.nb-team-tile-pair {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	height: 100%;
	flex-shrink: 0;
}
.nb-team-tile-pair img {
	height: calc(50% - 3px);
	width: auto;
	max-width: none;
	display: block;
	object-fit: cover;
	border-radius: 0;
	flex-shrink: 0;
}
@keyframes nb-team-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (max-width: 680px) {
	.nb-team-scroll { height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
	.nb-team-scroll-track {
		animation: none;
	}
	.nb-team-scroll {
		overflow-x: auto;
	}
}

/*
 * Room card / slider images have wildly inconsistent native dimensions
 * (old 2020/2023 photos mixed with new uniform ones), which makes sliders
 * look uneven. Force a consistent aspect ratio + cover-crop everywhere a
 * room photo is shown, regardless of the source image's own dimensions.
 */
.qodef-e-media-image,
.qodef-e-media-image .swiper-slide,
.qodef-image-wrapper.swiper-slide {
	height: 220px !important;
}
.qodef-e-media-image img,
.qodef-image-wrapper img,
.qodef-m-slider img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: none !important;
}

/*
 * Single room page's top scrolling image carousel, doubled in height per
 * client request. NOTE: the shared `.qodef-image-wrapper.swiper-slide`
 * selector above (220px) is NOT safe to change directly - the exact same
 * class/component (AlloggioCoreImageGalleryShortcode) renders both this
 * carousel AND the Rooms archive listing's mini-gallery card thumbnails, so
 * their markup is otherwise identical. Confirmed via the live DOM that the
 * single room template's real page-level wrapper is `.qodef-room-single`
 * (not `.qodef-room-gallery-list`, which turned out to be an unused/
 * different shortcode variant) - the Rooms archive uses `.qodef-room-list`
 * instead, so `.qodef-room-single` safely scopes this to only the single
 * room page's carousel, leaving the archive cards at the original 220px.
 */
.qodef-room-single .qodef-e-media-image,
.qodef-room-single .qodef-e-media-image .swiper-slide,
.qodef-room-single .qodef-image-wrapper.swiper-slide {
	height: 440px !important;
}

/*
 * Widen the main content grid slightly so the 2-column room cards (see
 * archive-room layout below) have enough room next to the 33%-wide sidebar.
 * Matches the theme's own "content-grid-1300" breakpoint so it only affects
 * desktop, not mobile/tablet.
 */
@media only screen and (min-width: 1441px) {
	.qodef-content-grid-1300 .qodef-content-grid {
		width: 1400px;
	}
}

/*
 * Newsletter CTA section (blue background) had black text and a black
 * outlined button - both unreadable/invisible against the blue. Force
 * white throughout this section on the homepage (element 01fecee), its
 * separate Elementor copy on the Contact page (column 2a6f310b, same
 * #0404F8 background + contact-form-7 widget, different element hash),
 * and the Kenya-Re B&B page (column a095685, #1A2ADF background, same
 * widget - same bug, third independent Elementor occurrence).
 */
.elementor-element-01fecee,
.elementor-element-01fecee *,
.elementor-element-2a6f310b,
.elementor-element-2a6f310b *,
.elementor-element-a095685,
.elementor-element-a095685 * {
	color: #ffffff !important;
}
.elementor-element-01fecee .wpcf7-submit,
.elementor-element-2a6f310b .wpcf7-submit,
.elementor-element-a095685 .wpcf7-submit {
	border-color: #ffffff !important;
}
.elementor-element-01fecee input:not(.wpcf7-submit),
.elementor-element-2a6f310b input:not(.wpcf7-submit),
.elementor-element-a095685 input:not(.wpcf7-submit) {
	color: #1a1a1a !important;
	background-color: #ffffff !important;
	padding: 10px 14px !important;
	border-radius: 3px;
}

/*
 * Plain WooCommerce submit buttons go invisible on hover - found on the
 * order-received page's "Verify" button (email verification form) and the
 * My Account "Log in" button, both plain <button class="woocommerce-button
 * button"> with no theme skin. The theme's global
 * `button[type="submit"]:hover` rule sets color:#fff + background-color:
 * transparent, which is fine for the theme's own qodef-skinned buttons
 * (their solid fill comes from a separate sliding ::before overlay that
 * still shows through), but a bare WooCommerce button has no such overlay -
 * its background just disappears while the text turns white, vanishing
 * against the page. Force the brand blue back on hover (matches these
 * buttons' own non-hover background) so text stays legible.
 */
.woocommerce-button.button:hover,
button[type="submit"].woocommerce-button:hover {
	background-color: #0404f8 !important;
	border-color: #0404f8 !important;
	color: #ffffff !important;
}

/*
 * Contact page body paragraphs render in Elementor's default global
 * typography (Roboto, via --e-global-typography-primary-font-family),
 * because these are plain Elementor text-editor widgets with no per-widget
 * typography override - unlike the rest of the site's body copy, which
 * comes from theme templates/classic content and inherits the theme's
 * own Josefin Sans body font. Force the theme font back on this page (and
 * its sw/fr translations) so its paragraphs match every other page.
 * Same bug independently found on every room single page (Standard/
 * Superior/Deluxe all share the `single-room` template class, so one
 * selector covers all of them + any future room) - the Rooms archive
 * listing already correctly used Josefin Sans, only the single room pages
 * didn't.
 */
.elementor-page-2531 .elementor-widget-text-editor .elementor-widget-container,
.elementor-page-5217 .elementor-widget-text-editor .elementor-widget-container,
.elementor-page-5218 .elementor-widget-text-editor .elementor-widget-container,
.single-room .elementor-widget-text-editor .elementor-widget-container {
	font-family: "Josefin Sans", sans-serif !important;
}

/*
 * Contact page location map - full viewport width (same breakout technique
 * as the Team page scroller), fixed 600px height. Replaces the theme's
 * broken alloggio_core_google_map widget (still pointed at the demo's
 * placeholder "Via Venti Settembre, Roma" address and rendering as an
 * empty 1x1px iframe) with a plain Google Maps embed of the real address.
 */
.nb-location-map {
	position: relative;
	height: 600px;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.nb-location-map iframe {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * Gallery page (post 2795) - the old isotope-masonry gallery never
 * initialized (isotope.pkgd.min.js errored silently), leaving 13 tiny,
 * unclickable placeholder images. Rebuilt with every real property photo
 * (team/logo/stock demo images excluded, exact duplicate files deduped) in
 * a brick masonry - a CSS grid with dense auto-flow packing, where "--wide"
 * tiles span 2 columns so the layout has varied tile sizes (a plain
 * column-count masonry looked identical to a regular grid here, since
 * every source photo shares the same 16:9 ratio). Every tile keeps the SAME
 * row-span (2) - an earlier version also varied row-span ("--tall", 3
 * rows), but mixing row-spans left un-fillable single-row holes that dense
 * packing couldn't backfill (visible as large blank gaps). Varying only
 * column-span tessellates cleanly with no gaps. Magnific Popup lightbox on
 * click (see functions.php nb_gallery_lightbox_script); no captions/titles
 * shown, just the photos.
 */
.nb-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 160px;
	grid-auto-flow: dense;
	gap: 12px;
	padding: 40px 0 60px;
}
.nb-gallery-item {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	cursor: pointer;
	grid-column: span 1;
	grid-row: span 2;
}
.nb-gallery-item--wide {
	grid-column: span 2;
}
/*
 * Elementor's own `.elementor img { height: auto; }` (frontend-lite.min.css)
 * has the exact same specificity as this rule (one class + one element) and
 * loads after our child theme's style.css, so it silently won and broke the
 * whole masonry: every image fell back to its intrinsic aspect ratio instead
 * of filling its grid cell, leaving images shorter than their grid track and
 * spilling gaps/misalignment across the whole gallery. Nesting the selector
 * under `.nb-gallery-grid` raises specificity enough to reliably win.
 */
.nb-gallery-grid .nb-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.nb-gallery-item:hover img {
	transform: scale(1.06);
}
@media (max-width: 1024px) {
	.nb-gallery-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 700px) {
	.nb-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.nb-gallery-item--wide {
		grid-column: span 2;
	}
}