/* ==========================================================================
   Bar Baglio - MASTER THEME
   Only file where fonts, colours and theme values are defined.
   All other CSS files must use var(--bb-...) and never colour codes.
   All colour pairs checked for WCAG 2.2 AA (contrast >= 4.5:1).
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face
{
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/open-sans-latin-400-normal.woff2") format("woff2");
}

@font-face
{
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/open-sans-latin-400-italic.woff2") format("woff2");
}

@font-face
{
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/open-sans-latin-600-normal.woff2") format("woff2");
}

@font-face
{
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/open-sans-latin-700-normal.woff2") format("woff2");
}

@font-face
{
	font-family: "Prata";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/prata-latin-400-normal.woff2") format("woff2");
}

@font-face
{
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/playfair-display-latin-400-normal.woff2") format("woff2");
}

@font-face
{
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/playfair-display-latin-700-normal.woff2") format("woff2");
}

/* ---------- Theme variables ---------- */
:root
{
	/* Colours - text and backgrounds */
	--bb-color-text: #333333; /* on white: 12.6:1 (original design) */
	--bb-color-text-muted: #595959; /* on white: 7.0:1 */
	--bb-color-title: #000000; /* section titles (original design), on white: 21:1 */
	--bb-color-bg: #FFFFFF;
	--bb-color-bg-dark: #1A1A1A;
	--bb-color-bg-alt: #F5F5F5; /* light grey (map placeholder of the cookie component): text #333333 11.6:1, accent text 4.9:1, muted text 6.4:1 */
	--bb-color-section-dark: #1B2A3E; /* navy section panels (.bb-section-alt), same as the menu bar: white text 14.5:1, orange text 7.4:1, #B8C2D0 8.1:1 */
	--bb-color-bg-soft: #FAF9FD; /* pale lilac section background: text #333333 12.2:1, accent text 5.1:1 */
	--bb-color-border-soft: #AFA9EC; /* decorative frames on the pale lilac background */
	--bb-color-text-on-dark: #FFFFFF; /* on #1A1A1A: 17.4:1 */

	--bb-color-backdrop: rgba(26, 26, 26, 0.85); /* = #1A1A1A at 85%: dark see-through background behind pop-ups */

	/* Colours - header (navy, from the 2025 design prototype) and footer (original design) */
	--bb-color-header-bg: #1B2A3E; /* white text: 14.5:1, orange text: 7.4:1 */
	--bb-color-header-border: #0F1826; /* decorative line only */
	--bb-color-header-text: #FFFFFF; /* on #1B2A3E: 14.5:1 */
	--bb-color-header-hover: #FFA500; /* on #1B2A3E: 7.4:1 (also underlined) */
	--bb-color-header-muted: #B8C2D0; /* "|" divider, on #1B2A3E: 8.1:1 */
	--bb-color-logo-plate: #FFFFFF; /* white rounded plate behind the logos (JPG files with a white background) */
	--bb-navbar-toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFFFFF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* white menu icon */
	--bb-color-footer-bg: #444444; /* "back to top" round button (the footer itself is now pale lilac, --bb-color-bg-soft): white arrow 9.7:1 */
	--bb-color-footer-social-bg: #555555; /* white icon: 7.5:1 */
	/* Colours - brand accent */
	--bb-color-accent: #FFA500; /* ONLY as background, or as text on dark: 8.8:1 */
	--bb-color-text-on-accent: #1A1A1A; /* on #FFA500: 8.8:1 */
	--bb-color-accent-text: #A85400; /* accent text on white: 5.3:1 */
	--bb-color-accent-text-hover: #7A3D00; /* darker on hover */
	/* Colours - UI and states */
	--bb-color-border: #767676; /* field borders on white: 4.5:1 */
	--bb-color-error: #B3261E; /* on white: 6.5:1 */
	--bb-color-disabled-bg: #E6E6E6; /* greyed-out button */
	--bb-color-disabled-text: #595959; /* on #E6E6E6: 5.3:1 */
	--bb-color-success: #1E6B30; /* on white: 6.6:1 */
	/* Focus outline */
	--bb-focus-color: #1A1A1A; /* on light sections */
	--bb-focus-color-on-dark: #FFA500; /* on dark sections */
	--bb-focus-width: 3px;
	--bb-focus-offset: 2px;
	/* Fonts */
	--bb-font-body: "Prata", Georgia, "Times New Roman", serif; /* original: body in Prata */
	--bb-font-heading: "Open Sans", Arial, Helvetica, sans-serif; /* original: headings in Open Sans */
	--bb-font-display: "Playfair Display", Georgia, "Times New Roman", serif; /* replaces Tangerine */
	--bb-font-size-base: 0.9375rem; /* 15px (original) */
	--bb-line-height-base: 1.6;
	/* Spacing */
	--bb-panel-max-width: 1500px; /* width of the content inside the section panels on large screens */
	--bb-panel-gap: 5px; /* space between the section panels and the screen edges, and between panels */
	--bb-shadow-photo: 0 8px 20px rgba(0, 0, 0, 0.18); /* soft shadow under the gallery photos (decorative) */
	--bb-radius-panel: 16px; /* rounded corners of the section panels */
	--bb-section-padding: 4rem;
	/* ---------- Bootstrap 5.3 overrides (use the values above) ---------- */
	--bs-body-font-family: var(--bb-font-body);
	--bs-body-font-size: var(--bb-font-size-base);
	--bs-body-line-height: var(--bb-line-height-base);
	--bs-body-color: var(--bb-color-text);
	--bs-body-bg: var(--bb-color-bg);
	--bs-secondary-color: var(--bb-color-text-muted);
	--bs-heading-color: var(--bb-color-text);
	--bs-border-color: var(--bb-color-border);
	--bs-link-color: var(--bb-color-accent-text);
	--bs-link-hover-color: var(--bb-color-accent-text-hover);
	/* Bootstrap links use these RGB versions: must match the hex values above */
	--bs-link-color-rgb: 168, 84, 0; /* = #A85400 */
	--bs-link-hover-color-rgb: 122, 61, 0; /* = #7A3D00 */
	/* RGB versions for links on dark sections: must match the hex values above */
	--bb-color-accent-rgb: 255, 165, 0; /* = #FFA500 */
	--bb-color-text-on-dark-rgb: 255, 255, 255; /* = #FFFFFF */
}

