/*
 * Bootstrap 5.3 theming bridge for the "Pelíšek" brand - loaded AFTER bootstrap.min.css so these
 * overrides win the cascade. Bootstrap 5.3 components/utilities (.btn-primary, .text-primary,
 * .bg-primary, .border-primary, .link-primary, ...) read colors from these CSS variables at
 * runtime, so this is enough to re-theme them without a Sass build.
 */

:root {
	--bs-primary: var(--ph-accent, #C1694F);
	--bs-primary-rgb: 193, 105, 79;
	--bs-link-color: var(--bs-primary);
	--bs-link-color-rgb: var(--bs-primary-rgb);
	--bs-link-hover-color: var(--ph-accent-hover, #A5502F);
	--bs-link-hover-color-rgb: 165, 80, 47;
	--bs-body-font-family: 'Work Sans', system-ui, sans-serif;
	--bs-body-bg: var(--ph-cream, #FAF6EF);
	--bs-body-color: var(--ph-ink, #3A3530);

	/* the design's dark sections (CTA, footer) use these instead of Bootstrap's default near-black */
	--bs-dark: var(--ph-dark, #2B2723);
	--bs-dark-rgb: 43, 39, 35;
	--bs-black: var(--ph-darker, #211E1B);

	/* the design rounds everything more generously than stock Bootstrap */
	--bs-border-radius-sm: .5rem;
	--bs-border-radius: .75rem;
	--bs-border-radius-lg: 1.125rem;
	--bs-border-radius-xl: 1.25rem;
}

.btn-primary {
	--bs-btn-hover-bg: var(--ph-accent-hover, #A5502F);
	--bs-btn-hover-border-color: var(--ph-accent-hover, #A5502F);
	--bs-btn-active-bg: var(--ph-accent-hover, #A5502F);
	--bs-btn-active-border-color: var(--ph-accent-hover, #A5502F);
}

/* .card's own --bs-card-bg defaults to --bs-body-bg, which we set to cream above - without this,
   every card (search bar, hotel offers) would blend into the page instead of standing out white
   like in the design. */
.card {
	--bs-card-bg: #fff;
}

.bg-black {
	background-color: var(--bs-black) !important;
}

/* Headings use the display serif from the design; body text stays on Work Sans. */
.font-serif {
	font-family: 'Fraunces', serif;
}

/* Sticky, semi-transparent, blurred nav - like the design's header instead of a flat navbar. */
.navbar.sticky-top {
	background: rgba(250, 246, 239, 0.94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* Small uppercase eyebrow label above section headings. */
.kicker {
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bs-primary);
}

/* Rounded pill "popular location" tags - softer and warmer than btn-outline-secondary. */
.chip {
	display: inline-block;
	padding: .4rem 1rem;
	border: 1px solid rgba(58, 53, 48, .16);
	border-radius: 999px;
	font-size: .85rem;
	color: var(--ph-ink, #3A3530);
	transition: border-color .15s ease, color .15s ease;
}
.chip:hover {
	border-color: var(--bs-primary);
	color: var(--bs-primary);
}

/* Big soft shadow used by the search bar in the design - Bootstrap's .shadow-* are much tighter. */
.shadow-soft {
	box-shadow: 0 24px 48px rgba(58, 53, 48, .10);
}

/* Hotel offer cards lift slightly on hover, like the design's .hotel-card. */
.hotel-card {
	transition: transform .15s ease, box-shadow .15s ease;
}
.hotel-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 36px rgba(58, 53, 48, .12);
}

/* The design's sections breathe more than Bootstrap's py-5 (3rem) alone. */
.section-py {
	padding-top: 5.5rem;
	padding-bottom: 5.5rem;
}

.hero-title {
	font-size: 2.75rem;
	line-height: 1.1;
	letter-spacing: -.02em;
}
@media (min-width: 992px) {
	.hero-title {
		font-size: 3rem;
	}
}

/* Placeholder photo tiles (hotel cards, auth visual panel) - no real photos wired up yet. */
.ph-placeholder-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #E8DCC6, #D9C7A3);
	color: #8A7A5C;
	font-size: 0.8rem;
}
.ph-placeholder-photo--2 { background: linear-gradient(135deg, #E3ECE2, #C9DAC5); color: #6C8267; }
.ph-placeholder-photo--3 { background: linear-gradient(135deg, #F0DED4, #E3BFAE); color: #9A6C55; }
.ph-placeholder-photo--4 { background: linear-gradient(135deg, #EFE6D8, #DCC9A5); color: #8A7A5C; }
.ph-placeholder-photo--5 { background: linear-gradient(135deg, #DCE7D8, #B9CFB2); color: #5F7657; }
.ph-placeholder-photo--6 { background: linear-gradient(135deg, #F3E9D8, #E8D3A8); color: #8A7A5C; }