/**
 * Bananchal Farms — main stylesheet.
 *
 * Loaded after Bootstrap 5 so everything here overrides framework defaults.
 * Section-specific styles get appended below the shared layers.
 *
 * 1. Design tokens
 * 2. Base + typography
 * 3. Buttons
 * 4. Section helpers
 * 5. Topbar + header
 * 6. Page banner + breadcrumbs
 * 7. Content + blog
 * 8. Footer
 * 9. Utilities
 */

/* ==========================================================================
   1. Design tokens — palette pulled from the Bananchal Farms logo
   ========================================================================== */

:root {
	/* Brand */
	--bf-green: #2f6b3a;        /* Forest canopy — primary */
	--bf-green-dark: #1c4227;   /* Deep shade — headers, footer */
	--bf-green-darker: #12301b;
	--bf-green-light: #7cb342;  /* New leaf */
	--bf-amber: #f5b715;        /* Sunset disc in the logo */
	--bf-amber-dark: #d99b06;
	--bf-orange: #e8802b;       /* Tiger stripe */

	/* Neutrals */
	--bf-charcoal: #262523;     /* Wordmark black */
	--bf-ink: #3a3936;          /* Body copy */
	--bf-muted: #6f6c66;
	--bf-line: #e3ddd1;
	--bf-cream: #fbf7ef;        /* Page tint */
	--bf-sand: #f1e9da;         /* Alternating sections */
	--bf-white: #ffffff;

	/* Type */
	--bf-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--bf-font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Rhythm */
	--bf-section-y: 3rem;
	--bf-radius: 4px;
	--bf-radius-lg: 10px;

	/* Depth */
	--bf-shadow-sm: 0 2px 10px rgba(28, 66, 39, 0.06);
	--bf-shadow: 0 12px 34px rgba(28, 66, 39, 0.1);
	--bf-shadow-lg: 0 24px 60px rgba(28, 66, 39, 0.16);

	/* Motion */
	--bf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--bf-transition: 0.35s var(--bf-ease);

	/* Chrome */
	--bf-header-h: 92px;
	--bf-topbar-h: 42px;

	/* Bootstrap overrides */
	--bs-primary: var(--bf-green);
	--bs-primary-rgb: 47, 107, 58;
	--bs-body-color: var(--bf-ink);
	--bs-body-font-family: var(--bf-font-body);
	--bs-link-color: var(--bf-green);
	--bs-link-hover-color: var(--bf-amber-dark);
	--bs-border-color: var(--bf-line);
}

@media (max-width: 991.98px) {
	:root {
		--bf-section-y: 2rem;
		--bf-header-h: 76px;
	}
}

/* ==========================================================================
   2. Base + typography
   ========================================================================== */

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--bf-header-h) + 20px);
}

body {
	font-family: var(--bf-font-body);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--bf-ink);
	background-color: var(--bf-white);
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--bf-font-display);
	font-weight: 600;
	line-height: 1.18;
	color: var(--bf-green-dark);
	letter-spacing: -0.01em;
}

h1, .h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2, .h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
h3, .h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
h4, .h4 { font-size: 1.35rem; }
h5, .h5 { font-size: 1.15rem; }
h6, .h6 { font-size: 1rem; }

p { margin-bottom: 1.15rem; }

p:last-child { margin-bottom: 0; }

a {
	color: var(--bf-green);
	text-decoration: none;
	transition: color var(--bf-transition);
}

a:hover, a:focus { color: var(--bf-amber-dark); }

/* Visible focus for keyboard users, invisible for mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--bf-amber);
	outline-offset: 3px;
}

img { max-width: 100%; height: auto; }

::selection {
	background: var(--bf-amber);
	color: var(--bf-charcoal);
}

/* Editorial lead paragraph. */
.lead-text {
	font-size: 1.125rem;
	color: var(--bf-muted);
	line-height: 1.85;
}

/* Small caps label above a heading. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--bf-font-body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bf-amber-dark);
	margin-bottom: 0.9rem;
}

.eyebrow::before {
	content: '';
	width: 34px;
	height: 1px;
	background: var(--bf-amber);
}

.eyebrow--center::after {
	content: '';
	width: 34px;
	height: 1px;
	background: var(--bf-amber);
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */

.btn {
	font-family: var(--bf-font-body);
	font-weight: 500;
	font-size: 0.86rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.95rem 2.1rem;
	border-radius: var(--bf-radius);
	border-width: 1px;
	transition: all var(--bf-transition);
}

.btn:focus { box-shadow: none; }

.btn-primary,
.btn-bf {
	background-color: var(--bf-green);
	border-color: var(--bf-green);
	color: var(--bf-white);
}

