/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Author: art-tour-mom
Description: Child theme for Hello Elementor — holds Google font, header/footer wiring, menu + logo shortcodes, custom shortcodes, hero slider, and all custom CSS/JS.
Version: 1.0.0
*/

/* ============================================================
   Typography — Unbounded for Latin display text, with automatic
   per-glyph fallback to IBM Plex Sans Thai for Thai characters
   (Unbounded has no Thai glyphs). Body copy stays IBM Plex Sans Thai.
   ============================================================ */
/* Low-specificity site default so non-Elementor markup (WP menu, footer,
   form fields) matches the body font. Elementor Globals + per-widget
   typography have higher specificity and still win. */
body,
button,
input,
select,
textarea {
	font-family: "IBM Plex Sans Thai", sans-serif;
}

.elementor-heading-title,
.elementor-button,
.atm-menu a {
	font-family: "Unbounded", "IBM Plex Sans Thai", sans-serif !important;
}

/* ============================================================
   ATM Landing (splash hero) — animations + language toggle
   ============================================================ */

/* Inline (content-hugging) flex-child container — escapes Elementor's
   default --width:100% so a row child shrinks to its content instead of
   filling the row. Also lets its own child widgets size to content. */
.atm-inline {
	--width: auto !important;
	--container-widget-width: auto !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	width: auto !important;
}

/* Logo dot — fixed 42px circle at every breakpoint (escapes the flex-child
   width rule that otherwise stretches it on mobile). */
.atm-logo-dot {
	flex: 0 0 42px !important;
	width: 42px !important;
	height: 42px !important;
	--width: 42px !important;
	--container-widget-width: auto !important;
}

/* Gentle float animation (hero CTA + floating decorative PNGs) */
@keyframes atmFloatUp {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}
.atm-float { animation: atmFloatUp 6s ease-in-out infinite; }
.atm-float img { width: 100%; height: 100%; object-fit: contain; }
.atm-cta-float .elementor-button { animation: atmFloatUp 5s ease-in-out infinite; }

/* Language pill — active/inactive states driven by #atm-lang.th / .en */
#atm-lang .elementor-button {
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: background-color .2s ease, color .2s ease;
}
#atm-lang.th #atm-th .elementor-button,
#atm-lang.en #atm-en .elementor-button {
	background-color: #33281C !important;
	color: #F4EAD5 !important;
}
#atm-lang.th #atm-en .elementor-button,
#atm-lang.en #atm-th .elementor-button {
	background-color: transparent !important;
	color: #33281C !important;
}
/* Language globe icon (all pages: in-page nav + HFE header) — the fa-globe SVG
   has a 496x512 viewBox; don't force it into a square that clips the bottom.
   Keep its true aspect ratio and never clip. */
#atm-lang .elementor-widget-icon,
#atm-lang .elementor-icon-wrapper,
#atm-lang .elementor-icon {
	overflow: visible !important;
}
#atm-lang .e-font-icon-svg,
#atm-lang .elementor-icon svg {
	width: auto !important;
	height: 1em !important;
	overflow: visible !important;
}

/* Keep the splash free of horizontal scroll */
body.page-template-elementor_canvas { overflow-x: hidden; }

/* ============================================================
   ATM Home (Bubba Hill hero) — dotted bg, layered scene
   ============================================================ */

