/*
Theme Name: Idea Travel
Theme URI: https://ideatravel.com
Author: The Idea Travel Company
Author URI: https://ideatravel.com
Description: Block theme for The Idea Travel Company — curated luxury travel since 1976. Built from the Idea Travel Figma design. Warm editorial type (Instrument Serif + Instrument Sans), bronze accent, cream sections, full-bleed photography.
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 7.4
Version: 0.2.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: idea-travel
Tags: full-site-editing, block-patterns, blog, business, one-column, custom-colors, custom-logo, editor-style, featured-images, wide-blocks
*/

/* ---------------------------------------------------------------------------
   Most styling comes from theme.json. This file only adds what block markup /
   theme.json can't express directly. Loaded on both front-end and editor.
--------------------------------------------------------------------------- */

/* Cream section helper (used by the contact-concierge pattern, etc.) */
.it-section--cream { background-color: var(--wp--preset--color--complimentary); }

/* Bullet-less footer link lists */
.wp-block-list.is-style-no-bullets { list-style: none; padding-left: 0; margin-left: 0; }
.wp-block-list.is-style-no-bullets li { margin: 0; }

/* Nav toggle button (mobile menu icon in the header) */
.it-nav-toggle { background: none; border: 0; padding: 0; line-height: 0; cursor: pointer; color: var(--wp--preset--color--heading); }
.it-nav-toggle img { display: block; width: 24px; height: 18px; }

/* Site header bar — flex layout pinned here (not left to WP's per-block layout CSS) because the Travel Content
   Plugin's front-end templates render the header via block_template_part('header'), and in that path the
   .wp-container-…{justify-content:space-between} rule isn't emitted, which would leave the nav left-aligned. */
.it-site-header {
	position: relative; z-index: 30;     /* so the mega-menu panel (absolute child) layers above the page below */
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--wp--preset--spacing--50); width: 100%;
}
.it-site-header__actions { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--wp--preset--spacing--50); }
.it-site-header .it-logo img { filter: brightness(0) invert(1); }   /* white wordmark — the bar is dark (#3D3D3D) or transparent over the hero */

/* ---- Header mega-menu (the hamburger dropdown — see patterns/header.php) ---------------------------- */
.it-megamenu-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 0; padding: 0.25rem; line-height: 0; cursor: pointer;
	color: inherit;     /* inherits the header bar's text colour (white) */
}
.it-megamenu-toggle svg { display: block; }
.it-megamenu[hidden] { display: none; }
.it-megamenu {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
	background: var(--wp--preset--color--complimentary);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
	opacity: 0; transform: translateY(-8px);
	transition: opacity 220ms ease, transform 220ms ease;
}
.it-megamenu.is-open { opacity: 1; transform: translateY(0); }
.it-megamenu__inner {
	max-width: 1440px; margin-inline: auto;
	padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
	display: grid; grid-template-columns: minmax(260px, 340px) 1fr minmax(300px, 420px);
	gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.it-megamenu__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.it-megamenu__list li { margin: 0; }
.it-megamenu__link {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: clamp(0.85rem, 1.5vw, 1.3rem) 0.25rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--x-large); line-height: 1.1; letter-spacing: -0.02em;
	color: var(--wp--preset--color--heading); text-decoration: none;
	transition: color 150ms ease, padding-left 150ms ease;
}
.it-megamenu__arrow { flex: none; opacity: 0; transform: translateX(-6px); transition: opacity 150ms ease, transform 150ms ease; }
.it-megamenu__link:hover,
.it-megamenu__link:focus-visible,
.it-megamenu__link.is-active { color: var(--wp--preset--color--accent); padding-left: 0.75rem; }
.it-megamenu__link:hover .it-megamenu__arrow,
.it-megamenu__link:focus-visible .it-megamenu__arrow,
.it-megamenu__link.is-active .it-megamenu__arrow { opacity: 1; transform: translateX(0); }
.it-megamenu__preview { padding-top: clamp(0.25rem, 2vw, 1.5rem); }
.it-megamenu__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small); font-weight: 500;
	letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--accent);
}
.it-megamenu__desc {
	margin: 0; max-width: 34ch;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: var(--wp--preset--color--body);
}
.it-megamenu__media { margin: 0; }
.it-megamenu__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3.2; object-fit: cover; }
@media (max-width: 1024px) {
	.it-megamenu { max-height: calc(100vh - 5rem); overflow-y: auto; }
	.it-megamenu__inner { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); }
	.it-megamenu__media { display: none; }
	.it-megamenu__link { font-size: var(--wp--preset--font-size--large); }
}
@media (prefers-reduced-motion: reduce) {
	.it-megamenu, .it-megamenu__link, .it-megamenu__arrow { transition: none; }
}

