/* =============================================================================
 * Zawad layout
 * Containers, sections, grids and template-specific composition.
 * ========================================================================== */

.zw-container {
	width: min(100% - (var(--zw-gutter) * 2), var(--zw-container));
	margin-inline: auto;
}

.zw-container--wide { width: min(100% - (var(--zw-gutter) * 2), var(--zw-container-wide)); }
.zw-container--text { width: min(100% - (var(--zw-gutter) * 2), var(--zw-container-text)); }

.zw-section { padding-block: var(--zw-section-y); }
.zw-section--alt { background: var(--zw-bg-alt); }
.zw-section--olive { background: var(--zw-olive); color: var(--zw-cream); }
.zw-section--olive h1,
.zw-section--olive h2,
.zw-section--olive h3 { color: var(--zw-cream); }

.zw-section__head { display: grid; gap: var(--zw-space-3); margin-block-end: var(--zw-space-6); max-width: var(--zw-container-text); }
/* Gold at full strength is only 2.77:1 on ivory, so eyebrow labels on light
 * sections use the darkened --zw-gold-ink (4.54:1). On navy sections the full
 * gold is correct and passes at 5.07:1 — see the override below. */
.zw-section__eyebrow { font-size: var(--zw-text-xs); text-transform: uppercase; letter-spacing: var(--zw-tracking-wide); color: var(--zw-gold-ink); font-weight: var(--zw-weight-medium); }
.zw-section--olive .zw-section__eyebrow,
.zw-hero .zw-section__eyebrow { color: var(--zw-gold); }
.zw-section__lead { font-size: var(--zw-text-lg); color: var(--zw-ink-soft); }
/* Leads inside navy sections need the light tint — the dark ink-soft above
 * measured 1.98:1 against #142333. */
.zw-section--olive .zw-section__lead,
.zw-hero .zw-section__lead { color: var(--zw-navy-soft); }

/* .zw-btn--ghost's text colour (--zw-secondary) and this section's background
 * (--zw-olive) resolve to the exact same navy token — 1:1 contrast, completely
 * invisible text, leaving only the border visible (a "blank outlined box").
 * Same fix pattern as the heading/lead overrides above: give ghost buttons a
 * light colour and a visible border inside dark sections. */
.zw-section--olive .zw-btn--ghost,
.zw-hero .zw-btn--ghost {
	color: var(--zw-cream);
	border-color: rgba(255, 255, 255, .35);
}
.zw-section--olive .zw-btn--ghost:hover,
.zw-hero .zw-btn--ghost:hover { border-color: var(--zw-cream); }

/* --- Grids ---------------------------------------------------------------- */
.zw-grid { display: grid; gap: var(--zw-space-5); }
.zw-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.zw-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.zw-grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Single-package / single-hotel layout: content + sticky booking rail. */
.zw-detail { display: grid; gap: var(--zw-space-7); align-items: start; }

@media (min-width: 1000px) {
	.zw-detail { grid-template-columns: minmax(0, 1fr) 360px; }
	.zw-detail__rail { position: sticky; top: var(--zw-space-6); }
}

/* --- Hero ----------------------------------------------------------------- */
.zw-hero { position: relative; display: grid; align-items: center; min-height: 60svh; background: var(--zw-olive); color: var(--zw-cream); overflow: hidden; }
.zw-hero__bg { position: absolute; inset: 0; }
.zw-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.zw-hero__inner { position: relative; padding-block: var(--zw-space-8); display: grid; gap: var(--zw-space-5); max-width: 46rem; }
.zw-hero h1 { color: var(--zw-cream); }
.zw-hero__actions { display: flex; flex-wrap: wrap; gap: var(--zw-space-3); }

/* --- Utility spacing ------------------------------------------------------ */
.zw-stack > * + * { margin-block-start: var(--zw-space-4); }
.zw-stack-lg > * + * { margin-block-start: var(--zw-space-6); }

