/* Chourangi Custom Theme — main styles */

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--chourangi-black);
	text-decoration: none;
}

/* Announcement bar — spacer | message | social, so the message stays
   visually centered while social icons sit at the right edge (the
   spacer mirrors the social block's width; harmless if social is off). */
.chourangi-announcement {
	background-color: #4a4a4d;
	color: var(--chourangi-white);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 20px;
	font-family: var(--chourangi-font-body);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	text-align: center;
}

.chourangi-announcement__spacer {
	flex: 1;
	visibility: hidden;
}

.chourangi-announcement__message {
	flex: 0 1 auto;
}

.chourangi-announcement__message a {
	color: var(--chourangi-white);
	font-weight: 600;
}

.chourangi-announcement__message a:hover {
	color: var(--chourangi-light-gold);
}

.chourangi-announcement .chourangi-header__social {
	flex: 1;
	justify-content: flex-end;
}

.chourangi-announcement .chourangi-header__social a {
	color: var(--chourangi-white);
}

.chourangi-announcement .chourangi-header__social a:hover {
	color: var(--chourangi-light-gold);
}

/* Header */
.chourangi-header {
	background-color: var(--chourangi-cream);
	border-bottom: 1px solid var(--chourangi-sand);
	position: relative;
	z-index: 10;
}

.chourangi-header__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px 32px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
}

.chourangi-header__nav ul {
	display: flex;
	flex-wrap: nowrap;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.chourangi-header__nav li {
	margin: 0;
}

.chourangi-header__nav a {
	font-family: var(--chourangi-font-body);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: #555555;
	white-space: nowrap;
}

.chourangi-header__nav a:hover {
	color: var(--chourangi-antique-gold);
}

/* Dropdown submenus (e.g. "Our Story" nested under "About US" in
   Appearance > Menus) — wp_nav_menu's default markup already nests a
   .sub-menu <ul> inside the parent <li class="menu-item-has-children">, so
   this only needs styling, no template changes. */
.chourangi-header__nav li.menu-item-has-children {
	position: relative;
}

.chourangi-header__nav li.menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.chourangi-header__nav li.menu-item-has-children > a::after {
	content: '';
	width: 6px;
	height: 6px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	margin-top: -4px;
	opacity: 0.6;
}

.chourangi-header__nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	min-width: 200px;
	flex-direction: column;
	gap: 0;
	background-color: var(--chourangi-white);
	border-top: 2px solid var(--chourangi-antique-gold);
	box-shadow: 0 16px 32px rgba(34, 30, 24, 0.14);
	padding: 8px 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%) translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 100;
}

.chourangi-header__nav li.menu-item-has-children:hover > .sub-menu,
.chourangi-header__nav li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.chourangi-header__nav .sub-menu li {
	width: 100%;
}

.chourangi-header__nav .sub-menu a {
	display: block;
	padding: 10px 24px;
	white-space: nowrap;
	color: var(--chourangi-black);
	font-size: 14px;
}

.chourangi-header__nav .sub-menu a::after {
	content: none;
}

.chourangi-header__nav .sub-menu a:hover {
	background-color: var(--chourangi-sand);
	color: var(--chourangi-antique-gold);
}

/* The dropdown panel itself is always a solid white/cream surface, even
   when the header sits over a dark or transparent hero (.chourangi-header--
   dark / --has-bg, which recolor nav links white further down this file) —
   so its own links must stay dark regardless of header variant. Three
   classes here beats those two-class rules on specificity, so this is safe
   no matter where in the file it lives. */
.chourangi-header--dark .chourangi-header__nav .sub-menu a,
.chourangi-header--has-bg .chourangi-header__nav .sub-menu a {
	color: var(--chourangi-black);
}

.chourangi-header--dark .chourangi-header__nav .sub-menu a:hover,
.chourangi-header--has-bg .chourangi-header__nav .sub-menu a:hover {
	color: var(--chourangi-antique-gold);
}

/* Mobile-only "Book a Table" appended to the nav dropdown — hidden by
   default (desktop already shows the button separately in the actions
   area); revealed only inside the open mobile dropdown, see responsive.css. */
.chourangi-header__nav-cta-item {
	display: none;
}

/* Mobile slide-out drawer (overlay, close button, search) — all only
   ever shown/positioned within the max-width:900px media query in
   responsive.css; explicitly hidden here as a safety default on desktop. */
.chourangi-mobile-overlay,
.chourangi-header__nav-close,
.chourangi-header__nav-search {
	display: none;
}

.chourangi-header__logo {
	text-align: center;
	padding: 0 16px;
	max-width: 100%;
}

.chourangi-header__logo img,
.chourangi-header__logo .custom-logo {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* Style 2 & 4 — logo on the far left, nav takes the remaining space */
.chourangi-header--style-2 .chourangi-header__inner,
.chourangi-header--style-4 .chourangi-header__inner {
	grid-template-columns: auto 1fr auto;
}

.chourangi-header--style-2 .chourangi-header__logo,
.chourangi-header--style-4 .chourangi-header__logo {
	text-align: left;
	padding: 0 24px 0 0;
}

.chourangi-header--style-4 .chourangi-header__nav {
	text-align: center;
}

.chourangi-header--style-4 .chourangi-header__nav ul {
	justify-content: center;
}

/* Style 3 — logo centered on its own row, nav + actions below */
.chourangi-header__logo-row {
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px 32px 0;
	text-align: center;
}

.chourangi-header--style-3 .chourangi-header__logo {
	display: inline-block;
	padding: 0;
}

.chourangi-header--style-3 .chourangi-header__inner {
	grid-template-columns: 1fr auto;
	justify-content: space-between;
}

/* Style 5 — dark background, light text (reuses Style 1's grid) */
.chourangi-header--dark {
	background-color: var(--chourangi-black);
	border-bottom-color: transparent;
}

.chourangi-header--dark .chourangi-header__nav a {
	color: var(--chourangi-sand);
}

.chourangi-header--dark .chourangi-header__nav a:hover {
	color: var(--chourangi-light-gold);
}

.chourangi-header--dark .chourangi-header__site-title span {
	color: var(--chourangi-white);
}

.chourangi-header--dark .chourangi-header__phone {
	color: var(--chourangi-sand);
}

.chourangi-header--dark .chourangi-header__burger span {
	background-color: var(--chourangi-white);
}

.chourangi-header--dark .chourangi-header__cta {
	background-color: var(--chourangi-antique-gold) !important;
	color: var(--chourangi-black) !important;
	border-color: var(--chourangi-antique-gold) !important;
}

.chourangi-header--dark .chourangi-header__cta:hover {
	background-color: transparent !important;
	color: var(--chourangi-light-gold) !important;
	border-color: var(--chourangi-light-gold) !important;
}

/* Social icons */
.chourangi-header__social {
	display: flex;
	align-items: center;
	gap: 14px;
}

.chourangi-header__social a {
	color: #555555;
	display: inline-flex;
}

.chourangi-header__social a:hover {
	color: var(--chourangi-antique-gold);
}

.chourangi-header--dark .chourangi-header__social a {
	color: var(--chourangi-sand);
}

/* Header background image (Theme Options > Header Style > Header background
   image) — shared by all 5 styles. A dark overlay + light text is used
   unconditionally since we can't predict the brightness of an uploaded
   photo, and legibility matters more than matching the light/dark variant. */
.chourangi-header--has-bg {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-bottom-color: transparent;
}

.chourangi-header--has-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(34, 30, 24, 0.55);
	z-index: 0;
}