/* The header bar is dark by default (#3D3D3D — set via the pattern's heading/base colours; the wordmark + the
   hamburger are white, the "Inquire Now" box stays black). On the homepage, front-page.html adds
   .it-header--overlay, which makes the bar transparent over the hero photo (everything else the same) and lifts
   it out of flow — and we then kill the block-gap WP puts above the following <main> so the hero cover sits
   flush at the top of the viewport (the bar floats over it). */
.it-header--overlay { position: absolute; inset: 0 0 auto 0; z-index: 30; }
.it-header--overlay + main { margin-block-start: 0; }
.it-header--overlay > .wp-block-group { background-color: transparent !important; }

/* About promo — half-image + cream callout, sits below the homepage carousel. The image column is flex-stretch,
   so without object-fit the photo would set its own height; we pin it to fill the column with object-cover so the
   two halves stay the same height. Collapses to a stacked single column under 782px. */
.it-about-promo { gap: 0; }
.it-about-promo__media .wp-block-image,
.it-about-promo__media .wp-block-image img { height: 100%; }
.it-about-promo__media .wp-block-image { display: flex; }
.it-about-promo__media .wp-block-image img { width: 100%; object-fit: cover; }
@media ( max-width: 781px ) {
	.it-about-promo__media .wp-block-image img { height: auto; min-height: 320px; }
}

/* Carousel dot/arrow control on the package-detail pattern */
.it-carousel-nav { display: flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--50); color: var(--wp--preset--color--body); }
.it-carousel-nav button { background: none; border: 0; padding: 0; line-height: 0; cursor: pointer; color: inherit; }
.it-carousel-nav button img { display: block; width: 24px; height: 24px; }
.it-carousel-nav span { display: flex; gap: var(--wp--preset--spacing--20); }
.it-carousel-nav i { width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--heading); display: block; }
.it-carousel-nav i.is-inactive { opacity: .25; }

/* Newsletter signup in the footer — KempIT SecureForms #49 embedded as raw <form>. The form ships with
   its own .secure-form / .form-control / .btn-primary styles loaded by idea_travel_enqueue_secureform_assets()
   (CSS lives on tysecureforms.rgkemp.com), so the rules below specifically override those for the footer
   placement only — Submit becomes "Receive Updates" inline, the Turnstile widget tucks under the row, and
   the spam honeypot stays off-screen. */
.it-newsletter { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; }
.it-newsletter .sf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.it-newsletter__input {
	flex: 1 1 0;
	min-width: 0;
	background: #fff;
	border: 0;
	padding: .85rem 1rem;
	font: 500 .75rem/1 var(--wp--preset--font-family--sans);
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--body);
}
.it-newsletter__input::placeholder { color: var(--wp--preset--color--body); opacity: .65; }
.it-newsletter__input:focus { outline: 1px solid var(--wp--preset--color--accent); outline-offset: 0; }
.it-newsletter__submit {
	flex: 0 0 auto;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 0;
	padding: .85rem 1.4rem;
	font: 500 .75rem/1 var(--wp--preset--font-family--sans);
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 150ms ease;
}
.it-newsletter__submit:hover,
.it-newsletter__submit:focus-visible { background: var(--wp--preset--color--accent); outline: none; }
.it-newsletter__turnstile { flex: 1 0 100%; margin-top: var(--wp--preset--spacing--30); min-height: 0; }
/* SecureForms ships its own validation / wrapper styles on .secure-form — neutralise them inside the footer
   placement so they don't fight the inline-row layout above. */
