/*
 * extra.css — pragmatic layout companion to the real theme.css.
 *
 * As of the 2026-08-28 pass, every page section (villa sections, zones,
 * subservice cards, cross-links, FAQ, CTA panel) reuses the real theme's own
 * block classes (mc-villa-section, mc-subservices, mc-services-grid,
 * mc-faq, is-style-panel-secondary, etc.), extracted verbatim from
 * mallorca-conciergecom.local, so their layout comes from wp-core.css /
 * theme.css directly. This file now only supplies the handful of small
 * things that never had a real equivalent to extract: legal-page section
 * spacing, the FAQ disclosure widget's own look, and a couple of shared
 * micro-utilities. It never redefines color, type or spacing tokens already
 * set in theme.css, and is loaded strictly after wp-core.css and theme.css
 * so real rules always win on any property this file doesn't touch.
 */

.mc-legal__section {
	margin-top: 40px;
}
.mc-legal__updated {
	opacity: 0.7;
	margin-bottom: 32px;
}

/* 2026-08-28: mobile Safari-specific fix. Lucas sent screenshots (home and
   Lifestyle) showing a sliver of the underlying page content peeking in
   above the fixed overlay header while scrolling — the hot-air-balloon
   photo bleeding through above the header bar on Lifestyle, the intro text
   doing the same on the home page. This didn't reproduce in any Chromium
   screenshot here (every viewport/scroll position tested rendered
   correctly), which points to it being iOS Safari's own handling of
   position:fixed elements during scroll/toolbar-collapse repaints rather
   than a layout bug — a known category of Safari-only glitch. Forcing the
   header onto its own GPU compositing layer is the standard mitigation:
   cheap, no visual effect anywhere it isn't needed, but I can't fully
   verify it fixes this specific glitch without testing on Lucas's own
   phone, so worth confirming after this update. */
html.mc-header-overlay .mc-header {
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* ---- Deliberate departures from the real site (Lucas's own requests,
   2026-08-28) — everything below this line is NOT extracted from
   mallorca-conciergecom.local, it's new behaviour added on top of it. ---- */

/* Logo shrinks proportionally once the header is scrolled. The real site's
   own .is-scrolled state (theme.css) only recolors the header (transparent
   -> #0d2b22, ivory -> muted ivory) and tightens padding — it never resizes
   the logo itself. scale() on the whole logo lockup (word + line + brackets
   + word) keeps every part shrinking together in proportion, which a
   font-size-only change wouldn't do for the SVG brackets. transform-origin
   left keeps it anchored to the same spot it already sits at in the grid
   (justify-self: start) instead of shrinking toward its own center and
   visually drifting right. */
#mc-logo-wrap {
	transition: transform 0.3s ease;
	transform-origin: left center;
}
.mc-header.is-scrolled #mc-logo-wrap {
	/* 2026-08-28: first pass at 0.55 read as too small once Lucas saw it live
	   ("c trop petit") — settled at 0.62, still a clear, noticeably stronger
	   shrink than the original 0.72 but not cramped. */
	transform: scale(0.62);
}
/* The real site only tightens the overlay header's own padding from
   26/20px to 12px on scroll (theme.css, html.mc-header-overlay
   .mc-header.is-scrolled .mc-header__inner) — same specificity, loaded
   after theme.css, so this simply wins. Tightened again on the 0.62-logo
   follow-up (was 8px 28px) so the bar itself keeps shrinking in proportion
   with the logo instead of the logo doing all the work alone ("homogene
   avec le logo qui réduit"). Not gated by a media query, same as the rule
   it overrides, so it already applies on mobile too. */
html.mc-header-overlay .mc-header.is-scrolled .mc-header__inner {
	padding: 6px 24px;
}
/* 2026-08-28: Lucas's own read of the mongolfière/bleed-through screenshots
   — that it started with the scroll-shrink animation, which he wants to
   keep — pointed at the real mechanism: theme.css's own
   html.mc-header-overlay .mc-header__inner rule carries
   "transition: padding 0.3s ease", and padding is a layout-triggering
   property. Animating it on a position:fixed header means the browser
   recalculates that header's box every frame for 300ms, stacked on top of
   whatever it's already doing to composite the page during active scroll
   — exactly the kind of load that produces this class of Safari glitch (a
   frame where the fixed layer hasn't been repainted over the content
   scrolling underneath it yet). The logo's own shrink just above is safe
   to animate because transform is compositor-only, no layout recalculation
   involved — so this keeps that one smooth and only removes the animation
   from the padding change, snapping it instantly instead. The shrink
   itself (both the logo scaling down and the bar tightening) still
   happens exactly as before; only the padding's own easing is gone. */