.chourangi-header--has-bg > * {
	position: relative;
	z-index: 1;
}

.chourangi-header--has-bg .chourangi-header__nav a,
.chourangi-header--has-bg .chourangi-header__phone,
.chourangi-header--has-bg .chourangi-header__site-title span,
.chourangi-header--has-bg .chourangi-header__social a {
	color: var(--chourangi-white);
}

.chourangi-header--has-bg .chourangi-header__nav a:hover,
.chourangi-header--has-bg .chourangi-header__social a:hover {
	color: var(--chourangi-light-gold);
}

.chourangi-header--has-bg .chourangi-header__burger span {
	background-color: var(--chourangi-white);
}

.chourangi-header--has-bg .chourangi-header__cta {
	background-color: var(--chourangi-antique-gold) !important;
	color: var(--chourangi-black) !important;
	border-color: var(--chourangi-antique-gold) !important;
}

.chourangi-header--has-bg .chourangi-header__cta:hover {
	background-color: transparent !important;
	color: var(--chourangi-light-gold) !important;
	border-color: var(--chourangi-light-gold) !important;
}

/* Elementor-rendered header template (see build_header_template.php):
   the section/column css_classes apply to the outer <section>, not the
   inner .elementor-container that actually holds the columns, so
   alignment has to target that container directly — same pattern as
   .chourangi-split on the homepage. */
.chourangi-header.elementor-section > .elementor-container {
	align-items: flex-end;
	padding-top: 12px;
	padding-bottom: 12px;
}

.chourangi-header__actions.elementor-section > .elementor-container {
	align-items: center;
}

.chourangi-header .elementor-button {
	white-space: nowrap;
}

.chourangi-announcement .elementor-widget-text-editor a {
	margin-left: 12px;
}

.chourangi-header__site-title {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-family: var(--chourangi-font-heading);
	font-size: 22px;
	letter-spacing: 0.06em;
	color: var(--chourangi-black);
}

.chourangi-header__flourish {
	width: 28px;
	height: 28px;
	color: var(--chourangi-antique-gold);
}

.chourangi-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
}

.chourangi-header__phone {
	font-family: var(--chourangi-font-body);
	font-size: 13px;
	font-weight: 300;
	color: var(--chourangi-black);
	white-space: nowrap;
}

.chourangi-header__phone:hover {
	color: var(--chourangi-antique-gold);
}

.chourangi-header__cta {
	padding: 14px 26px !important;
	white-space: nowrap;
}

.chourangi-header__burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
}

.chourangi-header__burger span {
	display: block;
	width: 22px;
	height: 1px;
	background-color: var(--chourangi-black);
}

/* Main content */
.chourangi-main {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 32px;
}

/* Page header / breadcrumb band — see inc/breadcrumb.php */
.chourangi-pageheader {
	position: relative;
	min-height: var(--chourangi-pageheader-height, 220px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--chourangi-black);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.chourangi-pageheader__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--chourangi-pageheader-overlay, rgba(34, 30, 24, 0.55));
}

.chourangi-pageheader__inner {
	position: relative;
	z-index: 1;
	padding: 24px;
	max-width: 800px;
}

