/**
 * nak-hooks.css — one-row title hooks + the culture hook (1.35.0)
 *
 * See inc/line-hooks.php. Colours come from the mark:
 *   saffron #e8871e (deep #c4650a on cream) · maroon #7a1f2b · temple gold #b8862b
 *   (deep #96691a on cream) · spicy red #b0203c · clove ink.
 *
 * @package NamasteAngkorTheme
 */

/* =====================================================================
 * 1. One-row hook
 * ================================================================== */
.nak-rowhook {
	--rh-saffron: #c4650a;
	--rh-maroon: #7a1f2b;
	--rh-gold: #96691a;
	--rh-red: #b0203c;
	container-type: inline-size;
	width: 100%;
}
.nak-rowhook__line {
	margin: 0;
	line-height: 1.15;
	text-wrap: balance;
}
.nak-rowhook__part { display: inline; }
/* One row: the size follows the text length and the width of the box. */
@supports (font-size: 1cqi) {
	.nak-rowhook__line {
		display: flex; align-items: center; justify-content: center;
		gap: 0.42em;
		white-space: nowrap;
		font-size: min(var(--nak-step-3), calc(100cqi * 1.62 / var(--nak-rowhook-len, 30)));
	}
	.nak-rowhook--start .nak-rowhook__line { justify-content: flex-start; }
	.nak-rowhook__part { display: block; }
	/* The section-title ornament sits under the row, not inside it. */
	.nak-rowhook__line::before,
	.nak-rowhook__line::after { display: none; }
	/* Narrow boxes: one row would drop below a readable size, so the hook
	   breaks into two balanced rows at a fixed size instead. */
	@container (max-width: 560px) {
		.nak-rowhook__line {
			flex-wrap: wrap; white-space: normal;
			gap: 0.1em 0.42em;
			font-size: clamp(1.35rem, 7.4cqi, 1.9rem);
		}
		.nak-rowhook--pair .nak-rowhook__part--1 { flex-basis: 100%; text-align: center; }
		.nak-rowhook--start.nak-rowhook--pair .nak-rowhook__part--1 { text-align: start; }
	}
}
/* Where section titles carry the ornament rule, draw it under the row. */
.nak-section__head .nak-rowhook::after {
	content: ""; display: block;
	width: 180px; height: 30px; margin: 1rem auto 0;
	background: var(--nak-gold-line);
	-webkit-mask: var(--nak-rule) center / contain no-repeat;
	mask: var(--nak-rule) center / contain no-repeat;
}
.nak-section__head .nak-rowhook--start::after { margin-left: 0; }

/* Pair: "Three kitchens, one table" ✦ "everywhere to go" */
.nak-rowhook--pair .nak-rowhook__part--1 { color: var(--nak-ink); }
.nak-rowhook--pair .nak-rowhook__part--2 { color: var(--rh-maroon); font-style: italic; font-weight: 500; }
html[data-style="indian"] .nak-rowhook--pair .nak-rowhook__part--2,
html[data-style="khmer"] .nak-rowhook--pair .nak-rowhook__part--2 { font-style: normal; }
.nak-rowhook__sep--glyph {
	display: inline-block; flex: 0 0 auto;
	width: 1.05em; height: 1.05em;
	background: var(--nak-saffron);
	-webkit-mask: var(--nak-icon-fusion) center / contain no-repeat;
	mask: var(--nak-icon-fusion) center / contain no-repeat;
}

/* List: Food ◆ Culture ◆ Experiences ◆ Angkor */
.nak-rowhook--list .nak-rowhook__part--1 { color: var(--rh-saffron); }
.nak-rowhook--list .nak-rowhook__part--2 { color: var(--rh-maroon); }
.nak-rowhook--list .nak-rowhook__part--3 { color: var(--rh-gold); }
.nak-rowhook--list .nak-rowhook__part--4 { color: var(--nak-ink); }
.nak-rowhook--list .nak-rowhook__part--5 { color: var(--rh-red); }
.nak-rowhook__sep--diamond {
	display: inline-block; flex: 0 0 auto;
	width: 0.26em; height: 0.26em; margin-inline: 0.06em;
	background: var(--rh-red);
	transform: rotate(45deg);
	box-shadow: 0 0 0 0.09em color-mix(in srgb, var(--rh-red) 22%, transparent);
}

/* Room for one row in the two sections that use it. */
.nak-explore__head { max-width: 1000px; }
.nak-brand-os__frame { max-width: 860px; }

/* =====================================================================
 * 2. Culture hook (hero)
 * ================================================================== */
.nak-hook {
	--hk-chip: var(--nak-turmeric);
	max-width: 52ch;
	line-height: 1.85;
	color: var(--nak-stone-soft);
}
.nak-hook__lead {
	display: block;
	margin-bottom: 0.35rem;
	line-height: 1.3;
	color: var(--nak-white);
	font-family: var(--nak-display);
	font-weight: var(--nak-disp-weight, 600);
	font-size: 1.08em;
}
.nak-hook__dash { display: none; }
.nak-hook__comma, .nak-hook__and { color: var(--nak-stone); }

.nak-hook__item {
	display: inline;
	padding: 0.1em 0.6em 0.14em 0.5em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--nak-saffron) 22%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hk-chip) 60%, transparent);
	color: var(--hk-chip);
	font-weight: 700;
	white-space: nowrap;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.nak-hook__item::before {
	content: "";
	display: inline-block;
	width: 0.9em; height: 0.9em;
	margin-right: 0.32em;
	vertical-align: -0.12em;
	background: currentColor;
	-webkit-mask: var(--nak-icon) center / contain no-repeat;
	mask: var(--nak-icon) center / contain no-repeat;
}
.nak-hook__item--soft {
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	white-space: normal;
	font-weight: 500;
	font-style: italic;
	color: var(--nak-cream);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--nak-turmeric) 70%, transparent);
	text-decoration-style: dotted;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}
.nak-hook__item--soft::before { content: none; }

.nak-hook__place {
	white-space: nowrap;
	color: var(--nak-white);
	font-weight: 700;
}
.nak-hook__place::before {
	content: "";
	display: inline-block;
	width: 0.95em; height: 0.95em;
	margin-right: 0.2em;
	vertical-align: -0.14em;
	background: var(--nak-saffron);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7Zm0 9.6A2.6 2.6 0 1 1 12 6.4a2.6 2.6 0 0 1 0 5.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7Zm0 9.6A2.6 2.6 0 1 1 12 6.4a2.6 2.6 0 0 1 0 5.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Per kitchen: the chip takes that kitchen's gold. */
html[data-style="indian"] .nak-hook { --hk-chip: #f2b23a; }
html[data-style="khmer"]  .nak-hook { --hk-chip: #e6c473; }
html[data-style="fusion"] .nak-hook { --hk-chip: #f2b035; }

@media (max-width: 540px) {
	.nak-hook { line-height: 1.9; }
}

/* The old title ornament is replaced by .nak-rowhook::after above. */
.nak-section__head .nak-rowhook .nak-rowhook__line::after,
.nak-section__head .nak-rowhook .nak-rowhook__line::before { content: none; display: none; }

/* Keep "served with a smile in the Angkor Area" on one line. */
.nak-hook__close { white-space: nowrap; }
@media (max-width: 340px) { .nak-hook__close { white-space: normal; } }