.btn-primary:hover, .btn-primary:focus,
.btn-bf:hover, .btn-bf:focus {
	background-color: var(--bf-green-dark);
	border-color: var(--bf-green-dark);
	color: var(--bf-white);
	transform: translateY(-2px);
	box-shadow: var(--bf-shadow);
}

.btn-gold {
	background-color: var(--bf-amber);
	border-color: var(--bf-amber);
	color: var(--bf-charcoal);
}

.btn-gold:hover, .btn-gold:focus {
	background-color: var(--bf-amber-dark);
	border-color: var(--bf-amber-dark);
	color: var(--bf-charcoal);
	transform: translateY(-2px);
	box-shadow: var(--bf-shadow);
}

.btn-outline-bf {
	background-color: transparent;
	border-color: var(--bf-green);
	color: var(--bf-green);
}

.btn-outline-bf:hover, .btn-outline-bf:focus {
	background-color: var(--bf-green);
	color: var(--bf-white);
}

/* For use over photography. */
.btn-ghost {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.65);
	color: var(--bf-white);
}

.btn-ghost:hover, .btn-ghost:focus {
	background-color: var(--bf-white);
	border-color: var(--bf-white);
	color: var(--bf-green-dark);
}

/* ==========================================================================
   4. Section helpers
   ========================================================================== */

.section {
	padding-top: var(--bf-section-y);
	padding-bottom: var(--bf-section-y);
}

.section--tight {
	padding-top: calc(var(--bf-section-y) * 0.6);
	padding-bottom: calc(var(--bf-section-y) * 0.6);
}

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

.section--forest {
	background-color: var(--bf-green-dark);
	color: rgba(255, 255, 255, 0.82);
}

.section--forest h1,
.section--forest h2,
.section--forest h3,
.section--forest h4 {
	color: var(--bf-white);
}

.section-head { margin-bottom: 3rem; }

.section-head--center {
	text-align: center;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.section-title { margin-bottom: 1rem; }

/* ==========================================================================
   5. Topbar + header
   ========================================================================== */

.topbar {
	background-color: var(--bf-green-dark);
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.82rem;
	line-height: var(--bf-topbar-h);
	height: var(--bf-topbar-h);
	overflow: hidden;
}

.topbar a {
	color: rgba(255, 255, 255, 0.78);
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.topbar a:hover { color: var(--bf-amber); }

.topbar__divider {
	display: inline-block;
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, 0.22);
	margin: 0 1rem;
	vertical-align: middle;
}

.topbar__socials a + a { margin-left: 0.9rem; }

.site-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background-color: var(--bf-white);
	box-shadow: 0 1px 0 var(--bf-line);
	transition: box-shadow var(--bf-transition), background-color var(--bf-transition);
}

.site-header.is-stuck { box-shadow: var(--bf-shadow-sm); }

.site-header .navbar {
	height: var(--bf-header-h);
	padding-top: 0;
	padding-bottom: 0;
}

.custom-logo,
.custom-logo-link img {
	height: auto;
	max-height: 62px;
	width: auto;
}

.site-title {
	font-family: var(--bf-font-display);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--bf-green-dark);
}

.site-header .navbar-nav { gap: 0.35rem; }

/*
 * Sentence case, not uppercase. The wide 0.11em tracking that suited caps looks
 * gappy on mixed case, so it drops to 0.02em, and the size goes up a touch
 * because lowercase reads smaller than caps at the same px.
 */
.site-header .nav-link {
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--bf-charcoal);
	padding: 0.6rem 0.9rem;
	position: relative;
}

.site-header .nav-link::after {
	content: '';
	position: absolute;
	left: 0.9rem;
	right: 0.9rem;
	bottom: 0.35rem;
	height: 1px;
	background: var(--bf-amber);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--bf-transition);
}

.site-header .nav-link:hover,
.site-header .nav-link.active { color: var(--bf-green); }

.site-header .nav-link:hover::after,
.site-header .nav-link.active::after { transform: scaleX(1); }

/* Bootstrap adds its own caret; ours is the icon font, so hide the default. */
.site-header .dropdown-toggle::after { display: none; }

.site-header .dropdown-menu {
	border: 0;
	border-top: 2px solid var(--bf-amber);
	border-radius: 0 0 var(--bf-radius) var(--bf-radius);
	box-shadow: var(--bf-shadow);
	padding: 0.5rem 0;
	margin-top: 0;
	min-width: 220px;
}

.site-header .dropdown-item {
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	padding: 0.6rem 1.25rem;
	color: var(--bf-ink);
}