/* --- Hero with background video ------------------------------------------- *
 * The poster <img> is the LCP element; the video fades in over it only when
 * site.js decides it is safe. See template-parts/hero.php for the contract.
 * ------------------------------------------------------------------------- */
.zw-hero--video { position: relative; min-height: min(78svh, 720px); display: grid; align-items: center; overflow: hidden; }

.zw-hero__media { position: absolute; inset: 0; z-index: 0; }

.zw-hero__poster,
.zw-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Video starts invisible and is revealed by .is-ready, so the poster is never
 * swapped for an unbuffered black frame. */
.zw-hero__video { opacity: 0; transition: opacity 900ms var(--zw-ease); }
.zw-hero__video.is-ready { opacity: 1; }

/* Scrim: keeps the cream headline and the white finder readable over any
 * frame of the video. Darker at the bottom where the form sits. */
.zw-hero__scrim {
	position: absolute;
	inset: 0;
	/* Lighter than it looks: the video is already darkened and desaturated at
	 * encode time, so the encoder quantises the dark gradient properly. Stacking
	 * a heavy CSS scrim on top of a bright source is what produced visible
	 * banding in the sunset sky. Keep this restrained. */
	background:
		linear-gradient(180deg, rgba(20,35,51,.34) 0%, rgba(20,35,51,.52) 55%, rgba(20,35,51,.78) 100%);
}

.zw-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--zw-space-8);
	display: grid;
	gap: var(--zw-space-4);
	justify-items: start;
}

.zw-hero--video h1 { color: var(--zw-cream); max-width: 24ch; }
.zw-hero__eyebrow {
	color: var(--zw-gold);
	font-size: var(--zw-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--zw-tracking-wide);
	font-weight: var(--zw-weight-medium);
	margin: 0;
}
.zw-hero__sub { color: var(--zw-olive-soft); font-size: var(--zw-text-lg); max-width: 48ch; margin: 0; }
.zw-hero__anchor { color: var(--zw-olive-soft); font-size: var(--zw-text-sm); margin: 0; }
.zw-hero__anchor strong { color: var(--zw-cream); font-size: var(--zw-text-xl); font-family: var(--zw-font-heading); }

/* Fallback when no video/poster is set: solid olive, never a blank hero. */
.zw-hero--video:not(.has-video) .zw-hero__scrim { background: var(--zw-olive); }

@media (prefers-reduced-motion: reduce) {
	.zw-hero__video { display: none; }
}

/* --- Package finder ------------------------------------------------------- */
.zw-finder {
	width: 100%;
	max-width: 860px;
	margin: 0;
	background: var(--zw-surface);
	border-radius: var(--zw-radius-lg);
	box-shadow: var(--zw-shadow-lg);
	padding: var(--zw-space-4);
	display: grid;
	gap: var(--zw-space-3);
	grid-template-columns: 1fr 1fr 1fr auto;
	align-items: end;
}

.zw-finder__field,
.zw-finder__submit { margin: 0; display: grid; gap: var(--zw-space-1); }

.zw-finder__field label {
	font-size: var(--zw-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--zw-tracking-wide);
	color: var(--zw-text-muted);
	font-weight: var(--zw-weight-medium);
}

.zw-finder__field select {
	width: 100%;
	padding: var(--zw-space-3);
	border: 1px solid var(--zw-border);
	border-radius: var(--zw-radius);
	background: var(--zw-white);
	font-family: inherit;
	font-size: var(--zw-text-base);
	color: var(--zw-ink);
}

.zw-finder__field select:focus-visible { outline: 2px solid var(--zw-primary); outline-offset: 1px; }
.zw-finder__submit .zw-btn { white-space: nowrap; }

/* Two fields on tablet, stacked on phone. Three selects is too many on a
 * phone; travellers is the one to drop since it does not change the URL. */
