/* Brand overrides for the Aegean palette, layered on top of Canvas's theme.
   Canvas drives almost everything from --cnvs-themecolor + a couple of font
   variables, so overriding :root here recolors buttons, links, .color text,
   tabs, etc. across every ported page without touching Canvas's own CSS. */
:root {
	--cnvs-themecolor: #114b82; /* Aegean blue */
	--cnvs-themecolor-rgb: 17, 75, 130;
	--cnvs-secondary-font: 'Cormorant Garamond', serif;

	--brand-stone: #f3ede1;
	--brand-stone-deep: #e4d9c4;
	--brand-olive: #7a8c3c;
	--brand-terracotta: #b5563c;

	--cnvs-header-height: 100px;
}

body {
	background-color: var(--brand-stone);
}

/* Warm-stone grounds instead of Canvas's default flat white/grey sections */
.section.bg-transparent,
#wrapper,
body.stretched {
	background-color: var(--brand-stone);
}

/* Olive as the quiet detail color for meta text / info lines */
.food-info,
.item-price {
	color: var(--brand-olive) !important;
}

/* Terracotta as a rare highlight, not a base color */
.button.button-3d,
.form-msg[data-kind='error'] {
	color: var(--brand-terracotta);
}

/* Keep the reservation card and footer widgets sitting on warm stone,
   not stark white, so the accent color reads as intentional. */
.reservation-form {
	background-color: #fff !important;
	border: 1px solid var(--brand-stone-deep);
}

#footer .widget h4 {
	color: rgba(255, 255, 255, 0.92);
}

/* Homepage hero captions: Canvas centers .slider-caption within the FULL
   slide height, which extends up behind the fixed transparent header (the
   "torn paper" reveal trick). Our hero copy is longer than Canvas's demo
   text, so on short viewports the vertically-centered block's top edge can
   land behind the header. Padding the caption's container down by the
   header height re-centers the text within the visible area only, while
   leaving .swiper-slide-bg (a sibling, full-bleed) untouched — the image
   still fills all the way behind the header, no blank gap. */
.container.dark {
	padding-top: var(--cnvs-header-height);
}

/* Gallery page hero: same problem as the homepage slider, different markup.
   Its caption is vertically centered in the full section height behind the
   transparent header. Canvas's .include-header .container gives one
   header-height of top padding, but the tall caption block (title + the two
   cover images) still centers high enough that "A look inside" tucks under
   the header on desktop. A second header-height shifts it clear. */
#slider.gallery-images .container {
	/* !important + higher specificity to beat Canvas's `.py-5` utility, which
	   forces padding-top:3rem !important on this container — that's less than
	   the header height, so the centered title tucked behind the fixed header. */
	padding-top: calc(var(--cnvs-header-height) * 2) !important;
}

/* Extra safety net for very short viewports (e.g. a squat browser window):
   shrink the hero heading and hide the icon row so the whole caption block
   is short enough to fit below the header even after the padding shift
   above. Background image is untouched either way. */
@media (max-height: 650px) {
	.slider-caption h2, .slider-caption .h2 {
		font-size: 2.75rem;
	}
	.slider-caption .static-content {
		display: none !important;
	}
}

/* Below 768px Canvas scales the homepage hero heading with viewport width
   (font-size: 5.5vw), which on a phone (~390px wide) collapses the title to
   ~21px, far smaller proportionally than the 76px it gets on desktop. Clamp
   it to a readable floor so the hero still reads as a hero on mobile, while
   staying fluid up to the 768px breakpoint where Canvas's 72px base kicks in.
   The sub-paragraph is hidden below 576px (.d-none .d-sm-block), so its bump
   only matters on the 576-767px large-phone range. */
@media (max-width: 767.98px) {
	.slider-caption h2, .slider-caption .h2 {
		font-size: clamp(2.4rem, 9vw, 3.75rem);
		line-height: 1.05;
	}
	.slider-caption p {
		font-size: clamp(1rem, 3.4vw, 1.25rem);
	}
	/* The vertically-centered prev/next arrows sit on the left/right edges at
	   mid-height, right where the centered (slide 2) and right-aligned
	   (slide 3) captions land, so on phones they overlap the text. The slider
	   autoplays and supports touch-swipe, so hide the arrows on mobile. */
	#slider .slider-arrow-left,
	#slider .slider-arrow-right {
		display: none;
	}
}

/* Hero captions are always white text (Canvas's .container.dark), but our
   photos range from a bright daylight entrance shot to a dark night scene.
   On the lighter photos white-on-white washes out, so darken the area behind
   the slide content directly rather than relying on the photo's own tones. */
.swiper-slide-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.45) 100%);
}

.slider-caption h2, .slider-caption .h2,
.slider-caption p {
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Same readability treatment for the smaller page-title hero banners
   (about/menu/contact/gallery/reservation) — same gradient + text-shadow as
   the homepage slider, so every hero photo reads the same regardless of how
   light or dark the individual photo is. .parallax-bg is an <img> (a replaced
   element), which can't take ::before/::after content itself, so the overlay
   goes on the section instead — it's already `position: relative` (Canvas's
   .parallax class) and the image already sits at z-index -1, so z-index 0
   here lands the gradient between the photo and the .container content
   (Canvas's own z-index 2). */
.page-title-parallax.dark::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.45) 100%);
}

.page-title-parallax.dark .page-title-content h1,
.page-title-parallax.dark .page-title-content .h1,
.page-title-parallax.dark .page-title-content span {
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}