/*
 * Bridge + WordPress layer for On the Edge.
 *
 * 1. Maps the design's tokens onto the --ep-* tokens the shared events module
 *    reads, so the module inherits the brand without forking its CSS.
 * 2. Restyles the events module to sit inside the design's .cal-card shell.
 * 3. Adds the bits a static mockup never needs: editor blocks, comments,
 *    pagination, screen-reader utilities.
 */

/* ---------------------------------------------------------- token bridge */

:root {
	--ep-accent: var(--ember);
	--ep-accent-contrast: #fff;
	--ep-ink: var(--ink);
	--ep-ink-soft: var(--ink-soft);
	--ep-line: var(--line);
	--ep-surface: var(--paper-raised);
	--ep-surface-alt: var(--paper);
	--ep-radius: 8px;
	--ep-tap: 44px;
}

/* ------------------------------------------------- events module restyle */

/* The module sits inside .cal-card, which already supplies the padding,
   border and shadow - so strip the module's own card chrome here. */
.cal-card .ep-cal { --ep-gap: 10px; }

.cal-card .ep-cal__nav { margin-bottom: 16px; }
.cal-card .ep-cal__title {
	font-family: "Fraunces", Georgia, serif;
	font-size: 20px;
	font-weight: 600;
}
.cal-card .ep-cal__arrow {
	width: 38px;
	height: 38px;
	border-color: var(--line);
	color: var(--ink);
}
.cal-card .ep-cal__arrow:hover { background: var(--mist); }

.cal-card .ep-cal__dow {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--ink-soft);
}

.cal-card .ep-cal__day {
	border-radius: 5px;
	background: var(--paper);
	border: 1px solid var(--line);
}
.cal-card .ep-cal__day.is-today {
	border-color: var(--ember);
	box-shadow: 0 0 0 1px var(--ember) inset;
}
.cal-card .ep-cal__num { font-size: 12px; font-variant-numeric: tabular-nums; }

.cal-card .ep-cal__event {
	background: var(--ember);
	border-left: 0;
	border-radius: 4px;
	color: #fff;
}
.cal-card .ep-cal__event:hover { background: var(--ember-deep); }
/* Solid white, not rgba(.8): over the accent that measured 3.89:1,
   below the 4.5:1 AA minimum at this size. Solid is ~5.3:1. */
.cal-card .ep-cal__event-time { color: #fff; }

/* Upcoming list on the event archive / single pages. */
.ep-event {
	border-radius: 8px;
	box-shadow: var(--shadow);
}
.ep-event__date { background: var(--ember); border-radius: 6px; }
.ep-event__title { font-family: "Fraunces", Georgia, serif; }
.ep-event__cta {
	border-radius: var(--radius);
	background: var(--ember);
	font-size: 13px;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.ep-event__cta:hover { background: var(--ember-deep); }

@media (min-width: 768px) {
	.cal-card .ep-cal__day { min-height: 0; aspect-ratio: 1 / 1; padding: 5px; }
	.cal-card .ep-cal__event { font-size: 8.5px; padding: 1px 4px; font-weight: 700; }
	.cal-card .ep-cal__event-time { display: none; } /* no room in a square cell */
}

/* ------------------------------------------------------ WordPress basics */

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed; left: 8px; top: 8px;
	z-index: 999;
	width: auto; height: auto;
	clip-path: none;
	padding: 10px 16px;
	background: var(--ember);
	color: #fff;
}

/* Photos in card art.
   .dish-art is a flex container that bottom-aligns the .tag badge, so the
   image must fill it absolutely and sit behind the badge rather than push it. */
.dish-art.has-thumb { background: none; }
.dish-art.has-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.dish-art.has-thumb .tag { position: relative; z-index: 1; }

/* Gallery mosaic images. */
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-grid a:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.dish-card .dish-body h3 a { color: inherit; text-decoration: none; }
.dish-card .dish-body h3 a:hover { color: var(--ember); }

/* Single post / page prose. */
.entry-content { max-width: 68ch; }
/* Single posts only: the prose lines up with the .page-hero directly above it,
   i.e. the full .wrap width, instead of the 68ch reading measure that pages keep. */
.single .entry-content { max-width: none; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font-family: "Fraunces", Georgia, serif; margin-top: 1.8em; }
.entry-content h3 { font-family: "Fraunces", Georgia, serif; margin-top: 1.5em; }
.entry-content img, .entry-content figure { border-radius: 8px; }
.entry-content blockquote {
	margin-inline: 0;
	padding-left: 16px;
	border-left: 3px solid var(--ember);
	color: var(--ink-soft);
}
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li + li { margin-top: .35em; }
.entry-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.entry-content td, .entry-content th { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.entry-content a { color: var(--ember); }

.alignwide { max-width: min(100%, 1180px); }
.alignfull  { max-width: none; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text, .wp-element-caption {
	font-size: 12.5px;
	color: var(--ink-soft);
	margin-top: 6px;
}

/* Pagination + comments, styled to the design.
   NOTE: must stay scoped to .pagination — WordPress names its pagination
   wrapper `.nav-links`, which is the exact class the design uses for the site
   navigation <ul>. Unscoped, this rule pushes the header nav down 28px and
   breaks the mobile drawer's position. */
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--ink);
	font-weight: 600;
}
.page-numbers.current, .page-numbers:hover {
	background: var(--ember);
	border-color: var(--ember);
	color: #fff;
}

.comment-list { list-style: none; padding: 0; }
.comment-list li { border-top: 1px solid var(--line); padding: 16px 0; }
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	font: inherit;
}