/* Cream dotted-paper background on the hero container */
.atm-dots {
	background-image: radial-gradient(#DFCFAF 1.4px, transparent 1.4px) !important;
	background-size: 22px 22px !important;
}

/* Full-cover layered image inside the scene frame (scene bg / bushes / sun) */
.atm-cover {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.atm-cover .elementor-widget-container,
.atm-cover figure,
.atm-cover img {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
}
.atm-cover img {
	object-fit: cover;
	border-radius: 25px;
	display: block;
}

/* Character gang: a flex row pinned to the bottom of the scene frame */
.atm-gang {
	position: absolute !important;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 5;
	pointer-events: none;
}
/* Frame keeps the scene art's native 560x700 (0.8) ratio so the sun / bushes /
   scene layers are shown FULL — no crop — and stay aligned with each other. */
.atm-frame {
	position: relative;
	overflow: visible;
	aspect-ratio: 560 / 700;
	height: min(100%, 84vh);
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	align-self: center;
	flex: 0 1 auto !important;
}
@media (max-width: 767px) {
	.atm-frame { height: auto; width: 100%; max-width: 420px; }
}
/* Scene bg (14) + sun (16) + bushes (15) — the three .atm-cover layers — are
   scaled 1.2x from original (the 4 animal characters, .atm-gang, are untouched). */
.atm-frame .atm-cover {
	transform: scale(1.2);
	transform-origin: center center;
}
/* On mobile the scene stacks below the text/CTA — grow it DOWNWARD from the top
   edge so the 1.5x enlargement never overlaps the buttons above it. */
@media (max-width: 767px) {
	.atm-frame .atm-cover { transform-origin: center top; }
	.atm-frame { margin-top: 8px; }
}
/* Sun (16) + bushes (15): show at natural aspect (no crop) and sit frontmost. */
.atm-cover.atm-floaty img,
.atm-cover.atm-floaty--c img {
	object-fit: contain !important;
}
.atm-frame .atm-cover.atm-floaty,
.atm-frame .atm-cover.atm-floaty--c {
	z-index: 50 !important;
}
.atm-char { width: auto !important; }
.atm-char .elementor-widget-container { width: auto !important; }
.atm-char img {
	width: auto !important;
	max-width: none !important;   /* absolute owl's container is narrow; without this,
	                                 max-width:100% squishes the wide image to ~square */
	display: block;
	filter: drop-shadow(0 12px 10px rgba(46,61,52,0.22));
}
.atm-oct { transform: translateX(-90px); }
.atm-middle { position: relative; }
.atm-owl {
	position: absolute !important;
	bottom: 413px;   /* raised ~3cm (113px) from the original 300px */
	left: 38%;
	transform: translateX(-50%);
	z-index: 6;
}

/* Gentle vertical float for the characters */
@keyframes atmFloatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.atm-floaty img { animation: atmFloatY 5.4s ease-in-out infinite; }
.atm-floaty--b img { animation-duration: 5s; animation-delay: .6s; }
.atm-floaty--c img { animation-duration: 5.6s; animation-delay: 1s; }
.atm-floaty--owl img { animation-duration: 4.8s; }

/* Home hero nav — floats over the top of the hero (Elementor container
   position controls don't emit CSS, so pin it here). */
.atm-nav {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 120;   /* above the 1.2x scene layers (sun/bushes z50) so nav icons
	                   are always frontmost — clouds/scene never cover them */
}

/* ============================================================
   Shared HFE header / footer / menu / hamburger
   ============================================================ */

/* WP nav menu rendered via [main_menu] shortcode */
.atm-menu-nav { display: inline-block; }
.atm-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 26px;
}
.atm-menu li { margin: 0; }
.atm-menu a {
	font-family: 'IBM Plex Sans Thai', sans-serif;
	font-weight: 500;
	font-size: 16px;
	color: #33281C;
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2.5px solid transparent;
	transition: border-color .15s ease;
	white-space: nowrap;
}
.atm-menu a:hover { border-bottom-color: rgba(232,115,74,.5); }
.atm-menu .current-menu-item > a,
.atm-menu .current_page_item > a { border-bottom-color: #E8734A; }

/* Header bar background (seamless with the dotted cream page) */
.atm-header {
	position: relative;
	background: #F4EAD5;
	background-image: radial-gradient(#DFCFAF 1.4px, transparent 1.4px);
	background-size: 22px 22px;
}

/* Button color utilities — Elementor drops per-button background-color when the
   same color repeats many times on a page (falls back to the default green), so
   force each variant here. */
.atmb-green  .elementor-button, .atmb-green  .elementor-button:hover { background-color: #3E6B4C !important; color: #F4EAD5 !important; }
.atmb-cream  .elementor-button, .atmb-cream  .elementor-button:hover { background-color: #FBF4E6 !important; color: #33281C !important; }
.atmb-lcream .elementor-button, .atmb-lcream .elementor-button:hover { background-color: #F4EAD5 !important; color: #33281C !important; }
.atmb-dark   .elementor-button, .atmb-dark   .elementor-button:hover { background-color: #33281C !important; color: #F4EAD5 !important; }
.atmb-yellow .elementor-button, .atmb-yellow .elementor-button:hover { background-color: #E4A93B !important; color: #33281C !important; }
.atmb-orange .elementor-button, .atmb-orange .elementor-button:hover { background-color: #E8734A !important; color: #F4EAD5 !important; }
.atmb-blue   .elementor-button, .atmb-blue   .elementor-button:hover { background-color: #4E93A8 !important; color: #F4EAD5 !important; }
.atmb-pink   .elementor-button, .atmb-pink   .elementor-button:hover { background-color: #C8607A !important; color: #F4EAD5 !important; }

/* Hamburger — hidden on desktop */
.atm-burger { display: none; }

/* Art page — top marquee: images in ONE strip, scrolling LEFT in an infinite loop.
   landing.js clones the tiles once (seamless -50% loop) and sets a constant speed.
   Trailing margin on each tile (not flex gap) keeps the -50% loop seamless. */
.atm-marquee { overflow: hidden; }
.atm-marquee-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	width: max-content !important;
	will-change: transform;
	animation: atmMarquee 40s linear infinite;
}
.atm-marquee:hover .atm-marquee-track { animation-play-state: paused; }
.atm-marquee-tile {
	flex: 0 0 auto !important;
	width: auto !important;
	height: 680px !important;
	margin-right: 18px !important;
	border-radius: 18px;
	overflow: hidden;
}
.atm-marquee-tile .elementor-widget-container,
.atm-marquee-tile .elementor-image { height: 100%; }
.atm-marquee-tile img {
	height: 680px !important;
	width: auto !important;
	max-width: none !important;
	display: block;
	border-radius: 18px;
}
@keyframes atmMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 767px) {
	.atm-marquee-tile, .atm-marquee-tile img { height: 440px !important; }
}

/* Gallery card image slot = FULL WIDTH, AUTO HEIGHT → the card grows/shrinks to
   the real photo's aspect ratio (no cropping, auto portrait/landscape). */
.atm-slot img {
	width: 100% !important;
	height: auto !important;
	display: block;
}

/* Tour card image slot = fixed 3:4 PORTRAIT frame so every card is the same
   height; the photo fills the frame (cover-cropped, centered). */
.atm-tour-slot img {
	width: 100% !important;
	aspect-ratio: 3 / 4 !important;
	height: auto !important;
	object-fit: cover !important;
	object-position: center !important;
	max-width: 100% !important;
	display: block !important;
}

/* Category badge overlaid on a card image area */
.atm-badge { position: absolute !important; top: 12px; left: 12px; z-index: 3; }
.atm-card-img { position: relative; }

/* "อ่านรีวิว" style text link inside cards */
.atm-readmore .elementor-button,
.atm-readmore .elementor-button:hover {
	background: transparent !important;
	box-shadow: none !important;
	padding: 7px 0 !important;
	color: #33281C !important;
}

/* Footer link lists */
.atm-foot-link a,
.atm-foot-link span {
	display: block;
	color: #C8B99F;
	text-decoration: none;
	font-family: 'IBM Plex Sans Thai', sans-serif;
	font-size: 15px;
	line-height: 2;
}
.atm-foot-link a:hover { color: #F4EAD5; }
.atm-foot-menu ul { list-style: none; margin: 0; padding: 0; }
.atm-foot-menu a {
	display: block;
	color: #C8B99F;
	text-decoration: none;
	font-family: 'IBM Plex Sans Thai', sans-serif;
	font-size: 15px;
	line-height: 2;
}
.atm-foot-menu a:hover { color: #F4EAD5; }

/* --- Mobile: collapse header menu into a hamburger dropdown --- */
@media (max-width: 1024px) {
	.atm-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px; height: 42px;
		background: transparent;
		border: 0; cursor: pointer; padding: 0;
		color: #33281C;
	}
	.atm-burger, .atm-burger:hover, .atm-burger:focus, .atm-burger:active, .atm-burger:focus-visible {
		background: transparent !important; border: 0 !important; outline: none !important;
		box-shadow: none !important; -webkit-appearance: none; appearance: none;
	}
	.atm-menu-collapse { position: relative; }
	/* the widget holding [main_menu] becomes a dropdown panel */
	.atm-headmenu {
		display: none;
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: #F4EAD5;
		box-shadow: 0 14px 30px rgba(51,40,28,.18);
		border-radius: 0 0 18px 18px;
		padding: 8px 20px 18px;
		z-index: 200;
	}
	.atm-headmenu.is-open { display: block; }
	.atm-headmenu .atm-menu { flex-direction: column; align-items: flex-start; gap: 0; }
	.atm-headmenu .atm-menu a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(51,40,28,.08); width: 100%; }
	.atm-headmenu .atm-menu .current-menu-item > a { border-bottom-color: rgba(51,40,28,.08); color: #E8734A; }
}

/* Nav text links (Home hero) */
.atm-navlink .elementor-button,
.atm-navlink .elementor-button:hover {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}
.atm-navlink--active .elementor-button {
	border-bottom: 2.5px solid #E8734A !important;
	border-radius: 0 !important;
	padding-bottom: 2px !important;
}

/* ============================================================
   Create Yours — interactive customizer (wired in landing.js)
   ============================================================ */
/* Option chips: active = green (JS moves .atm-cz-active). Overrides atmb-cream. */
.atm-cz-opt .elementor-button { cursor: pointer; transition: background-color .15s, color .15s, transform .12s; }
.atm-cz-opt .elementor-button:hover { transform: translateY(-1px); }
.atm-cz-opt.atm-cz-active .elementor-button,
.atm-cz-opt.atm-cz-active .elementor-button:hover {
	background-color: #3E6B4C !important;
	color: #F4EAD5 !important;
}
/* Color swatches: active = brown ring */
.atm-cz-color { cursor: pointer; transition: transform .12s; }
.atm-cz-color:hover { transform: scale(1.08); }
.atm-cz-color.atm-cz-active { outline: 3px solid #33281C; outline-offset: 2px; }

/* Preview stage: only the .is-on character shows; surface recolors live */
.atm-cz-surface { transition: background-color .2s ease; }
.atm-cz-fig { display: none !important; }
.atm-cz-fig.is-on { display: block !important; }
.atm-cz-nametag-el:empty { display: none; }
.atm-cz-nametag-el {
	margin-top: 12px;
	padding: 6px 18px;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 5px 14px rgba(51,40,28,.16);
	color: #33281C;
	font-family: "Unbounded", "IBM Plex Sans Thai", sans-serif;
	font-weight: 700;
	font-size: 18px;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Real name input injected by JS into the placeholder box */
.atm-cz-namebox input {
	border: 0; background: transparent; outline: none;
	width: 100%; padding: 0; margin: 0;
	font-family: "IBM Plex Sans Thai", sans-serif;
	font-size: 15px; color: #33281C;
}
.atm-cz-namebox input::placeholder { color: #B3A488; }

/* ---- Sticker builder (Create Yours, id 20) ---- */
/* Preview stage: only the .is-on theme sheet shows; surface tints per theme */
.atm-st-surface { position: relative; overflow: hidden; transition: background-color .2s ease; }
.atm-st-sheet { display: none !important; width: 100%; }
.atm-st-sheet.is-on { display: block !important; }
.atm-st-sheet img { max-height: 384px; width: auto !important; max-width: 100%; margin: 0 auto; display: block; border-radius: 14px; }
/* Typed name printed onto the sheet as a personalized banner */
.atm-st-nametag-el:empty { display: none; }
.atm-st-nametag-el {
	position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
	padding: 6px 20px; background: #E4A93B; color: #33281C;
	border-radius: 999px; box-shadow: 0 6px 16px rgba(51,40,28,.28);
	font-family: "Unbounded", "IBM Plex Sans Thai", sans-serif;
	font-weight: 700; font-size: 20px; line-height: 1.2;
	max-width: 84%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	z-index: 3; pointer-events: none;
}
/* Real name input injected by JS into the placeholder box */
.atm-st-namebox input {
	border: 0; background: transparent; outline: none;
	width: 100%; padding: 0; margin: 0;
	font-family: "IBM Plex Sans Thai", sans-serif;
	font-size: 15px; color: #33281C;
}
.atm-st-namebox input::placeholder { color: #B3A488; }