@media (max-width: 1000px) {
	.zw-finder { grid-template-columns: 1fr 1fr; }
	.zw-finder__submit { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
	.zw-finder { grid-template-columns: 1fr; padding: var(--zw-space-3); }
	.zw-hero--video { min-height: 0; }
	.zw-hero__inner { padding-block: var(--zw-space-6); }
}

/* --- Full-bleed sections inside GeneratePress's centred container ---------- *
 * GP wraps everything in .grid-container with a max-width. The hero and the
 * footer need to span the viewport, so break them out. Uses 100vw with a
 * negative margin rather than position:fixed so it still scrolls normally.
 * ------------------------------------------------------------------------- */
.zw-hero--video,
.zw-utility,
.zw-footer,
.zw-section--bleed {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* Homepage runs full width; the sidebar is disabled in functions.php. */
.zw-full-width .site-content { padding: 0; }
.zw-full-width #primary { width: 100%; max-width: 100%; }

/* --- Utility bar ---------------------------------------------------------- */
.zw-utility {
	background: var(--zw-olive-dark);
	color: var(--zw-olive-soft);
	font-size: var(--zw-text-xs);
}
.zw-utility__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--zw-space-3);
	justify-content: space-between;
	align-items: center;
	padding-block: var(--zw-space-2);
}
.zw-utility a { color: var(--zw-cream); text-decoration: none; margin-inline-end: var(--zw-space-4); }
.zw-utility a:hover { color: var(--zw-gold); }
.zw-utility__right { color: var(--zw-navy-soft); }

/* --- Floating header --------------------------------------------------------
 * The 40px logo (down from 44px, see components.css) needed the bar's own
 * padding rebalanced around it, and the brief asked for a floating shape
 * rather than the previous edge-to-edge GeneratePress bar.
 *
 * Deliberately NOT overflow:hidden — the mega menu's dropdown panels are
 * descendants of .site-header, and since it's now position:sticky (a
 * containing block for them), overflow:hidden here would clip every open
 * dropdown at the bar's bottom edge. border-radius clips the bar's own
 * background/shadow just fine without it; nothing else touches the edge.
 * ------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: var(--zw-space-3);
	z-index: var(--zw-z-header);
	width: min(100% - (var(--zw-gutter) * 2), var(--zw-container-wide));
	margin-inline: auto;
	margin-block-start: var(--zw-space-4);
	border-radius: var(--zw-radius-xl);
	box-shadow: var(--zw-shadow-lg);
}
/* GeneratePress's own .grid-container class caps .inside-header at its site
 * width setting (1200px) independently of our tokens, so the pill's actual
 * content was sitting in a 1200px box centred inside a 1376px bar — 88px of
 * dead space on each side before our own padding even started, on top of
 * it. The bar is already the right width; .inside-header just needs to
 * fill it, with our own padding doing 100% of the internal breathing room. */
.inside-header {
	width: 100%;
	max-width: none;
	padding-block: var(--zw-space-3) !important;
	padding-inline: var(--zw-space-6) !important;
}

@media (max-width: 768px) {
	.site-header { top: var(--zw-space-2); margin-block-start: var(--zw-space-3); border-radius: var(--zw-radius-lg); }
	.inside-header { padding-block: var(--zw-space-2) !important; padding-inline: var(--zw-space-4) !important; }
}

/* --- Header CTA ----------------------------------------------------------- */
.zw-nav-cta {
	display: flex;
	gap: var(--zw-space-2);
	align-items: center;
	margin-inline-start: auto;
	padding-inline: var(--zw-space-3);
}
/* The full number only fits alongside the menu on wide desktops; below that it
 * collapses to "Call" so the nav never wraps to two lines. */
.zw-nav-cta__number { display: none; }
@media (min-width: 1200px) {
	.zw-nav-cta__label  { display: none; }
	.zw-nav-cta__number { display: inline; white-space: nowrap; }
}
@media (max-width: 768px) {
	/* No dedicated mobile contact affordance by design - the utility bar above
	 * the header (.zw-utility) still carries plain-text Call / WhatsApp links
	 * on every viewport width, including mobile. */
	.zw-nav-cta { display: none; }
}

