/*
 * 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); }
.cal-card .ep-cal__event-time { color: rgba(255,255,255,.8); }

/* 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; }
.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; }

@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;
		padding: calc(72px + 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; }
}