.site-header .dropdown-item:hover,
.site-header .dropdown-item.active {
	background-color: var(--bf-cream);
	color: var(--bf-green);
}

.header-cta { margin-left: 1.25rem; }

.navbar-toggler {
	border: 1px solid var(--bf-line);
	padding: 0.45rem 0.6rem;
	border-radius: var(--bf-radius);
	color: var(--bf-green-dark);
	font-size: 1.25rem;
	line-height: 1;
}

.navbar-toggler:focus { box-shadow: none; }

/* Off-canvas mobile menu. */
.offcanvas {
	background-color: var(--bf-white);
	width: min(340px, 86vw);
}

.offcanvas .navbar-nav { gap: 0; }

.offcanvas .nav-link {
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--bf-line);
}

.offcanvas .nav-link::after { display: none; }

.offcanvas .dropdown-menu {
	border: 0;
	box-shadow: none;
	padding-left: 1rem;
	background: var(--bf-cream);
}

/* ==========================================================================
   6. Page banner
   ========================================================================== */

/*
 * Full-bleed background photograph with the page title tucked into the
 * bottom-left corner. The image carries the page; no scrim, no subtitle, no
 * breadcrumb — those moved into the page body where they belong.
 *
 * Flexbox is used (not padding) so the title always sits at the bottom
 * regardless of how the heading wraps, and the section is min-height bound
 * so a short page does not collapse to a 1-line banner.
 */
.page-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 320px;
	padding: 2rem 0 2.5rem;
	background-color: var(--bf-green-dark);
	background-size: cover;
	background-position: center;
	color: var(--bf-white);
}

@media (min-width: 768px) {
	.page-banner {
		min-height: 380px;
		padding: 2.5rem 0 3rem;
	}
}

.page-banner__title {
	color: var(--bf-white);
	margin: 0;
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 500;
	line-height: 1.1;
	max-width: 720px;
}

/* The overlay class is reserved for a future re-introduction, intentionally
   kept neutral so any current selector still works without painting. */
.page-banner--image::before { content: none; }

.breadcrumbs {
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.7);
}

.breadcrumbs a { color: rgba(255, 255, 255, 0.7); }
.breadcrumbs a:hover { color: var(--bf-amber); }
.breadcrumbs .sep { margin: 0 0.6rem; opacity: 0.5; }

/* ==========================================================================
   7. Content + blog
   ========================================================================== */

.entry-content h2,
.entry-content h3,
.entry-content h4 { margin-top: 2.25rem; margin-bottom: 1rem; }

.entry-content ul,
.entry-content ol { margin-bottom: 1.25rem; padding-left: 1.35rem; }

.entry-content li { margin-bottom: 0.4rem; }

.entry-content img { border-radius: var(--bf-radius-lg); }

.entry-content blockquote {
	border-left: 3px solid var(--bf-amber);
	padding: 0.5rem 0 0.5rem 1.5rem;
	margin: 2rem 0;
	font-family: var(--bf-font-display);
	font-size: 1.35rem;
	font-style: italic;
	color: var(--bf-green-dark);
}

.entry-content table {
	width: 100%;
	margin-bottom: 1.5rem;
	border-collapse: collapse;
}

.entry-content th,
.entry-content td {
	border: 1px solid var(--bf-line);
	padding: 0.75rem 1rem;
}

.entry-content th { background: var(--bf-cream); text-align: left; }

.post-card {
	background: var(--bf-white);
	border: 1px solid var(--bf-line);
	border-radius: var(--bf-radius-lg);
	overflow: hidden;
	height: 100%;
	transition: transform var(--bf-transition), box-shadow var(--bf-transition);
}

.post-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--bf-shadow);
}

.post-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bf-sand);
}

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--bf-ease);
}

.post-card:hover .post-card__media img { transform: scale(1.06); }

.post-card__body { padding: 1.5rem; }

.post-card__title { font-size: 1.35rem; margin-bottom: 0.5rem; }

.post-card__title a { color: var(--bf-green-dark); }
.post-card__title a:hover { color: var(--bf-amber-dark); }

.post-meta {
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	color: var(--bf-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem;
	margin-bottom: 0.75rem;
}

.post-meta i { color: var(--bf-amber-dark); margin-right: 0.3rem; }

.widget-title,
.footer-widget__title {
	font-size: 1.15rem;
	margin-bottom: 1rem;
}

.widget ul { list-style: none; padding: 0; margin: 0; }

.widget li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--bf-line);
}

/* Pagination. */
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.6rem;
	margin: 0 0.2rem;
	border: 1px solid var(--bf-line);
	border-radius: var(--bf-radius);
	color: var(--bf-green-dark);
	font-size: 0.9rem;
}