/* --- Footer --------------------------------------------------------------- */
.zw-footer { background: var(--zw-olive-dark); color: var(--zw-olive-soft); padding-block: var(--zw-space-8) var(--zw-space-5); }
.zw-footer__grid {
	display: grid;
	gap: var(--zw-space-6);
	grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
}
@media (max-width: 900px) { .zw-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .zw-footer__grid { grid-template-columns: 1fr; } }

.zw-footer__logo {
	font-family: var(--zw-font-heading);
	font-size: var(--zw-text-xl);
	font-weight: var(--zw-weight-bold);
	letter-spacing: var(--zw-tracking-logo);
	color: var(--zw-cream);
	margin: 0 0 var(--zw-space-2);
	text-transform: uppercase;
}
.zw-footer__tag { color: var(--zw-navy-soft); font-size: var(--zw-text-sm); }
.zw-footer__head {
	font-size: var(--zw-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--zw-tracking-wide);
	color: var(--zw-gold);
	margin: 0 0 var(--zw-space-3);
}
.zw-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--zw-space-2); }
.zw-footer a { color: var(--zw-olive-soft); text-decoration: none; font-size: var(--zw-text-sm); }
.zw-footer a:hover { color: var(--zw-cream); text-decoration: underline; }

/* .zw-footer a (0,1,1) otherwise beats .zw-btn--whatsapp (0,1,0) on
 * specificity alone, silently overriding the button's navy text with the
 * footer's pale body-text colour — on the button's bright green background
 * that measures ~1.2:1 contrast, effectively invisible. */
.zw-footer .zw-btn--whatsapp,
.zw-footer .zw-btn--whatsapp:hover { color: var(--zw-navy); text-decoration: none; }
.zw-footer__nap { font-style: normal; font-size: var(--zw-text-sm); line-height: 1.8; }
.zw-footer__social a { margin-inline-end: var(--zw-space-3); }

.zw-footer__legal {
	margin-top: var(--zw-space-6);
	padding-top: var(--zw-space-4);
	border-top: 1px solid rgba(255,255,255,.12);
}
.zw-footer__legal p { font-size: var(--zw-text-xs); color: var(--zw-navy-soft); margin: 0; max-width: 90ch; }

/* GeneratePress's own footer bar, restyled to match. */
.site-footer .site-info {
	background: var(--zw-navy-deep);
	color: var(--zw-navy-soft);
	font-size: var(--zw-text-xs);
}

/* --- Full-width homepage -------------------------------------------------- *
 * GeneratePress makes .site-content a FLEX container so the content area and
 * sidebar sit side by side. Our hero is a sibling of .content-area, so under
 * flex it was sharing the row with it — the hero rendered 785px and the content
 * 655px on a 1440px viewport, which is what made the page look broken.
 *
 * The sidebar is already disabled for these templates in functions.php, so
 * switching to block stacking is safe and lets the 100vw breakout above work.
 * Keyed off WordPress's own body classes rather than a theme filter.
 * ------------------------------------------------------------------------- */
body.home .site-content,
body.post-type-archive-zawad_package .site-content,
body.post-type-archive-zawad_hotel .site-content,
body.single-zawad_package .site-content,
body.single-zawad_hotel .site-content {
	display: block;
}

body.home .content-area,
body.post-type-archive-zawad_package .content-area,
body.post-type-archive-zawad_hotel .content-area,
body.single-zawad_package .content-area,
body.single-zawad_hotel .content-area {
	width: 100%;
	max-width: 100%;
	float: none;
}

/* Homepage sections manage their own horizontal rhythm via .zw-container. */
body.home .site-main { padding: 0; }
body.home .zw-section:first-of-type { padding-block-start: var(--zw-section-y); }