/* The post-content area of an archive/single needs the section rhythm the
   mockup only ever applied to <section> elements. */
.page-hero {
	padding: 48px 0 8px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 32px;
}
.page-hero h1 {
	font-family: "Fraunces", Georgia, serif;
	font-size: clamp(30px, 4.5vw, 46px);
	line-height: 1.1;
}
.post-meta { color: var(--ink-soft); font-size: 13px; margin-top: 10px; }

/* ------------------------------------------------------- full menu accordion */

/* The design's panel was sized for a sentence of placeholder copy; a real menu
   section needs the full width and two columns on desktop.
   Must be .acc-item .acc-panel--menu: the design's `.acc-item .acc-panel`
   is two classes and outranks a single-class override. */
.acc-item .acc-panel--menu { max-width: none; }

.menu-note {
	margin: 0 0 4px;
	font-size: 12.5px;
	font-style: italic;
	color: var(--ink-soft);
}

.menu-line__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
}
/* Dotted leader ties the name to its price across the gap. */
.menu-line__head::before {
	content: "";
	order: 1;
	flex: 1 1 auto;
	align-self: end;
	margin-bottom: 4px;
	border-bottom: 1px dotted var(--line);
	min-width: 12px;
}
.menu-line__head b { order: 0; }
.menu-price {
	order: 2;
	font-style: normal;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--ember-deep);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (min-width: 760px) {
	.acc-item .acc-panel--menu .menu-lines {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 44px;
		align-items: start;
	}
}

.menu-advisory {
	margin-top: 16px;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--ink-soft);
	max-width: 88ch;
}


/* =======================================================================
   Mobile header: left-hand drawer
   =======================================================================
   Two bugs fixed here.

   1. .site-header carries `backdrop-filter`, which makes it the containing
      block for position:fixed descendants. The design's fixed .nav-links was
      therefore laid out against the 64px-tall header instead of the viewport,
      so the open menu rendered as a ~37px strip with the links running off
      screen. Moving the frosted effect onto a ::before pseudo-element keeps
      the look and hands fixed positioning back to the viewport.

   2. .hero-inner's `padding: 52px 0 …` shorthand zeroed the horizontal
      padding .wrap supplies, so hero text sat flush against both screen
      edges. Desktop hid it because the 1180px max-width left room either side.
   ======================================================================= */

.site-header {
	backdrop-filter: none;      /* moved to ::before - see note 1 */
	background: transparent;
	isolation: isolate;
}
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--paper) 88%, transparent);
	backdrop-filter: blur(10px) saturate(1.1);
}

/* Restore the wrap padding the hero shorthand wiped out. */
.hero .hero-inner { padding-inline: 28px; }

/* Photo variant of the Live Music art slot. The design's gradient is 5:4 and
   the supplied photo matches, so no aspect override is needed here. */
