/* WordPress-side additions. Everything visual comes from webflow.css; keep this file small. */

/* From the Webflow page <head> custom code */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.flex-item-service { height: 300px; width: 300px; display: flex; align-items: center; justify-content: center; }

/* From the Webflow page <body> embed */
.horizontal-scroll-container { overflow-x: scroll; white-space: nowrap; }
.scroll-content { display: inline-block; white-space: normal; }

/* Menu button is a <button> here (Webflow used a div) — strip native button chrome */
button.w-nav-button { border: 0; background: transparent; font: inherit; color: inherit; }

/* Admin bar offset for the fixed navbar when logged in */
.admin-bar .navbar { top: var(--wp-admin--admin-bar--height, 32px); }

/* Nav hover colour (Webflow IX MOUSE_OVER → rgb(215,104,27), instant) */
.nav-menu-2 .w-nav-link:hover,
.nav-menu-2 .w-nav-link:focus-visible { color: #d7681b; }

/* Mobile menu open state (replaces webflow.js "over-right" overlay) */
@media screen and (max-width: 991px) {
	.navbar .w-nav-menu[data-nav-menu-open] {
		display: block; position: fixed; top: 0; right: 0; bottom: 0;
		width: min(80vw, 320px); padding-top: 80px; z-index: 1000;
		background: #1c2735; overflow-y: auto;
		animation: fanmail-menu-in .4s ease both;
	}
	.navbar .w-nav-menu[data-nav-menu-open] .w-nav-link { display: block; text-align: left; }
	.navbar .w-nav-button.w--open { position: relative; z-index: 1001; }
	html.fanmail-nav-open { overflow: hidden; }
}
@keyframes fanmail-menu-in { from { transform: translateX(100%); } to { transform: none; } }

/* Slider: arrows/dots are <button>s here */
.w-slider-arrow-left, .w-slider-arrow-right { border: 0; background: transparent; padding: 0; }
button.w-slider-dot { border: 0; padding: 0; }

/* Contact form */
.fanmail-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { clear: both; margin: 0 0 20px; }
.w-form-done:focus { outline: none; }

/* ---------- Blog grid: Load more ---------- */
.fanmail-grid-rows > .collection-list-2 + .collection-list-2 { margin-top: 20px; }
.fanmail-load-more-wrap { display: flex; justify-content: center; padding: 40px 0 20px; }
.fanmail-load-more { float: none; margin: 0; border: 0; cursor: pointer; }
.fanmail-load-more:disabled { opacity: .6; cursor: progress; }

/* ---------- Single post: next-posts carousel ---------- */
.fanmail-carousel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.fanmail-carousel-head .more-posts-heading { margin: 0; }
.fanmail-carousel-nav { display: flex; gap: 10px; padding: 0 10px 15px; }
.fanmail-carousel-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border: 0; border-radius: 10px;
	background: #d7681b; color: #fff; cursor: pointer; transition: all .3s;
}
.fanmail-carousel-btn:hover:not(:disabled) { background: #1c2735; }
.fanmail-carousel-btn:disabled { opacity: .35; cursor: default; }
.fanmail-carousel-btn:focus-visible, .fanmail-carousel-viewport:focus-visible { outline: 2px solid #d7681b; outline-offset: 3px; }
.fanmail-carousel.is-static .fanmail-carousel-nav { display: none; }

.fanmail-carousel-viewport {
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scrollbar-width: none;
}
.fanmail-carousel-viewport::-webkit-scrollbar { display: none; }

.fanmail-carousel .fanmail-carousel-track {
	display: flex !important; flex-wrap: nowrap !important;
	gap: 20px; margin: 0; padding: 0 0 10px;
}
.fanmail-carousel .fanmail-carousel-track > .collection-item-2 {
	flex: 0 0 calc((100% - 40px) / 3); /* 3 visible on desktop */
	width: auto; max-width: none; margin: 0; float: none;
	scroll-snap-align: start;
}
@media screen and (max-width: 991px) {
	.fanmail-carousel .fanmail-carousel-track > .collection-item-2 { flex-basis: calc((100% - 20px) / 2); display: block; }
}
@media screen and (max-width: 767px) {
	.fanmail-carousel .fanmail-carousel-track > .collection-item-2 { flex-basis: 80%; margin-bottom: 0; } /* ~1.2 visible */
}
.fanmail-carousel .collection-item-2 img { width: 100%; height: auto; }