.chourangi-pageheader__title {
	font-family: var(--chourangi-font-heading);
	font-weight: 400;
	font-size: 44px;
	color: var(--chourangi-pageheader-title-color, #FBF7EF);
	margin: 0 0 12px;
}

.chourangi-pageheader__breadcrumb {
	font-family: var(--chourangi-font-body);
	font-size: 13px;
	color: var(--chourangi-pageheader-path-color, #E6C882);
}

.chourangi-pageheader__breadcrumb a {
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
}

.chourangi-pageheader__breadcrumb a:hover {
	opacity: 1;
	text-decoration: underline;
}

.chourangi-pageheader__sep {
	margin: 0 8px;
	opacity: 0.5;
	color: var(--chourangi-pageheader-path-color, #E6C882);
}

.chourangi-pageheader__current {
	opacity: 0.75;
}

.chourangi-article__title {
	font-size: 44px;
	font-weight: 500;
	margin: 0 0 24px;
}

.chourangi-article__thumbnail {
	margin-bottom: 32px;
}

.chourangi-article__content {
	font-size: 17px;
	color: var(--chourangi-black);
}

/* Archive */
.chourangi-archive__title {
	font-size: 36px;
	margin-bottom: 16px;
}

/* 404 */
.chourangi-404 {
	text-align: center;
	padding: 96px 0;
}

.chourangi-404__title {
	font-size: 48px;
	margin-bottom: 16px;
}

.chourangi-404__link {
	display: inline-block;
	margin-top: 24px;
	padding: 12px 28px;
	border: 1px solid var(--chourangi-antique-gold);
	color: var(--chourangi-antique-gold);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.chourangi-404__link:hover {
	background-color: var(--chourangi-antique-gold);
	color: var(--chourangi-white);
}

/* Footer — driven by Theme Options (inc/footer-styles.php). Background
   and text colors are user-configurable, applied inline via CSS custom
   properties (see chourangi_footer_style_attr()) rather than the
   --chourangi-* design-token variables, which are fixed brand colors. */
.chourangi-footer {
	--chourangi-footer-title: #FBF7EF;
	--chourangi-footer-text: #EFE7D8;
	background-color: var(--chourangi-black);
	color: var(--chourangi-footer-text);
}

.chourangi-footer__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 80px 90px 32px;
}

.chourangi-footer__inner--slim {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 32px 90px;
}

.chourangi-footer__inner--split {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 56px;
}

.chourangi-footer__grid {
	display: grid;
	gap: 40px;
	padding-bottom: 56px;
}

.chourangi-footer__grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.chourangi-footer__grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.chourangi-footer__grid--2 {
	grid-template-columns: repeat(2, 1fr);
	max-width: 800px;
}

.chourangi-footer--style-5 .chourangi-footer__grid {
	padding-bottom: 0;
}

.chourangi-footer__col-title {
	font-family: var(--chourangi-font-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--chourangi-footer-title);
	margin: 0 0 14px;
}

.chourangi-footer__col-content {
	font-family: var(--chourangi-font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.9;
	color: var(--chourangi-footer-text);
}

.chourangi-footer__col-content a {
	color: var(--chourangi-footer-text);
	display: inline-block;
}

.chourangi-footer__col-content a:hover {
	color: var(--chourangi-light-gold);
}

.chourangi-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-top: 1px solid rgba(246, 241, 231, 0.15);
	padding-top: 24px;
}

.chourangi-footer__copyright {
	font-family: var(--chourangi-font-body);
	font-size: 12px;
	color: var(--chourangi-footer-text);
	margin: 0;
}

.chourangi-footer__copyright a {
	color: var(--chourangi-footer-text);
	text-decoration: underline;
}

.chourangi-footer__social {
	display: flex;
	align-items: center;
	gap: 16px;
}

.chourangi-footer__social a {
	color: var(--chourangi-footer-text);
	display: inline-flex;
}

.chourangi-footer__social a:hover {
	color: var(--chourangi-light-gold);
}

/* Style 2 — everything centered */
.chourangi-footer--style-2 .chourangi-footer__grid {
	text-align: center;
	justify-items: center;
}

.chourangi-footer--style-2 .chourangi-footer__social {
	justify-content: center;
	margin-bottom: 24px;
}

.chourangi-footer--style-2 .chourangi-footer__copyright {
	text-align: center;
}

/* Style 3 — wide two columns, left aligned but roomier */
.chourangi-footer--style-3 .chourangi-footer__col-content {
	max-width: 340px;
}

/* Style 4 — minimal single bar */
.chourangi-footer--style-4 .chourangi-footer__inner--slim {
	border: none;
}

/* Style 5 — split: columns left, social + copyright block right */
.chourangi-footer__side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 20px;
	border-left: 1px solid rgba(246, 241, 231, 0.15);
	padding-left: 56px;
}

/* Custom Elementor widget: Reservation CTA */
.chourangi-reservation-cta {
	background-color: var(--chourangi-sand);
	border: 1px solid var(--chourangi-light-gold);
	padding: 56px 40px;
	text-align: center;
}

.chourangi-reservation-cta__title {
	font-family: var(--chourangi-font-heading);
	font-weight: 300;
	font-size: 40px;
	margin: 0 0 16px;
}

.chourangi-reservation-cta__text {
	font-family: var(--chourangi-font-body);
	font-weight: 300;
	font-size: 15px;
	line-height: 2;
	max-width: 560px;
	margin: 0 auto 32px;
	color: var(--chourangi-black);
}

.chourangi-reservation-cta__button {
	display: inline-block;
	padding: 16px 40px;
	background-color: var(--chourangi-antique-gold);
	color: var(--chourangi-black);
	border: 1px solid var(--chourangi-antique-gold);
	font-family: var(--chourangi-font-body);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.chourangi-reservation-cta__button:hover {
	background-color: transparent;
	color: var(--chourangi-antique-gold);
}

/* ==========================================================================
   Homepage design system — from Chourangi mood board (Aug 2026)
   12 columns · 90px page gutter · 120px section rhythm · square corners
   ========================================================================== */

.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1280px;
	padding: 0 90px;
}

.chourangi-section {
	padding: 120px 0;
}

.chourangi-section--compact {
	padding: 64px 0;
}

.chourangi-eyebrow {
	font-family: var(--chourangi-font-body);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--chourangi-antique-gold);
	margin: 0 0 20px;
}

.chourangi-eyebrow--light {
	color: var(--chourangi-white);
}

.chourangi-h1 {
	font-family: var(--chourangi-font-heading);
	font-weight: 300;
	font-size: 104px;
	line-height: 1.02;
	letter-spacing: 0;
	margin: 0 0 40px;
	color: var(--chourangi-white);
}

.chourangi-h1 em {
	font-style: italic;
	color: var(--chourangi-light-gold);
}

.chourangi-h2 {
	font-family: var(--chourangi-font-heading);
	font-weight: 300;
	font-size: 56px;
	line-height: 1.1;
	margin: 0 0 24px;
	color: var(--chourangi-black);
}

.chourangi-body {
	font-family: var(--chourangi-font-body);
	font-weight: 300;
	font-size: 15px;
	line-height: 2;
	color: var(--chourangi-black);
	max-width: 640px;
}

.chourangi-body--on-dark {
	color: var(--chourangi-white);
}

/* Buttons
   !important is used deliberately here: Elementor's own widget CSS for
   .elementor-button loads after this stylesheet and matches at the same
   specificity, so it wins ties in the cascade without it. */
.chourangi-btn {
	display: inline-block !important;
	padding: 16px 40px !important;
	font-family: var(--chourangi-font-body) !important;
	font-size: 11px !important;
	font-weight: 300 !important;
	letter-spacing: 0.24em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	border: 1px solid transparent !important;
	border-radius: 0 !important;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
	cursor: pointer;
}

.chourangi-btn--primary {
	background-color: var(--chourangi-black) !important;
	color: var(--chourangi-white) !important;
	border-color: var(--chourangi-black) !important;
}

.chourangi-btn--primary:hover {
	background-color: transparent !important;
	color: var(--chourangi-black) !important;
}

.chourangi-btn--ghost {
	background-color: transparent !important;
	color: var(--chourangi-black) !important;
	border-color: var(--chourangi-black) !important;
}

.chourangi-btn--ghost:hover {
	background-color: var(--chourangi-black) !important;
	color: var(--chourangi-white) !important;
}

.chourangi-btn--ghost.chourangi-btn--on-dark {
	color: var(--chourangi-white) !important;
	border-color: var(--chourangi-white) !important;
}

.chourangi-btn--ghost.chourangi-btn--on-dark:hover {
	background-color: var(--chourangi-white) !important;
	color: var(--chourangi-black) !important;
}

.chourangi-btn--accent {
	background-color: var(--chourangi-antique-gold) !important;
	color: var(--chourangi-black) !important;
	border-color: var(--chourangi-antique-gold) !important;
}

.chourangi-btn--accent:hover {
	background-color: transparent !important;
	color: var(--chourangi-light-gold) !important;
	border-color: var(--chourangi-light-gold) !important;
}

.chourangi-btn--light {
	background-color: var(--chourangi-white) !important;
	color: var(--chourangi-black) !important;
	border-color: var(--chourangi-white) !important;
}

.chourangi-btn--light:hover {
	background-color: transparent !important;
	color: var(--chourangi-white) !important;
	border-color: var(--chourangi-white) !important;
}

/* Section ornament — line / diamond / line divider */
.chourangi-ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 48px;
}

