/* ==========================================================================
   KUYSEN — SITE STYLES
   --------------------------------------------------------------------------
   Global rules and page-specific tweaks, moved out of
   Theme Options → Custom CSS.

   Self-contained components (featured brands, video player, page
   transition, etc.) live in their own files in /assets/css/components/.

   Loaded by inc/enqueue-site-assets.php, after Impreza's stylesheets.

   Contents
      1. Temporary — native animation override
      2. Header
      3. Logos
      4. Typography helpers
      5. Buttons
      6. Images
      7. Home page sections
      8. News articles
      9. Tabs
     10. Forms
     11. Single brand page
     12. Footer
   ========================================================================== */


/* ==========================================================================
   1. TEMPORARY — NATIVE ANIMATION OVERRIDE
   --------------------------------------------------------------------------
   Forces any leftover WPBakery / Impreza "appear on scroll" animations to
   render fully visible, so nothing is left half-hidden on the page.

   NOTE: these !important rules beat GSAP's inline styles, so any element
   still carrying these classes cannot be animated by GSAP. Delete this
   whole section once the animation classes have been stripped from the
   page content.
   ========================================================================== */

.wpb_animate_when_almost_visible {
	opacity: 1 !important;
	animation: none !important;
}

[class*="us_animate_"] {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}


/* ==========================================================================
   2. HEADER
   ========================================================================== */

/* Transparent header (before it turns sticky): main menu links take the
   secondary colour on hover. Desktop only (.no-touch). */
.no-touch .l-header.bg_transparent:not(.sticky) .at_middle .w-menu a:hover {
	color: var(--color-content-secondary) !important;
}


/* ==========================================================================
   3. LOGOS
   --------------------------------------------------------------------------
   Light / dark logo swap. Place two Image elements in the header with the
   extra classes "logo-light" and "logo-dark"; the dark one shows when
   Impreza's colour scheme switch is on.
   ========================================================================== */

.w-image.logo-dark,
html.us-color-scheme-on .w-image.logo-light {
	display: none;
}

html.us-color-scheme-on .w-image.logo-dark {
	display: block;
}


/* ==========================================================================
   4. TYPOGRAPHY HELPERS
   ========================================================================== */

/* Small print and image captions. */
small,
.caption {
	font-size: 0.875rem;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--color-content-primary);
}


/* ==========================================================================
   5. BUTTONS
   --------------------------------------------------------------------------
   Sweep underline. Applied through the extra class "btn-sweep" on the
   "CTA BUTTON - White" button style (us-btn-style_12). The underline
   retracts to 35% of the width on hover.
   ========================================================================== */

.btn-sweep {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 12px;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-content-text);
}

.btn-sweep::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(1);
	transform-origin: left;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-sweep:hover::after {
	transform: scaleX(0.35);
}


/* ==========================================================================
   6. IMAGES
   ========================================================================== */

