/* ==========================================================================
   Mathelm Hotel — Design System
   Upscale black & gold palette on a soft ivory body.
   ========================================================================== */

:root {
	--color-cream: #FAF3E9;
	--color-cream-alt: #F1E4D3;
	--color-espresso: #141414;
	--color-espresso-soft: #262422;
	--color-gold: #C6A15B;
	--color-gold-dark: #A8823D;
	--color-gold-light: #E8D5AC;
	--color-text: #2E2620;
	--color-text-muted: #8A7A68;
	--color-white: #FFFFFF;
	--color-available: #5E7A5C;
	--color-occupied: #A6664F;

	--font-heading: 'Playfair Display', Georgia, serif;
	--font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--shadow-soft: 0 10px 30px rgba(43, 31, 23, 0.08);
	--shadow-lift: 0 16px 36px rgba(43, 31, 23, 0.16);
	--radius: 14px;
}

body {
	background-color: var(--color-cream);
	color: var(--color-text);
	font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.card-title,
.navbar-brand {
	font-family: var(--font-heading);
	color: var(--color-espresso);
}

a {
	color: var(--color-gold-dark);
}

a:hover {
	color: var(--color-espresso);
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

.site-header .navbar {
	background-color: var(--color-espresso) !important;
	border-bottom: 1px solid rgba(198, 161, 91, 0.15);
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
}

.site-header .navbar-brand {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--color-white) !important;
}

.brand-icon {
	height: 42px;
	width: auto;
	border-radius: 6px;
}

.brand-name {
	font-family: var(--font-heading);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--color-white);
}

.footer-logo {
	height: 90px;
	width: auto;
	border-radius: 8px;
	margin-bottom: 1rem;
}

.site-header .nav-link {
	font-family: var(--font-body);
	color: var(--color-gold-light) !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0 0.5rem;
	position: relative;
}

.site-header .nav-link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 2px;
	background-color: var(--color-gold);
	transition: width 0.2s ease;
}

.site-header .nav-link:hover::after {
	width: 100%;
}

.site-header .nav-link:hover {
	color: var(--color-white) !important;
}

.navbar-toggler {
	border-color: rgba(232, 213, 172, 0.3) !important;
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 0.2rem rgba(198, 161, 91, 0.35);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	min-height: 68vh;
	display: flex;
	align-items: center;
	background-image:
		radial-gradient(circle at 20% 20%, rgba(198, 161, 91, 0.18), transparent 45%),
		linear-gradient(135deg, rgba(20, 20, 20, 0.82), rgba(38, 36, 34, 0.82)),
		url('../img/rooms/hero-hallway.jpg');
	background-size: auto, auto, cover;
	background-position: center, center, center 30%;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
}

.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35));
	pointer-events: none;
}

.hero .container {
	position: relative;
	z-index: 1;
}

.hero h1 {
	color: var(--color-white);
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	margin-bottom: 1rem;
}

.hero .lead {
	color: var(--color-gold-light);
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	font-family: var(--font-body);
}

.btn-hero {
	background-color: var(--color-gold);
	border: none;
	color: var(--color-espresso);
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 0.85rem 2.25rem;
	border-radius: 999px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-hero:hover {
	background-color: var(--color-gold-dark);
	color: var(--color-white);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lift);
}

.btn-hero-outline {
	background-color: transparent;
	border: 1.5px solid var(--color-gold-light);
	color: var(--color-gold-light);
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 0.85rem 2.25rem;
	border-radius: 999px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn-hero-outline:hover {
	background-color: var(--color-gold-light);
	color: var(--color-espresso);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lift);
}

/* ==========================================================================
   Section headings
   ========================================================================== */

.section-title {
	position: relative;
	margin-bottom: 3rem;
}

.section-title::after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	background-color: var(--color-gold);
	margin: 0.75rem auto 0;
}

.section-alt {
	background-color: var(--color-cream-alt);
}

/* ==========================================================================
   Cards (room types + individual rooms)
   ========================================================================== */

.card-img-placeholder {
	height: 200px;
	background: linear-gradient(135deg, var(--color-gold-light), var(--color-cream-alt));
}

.room-type-card,
.room-card {
	border: none;
	border-radius: var(--radius);
	overflow: hidden;
	background-color: var(--color-white);
	box-shadow: var(--shadow-soft);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.room-type-card:hover,
.room-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lift);
}

.room-type-card .card-body,
.room-card .card-body {
	padding: 1.5rem;
}

.room-type-card .card-title,
.room-card .card-title {
	font-size: 1.25rem;
}

.price-tag {
	color: var(--color-gold-dark);
	font-family: var(--font-heading);
	font-size: 1.1rem;
}

/* ==========================================================================
   Room detail gallery
   ========================================================================== */

.room-gallery {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}

.room-gallery-item img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	display: block;
}

.room-gallery .owl-nav button.owl-prev,
.room-gallery .owl-nav button.owl-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(20, 20, 20, 0.55) !important;
	color: var(--color-white) !important;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 1.5rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.room-gallery .owl-nav button.owl-prev {
	left: 12px;
}

