/* ThaiThai Coffee — coffee.thaithai.shop
   Palette from Thai materials: teak, celadon glaze, rice paper, ink. */

:root {
	--tt-teak: #2a1a12;
	--tt-teak-deep: #1c110b;
	--tt-celadon: #8fae9a;
	--tt-celadon-ink: #4a6b58;
	--tt-paper: #eceee6;
	--tt-paper-deep: #dfe3d8;
	--tt-ivory: #f3ede0;
	--tt-ink: #1f1711;
	--tt-ink-soft: #5a4c42;

	--tt-serif: "Cormorant Garamond", "Times New Roman", serif;
	--tt-sans: "Noto Sans Thai", "Segoe UI", system-ui, sans-serif;

	--tt-gutter: clamp(20px, 5vw, 88px);
	--tt-measure: 34rem;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body,
body .elementor-widget-text-editor,
body .elementor-widget-heading .elementor-heading-title {
	font-family: var(--tt-sans);
	color: var(--tt-ink);
}
body { background: var(--tt-paper); font-size: 17px; line-height: 1.6; font-weight: 300; }

body .e-con { --padding-inline: var(--tt-gutter); }
body .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* ---------- type ---------- */
body .elementor-widget.tt-h1 .elementor-heading-title {
	font-family: var(--tt-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2.6rem, 6.2vw, 5.4rem);
	line-height: 0.98;
	letter-spacing: -0.01em;
	color: var(--tt-ivory);
	max-width: 11ch;
}
body .elementor-widget.tt-h1-th .elementor-heading-title {
	font-family: var(--tt-sans);
	font-weight: 300;
	font-size: clamp(1.25rem, 2.4vw, 1.9rem);
	line-height: 1.5;
	color: var(--tt-celadon);
	margin-top: 1.1rem;
}
body .elementor-widget.tt-h2 .elementor-heading-title {
	font-family: var(--tt-serif);
	font-weight: 500;
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: var(--tt-ink);
}
body .elementor-widget.tt-h2-th .elementor-heading-title {
	font-family: var(--tt-sans);
	font-weight: 300;
	font-size: clamp(1.05rem, 1.8vw, 1.35rem);
	color: var(--tt-celadon-ink);
	margin-top: 0.5rem;
}
body .elementor-widget.tt-lede, body .elementor-widget.tt-lede p {
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	line-height: 1.65;
	color: var(--tt-ivory);
	max-width: var(--tt-measure);
	margin-top: 1.6rem;
}
body .elementor-widget.tt-body, body .elementor-widget.tt-body p { max-width: var(--tt-measure); margin-top: 1.4rem; color: var(--tt-ink-soft); }
body .elementor-widget.tt-body p:last-child, body .elementor-widget.tt-lede p:last-child { margin-bottom: 0; }

/* ---------- buttons ---------- */
.tt-btn { margin-top: 2.2rem; }
body .elementor-widget.tt-btn .elementor-button {
	font-family: var(--tt-sans);
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: 0.01em;
	background: var(--tt-celadon);
	color: var(--tt-teak-deep);
	border-radius: 999px;
	padding: 0.95rem 1.8rem;
	min-height: 44px;
	transition: background-color 180ms ease-out, transform 180ms ease-out;
}
body .elementor-widget.tt-btn .elementor-button:hover,
body .elementor-widget.tt-btn .elementor-button:focus-visible { background: #a6c2b0; color: var(--tt-teak-deep); }
body .elementor-widget.tt-btn .elementor-button:active { transform: translateY(1px); }
body .elementor-widget.tt-btn .elementor-button:focus-visible { outline: 3px solid var(--tt-teak); outline-offset: 3px; }
body .elementor-widget.tt-btn-dark .elementor-button { background: var(--tt-teak); color: var(--tt-ivory); }
body .elementor-widget.tt-btn-dark .elementor-button:hover,
body .elementor-widget.tt-btn-dark .elementor-button:focus-visible { background: var(--tt-teak-deep); color: var(--tt-ivory); }

/* ---------- images ---------- */
.tt-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-img, .tt-img .elementor-widget-container { height: 100%; }
.elementor-widget.tt-img { display: block; }

/* ---------- nav ---------- */
.tt-nav.e-con { background: var(--tt-teak); --padding-block-start: 18px; --padding-block-end: 18px; --gap: 16px; }
.tt-nav .tt-brand { margin: 0; }
.tt-nav .tt-brand a {
	font-family: var(--tt-serif);
	font-size: 1.45rem;
	font-weight: 500;
	color: var(--tt-ivory);
	text-decoration: none;
	letter-spacing: 0.01em;
}
.tt-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.6rem; }
.tt-links a {
	color: var(--tt-ivory);
	text-decoration: none;
	font-size: 0.98rem;
	font-weight: 400;
	padding: 10px 2px;
	display: inline-block;
	border-bottom: 1px solid transparent;
	transition: border-color 160ms ease-out;
}
.tt-links a:hover, .tt-links a:focus-visible { border-bottom-color: var(--tt-celadon); outline: none; }
.tt-nav-brand, .tt-nav-links { width: auto; }

/* ---------- hero ---------- */
.tt-hero.e-con {
	background: var(--tt-teak);
	--padding-block-start: 0;
	--padding-block-end: 0;
	--padding-inline: 0;
	--gap: 0;
	min-height: min(88vh, 860px);
}
.tt-hero-text.e-con {
	--padding-inline: var(--tt-gutter);
	--padding-block-start: clamp(56px, 9vh, 120px);
	--padding-block-end: clamp(56px, 9vh, 120px);
	justify-content: center;
}
.tt-hero-image.e-con { --padding-inline: 0; --padding-block-start: 0; --padding-block-end: 0; }
.tt-hero-image .tt-img img { min-height: 420px; }

/* single page-load reveal — hero only */
.tt-hero-text > .elementor-element { animation: tt-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.tt-hero-text > .elementor-element:nth-child(2) { animation-delay: 90ms; }
.tt-hero-text > .elementor-element:nth-child(3) { animation-delay: 180ms; }
.tt-hero-text > .elementor-element:nth-child(4) { animation-delay: 270ms; }
@keyframes tt-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tt-hero-text > .elementor-element { animation: none; } }

/* ---------- origin ---------- */
.tt-origin.e-con {
	--padding-block-start: clamp(64px, 10vh, 128px);
	--padding-block-end: clamp(64px, 10vh, 128px);
	--gap: clamp(28px, 5vw, 72px);
}
.tt-origin-image.e-con, .tt-origin-text.e-con { --padding-inline: 0; --padding-block-start: 0; --padding-block-end: 0; }
.tt-origin-image .tt-img img { aspect-ratio: 4 / 5; }

/* spec list: real information, so it gets real structure */
.tt-spec { margin: 2rem 0 0; padding: 0; max-width: var(--tt-measure); border-top: 1px solid var(--tt-teak); }
.tt-spec > div {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--tt-paper-deep);
}
.tt-spec dt { font-weight: 500; color: var(--tt-ink); margin: 0; }
.tt-spec dd { margin: 0; color: var(--tt-ink-soft); }
.tt-spec dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--tt-celadon); text-underline-offset: 3px; }

