/*
Theme Name: Stallion
Theme URI: https://www.stallion-th.com
Author: Stallion Co., Ltd.
Author URI: https://www.stallion-th.com
Description: FSE block theme for Stallion Co. (บริษัท สตัลเลี่ยน จำกัด) — home & brand hub for TUGU and Ergonoz. Local-first, deployed to Z.com.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 0.1.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stallion
Tags: block-theme, full-site-editing, business, one-column, custom-colors, wide-blocks
*/

/* ============================================================
   Text rendering — grayscale antialiasing makes text crisper and
   a touch lighter on the dark background (default subpixel smoothing
   makes light-on-dark text look heavier / fuzzier).
   ============================================================ */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ============================================================
   Responsive — mobile refinements. The block theme is fluid by
   default (columns stack, nav collapses, fonts clamp); this just
   tightens the large desktop spacing so phones aren't cramped.
   ============================================================ */

/* ============================================================
   Stitch design-system utilities — shared pieces of the Stitch
   layouts (icons, offset image frames, feature lists, caps text
   links, hero scroll hint, footer social circles).
   ============================================================ */
.material-symbols-outlined {
	font-size: 30px;
	color: var(--wp--preset--color--muted);
	line-height: 1;
}

/* offset border frame floating behind large images */
.stallion-frame { position: relative; }
.stallion-frame img { position: relative; z-index: 1; }
.stallion-frame::after {
	content: "";
	position: absolute;
	top: 1.5rem; left: -1.5rem; right: 1.5rem; bottom: -1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	z-index: 0;
}

/* vertical "SCROLL TO EXPLORE" hint on the home hero (desktop only).
   ::after on the cover itself — the cover's inner container shrink-wraps
   when a custom content position is set, so a child paragraph can't
   anchor to the cover's right edge. */
@media (min-width: 1024px) {
	body.home main .entry-content > .wp-block-cover.alignfull:first-child::after {
		content: "SCROLL TO EXPLORE";
		position: absolute;
		right: 2.2rem; bottom: 5rem;
		writing-mode: vertical-rl;
		letter-spacing: 0.35em;
		font-size: 0.68rem;
		font-weight: 600;
		color: rgba(255, 255, 255, 0.55);
		z-index: 3;
	}
}

/* bordered feature list (brand feature rows) */
ul.stallion-feature-list {
	list-style: none;
	padding-left: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}
ul.stallion-feature-list li {
	padding: 0.3rem 0 0.3rem 1.5rem;
	color: var(--wp--preset--color--muted);
}

/* heading links (CTA cards, job rows) — no underline per design */
h1 a, h2 a, h3 a { text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover { text-decoration: underline; }

/* small-caps arrow text link */
p.stallion-textlink a {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}
p.stallion-textlink a:hover { text-decoration: underline; }

/* icon inside a tinted circle (Vision / Mission cards) */
.stallion-icon-circle {
	display: inline-flex;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: rgba(188, 32, 51, 0.14);
	align-items: center; justify-content: center;
}
.stallion-icon-circle .material-symbols-outlined {
	color: var(--wp--preset--color--accent);
	font-size: 24px;
}

/* vertical timeline (About — Our Journey) */
.stallion-timeline > .wp-block-group {
	position: relative;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
	padding-left: 2.5rem;
	padding-bottom: 3rem;
}
.stallion-timeline > .wp-block-group:last-child { padding-bottom: 0.5rem; }
.stallion-timeline > .wp-block-group::before {
	content: "";
	position: absolute;
	left: -8px; top: 4px;
	width: 14px; height: 14px;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
}

/* brand logo overlay on brand imagery — centered, translucent scrim */
.stallion-brandimg { position: relative; display: block; margin: 0; }
.stallion-brandimg > img.photo,
.stallion-brandimg > video.photo { width: 100%; height: auto; display: block; border-radius: 8px; }
.stallion-brandimg.flush > img.photo,
.stallion-brandimg.flush > video.photo { height: 100%; min-height: 380px; object-fit: cover; border-radius: 0; }
.stallion-brandimg::after {
	content: "";
	position: absolute; inset: 0;
	background: rgba(12, 13, 14, 0.45);
	border-radius: 8px;
	z-index: 1;
}
.stallion-brandimg.flush::after { border-radius: 0; }
.stallion-brandimg .brand-logo {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: auto; max-width: min(210px, 55%); max-height: 70%;
	filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55));
	z-index: 2;
	pointer-events: none; /* never block links/CTAs under the overlay */
}