.room-gallery .owl-nav button.owl-next {
	right: 12px;
}

.room-gallery .owl-dots {
	text-align: center;
	padding: 0.75rem 0;
}

.room-gallery .owl-dot span {
	background: var(--color-cream-alt) !important;
}

.room-gallery .owl-dot.active span {
	background: var(--color-gold) !important;
}

.badge-available {
	background-color: var(--color-available) !important;
}

.badge-occupied {
	background-color: var(--color-occupied) !important;
}

/* ==========================================================================
   Filter buttons (rooms page)
   ========================================================================== */

.filter-btn {
	display: inline-block;
	border: 1.5px solid var(--color-espresso);
	color: var(--color-espresso);
	background-color: transparent;
	border-radius: 999px;
	padding: 0.4rem 1.1rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
}

.filter-btn:hover {
	background-color: var(--color-espresso);
	color: var(--color-white);
}

.filter-btn.active {
	background-color: var(--color-gold);
	border-color: var(--color-gold);
	color: var(--color-espresso);
}

/* ==========================================================================
   Amenities
   ========================================================================== */

.amenity-item {
	color: var(--color-espresso);
}

.amenity-item i {
	color: var(--color-gold-dark);
	display: block;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background: var(--color-espresso);
	color: var(--color-gold-light);
	padding: 3.5rem 0 1.5rem;
}

.site-footer h5 {
	color: var(--color-white);
	font-family: var(--font-heading);
	margin-bottom: 0.75rem;
}

.site-footer p {
	color: rgba(232, 213, 172, 0.75);
}

.footer-links li {
	margin-bottom: 0.5rem;
}

.footer-links a {
	color: rgba(232, 213, 172, 0.75);
	text-decoration: none;
}

.footer-links a:hover {
	color: var(--color-gold);
	text-decoration: underline;
}

.social-links {
	display: flex;
	gap: 0.9rem;
}

.social-links a {
	color: var(--color-gold-dark);
	transition: color 0.2s ease;
}

.social-links a:hover {
	color: var(--color-espresso);
}

.site-footer .social-links a {
	color: var(--color-gold-light);
}

.site-footer .social-links a:hover {
	color: var(--color-gold);
}

.site-footer hr {
	border-color: rgba(232, 213, 172, 0.2);
	margin: 2rem 0 1.5rem;
}

/* ==========================================================================
   Datepicker (booking form) — overrides the vendored theme's colors
   ========================================================================== */

.datepicker {
	font-family: var(--font-body);
	border: none;
	border-radius: var(--radius);
	box-shadow: var(--shadow-lift);
	padding: 0.75rem;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active {
	background-color: var(--color-gold) !important;
	background-image: none !important;
	border-color: var(--color-gold-dark) !important;
	color: var(--color-espresso) !important;
	text-shadow: none !important;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
	background-color: var(--color-cream-alt) !important;
	background-image: none !important;
	color: var(--color-espresso) !important;
}

.datepicker table tr td.unavailable-date,
.datepicker table tr td.unavailable-date:hover {
	background-color: transparent !important;
	background-image: none !important;
	color: #c9beb0 !important;
	text-decoration: line-through;
	cursor: not-allowed;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
	color: #d8cfc3 !important;
	background-image: none !important;
}

/* ==========================================================================
   Homepage: stats, value props, closing CTA banner
   ========================================================================== */

.quick-fact-label {
	color: var(--color-text-muted);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.quick-fact-value {
	font-family: var(--font-heading);
	color: var(--color-gold-dark);
	font-size: 1.35rem;
	font-weight: 700;
}

.value-prop i {
	color: var(--color-gold-dark);
}

.cta-banner {
	background: var(--color-espresso);
	color: rgba(232, 213, 172, 0.85);
}

.cta-banner h2 {
	color: var(--color-white);
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.faq-accordion .accordion-item {
	border: none;
	border-bottom: 1px solid rgba(43, 31, 23, 0.1);
	background: transparent;
}

.faq-accordion .accordion-button {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-espresso);
	background: transparent;
	padding: 1.25rem 0;
	box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
	color: var(--color-gold-dark);
	background: transparent;
	box-shadow: none;
}

.faq-accordion .accordion-button:focus {
	box-shadow: none;
}

.faq-accordion .accordion-button::after {
	background-size: 1.1rem;
}

.faq-accordion .accordion-body {
	padding: 0 0 1.25rem;
	color: var(--color-text-muted);
}

/* ==========================================================================
   Content pages (About, Event Hall, Restaurant, Bar & Lounge)
   ========================================================================== */

.page-hero {
	background: linear-gradient(135deg, var(--color-espresso), var(--color-espresso-soft));
	padding: 3.5rem 0;
	text-align: center;
}

.page-hero h1 {
	color: var(--color-white);
	margin-bottom: 0.5rem;
}

.page-hero p {
	color: var(--color-gold-light);
	max-width: 640px;
	margin: 0 auto;
}

/* ==========================================================================
   Scroll-reveal animations
   ========================================================================== */

.reveal {
	opacity: 0;
}

.reveal.is-visible {
	opacity: 1;
}