/*
 * 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(--coral);
	--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(--coral);
	box-shadow: 0 0 0 1px var(--coral) inset;
}
.cal-card .ep-cal__num { font-size: 12px; font-variant-numeric: tabular-nums; }

.cal-card .ep-cal__event {
	background: var(--coral);
	border-left: 0;
	border-radius: 4px;
	color: #fff;
}
.cal-card .ep-cal__event:hover { background: var(--coral-deep, #B84A28); }
/* 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(--coral); border-radius: 6px; }
.ep-event__title { font-family: "Fraunces", Georgia, serif; }
.ep-event__cta {
	border-radius: var(--radius);
	background: var(--coral);
	font-size: 13px;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.ep-event__cta:hover { background: var(--coral-deep, #B84A28); }

@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(--coral);
	color: #fff;
}

/* Photos in card art.
   .room-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. */
.room-art.has-thumb { background: none; }
.room-art.has-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.room-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(--coral); outline-offset: 2px; }
.room-card .room-body h3 a { color: inherit; text-decoration: none; }
.room-card .room-body h3 a:hover { color: var(--coral); }

/* 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(--coral);
	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(--coral); }

.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(--coral);
	border-color: var(--coral);
	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; }

/* ------------------------------------------- next-door events (remote feed) */

/* The design centred this grid against a short menu list. The right column now
   holds the week's events, which is taller than the photo, so centring floats
   the photo in the middle of the column — top-align it with the heading
   instead. Loads after design.css, so the single-class selector is enough. */
.dining-grid { align-items: start; }

/* Photo variant of the On the Edge slot. The design's gradient was 5:4; a real
   landscape photo cropped to 5:4 loses a third of its width, so the photo
   branch carries its own 16:9 box. Compound class to match the design's
   single-class .dining-art depth. */
.dining-art.dining-art--photo { aspect-ratio: 16 / 9; background: var(--marine-deep); }
.dining-art__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Keep the caption above the photo. */
.dining-art--photo .hero-art-label { z-index: 1; }

.dining-events { margin-top: 22px; }
.dining-events h3,
.dining-events h4 {
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 12px;
}
.dining-events .ep-events--list { gap: 10px; }
.dining-events .ep-event {
	padding: 12px;
	box-shadow: none;
	background: var(--paper);
}
.dining-events .ep-event__excerpt,
.dining-events .ep-event__img { display: none; }  /* keep the aside compact */
.dining-events .ep-event__title { font-size: 1rem; }
.dining-events .ep-event__date { min-width: 3rem; }


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


/* ------------------------------------------------- video facade (YouTube) */

.video-facade { position: relative; cursor: pointer; }

.video-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.video-facade .video-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	/* Darken slightly so the play button and caption stay legible on any frame. */
	background: linear-gradient(180deg, rgba(8,24,32,.15), rgba(8,24,32,.45));
	transition: background .2s ease;
}
.video-facade .video-play:hover,
.video-facade .video-play:focus-visible { background: linear-gradient(180deg, rgba(8,24,32,.05), rgba(8,24,32,.35)); }
/* No hover transform here on purpose. The design centres .play-btn with
   `transform: translate(-50%,-50%)`, and it already has its own
   `.video-frame:hover .play-btn` rule that keeps that translate while adding
   the scale. Declaring `transform: scale()` here replaced the translate and
   made the button jump 41px down-and-right on hover. */

/* The poster is a bright daylight photo, so the caption needs a real gradient
   behind it rather than relying on the image being dark. On small frames the
   caption also has to stop colliding with the centred play button. */
.video-facade .video-play {
	background: linear-gradient(180deg, rgba(8,24,32,.10) 0%, rgba(8,24,32,0) 35%, rgba(8,24,32,.70) 100%);
}
.video-facade .video-caption { z-index: 1; }

@media (max-width: 620px) {
	.video-facade .video-caption b { font-size: 13px; line-height: 1.25; display: block; }
	.video-facade .video-caption span { font-size: 11px; }
	/* On a short frame the caption sits right beside the centred play button,
	   so drop the brand name - the visitor is already on the Dockside site. */
	.video-caption__brand { display: none; }
	.video-facade .video-caption { max-width: 60%; }
}

.video-facade iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	z-index: 2;
}
/* Once playing, the poster/overlay must not sit over the player. */
.video-facade.is-playing .video-poster,
.video-facade.is-playing .video-play,
.video-facade.is-playing .video-caption { display: 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(--coral);
	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; }



/* ------------------------------------------------------------- hero photo */

/* .hero-art is the design's 4:5 frame with a gradient background and an
   absolutely-positioned SVG. A photo fills it the same way. */
.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 on narrow screens. That was fine for
   an abstract gradient, but it decapitates a portrait photo with a subject in
   it. Give the photo variant a portrait-ish crop on phones instead.
   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; }
}

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

/* ------------------------------------------------- accessible brand coral */

/* The design's --coral (#D9603D) measures 3.69:1 against white — below the
   4.5:1 WCAG AA minimum both as white-on-coral (buttons) and coral-on-white
   (the "Check rates" links). #C24C29 is the nearest darker tone that passes,
   at 4.82:1, and reads as the same colour. Decorative use keeps the original
   via --coral-light. */
:root {
	--coral-light: #D9603D;
	--coral: #C24C29;
}

/* Keep the softer tone where it is purely decorative and carries no text. */
.hero-art--photo,
.gallery-tile { --coral: var(--coral-light); }

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