/* creator showcase gallery strip */
.stallion-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.9rem; }
@media (max-width: 981px) { .stallion-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .stallion-gallery { grid-template-columns: repeat(2, 1fr); } }
.stallion-gallery img { width: 100%; height: auto; border-radius: 8px; display: block; }

/* pill tag row (Our Brands feature cards) */
.stallion-pills span {
	display: inline-block;
	padding: 0.45rem 1.1rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface-2);
	border: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.8rem;
	color: var(--wp--preset--color--contrast);
	margin: 0 0.5rem 0.6rem 0;
}

/* neutral (non-red) icon circle */
.stallion-icon-circle.neutral { background: var(--wp--preset--color--surface-2); }
.stallion-icon-circle.neutral .material-symbols-outlined { color: var(--wp--preset--color--contrast); }

/* full-width grayscale photo band */
.stallion-photo-band { margin: 0; }
.stallion-photo-band img { width: 100%; height: 420px; object-fit: cover; filter: grayscale(1); display: block; }
.stallion-photo-band video { width: 100%; height: 420px; object-fit: cover; display: block; }

/* department tiles (Careers) */
.stallion-departments .dept {
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 8px;
	background: var(--wp--preset--color--surface-1);
	min-height: 190px;
	display: flex; align-items: center; justify-content: center;
	font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em;
	color: var(--wp--preset--color--contrast);
	text-align: center;
	padding: 1rem;
}

/* active state for pill filters (News) */
.stallion-pills span.active {
	background: var(--wp--preset--color--accent);
	border-color: transparent;
	color: #fff;
}

/* clickable, filterable news grid */
.stallion-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 981px) { .stallion-news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .stallion-news-grid { grid-template-columns: 1fr; } }
a.stallion-news-card {
	display: block;
	background: var(--wp--preset--color--surface-1);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease;
}
a.stallion-news-card:hover { border-color: var(--wp--preset--color--accent); }
a.stallion-news-card img { width: 100%; height: auto; display: block; }
a.stallion-news-card .inner { display: block; padding: 1.5rem 1.75rem 1.75rem; }
a.stallion-news-card .cat { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--wp--preset--color--accent); margin: 0; }
a.stallion-news-card h3 { font-size: 1.25rem; margin: 0.5rem 0 0; }
a.stallion-news-card p.desc { color: var(--wp--preset--color--muted); font-size: 0.9rem; margin: 0.6rem 0 0; }
a.stallion-news-card .read { display: inline-block; margin-top: 0.9rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; color: var(--wp--preset--color--accent); text-transform: uppercase; }
.stallion-pills.filter span { cursor: pointer; }

/* form styling (Partner inquiry / Contact / Newsletter) */
.stallion-form label {
	display: block;
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 1.6rem 0 0.55rem;
}
.stallion-form .row2 > div > label:first-child { margin-top: 1.6rem; }
.stallion-form input,
.stallion-form select,
.stallion-form textarea {
	box-sizing: border-box;
	width: 100%;
	background: #0B0C0D;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	color: var(--wp--preset--color--contrast);
	padding: 0.8rem 1rem;
	font-family: inherit;
	font-size: 0.95rem;
}
.stallion-form input:focus,
.stallion-form select:focus,
.stallion-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}
.stallion-form button,
.stallion-form input[type="submit"] {
	margin-top: 1.5rem;
	width: 100%;
	background: var(--wp--preset--color--accent);
	color: #fff;
	border: none; border-radius: 6px;
	padding: 0.95rem 1.5rem;
	font-weight: 700; font-size: 0.9rem; letter-spacing: 0.06em;
	font-family: inherit;
	cursor: pointer;
}
.stallion-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.75rem; }
@media (max-width: 781px) { .stallion-form .row2 { grid-template-columns: 1fr; } }

/* stat band (Home) */
.stallion-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; text-align: center; }
@media (max-width: 781px) { .stallion-stats { grid-template-columns: repeat(2, 1fr); } }
.stallion-stats .num {
	font-family: var(--wp--preset--font-family--pattanakarn, inherit);
	font-style: italic;
	font-size: clamp(2.2rem, 4vw, 3.2rem);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	line-height: 1.1;
}
.stallion-stats .lbl { color: var(--wp--preset--color--muted); font-size: 0.9rem; margin-top: 0.4rem; }