html.mc-header-overlay .mc-header__inner {
	transition: none;
}

/* Home hero on mobile: Lucas asked for two things that pull in opposite
   directions unless the container and its content are handled separately.
   (1) the photo must fill the entire first screen on arrival, no ivory
   seam from the section below showing through — that needs the cover to
   be exactly the viewport's height, not capped short of it. (2) the
   content block (logo mark, "PALMA DE MALLORCA", H1, the two buttons)
   must still be visible without scrolling — the real site's own
   bottom-anchored position (justify-content: flex-end) pushes it to the
   very edge of a near-full-height cover, which is what prompted the
   original complaint. Solved by keeping the cover at the full viewport
   height (homogeneous, no seam) and re-centering the content within it
   instead of shrinking the cover itself (the first attempt, which traded
   the "block is hard to reach" problem for a new "photo doesn't fill the
   screen" one). 100dvh rather than 100svh here specifically: this cover
   must keep matching the visible viewport exactly as the browser chrome
   shows/hides (svh would leave a gap the moment the address bar hides),
   which matters more here than avoiding the small resize jump. */
@media (max-width: 782px) {
	.wp-block-cover.is-style-hero-home {
		min-height: 100dvh !important;
	}
	.wp-block-cover.is-style-hero-home .wp-block-cover__inner-container {
		justify-content: center !important;
	}
}

/* Chauffeur & Airport Transfers (page-id 209/210): unlike every other
   service page, theme.css has no body.page-id-209/210 background rule at
   all — verified directly, not an oversight on our side — so on the real
   site this hero still shows the flat placeholder + "Photography coming"
   mark too. Lucas asked for no missing hero photos, so this hero gets its
   own background image, styled to match every other photographed hero
   exactly (same scrim, badge hidden). Delete this block if/when the real
   site gets its own dedicated hero photo for this page.
   2026-08-28: swapped for the photo Lucas supplied directly
   (Gemini_Generated_Image_dhxa2idhxa2idhxa.webp — a dark, in-motion
   Mercedes against a night city skyline), replacing the daytime airport
   shot used here before; that photo stays in use elsewhere on the page
   (the homepage Transport chapter card, this page's own body content) so
   it wasn't deleted, just no longer the hero background. */
body.page-id-209 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-210 .wp-block-cover.is-style-hero-service:not(:has(img)) {
	background: url('/assets/images/Gemini_Generated_Image_dhxa2idhxa2idhxa.webp') center 48% / cover no-repeat;
}
body.page-id-209 .wp-block-cover.is-style-hero-service:not(:has(img))::after,
body.page-id-210 .wp-block-cover.is-style-hero-service:not(:has(img))::after {
	background: linear-gradient(0deg, rgba(30, 51, 47, 0.84) 0%, rgba(41, 67, 63, 0.32) 60%, rgba(250, 249, 245, 0.1) 100%);
}
body.page-id-209 .mc-hero-ph-mark,
body.page-id-210 .mc-hero-ph-mark {
	display: none;
}

/* 2026-08-28, reverted: Chauffeur & Car Rental (209/210/211/212) briefly
   got the same min-height:100dvh treatment as the home hero on mobile, to
   clear the header-overlap bug (now fixed differently, see theme.css's
   flat 381px on every service page). Lucas caught the side effect live:
   stretching a landscape photo to fill a full-height PORTRAIT phone screen
   via cover-fit zooms it in hard — "les images s'affichent en immense" —
   compared to Villa/every other service page staying at the short 381px
   box, which crops far less aggressively. Since the header-overlap bug
   this was meant to fix is already solved by the flat-height rule in
   theme.css (no vh dependency left to shrink under the header on any
   viewport, mobile included), the 100dvh override served no purpose left
   but the zoom side effect — removed, so these two pages behave exactly
   like the other six on mobile again. */