/* ---------- ALTCHA captcha widget: use the site colours ---------- */
altcha-widget
{
	color-scheme: light;
	--altcha-color-base: var(--bb-color-bg);
	--altcha-color-base-content: var(--bb-color-text);
	--altcha-color-neutral: var(--bb-color-border);
	--altcha-color-neutral-content: var(--bb-color-text-muted);
	--altcha-color-primary: var(--bb-color-accent-text);
	--altcha-color-primary-content: var(--bb-color-bg);
	--altcha-color-error: var(--bb-color-error);
	--altcha-color-error-content: var(--bb-color-bg);
	--altcha-color-success: var(--bb-color-success);
	--altcha-color-success-content: var(--bb-color-bg);
	--altcha-checkbox-border-color: var(--bb-color-border);
	--altcha-checkbox-outline-color: var(--bb-focus-color);
	--altcha-input-background-color: var(--bb-color-bg);
	--altcha-input-color: var(--bb-color-text);
	--altcha-spinner-color: var(--bb-color-accent-text);
	--altcha-popover-color: var(--bb-color-text);
}

/* ---------- Cookie consent component (Scripts/consent): colours ---------- */
.ps-banner,
.ps-embed
{
	--ps-bg: var(--bb-color-bg);
	--ps-text: var(--bb-color-text);
	--ps-border: var(--bb-color-border);
	--ps-accent: var(--bb-color-accent-text);
	--ps-on-accent: var(--bb-color-bg);
	--ps-focus: var(--bb-focus-color);
	--ps-placeholder-bg: var(--bb-color-bg-alt);
}

/* ---------- Light boxes inside a navy panel (.bb-section-alt): guest review cards, Google Map box ----------
   The navy panel switches the colours to light-on-dark (site.css); these white or light-grey boxes switch them back
   to the normal values above, so their text stays dark and readable (same contrast as on white). */
.bb-section-alt .bb-review,
.bb-section-alt .ps-embed
{
	--bb-color-text: #333333;
	--bb-color-text-muted: #595959;
	--bb-color-title: #000000;
	--bb-color-accent-text: #A85400;
	--bb-color-accent-text-hover: #7A3D00;
	--bb-focus-color: #1A1A1A;
	--bs-body-color: #333333;
	--bs-heading-color: #333333;
	--bs-link-color-rgb: 168, 84, 0; /* = #A85400 */
	--bs-link-hover-color-rgb: 122, 61, 0; /* = #7A3D00 */
	color: var(--bb-color-text);
}