/* numbered process steps (What We Do) */
.stallion-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
@media (max-width: 981px) { .stallion-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .stallion-steps { grid-template-columns: 1fr; } }
.stallion-steps .step {
	background: var(--wp--preset--color--surface-1);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 8px;
	padding: 1.4rem 1.3rem 1.5rem;
}
.stallion-steps .n { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; color: var(--wp--preset--color--accent); }
.stallion-steps h3 { font-size: 1.05rem; margin: 0.5rem 0 0.4rem; }
.stallion-steps p { color: var(--wp--preset--color--muted); font-size: 0.85rem; margin: 0; }

/* mini feature list inside capability cards */
ul.stallion-mini-list { list-style: none; padding-left: 0; margin: 0.9rem 0 0; }
ul.stallion-mini-list li {
	color: var(--wp--preset--color--muted);
	font-size: 0.88rem;
	padding: 0.22rem 0 0.22rem 1.1rem;
	position: relative;
}
ul.stallion-mini-list li::before {
	content: "";
	position: absolute; left: 0; top: 0.72em;
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--wp--preset--color--accent);
}
.stallion-form.inline { display: flex; gap: 1rem; max-width: 560px; margin: 0 auto; }
.stallion-form.inline button { margin-top: 0; width: auto; white-space: nowrap; }
@media (max-width: 480px) {
	.stallion-form.inline { flex-direction: column; }
	.stallion-form.inline button { width: 100%; }
}

/* dealer / partner logo strip (white tiles on dark) */
.stallion-partner-logos {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem;
	justify-content: center;
}
.stallion-partner-logos img {
	width: 180px;
	height: auto;
	border-radius: 8px;
	display: block;
}
@media (max-width: 781px) {
	.stallion-partner-logos { gap: 0.75rem; }
	.stallion-partner-logos img { width: 140px; }
}

/* footer link columns — plain, muted, no bullets (per design) */
footer .wp-block-list { list-style: none; padding-left: 0; }
footer .wp-block-list a { color: var(--wp--preset--color--muted); text-decoration: none; }
footer .wp-block-list a:hover { color: var(--wp--preset--color--contrast); }

/* footer social circles */
.stallion-social a {
	display: inline-flex;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.15);
	align-items: center; justify-content: center;
	font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
	text-decoration: none;
}
.stallion-social a:hover { border-color: var(--wp--preset--color--accent); }

/* ============================================================
   Fixed-size covers — hero video + page banners are alignfull
   covers whose size tracked the viewport (100vw wide, vh-based
   height). On big screens they ballooned out of proportion with
   the 1240px content. Cap their height always, and above the
   1440px wide-size cap their width and center them as a rounded
   "card". !important is required to beat the covers' inline
   min-height styles.
   ============================================================ */
@media (min-width: 782px) {
	body.home .wp-block-cover.alignfull { min-height: min(92vh, 780px) !important; }
	body:not(.home) .wp-block-cover.alignfull { min-height: min(56vh, 480px) !important; }
}
@media (min-width: 1441px) {
	.wp-block-cover.alignfull {
		max-width: 1440px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		border-radius: 14px;
		overflow: hidden;
	}
}

@media (max-width: 781px) {
	:root {
		--wp--preset--spacing--60: 1.25rem !important; /* section L/R + hero card padding */
		--wp--preset--spacing--70: 2rem !important;    /* column / block gaps */
		--wp--preset--spacing--80: 3rem !important;    /* section top/bottom */
	}
	/* hero: a touch shorter on phones; card breathes to near full width.
	   Hard px caps too — the covers carry inline vh min-heights, and
	   uncapped vh explodes in tall viewports (svh dodges URL-bar jumps). */
	body.home .wp-block-cover.alignfull { min-height: min(88svh, 640px) !important; }
	body:not(.home) .wp-block-cover.alignfull { min-height: min(52svh, 400px) !important; }
	.wp-block-cover .wp-block-cover__inner-container > .wp-block-group { max-width: 100%; }

	/* iOS Safari can render the cover's background <video> in-flow, which
	   pushes the text card BELOW the video instead of overlaying it.
	   Force the video to be a true absolute, cover-filling background. */
	.wp-block-cover__video-background {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		object-fit: cover !important;
		z-index: 0 !important;
	}
	.wp-block-cover > .wp-block-cover__background { z-index: 1 !important; }
	.wp-block-cover__inner-container { position: relative !important; z-index: 2 !important; }
}

@media (max-width: 480px) {
	:root {
		--wp--preset--spacing--60: 1rem !important;
		--wp--preset--spacing--80: 2.5rem !important;
	}
	/* keep the display headline from overflowing very narrow screens */
	h1.has-display-font-size { font-size: clamp(1.9rem, 8vw, 2.4rem); }
}