.chourangi-ornament::before,
.chourangi-ornament::after {
	content: '';
	height: 1px;
	width: 60px;
	background-color: var(--chourangi-light-gold);
}

.chourangi-ornament span {
	display: inline-block;
	width: 6px;
	height: 6px;
	background-color: var(--chourangi-antique-gold);
	transform: rotate(45deg);
}

/* Hero
   The section's own background-color/-image is the fallback placeholder;
   when a real photo is set via Elementor's native Background control, it's
   applied as an inline style on this same element and simply overrides the
   background-image below (inline beats stylesheet). The ::before pseudo
   does the Ken Burns zoom — it uses `background-image: inherit` so it
   always animates whichever image is actually active (placeholder or
   real), rather than painting a fixed graphic on top that would hide a
   real photo underneath it. */
.chourangi-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: var(--chourangi-black);
	background-image: radial-gradient(circle at 30% 30%, #4a3c28, var(--chourangi-black) 70%);
}

.chourangi-hero::before {
	content: '';
	position: absolute;
	inset: -6%;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	animation: chourangi-kenburns 26s ease-in-out infinite alternate;
	z-index: 0;
}

.chourangi-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(34, 30, 24, 0.25), rgba(34, 30, 24, 0.7));
	z-index: 1;
}

.chourangi-hero > .elementor-container {
	position: relative;
	z-index: 2;
}

/* OpenTable Diners' Choice medallion — sits centred on the seam between the
   hero and the section below, half overlapping each.

   Why it's driven by a custom property rather than fixed pixels: the hero is
   min-height:100vh, so as browser zoom rises the hero shrinks in CSS px while
   the centred logo/tagline/button stack does not. With a hard-coded -70px
   pull-up the buttons collided with the badge from 100% zoom upward (measured
   -6px at 100%, -50px at 125%). Tying the overlap to the badge size and
   reserving matching room under the hero content keeps a >=36px gap from 50%
   through 175% zoom. */
:root {
	--chourangi-award-size: 140px;
}

.chourangi-hero__award {
	position: relative;
	z-index: 10;
	margin-top: calc(var(--chourangi-award-size) * -0.5);
}

.chourangi-hero__award .elementor-container,
.chourangi-hero__award .elementor-column,
.chourangi-hero__award .elementor-widget-wrap {
	padding: 0;
}

.chourangi-hero__award img {
	display: block;
	margin: 0 auto;
	width: var(--chourangi-award-size);
	max-width: 34vw;
	height: auto;
}

.chourangi-hero__col {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

@keyframes chourangi-kenburns {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.08);
	}
}

.chourangi-fade-up-in {
	animation: chourangi-fade-up-in 1.1s ease-out both;
}

@keyframes chourangi-fade-up-in {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Scroll reveal — fade + 20px rise, 600ms ease-out, once.
   Hidden state is scoped under .js (set by an inline script in <head>)
   so content stays visible by default if JS fails, is disabled, or for
   crawlers/print — only enhanced browsers ever hide it pre-reveal. */
.js:not(.chourangi-in-editor) .chourangi-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.js:not(.chourangi-in-editor) .chourangi-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Menu preview — diamond bullet rows */
.chourangi-menu-list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 720px;
}

.chourangi-menu-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 12px;
	border-bottom: 1px solid var(--chourangi-light-gold);
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.chourangi-menu-row:hover {
	background-color: rgba(230, 200, 130, 0.1);
	transform: translateX(10px);
}

.chourangi-menu-row__name {
	position: relative;
	padding-left: 22px;
	font-family: var(--chourangi-font-heading);
	font-size: 22px;
	font-weight: 400;
	color: var(--chourangi-black);
}

.chourangi-menu-row__name::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	background-color: var(--chourangi-antique-gold);
	transform: translateY(-50%) rotate(45deg);
}

.chourangi-menu-row__price {
	font-family: var(--chourangi-font-body);
	font-size: 14px;
	letter-spacing: 0.05em;
	color: var(--chourangi-antique-gold);
	white-space: nowrap;
}

.chourangi-menu-preview__footer {
	text-align: center;
	margin-top: 56px;
}

/* Image placeholder — stands in for client photography */
.chourangi-image-placeholder {
	position: relative;
	aspect-ratio: 4 / 5;
	background: linear-gradient(135deg, var(--chourangi-sand), #c9ac6a55);
	display: flex;
	align-items: flex-end;
	padding: 24px;
	overflow: hidden;
}

.chourangi-image-placeholder__caption {
	font-family: var(--chourangi-font-body);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--chourangi-black);
}

/* Interior / Private Dining */
.chourangi-interior__text-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

/* Gallery */
.chourangi-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
}

