/*
Theme Name: Juno's Booking
Description: Minimal block theme for booking.junosmercantile.com — mirrors the Juno's Shopify header and keeps the original footer with the static map.
Version: 1.0.18
Requires at least: 6.4
Requires PHP: 7.4
Author: Juno's
Text Domain: junos-booking
*/

/* ---- Fonts (bundled; DM Sans is a variable font, Aurenne Calloura is single-weight) ---- */

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/dmsans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/dmsans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "DM Sans";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/dmsans-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "DM Sans";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/dmsans-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Aurenne Calloura replaced Walker as the heading face in v1.0.18. Single
   weight — there is no bold or italic, so never let one be synthesised.
   Headings are all fontWeight 400 in theme.json, which is exactly what this
   file provides; Walker's thin/bold faces had no callers.

   This woff2 is BUILT, not the foundry original: its stylistic alternates are
   baked in as the default glyphs, so e g i j s u / A E G I K Q R render as
   their `salt` alternates and o t y as their `ss01` alternates with no CSS or
   markup. Only 1, 2 and lowercase a keep their original shapes. It is byte-
   identical to theme/assets/aurenne_calloura-webfont.woff2 in the junos-shopify
   repo and is produced by ops/scripts/freeze_aurenne_alternates.py there —
   rebuild it on that side and copy it across, never edit it here. */
@font-face {
	font-family: "Aurenne Calloura";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/aurenne-calloura.woff2?v=1") format("woff2");
}

/* ---- Header (mirrors junosmerc.myshopify.com) ---- */

.junos-header-bar {
	position: sticky;
	top: 0;
	z-index: 10;
	background-color: var(--wp--preset--color--background);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
}

.junos-header {
	max-width: 90rem;
	margin: 0 auto;
	padding: 1.125rem 20px;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 1rem 2rem;
}

.junos-header__logo img {
	display: block;
	width: 170px;
	height: auto;
}

.junos-header__menu {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0.25rem 2rem;
}

.junos-header__menu a {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
	transition: color 0.2s ease;
}

.junos-header__menu a:hover {
	color: var(--wp--preset--color--accent);
}

@media (max-width: 749px) {
	.junos-header__logo img {
		width: 140px;
	}
	.junos-header {
		grid-template-columns: auto;
	}
	.junos-header__menu {
		justify-content: flex-start;
	}
}

/* ---- Footer (design carried over from the original Elementor footer) ---- */

.junos-footer {
	--junos-footer-bg: #3c433b;
	display: flex;
	flex-wrap: wrap;
	background-color: var(--junos-footer-bg);
}

.junos-footer__info {
	flex: 1 1 340px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.75rem;
	padding: 3rem 1.5rem;
	text-align: center;
	color: #ffffff;
}

.junos-footer__info p {
	margin: 0;
	color: #ffffff;
}

/* Same recipe as the hero on-dark buttons: outlined, inverts on hover */
.junos-footer__button {
	display: inline-block;
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--on-primary);
	border-radius: 2px;
	color: var(--wp--preset--color--on-primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.875rem 2rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.junos-footer__button:hover {
	background-color: var(--wp--preset--color--on-primary);
	color: var(--junos-footer-bg);
}

.junos-footer__map {
	flex: 1 1 340px;
	position: relative;
	min-height: 340px;
	/* Map PNG is white-on-transparent; this background-color tints the whole map */
	background: var(--junos-footer-bg) url("/wp-content/uploads/2026/07/juno-half-moon-bay-map-master.png?v=4") center / 1900px 760px no-repeat;
}

.junos-footer__map span {
	position: absolute;
	right: 10px;
	bottom: 6px;
	font: 11px/1 Arial, Helvetica, sans-serif;
	color: rgba(255, 255, 255, 0.5);
}

/* Bottom bar: copyright + payment icons, same recipe as the Shopify footer */
.junos-footer__bottom {
	flex: 1 1 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0 1.5rem;
	padding: 1.25rem 0 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.75);
}

.junos-footer__copyright a {
	color: #ffffff;
	text-decoration: none;
}

.junos-footer__copyright a:hover {
	text-decoration: underline;
}

.junos-footer__payment {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.junos-footer__payment svg {
	display: block;
	height: 24px;
	width: auto;
}

/* ---- Front-page hero ---- */

.junos-hero {
	background-color: var(--wp--preset--color--dark);
	/* Sage photo, neutrally darkened (no color wash); text runs light */
	background-image:
		linear-gradient(rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.55)),
		url("assets/img/hero-sage.jpg");
	background-size: cover;
	background-position: center;
	text-align: center;
	padding: clamp(4rem, 10vw, 8rem) 20px;
	/* isolate keeps the grain's negative z-index contained in the hero */
	position: relative;
	isolation: isolate;
}

/* Simulated film grain over the photo. Normal blend, not overlay/soft-light —
   those vanish on an image this dark. z-index:-1 paints it above the
   element's own background but below the in-flow text, so the heading,
   copy, and button stay untouched. Same SVG as the Shopify hero. */
.junos-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
	opacity: 0.4;
}

/* WP's root block gap adds margin-block-start to every root-level block;
   the hero must sit flush under the sticky header like the Shopify site. */
.wp-site-blocks > .junos-hero {
	margin-block-start: 0;
}

.junos-hero h1 {
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--on-primary);
	/* 20% over the global h1 scale */
	font-size: clamp(2.7rem, 6vw, 4.2rem);
	line-height: 0.95;
}

.junos-hero p {
	max-width: 38rem;
	margin: 0 auto 2.25rem;
	color: color-mix(in srgb, var(--wp--preset--color--on-primary) 92%, transparent);
}

/* On-dark button: outlined, inverts on hover (mirrors Shopify button--on-dark) */
.junos-hero .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--on-primary);
	color: var(--wp--preset--color--on-primary);
}

.junos-hero .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--on-primary);
	border-color: var(--wp--preset--color--on-primary);
	color: var(--wp--preset--color--primary);
}

.junos-hero--compact {
	padding: clamp(3rem, 7vw, 5rem) 20px;
}

/* The editable hero text may hold several paragraphs; keep them tight,
   keep the original 2.25rem gap before the button. */
.junos-hero__text p {
	margin-bottom: 1.1rem;
}

.junos-hero__text > :last-child {
	margin-bottom: 2.25rem;
}

.junos-content {
	scroll-margin-top: 6rem;
}

/* ---- General ---- */

.junos-content {
	padding: clamp(2.5rem, 6vw, 4.5rem) 20px;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}