.split-art--photo { background: var(--marine-deep); }
.split-art__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Keep the caption above the photo. */
.split-art--photo .hero-art-label { z-index: 1; }

/* Photo variant of the hero art slot. Mirrors Dockside's implementation. */
.hero-art--photo { background: var(--marine-deep); }
.hero-art__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Keep the caption legible over a bright sunset. */
.hero-art--photo .hero-art-label { z-index: 1; }

/* The design squashes .hero-art to 16:10 below 900px. That was fine for an
   abstract gradient, but a centre-crop of a portrait photo to 16:10 keeps only
   a thin horizontal band of it - it decapitates whatever the subject is. Give
   the photo variant a portrait-ish crop on phones instead, capped so it cannot
   push the rest of the hero off screen. Selector depth must match the design's
   `@media .hero-art`, hence .hero-art repeated via the compound class. */
@media (max-width: 900px) {
	.hero-art.hero-art--photo { aspect-ratio: 4 / 5; max-height: 70vh; }
}
@media (max-width: 560px) {
	.hero-art.hero-art--photo { aspect-ratio: 3 / 4; }
}

@media (max-width: 640px) {
	.hero .hero-inner { padding-inline: 22px; }
	.hero-copy .lede { max-width: none; }
}

@media (max-width: 1040px) {
	/* Burger hard against the left edge, brand beside it, actions right. */
	.nav-row { gap: 10px; }
	.menu-btn { order: -1; }
	.brand { margin-right: auto; }

	/* Left-hand drawer. */
	.nav-links {
		position: fixed;
		inset: 0 auto 0 0;
		width: min(84vw, 330px);
		max-width: 330px;
		height: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		/* Drawer covers the header, so it needs no clearance for it - just
		   breathing room plus any notch inset. */
		padding: calc(30px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));
		padding-left: calc(22px + env(safe-area-inset-left));
		background: var(--paper);
		border-top: 0;
		border-right: 1px solid var(--line);
		transform: translateX(-100%);
		opacity: 1;                 /* slide only; no cross-fade */
		pointer-events: none;
		overflow-y: auto;
		overscroll-behavior: contain;
		z-index: 60;
		transition: transform .26s cubic-bezier(.4, 0, .2, 1), box-shadow .26s ease;
	}
	.menu-toggle:checked ~ .nav-links {
		transform: translateX(0);
		pointer-events: auto;
		box-shadow: 0 0 50px rgba(0, 0, 0, .3);
	}
	.nav-links a {
		padding: 15px 0;
		width: 100%;
		min-height: 48px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid var(--line);
		font-size: 15.5px;
	}
	.nav-links li:last-child a { border-bottom: 0; }

	/* Dim + tap-to-close behind the drawer. */
	.nav-scrim {
		position: fixed;
		inset: 0;
		z-index: 55;
		background: rgba(8, 24, 32, .5);
		opacity: 0;
		pointer-events: none;
		transition: opacity .26s ease;
		cursor: pointer;
	}
	.menu-toggle:checked ~ .nav-scrim { opacity: 1; pointer-events: auto; }

	/* Don't let the page scroll behind an open drawer. */
	body:has(.menu-toggle:checked) { overflow: hidden; }
}

