/* ==========================================================================
   Chestatee River — Custom CSS
   Layout, components, animations, responsive — everything style.css doesn't
   handle at the block-registration level.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global Base Fixes
   -------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

body {
	overflow-x: hidden;
}

/* Prevent horizontal scroll globally */
* {
	max-width: 100%;
}

/* All images responsive by default */
img,
.wp-block-image img,
.wp-block-cover img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Body text minimum 16px */
body,
p,
li,
td,
input,
textarea,
select {
	font-size: 1rem; /* = 16px minimum */
}

/* --------------------------------------------------------------------------
   Accessibility — Focus Visible
   -------------------------------------------------------------------------- */

:focus-visible {
	outline: 3px solid #C5951A;
	outline-offset: 3px;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Scroll Reveal States
   -------------------------------------------------------------------------- */

.cr-will-reveal {
	opacity: 0;
	transform: translateY( 28px );
	transition: opacity 0.65s ease, transform 0.65s ease;
}

.cr-will-reveal.cr-visible {
	opacity: 1;
	transform: translateY( 0 );
}

/* --------------------------------------------------------------------------
   Reduced Motion — wraps ALL animations and transitions
   -------------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.cr-will-reveal {
		opacity: 1;
		transform: none;
	}

	.cr-scroll-hint {
		animation: none;
	}

	.cr-bento-card,
	.cr-bento-card img,
	.cr-history-card,
	.cr-post-card,
	.cr-stat-card,
	.cr-fish-badge {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Touch Device — disable magnetic / tilt JS-driven effects via CSS
   -------------------------------------------------------------------------- */

@media ( hover: none ) {
	.cr-magnetic,
	[data-tilt],
	.cr-bento-card:hover,
	.cr-bento-card:hover img {
		transform: none !important;
		transition: none !important;
	}

	.cr-bento-card:hover::before {
		background: linear-gradient(
			to bottom,
			rgba( 0, 0, 0, 0.1 ) 0%,
			rgba( 27, 58, 45, 0.85 ) 100%
		);
	}
}

/* --------------------------------------------------------------------------
   Sticky Header States
   -------------------------------------------------------------------------- */

.wp-block-template-part header,
header.wp-block-template-part {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cr-header-scrolled {
	box-shadow: 0 4px 24px rgba( 0, 0, 0, 0.35 ) !important;
}

.cr-header-hidden {
	transform: translateY( -100% );
}

/* iPhone SE (375px) — keep header compact */
@media ( max-width: 375px ) {
	.wp-block-template-part header,
	header.wp-block-template-part,
	.site-header {
		padding-top: 0.5rem !important;
		padding-bottom: 0.5rem !important;
	}
}

/* --------------------------------------------------------------------------
   Navigation — Mobile hamburger overlay support
   -------------------------------------------------------------------------- */

/* Ensure nav items don't overflow on tablet */
@media ( max-width: 900px ) {
	.wp-block-navigation__container {
		flex-wrap: wrap;
		gap: 0.5rem;
	}
}

/* On mobile, the WP overlay menu takes over — ensure it renders full-screen */
@media ( max-width: 768px ) {
	/* Hide the inline nav links; WP overlay button remains */
	.wp-block-navigation:not(.is-menu-open) .wp-block-navigation__container {
		display: none;
	}

	/* Overlay open state */
	.wp-block-navigation.is-menu-open .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		padding: 2rem;
	}

	/* Hamburger / close button always visible */
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		display: flex !important;
	}

	/* Mobile overlay panel */
	.wp-block-navigation__responsive-container.is-menu-open {
		background-color: #1B3A2D !important;
		padding: 1.5rem;
	}

	/* Overlay nav links */
	.wp-block-navigation__responsive-container.is-menu-open a {
		font-size: 1.1rem !important;
		padding: 0.75rem 0 !important;
		border-bottom: 1px solid rgba( 197, 149, 26, 0.2 );
		display: block;
		width: 100%;
	}

	/* Header inner — tighten padding */
	.site-header .wp-block-group {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */

.cr-hero-section {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
}

.cr-hero-content {
	will-change: transform, opacity;
	position: relative;
	z-index: 2;
}

/* Hero H1 — floor 2.5rem prevents tiny text on small phones */
.cr-hero-section h1,
.cr-hero-section .wp-block-heading {
	font-size: clamp( 2.5rem, 8vw, 8rem );
}

/* Mobile hero: reduce padding so text is fully visible, stack buttons */
@media ( max-width: 768px ) {
	.cr-hero-section {
		min-height: 85vh;
		padding-top: 5rem !important; /* clear sticky header */
		padding-bottom: 4rem !important;
	}

	.cr-hero-section .wp-block-buttons {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.cr-hero-section .wp-block-button {
		width: 100%;
	}

	.cr-hero-section .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

@media ( max-width: 480px ) {
	.cr-hero-section {
		min-height: 80vh;
	}
}

/* --------------------------------------------------------------------------
   Weather Widget
   -------------------------------------------------------------------------- */

#cr-weather-widget {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba( 27, 58, 45, 0.65 );
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
	border: 1px solid rgba( 197, 149, 26, 0.3 );
	border-radius: 999px;
	padding: 0.5rem 1.25rem;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: rgba( 245, 240, 232, 0.9 );
	max-width: 100%;          /* no overflow */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media ( max-width: 640px ) {
	#cr-weather-widget {
		font-size: 0.7rem;
		padding: 0.4rem 1rem;
		gap: 0.35rem;
		max-width: calc( 100vw - 2rem );
		white-space: normal;
	}
}

.cr-hero-temp { color: #C5951A; font-weight: 700; }
.cr-hero-sep  { opacity: 0.45; }

/* --------------------------------------------------------------------------
   Scroll Hint
   -------------------------------------------------------------------------- */

.cr-scroll-hint {
	position: absolute;
	bottom: 2.5rem;
	left: 50%;
	transform: translateX( -50% );
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	opacity: 0.6;
	animation: cr-bounce 2s ease-in-out infinite;
}

.cr-scroll-hint span {
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba( 245, 240, 232, 0.8 );
}

@keyframes cr-bounce {
	0%, 100% { transform: translateX( -50% ) translateY( 0 ); }
	50%       { transform: translateX( -50% ) translateY( 8px ); }
}

/* Hide scroll hint on mobile (wastes space) */
@media ( max-width: 640px ) {
	.cr-scroll-hint { display: none; }
}

/* --------------------------------------------------------------------------
   Live Conditions Bar
   -------------------------------------------------------------------------- */

.cr-conditions-strip {
	position: relative;
	z-index: 10;
	overflow-x: auto;        /* fallback horizontal scroll if needed */
	-webkit-overflow-scrolling: touch;
}

.cr-conditions-grid {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 0;
	min-width: 0;
}

.cr-cond-col {
	padding: 1.25rem 1.5rem;
	border-right: 1px solid rgba( 255, 255, 255, 0.08 );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}

.cr-cond-col:last-child { border-right: none; }

#cr-fishing-col {
	border-left: 3px solid #C5951A;
	transition: border-left-color 0.5s ease;
}

.cr-cond-icon {
	width: 20px;
	height: 20px;
	opacity: 0.6;
}

.cr-value {
	font-family: var( --wp--preset--font-family--playfair );
	font-size: 1.35rem;
	font-weight: 700;
	color: #F5F0E8;
	line-height: 1;
}

.cr-label {
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #C5951A;
}

.cr-sublabel {
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.62rem;
	letter-spacing: 0.06em;
	color: rgba( 245, 240, 232, 0.45 );
}

#cr-updated-time {
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.6rem;
	color: rgba( 245, 240, 232, 0.35 );
	text-align: center;
	padding: 0.4rem;
	grid-column: 1 / -1;
	border-top: 1px solid rgba( 255, 255, 255, 0.06 );
}

/* --------------------------------------------------------------------------
   Activities Bento Grid
   -------------------------------------------------------------------------- */

.cr-bento-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	grid-template-rows:    repeat( 2, minmax( 280px, 320px ) );
	gap: 1.25rem;
}

/* Featured card: fly fishing — spans 2 cols × 2 rows */
.cr-bento-card--featured {
	grid-column: 1 / 3;
	grid-row:    1 / 3;
}

.cr-bento-card {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	background: #1B3A2D;
	cursor: pointer;
	transition: transform 0.35s cubic-bezier( 0.25, 0.46, 0.45, 0.94 ),
	            box-shadow 0.35s ease;
	will-change: transform;
}

.cr-bento-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba( 0, 0, 0, 0.1 ) 0%,
		rgba( 27, 58, 45, 0.85 ) 100%
	);
	z-index: 1;
	transition: background 0.35s ease;
}