.it-newsletter.secure-form { padding: 0; background: none; box-shadow: none; }
.it-newsletter .form-group { all: unset; }   /* defensive: any .form-group divs from the shortcode */

/* Italic-serif bronze accent (price lines, sub-headlines like "resort & convention center") */
.it-accent { font-family: var(--wp--preset--font-family--serif); font-style: italic; color: var(--wp--preset--color--accent); }

/* Outline buttons on dark photo heroes: white text + white hairline border */
.wp-block-button.is-style-outline .wp-block-button__link { border-color: currentColor; }

/* ---- "Featured journeys" carousel (package-carousel pattern) ------------------------------------- */
.it-pkg-carousel__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* old Edge */
}
.it-pkg-carousel__track::-webkit-scrollbar { display: none; }   /* WebKit */
.it-pkg-carousel__slide {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
}
.it-pkg-carousel__media img { width: 100%; height: auto; display: block; object-fit: cover; }

.it-pkg-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--body);
}
.it-pkg-carousel__prev,
.it-pkg-carousel__next {
	background: none;
	border: 0;
	padding: 0;
	line-height: 0;
	cursor: pointer;
	color: inherit;
}
.it-pkg-carousel__prev img,
.it-pkg-carousel__next img { display: block; width: 24px; height: 24px; }
.it-pkg-carousel__prev:disabled,
.it-pkg-carousel__next:disabled { opacity: 0.3; cursor: default; }
.it-pkg-carousel__dots { display: flex; gap: 0.5rem; align-items: center; }
.it-pkg-carousel__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: var(--wp--preset--color--heading);
	opacity: 0.25;
	cursor: pointer;
	transition: opacity 150ms ease;
}
.it-pkg-carousel__dot.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .it-pkg-carousel__track { scroll-behavior: auto; } }

/* Tab bar above the featured carousel (Cruises · Vacations · Tours · Resorts — labels come from each
   slot's trip type). Clicking a tab scrolls that slide into view; the .is-active state is kept in sync
   by the carousel script as you scroll/swipe. */
.it-pkg-carousel__tabs { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid rgba(0, 0, 0, 0.18); }
.it-pkg-carousel__tab {
	flex: 1 1 0;
	min-width: max-content;
	background: var(--wp--preset--color--complimentary);
	border: 0;
	border-right: 1px solid rgba(0, 0, 0, 0.12);
	padding: 0.95rem 1.25rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body);
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.it-pkg-carousel__tab:last-child { border-right: 0; }
.it-pkg-carousel__tab:hover { color: var(--wp--preset--color--heading); }
.it-pkg-carousel__tab.is-active {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--heading);
	box-shadow: inset 0 -3px 0 var(--wp--preset--color--accent);
}
@media (max-width: 781px) {
	.it-pkg-carousel__tab { flex: 1 1 50%; border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
	.it-pkg-carousel__tab:nth-child(2n) { border-right: 0; }
}

/* ---- "Find a journey" search bar (find-a-journey pattern) ---------------------------------------- */
.it-find-search {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid rgba(0, 0, 0, 0.2);
}
.it-find-search__field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.85rem 1rem;
	border-right: 1px solid rgba(0, 0, 0, 0.12);
	cursor: text;
}
.it-find-search__field--type { flex: 1 1 11rem; }
.it-find-search__label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.it-find-search__label img { display: block; opacity: 0.85; }
.it-find-search__field input,
.it-find-search__field select {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--heading);
	background: transparent;
	border: 0;
	padding: 0;
	width: 100%;
	min-width: 0;
}
.it-find-search__field input:focus,
.it-find-search__field select:focus { outline: none; }
.it-find-search__field:focus-within { box-shadow: inset 0 -2px 0 var(--wp--preset--color--accent); }
.it-find-search__when { display: flex; gap: 0.5rem; }
.it-find-search__when select { flex: 1 1 0; }
.it-find-search__submit {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.0375em;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast);
	border: 0;
	padding: 0 1.8rem;
	cursor: pointer;
	transition: background-color 150ms ease;
}
.it-find-search__submit:hover,
.it-find-search__submit:focus-visible { background: var(--wp--preset--color--accent); }
.it-find-browse a { text-decoration: none; }
.it-find-browse a:hover { color: var(--wp--preset--color--heading); }
@media (max-width: 781px) {
	.it-find-search { flex-direction: column; }
	.it-find-search__field { border-right: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.12); flex: 1 1 auto; }
	.it-find-search__submit { padding: 0.85rem; }
}

