/* =====================================================================
   Your Holidays — Elementor-context overrides
   ---------------------------------------------------------------------
   The original static site relied on sibling/parent selectors
   (`.page-hero + section`, `.page-hero ~ section`) and a fixed page-hero.
   Inside Elementor every widget is wrapped in .elementor-widget-container,
   so those relationships no longer hold. This file re-flows the few
   affected pieces so each widget is self-contained. shared.css is kept
   byte-for-byte identical to the live site.
   ===================================================================== */

/* EN-only build: this plugin renders only .show-en content. The site's language
   CSS hides .show-en whenever <html data-lang="th">. If a visitor ever clicks the
   TH toggle (or a stale "th" is stored), that would blank the page — so keep
   English visible regardless. Remove this block once Thai (Polylang) is added. */
[data-lang="th"] .show-en { display: revert !important; }

/* =====================================================================
   THEME / ELEMENTOR RESET — force the reference styling to win.
   Themes and Elementor's global styles add their own a / a:hover colours,
   underlines, list bullets and button looks that the static site never had.
   These high-specificity rules (prefixed with `body`) re-assert the reference
   look so the navbar, language toggle and links match exactly on every page.
   ===================================================================== */

/* Navbar links — cream, and NO colour change on hover (reference uses only an
   opacity shift + the sliding underline). !important + high specificity beats
   themes/Elementor global link colours, even when they use !important. */