@media ( hover: hover ) {
	.cr-bento-card:hover::before {
		background: linear-gradient(
			to bottom,
			rgba( 0, 0, 0, 0.2 ) 0%,
			rgba( 27, 58, 45, 0.92 ) 100%
		);
	}

	.cr-bento-card:hover {
		box-shadow: 0 16px 48px rgba( 0, 0, 0, 0.45 );
	}

	.cr-bento-card:hover img {
		transform: scale( 1.04 );
	}
}

/* GPR card gets gold accent */
.cr-bento-card--gpr::before {
	background: linear-gradient(
		to bottom,
		rgba( 0, 0, 0, 0.1 ) 0%,
		rgba( 59, 34, 6, 0.88 ) 100%
	);
}

.cr-bento-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 1.75rem 2rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.cr-bento-card--featured .cr-bento-overlay {
	padding: 2.5rem;
}

/* Card background images */
.cr-bento-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

/* --------------------------------------------------------------------------
   Fly Fishing Feature Section
   -------------------------------------------------------------------------- */

.cr-fishing-img {
	position: relative;
	overflow: visible !important;
}

.cr-fishing-img img {
	border-radius: 4px;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.cr-fishing-pullquote {
	position: relative;
	margin-top: -4rem !important;
	margin-left: 2rem !important;
	max-width: 320px;
	z-index: 2;
}

.cr-fish-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.cr-fish-badge {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media ( hover: hover ) {
	.cr-fish-badge:hover {
		transform: translateY( -2px );
		box-shadow: 0 8px 20px rgba( 0, 0, 0, 0.3 );
	}
}

/* --------------------------------------------------------------------------
   History Section
   -------------------------------------------------------------------------- */

.cr-history-quote {
	position: relative;
}

.cr-history-quote::before {
	content: '\201C';
	position: absolute;
	top: -1rem;
	left: 1.5rem;
	font-family: var( --wp--preset--font-family--playfair );
	font-size: 6rem;
	line-height: 1;
	color: rgba( 197, 149, 26, 0.15 );
	pointer-events: none;
}

.cr-history-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media ( hover: hover ) {
	.cr-history-card:hover {
		transform: translateY( -4px );
		box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.12 );
	}
}

/* --------------------------------------------------------------------------
   Real Estate CTA Section
   -------------------------------------------------------------------------- */

.cr-gpr-contact {
	transition: border-left-color 0.3s ease;
}

@media ( hover: hover ) {
	.cr-gpr-contact:hover {
		border-left-color: #F0B429;
	}
}

.cr-re-photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.cr-stat-card {
	transition: transform 0.25s ease;
	min-width: 140px;
}

@media ( hover: hover ) {
	.cr-stat-card:hover {
		transform: translateY( -3px );
	}
}

/* --------------------------------------------------------------------------
   Eyebrow / Label Utility
   -------------------------------------------------------------------------- */

.cr-eyebrow {
	font-family: var( --wp--preset--font-family--montserrat ) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: #C5951A;
	margin: 0 0 0.5rem !important;
}

/* --------------------------------------------------------------------------
   Active Nav Link
   -------------------------------------------------------------------------- */

.cr-nav-active,
.wp-block-navigation a[aria-current='page'] {
	color: #C5951A !important;
}

/* --------------------------------------------------------------------------
   Blog Post Grid (Archive)
   -------------------------------------------------------------------------- */

.cr-post-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 2rem;
}