.page-numbers:hover,
.page-numbers.current {
	background: var(--bf-green);
	border-color: var(--bf-green);
	color: var(--bf-white);
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

.site-footer {
	background-color: var(--bf-green-darker);
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.92rem;
}

.site-footer a { color: rgba(255, 255, 255, 0.7); }
.site-footer a:hover { color: var(--bf-amber); }

.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6 { color: var(--bf-white); }

.footer-main {
	padding-top: 4.5rem;
	padding-bottom: 3rem;
}

.footer-brand__logo {
	max-height: 66px;
	width: auto;
	margin-bottom: 1.25rem;
	/* The logo wordmark is dark; lift it so it reads on the forest background. */
	background: rgba(255, 255, 255, 0.94);
	border-radius: var(--bf-radius);
	padding: 0.5rem 0.75rem;
}

.footer-widget ul { list-style: none; padding: 0; margin: 0; }

.footer-widget li { padding: 0.35rem 0; border: 0; }

.footer-nav { list-style: none; padding: 0; margin: 0; }

.footer-nav li { padding: 0.35rem 0; }

.footer-contact { list-style: none; padding: 0; margin: 0; }

.footer-contact li {
	display: flex;
	gap: 0.75rem;
	padding: 0.45rem 0;
}

.footer-contact i { color: var(--bf-amber); margin-top: 0.35rem; }

.footer-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	margin-right: 0.5rem;
	transition: all var(--bf-transition);
}

.footer-socials a:hover {
	background: var(--bf-amber);
	border-color: var(--bf-amber);
	color: var(--bf-charcoal);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 1.35rem 0;
	font-size: 0.85rem;
}

/* Floating WhatsApp / call buttons. */
.floating-actions {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 1040;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

/* Upright tab on the right edge — a third disc would crowd the two round buttons. */
.enquire-tab {
	position: fixed;
	right: 0;
	top: 50%;
	z-index: 1040;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 0.7rem;
	border-radius: var(--bf-radius) 0 0 var(--bf-radius);
	background-color: var(--bf-amber-dark);
	color: var(--bf-charcoal);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	white-space: nowrap;
	box-shadow: var(--bf-shadow);
	/* Rotated so the tab reads bottom-to-top down the edge of the screen. */
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	transition: background-color var(--bf-transition), padding-right var(--bf-transition);
}

.enquire-tab:hover,
.enquire-tab:focus-visible {
	background-color: var(--bf-amber);
	color: var(--bf-charcoal);
	padding-right: 1.1rem;
}

.enquire-tab i {
	/* The glyph inherits the vertical writing mode and lies on its side. */
	transform: rotate(90deg);
	font-size: 0.95rem;
}

/* The tab and the two discs would overlap in the corner on a short screen. */
@media (max-width: 575.98px), (max-height: 520px) {
	.enquire-tab {
		font-size: 0.76rem;
		padding: 0.7rem 0.55rem;
	}
}

.floating-actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	color: var(--bf-white);
	font-size: 1.35rem;
	box-shadow: var(--bf-shadow);
	transition: transform var(--bf-transition);
}

.floating-actions a:hover { transform: translateY(-3px); color: var(--bf-white); }

.floating-actions .fa-whatsapp { background: #25d366; }
.floating-actions .fa-call { background: var(--bf-green); }

/* Back to top. */
.to-top {
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 1040;
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--bf-green-dark);
	color: var(--bf-white);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--bf-transition), visibility var(--bf-transition), transform var(--bf-transition);
}

.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { transform: translateY(-3px); background: var(--bf-amber); color: var(--bf-charcoal); }

/* ==========================================================================
   9. Utilities
   ========================================================================== */

.text-gold { color: var(--bf-amber-dark) !important; }
.text-forest { color: var(--bf-green-dark) !important; }
.bg-cream { background-color: var(--bf-cream) !important; }
.bg-sand { background-color: var(--bf-sand) !important; }
.bg-forest { background-color: var(--bf-green-dark) !important; }

.font-display { font-family: var(--bf-font-display) !important; }

.rounded-bf { border-radius: var(--bf-radius-lg) !important; }
.shadow-bf { box-shadow: var(--bf-shadow) !important; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 2000;
	width: auto;
	height: auto;
	clip: auto;
	padding: 0.75rem 1.25rem;
	background: var(--bf-white);
	color: var(--bf-green-dark);
	border-radius: var(--bf-radius);
	box-shadow: var(--bf-shadow);
}

/* Reveal-on-scroll — JS adds .is-visible via IntersectionObserver. */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s var(--bf-ease), transform 0.8s var(--bf-ease);
}

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	.reveal,
	.reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}