.chourangi-gallery__item {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: linear-gradient(135deg, #3a2f22, var(--chourangi-black));
	transition: transform 0.7s ease;
}

.chourangi-gallery__item:nth-child(3n+2) {
	background: linear-gradient(135deg, var(--chourangi-sand), #c9ac6a66);
}

.chourangi-gallery__item:nth-child(3n) {
	background: linear-gradient(135deg, #221e18, #9c7b2e55);
}

.chourangi-gallery__item:hover {
	transform: scale(1.04);
}

.chourangi-gallery__item span {
	position: absolute;
	left: 16px;
	bottom: 16px;
	font-family: var(--chourangi-font-body);
	font-size: 10px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--chourangi-white);
}

.chourangi-gallery__item:nth-child(3n+2) span,
.chourangi-gallery__item:nth-child(3n) span {
	color: var(--chourangi-black);
}

/* ==========================================================================
   Homepage mockup components (Chourangi website mockup, Aug 2026)
   ========================================================================== */

/* Generic photo placeholder — stands in for client photography */
.chourangi-photo {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--chourangi-sand), #c9ac6a55);
}

.chourangi-photo:nth-child(3n+2) {
	background: linear-gradient(135deg, #3a2f22, var(--chourangi-black));
}

.chourangi-photo:nth-child(3n) {
	background: linear-gradient(135deg, #221e18, #9c7b2e55);
}

.chourangi-photo__caption {
	position: absolute;
	left: 20px;
	bottom: 20px;
	font-family: var(--chourangi-font-heading);
	font-style: italic;
	font-size: 15px;
	color: var(--chourangi-white);
}

.chourangi-dots {
	position: absolute;
	bottom: 16px;
	right: 16px;
	display: flex;
	gap: 6px;
}

.chourangi-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
}

.chourangi-dots span:first-child {
	background-color: var(--chourangi-white);
}

/* Hero extras — badge, flourish, multi-button row, explore indicator */
.chourangi-hero {
	/* Bottom value reserves room for the award medallion that overlaps the
	   seam below — see --chourangi-award-size above. Keep it in this
	   shorthand: an earlier standalone padding-bottom rule gets reset here. */
	padding: 0 90px calc(var(--chourangi-award-size) * 0.5 + 64px);
}

.chourangi-hero__badge {
	position: absolute;
	top: 32px;
	right: 0;
	width: 108px;
	height: 108px;
	border: 1px solid rgba(251, 247, 239, 0.4);
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	text-align: center;
	color: var(--chourangi-white);
	font-family: var(--chourangi-font-body);
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	z-index: 2;
}

.chourangi-hero__badge strong {
	font-family: var(--chourangi-font-heading);
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: none;
}

.chourangi-hero__flourish {
	width: 34px;
	height: 34px;
	color: var(--chourangi-light-gold);
	margin: 0 0 28px;
}

.chourangi-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Not position:absolute: Elementor wraps every widget in its own
   position:relative container, which would intercept the offset before it
   ever reaches .chourangi-hero. Sitting in normal flow with a generous
   top margin reads the same visually, since the hero content is already
   vertically centered and this is the last element in it. */
.chourangi-explore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 72px;
	color: var(--chourangi-white);
}

.chourangi-explore span {
	font-family: var(--chourangi-font-body);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.chourangi-explore::after {
	content: '';
	width: 1px;
	height: 44px;
	background-color: var(--chourangi-light-gold);
}

/* Centered flourish heading — line / diamond either side of a heading */
.chourangi-flourish-heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin: 0 0 16px;
}

.chourangi-flourish-heading .line {
	position: relative;
	flex: 0 1 120px;
	height: 1px;
	background-color: var(--chourangi-antique-gold);
}

.chourangi-flourish-heading .line::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 6px;
	height: 6px;
	background-color: var(--chourangi-antique-gold);
	transform: translateY(-50%) rotate(45deg);
}

.chourangi-flourish-heading .line--left::after {
	right: -13px;
}

.chourangi-flourish-heading .line--right::after {
	left: -13px;
}

.chourangi-flourish-heading h2 {
	margin: 0;
}

.chourangi-intro-band {
	text-align: center;
}

.chourangi-intro-band__sub {
	font-family: var(--chourangi-font-body);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--chourangi-antique-gold);
}

/* Two-column split layout, reused across several sections.
   Note: this class is applied to the outer <section>, but Elementor's real
   column-width mechanism lives one level down on .elementor-container (a
   flex row) — the section itself has only that single child. Turning the
   section into a grid here would put that one child in the first track and
   leave the second empty, crushing the whole row into half the page width.
   So this only adds gap/vertical-centering to the existing flex container;
   Elementor's own 50/50 column widths do the rest. */
.chourangi-split > .elementor-container {
	gap: 64px;
	align-items: center;
}

.chourangi-split__col--center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.chourangi-split__rule {
	border: none;
	border-top: 1px solid var(--chourangi-antique-gold);
	margin: 0 0 32px;
}

/* Stat cards */
.chourangi-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.chourangi-stat__image {
	aspect-ratio: 4 / 3;
	margin-bottom: 20px;
}

.chourangi-stat__label {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.chourangi-stat__num {
	font-family: var(--chourangi-font-body);
	font-size: 15px;
	color: var(--chourangi-antique-gold);
}

.chourangi-stat__name {
	font-family: var(--chourangi-font-heading);
	font-weight: 400;
	font-size: 26px;
	color: var(--chourangi-black);
}

.chourangi-stat__tbc {
	font-family: var(--chourangi-font-body);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--chourangi-antique-gold);
	vertical-align: super;
	margin-left: 2px;
}

/* Menu category list */
.chourangi-menu-cats {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--chourangi-antique-gold);
}

.chourangi-menu-cats li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 4px;
	border-bottom: 1px solid var(--chourangi-antique-gold);
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.chourangi-menu-cats li:hover {
	background-color: rgba(230, 200, 130, 0.1);
	transform: translateX(10px);
}

.chourangi-menu-cats .name {
	position: relative;
	padding-left: 22px;
	font-family: var(--chourangi-font-heading);
	font-size: 26px;
	font-weight: 400;
	color: var(--chourangi-black);
}