/* ---- Contact concierge: balance the image column with the (taller) form column -----------------
   On desktop, columns are equal-height; let the left column's image stretch to fill it (cropped via
   object-fit), with the italic mission line below. On narrow screens (stacked), fall back to a normal
   portrait crop. */
.it-contact-image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 782px) {
	.it-contact-grid > .wp-block-column:first-child { display: flex; flex-direction: column; }
	.it-contact-grid > .wp-block-column:first-child > .it-contact-image { flex: 1 1 auto; min-height: 0; margin: 0 0 var(--wp--preset--spacing--40); }
	.it-contact-grid > .wp-block-column:first-child > .it-contact-image img { height: 100%; aspect-ratio: auto; min-height: 420px; }
	.it-contact-grid > .wp-block-column:first-child > .it-accent { margin-top: 0; }
}

/* ---- KempIT SecureForms #47 embed (Contact concierge pattern) -------------
   The plugin's secure-form.css gives the field grid; these overrides drop the generic "white card / Arial /
   blue button" look so the form sits cleanly on the cream section in the theme's type. Scoped under
   .it-contact-form so it only touches our raw embed, not the plugin-rendered form on other pages. */
.it-contact-form .secure-form {
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--body);
}
.it-contact-form .secure-form .sf-hp { display: none !important; }
.it-contact-form .secure-form label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body);
}
.it-contact-form .secure-form .form-control {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--heading);
	background: var(--wp--preset--color--base);
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 0;
	padding: 0.6rem 0.7rem;
}
.it-contact-form .secure-form .form-control:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent);
}
.it-contact-form .secure-form textarea.form-control { min-height: 6rem; resize: vertical; }
.it-contact-form .secure-form .required { color: var(--wp--preset--color--accent); }
.it-contact-form .secure-form .checkbox-inline { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.it-contact-form .secure-form .form-check { display: inline-flex; align-items: center; gap: 0.4rem; }
.it-contact-form .secure-form .form-check-label {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--body);
}
.it-contact-form .secure-form .sf-turnstile-wrap { text-align: left; }
.it-contact-form .secure-form .cf-turnstile { display: inline-block; }
.it-contact-form .secure-form .btn,
.it-contact-form .secure-form .btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.0375em;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast);
	border: 0;
	border-radius: 0;
	padding: 0.8rem 1.6rem;
	cursor: pointer;
	transition: background-color 150ms ease;
}
.it-contact-form .secure-form .btn:hover,
.it-contact-form .secure-form .btn-primary:hover,
.it-contact-form .secure-form .btn:focus-visible,
.it-contact-form .secure-form .btn-primary:focus-visible {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* "Featured travel — query" pattern: the core/read-more "Explore →" link styled as a quiet bronze CTA.
   (This pattern can appear on the homepage, which loads style.css but not travel-content.css.) */
.it-travel-featured-query .it-travel-card-link.wp-block-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: auto;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.it-travel-featured-query .it-travel-card-link.wp-block-read-more:hover {
	color: var(--wp--preset--color--heading);
}
/* Make each card in the query grid a flex column so the link sits at the bottom and the border looks like the
   static destination cards. */
.it-travel-featured-query .wp-block-post-template > li > .wp-block-group {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.it-travel-featured-query .wp-block-post-template > li > .wp-block-group > .wp-block-group { flex: 1 0 auto; }
.it-travel-featured-query .wp-block-post-featured-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* Stack multi-column rows on small screens (WP does this for .wp-block-columns >782px breakpoint already;
   this just tightens the gutters on phones) */
@media (max-width: 781px) {
	.wp-block-columns { gap: var(--wp--preset--spacing--50); }
}