/* ---------- menu ---------- */
.tt-menu.e-con {
	background: var(--tt-ivory);
	--padding-block-start: clamp(64px, 10vh, 128px);
	--padding-block-end: 0;
	--gap: 0;
}
.tt-menu-head.e-con { --padding-inline: 0; --padding-block-start: 0; --padding-block-end: 0; }
.tt-menu-cols.e-con {
	--padding-inline: 0;
	--padding-block-start: clamp(32px, 5vh, 56px);
	--padding-block-end: clamp(56px, 8vh, 96px);
	--gap: clamp(28px, 4vw, 64px);
}
.tt-menu-col.e-con { --padding-inline: 0; --padding-block-start: 0; --padding-block-end: 0; }
.tt-menu-group {
	font-family: var(--tt-serif);
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.1;
	margin: 0 0 0.9rem;
	color: var(--tt-ink);
}
.tt-menu-group span { font-family: var(--tt-sans); font-weight: 300; font-size: 0.95rem; color: var(--tt-celadon-ink); margin-left: 0.5rem; }
.tt-ledger { list-style: none; margin: 0; padding: 0; }
.tt-ledger li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.5rem 0; }
.tt-ledger .tt-item { color: var(--tt-ink); font-weight: 400; }
.tt-ledger .tt-item em { font-style: normal; font-weight: 300; color: var(--tt-celadon-ink); margin-left: 0.3rem; }
.tt-ledger .tt-dots { flex: 1; border-bottom: 1px dotted #b7ad9c; transform: translateY(-0.35em); min-width: 1.5rem; }
.tt-ledger .tt-price { font-family: var(--tt-serif); font-size: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--tt-ink); }
.tt-ledger .tt-price::before { content: "฿"; font-family: var(--tt-sans); font-weight: 300; font-size: 0.85rem; margin-right: 0.15rem; color: var(--tt-ink-soft); }
.tt-menu-photo.e-con { --padding-inline: 0; --padding-block-start: 0; --padding-block-end: 0; }
.tt-menu-photo.e-con { margin-inline: calc(-1 * var(--tt-gutter)); width: auto; }
.tt-menu-photo .tt-img img { aspect-ratio: 21 / 9; max-height: 520px; object-position: 50% 25%; }