/* Warm, slightly muted colour grade on images for the editorial look. */
.w-image img,
.image-filter .w-post-elm.stretched img {
	filter: saturate(0.82) contrast(0.94) brightness(1.04) sepia(0.1) hue-rotate(-4deg);
	/* CHANGED: transform kept in the list — the shorthand was replacing
	   the grid layout's own zoom transition, so hover snapped. */
	transition: filter 0.4s ease,
	            transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* CHANGED: logos are kept true to brand colour — the grade above was also
   tinting them. Add the extra class "no-grade" to any other Image element
   that should be left untouched. */
.w-image.logo-light img,
.w-image.logo-dark img,
.w-image.no-grade img {
	filter: none;
}


/* ==========================================================================
   7. HOME PAGE SECTIONS
   ========================================================================== */
.w-tabs-section-header{
	padding: 1em !important;
}

/* --- Kuysen 360° Approach -------------------------------------------------
   These tiles open content on click, so show the pointer cursor. */
.approach-trips,
.approach-event,
.approach-network-and-connections {
	cursor: pointer;
}

/* --- Project Portfolio ----------------------------------------------------
   Staggered grid: the middle item of every row of three sits lower.
   Flattened on small phones where the grid is a single column. */
.home-project-portfolio .w-grid-item:nth-child(3n+2) {
	margin-top: 46px;
}

@media (max-width: 560px) {
	.home-project-portfolio .w-grid-item:nth-child(3n+2) {
		margin-top: 0;
	}
}

/* --- At Your Service ------------------------------------------------------
   Assist blocks: background tints on hover and the arrow nudges
   up and to the right. */
.assist-block {
	transition: background 0.45s;
}

.assist-block .aarrow {
	transition: 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.assist-block:hover {
	background: var(--color-content-bg-alt);
}

.assist-block:hover .aarrow {
	transform: translate(4px, -4px);
}


/* ==========================================================================
   8. NEWS ARTICLES
   ========================================================================== */

/* Drop cap on the opening paragraph of an article.
   CHANGED: scoped to single posts (.single-post). Without it the rule
   could hit the first paragraph of any column on any page. */
.single-post .entry-content .wpb_wrapper p:first-of-type::first-letter {
	float: left;
	margin: 0.05em 0.1em 0 0;
	font-size: 6em;
	line-height: 0.8;
	font-weight: bold;
}


/* ==========================================================================
   9. TABS
   --------------------------------------------------------------------------
   Impreza Tabs, "Simple 3" style (used on Contact Us): active and hovered
   tabs fill with the secondary colour.
   ========================================================================== */

.w-tabs.style_simple3 > .w-tabs-list .w-tabs-item {
	font-size: 16px;
}

.w-tabs.style_simple3 > .w-tabs-list .w-tabs-item.active,
.no-touch .w-tabs.style_simple3 > .w-tabs-list .w-tabs-item:hover {
	background: var(--color-content-secondary);
	color: #fff;
}


/* ==========================================================================
   10. FORMS
   ========================================================================== */

/* --- Luxury form template (Contact Us) ------------------------------------
   Note: the class name is spelt "luxury-from-template" in the page
   content, so it is kept as-is here. */
.luxury-from-template .w-form-row-label span {
	margin-bottom: 0.75rem;
	font-size: 14px;
	font-weight: 400;
}

.luxury-from-template .w-form-row-field span {
	font-size: 14px;
}

/* --- Premier form ---------------------------------------------------------
   Small uppercase labels, a readable agreement row, and checkboxes laid
   out in two columns. */
.premier-form .w-form-row-label span {
	margin-bottom: 10px;
	color: var(--color-form-label-color);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	/* CHANGED: fixed typo — was "colo", so the transition never ran. */
	transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.premier-form .w-form-row.for_agreement {
	max-width: 70ch;
	font-size: 12px;
}

.premier-form .w-form-row.for_agreement label {
	align-items: start !important;
}

.premier-form .w-form-row.for_checkboxes .w-form-row-field {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 24px;
	margin-top: 10px;
}

.premier-form .w-form-row.for_checkboxes .w-form-row-field label {
	font-size: 12px;
}


/* ==========================================================================
   11. SINGLE BRAND PAGE
   --------------------------------------------------------------------------
   Rows with the extra class "custom-stack" reverse their three columns on
   mobile, so the third column shows first.
   ========================================================================== */

@media (max-width: 767px) {
	.custom-stack .g-cols {
		display: flex;
		flex-direction: column;
	}

	.custom-stack .g-cols > .wpb_column:nth-child(1) { order: 3; }
	.custom-stack .g-cols > .wpb_column:nth-child(2) { order: 2; }
	.custom-stack .g-cols > .wpb_column:nth-child(3) { order: 1; }
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */

/* Legal menu: middle-dot separator between links, none after the last. */
.footer-legal li::after {
	content: "\00B7";
	margin-left: 10px;
	font-weight: 700;
}

.footer-legal li:last-of-type::after {
	content: "";
}
@media (max-width: 782px) {
	.footer-legal li::after{
		display: none;
	}
}
/* ==========================================================================
   13. FULL-HEIGHT HERO — RESERVE SPACE
   --------------------------------------------------------------------------
   Full-height hero sections settle to their final height only after their
   background image loads. Until then the section is shorter, so everything
   bottom-aligned inside it (the hero buttons) jumps down when the image
   arrives — and the scroll positions of the section below move with it,
   which can replay a reveal that already ran.

   Reserving the height up front removes both. svh is used where supported
   so mobile browser chrome doesn't change the value mid-scroll.
   ========================================================================== */

.l-section.full_height {
	min-height: 100vh;
	min-height: 100svh;
}

/* The WordPress admin bar takes 32px off the viewport for logged-in users. */
.admin-bar .l-section.full_height {
	min-height: calc(100vh - 32px);
	min-height: calc(100svh - 32px);
}

@media (max-width: 782px) {
	.admin-bar .l-section.full_height {
		min-height: calc(100vh - 46px);
		min-height: calc(100svh - 46px);
	}
}

/* ==========================================================================
   14. DARK SCHEME OVERRIDES
   --------------------------------------------------------------------------
   Values that can't live in Theme Options → Color Schemes.

   Custom Global Colors are shared across schemes, so any custom global that
   fails contrast on a dark background is corrected here instead.

   Loads after Impreza's generated palette CSS, so these win.
   ========================================================================== */

html.us-color-scheme-on {
	/* _form_label_color #6e6862 scores 2.97:1 on the dark bg_alt.
	   #9a9188 gives 5.77:1. */
	--color-form-label-color: #9a9188;
}
.post_navigation.layout_sided .post_navigation-item-arrow{
	color: #d2ba64 !important;
}

/* ==========================================================================
   15. COLOUR SCHEME SWITCH
   --------------------------------------------------------------------------
   Icon-only presentation of the Impreza Color Scheme Switch element in the
   header. The toggle track is hidden; the sun and moon are absolutely
   positioned in the same box and cross-faded, so neither takes part in
   layout and neither can move the other.

   Selectors match Impreza's own ".w-color-switch > label" shape so there is
   no specificity argument over display and size.

   State comes from html.us-color-scheme-on, not input:checked — Impreza sets
   that class from a cookie in an inline <head> script before first paint and
   syncs the checkbox later in JS, so :checked flashes the wrong icon on load.
   ========================================================================== */

.w-color-switch {
	--switch-size: 38px;   /* the only number to change */
	margin-inline-end: 1.5rem;
}

.w-color-switch > label {
	position: relative;
	display: block;
	width: var(--switch-size);
	height: var(--switch-size);
	cursor: pointer;
	transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Impreza's .screen-reader-text doesn't take the checkbox out of flow here.
   Kept focusable — display:none would lose keyboard access and the focus
   ring below. */
.w-color-switch input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* The toggle track and its knob. Impreza sizes these in em (2.8em x 1.6em),
   which is why the element's own font-size is left alone. */
.w-color-switch .w-color-switch-box {
	display: none;
}

/* Both icons fill the label box and are out of flow entirely. Layout cannot
   shift between states because neither element participates in it. */
.w-color-switch .w-color-switch-before,
.w-color-switch .w-color-switch-after {
	position: absolute;
	inset: 0;
	display: block;
	transition: opacity 0.25s ease;
}

.w-color-switch svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Light: sun. Dark: moon. visibility keeps the inactive one out of the
   accessibility tree so only the active label is announced. */
.w-color-switch .w-color-switch-after {
	opacity: 0;
	visibility: hidden;
}

html.us-color-scheme-on .w-color-switch .w-color-switch-before {
	opacity: 0;
	visibility: hidden;
}

html.us-color-scheme-on .w-color-switch .w-color-switch-after {
	opacity: 1;
	visibility: visible;
}

/* Impreza's focus ring targets .w-color-switch-box, which is hidden above.
   Put an equivalent back on the label for keyboard users. */
.w-color-switch > label:has(input:focus-visible) {
	outline: var(--focus-outline-width, 2px) solid currentColor;
	outline-offset: 4px;
}

.no-touch .w-color-switch > label:hover {
	color: var(--color-header-middle-text-hover);
}

.kuysen-hero a { color: #f8f7f1; }