/*
 * Upmoneyday Native -- base accessibility & layout guard styles.
 * Everything that CAN be expressed in theme.json lives there instead.
 * This file only covers what theme.json has no mechanism for.
 */

/* Root cause of several mobile overflow defects: WordPress core only sets
   box-sizing:border-box on its own .wp-block-* elements (wp-includes/css/
   dist/block-library/style.css), not globally. Without it, every
   `width: 100%` + `padding` combination (hero CTA buttons, mobile nav
   items, FAQ triggers) renders wider than its container by exactly its
   horizontal padding, because padding is content-box's default: added on
   top of the specified width rather than included within it. */
*, *::before, *::after {
	box-sizing: border-box;
}

/* Kept as a defensive safety net, not as the fix -- the box-sizing rule
   above addresses the actual cause. */
html, body {
	overflow-x: hidden;
	max-width: 100%;
}

/* Skip link: hidden until keyboard-focused */
.umd-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75em 1.25em;
	background: var(--wp--preset--color--umd-navy);
	color: var(--wp--preset--color--umd-ivory);
	text-decoration: none;
	border-radius: 0 0 6px 0;
}

.umd-skip-link:focus {
	left: 0;
}

/* Visible focus state for every interactive element -- never rely on
   the browser default alone, but never remove it either. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item a:focus-visible {
	outline: 3px solid var(--wp--preset--color--umd-teal);
	outline-offset: 2px;
}

/* Mobile navigation overlay: ensure it sits above everything and the
   close/open toggle has an obvious focus target. */
.wp-block-navigation__responsive-container.is-menu-open {
	z-index: 100001;
}

/* Sticky site header. Static solid background -- no scroll-triggered JS
   in this build, so no dynamic "shrink on scroll" effect; a permanent
   subtle shadow gives the same visual separation from page content.
   Targets .umd-header directly rather than header.wp-block-template-part:
   every interior template renders the header part with {"tagName":"div"}
   (avoiding a duplicate banner landmark around the plugin's own
   <header role="banner">), which meant the old selector only ever matched
   on front-page.html/index.html -- the header was never actually sticky on
   /th/, /en/, or any interior page. */
.umd-header {
	position: sticky;
	top: 0;
	z-index: 500;
	padding-top: env(safe-area-inset-top, 0px);
	box-shadow: var(--wp--custom--shadow--level1);
}

/* Minimum 44px touch targets for every header control, per Phase 1
   accessibility requirements. */
.umd-main-nav .wp-block-navigation-item > a,
.umd-lang-toggle,
.umd-login-inert,
.umd-site-header .wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

/* Nav hover/focus indicator -- restrained underline, no colour-only cue */
.umd-main-nav .wp-block-navigation-item > a:hover,
.umd-main-nav .wp-block-navigation-item > a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Inert placeholders (Login, TH|EN, "coming soon" labels) are
   intentionally non-interactive -- make that visually unambiguous. */
.umd-login-inert {
	cursor: default;
	opacity: 0.7;
}

/* -------------------------------------------------------------------
   Homepage hero -- premium dark banner.
   MAYA OS was the design reference (dark navy, gold accent, geometric
   clarity), not a template to copy. Section is deliberately its own
   full-bleed dark band rather than continuing the page's ivory
   background, so it reads as an intentional banner rather than the
   top of a long document.
   ------------------------------------------------------------------- */
.umd-hero2 {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--umd-navy);
	color: var(--wp--preset--color--umd-ivory);
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50);
}

/* Decorative atmosphere only -- two soft radial glows plus a faint diagonal
   line texture. Pure CSS (no image request); ::before/::after keep it out
   of the DOM entirely, so it needs no aria-hidden and never affects tab
   order or screen-reader output. Restrained on purpose: this is atmosphere,
   not a graphic the eye is meant to land on. */
.umd-hero2::before,
.umd-hero2::after {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

.umd-hero2::before {
	top: -20%;
	right: -10%;
	width: 60%;
	max-width: 640px;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(201, 164, 79, 0.16) 0%, rgba(201, 164, 79, 0) 70%);
}

