/**
 * nak-craft.css — finishing layer (1.17.0)
 *
 * Sharper, cleaner and more hand-made: the same palette, type and ornament,
 * with less "rendered" gloss.
 *
 *   - Shapes: one tight corner radius per culture (Khmer squared like cut
 *     sandstone, Fusion soft, Indian a little rounder) shared by every card.
 *   - Depth: hairline borders and a short, low shadow instead of large blurry
 *     drop shadows; hover lifts are 2–3px, not floating.
 *   - Surfaces: card faces are flat paper tones with a faint grain, not
 *     glossy gradients.
 *   - Icons: Ganesha / Apsara / Atom on dish placeholders and the story band.
 *
 * Loads last (after nak-flow and, where present, nak-order), so it only
 * retunes tokens and a few surfaces; nothing here changes layout or markup.
 *
 * @package NamasteAngkorTheme
 */

/* =====================================================================
 * Tokens
 * ================================================================== */
:root {
	--craft-hair: color-mix(in srgb, var(--nak-ink, #241005) 12%, transparent);
	--craft-hair-strong: color-mix(in srgb, var(--nak-ink, #241005) 20%, transparent);
	--craft-shadow: 0 1px 0 rgba(36, 16, 5, .05), 0 8px 18px -16px rgba(36, 16, 5, .5);
	--craft-shadow-lift: 0 1px 0 rgba(36, 16, 5, .06), 0 14px 26px -18px rgba(36, 16, 5, .55);
	/* Paper grain: tiny fractal noise, multiplied in at low strength. */
	--craft-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .08 0 0 0 0 .03 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--craft-r: 8px;
}
html[data-style="fusion"] { --craft-r: 8px; }
html[data-style="indian"] { --craft-r: 12px; }
html[data-style="khmer"]  { --craft-r: 3px; }

/* Re-point the theme's shared tokens (same specificity as nak-culture,
   later in the cascade, so these win in every style). */
:root,
html[data-style="fusion"],
html[data-style="indian"],
html[data-style="khmer"] {
	--nak-radius: var(--craft-r);
	--nak-shadow: var(--craft-shadow);
	--nak-foh-r: var(--craft-r);
	--nak-foh-shadow: var(--craft-shadow);
	--nak-sf-radius: var(--craft-r);
	--nak-sf-shadow: var(--craft-shadow);
}
.nak-om {
	--om-r: var(--craft-r);
	--om-shadow: var(--craft-shadow-lift);
}

/* Softer, shorter hover lifts everywhere a card used to float. */
.nak-travel-card:hover,
.nak-feat-card:hover,
.nak-feat .nak-feat-card:hover,
.nak-menu-grid .nak-dish:hover,
.nak-experiences .nak-experience-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--craft-shadow-lift);
}

/* =====================================================================
 * Dish placeholders — culture icon on a framed paper plate
 * ================================================================== */
.nak-om-media { border-radius: max(2px, calc(var(--om-r, 8px) - 2px)); }
.nak-om-media--wide { border-radius: var(--om-r, 8px); }
/* Tripled class = (0,3,0): beats nak-order's ":not():not()" fusion fallback,
   which would otherwise keep the old glossy gradient on Fusion dishes. */
.nak-om-media--ph.nak-om-media--ph.nak-om-media--ph {
	background: var(--ph-bg) var(--craft-grain);
	color: var(--ph-ink);
}
.nak-om-ph--khmer  { --ph-bg: #ecdcbc; --ph-ink: #8a3d24; --ph-ring: #b98a3a; }
.nak-om-ph--indian { --ph-bg: #f6e3ba; --ph-ink: #a01b2e; --ph-ring: #d9982a; }
.nak-om-ph--fusion,
.nak-om-media--ph:not(.nak-om-ph--khmer):not(.nak-om-ph--indian) { --ph-bg: #f1dccd; --ph-ink: #7a1f2b; --ph-ring: #d77a3a; }
.nak-om-ph__frame {
	position: absolute;
	inset: 6px;
	border: 1px solid color-mix(in srgb, var(--ph-ring) 50%, transparent);
	border-radius: max(1px, calc(var(--om-r, 8px) - 6px));
	pointer-events: none;
}
.nak-om-ph__icon {
	position: relative;
	width: 54%;
	height: 54%;
	opacity: .88;
	transition: transform .35s ease;
}
.nak-om-media--wide .nak-om-ph__icon { width: 32%; height: 52%; }
.nak-om-sheet__media .nak-om-ph__icon { width: 26%; height: 50%; }
.nak-om-card:hover .nak-om-ph__icon,
.nak-om-feat:hover .nak-om-ph__icon { transform: scale(1.05); }
.nak-om-card { box-shadow: none; }
.nak-om-card:hover { border-color: var(--craft-hair-strong); transform: translateY(-1px); }

/* =====================================================================
 * Story band — icons over Khmer · centre · India
 * ================================================================== */
.nak-story__icon {
	display: block;
	width: 58px;
	height: 58px;
	margin: 0 auto .85rem;
	color: var(--nak-lotus);
}
.nak-story__pillar:first-child .nak-story__icon { color: var(--nak-saffron); }
.nak-story__icon--center { width: 40px; height: 40px; color: var(--nak-turmeric); opacity: .9; }

/* =====================================================================
 * Three kitchens — flat paper cards, a cut rule instead of a glow
 * ================================================================== */
.nak-kitchen--indian { --k-radius: 12px; }
.nak-kitchen--khmer  { --k-radius: 3px; }
.nak-kitchen--fusion { --k-radius: 8px; }
.nak-kitchen__link {
	overflow: hidden;
	background: var(--k-surface) var(--craft-grain);
	border: 1px solid color-mix(in srgb, var(--k-accent) 16%, transparent);
	box-shadow: var(--craft-shadow);
}
.nak-kitchen__link::after {
	left: 0; right: 0; top: 0; bottom: auto;
	height: 3px; border-radius: 0;
	transform: scaleX(0); transform-origin: left center;
}
.nak-kitchen__link:hover,
.nak-kitchen__link:focus-visible {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--k-gold) 70%, transparent);
	box-shadow: var(--craft-shadow-lift);
}
.nak-kitchen__medallion {
	background: var(--k-soft);
	border: 1px solid color-mix(in srgb, var(--k-gold) 60%, transparent);
	box-shadow: inset 0 0 0 5px var(--k-surface), inset 0 0 0 6px color-mix(in srgb, var(--k-gold) 35%, transparent);
}
.nak-kitchen__link:hover .nak-kitchen__medallion { transform: rotate(-3deg); }
.nak-kitchen.is-current .nak-kitchen__link {
	border: 1px solid color-mix(in srgb, var(--k-gold) 80%, transparent);
	background: var(--k-surface) var(--craft-grain);
}
.nak-kitchen.is-current .nak-kitchen__medallion {
	background: var(--k-accent);
	color: var(--k-gold);
	box-shadow: inset 0 0 0 5px var(--k-accent), inset 0 0 0 6px color-mix(in srgb, var(--k-gold) 55%, transparent);
}
.nak-kitchen__swatches i { width: 14px; height: 14px; }

/* =====================================================================
 * Small fixes
 * ================================================================== */
/* Footer umbrella "Book Now" tag: keep it one line. */
.nak-tag--umbrella { white-space: nowrap; }

/* =====================================================================
 * 1.18.0 — Kitchen chips on the ordering menu (All · Indian · Khmer · Fusion)
 * Tiles, not pills: a kitchen is a bigger choice than a course, so it reads
 * one level above the category bar. Each lights in its own kitchen colour.
 * ================================================================== */
.nak-om-kitchens {
	display: flex;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: 2px 2px 4px;
	overflow-x: auto;
	scrollbar-width: none;
}
.nak-om-kitchens::-webkit-scrollbar { display: none; }
.nak-om-kchip {
	--kc: var(--nak-lotus, #7a1f2b);
	--kc-soft: color-mix(in srgb, var(--kc) 9%, var(--nak-white, #fffdf8));
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	min-height: 46px;
	padding: .45rem .8rem .45rem .6rem;
	border: 1px solid var(--craft-hair);
	border-radius: var(--craft-r);
	background: var(--nak-white, #fffdf8);
	color: var(--nak-ink, #241005);
	font: 700 .86rem/1.1 var(--nak-body, system-ui, sans-serif);
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.nak-om-kchip--all { padding-left: .9rem; }
.nak-om-kchip--indian { --kc: #a01b2e; }
.nak-om-kchip--khmer  { --kc: #8a3d24; }
.nak-om-kchip--fusion { --kc: #7a1f2b; }
.nak-om-kchip__icon { width: 26px; height: 26px; flex: 0 0 auto; color: var(--kc); transition: color .2s ease; }
.nak-om-kchip__count {
	min-width: 1.6em;
	padding: .15em .45em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--kc) 10%, transparent);
	color: var(--kc);
	font-size: .74rem;
	text-align: center;
}
.nak-om-kchip:hover { border-color: color-mix(in srgb, var(--kc) 45%, transparent); background: var(--kc-soft); transform: translateY(-1px); }
.nak-om-kchip:focus-visible { outline: 2px solid var(--kc); outline-offset: 2px; }
.nak-om-kchip[aria-pressed="true"] {
	background: var(--kc);
	border-color: var(--kc);
	color: #fffaf0;
}
.nak-om-kchip[aria-pressed="true"] .nak-om-kchip__icon { color: #f2c35c; }
.nak-om-kchip[aria-pressed="true"] .nak-om-kchip__count { background: rgba(255, 250, 240, .18); color: #fffaf0; }
@media (max-width: 560px) {
	.nak-om-kchip { min-height: 42px; font-size: .8rem; }
	.nak-om-kchip__icon { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.nak-om-kchip { transition: none; }
}