body .nav .nav__link,
body .nav .nav__link:link,
body .nav .nav__link:visited,
body .nav .nav__link:hover,
body .nav .nav__link:focus,
body .nav .nav__link:active,
body .nav.is-scrolled .nav__link,
body .nav.is-scrolled .nav__link:hover {
	color: var(--c-cream) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

/* Language toggle — cream, opacity-only hover (no theme colour, no underline). */
body .lang-toggle .lang-toggle__btn,
body .lang-toggle .lang-toggle__btn:link,
body .lang-toggle .lang-toggle__btn:visited,
body .lang-toggle .lang-toggle__btn:hover,
body .lang-toggle .lang-toggle__btn:focus,
body .lang-toggle .lang-toggle__btn:active,
body .nav__lang .lang-toggle__btn,
body .nav__lang .lang-toggle__btn:hover,
body .footer .lang-toggle__btn,
body .footer .lang-toggle__btn:hover {
	color: var(--c-cream) !important;
	background: none !important;
	border: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

/* Content links inside YH sections — no theme underline / hover recolour.
   (Colours come from the reference classes themselves.) */
body .nav a:hover,
body .footer a:hover,
/* body .hero a:hover, */
body .prologue a:hover,
body .team a:hover,
body .advantages a:hover,
/* body .services a:hover, */
/* body .gallery a:hover, */
/* body .journal a:hover, */
body .testimonials a:hover,
body .contact a:hover,
body .gallery-pg a:hover,
body .ab-section a:hover,
body .svc-page a:hover,
body .mobile-menu a:hover { color: inherit; }

body .nav a,
body .footer a,
body .mobile-menu a,
body .services a,
body .journal a,
body .gallery a { text-decoration: none; }

/* Elementor/theme sometimes add bullets or left padding to <ul>. The nav,
   footer and mobile menus are explicit flex/plain lists in the reference. */
body .nav__menu,
body .mobile-menu__list,
body .footer__col ul { list-style: none; margin: 0; padding: 0; }

/* Keep the navbar pinned even if a global-header wrapper is position:relative. */
body .nav { position: fixed; }

/* `.gallery` is a RESERVED WordPress class (the classic [gallery] shortcode);
   Kadence styles it as an auto-fill grid, which hijacks the home gallery section
   and collapses its rail to 0. Reset it to the reference's plain block section so
   .gallery__shell (intro + horizontal rail) lays out correctly. */
.elementor .gallery {
	display: block !important;
	grid-template-columns: none !important;
	gap: 0 !important;
	margin: 0 !important;            /* Kadence's .gallery rule also adds a bottom margin */
}

/* Contact form fields: Kadence styles inputs as white boxes with a full border
   + radius. The reference uses transparent underline-only fields — restore that. */
.elementor .field__input,
.elementor .field__select,
.elementor .field__textarea {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--line-strong) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.elementor .field__input:focus,
.elementor .field__select:focus,
.elementor .field__textarea:focus {
	border-bottom-color: var(--c-rust) !important;
}

/* Single-line pill/CTA buttons: Kadence can constrain their width so the label
   wraps into many lines (the "VIEW GALLERY" button ballooned to 276px tall).
   Keep them on one line like the reference. */
.elementor .gallery__cta,
.elementor .services__cta,
.elementor .journal__view-all,
.elementor .hero__cta,
.elementor .services-page__cta-btn,
.elementor .svc-cta-btn,
.elementor .adx-pill {
	white-space: nowrap;
}

/* Reveal-on-scroll animation can't run on widgets freshly dropped into the
   Elementor editor (the IntersectionObserver already initialised), so they'd
   stay invisible while editing. Force the revealed state inside the editor only —
   the live frontend keeps the real scroll animation. */
.elementor-editor-active .reveal,
.elementor-edit-area-active .reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* Kadence (and many themes) style every <button> with their own padding, which
   squeezes the plugin's fixed-size icon buttons (slider arrows shrink to a
   sliver, dots/hamburger/FAB distort). shared.css never set padding on these, so
   the theme's wins — reset it. */
body .gallery__nav-btn,
body .spread__nav,
body .spread__progress-bar,
body .services__dot,
body .nav__burger,
body .fab__btn,
body .gallery-lb__btn,
body .gallery-lb__close,
body .m-sub-toggle {
	padding: 0 !important;
	min-height: 0 !important;
	min-width: 0 !important;
}
/* Keep the arrow SVGs stroke-only in case a theme forces svg { fill: currentColor }. */
body .gallery__nav-btn { color: var(--c-black); }
body .gallery__nav-btn svg,
body .gallery__nav-btn svg path,
body .spread__nav svg,
body .spread__nav svg path {
	fill: none !important;
	stroke: currentColor !important;
}

/* Page hero: render as a normal in-flow banner instead of a fixed card. */
.elementor .page-hero {
	position: relative;
	left: auto;
	right: auto;
	top: auto;
	height: auto;
	min-height: var(--hero-band, 520px);
	z-index: 1;
}

/* When the hero sits inside a full-width Elementor container, let it bleed
   edge-to-edge like the original banner. */
.elementor .yh-page-hero-widget .page-hero {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}

/* FIXED page hero — pinned to the top; the page content below scrolls up over
   it (the reference's signature effect). Turn this on in the Page Hero widget
   ("Scroll behaviour → Fixed"), then give the container holding the rest of the
   page a solid background (cream) and Z-Index 1 so it slides over the hero. */
.elementor .yh-page-hero-widget--fixed .page-hero--fixed {
	position: fixed;
	top: 0;
	/* Reference card is inset by the cream frame on both sides
	   (.page-hero { left/right: var(--frame) }) — not full-bleed. */
	left: var(--frame, 20px);
	right: var(--frame, 20px);
	width: auto;
	height: calc(var(--nav-h, 72px) + var(--hero-band, 520px));
	min-height: 0;
	margin: 0;
	z-index: 0;
}
/* Spacer = hero height + the cream frame gap below it, exactly like the
   reference's `.page-hero + section { margin-top: … + var(--frame) }`. */
.elementor .yh-page-hero-widget--fixed .page-hero-spacer {
	display: block;
	height: calc(var(--nav-h, 72px) + var(--hero-band, 520px) + var(--frame, 20px));
}
/* Make the Elementor containers that follow the fixed hero slide OVER it:
   lifted above the hero (z-index) and painted cream so they cover it while
   scrolling — no per-container setup needed in the editor. Sections that set
   their own background (e.g. the white .ab-section--alt) still win, since
   they paint on top of the container. */
.elementor .e-con:has(.page-hero--fixed) ~ .e-con,
.elementor-section:has(.page-hero--fixed) ~ .elementor-section {
	position: relative;
	z-index: 1;
	background-color: var(--c-cream, #EEEEE5);
}

/* The static site pushed content down to clear the FIXED page hero. With the
   hero now in-flow, drop those offsets so sections butt up normally. */
.elementor .subpage-back,
.elementor .page-hero + section,
.elementor .page-hero ~ section {
	margin-top: 0;
}

/* Elementor columns add their own width limits; let YH sections span the
   full column they are dropped into. */
.elementor .hero,
.elementor .prologue,
.elementor .team,
.elementor .advantages,
.elementor .services,
.elementor .gallery,
.elementor .journal,
.elementor .testimonials,
.elementor .contact,
.elementor .gallery-pg,
.elementor .ab-section,
.elementor .svc-page {
	width: 100%;
}

/* =====================================================================
   WORDPRESS-ONLY FIXES (v1.0.1+)
   ===================================================================== */

/* 1) Kadence paints the .site wrapper white. The reference canvas is cream —
   without this, the frame around the fixed page-hero and the gap under it
   show up white instead of cream. */
body .site,
body .content-bg,
body .site-main {
	background-color: var(--c-cream, #EEEEE5) !important;
}

/* 2) shared.css ends with a Thai-typography catch-all:
       [class*="-th"] em { font-style: normal !important; font-family: Anuphan !important; }
   On WordPress the BODY class "wp-theme-kadence" contains "-th", so that rule
   accidentally matches EVERY <em> on the site and strips the italic serif
   accents ("About *Us*", "in *the making*", …). Restore the reference italics
   with higher specificity, then re-assert the Thai rules for real *-th
   elements so nothing regresses once Thai content is added. */
body[class*="wp-theme-"] em {
	font-style: italic !important;
	font-family: inherit !important;
}
/* Real Thai elements stay upright + Anuphan (mirrors shared.css intent). */
body .show-th em,
body [class*="-th"] em,
html[data-lang="th"] body em {
	font-style: normal !important;
	font-family: "Anuphan", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* 3) Elementor's default blockquote style adds a dark border-left bar +
   left padding to every <blockquote>. The reference quotes (About
   philosophy, testimonial spreads) are plain centered text — reset them. */
body .ab-feature__quote,
body .spread__quote,
body .yh-about blockquote,
body .testimonials blockquote {
	border: none !important;
	padding: 0 !important;
	background: none !important;
}

/* 4) Articles PAGE variant of the Journal widget (added automatically when
   the "All" filter tab is on). Mirrors the reference's `#article .journal`
   rules from article.css: the page-hero supplies the title, so the section
   starts flush under it (no home-style top padding) and the grid gets the
   roomier archive row-gap. */
.elementor .journal--page {
	padding: 0 0 clamp(4rem, 8vw, 7rem);
}
.elementor .journal--page .journal__grid {
	row-gap: clamp(2rem, 4vw, 3.5rem);
}

/* 5) Single-article layout: inside Elementor the widget sits in a boxed
   container, so the cream .adx-flow stopped at the container edge and the
   fixed hero showed through beside it. Stretch the flow edge-to-edge; every
   inner block (adx-back / adx-doc / adx-other__wrap / adx-wrap) centers
   itself with max-width + auto margins, so the content stays put — only the
   cream canvas (and section backgrounds/borders) now reach the viewport. */
.elementor .elementor-widget-yh_article_single .adx-flow {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
