/* ============================================================
   Home surface — migration step 5 (2026-07-02).
   = homepage-v2.css (migrated; reveal now visible-by-default) +
   the hero trip-tab / search-band rules that lived in
   homepage-temp.css. Loads on is_front_page() only.
   ============================================================ */

/**
 * Homepage v2 — bold travel design (2026-06-08).
 * All rules scoped under .tzhp so nothing leaks into the HFE header/footer.
 * Fonts inherit the theme Customizer (Typography). Accent: #FF6B4A (accents only).
 */

.tzhp{
	--amber:#FF6B4A; --amber-hover:#FF6B4A; --amber-tint:rgba(255,194,77,.16);
	--navy:#103d62; --navy-2:#103d62; --dark:#0d2840; --cream:#F4EDE3;
	--text:#374151; --text-light:#6b7280; --gray-bg:#f4f6f9; --border:#e5e7eb; --white:#fff;
	--hd:var(--tf-headings-font-family,Georgia,serif); --bd:var(--tf-body-font-family,system-ui,sans-serif);
	--max:1240px;
	font-family:var(--bd); color:var(--text); line-height:1.6;
}
.tzhp *{box-sizing:border-box;}
.tzhp h1,.tzhp h2,.tzhp h3{font-family:var(--hd); color:var(--navy); line-height:1.12; font-weight:700; margin:0;}
.tzhp p{margin:0;}
.tzhp a{color:inherit;}
.tzhp .tzhp-wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
.tzhp .tzhp-btn{display:inline-block; background:var(--amber); color:#103d62; font-weight:700; padding:16px 34px; border-radius:50px; text-decoration:none; font-size:1.05rem; transition:.2s; border:0; cursor:pointer;}
.tzhp .tzhp-btn:hover{background:var(--amber-hover); transform:translateY(-2px);}
.tzhp .tzhp-eyebrow{color:var(--amber-hover); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.8rem;}
.tzhp section{padding:96px 0;}
.tzhp .tzhp-center{text-align:center; max-width:60ch; margin:0 auto 56px;}
.tzhp .tzhp-center h2{font-size:clamp(2.2rem,4vw,3.2rem);}
.tzhp .tzhp-grid{display:grid; gap:28px;}
.tzhp .g3{grid-template-columns:repeat(3,1fr);}
.tzhp .g4{grid-template-columns:repeat(4,1fr);}

/* Hero — navy/blue full-bleed (no amber background) */
.tzhp .tzhp-hero{position:relative; min-height:78vh; display:flex; align-items:center; color:#fff;
	background:linear-gradient(120deg,#0d2840,#1e5e96); overflow:hidden;}
.tzhp .tzhp-hero h1{color:#fff; font-size:clamp(3rem,7vw,5.5rem); font-weight:800; max-width:16ch; letter-spacing:-.01em;}
.tzhp .tzhp-hero p{font-size:1.35rem; max-width:46ch; margin:22px 0 0; color:#eef3f8;}
.tzhp .tzhp-searchbar{margin-top:38px; background:rgba(255,255,255,.96); border-radius:60px; padding:10px 10px 10px 28px;
	display:inline-flex; align-items:center; gap:18px; box-shadow:0 20px 60px rgba(0,0,0,.3); flex-wrap:wrap;}
.tzhp .tzhp-searchbar .f{padding:6px 18px; border-right:1px solid var(--border);}
.tzhp .tzhp-searchbar .f:last-of-type{border:0;}
.tzhp .tzhp-searchbar label{display:block; font-size:.7rem; font-weight:800; text-transform:uppercase; color:#9aa3af;}
.tzhp .tzhp-searchbar .v{color:var(--navy); font-weight:700;}

/* Steps */
.tzhp .tzhp-step{padding:0 10px;}
.tzhp .tzhp-step .n{font-family:var(--hd); font-weight:800; font-size:3.4rem; color:var(--amber); line-height:1;}
.tzhp .tzhp-step h3{font-size:1.4rem; margin:8px 0;}

/* Why — navy block */
.tzhp .tzhp-why{background:var(--navy); color:#fff;}
.tzhp .tzhp-why h2{color:#fff;}
.tzhp .tzhp-feat .ico{width:60px; height:60px; border-radius:16px; background:var(--amber-tint); color:var(--amber);
	display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin-bottom:16px;}
.tzhp .tzhp-why .tzhp-feat h3{color:#fff;}
.tzhp .tzhp-why .tzhp-feat p{color:#c2d0e0;}

/* Destinations — mosaic */
.tzhp .tzhp-dgrid{display:grid; gap:22px; grid-template-columns:2fr 1fr 1fr;}
.tzhp .tzhp-dgrid a:first-child{grid-row:span 2;}
.tzhp .tzhp-dcard{position:relative; border-radius:20px; overflow:hidden; min-height:230px; text-decoration:none; display:block;
	background-size:cover; background-position:center;}
.tzhp .tzhp-dcard.big{min-height:480px;}
.tzhp .tzhp-dcard .ov{position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,40,64,0) 35%,rgba(13,40,64,.85));}
.tzhp .tzhp-dcard .t{position:absolute; left:22px; bottom:20px; color:#fff; font-family:var(--hd); font-weight:700; font-size:1.6rem;}
.tzhp .tzhp-dcard.big .t{font-size:2.6rem;}
.tzhp .tzhp-dcard .t small{display:block; font-family:var(--bd); font-weight:500; font-size:.9rem; opacity:.9;}

/* Book Tours band — cream (no amber background) */
.tzhp .tzhp-band{background:var(--cream); border-radius:28px; padding:64px; text-align:center;}
.tzhp .tzhp-band p{color:#4a5568; font-size:1.15rem; margin:12px 0;}
.tzhp .tzhp-slot{margin-top:24px;}

/* Blog */
.tzhp .tzhp-bcard{border-radius:18px; overflow:hidden; box-shadow:0 8px 30px rgba(26,43,72,.1); background:var(--white); display:block; text-decoration:none;}
.tzhp .tzhp-bcard .img{height:200px; background-size:cover; background-position:center; background-color:var(--gray-bg);}
.tzhp .tzhp-bcard .b{padding:24px;}
.tzhp .tzhp-bcard h3{font-size:1.3rem; color:var(--navy);}
.tzhp .tzhp-bcard .meta{color:var(--amber-hover); font-weight:700; font-size:.78rem; text-transform:uppercase; margin-bottom:8px;}
.tzhp .tzhp-bcard p{color:var(--text-light); margin-top:8px;}

/* CTA — navy (no amber background) */
.tzhp .tzhp-cta{color:#fff; text-align:center; padding:120px 24px; background:linear-gradient(135deg,#0d2840,#103d62 60%,#103d62);}
.tzhp .tzhp-cta h2{color:#fff; font-size:clamp(2.4rem,5vw,3.6rem); font-weight:800;}
.tzhp .tzhp-cta p{color:#eef3f8; font-size:1.3rem; margin:16px 0 30px;}

/* Scroll reveal (progressive enhancement; visible by default if JS off) */
/* Scroll reveal — VISIBLE BY DEFAULT (audit P0 #6: opacity-0-until-JS
   hid sections from crawlers and raced fast scrolls). The JS adds
   html.tz-anim only when it will actually animate, and force-reveals
   everything after a failsafe timeout. No tz-anim → nothing ever hidden. */
html.tz-anim .tzhp .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
html.tz-anim .tzhp .reveal.in{opacity:1; transform:none;}

/* Responsive */
@media (max-width:900px){
	.tzhp .g3,.tzhp .g4{grid-template-columns:repeat(2,1fr);}
	.tzhp .tzhp-dgrid{grid-template-columns:1fr 1fr;}
	.tzhp .tzhp-dgrid a:first-child{grid-row:auto; grid-column:span 2;}
	.tzhp section{padding:72px 0;}
}
@media (max-width:600px){
	.tzhp .g3,.tzhp .g4,.tzhp .tzhp-dgrid{grid-template-columns:1fr;}
	.tzhp .tzhp-dgrid a:first-child{grid-column:auto;}
	.tzhp .tzhp-dcard.big{min-height:300px;}
	.tzhp .tzhp-searchbar{display:flex; border-radius:18px;}
	.tzhp .tzhp-searchbar .f{border-right:0; border-bottom:1px solid var(--border); width:100%;}
	.tzhp .tzhp-cta{padding:80px 20px;}
}

/* ── CLS fix (PSI 2026-06-10: hero .tzhp-wrap shifted 0.417) ─────────────
   Reserve the hero search hub's box before the TP embeds arrive.
   Heights from the rendered widget: tabs row ~46px + flights form ~190px
   desktop / ~390px mobile. Over-reserve is invisible (white card);
   under-reserve shifts. Fine-tune after PSI re-run. */
.tz-hero-search .tz-trip-widgets__box {
	min-height: 460px;
}
@media ( min-width: 768px ) {
	.tz-hero-search .tz-trip-widgets__box {
		min-height: 250px;
	}
}
/* HFE header logo ships without width/height attrs (PSI flag). Lock its ratio
   so the header never reflows while the PNG loads. 1004x224 source (Horizon kit logo). */
.hfe-site-logo img,
img[alt="Logo"] {
	aspect-ratio: 1004 / 224;
}

/* ── A11y (PSI 2026-06-10): contrast + link affordance ───────────────────
   Eyebrow amber fails 4.5:1 on white sections; hero eyebrow sits on navy
   and stays amber via the override below. */
.tzhp .tzhp-eyebrow {
	color: #C2451E;
}
.tzhp .tzhp-hero .tzhp-eyebrow {
	color: var(--amber-hover);
}
/* Footer policy links relied on color alone (PSI "links rely on color"). */
.tz-intermediary-notice a,
footer a[href*="/disclosure/"],
footer a[href*="/editorial-policy/"],
footer a[href*="/privacy-policy/"] {
	text-decoration: underline;
}

/* ── Blog cards fix (2026-06-11): the card markup uses <span class="img">
   and <span class="b"> inside the <a> (spans are the only valid wrappers
   in a link), but spans are inline by default — so the 200px image area
   and the 24px padding collapsed. Make them blocks + tidy type. ── */
.tzhp .tzhp-bcard .img,
.tzhp .tzhp-bcard .b,
.tzhp .tzhp-bcard .meta {
	display: block;
}
.tzhp .tzhp-bcard .b {
	padding: 26px 26px 30px;
}
.tzhp .tzhp-bcard h3 {
	font-size: 1.2rem;
	line-height: 1.35;
	margin: 0 0 4px;
}
.tzhp .tzhp-bcard p {
	font-size: .95rem;
	line-height: 1.55;
}


/* ---- Hero trip tabs + search band (from homepage-temp.css) ---- */
.tz-hero-search { position: relative;
	z-index: 1;
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box; }
.tz-trip-widgets__box { max-width: 100%;
	margin: 0 auto;
	background: var(--tz-white);
	border: 1px solid var(--tz-border);
	border-radius: var(--tz-radius);
	box-shadow: 0 4px 20px rgba(16, 61, 98, 0.08);
	overflow: hidden; }
.tz-trip-tabs { display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 8px 8px 0;
	background: var(--tz-navy); }
.tz-trip-tab { flex: 1 1 auto;
	min-width: 120px;
	font-family: var(--tz-font-body);
	font-size: 15px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.82);
	background: transparent;
	border: none;
	border-radius: 8px 8px 0 0;
	padding: 14px 18px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	line-height: 1.2; }
.tz-trip-tab:hover { color: #fff;
	background: rgba(255, 255, 255, 0.10); }
.tz-trip-tab.is-active { color: var(--tz-navy);
	background: var(--tz-white); }
.tz-trip-panel { display: none;
	padding: 28px 24px;
	overflow-x: auto;               
	-webkit-overflow-scrolling: touch; }
.tz-trip-panel.is-active { display: block; }
.tz-trip-sep { height: 1px;
	background: var(--tz-border);
	margin: 28px 0; }
.tz-hero-search iframe,
.tz-tours-band iframe { max-width: 100% !important;
	border: 0; }
.tz-trip-panel > *,
.tz-tours-band__embed > * { max-width: 100%; }
@media (max-width: 768px) {
	.tz-hero-search { padding: 0 16px; }
	.tz-trip-tab { flex: 1 1 calc(50% - 4px); min-width: 0; font-size: 14px; padding: 12px 10px; }
	.tz-trip-panel { padding: 20px 14px; }
}
.tz-tours-band { background: var(--tz-gray-bg); }
.tz-tours-band__embed { max-width: 1000px;
	margin: 0 auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch; }