/* ---------------------------------------------------------------------------------------------
 * Components.
 *
 * The reusable pieces: buttons, the terracotta plaque, the arch frame, dish cards, event cards,
 * the ornaments and the form. Page furniture lives in sections.css.
 * ------------------------------------------------------------------------------------------- */

/* --- The arch --------------------------------------------------------------------------------
 * The doorway shape from the logo, used to frame images and panels. This is the motif, not the
 * logo: the wordmark itself is an uploaded file and is never drawn in CSS.
 */

.chaukhat-arch {
	border-radius: var(--chaukhat-radius-arch);
	overflow: hidden;
}

/* --- The plaque ------------------------------------------------------------------------------
 * The terracotta frame from the printed cards and posters.
 */

/* Dark terracotta, not the anchor: a plaque carries body text. See the note in style.css. */
.chaukhat-plaque {
	background: var(--chaukhat-terracotta-dark);
	color: var(--chaukhat-off-white);
	border-radius: var(--chaukhat-radius-lg);
	padding: clamp(1.75rem, 5vw, 3rem);
}

.chaukhat-plaque h2,
.chaukhat-plaque h3 {
	color: var(--chaukhat-off-white);
}

/* --- Ornament --------------------------------------------------------------------------------
 * Line art, never a fill. Sized by the caller; coloured by currentColor so it picks up whatever
 * it sits inside.
 */

.chaukhat-ornament {
	width: 100%;
	height: auto;
	display: block;
	color: var(--chaukhat-terracotta);
	opacity: .5;
}

.chaukhat-ornament--sprig,
.chaukhat-ornament--story {
	color: var(--chaukhat-green);
	opacity: .55;
}

.chaukhat-divider {
	width: min(240px, 60%);
	height: 12px;
	margin: 1.25rem auto;
	color: var(--chaukhat-gold);
	opacity: .8;
}

.chaukhat-rule {
	border: 0;
	border-top: 1px solid var(--chaukhat-rule);
	margin: 2.5rem 0;
}

/* --- Section heads ---------------------------------------------------------------------------
 * The shape the printed cards use: a small category line above the title.
 */

.chaukhat-section-head {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.chaukhat-section-head--center {
	text-align: center;
}

.chaukhat-section-head--center .chaukhat-standfirst {
	margin-inline: auto;
}

.chaukhat-section-title {
	margin-bottom: .5rem;
}

/* --- Buttons ---------------------------------------------------------------------------------
 * Solid terracotta is the primary action and there is only ever one of it in view.
 */

.chaukhat-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
	margin: 1.75rem 0 0;
}

/* Actions that follow a centred section sit centred too, whatever grid came between them. */
.chaukhat-section-head--center + .chaukhat-actions,
.chaukhat-gallery + .chaukhat-actions,
.chaukhat-services + .chaukhat-actions,
.chaukhat-menu-note + .chaukhat-actions {
	justify-content: center;
}

.chaukhat-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .8rem 1.6rem;
	border: 1px solid var(--chaukhat-terracotta);
	border-radius: 999px;
	background: var(--chaukhat-terracotta);
	color: var(--chaukhat-off-white);
	font: inherit;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.chaukhat-button:hover,
.chaukhat-button:focus-visible {
	background: var(--chaukhat-terracotta-dark);
	border-color: var(--chaukhat-terracotta-dark);
	color: var(--chaukhat-off-white);
}

.chaukhat-button--ghost {
	background: transparent;
	color: var(--chaukhat-terracotta-dark);
}

.chaukhat-button--ghost:hover,
.chaukhat-button--ghost:focus-visible {
	background: var(--chaukhat-terracotta-wash);
	border-color: var(--chaukhat-terracotta-dark);
	color: var(--chaukhat-terracotta-dark);
}

/*
 * The secondary hero action: a cream pill with a hairline edge, as in the design. Distinct from
 * --ghost, which is transparent and sits on coloured grounds.
 */
.chaukhat-button--outline {
	background: var(--chaukhat-off-white);
	border-color: rgba(188, 112, 83, .38);
	color: var(--chaukhat-brown);
}

.chaukhat-button--outline:hover,
.chaukhat-button--outline:focus-visible {
	background: var(--chaukhat-off-white);
	border-color: var(--chaukhat-terracotta);
	color: var(--chaukhat-terracotta-dark);
}