.chourangi-menu-cats .name::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	background-color: var(--chourangi-antique-gold);
	transform: translateY(-50%) rotate(45deg);
}

.chourangi-menu-cats .view {
	font-family: var(--chourangi-font-body);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--chourangi-antique-gold);
	white-space: nowrap;
}

/* Image collage — one large image, two smaller below */
.chourangi-collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}

.chourangi-collage__large {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 10;
}

.chourangi-collage__small {
	aspect-ratio: 1 / 1;
}

/* Reservations grid with embedded dark panel */
.chourangi-reservations__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 160px;
	gap: 4px;
}

.chourangi-reservations__grid .chourangi-photo--tall {
	grid-row: span 3;
}

.chourangi-reservations__panel {
	grid-column: 2 / 4;
	grid-row: span 2;
	background-color: var(--chourangi-black);
	color: var(--chourangi-cream);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
}

.chourangi-reservations__panel .chourangi-eyebrow {
	margin-bottom: 12px;
}

.chourangi-reservations__panel h2 {
	font-family: var(--chourangi-font-heading);
	font-weight: 300;
	font-size: 30px;
	line-height: 1.2;
	color: var(--chourangi-white);
	margin: 0 0 24px;
}

/* Award band */
.chourangi-award-band {
	background-color: var(--chourangi-black);
	padding: 72px 0;
	text-align: center;
}

.chourangi-award-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--chourangi-antique-gold);
	padding: 32px 56px;
}

.chourangi-award-badge__title {
	font-family: var(--chourangi-font-heading);
	font-size: 20px;
	color: var(--chourangi-white);
}

.chourangi-award-badge__sub {
	font-family: var(--chourangi-font-body);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--chourangi-light-gold);
}

@media (prefers-reduced-motion: reduce) {
	.chourangi-hero::before,
	.chourangi-fade-up-in,
	.chourangi-reveal,
	.chourangi-gallery__item,
	.chourangi-menu-row {
		animation: none !important;
		transition: none !important;
	}

	.chourangi-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Gift Voucher page — restyles the "Gift Vouchers for WooCommerce" plugin's
   [gvwc_voucher_catalog] and [gvwc_check_redeem_voucher] shortcode output to
   match the site's fonts/colors/buttons instead of WooCommerce's defaults.
   Our own image/heading in the purchase panel replace the shortcode's own
   thumbnail + title, which are hidden rather than removed so the plugin's
   markup (and its add-to-cart behaviour) stays untouched. */
.chourangi-giftvoucher-purchase ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
}

.chourangi-giftvoucher-purchase ul.products li.product {
	text-align: left;
}

.chourangi-giftvoucher-purchase ul.products li.product a.woocommerce-LoopProduct-link {
	display: block;
	text-decoration: none;
}

.chourangi-giftvoucher-purchase ul.products li.product img,
.chourangi-giftvoucher-purchase ul.products li.product .woocommerce-loop-product__title {
	display: none;
}

.chourangi-giftvoucher-purchase ul.products li.product .price {
	display: block;
	font-family: var(--chourangi-font-heading);
	font-weight: 400;
	font-size: 30px;
	color: var(--chourangi-antique-gold);
	margin: 4px 0 20px;
}

.chourangi-giftvoucher-purchase ul.products li.product .price .woocommerce-Price-currencySymbol {
	font-size: 0.7em;
}

.chourangi-giftvoucher-purchase a.add_to_cart_button {
	display: inline-block;
	font-family: var(--chourangi-font-body);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--chourangi-white);
	background-color: var(--chourangi-black);
	border: 1px solid var(--chourangi-black);
	padding: 16px 40px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.chourangi-giftvoucher-purchase a.add_to_cart_button:hover {
	background-color: var(--chourangi-antique-gold);
	border-color: var(--chourangi-antique-gold);
	color: var(--chourangi-white);
}

.chourangi-giftvoucher-redeem .gvwc-check-form {
	max-width: 420px;
	margin: 32px auto 0;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

.chourangi-giftvoucher-redeem .gvwc-check-form label {
	width: 100%;
	text-align: center;
	font-family: var(--chourangi-font-body);
	font-size: 13px;
	color: var(--chourangi-black);
	margin-bottom: 8px;
}

.chourangi-giftvoucher-redeem .gvwc-check-form input[type="text"] {
	flex: 1;
	min-width: 220px;
	padding: 14px 16px;
	border: 1px solid var(--chourangi-sand);
	background-color: var(--chourangi-white);
	font-family: var(--chourangi-font-body);
	font-size: 14px;
	color: var(--chourangi-black);
}

.chourangi-giftvoucher-redeem .gvwc-check-form input[type="text"]:focus {
	outline: none;
	border-color: var(--chourangi-antique-gold);
}

.chourangi-giftvoucher-redeem .gvwc-check-form button[type="submit"] {
	font-family: var(--chourangi-font-body);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--chourangi-white);
	background-color: var(--chourangi-black);
	border: 1px solid var(--chourangi-black);
	padding: 0 28px;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.chourangi-giftvoucher-redeem .gvwc-check-form button[type="submit"]:hover {
	background-color: var(--chourangi-antique-gold);
	border-color: var(--chourangi-antique-gold);
}

/* Chourangi Gift Voucher product (post 279) uses the default WooCommerce
   single-product template, not the custom Elementor page — hide the
   leftover generic widget sidebar (Search/Pages/Archives/Categories) there.
   Reviews are turned off via the product's own "Enable reviews" setting. */
body.postid-279 #sidebar {
	display: none;
}

/* Site-wide fix: WooCommerce's default single-product template floats
   .images and .summary side by side (left/right) but nothing clears them,
   so div.product collapses to zero height and the footer renders on top of
   the still-floated content below it. Affects every individual product
   page using the default template, not just one product. */
.woocommerce div.product:after {
	content: "";
	display: table;
	clear: both;
}

/* Order Online page — the live Next Order ordering site (menu, cart,
   checkout, payment), embedded exactly as it runs on its own domain. */
.chourangi-order-online-section {
	margin: 0;
}

.chourangi-order-online-embed {
	width: 100%;
	height: 85vh;
	min-height: 700px;
}

.chourangi-order-online-embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