/* phone: dept tiles were tall empty boxes; pills need real tap targets */
@media (max-width: 781px) {
	.stallion-departments .dept { min-height: 110px; }
	.stallion-pills span { padding: 0.6rem 1.2rem; }
	.stallion-stats { gap: 2rem 1.25rem; }
}

/* touch targets ≥44px: hamburger, language switcher, caps text links, socials */
.wp-block-navigation__responsive-container-open { padding: 10px; margin: -10px; }
.wp-block-polylang-language-switcher a { display: inline-block; padding: 12px 6px; }
p.stallion-textlink a { display: inline-block; padding: 12px 0; }
.stallion-social a { width: 44px; height: 44px; }

/* phone: brand-card video keeps its aspect instead of a hard center crop */
@media (max-width: 640px) {
	.stallion-brandimg.flush > video.photo { min-height: 0; aspect-ratio: 16 / 9; }
}

/* header language switcher (Polylang) — minimal TH | EN */
.wp-block-polylang-language-switcher {
	display: flex; align-items: center; gap: 0.35rem;
	list-style: none; margin: 0; padding: 0;
	font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em;
}
.wp-block-polylang-language-switcher li { margin: 0; padding: 0; }
.wp-block-polylang-language-switcher li + li::before {
	content: "|"; color: var(--wp--preset--color--muted);
	margin-right: 0.35rem; opacity: 0.5;
}
.wp-block-polylang-language-switcher a { color: var(--wp--preset--color--muted); text-decoration: none; }
.wp-block-polylang-language-switcher li.current-lang a { color: var(--wp--preset--color--contrast); }
.wp-block-polylang-language-switcher a:hover { color: var(--wp--preset--color--accent); }

/* buttons: Kanit — Pattanakarn's loopless display style is for headlines,
   not UI controls (Thai labels like "ส่ง Resume..." were hard to read) */
.wp-element-button, .wp-block-button__link {
	font-family: "Kanit", "Noto Sans Thai", sans-serif;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.02em;
}

/* side-by-side brand photo pair (About — Our Foundation) */
.stallion-duo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }

/* a11y: visible keyboard focus everywhere interactive */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* motion sensitivity: stop ambient videos when the user asks for less motion */
@media (prefers-reduced-motion: reduce) {
	video[autoplay] { display: none; }
}

/* phone: photo/video bands shorter; offset frame stays inside the viewport */
@media (max-width: 480px) {
	.stallion-photo-band img, .stallion-photo-band video { height: clamp(200px, 45vw, 300px); }
	.stallion-frame::after { left: -0.5rem; right: 0.5rem; }
}

/* filter pills as real buttons (keyboard accessible) */
.stallion-pills.filter button {
	appearance: none; cursor: pointer; font-family: inherit;
	display: inline-block; padding: 0.45rem 1.1rem; border-radius: 999px;
	background: var(--wp--preset--color--surface-2);
	border: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.8rem; color: var(--wp--preset--color--contrast);
	margin: 0 0.5rem 0.6rem 0;
}
.stallion-pills.filter button.active { background: var(--wp--preset--color--accent); border-color: transparent; color: #fff; }
@media (max-width: 781px) { .stallion-pills.filter button { padding: 0.6rem 1.2rem; } }

/* Contact Form 7 on the dark theme */
.stallion-form .wpcf7-spinner { margin: 0 auto; display: block; }
.stallion-form .wpcf7-not-valid-tip { color: #f2b3ba; font-size: 0.8rem; margin-top: 0.35rem; display: block; }
.stallion-form .wpcf7-response-output {
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 6px; padding: 0.8rem 1rem !important;
	margin: 1.25rem 0 0 !important; font-size: 0.9rem;
}
.stallion-form form.sent .wpcf7-response-output { border-color: #3f9e5f !important; }
.stallion-form form.invalid .wpcf7-response-output,
.stallion-form form.failed .wpcf7-response-output { border-color: var(--wp--preset--color--accent) !important; }
.stallion-form.inline form,
.stallion-form.inline form > p { display: flex; gap: 1rem; align-items: flex-start; margin: 0; }
.stallion-form.inline .wpcf7-form-control-wrap { flex: 1; }
.stallion-form.inline input[type="submit"] { margin-top: 0; width: auto; white-space: nowrap; }
@media (max-width: 480px) {
	.stallion-form.inline form, .stallion-form.inline form > p { flex-direction: column; }
	.stallion-form.inline input[type="submit"] { width: 100%; }
}

/* slim brand-color tick above brand names */
hr.brand-tick { width: 48px; height: 5px; border: none; margin: 0; border-radius: 2px; opacity: 1; }