.chaukhat-button--quiet {
	background: transparent;
	border-color: var(--chaukhat-rule);
	color: var(--chaukhat-brown-soft);
}

.chaukhat-button--quiet:hover,
.chaukhat-button--quiet:focus-visible {
	background: transparent;
	border-color: var(--chaukhat-gold);
	color: var(--chaukhat-brown);
}

/* On terracotta, the button inverts: cream fill, terracotta text. */
.chaukhat-button--cream,
.chaukhat-section--terracotta .chaukhat-button {
	background: var(--chaukhat-off-white);
	border-color: var(--chaukhat-off-white);
	color: var(--chaukhat-terracotta-dark);
}

.chaukhat-button--cream:hover,
.chaukhat-button--cream:focus-visible,
.chaukhat-section--terracotta .chaukhat-button:hover,
.chaukhat-section--terracotta .chaukhat-button:focus-visible {
	background: var(--chaukhat-cream);
	border-color: var(--chaukhat-cream);
	color: var(--chaukhat-terracotta-dark);
}

.chaukhat-section--terracotta .chaukhat-button--ghost {
	background: transparent;
	border-color: rgba(253, 250, 244, .55);
	color: var(--chaukhat-off-white);
}

.chaukhat-section--terracotta .chaukhat-button--ghost:hover,
.chaukhat-section--terracotta .chaukhat-button--ghost:focus-visible {
	background: rgba(253, 250, 244, .12);
	border-color: var(--chaukhat-off-white);
	color: var(--chaukhat-off-white);
}

/* --- Dishes ----------------------------------------------------------------------------------
 * One card per item, set like the printed landscape cards: photo in an arch, name, note, price.
 */

.chaukhat-dishes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
}

/*
 * Two up on a phone rather than one.
 *
 * Nine dishes stacked full width made the menu a very long scroll, and the menu is the part people
 * actually came to read. A narrower card fits the whole Chaat Chapter into about a screen and a
 * half. auto-fill cannot do this on its own: at 380px of usable width a 230px track can only ever
 * produce one column.
 */
@media (max-width: 640px) {
	.chaukhat-dishes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .85rem;
	}

	.chaukhat-dish {
		padding: .65rem .65rem .9rem;
		gap: .7rem;
	}

	.chaukhat-dish__name {
		font-size: 1rem;
	}

	.chaukhat-dish__note {
		font-size: .82rem;
	}
}

.chaukhat-dish {
	background: var(--chaukhat-surface);
	border: 1px solid rgba(184, 145, 79, .22);
	border-radius: var(--chaukhat-radius-lg);
	padding: 1rem 1rem 1.25rem;
	box-shadow: var(--chaukhat-shadow);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.chaukhat-dish--premium {
	border-color: var(--chaukhat-gold);
	background:
		linear-gradient(var(--chaukhat-surface), var(--chaukhat-surface)) padding-box,
		linear-gradient(140deg, var(--chaukhat-gold-light), var(--chaukhat-terracotta-wash)) border-box;
	border: 1px solid transparent;
}

.chaukhat-dish__figure {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--chaukhat-terracotta-wash);
}

.chaukhat-dish__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chaukhat-dish__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	padding: 20%;
}

.chaukhat-dish__placeholder .chaukhat-ornament {
	color: var(--chaukhat-terracotta);
	opacity: .35;
}

.chaukhat-dish__flag {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: .75rem;
	transform: translateX(-50%);
	background: var(--chaukhat-gold);
	color: var(--chaukhat-brown);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: .25rem .7rem;
	border-radius: 999px;
	white-space: nowrap;
}

.chaukhat-dish__body {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	flex: 1;
}

.chaukhat-dish__name {
	font-size: 1.15rem;
	margin: 0;
}

.chaukhat-dish__note {
	color: var(--chaukhat-text-soft);
	font-size: .9rem;
	margin: 0;
	flex: 1;
}

/* --- Events and gallery ----------------------------------------------------------------------- */

.chaukhat-events,
.chaukhat-gallery {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
}