@media (max-width: 600px) {
	.chourangi-order-online-embed {
		height: calc(100vh - 140px);
		min-height: 600px;
	}
}

/* Blog post detail — template-parts/content-single.php. Reading-width
   column (not the full .chourangi-main width) for the editorial layout:
   eyebrow + title, featured image with an overlay caption, article body,
   and a "Back to Journal" link. */
.chourangi-post__container {
	max-width: 1140px;
	margin: 0 auto;
}

.chourangi-post__layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 60px;
	align-items: start;
}

.chourangi-post__main {
	max-width: 760px;
	min-width: 0;
}

.chourangi-post__header {
	margin-bottom: 32px;
}

.chourangi-post__meta {
	font-family: var(--chourangi-font-body);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--chourangi-antique-gold);
	margin: 0 0 16px;
}

.chourangi-post__meta-sep {
	margin: 0 8px;
	opacity: 0.6;
}

.chourangi-post__title {
	font-family: var(--chourangi-font-heading);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.2;
	color: var(--chourangi-black);
	margin: 0;
}

.chourangi-post__featured {
	position: relative;
	margin: 0 0 40px;
	aspect-ratio: 16 / 9;
	background-color: var(--chourangi-sand);
	overflow: hidden;
}

.chourangi-post__featured img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.chourangi-post__featured-caption {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 32px 24px 16px;
	background: linear-gradient(to top, rgba(34, 30, 24, 0.75), transparent);
	color: var(--chourangi-white);
	font-family: var(--chourangi-font-body);
	font-size: 14px;
	margin: 0;
}

/* Article body typography — targets standard block-editor output, so any
   post written normally in the editor gets this styling automatically. */
.chourangi-post__content {
	font-family: var(--chourangi-font-body);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--chourangi-gray, #5C564A);
}

.chourangi-post__content p {
	margin: 0 0 24px;
}

.chourangi-post__content h2 {
	font-family: var(--chourangi-font-heading);
	font-weight: 400;
	font-size: 28px;
	color: var(--chourangi-black);
	margin: 48px 0 20px;
}

.chourangi-post__content h3 {
	font-family: var(--chourangi-font-heading);
	font-weight: 400;
	font-size: 22px;
	color: var(--chourangi-black);
	margin: 36px 0 16px;
}

.chourangi-post__content blockquote,
.chourangi-post__content .wp-block-quote {
	margin: 32px 0;
	padding: 4px 0 4px 28px;
	border-left: 3px solid var(--chourangi-antique-gold);
	font-family: var(--chourangi-font-heading);
	font-style: italic;
	font-size: 22px;
	line-height: 1.5;
	color: var(--chourangi-black);
}

.chourangi-post__content blockquote p,
.chourangi-post__content .wp-block-quote p {
	margin: 0;
}

.chourangi-post__content .wp-block-image,
.chourangi-post__content figure {
	margin: 40px 0;
}

.chourangi-post__content .wp-block-image img,
.chourangi-post__content figure img {
	width: 100%;
	height: auto;
	display: block;
}

.chourangi-post__content .wp-block-image figcaption,
.chourangi-post__content figure figcaption {
	margin-top: 10px;
	font-family: var(--chourangi-font-body);
	font-size: 13px;
	font-style: italic;
	color: #8a8378;
	text-align: center;
}

.chourangi-post__content hr {
	border: none;
	border-top: 1px solid var(--chourangi-sand);
	margin: 48px 0;
}

.chourangi-post__content a {
	color: var(--chourangi-antique-gold);
	text-decoration: underline;
}

.chourangi-post__footer {
	margin-top: 40px;
}

.chourangi-post__back {
	display: inline-block;
	padding: 14px 28px;
	border: 1px solid var(--chourangi-black);
	font-family: var(--chourangi-font-body);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--chourangi-black);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.chourangi-post__back:hover {
	background-color: var(--chourangi-black);
	color: var(--chourangi-white);
}

/* "Now Booking" CTA banner — [chourangi_booking_cta] shortcode, dropped
   into any post's content wherever the author wants it. */
.chourangi-booking-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	background-color: var(--chourangi-black);
	padding: 40px;
	margin: 40px 0;
}

.chourangi-post__content .chourangi-booking-cta__eyebrow {
	font-family: var(--chourangi-font-body);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--chourangi-antique-gold);
	margin: 0 0 8px;
}

.chourangi-post__content .chourangi-booking-cta__title {
	font-family: var(--chourangi-font-heading);
	font-weight: 400;
	font-size: 26px;
	color: var(--chourangi-white);
	margin: 0 0 10px;
}

.chourangi-post__content .chourangi-booking-cta__desc {
	font-family: var(--chourangi-font-body);
	font-size: 14px;
	font-weight: 300;
	color: rgba(251, 247, 239, 0.75);
	margin: 0;
	max-width: 420px;
}

