/* ==========================================================================
   Bar Baglio - SITE STYLES (base + sections)
   Uses ONLY var(--bb-...) from theme.css - no colour codes in this file.
   Screen @media rules go in responsive.css, print rules in print.css.
   ========================================================================== */

/* ---------- Base ---------- */
html
{
	scroll-behavior: smooth;
}

body
{
	font-family: var(--bb-font-body);
	font-size: var(--bb-font-size-base);
	line-height: var(--bb-line-height-base);
	color: var(--bb-color-text);
	background-color: var(--bb-color-bg);
	/* Sticky footer: page is at least as tall as the screen */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Main content takes all free space, so the footer is pushed to the bottom */
main
{
	flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6
{
	font-family: var(--bb-font-heading);
}

.bb-display
{
	font-family: var(--bb-font-display);
}

/* Links are underlined: not identified by colour alone (WCAG 1.4.1) */
a
{
	text-decoration: none;
}

/* Links inside text are underlined: not identified by colour alone (WCAG 1.4.1) */
main p a
{
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ---------- Accent text ---------- */
.bb-accent
{
	color: var(--bb-color-accent-text);
}

/* ---------- Focus (WCAG 2.4.7 / 2.4.11) ---------- */
:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus
{
	outline: var(--bb-focus-width) solid var(--bb-focus-color);
	outline-offset: var(--bb-focus-offset);
	box-shadow: none;
}

/* ---------- Skip link (use with Bootstrap .visually-hidden-focusable) ---------- */
.bb-skip-link:focus
{
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2000;
	padding: 0.5rem 1rem;
	background-color: var(--bb-color-accent);
	color: var(--bb-color-text-on-accent);
}

/* ---------- Buttons (use with Bootstrap: class="btn bb-btn") ---------- */
.bb-btn
{
	--bs-btn-color: var(--bb-color-text-on-accent);
	--bs-btn-bg: var(--bb-color-accent);
	--bs-btn-border-color: var(--bb-color-accent);
	--bs-btn-hover-color: var(--bb-color-text-on-dark);
	--bs-btn-hover-bg: var(--bb-color-bg-dark);
	--bs-btn-hover-border-color: var(--bb-color-accent);
	--bs-btn-active-color: var(--bb-color-text-on-dark);
	--bs-btn-active-bg: var(--bb-color-bg-dark);
	--bs-btn-active-border-color: var(--bb-color-accent);
	border-width: 2px;
}

/* ---------- Messages ---------- */
.bb-error
{
	color: var(--bb-color-error);
}

.bb-success
{
	color: var(--bb-color-success);
}

/* ---------- Sections ---------- */
.bb-section
{
	padding-top: var(--bb-section-padding);
	padding-bottom: var(--bb-section-padding);
}

.bb-section-dark
{
	background-color: var(--bb-color-bg-dark);
	color: var(--bb-color-text-on-dark);
	--bs-heading-color: var(--bb-color-text-on-dark);
	--bs-link-color-rgb: var(--bb-color-accent-rgb);
	--bs-link-hover-color-rgb: var(--bb-color-text-on-dark-rgb);
}

	.bb-section-dark .bb-accent
	{
		color: var(--bb-color-accent);
	}

	.bb-section-dark :focus-visible,
	.bb-section-dark .btn:focus-visible,
	.bb-section-dark .form-control:focus,
	.bb-section-dark .form-select:focus
	{
		outline-color: var(--bb-focus-color-on-dark);
	}

/* ---------- Reduced motion (WCAG 2.3.3) ---------- */
@media (prefers-reduced-motion: reduce)
{
	html
	{
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after
	{
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   SECTION STYLES - added in Step 7, one section at a time
   ========================================================================== */

/* ---------- Anchor offset: sections are not hidden under the sticky header ---------- */
main [id]
{
	scroll-margin-top: 6rem; /* taller than the sticky header (80px on tablets and computers), so a jump never hides a title */
}

/* ---------- Header / navbar (navy from the 2025 design prototype, logos on a white plate) ---------- */
.bb-header
{
	margin: 0 var(--bb-panel-gap); /* no gap at the top: the menu touches the top of the screen, also when fixed while scrolling */
}

/* While scrolling, the page passes under the fixed menu: this strip (page colour, behind the navy menu)
   covers the two rounded top corners and the side gaps, so no photo or text shows above or beside the menu.
   The navy colour is on .bb-navbar (inside the header), so it is painted on top of this strip. */
.bb-header::before
{
	content: "";
	position: absolute;
	top: 0;
	right: calc(-1 * var(--bb-panel-gap));
	left: calc(-1 * var(--bb-panel-gap));
	z-index: -1;
	height: var(--bb-radius-panel);
	background-color: var(--bb-color-bg);
}

/* Home page: menu and header photo form one panel (Site.Master adds this class); the photo scrolls under the fixed menu */
.bb-header-joined .bb-navbar
{
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.bb-navbar
{
	border-radius: var(--bb-radius-panel);
	background-color: var(--bb-color-header-bg);
	padding-top: 9px; /* 9px + 6px logo plate padding + 50px logos = header 80px high */
	padding-bottom: 9px;
	--bs-navbar-color: var(--bb-color-header-text);
	--bs-navbar-hover-color: var(--bb-color-header-hover);
	--bs-navbar-active-color: var(--bb-color-header-hover);
	--bs-navbar-toggler-border-color: var(--bb-color-header-text);
	--bs-navbar-toggler-icon-bg: var(--bb-navbar-toggler-icon);
	--bs-navbar-nav-link-padding-x: 5px;
}

/* Focus outline on the navy header: orange (the dark one would not be visible) */
.bb-header :focus-visible,
.bb-header .btn:focus-visible,
.bb-header .nav-link:focus-visible,
.bb-header .navbar-toggler:focus-visible
{
	outline-color: var(--bb-focus-color-on-dark);
}

/* Home link: Sophia mark + "baglio" wordmark side by side */
.bb-navbar .navbar-brand
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px;
	border-radius: var(--bb-radius-panel);
	background-color: var(--bb-color-logo-plate);
}

/* Both logos 50px high (smaller menu bar, like the 2025 design prototype), width follows the image ratio */
.bb-navbar .navbar-brand img
{
	display: block;
	width: auto;
	height: 50px;
}

/* Original menu: Open Sans 14px, normal weight, capitals */
.bb-navbar .nav-link
{
	font-family: var(--bb-font-heading);
	font-size: 14px;
	white-space: nowrap;
	text-decoration: none;
	text-transform: uppercase;
}

/* Hover/focus also underlined: not shown by colour alone */
.bb-navbar .nav-link:hover,
.bb-navbar .nav-link:focus-visible
{
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* "Book a table" button at the right end of the menu (orange, dark text: 8.8:1) */
.bb-nav-cta
{
	display: flex;
	align-items: center;
}

.bb-nav-btn
{
	white-space: nowrap;
	margin-left: 10px;
	padding: 6px 14px;
	font-family: var(--bb-font-heading);
	font-size: 14px;
	text-decoration: none;
	text-transform: uppercase;
}

/* ---------- Language switch "EN | IT" (header, always visible) ---------- */
/* Phones/tablets: between the logo and the menu button. Large screens: after the menu (order). */
.bb-lang
{
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
	margin-right: 8px;
	font-family: var(--bb-font-heading);
	font-size: 14px;
}

.bb-lang a
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	padding: 0 4px;
	color: var(--bb-color-header-text);
	text-decoration: none;
}

/* Current language: bold and underlined (not shown by colour alone) */
.bb-lang a[aria-current="true"]
{
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.bb-lang a:hover,
.bb-lang a:focus-visible
{
	color: var(--bb-color-header-hover);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.bb-lang-divider
{
	color: var(--bb-color-header-muted);
}

/* ---------- Footer (original design: grey, round social icons) ---------- */
.bb-footer
{
	margin: 0 var(--bb-panel-gap) var(--bb-panel-gap);
	border-radius: var(--bb-radius-panel);
	background-color: var(--bb-color-bg-soft); /* same pale lilac as the light section panels */
	padding-top: 50px;
	padding-bottom: 50px;
}

.bb-footer p
{
	font-family: var(--bb-font-heading);
	font-size: 16px;
	letter-spacing: 0.5px;
	color: var(--bb-color-text);
}

.bb-footer-social
{
	margin-bottom: 10px;
}

.bb-footer-social .list-inline-item
{
	margin-right: 0;
}

/* 45 x 45 px round buttons (original size, also a large touch target) */
.bb-footer-social a
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	margin: 5px;
	border-radius: 50%;
	background-color: var(--bb-color-footer-social-bg);
	color: var(--bb-color-text-on-dark);
}

.bb-footer-social svg
{
	width: 18px;
	height: 18px;
}

/* Original hover is orange; icon turns dark for contrast (8.8:1) */
.bb-footer-social a:hover,
.bb-footer-social a:focus-visible
{
	background-color: var(--bb-color-accent);
	color: var(--bb-color-text-on-accent);
}

.bb-back-to-top svg
{
	margin-right: 0.25rem;
	vertical-align: -0.125em;
}

/* ---------- Floating "Back to top" arrow (shown by site.js after Welcome and About) ---------- */
/* 48x48 px target (WCAG 2.5.8); below pop-ups (1050+) and the cookie banner (1070) */
.bb-to-top
{
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 1030;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--bb-color-footer-bg); /* white arrow: 9.7:1 */
	color: var(--bb-color-text-on-dark);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease, color 0.2s ease;
}

.bb-to-top.bb-to-top-visible
{
	opacity: 1;
	visibility: visible;
}

/* Same hover as the footer social icons: orange, dark arrow (8.8:1) */
.bb-to-top:hover,
.bb-to-top:focus-visible
{
	background-color: var(--bb-color-accent);
	color: var(--bb-color-text-on-accent);
}

.bb-to-top:focus-visible
{
	outline: 3px solid var(--bb-color-title);
	outline-offset: 2px;
}

/* ---------- Read-more button (original design: white, inner orange frame) ---------- */
.bb-readmore-btn
{
	position: relative;
	display: inline-block;
	padding: 15px 35px;
	background-color: var(--bb-color-bg);
	color: var(--bb-color-accent-text);
	font-family: var(--bb-font-heading);
	font-size: 16px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.5s, color 0.5s;
}

.bb-readmore-btn::after
{
	content: "";
	position: absolute;
	top: 5px;
	right: 5px;
	bottom: 5px;
	left: 5px;
	border: 2px solid var(--bb-color-accent);
	transition: all 0.2s;
}

/* Original hover is orange; text turns dark for contrast (8.8:1) */
.bb-readmore-btn:hover,
.bb-readmore-btn:focus-visible
{
	background-color: var(--bb-color-accent);
	color: var(--bb-color-text-on-accent);
}

.bb-readmore-btn:hover::after,
.bb-readmore-btn:focus-visible::after
{
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* ---------- Header photo (one photo, no slider) ---------- */
/* Joined to the menu above as one panel: square top corners, rounded bottom corners, no gap */
.bb-hero
{
	margin: 0 var(--bb-panel-gap) var(--bb-panel-gap);
	border-radius: 0 0 var(--bb-radius-panel) var(--bb-radius-panel);
	overflow: hidden; /* the photo follows the rounded corners */
}

/* Full width, max 600px high, ratio kept: extra height is trimmed equally top and bottom */
.bb-hero-img
{
	display: block;
	width: 100%;
	height: auto;
	max-height: 600px;
	aspect-ratio: 1284 / 907;
	object-fit: cover;
	object-position: center;
}

/* ---------- Section titles (original design: script subtitle + bold title) ---------- */
.bb-title
{
	margin-bottom: 20px;
	text-align: center;
}

.bb-subtitle
{
	display: block;
	font-family: var(--bb-font-display);
	font-size: 32px;
	line-height: 1.2;
	color: var(--bb-color-accent-text);
}

.bb-title h1,
.bb-title h2
{
	margin: 0 0 5px;
	font-family: var(--bb-font-heading);
	font-size: 35px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bb-color-title);
}

/* ---------- Welcome / intro (video left, text right, text left-aligned) ---------- */
.bb-intro-hours
{
	margin-top: 1.5rem;
}

/* Welcome tagline (from the 2025 design prototype): large display font, second line in italics and in the accent colour */
.bb-intro-tagline
{
	margin: 0 0 1rem;
	font-family: var(--bb-font-display);
	font-size: 2.25rem;
	line-height: 1.15;
	color: var(--bb-color-title);
}

.bb-intro-tagline-accent
{
	display: block;
	font-style: italic;
	color: var(--bb-color-accent-text);
}

.bb-intro-lead
{
	font-size: 1.1rem;
}

.bb-video
{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 888 / 500;
	background-color: var(--bb-color-bg-dark);
}

.bb-video-text
{
	margin: 0.75rem 0 1.5rem;
	font-size: 1.1rem;
	text-align: center;
}

/* Alternating sections: every section is a rounded panel almost as wide as the screen
   (small gap at the sides and between panels), navy (.bb-section-alt) or pale lilac (.bb-section-soft).
   The content inside keeps a readable width in the middle (.container). */
.bb-section-alt,
.bb-section-soft
{
	margin: var(--bb-panel-gap); /* top/bottom margins of two panels overlap, so the gap between panels is also this size */
	padding: 50px 0;
	border-radius: var(--bb-radius-panel);
}

.bb-section-alt
{
	/* Navy panel: inside it the site colours switch to their light-on-dark versions,
	   so every text, title, subtitle, link and focus outline stays readable (WCAG AA, see theme.css) */
	--bb-color-text: var(--bb-color-text-on-dark);
	--bb-color-title: var(--bb-color-text-on-dark);
	--bb-color-text-muted: var(--bb-color-header-muted);
	--bb-color-accent-text: var(--bb-color-accent);
	--bb-color-accent-text-hover: var(--bb-color-text-on-dark);
	--bb-focus-color: var(--bb-focus-color-on-dark);
	--bs-body-color: var(--bb-color-text-on-dark);
	--bs-heading-color: var(--bb-color-text-on-dark);
	--bs-link-color-rgb: var(--bb-color-accent-rgb);
	--bs-link-hover-color-rgb: var(--bb-color-text-on-dark-rgb);
	background-color: var(--bb-color-section-dark);
	color: var(--bb-color-text);
}

/* About photo (JPG with a white background, dark text): on the navy panel it sits on a white rounded plate, like the menu logos */
.bb-section-alt .bb-about-img
{
	padding: 12px;
	border-radius: var(--bb-radius-panel);
	background-color: var(--bb-color-logo-plate);
	mix-blend-mode: normal;
}

.bb-section-soft
{
	background-color: var(--bb-color-bg-soft);
}

.bb-section-alt .container,
.bb-section-soft .container
{
	max-width: var(--bb-panel-max-width);
	padding-right: 30px;
	padding-left: 30px;
}

/* ---------- About us (original: 100px padding, image left, text right) ---------- */
.bb-about-img
{
	mix-blend-mode: multiply;
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.bb-about-text
{
	padding-top: 30px;
}

/* ---------- Menu (text left, photos right, card with QR) ---------- */
.bb-menu-more
{
	margin-top: 2.5rem;
}

/* Text column: the card is pushed down, so its bottom lines up with the bottom of the photos */
.bb-menu-col
{
	display: flex;
	flex-direction: column;
}

.bb-menu-col > p:last-of-type
{
	margin-bottom: 1.5rem;
}

/* Section title in the 2025 prototype style (Menu, Gallery): display font, second line in italics and accent colour, short line under it */
.bb-title-display h2
{
	font-family: var(--bb-font-display);
	font-size: 2.6rem;
	font-weight: 400;
	line-height: 1.15;
}

.bb-title-accent
{
	display: block;
	font-style: italic;
	color: var(--bb-color-accent-text);
}

.bb-title-display::after
{
	content: "";
	display: block;
	width: 60px;
	height: 2px;
	margin: 1rem auto 0;
	background-color: var(--bb-color-accent-text);
}

.bb-section-intro
{
	max-width: 760px;
	margin: 0 auto;
	font-size: 1.05rem;
	text-align: center;
}

/* Category tabs (Scripts/custom/menu-tabs.js). Selected tab: accent colour AND a thick line under it (not colour alone) */
.bb-tablist
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 1.5rem;
	margin: 2rem 0;
	border-bottom: 1px solid var(--bb-color-border-soft);
}

.bb-tablist[hidden]
{
	display: none; /* without JavaScript: no tabs, all categories shown */
}

.bb-tab
{
	margin-bottom: -1px;
	padding: 0.75rem 0.5rem;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	color: var(--bb-color-text);
	font-family: var(--bb-font-heading);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.bb-tab:hover
{
	color: var(--bb-color-accent-text);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.bb-tab[aria-selected="true"]
{
	border-bottom-color: var(--bb-color-accent-text);
	color: var(--bb-color-accent-text);
}

/* Category heading: shown only without JavaScript (with tabs it is for screen readers only) */
.bb-tabpanel-title
{
	margin: 2rem 0 1rem;
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	color: var(--bb-color-title);
}

.bb-tabpanel-note
{
	font-style: italic;
	text-align: center;
}

/* Dish cards: navy like the 2025 prototype (also on the light panel); one column on phones, two on larger screens (responsive.css) */
.bb-dishes
{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-dish
{
	padding: 1.5rem;
	border: 1px solid var(--bb-color-header-border);
	border-radius: var(--bb-radius-panel);
	background-color: var(--bb-color-section-dark);
}

/* Dish name orange on navy: 7.35:1 */
.bb-dish-name
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	font-family: var(--bb-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--bb-color-accent);
}

.bb-dish-badge
{
	padding: 0.15rem 0.5rem;
	border: 1px solid var(--bb-color-accent);
	border-radius: 4px;
	font-family: var(--bb-font-heading);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Dish description light grey-blue on navy: 8.1:1 */
.bb-dish-desc
{
	margin: 0;
	font-size: 0.95rem;
	color: var(--bb-color-header-muted);
}

/* Photos of the family: one or more figures side by side */
.bb-menu-people
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.bb-menu-person
{
	width: 100%;
	max-width: 280px;
	margin: 0;
	background-color: var(--bb-color-bg);
	border: 1px solid var(--bb-color-border-soft);
	text-align: center;
}

.bb-menu-person img
{
	display: block;
	width: 100%;
	height: auto;
}

.bb-menu-person figcaption
{
	padding: 0.5rem;
	font-family: var(--bb-font-heading);
	font-weight: 700;
	color: var(--bb-color-title);
}

/* White card: menu button and QR code */
.bb-menu-card
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin-top: auto;
	padding: 30px;
	background-color: var(--bb-color-bg);
	border: 1px solid var(--bb-color-border-soft);
	text-align: center;
}

.bb-menu-card h3
{
	margin: 0 0 1rem; /* space above the PDF button */
	font-size: 22px;
	font-weight: 700;
	color: var(--bb-color-title);
}

.bb-menu-card p
{
	margin-bottom: 1rem;
}

.bb-menu-qr
{
	flex: none;
	width: 150px;
	height: auto;
}

/* ---------- Awards (Tripadvisor badges, plain images) ---------- */
.bb-awards-list
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

/* Top row: the two 2026 badges, shown large (never enlarged beyond the file size) */
.bb-awards-top
{
	gap: 2rem;
	margin-bottom: 2rem;
}

.bb-award-large
{
	display: flex;
	flex: 0 1 200px;
	align-items: center;
	justify-content: center;
}

.bb-award-large img
{
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 220px; /* badges of different shapes look the same size */
}

.bb-awards-group
{
	margin: 0 0 1rem;
	font-size: 18px;
	font-weight: 700;
	color: var(--bb-color-title);
	text-align: center;
}

/* Press logo in a white tile */
.bb-press
{
	margin: 0;
	text-align: center;
}

.bb-press-logo
{
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background-color: var(--bb-color-bg);
	border: 1px solid var(--bb-color-border-soft);
}

.bb-press-logo img
{
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---------- Reservation (policy in two columns, then the form) ---------- */
.bb-policy h3,
.bb-reservation-form h3
{
	margin: 1.5rem 0 0.5rem;
	font-size: 20px;
	font-weight: 700;
	color: var(--bb-color-title);
}

.bb-policy h3:first-child
{
	margin-top: 0;
}

.bb-policy ol
{
	padding-left: 1.25rem;
}

.bb-reservation-form
{
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bb-color-border-soft);
}

.bb-reservation-form h3
{
	margin-top: 0;
}

/* Button that opens and closes the form fields: full width, orange, arrow down (closed) / up (open).
   Not shown by colour alone: text, arrow and hand pointer; underlined on hover and keyboard focus. */
.bb-form-toggle
{
	display: flex; /* not a list item: hides the browser's own small triangle */
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.9rem 1rem;
	border: 2px solid var(--bb-color-accent);
	border-radius: 8px;
	background-color: var(--bb-color-accent);
	color: var(--bb-color-text-on-accent);
	font-family: var(--bb-font-heading);
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}

.bb-form-toggle::after
{
	content: "";
	width: 0.6em;
	height: 0.6em;
	margin-top: -0.3em;
	border-right: 3px solid currentColor;
	border-bottom: 3px solid currentColor;
	transform: rotate(45deg);
}

.bb-form-toggle:hover,
.bb-form-toggle:focus-visible
{
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.bb-form-details[open] > .bb-form-toggle
{
	margin-bottom: 1.5rem;
}

.bb-form-details[open] > .bb-form-toggle::after
{
	margin-top: 0.3em;
	transform: rotate(-135deg);
}

.bb-reservation-form .form-label
{
	font-family: var(--bb-font-heading);
	font-weight: 600;
}

/* ---------- Reservation form: spam trap, captcha, messages ---------- */
/* Field for robots only: moved out of the screen (people and screen readers do not use it) */
.bb-hp
{
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bb-captcha altcha-widget
{
	display: block;
	max-width: 320px;
	margin: 0 auto;
	text-align: left;
}

.bb-message
{
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border: 2px solid var(--bb-color-border);
	border-radius: 0.375rem;
	background-color: var(--bb-color-bg);
}

.bb-message p:last-child,
.bb-message ul:last-child
{
	margin-bottom: 0;
}

.bb-message-error
{
	border-color: var(--bb-color-error);
	color: var(--bb-color-error);
}

/* Field messages: error colour from the theme (Bootstrap form validation) */
.bb-reservation-form
{
	--bs-form-invalid-color: var(--bb-color-error);
	--bs-form-invalid-border-color: var(--bb-color-error);
}

.bb-reservation-form .invalid-feedback
{
	font-size: 0.9rem;
}

/* Type of booking "Evento": the event text field is shown only for events (works without JavaScript) */
.bb-event-details
{
	display: none;
}

.bb-form-details .row:has(#bb-type option[value="event"]:checked) .bb-event-details
{
	display: block;
}

/* Allergies: the text field is shown only when the box is ticked (works without JavaScript) */
.bb-allergy-details
{
	display: none;
	margin-top: 0.75rem;
}

.bb-allergy:has(#bb-allergies:checked) .bb-allergy-details
{
	display: block;
}

.bb-form-note
{
	margin: 0;
	font-size: 0.9rem;
	color: var(--bb-color-text-muted);
}

/* ---------- Privacy notice ---------- */
.bb-privacy .bb-policy h2
{
	margin: 1.5rem 0 0.5rem;
	font-family: var(--bb-font-heading);
	font-size: 20px;
	font-weight: 700;
	color: var(--bb-color-title);
}

/* Two columns of one language: both columns start at the same height */
.bb-privacy .bb-policy h2:first-child
{
	margin-top: 0;
}

.bb-privacy-date
{
	margin-bottom: 1.5rem;
}

/* Footer button that looks like the footer links */
.bb-footer-link
{
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--bb-color-accent-text); /* on the pale lilac footer: 5.1:1 */
	text-decoration: underline;
	cursor: pointer;
}

.bb-footer-link:hover
{
	color: var(--bb-color-accent-text-hover);
}

/* ---------- Contact ---------- */
.bb-contact h3
{
	margin: 1.5rem 0 0.5rem;
	font-size: 20px;
	font-weight: 700;
	color: var(--bb-color-title);
}

.bb-contact h3:first-child
{
	margin-top: 0;
}

/* ---------- Gallery (all photos the same shape) and Private terrace ---------- */
/* Gallery (2025 prototype): round filter buttons, then the photos in a grid (2 per row, 3 on larger screens: responsive.css) */
.bb-gallery-filters
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 2rem 0;
}

.bb-gallery-filters[hidden]
{
	display: none; /* without JavaScript: no filters, all photos shown */
}

.bb-filter
{
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--bb-color-text-muted);
	border-radius: 999px;
	background: none;
	color: var(--bb-color-text);
	font-family: var(--bb-font-heading);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.bb-filter:hover
{
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* Selected filter: orange with dark bold text (8.8:1), on both navy and lilac panels */
.bb-filter[aria-pressed="true"]
{
	border-color: var(--bb-color-accent);
	background-color: var(--bb-color-accent);
	color: var(--bb-color-text-on-accent);
	font-weight: 700;
}

.bb-gallery-grid
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Events: photo left, text right (2025 prototype text) */
.bb-events-row
{
	margin-top: 1rem;
}

.bb-events-img
{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 70%;
	border-radius: 12px;
	box-shadow: var(--bb-shadow-photo);
}

.bb-gallery-img
{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: var(--bb-shadow-photo);
}

/* ---------- Private terrace photos: one row that scrolls left and right (Scripts/custom/terrace-gallery.js) ---------- */
/* One photo at a time fills the whole frame (4:3; portrait photos are cropped to fill it); the buttons,
   the counter "Foto 1 di 10" and the hint text show that there are more photos */
.bb-slides-track
{
	position: relative; /* the photos measure their position from here (terrace-gallery.js) */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	border-radius: var(--bb-radius-panel);
}

.bb-slides-list
{
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0 0 0.75rem;
	list-style: none;
}

.bb-slide
{
	flex: 0 0 100%; /* exactly the width of the frame: the next photo is never visible */
	scroll-snap-align: start;
	scroll-snap-stop: always; /* a fast swipe moves one photo, not several */
}

.bb-slide figure
{
	margin: 0;
}

.bb-slide img
{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 12px;
}

.bb-slide figcaption
{
	margin-top: 0.5rem;
	font-size: 0.95rem;
	text-align: center;
}

/* Previous / Next buttons (44 x 44 px, WCAG 2.5.8) with the counter between them */
.bb-slides-controls
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 0.75rem;
}

.bb-slides-controls[hidden]
{
	display: none;
}

.bb-slides-btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--bb-color-accent);
	color: var(--bb-color-text-on-accent);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.bb-slides-btn:disabled
{
	background-color: var(--bb-color-disabled-bg);
	color: var(--bb-color-disabled-text);
	cursor: default;
}

.bb-slides-count
{
	min-width: 7em;
	margin: 0;
	font-family: var(--bb-font-heading);
	font-weight: 600;
	text-align: center;
}

.bb-slides-hint
{
	margin: 0.25rem 0 0;
	font-size: 0.9rem;
	text-align: center;
	color: var(--bb-color-text-muted);
}

/* ---------- Guest reviews: cards (1 per row; 2 and 4 per row on larger screens, see responsive.css) ---------- */
.bb-reviews-grid
{
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Cards in the same row get the same height */
.bb-reviews-grid > li
{
	display: flex;
}

.bb-review
{
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 20px;
	border: 1px solid var(--bb-color-border-soft);
	border-radius: 8px;
	background-color: var(--bb-color-bg);
}

.bb-review-rating
{
	margin: 0 0 0.5rem;
	font-family: var(--bb-font-heading);
	font-size: 13px;
	color: var(--bb-color-text-muted);
}

/* Stars are decorative (aria-hidden): the text "5 out of 5" gives the rating */
.bb-review-stars
{
	display: block;
	font-size: 20px;
	letter-spacing: 2px;
	line-height: 1.2;
	color: var(--bb-color-accent);
}

.bb-review-title
{
	margin: 0 0 0.75rem;
	font-family: var(--bb-font-display);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--bb-color-title);
}

.bb-review-text
{
	flex-grow: 1;
	margin: 0 0 1rem;
}

.bb-review-author
{
	margin: 0 0 0.75rem;
	font-family: var(--bb-font-heading);
	font-size: 14px;
	color: var(--bb-color-text-muted);
}

.bb-review-name
{
	font-weight: 700;
	color: var(--bb-color-text);
}

.bb-review-link
{
	margin: 0;
	font-family: var(--bb-font-heading);
	font-size: 14px;
}

.bb-reviews-more
{
	margin-top: 2rem;
	text-align: center;
}

/* ---------- LGBTQ+ friendly: rainbow heart badge and text (side by side on larger screens, see responsive.css) ---------- */
.bb-lgbtq-row
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
}

.bb-lgbtq-badge img
{
	display: block;
	width: 120px;
	height: auto;
	margin: 0 auto;
}

.bb-lgbtq-badge-text
{
	margin: 0.5rem 0 0;
	font-family: var(--bb-font-heading);
	font-size: 22px;
	line-height: 1.15;
	color: var(--bb-color-text-muted);
}

.bb-lgbtq-text
{
	max-width: 720px;
}

.bb-lgbtq-text p
{
	margin: 0;
}

/* ---------- Reservations switched off: greyed-out buttons and message box ---------- */
.bb-fieldset
{
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.bb-btn:disabled,
.bb-btn.disabled
{
	background-color: var(--bb-color-disabled-bg);
	border-color: var(--bb-color-disabled-bg);
	color: var(--bb-color-disabled-text);
	opacity: 1;
	cursor: not-allowed;
}

.bb-message-closed
{
	border-color: var(--bb-color-border);
	color: var(--bb-color-text);
}

/* ---------- Error pages (404, 500) ---------- */
.bb-error
{
	min-height: 50vh;
	text-align: center;
}

/* Italian text under the English one (static error pages show both languages) */
.bb-error-it
{
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bb-color-border-soft);
}

.bb-error-it h2
{
	font-size: 28px;
	font-weight: 700;
	color: var(--bb-color-title);
}