@media (min-width: 1041px) {
	.nav-scrim { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.nav-links, .nav-scrim { transition: none; }
}



/* ------------------------------------------------------- live Google map */

.map-embed {
	position: relative;
	/* Grid item stretches to the info panel's height on desktop; on mobile the
	   grid collapses to one column, so an absolutely-positioned iframe would
	   otherwise have nothing to size against. */
	min-height: 340px;
	background: var(--marine-deep);
}
.map-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* The design's CTA was white text over a dark illustration; over a real map
   it needs its own backdrop to stay legible. */
.map-cta {
	z-index: 2;
	/* Clear Google's attribution strip along the bottom of the embed - their
	   terms require it stays visible. */
	bottom: 34px;
	padding: 12px 16px;
	border-radius: 6px;
	background: rgba(10, 37, 48, .86);
	color: #fff;
	text-decoration: none;
	transition: background .15s ease;
}
.map-cta:hover,
.map-cta:focus-visible { background: rgba(10, 37, 48, .96); }
.map-cta b { color: #fff; }

@media (max-width: 900px) {
	.map-embed { min-height: 300px; }
}


/* ------------------------------------------------------- gallery mosaic */

/* Two columns: left = one tall tile then two short; right = two short then
   one tall. Positions come from --gcol/--grow/--gspan set per tile in PHP,
   read only here so the mobile layout below is unaffected. */
@media (min-width: 761px) {
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
		/* Row unit is now a third of a tall tile rather than a half, so the
		   tall tile keeps its previous overall height while the short ones
		   grow from ~1/2 to ~2/3 of it. */
		grid-auto-rows: clamp(76px, 8.4vw, 108px);
		gap: 12px;
	}
	.gallery-grid a,
	.gallery-grid a:nth-child(1),
	.gallery-grid a:nth-child(2),
	.gallery-grid a:nth-child(3),
	.gallery-grid a:nth-child(4) {
		grid-column: var(--gcol, auto);
		grid-row: var(--grow, auto) / span var(--gspan, 1);
	}
}

/* Phones: one image per row, consistent crop, no mosaic. */
@media (max-width: 760px) {
	.gallery-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 10px; }
	.gallery-grid a {
		grid-column: auto !important;
		grid-row: auto !important;
		aspect-ratio: 16 / 10;
	}
}


/* ---------------------------------------------------------- concierge chat */

/* The design only styled the assistant bubble; a working chat needs the
   guest's own messages to read differently. */
.ai-chat-bubble.is-guest {
	background: var(--ember);
	color: #fff;
	align-self: flex-end;
	border-radius: 10px 10px 2px 10px;
}
.ai-chat-bubble.is-typing { opacity: .65; font-style: italic; }

.ai-chat-body {
	max-height: 340px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.ai-chat-input button { cursor: pointer; }
.ai-chat-panel.is-busy .ai-chat-input input { opacity: .6; }

/* Footer column headings are h3 (not h4) so the document's heading order does
   not skip a level after the closing CTA band's h2. Styling is unchanged. */
footer h3 {
	color: #fff;
	font-family: "Public Sans", sans-serif;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 16px;
	font-weight: 700;
}

/* Logo mark in the header. The design sized its inline SVG at 30px; match it
   so swapping in an uploaded image doesn't change the header height. */
.brand-mark {
	width: 30px;
	height: 30px;
	flex: none;
	display: block;
	object-fit: contain;
}

/* ------------------------------------------------------------ event pages */

.section.event-page { padding-top: 40px; }
.event-page .page-hero { padding-top: 8px; }
.event-detail__when {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-top: 14px;
	color: var(--ink-soft);
	font-size: 15px;
	font-weight: 600;
}
.event-detail__when .special-card__price { margin-top: 0; }
.event-detail__rule {
	margin: 8px 0 20px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--brass-deep);
}
.event-detail__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 48px;
	align-items: start;
}
@media (max-width: 860px) { .event-detail__grid { grid-template-columns: 1fr; gap: 32px; } }
.event-detail__main { max-width: 64ch; }
.event-detail__main .special-card__desc { font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.event-detail__main .special-card__list { font-size: 15px; max-width: 420px; }
.event-detail__main .entry-content { margin-top: 20px; }
.event-detail__past { padding: 12px 16px; background: var(--ember-tint); color: var(--ember-deep); border-radius: 4px; margin-bottom: 16px; }
.event-detail__media { margin: 24px 0 0; }
.event-detail__media img { width: 100%; height: auto; border-radius: 8px; }
.event-detail__card {
	padding: 20px 22px;
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: 6px;
}
.event-detail__card h2 { font-family: "Fraunces", Georgia, serif; font-size: 19px; margin: 0 0 10px; }
.event-detail__dates { list-style: none; margin: 0; padding: 0; }
.event-detail__dates li + li { border-top: 1px solid var(--line); }
.event-detail__dates a { display: block; padding: 9px 0; color: var(--ink); font-size: 14.5px; text-decoration: none; }
.event-detail__dates a:hover { color: var(--ember); }
.event-detail__actions { display: grid; gap: 10px; margin-top: 16px; }
.event-detail__actions .btn { justify-content: center; text-align: center; }
.event-archive__title { font-family: "Fraunces", Georgia, serif; font-size: 22px; margin: 0 0 14px; }