.chourangi-booking-cta__actions {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.chourangi-post__content .chourangi-booking-cta__btn {
	display: inline-block;
	padding: 15px 28px;
	font-family: var(--chourangi-font-body);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid var(--chourangi-antique-gold);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.chourangi-post__content .chourangi-booking-cta__btn--primary {
	background-color: var(--chourangi-antique-gold);
	color: var(--chourangi-black);
}

.chourangi-post__content .chourangi-booking-cta__btn--primary:hover {
	background-color: var(--chourangi-white);
	border-color: var(--chourangi-white);
}

.chourangi-post__content .chourangi-booking-cta__btn--outline {
	background-color: transparent;
	color: var(--chourangi-white);
}

.chourangi-post__content .chourangi-booking-cta__btn--outline:hover {
	background-color: var(--chourangi-white);
	color: var(--chourangi-black);
	border-color: var(--chourangi-white);
}

/* Blog post sidebar — Search, Categories, Recent Posts. See
   template-parts/blog-sidebar.php. */
.chourangi-post__sidebar {
	position: sticky;
	top: 40px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.chourangi-widget__title {
	font-family: var(--chourangi-font-heading);
	font-weight: 400;
	font-size: 18px;
	color: var(--chourangi-black);
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--chourangi-sand);
}

.chourangi-widget .search-form {
	display: flex;
	border: 1px solid var(--chourangi-sand);
}

.chourangi-widget .search-form label {
	flex: 1;
	margin: 0;
}

.chourangi-widget .search-form .search-field {
	width: 100%;
	border: none;
	padding: 10px 12px;
	font-family: var(--chourangi-font-body);
	font-size: 13px;
	color: var(--chourangi-black);
	background: transparent;
}

.chourangi-widget .search-form .search-field:focus {
	outline: none;
}

.chourangi-widget .search-form .search-submit {
	border: none;
	border-left: 1px solid var(--chourangi-sand);
	background-color: var(--chourangi-black);
	color: var(--chourangi-white);
	padding: 0 16px;
	font-family: var(--chourangi-font-body);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.chourangi-widget .search-form .search-submit:hover {
	background-color: var(--chourangi-antique-gold);
}

.chourangi-widget__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.chourangi-widget__list li {
	border-bottom: 1px solid var(--chourangi-sand);
}

.chourangi-widget__list li:last-child {
	border-bottom: none;
}

.chourangi-widget__list a {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 0;
	font-family: var(--chourangi-font-body);
	font-size: 14px;
	font-weight: 300;
	color: var(--chourangi-black);
	text-decoration: none;
	transition: color 0.2s ease;
}

.chourangi-widget__list a:hover {
	color: var(--chourangi-antique-gold);
}

.chourangi-widget__recent-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.chourangi-widget__recent-item {
	border-bottom: 1px solid var(--chourangi-sand);
	padding: 14px 0;
}

.chourangi-widget__recent-item:first-child {
	padding-top: 0;
}

.chourangi-widget__recent-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.chourangi-widget__recent-item a {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.chourangi-widget__recent-thumb {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	overflow: hidden;
	background-color: var(--chourangi-sand);
}

.chourangi-widget__recent-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.chourangi-widget__recent-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.chourangi-widget__recent-title {
	font-family: var(--chourangi-font-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--chourangi-black);
	line-height: 1.4;
}

.chourangi-widget__recent-date {
	font-family: var(--chourangi-font-body);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--chourangi-antique-gold);
}

@media (max-width: 900px) {
	.chourangi-post__layout {
		grid-template-columns: 1fr;
	}

	.chourangi-post__main {
		max-width: none;
	}

	.chourangi-post__sidebar {
		position: static;
		margin-top: 20px;
	}
}

@media (max-width: 640px) {
	.chourangi-post__title {
		font-size: 30px;
	}

	.chourangi-post__content h2 {
		font-size: 24px;
	}

	.chourangi-post__content blockquote,
	.chourangi-post__content .wp-block-quote {
		font-size: 19px;
	}

	.chourangi-booking-cta {
		padding: 28px;
	}

	.chourangi-booking-cta__actions {
		width: 100%;
	}

	.chourangi-booking-cta__btn {
		flex: 1;
		text-align: center;
	}
}

/* Blog listing grid (Essential Addons "Post Grid" widget) — the widget's
   default "medium" image size scales proportionally instead of cropping, so
   a square photo and a wide photo render at different heights. Force a fixed
   aspect ratio + object-fit so every card thumbnail is the same size no
   matter what dimensions the uploaded image is. */
.eael-entry-thumbnail {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.eael-entry-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Our Story page — flush image + dark panel hero split. The section uses
   Elementor's "No Gap" columns setting so the image and panel sit flush.
   Elementor's row does NOT stretch the two columns to match each other's
   height by default, so a percentage-height image would have nothing to
   inherit from — use a fixed height on both sides instead. */
.chourangi-story-hero .elementor-column:nth-child(2) {
	min-height: 520px;
}

.chourangi-story-hero .elementor-widget-image img {
	width: 100%;
	height: 520px;
	object-fit: cover;
	display: block;
}

.chourangi-story-hero .elementor-column:nth-child(2) > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 520px;
}

.chourangi-story-hero .elementor-column:nth-child(2) .elementor-widget-heading {
	margin-bottom: 20px;
}

.chourangi-story-hero .elementor-column:nth-child(2) .elementor-widget-text-editor {
	margin-bottom: 32px;
}

.chourangi-story-hero .elementor-button {
	border-radius: 0;
	padding: 16px 32px;
}

/* Our Story page — large photo with a smaller accent photo layered over its
   bottom-left corner, built as a self-contained html widget. */
.chourangi-story-overlay {
	position: relative;
}

.chourangi-story-overlay__main {
	width: 100%;
	height: auto;
	display: block;
}

.chourangi-story-overlay__accent {
	position: absolute;
	left: 24px;
	bottom: 24px;
	width: 38%;
	box-shadow: 0 20px 40px rgba(34, 30, 24, 0.35);
}

.chourangi-story-overlay__accent img {
	width: 100%;
	height: auto;
	display: block;
	border: 8px solid #F6F1E7;
}

@media (max-width: 900px) {
	.chourangi-story-hero .elementor-column:nth-child(2),
	.chourangi-story-hero .elementor-column:nth-child(2) > .elementor-widget-wrap {
		min-height: 0;
	}

	.chourangi-story-hero .elementor-widget-image img {
		height: 320px;
	}
}

/* Directional scroll-reveal — same is-visible toggle as .chourangi-reveal
   (see main.js's IntersectionObserver, which watches any .chourangi-reveal
   element), but slides in from a side instead of fading up. Compound
   selector so it reliably overrides the base translateY regardless of
   source order. */
.js:not(.chourangi-in-editor) .chourangi-reveal.chourangi-reveal--from-left {
	transform: translateX(-60px);
}

.js:not(.chourangi-in-editor) .chourangi-reveal.chourangi-reveal--from-right {
	transform: translateX(60px);
}

.js:not(.chourangi-in-editor) .chourangi-reveal.chourangi-reveal--from-left.is-visible,
.js:not(.chourangi-in-editor) .chourangi-reveal.chourangi-reveal--from-right.is-visible {
	transform: translateX(0);
}

/* Our Story page — third section's image side reuses the same
   .chourangi-story-overlay composition as the second section, just with the
   accent photo anchored to the opposite (right) corner to match the layout.
   Sizing itself is handled inline in that section's html widget, since it's
   a self-contained block rather than a native Elementor image widget. */
.chourangi-story-overlay__accent--right {
	left: auto;
	right: 24px;
}