/* ---------- visit ---------- */
.tt-visit.e-con {
	--padding-block-start: clamp(64px, 10vh, 128px);
	--padding-block-end: clamp(64px, 10vh, 128px);
	--gap: clamp(28px, 5vw, 72px);
}
.tt-visit-text.e-con, .tt-visit-image.e-con { --padding-inline: 0; --padding-block-start: 0; --padding-block-end: 0; }
.tt-visit-image .tt-img img { aspect-ratio: 4 / 3; }
.tt-spec-visit { border-top-color: var(--tt-celadon); }

/* ---------- footer ---------- */
.tt-footer.e-con { background: var(--tt-teak-deep); --padding-block-start: 48px; --padding-block-end: 48px; }
body .elementor-widget.tt-footer-text, body .elementor-widget.tt-footer-text p { color: var(--tt-ivory); }
.tt-footer .tt-brand { font-family: var(--tt-serif); font-size: 1.5rem; font-weight: 500; margin: 0 0 0.4rem; }
.tt-footer p { margin: 0 0 0.25rem; font-weight: 300; }
.tt-footer .tt-small { color: var(--tt-celadon); font-size: 0.9rem; margin-top: 0.6rem; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
	.tt-hero.e-con, .tt-origin.e-con, .tt-visit.e-con { --flex-direction: column; }
	.tt-hero > .e-con, .tt-origin > .e-con, .tt-visit > .e-con { --width: 100%; }
	.tt-hero.e-con { min-height: 0; }
	.tt-hero-text.e-con { --padding-block-start: 48px; --padding-block-end: 48px; }
	.tt-hero-image .tt-img img { min-height: 0; aspect-ratio: 16 / 10; }
	.tt-origin-image.e-con { order: 2; }
	.tt-origin-image .tt-img img { aspect-ratio: 16 / 10; }
	.tt-menu-cols.e-con { --flex-direction: column; }
	.tt-menu-cols > .e-con { --width: 100%; }
}
@media (max-width: 640px) {
	body { font-size: 16px; }
	.tt-links { gap: 1rem; }
	.tt-spec > div { grid-template-columns: 6rem 1fr; }
	.tt-menu-photo .tt-img img { aspect-ratio: 4 / 3; }
}