.cr-post-card {
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.07 );
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

@media ( hover: hover ) {
	.cr-post-card:hover {
		transform: translateY( -4px );
		box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.14 );
	}
}

.cr-post-card .cr-post-img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	display: block;
}

.cr-post-body {
	padding: 1.5rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.cr-post-body .cr-post-title {
	font-family: var( --wp--preset--font-family--playfair );
	font-size: 1.25rem;
	font-weight: 700;
	color: #1B3A2D;
	margin-bottom: 0.5rem;
	line-height: 1.3;
}

.cr-post-body .cr-post-excerpt {
	font-size: 0.9rem;
	color: #6B635A;
	line-height: 1.65;
	flex: 1;
	margin-bottom: 1rem;
}

.cr-post-body .cr-post-link {
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #C5951A;
	text-decoration: none;
}

@media ( hover: hover ) {
	.cr-post-body .cr-post-link:hover {
		color: #9A7010;
	}
}

/* --------------------------------------------------------------------------
   Blog CTA Strip
   -------------------------------------------------------------------------- */

.cr-blog-cta-strip {
	position: relative;
}

.cr-blog-cta-strip::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, rgba( 197, 149, 26, 1 ) 0%, rgba( 218, 175, 52, 1 ) 100% );
	opacity: 0.95;
}