.umd-hero2::after {
	bottom: -30%;
	left: -10%;
	width: 50%;
	max-width: 520px;
	aspect-ratio: 1;
	background:
		radial-gradient(circle, rgba(8, 127, 122, 0.14) 0%, rgba(8, 127, 122, 0) 70%),
		repeating-linear-gradient(120deg, rgba(247, 243, 234, 0.035) 0 1px, transparent 1px 64px);
}

.umd-hero2__inner {
	position: relative;
	z-index: 1;
	max-width: var(--wp--style--global--content-size);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "content" "visual";
	gap: var(--wp--preset--spacing--70);
}

.umd-hero2__content { grid-area: content; }
.umd-hero2__visual  { grid-area: visual; }

@media (min-width: 782px) {
	.umd-hero2__inner {
		grid-template-columns: 6fr 5fr;
		grid-template-areas: "content visual";
		align-items: center;
		column-gap: var(--wp--preset--spacing--80);
	}
}

.umd-hero2__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umd-gold);
}

/* Bigger and bolder than the shared xx-large preset on purpose -- this is
   the one headline the whole page is built to deliver in one glance. */
.umd-hero2__headline {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--umd-ivory);
}

/* Second headline line, made more prominent than the first using the same
   gold token the eyebrow above it already uses -- no new colour introduced. */
.umd-hero2__headline-em {
	color: var(--wp--preset--color--umd-gold);
}

.umd-hero2__lead {
	max-width: 46ch;
	margin: 0 0 var(--wp--preset--spacing--60);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.7;
	color: rgba(247, 243, 234, 0.82);
}

/* Authority statement -- who Chanikan is, stated directly as part of the
   expert-led positioning. Sits between the lead and the CTAs. */
.umd-hero2__authority {
	margin: 0 0 var(--wp--preset--spacing--60);
	padding-left: var(--wp--preset--spacing--30);
	border-left: 2px solid var(--wp--preset--color--umd-gold);
}

.umd-hero2__authority-name {
	margin: 0 0 4px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--umd-ivory);
}

.umd-hero2__authority-exp {
	margin: 0;
	font-size: 0.875rem;
	color: rgba(247, 243, 234, 0.72);
}

.umd-hero2__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Dark-background button variants. Scoped to .umd-hero2 so the sitewide
   default button colours (navy on ivory) are untouched everywhere else --
   a navy button on a navy hero would vanish. */
.umd-hero2 .umd-btn--primary {
	background: var(--wp--preset--color--umd-gold);
	color: var(--wp--preset--color--umd-navy);
}

.umd-hero2 .umd-btn--primary:hover {
	background: var(--wp--preset--color--umd-white);
}

/* Reusable on any dark section, not just the hero -- a ghost button for
   a secondary action on a navy/charcoal background. */
.umd-btn--outline-light {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--umd-tap, 44px);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border-radius: 6px;
	border: 2px solid rgba(247, 243, 234, 0.55);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--umd-ivory);
	text-decoration: none;
	transition: border-color 150ms ease, background-color 150ms ease;
}

.umd-btn--outline-light:hover {
	border-color: var(--wp--preset--color--umd-ivory);
	background: rgba(247, 243, 234, 0.08);
}

.umd-hero2__link {
	margin: 0;
	font-size: 0.9375rem;
}

