/*
 * Black Coffee Connect — custom utilities and animations layered on top of Tailwind.
 */

body {
	font-family: 'Manrope', sans-serif;
	background-color: #FAF6EA;
	color: #1B1B1B;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .font-serif { font-family: 'Cormorant Garamond', serif; letter-spacing: -0.01em; }

html { scroll-behavior: smooth; }
::selection { background-color: #F1D25B; color: #1B1B1B; }

.shadow-premium    { box-shadow: 0 8px 32px rgba(27,27,27,.06); }
.shadow-premium-lg { box-shadow: 0 24px 64px rgba(27,27,27,.14); }

.grain { position: relative; }
.grain::before {
	content: "";
	position: absolute; inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: .08; pointer-events: none; mix-blend-mode: overlay;
}

.hover-lift { transition: transform 400ms cubic-bezier(.16,1,.3,1), box-shadow 400ms cubic-bezier(.16,1,.3,1); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 24px 64px rgba(27,27,27,.14); }

.fade-in-up { animation: bccFadeInUp 800ms cubic-bezier(.16,1,.3,1) both; }
@keyframes bccFadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.marquee-underline {
	background-image: linear-gradient(#F1D25B,#F1D25B);
	background-repeat: no-repeat;
	background-size: 0% 2px;
	background-position: 0 100%;
	transition: background-size 400ms cubic-bezier(.16,1,.3,1);
}
.marquee-underline:hover { background-size: 100% 2px; }

.divider-dot { width: 6px; height: 6px; border-radius: 9999px; background-color: #F1D25B; display: inline-block; }

/* WP-generated blocks basics */
.alignwide  { max-width: 1200px; margin-left: auto; margin-right: auto; }
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }
.wp-block-image img { border-radius: 1rem; }

/* Sticky header background transitions */
.bcc-header-scrolled { background-color: rgba(250, 246, 234, .85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid #E8E1CE; }

/* Focus outline (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 2px solid #F1D25B;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Prose defaults for the-content areas */
.entry-content h1, .entry-content h2, .entry-content h3 { margin: 1.5em 0 .5em; }
.entry-content p { margin-bottom: 1em; line-height: 1.7; color: #5A5854; }
.entry-content a { color: #0A4829; text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: #F1D25B; }
.entry-content ul, .entry-content ol { margin-left: 1.25em; margin-bottom: 1em; }

/* Toast (used by JS) */
.bcc-toast {
	position: fixed; top: 24px; right: 24px; z-index: 100;
	background: #1B1B1B; color: #FAF6EA;
	padding: 14px 20px; border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0,0,0,.25);
	font-size: 14px; max-width: 360px;
	transform: translateY(-10px); opacity: 0;
	transition: opacity 300ms, transform 300ms;
	border-left: 4px solid #F1D25B;
}
.bcc-toast.show { opacity: 1; transform: translateY(0); }
.bcc-toast.error { border-left-color: #F61111; }
.bcc-toast.success { border-left-color: #0A4829; }