.chaukhat-events {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.chaukhat-gallery {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.chaukhat-event {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.chaukhat-event__figure {
	display: block;
	aspect-ratio: 5 / 4;
	background: var(--chaukhat-terracotta-wash);
}

.chaukhat-event__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.chaukhat-event__figure:hover img {
	transform: scale(1.03);
}

.chaukhat-event__title {
	font-size: 1.3rem;
	margin: 0 0 .25rem;
}

.chaukhat-event__title a {
	text-decoration: none;
	color: var(--chaukhat-brown);
}

.chaukhat-event__title a:hover,
.chaukhat-event__title a:focus-visible {
	color: var(--chaukhat-terracotta-dark);
}

.chaukhat-event__venue {
	color: var(--chaukhat-green);
	font-size: .9rem;
	margin: 0 0 .35rem;
}

.chaukhat-event__note {
	color: var(--chaukhat-text-soft);
	font-size: .95rem;
	margin: 0;
}

.chaukhat-feature {
	margin: 0 0 2rem;
	aspect-ratio: 16 / 10;
}

.chaukhat-feature img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Lists ------------------------------------------------------------------------------------ */

.chaukhat-plain-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .4rem;
}

.chaukhat-empty {
	color: var(--chaukhat-text-soft);
	text-align: center;
}

/* --- The form --------------------------------------------------------------------------------- */

.chaukhat-form {
	display: grid;
	gap: .85rem;
}

/*
 * min-width: 0 on the field and the control both.
 *
 * A grid item defaults to min-width:auto, so it refuses to shrink below its content's intrinsic
 * width. A text input's intrinsic width comes from its default size of 20 characters, and a date
 * input's from the widest its picker can be — together those forced the two-column row wider than
 * a phone screen, which pushed the whole document sideways and knocked every centred heading
 * off-centre. width:100% alone does not fix it; the floor has to be lowered.
 */
.chaukhat-field {
	display: grid;
	gap: .35rem;
	margin: 0;
	min-width: 0;
}

.chaukhat-field-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: .85rem;
}

.chaukhat-field label {
	font-size: .82rem;
	font-weight: 500;
	color: var(--chaukhat-text-soft);
}

.chaukhat-required {
	color: var(--chaukhat-terracotta);
}

.chaukhat-field input,
.chaukhat-field select,
.chaukhat-field textarea,
.chaukhat-search input {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding: .7rem .85rem;
	border: 1px solid rgba(184, 145, 79, .45);
	border-radius: var(--chaukhat-radius);
	background: var(--chaukhat-off-white);
	color: var(--chaukhat-text);
	font: inherit;
	font-size: .95rem;
}

.chaukhat-field textarea {
	resize: vertical;
	min-height: 6rem;
}

.chaukhat-field input:focus-visible,
.chaukhat-field select:focus-visible,
.chaukhat-field textarea:focus-visible {
	border-color: var(--chaukhat-terracotta);
	outline-offset: 1px;
}

.chaukhat-hint {
	font-size: .8rem;
	color: var(--chaukhat-brown-muted);
	margin: -.35rem 0 .25rem;
}

/* The honeypot. Hidden from people without display:none, which some bots check for. */
.chaukhat-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.chaukhat-notice {
	padding: .85rem 1.1rem;
	border-radius: var(--chaukhat-radius);
	border: 1px solid var(--chaukhat-rule);
	background: var(--chaukhat-off-white);
	margin: 0 0 1.25rem;
	font-size: .95rem;
}

.chaukhat-notice--success {
	border-color: var(--chaukhat-green-light);
	background: rgba(107, 127, 94, .1);
	color: var(--chaukhat-brown);
}

.chaukhat-notice--notice {
	border-color: var(--chaukhat-terracotta-light);
	background: var(--chaukhat-terracotta-wash);
}

.chaukhat-search {
	display: flex;
	gap: .5rem;
	min-width: 0;
}

/* --- Pagination ------------------------------------------------------------------------------- */

.chaukhat-pagination {
	margin-top: 2.5rem;
	text-align: center;
}

.chaukhat-pagination .page-numbers {
	display: inline-block;
	padding: .4rem .8rem;
	border-radius: 999px;
	text-decoration: none;
	color: var(--chaukhat-brown-soft);
}

.chaukhat-pagination .page-numbers.current {
	background: var(--chaukhat-terracotta);
	color: var(--chaukhat-off-white);
}

/* ---------------------------------------------------------------------------------------------
 * Inner pages: /book/, /menu/, /faq/.
 * ------------------------------------------------------------------------------------------- */

/* A section that opens a page, so it does not start with a full section's worth of air. */
.chaukhat-section--tight {
	padding-bottom: 0;
}

.chaukhat-centred-prose {
	margin-inline: auto;
	text-align: center;
}

/* "Read more" out of a front-page section and into the page that covers it properly. */
.chaukhat-more {
	margin: 1.25rem 0 0;
	font-size: .95rem;
}

.chaukhat-more a {
	font-weight: 500;
	text-decoration-thickness: 1px;
}

.chaukhat-more a::after {
	content: " →";
	white-space: nowrap;
}

/* --- How it works ----------------------------------------------------------------------------- */

.chaukhat-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.chaukhat-step__number {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	margin-bottom: .9rem;
	border: 1px solid var(--chaukhat-rule);
	border-radius: 999px;
	font-family: var(--chaukhat-font-display);
	font-size: 1.05rem;
	color: var(--chaukhat-terracotta-dark);
}

.chaukhat-step__title {
	font-size: 1.2rem;
	margin: 0 0 .4rem;
}

.chaukhat-step__note {
	margin: 0;
	color: var(--chaukhat-text-soft);
	font-size: .95rem;
}

/* --- Two columns of prose ---------------------------------------------------------------------- */

.chaukhat-two-col {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

/* --- Ticked lists ------------------------------------------------------------------------------ */

.chaukhat-ticks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .55rem;
}

.chaukhat-ticks li {
	position: relative;
	padding-inline-start: 1.6rem;
	color: var(--chaukhat-text-soft);
}

/* A small terracotta tick, drawn rather than loaded. */
.chaukhat-ticks li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: .55em;
	width: .5rem;
	height: .28rem;
	border-inline-start: 1.5px solid var(--chaukhat-terracotta);
	border-bottom: 1.5px solid var(--chaukhat-terracotta);
	transform: rotate(-45deg);
}