.umd-hero2__link a {
	color: var(--wp--preset--color--umd-ivory);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.umd-hero2__link a:hover {
	color: var(--wp--preset--color--umd-gold);
}

/* Portrait frame.
   The earlier asset was a transparent-background cutout, so the frame was
   built as a padded gradient card with the subject floating inside it --
   the panel was what gave the composition depth, since the cutout itself
   had none. The current photo already carries its own premium office
   background (matching the hero's mood on its own), so that padded
   "floating cutout" treatment would now just inset a full photo inside a
   picture-frame-in-a-frame. The frame is a tight, bordered photo panel
   instead: zero internal padding, image fills it edge to edge, the border
   and shadow alone do the "designed, not bare" work.

   aspect-ratio is set to the source's exact ratio (1122:1402, confirmed at
   import), so object-fit: cover has nothing to crop under normal layout --
   it only guards against a container mismatch, and object-position keeps
   any such mismatch cropping from the bottom margin rather than the face,
   hands, watch, or notebook. */
.umd-hero2__frame {
	position: relative;
	max-width: 420px;
	aspect-ratio: 1122 / 1402;
	margin: 0 auto;
	overflow: hidden;
	background: linear-gradient(165deg, rgba(201, 164, 79, 0.14), rgba(8, 127, 122, 0.08));
	border: 1px solid rgba(201, 164, 79, 0.35);
	border-radius: var(--wp--custom--radius--lg, 16px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.umd-hero2__portrait {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Condensed credibility line, replacing the old two-paragraph proof block.
   Floats over the frame's bottom edge as a small chip -- a designed detail
   rather than another line of body copy. */
.umd-hero2__chip {
	position: absolute;
	left: 50%;
	bottom: var(--wp--preset--spacing--30);
	transform: translateX(-50%);
	margin: 0;
	/* Horizontal padding trimmed from spacing-40 to spacing-30 -- the chip
	   text grew by a "Chanikan | " prefix and needed the extra room. Vertical
	   padding, radius, colours, shadow, and position are unchanged. */
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	max-width: calc(100% - var(--wp--preset--spacing--50));
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--umd-navy);
	background: var(--wp--preset--color--umd-ivory);
	border-radius: 999px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Quick-entry cards: three small clickable panels standing in for a wall of
   proof text -- each one answers "what do I click next" directly. */
.umd-hero2__quickcards {
	position: relative;
	z-index: 1;
	max-width: var(--wp--style--global--content-size);
	margin: var(--wp--preset--spacing--80) auto 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 600px) {
	.umd-hero2__quickcards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.umd-hero2__quickcard {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background: rgba(247, 243, 234, 0.04);
	border: 1px solid rgba(247, 243, 234, 0.16);
	border-radius: var(--wp--custom--radius--md, 10px);
	text-decoration: none;
	transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.umd-hero2__quickcard:hover,
.umd-hero2__quickcard:focus-visible {
	border-color: var(--wp--preset--color--umd-gold);
	background: rgba(247, 243, 234, 0.07);
	transform: translateY(-2px);
}

.umd-hero2__quickcard-icon {
	width: 26px;
	height: 26px;
	color: var(--wp--preset--color--umd-gold);
}

.umd-hero2__quickcard-title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wp--preset--color--umd-ivory);
}

.umd-hero2__quickcard-sub {
	font-size: 0.875rem;
	color: rgba(247, 243, 234, 0.72);
}

@media (max-width: 599.98px) {
	.umd-hero2 {
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
	}

	.umd-hero2__ctas {
		flex-direction: column;
		align-items: stretch;
	}

	.umd-hero2__ctas .umd-btn {
		width: 100%;
	}

	.umd-hero2__frame {
		max-width: 320px;
	}

	.umd-hero2__quickcards {
		margin-top: var(--wp--preset--spacing--60);
	}
}

@media (prefers-reduced-motion: reduce) {
	.umd-hero2__quickcard {
		transition: none;
	}
}

/* Capability-card grid: 1 col mobile, 2 col tablet, 4 col desktop --
   a three-tier layout core Columns can't express on its own. */
.umd-capability-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 600px) {
	.umd-capability-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.umd-capability-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.umd-capability-card {
	display: block;
	border: 1px solid var(--wp--preset--color--umd-charcoal);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--40);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.umd-capability-card:hover,
.umd-capability-card:focus-visible {
	box-shadow: var(--wp--custom--shadow--level2);
	border-color: var(--wp--preset--color--umd-teal);
}

/* Framework steps: vertical stack with a top connector line on mobile,
   horizontal row with a left connector line from 1024px up. */
.umd-framework-steps {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
}

.umd-framework-step {
	flex: 1;
}

/* Step-number badge: gold-on-navy chip, not gold text directly on the
   page background. Gold text/borders on the light Ivory background
   fail WCAG contrast (measured ~2.1:1) -- this is the compliant way
   to still use gold as the "limited premium accent" the brand calls for. */
.umd-step-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25em;
	height: 2.25em;
	border-radius: 9999px;
	background: var(--wp--preset--color--umd-navy);
	color: var(--wp--preset--color--umd-gold);
	font-weight: 700;
	font-size: 1.125rem;
	margin-bottom: var(--wp--preset--spacing--30);
}

@media (max-width: 1023.98px) {
	.umd-framework-step:not(:first-child) {
		border-top: 1px solid var(--wp--preset--color--umd-charcoal);
		padding-top: var(--wp--preset--spacing--50);
	}
}

@media (min-width: 1024px) {
	.umd-framework-steps {
		flex-direction: row;
	}
	.umd-framework-step:not(:first-child) {
		border-left: 1px solid var(--wp--preset--color--umd-charcoal);
		padding-left: var(--wp--preset--spacing--50);
	}
}

/* Visitor-path capability tags. Presentational chips, so the list
   markers are removed -- the tags stay a <ul> because they are a list
   of related items, which is what a screen reader should announce. */
.umd-path-tags {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.umd-path-tags li {
	border: 1px solid var(--wp--preset--color--umd-gold);
	border-radius: 9999px;
	padding: 0.35em 0.9em;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--umd-navy);
	background: var(--wp--preset--color--umd-white);
	line-height: 1.5;
}

/* English gloss sits beside the Thai tag rather than doubling the
   number of chips. */
.umd-tag-en {
	color: var(--wp--preset--color--umd-charcoal);
	opacity: 0.8;
}

.umd-tag-en::before {
	content: " · ";
}

/* ---------- FAQ accordion ---------- */

.umd-faq-list {
	margin-top: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--umd-charcoal);
}

.umd-faq-item {
	border-bottom: 1px solid var(--wp--preset--color--umd-charcoal);
}

/* The trigger is a real <button>, so Enter and Space toggling, focus
   order, and the accessible role all come from the platform -- no JS
   key handling needed for those. */
.umd-faq-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
	min-height: 44px;
	padding: var(--wp--preset--spacing--50) 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--wp--preset--color--umd-navy);
}