.cr-blog-cta-strip > * {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.wp-block-template-part footer a:hover {
	color: #C5951A;
}

/* --------------------------------------------------------------------------
   WP Block Button Overrides — touch-safe tap targets
   -------------------------------------------------------------------------- */

.wp-block-button__link {
	transition: opacity 0.2s ease, box-shadow 0.2s ease !important;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 2rem !important;
}

@media ( hover: hover ) {
	.wp-block-button__link:hover {
		opacity: 0.88;
		box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.3 );
	}

	.wp-block-button.is-style-outline .wp-block-button__link:hover {
		background: rgba( 255, 255, 255, 0.06 ) !important;
	}
}

/* Full-width buttons on small screens */
@media ( max-width: 480px ) {
	.wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   Responsive — Tablet (≤ 900px)
   -------------------------------------------------------------------------- */

@media ( max-width: 900px ) {

	.cr-bento-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
	}

	.cr-bento-card--featured {
		grid-column: 1 / 3;
		grid-row: auto;
		min-height: 320px;
	}

	.cr-conditions-grid {
		grid-template-columns: repeat( 3, 1fr );
	}

	.cr-cond-col:nth-child( 4 ),
	.cr-cond-col:nth-child( 5 ) {
		border-top: 1px solid rgba( 255, 255, 255, 0.08 );
	}

	.cr-post-grid {
		grid-template-columns: 1fr 1fr;
	}

	.cr-fishing-pullquote {
		margin-left: 1rem !important;
		max-width: 260px;
	}
}

/* --------------------------------------------------------------------------
   Responsive — Mobile (≤ 640px)
   -------------------------------------------------------------------------- */

@media ( max-width: 640px ) {

	/* Bento: single column, no featured span */
	.cr-bento-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.cr-bento-card--featured {
		grid-column: auto;
		grid-row: auto;
		min-height: 280px;
	}

	/* Conditions: 2-column grid */
	.cr-conditions-grid {
		grid-template-columns: 1fr 1fr;
	}

	.cr-cond-col:last-child {
		grid-column: 1 / 3;
		border-right: none;
	}

	/* Blog posts: single column */
	.cr-post-grid {
		grid-template-columns: 1fr;
	}

	/* Pull quote: inline, no negative margin overlap */
	.cr-fishing-pullquote {
		position: static !important;
		margin-top: 1.5rem !important;
		margin-left: 0 !important;
		max-width: 100%;
	}

	/* Fly fishing feature: stack vertically */
	.cr-fishing-feature {
		flex-direction: column !important;
	}

	.cr-fishing-feature .cr-fishing-img,
	.cr-fishing-feature .cr-fishing-content {
		width: 100% !important;
	}

	/* History cards: single column */
	.cr-history-grid,
	.cr-history-cards {
		grid-template-columns: 1fr !important;
	}

	/* Real estate CTA: stack */
	.cr-re-section,
	.cr-real-estate-cta {
		flex-direction: column !important;
	}

	.cr-re-section > *,
	.cr-real-estate-cta > * {
		width: 100% !important;
	}

	/* Conditions value slightly smaller */
	.cr-value {
		font-size: 1.1rem;
	}

	/* Footer: single column */
	.wp-block-template-part footer .wp-block-columns {
		flex-direction: column !important;
	}

	.wp-block-template-part footer .wp-block-column {
		width: 100% !important;
		flex-basis: 100% !important;
	}
}

/* --------------------------------------------------------------------------
   Responsive — Small phones (≤ 480px)
   -------------------------------------------------------------------------- */

@media ( max-width: 480px ) {

	/* H1 floor: 2.5rem even on smallest phones */
	h1,
	.wp-block-heading.has-large-font-size,
	.cr-hero-section h1 {
		font-size: clamp( 2.5rem, 10vw, 8rem );
	}

	/* Conditions: allow horizontal scroll instead of cramped 2-col */
	.cr-conditions-strip {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.cr-conditions-grid {
		grid-template-columns: repeat( 5, minmax( 100px, 1fr ) );
		min-width: max-content;
	}

	/* Bento card tap-friendly height */
	.cr-bento-card {
		min-height: 240px;
	}

	/* Reduce bento overlay padding */
	.cr-bento-overlay {
		padding: 1.25rem;
	}

	.cr-bento-card--featured .cr-bento-overlay {
		padding: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   Print — strip animations, restore visibility
   -------------------------------------------------------------------------- */

@media print {
	.cr-will-reveal { opacity: 1 !important; transform: none !important; }
	.cr-header-hidden { transform: none !important; }
	#cr-weather-widget { display: none; }
	.cr-scroll-hint { display: none; }
}