/* What we need from the venue is a different kind of list: a dot, not a tick. */
.chaukhat-ticks--need li::before {
	top: .62em;
	width: .35rem;
	height: .35rem;
	border: 0;
	border-radius: 999px;
	background: var(--chaukhat-gold);
	transform: none;
}

/*
 * The hint's negative top margin is tuned for sitting tight under a form row. Following a list it
 * needs room instead, or it reads as a sixth bullet.
 */
.chaukhat-ticks + .chaukhat-hint {
	margin-top: 1.1rem;
}

.chaukhat-booking__note {
	margin-top: 1.25rem;
}

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

.chaukhat-faq {
	max-width: 760px;
}

.chaukhat-faq-group + .chaukhat-faq-group {
	margin-top: clamp(2.25rem, 4vw, 3rem);
}

.chaukhat-faq-group__label {
	font-size: 1.15rem;
	letter-spacing: .04em;
	color: var(--chaukhat-terracotta-dark);
	margin: 0 0 1rem;
	padding-bottom: .6rem;
	border-bottom: 1px solid var(--chaukhat-rule);
}

.chaukhat-qa {
	border-bottom: 1px solid rgba(184, 145, 79, .22);
}

.chaukhat-qa__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: .9rem 0;
	cursor: pointer;
	font-family: var(--chaukhat-font-display);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--chaukhat-brown);
	list-style: none;
}

/* The default disclosure triangle, replaced with a sign that matches the rest of the page. */
.chaukhat-qa__q::-webkit-details-marker {
	display: none;
}

.chaukhat-qa__q::after {
	content: "+";
	flex: none;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--chaukhat-terracotta);
	transition: transform .2s ease;
}

.chaukhat-qa[open] .chaukhat-qa__q::after {
	content: "–";
}

.chaukhat-qa__q:hover {
	color: var(--chaukhat-terracotta-dark);
}

.chaukhat-qa__a {
	padding: 0 2rem .95rem 0;
	color: var(--chaukhat-text-soft);
}

.chaukhat-qa__a p {
	margin: 0;
}

.chaukhat-faq-close {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	text-align: center;
}

.chaukhat-faq-close p {
	font-family: var(--chaukhat-font-display);
	font-size: 1.15rem;
	color: var(--chaukhat-brown);
	margin: 0;
}

.chaukhat-faq-close .chaukhat-actions {
	justify-content: center;
}