.umd-faq-q-th {
	display: block;
	font-weight: 700;
	line-height: 1.6;
}

.umd-faq-q-en {
	display: block;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--wp--preset--color--umd-charcoal);
	line-height: 1.6;
	margin-top: 0.25em;
}

/* Marker is a CSS-drawn chevron: rotation is decorative only. Open and
   closed state is conveyed by aria-expanded, never by the icon alone. */
.umd-faq-marker {
	flex: 0 0 auto;
	width: 0.6em;
	height: 0.6em;
	border-right: 2px solid var(--wp--preset--color--umd-teal);
	border-bottom: 2px solid var(--wp--preset--color--umd-teal);
	transform: rotate(45deg);
	transition: transform 0.18s ease;
}

.umd-faq-trigger[aria-expanded="true"] .umd-faq-marker {
	transform: rotate(-135deg);
}

/* Collapsed by default via CSS rather than the hidden attribute, so the
   closed state is correct on first paint with no flash of open content.
   The <noscript> override inside the FAQ pattern re-opens every panel
   when scripting is unavailable -- answers must never be unreachable
   just because JS did not run. */
.umd-faq-panel {
	display: none;
	padding: 0 0 var(--wp--preset--spacing--50);
}

.umd-faq-panel.is-open {
	display: block;
}

.umd-faq-a-th {
	line-height: 1.85;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.umd-faq-a-en {
	line-height: 1.7;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--umd-charcoal);
	margin: 0;
}

/* Reduced motion: strip transitions/animations for anyone who has asked
   the OS for it. Nothing in this build relies on motion to convey
   meaning, so this is a pure no-op removal, not a broken fallback. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}