/*
Theme Name: Chaukhat
Theme URI: https://github.com/imrealashu/apnachaukhat
Author: Apna Chaukhat
Author URI: https://apnachaukhat.com
Description: The theme for Apna Chaukhat — a food, pop-up and event experience brand. Food • Folks • Stories.
Version: 0.6.2
Requires at least: 6.5
Requires PHP: 8.1
License: Proprietary
Text Domain: chaukhat
*/

/* ---------------------------------------------------------------------------------------------
 * Brand tokens.
 *
 * Terracotta is the anchor: it must stay exactly #bc7053 wherever it appears, because it is the
 * wordmark's colour. Everything else supports it. Cream carries the page, brown carries the text,
 * gold is for small accents only — rules, dividers, a price — and green appears as botanical line
 * art rather than as a fill.
 *
 * Use the tokens, never the raw hex, so a change lands everywhere at once. New colours go here and
 * in theme.json, or in neither.
 * ------------------------------------------------------------------------------------------- */

:root {
	/* Terracotta. The brand colour. */
	--chaukhat-terracotta: #bc7053;
	--chaukhat-terracotta-dark: #9c5641;
	--chaukhat-terracotta-light: #d59478;
	--chaukhat-terracotta-wash: #f2ddd3;

	/* Cream and parchment. Page grounds. */
	--chaukhat-cream: #faf4e9;
	--chaukhat-parchment: #f3e9d7;
	--chaukhat-off-white: #fdfaf4;

	/* Deep brown. Body text and headings. */
	--chaukhat-brown: #3b2a21;
	--chaukhat-brown-soft: #6b5347;
	--chaukhat-brown-muted: #9a8578;

	/* Muted gold. Rules, dividers, prices, small flourishes. Never large fills. */
	--chaukhat-gold: #b8914f;
	--chaukhat-gold-light: #d9bd85;

	/* Botanical green. Line art and the occasional leaf, restrained. */
	--chaukhat-green: #6b7f5e;
	--chaukhat-green-light: #93a486;

	/* Semantic roles. Prefer these in components. */
	--chaukhat-bg: var(--chaukhat-cream);
	--chaukhat-surface: var(--chaukhat-off-white);
	--chaukhat-text: var(--chaukhat-brown);
	--chaukhat-text-soft: var(--chaukhat-brown-soft);
	--chaukhat-accent: var(--chaukhat-terracotta);
	--chaukhat-rule: var(--chaukhat-gold-light);

	/* Type. A serif for anything carrying the brand's voice, a clean sans for interface text.
	   These three are placeholders until the real brand fonts arrive; the fallbacks are real. */
	--chaukhat-font-display: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--chaukhat-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--chaukhat-font-hand: "Caveat", "Segoe Script", cursive;

	/* Shape. Soft, handmade edges rather than sharp corners. */
	--chaukhat-radius: 10px;
	--chaukhat-radius-lg: 18px;
	--chaukhat-radius-arch: 140px 140px 12px 12px; /* the doorway motif */

	/* Rhythm. One scale, used everywhere, so sections breathe alike. */
	--chaukhat-gap: 1.25rem;
	--chaukhat-section-y: clamp(3.5rem, 8vw, 6.5rem);
	--chaukhat-measure: 66ch;

	--chaukhat-shadow: 0 1px 2px rgba(59, 42, 33, .04), 0 12px 28px -18px rgba(59, 42, 33, .28);
}

/* ---------------------------------------------------------------------------------------------
 * Base.
 * ------------------------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behaviour: smooth;
	scroll-behavior: smooth;
	/* The header is sticky, so an in-page jump must stop below it rather than under it. */
	scroll-padding-top: 6.5rem;
}

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

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--chaukhat-bg);
	color: var(--chaukhat-text);
	font-family: var(--chaukhat-font-body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
	font-family: var(--chaukhat-font-display);
	font-weight: 600;
	line-height: 1.15;
	color: var(--chaukhat-brown);
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }

p, ul, ol {
	margin: 0 0 1rem;
}

a {
	color: var(--chaukhat-terracotta-dark);
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
	transition: color .15s ease;
}

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

:focus-visible {
	outline: 2px solid var(--chaukhat-terracotta);
	outline-offset: 3px;
	border-radius: 2px;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ---------------------------------------------------------------------------------------------
 * Layout utilities.
 * ------------------------------------------------------------------------------------------- */

/*
 * 1300, not 1120.
 *
 * Measured off the approved design: at a 1530px viewport the logo starts 118px in and the header
 * button ends 115px from the right, which is a 1300px container. Every section uses it, so the
 * logo, the hero text and the band below all sit on the same left edge.
 */
.chaukhat-wrap {
	width: min(100% - 3rem, 1300px);
	margin-inline: auto;
}

.chaukhat-section {
	padding-block: var(--chaukhat-section-y);
}

.chaukhat-section--parchment {
	background: var(--chaukhat-parchment);
}

/*
 * Terracotta panels that carry paragraphs use the DARK terracotta, not the anchor #bc7053.
 *
 * #bc7053 is a mid-tone: white text on it reaches only 3.6:1 and deep brown only 3.63:1, so
 * neither direction meets AA for body text — the gold eyebrow was worse, at 1.29:1. The anchor
 * colour is unchanged and still carries the wordmark, the buttons, the prices, the hero wash and
 * the ornaments; it is only the panels with small text on them that darken, where off-white
 * reaches 5.3:1.
 */
.chaukhat-section--terracotta {
	background: var(--chaukhat-terracotta-dark);
	color: var(--chaukhat-off-white);
}

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

.chaukhat-prose {
	max-width: var(--chaukhat-measure);
}

.chaukhat-prose > * + * {
	margin-top: 1rem;
}

/* ---------------------------------------------------------------------------------------------
 * Brand type.
 * ------------------------------------------------------------------------------------------- */

/* The line under the wordmark. Always spaced, always small caps, never shouted. */
.chaukhat-tagline {
	font-family: var(--chaukhat-font-display);
	font-size: .72rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--chaukhat-terracotta);
	margin: .35rem 0 0;
}

.chaukhat-eyebrow {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--chaukhat-gold);
	margin: 0 0 .6rem;
}

.chaukhat-eyebrow--light,
.chaukhat-section--terracotta .chaukhat-eyebrow,
.chaukhat-plaque .chaukhat-eyebrow {
	color: var(--chaukhat-off-white);
}

.chaukhat-handwritten {
	font-family: var(--chaukhat-font-hand);
	font-size: 1.5rem;
	color: var(--chaukhat-terracotta);
	line-height: 1.2;
}

.chaukhat-standfirst {
	color: var(--chaukhat-text-soft);
	font-size: 1.05rem;
	max-width: 54ch;
	margin: 0;
}

.chaukhat-section--terracotta .chaukhat-standfirst {
	color: var(--chaukhat-off-white);
}

/* ---------------------------------------------------------------------------------------------
 * Accessibility.
 * ------------------------------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.chaukhat-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--chaukhat-terracotta);
	color: var(--chaukhat-off-white);
	padding: .75rem 1.25rem;
	border-radius: 0 0 var(--chaukhat-radius) 0;
}

.chaukhat-skip:focus {
	left: 0;
	color: var(--chaukhat-off-white);
}