/*
 * Baci Baci brand layer
 *
 * Fonts and colours come from the press kit. Everything is applied by
 * redefining the custom properties PatioTime already uses, so the theme keeps
 * doing its own layout work and only the brand values change.
 */

/* ---------------------------------------------------------------- fonts -- */

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

@font-face {
	font-family: "Pier Sans";
	src: url("fonts/pier-sans-300.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Pier Sans";
	src: url("fonts/pier-sans-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

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

@font-face {
	font-family: "Pier Sans";
	src: url("fonts/pier-sans-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

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

/* ------------------------------------------------------------- palette -- */

:root,
html:root {
	--bb-primary: #193f32;
	--bb-secondary: #4a6859;
	--bb-accent: #faab5c;
	--bb-cream: #f5faf6;

	/* Theme variables, repointed at the brand. */
	--heading-font: "Italiana";
	--body-font: "Pier Sans";
	--secondary-font: "Pier Sans";
	--nav-font: "Pier Sans", sans-serif;
	--primary-color: var(--bb-accent);
	--link-color: var(--bb-accent);

	/*
	 * PatioTime derives every surface from one light and one dark palette.
	 * Repointing those six values rebrands the whole site at the source,
	 * instead of chasing individual sections. Its dark base was near-black
	 * (#0e0d0a); ours is the brand green.
	 */
	--dark-bg-color: var(--bb-primary);
	--dark-text-color: var(--bb-cream);
	--dark-content-color: rgba(245, 250, 246, 0.82);
	--light-bg-color: var(--bb-cream);
	--light-text-color: var(--bb-primary);
	--light-content-color: var(--bb-secondary);

	--page-title-bg: var(--bb-primary);
	--page-title-color: var(--bb-cream);
	--border-color: rgba(245, 250, 246, 0.16);
}

:root .dark-color,
:root .light-color {
	--border-color: rgba(74, 104, 89, 0.35);
}

/* ---------------------------------------------------------- typography -- */

body,
button,
input,
select,
optgroup,
textarea,
.pt-title-text,
.elementor-widget-text-editor,
.menu-item,
.widget {
	font-family: "Pier Sans", "Jost", system-ui, sans-serif;
	font-weight: 400;
	letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6,
.pt-title,
.site-title,
.entry-title,
.elementor-heading-title,
.pt-title-wrap .pt-title,
.widget-title {
	/*
	 * Italiana ships a single weight. Asking for bold would make the browser
	 * synthesise one, which smears the thin strokes this face is built on.
	 * Instead, a hairline stroke in the text colour thickens every stroke
	 * evenly. It is in em so it scales with the size of the heading.
	 */
	font-family: "Italiana", "Cormorant Garamond", Georgia, serif !important;
	font-weight: 400 !important;
	-webkit-text-stroke: 0.032em currentColor;
	paint-order: stroke fill;
	letter-spacing: 0.04em;

	/*
	 * The theme allows mid-word breaks, which in a narrow column turned
	 * "Koramangala" into "KORAMAN / GALA". Prefer whole words, but still
	 * allow a break as a last resort: forbidding it outright makes long
	 * words overflow their column and collide with the next one.
	 *
	 * The tighter tracking buys back enough width that words like
	 * "KORAMANGALA" fit on one line at laptop widths in the first place.
	 */
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: none;
	letter-spacing: 0.02em !important;
}

/* Small caps labels above headings read as body type, not display type. */
.pt-subtitle,
.pt-title-subtitle,
.elementor-widget-pt_title .pt-subtitle {
	font-family: "Pier Sans", system-ui, sans-serif;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bb-accent);
}

/* Buttons are interface, so body face, and never Italiana. */
.button,
.pt-btn,
.elementor-button,
.pt-title-btn a,
input[type="submit"] {
	font-family: "Pier Sans", system-ui, sans-serif !important;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------- colours -- */

.pt-btn-color-primary,
.elementor-button.pt-btn-color-primary {
	--btn-bg: var(--bb-accent);
	color: var(--bb-primary);
}

a:hover,
.pt-title a:hover {
	color: var(--bb-accent);
}

/* ------------------------------------------------------- weave pattern -- */

/*
 * The takeaway bag runs the weave as a band where two surfaces meet. Same
 * idea here: a band above the footer, and a utility class for any section
 * that wants one.
 */
/* The footer now carries the weave itself, so it no longer needs a band
 * above it — two patterns stacked fight each other. */
.bb-weave {
	content: "";
	display: block;
	width: 100%;
	height: 56px;
	background-image: var(--bb-weave-orange-green);
	background-repeat: repeat;
	background-size: 56px 112px;
}

.bb-weave--sage {
	background-image: var(--bb-weave-sage-green);
}

.bb-weave--cream {
	background-image: var(--bb-weave-green-cream);
}

.bb-weave--tall {
	height: 112px;
}

/* ------------------------------------------------------- menu cards -- */

/*
 * The menu cards are set to a fixed width and a free height, so each one took
 * the proportions of its own photo: three shot 3:4 and one 2:3, which left
 * that card taller and its caption hanging below the row. Pinning the frame
 * to 3:4 and cropping to fill lines the row up whatever gets swapped in.
 */
.bb-menu-card img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------- arches -- */

/*
 * The room is full of arches, so photos can take the same shape. The frame
 * is fixed at 3:4, so a vertical radius of 37.5% of the height equals half
 * the width and the top is a true semicircle rather than an ellipse.
 * Important because the theme rounds every Elementor image by 5px with a
 * more specific selector.
 */
.bb-menu-card img,
.bb-arch img {
	border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0 !important;
}

.bb-arch img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
}

.bb-interiors-title .pt-title-text {
	max-width: 44em;
	margin-left: auto;
	margin-right: auto;
}

/* The line under each arch's heading. */
.bb-arch-caption {
	text-align: center;
}

/* Keep the caption close to its heading: the default widget gap read as a break. */
.elementor-widget-heading:has(+ .bb-arch-caption) {
	margin-bottom: 8px !important;
}

.elementor-widget-heading:has(+ .bb-arch-caption) .elementor-heading-title {
	margin-bottom: 0;
}

.bb-arch-caption p {
	max-width: 22em;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.6;
}

/* ---------------------------------------------------- even photo grids -- */

/*
 * Photos arrive in mixed shapes, so any grid built from them has ragged rows.
 * Cropping every photo in a grid to one shape lines the rows up.
 *   .bb-frame  a single image widget
 *   .bb-grid   the theme's gallery widget
 */
.bb-frame img,
.bb-grid .pt-gallery-item img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
}

/* ------------------------------------------------------- gallery page -- */

/*
 * Elementor's gallery widget, re-laid as a CSS grid. The widget is kept for
 * its lightbox; the float layout it ships with is replaced.
 */
/* Flex rather than grid so a short last row sits centred, not left-aligned. */
.bb-gallery .gallery {
	--bb-gap: 16px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bb-gap);
	margin: 0;
}

.bb-gallery .gallery br {
	display: none;
}

.bb-gallery .gallery-item {
	flex: 0 0 calc((100% - (var(--bb-cols, 3) - 1) * var(--bb-gap)) / var(--bb-cols, 3));
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.bb-gallery .gallery-icon {
	overflow: hidden;
	border-radius: 2px;
}

.bb-gallery .gallery-icon a {
	display: block;
	cursor: zoom-in;
}

.bb-gallery img {
	display: block;
	width: 100% !important;
	height: auto !important;
	object-fit: cover;
	border: 0 !important;
	transition: transform 300ms ease, filter 300ms ease;
}

.bb-gallery--landscape img { aspect-ratio: 3 / 2; }
.bb-gallery--portrait img  { aspect-ratio: 4 / 5; }
.bb-gallery--3 { --bb-cols: 3; }
.bb-gallery--4 { --bb-cols: 4; }

.bb-gallery .gallery-icon a:hover img,
.bb-gallery .gallery-icon a:focus-visible img {
	transform: scale(1.04);
	filter: brightness(1.06);
}

.bb-gallery .gallery-icon a:focus-visible {
	outline: 2px solid var(--bb-accent);
	outline-offset: 3px;
}

.bb-gallery-title .pt-title-text {
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 1024px) {
	.bb-gallery--3 { --bb-cols: 2; }
	.bb-gallery--4 { --bb-cols: 3; }
}

@media (max-width: 767px) {
	.bb-gallery .gallery { --bb-gap: 10px; }
	.bb-gallery--3 { --bb-cols: 1; }
	.bb-gallery--4 { --bb-cols: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.bb-gallery img { transition: none; }
	.bb-gallery .gallery-icon a:hover img { transform: none; }
}

/* Home "The Room": two photos side by side, same crop, no overlap. */
.bb-room-pair img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/*
 * Home Instagram feed (Smash Balloon). The section heading already names the
 * account, so the plugin's own header goes; its bio emoji also rendered as
 * full-width images. Its blue buttons become the site's outlined gold ones.
 */
.bb-instagram .sb_instagram_header {
	display: none !important;
}

.bb-instagram #sbi_load {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 40px;
}

.bb-instagram #sbi_load .sbi_load_btn,
.bb-instagram #sbi_load .sbi_follow_btn a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	padding: 16px 44px !important;
	border: 2px solid var(--bb-accent) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--bb-accent) !important;
	font-family: "Pier Sans", system-ui, sans-serif !important;
	font-size: 14px !important;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	box-shadow: none !important;
	transition: background-color 0.2s, color 0.2s;
}

.bb-instagram #sbi_load .sbi_load_btn:hover,
.bb-instagram #sbi_load .sbi_follow_btn a:hover {
	background: var(--bb-accent) !important;
	color: var(--bb-primary) !important;
}

/* ---------------------------------------------------------------- misc -- */

::selection {
	background: var(--bb-accent);
	color: var(--bb-primary);
}