/*
Theme Name: RiverShores Realty 2026
Version: 2026.01
Author: Tidemark Marketing
template: bb-theme
*/

/*
 * RiverShores Realty 2026 | Site Styles
 * Author: Tidemark Marketing
 * Parent theme: Beaver Builder (bb-theme)
 *
 * Organization
 * 01  Base typography, theme defaults and utilities
 * 02  MLS property search
 * 03  Lifestyle carousel
 * 04  Community carousel
 * 05  Community section navigation
 * 06  Ninja Forms global defaults
 * 07  Newsletter signup (Form 2)
 * 08  Responsive breakpoints
 *
 * Note: Existing selectors and visual behavior are intentionally preserved.
 * Ninja Forms uses !important overrides to win against plugin/theme defaults.
 */

/* ==================================================================
   01. Base typography, theme defaults and utility styles
   ================================================================== */

html { font-size: 62.5%; }
html body { font-size: 1.8rem; }

strong { font-weight: 700; }

h1 {font-size: 4rem;}
h2 {font-size: 3rem;}
h3 {font-size: 2.4rem;}
h4 {font-size: 1.8rem;}
h1, h2, h3, h4 {
	line-height: 1.3;
	color: #000;
}

body > div.fl-page > header p,
body > div.fl-page > footer p {
	margin-bottom: 0;
}

.fl-page-content p {
	margin-bottom: 2rem;
}
.fl-page-content a {
	text-decoration: underline;
}

/* Primary navigation: remove submenu border */
.fl-node-mvyugordzkn9 .menu li li {
	border-top: none;
}

/* Decorative heading lines */
.heading-lines {
	display: table;
	width: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 115px;
	padding-right: 115px;
	box-sizing: border-box;
	text-align: center;
	white-space: nowrap;

	background-image:
		linear-gradient(#b59a63, #b59a63),
		linear-gradient(#b59a63, #b59a63);

	background-repeat: no-repeat;
	background-size: 85px 2px, 85px 2px;
	background-position:
		left center,
		right center;
}

/* Theme-wide form defaults */
.fl-page input:not([type=button]):not([type=submit]):not([type=search]),
.fl-page textarea,
.fl-page button {
	border-radius: 0 !important;
}

.fl-page input:not([type=button]):not([type=submit]):not([type=search]),
.fl-page textarea {
	font-size: 1.6rem !important;
	background-color: #fff !important;
	color: #000 !important;
}

/* Hero content */
h2.hero {
	max-width: 975px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.4;
}


.hero-text {
	background: linear-gradient(
		to right,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,0.75) 20%,
		rgba(255,255,255,0.85) 50%,
		rgba(255,255,255,0.75) 80%,
		rgba(255,255,255,0) 100%
	);
}

/* ==================================================================
   02. MLS property search
   ================================================================== */

.rivershores-search-row {
	position: relative; 
	z-index: 20; 
	margin-top: -74px; 
	margin-bottom: -74px; 
}

.rivershores-mls-search {
	position: relative;
	z-index: 21;
	width: min(1420px, 76%);
	padding: 16px 24px 22px;
	margin: 0 auto;
	background: #3b4a46;
	box-shadow:
	0 12px 30px rgba(29, 42, 39, 0.14);
}


/* Search the Coast heading */
h2.mls-search-title {
	margin-top: 0;
	margin-bottom: 13px;
	font-size: 2.2rem;
	text-align: center;
	color: #B59A63;
	text-transform: uppercase;
}


/* Search controls */
.mls-search-form {
	display: grid;
	
	grid-template-columns:
	minmax(190px, 0.9fr)
	minmax(240px, 1.2fr)
	minmax(190px, 0.9fr)
	180px;
	
	gap: 12px;
	
	align-items: stretch;
}


/* Individual dropdown */
.mls-field {
	background: #faf8f4;
	border: 1px solid #e3dfd8;
	padding: 9px 16px 8px;
}


.mls-field label {
	display: block;
	margin-bottom: 4px;
	color: #B59A63;
	font-size: 1.0rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.25px;
	text-transform: uppercase;
}


.mls-field select {
	width: 100%;
	min-height: 31px;
	padding: 0 30px 0 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: #3b4a46;
	font-size: 1.6rem;
	cursor: pointer;
}

/* Focus */
.mls-field:focus-within {
	outline: 2px solid #c8a45f;
	outline-offset: 2px;
}

/* Search button */
.mls-search-button {
	border: 0;
	background: #c8a45f;
	color: #2e423f;
	font-size: 1.6rem;
	letter-spacing: 1.25px;
	text-transform: uppercase;
	cursor: pointer;
}


.mls-search-button:hover {
	background: #A9823D;
	color: #fff;
}

/* ==================================================================
   03. Lifestyle carousel
   ================================================================== */

.lifestyle-carousel {
	position: relative;
}

/* Scrolling row */
.lifestyle-scroll {
	overflow-x: auto;
	overflow-y: hidden;

	scroll-snap-stop: always;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;

	box-sizing: border-box;
	overscroll-behavior-x: contain;

	/* Full viewport width */
	width: 100vw;
	margin-left: calc(50% - 50vw);

	/* Hide scrollbar */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.lifestyle-scroll::-webkit-scrollbar {
	display: none;
}

/* HTML module containing the arrows */
.lifestyle-controls {
	position: absolute;
	inset: 0;
	z-index: 20;

	pointer-events: none;
}

/* Arrow controls */
.lifestyle-arrow,
.lifestyle-arrow:link,
.lifestyle-arrow:visited,
.lifestyle-arrow:hover,
.lifestyle-arrow:focus,
.lifestyle-arrow:active {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);

	display: flex;
	align-items: center;
	justify-content: center;

	width: 60px;
	height: 60px;
	padding: 0;
	margin: 0;

	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;

	border: 0 !important;
	border-radius: 0 !important;

	box-shadow: none !important;
	outline: none;

	color: #fff !important;

	font-size: 42px;
	font-weight: 300;
	line-height: 1;

	text-decoration: none !important;

	cursor: pointer;
	pointer-events: auto;

	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);

	opacity: 1;
	visibility: visible;

	transition:
		opacity 0.2s ease,
		visibility 0.2s ease,
		transform 0.2s ease;
}

.lifestyle-arrow-left {
	left: 20px;
}

.lifestyle-arrow-right {
	right: 20px;
}

.lifestyle-arrow:hover {
	transform: translateY(-50%) scale(1.12);
}

/* Hide arrows when there is nowhere to scroll */
.lifestyle-arrow.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Accessible keyboard focus */
.lifestyle-arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

/* ==================================================================
   04. Community carousel
   ================================================================== */

.community-carousel {
	position: relative;
}

/* Scrolling row */
.community-scroll {
	overflow-x: auto;
	overflow-y: hidden;

	scroll-snap-stop: always;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;

	box-sizing: border-box;
	overscroll-behavior-x: contain;

	/* Hide scrollbar */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* Hide scrollbar in Chrome, Safari and Edge */
.community-scroll::-webkit-scrollbar {
	display: none;
}

/* HTML module that contains the arrows */
.community-controls {
	position: absolute;
	inset: 0;
	z-index: 20;

	pointer-events: none;
}

/* Arrow controls */
.community-arrow,
.community-arrow:link,
.community-arrow:visited,
.community-arrow:hover,
.community-arrow:focus,
.community-arrow:active {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);

	display: flex;
	align-items: center;
	justify-content: center;

	width: 60px;
	height: 60px;
	padding: 0;
	margin: 0;

	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;

	border: 0 !important;
	border-radius: 0 !important;

	box-shadow: none !important;
	outline: none;

	color: #fff !important;

	font-size: 42px;
	font-weight: 300;
	line-height: 1;

	text-decoration: none !important;

	cursor: pointer;
	pointer-events: auto;

	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);

	opacity: 1;
	visibility: visible;

	transition:
		opacity 0.2s ease,
		visibility 0.2s ease,
		transform 0.2s ease;
}

.community-arrow-left {
	left: 20px;
}

.community-arrow-right {
	right: 20px;
}

.community-arrow:hover {
	transform: translateY(-50%) scale(1.12);
}

/* Hide arrows when there is nowhere to scroll */
.community-arrow.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Accessible keyboard focus */
.community-arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

.community-card a {
	text-decoration: none;
}

/* ==================================================================
   05. Community section navigation
   ================================================================== */

/* 
	Community Overview links
*/

.section-nav-item {
	cursor: pointer;
}

/* Remove default paragraph margin */
.section-nav-item .fl-rich-text p {
	margin: 0;
}

/*
	Reserve the width of the bold version.
	The actual span is bold but invisible.
*/
.section-nav-label {
	position: relative;
	display: inline-block;
	font-weight: 700;
	visibility: hidden;
	white-space: nowrap;
}

/*
	Display the visible copy centered over the
	reserved bold-width space.
*/
.section-nav-label::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	visibility: visible;
	font-weight: 400;
	white-space: nowrap;
}

/* True bold on hover */
.section-nav-item:hover .section-nav-label::after {
	font-weight: 700;
}

/* Separator hidden by default */
.section-nav-item .fl-module-separator {
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* Separator visible on hover */
.section-nav-item:hover .fl-module-separator {
	opacity: 1;
}

/* Overview active by default */
.section-nav-item.section-nav-active .section-nav-label::after {
	font-weight: 700;
}

.section-nav-item.section-nav-active .fl-module-separator {
	opacity: 1;
}

/* ==================================================================
   06. Ninja Forms global defaults
   ================================================================== */

/* Ninja Form titles */
[id^="nf-form-title-"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
}

.nf-form-fields-required {
	display: none;
}
.nf-form-content .list-select-wrap .nf-field-element>div, .nf-form-content input:not([type=button]), .nf-form-content textarea {
	background: #fff !important;
	border: 1px solid #BAB3B0 !important;
	color: #000 !important;
}

.nf-form-content button, .nf-form-content input[type=button], .nf-form-content input[type=submit],
.hb-button-wrapper input[type=submit] {
	padding: 12px 30px;
	background-color: #3b4a46 !important;
	color: #fff !important;
}
.nf-form-content button:hover, .nf-form-content input[type=button]:hover, .nf-form-content input[type=submit]:hover,
.hb-button-wrapper input[type=submit]:hover {
	background-color: #b59a63 !important;
}

/* ==================================================================
   07. Newsletter signup (Ninja Forms #2)
   ================================================================== */

#nf-form-2-cont {
	width: 100%;
	max-width: 320px;
}

#nf-form-2-cont .nf-form-title,
#nf-form-2-cont .nf-form-fields-required {
	display: none !important;
}

#nf-form-2-cont .nf-form-content {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

#nf-form-2-cont nf-fields-wrap {
	display: block !important;
	position: relative !important;
	width: 100% !important;
}

#nf-form-2-cont #nf-field-5-container,
#nf-form-2-cont #nf-field-5-wrap,
#nf-form-2-cont #nf-field-5-wrap .nf-field-element {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

#nf-form-2-cont input#nf-field-5 {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 52px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 65px 0 4px !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 3px solid #b99b63 !important;
	border-radius: 0 !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 1.8rem !important;
	font-style: italic !important;
	font-weight: 300 !important;
	line-height: 52px !important;
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

#nf-form-2-cont input#nf-field-5::placeholder {
	color: #fff !important;
	opacity: 1 !important;
	font-size: 1.8rem !important;
	font-style: italic !important;
	font-weight: 300 !important;
}

#nf-form-2-cont input#nf-field-5:focus {
	background: transparent !important;
	border-bottom-color: #d4b779 !important;
	outline: none !important;
	box-shadow: none !important;
}

#nf-form-2-cont #nf-field-6-container {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: auto !important;
	width: 60px !important;
	height: 49px !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 5;
}

#nf-form-2-cont #nf-field-6-wrap,
#nf-form-2-cont #nf-field-6-wrap .nf-field-element {
	position: relative !important;
	width: 60px !important;
	height: 49px !important;
	margin: 0 !important;
	padding: 0 !important;
}

#nf-form-2-cont input#nf-field-6 {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	-webkit-appearance: none;
	appearance: none;
}

#nf-form-2-cont #nf-field-6-wrap .nf-field-element::after {
	content: "→" !important;
	position: absolute;
	top: 50% !important;
	left: 50% !important;
	width: auto !important;
	height: auto !important;
	transform: translate(-50%, -50%);
	background: none !important;
	color: #b99b63;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 2.6rem !important;
	font-style: normal !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	pointer-events: none;
}

#nf-form-2-cont #nf-field-6-container:hover .nf-field-element::after {
	transform: translate(-40%, -50%);
}

#nf-form-2-cont input#nf-field-6:hover,
#nf-form-2-cont input#nf-field-6:focus,
#nf-form-2-cont input#nf-field-6:active {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: transparent !important;
}

#nf-form-2-cont input#nf-field-6:focus-visible {
	outline: 2px solid #d4b779 !important;
	outline-offset: -3px !important;
}

#nf-form-2-cont #nf-field-5-wrap .nf-field-element::before,
#nf-form-2-cont #nf-field-5-wrap .nf-field-element::after,
#nf-form-2-cont .email-wrap::before,
#nf-form-2-cont .email-wrap::after {
	content: none !important;
	display: none !important;
}

#nf-form-2-cont .nf-error-wrap:empty {
	display: none !important;
}

#nf-form-2-cont .nf-error-msg,
#nf-form-2-cont .nf-error-field-errors,
#nf-form-2-cont .nf-form-errors,
#nf-form-2-cont .nf-error-wrap {
	color: #b99b63 !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 1.6rem !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
}

#nf-form-2-cont #nf-error-5:not(:empty) {
	margin-top: 8px !important;
}

#nf-form-2-cont .nf-error-field-errors {
	display: none !important;
}

#nf-form-2-cont .nf-error .nf-element,
#nf-form-2-cont .nf-fail .nf-element {
	background-color: transparent !important;
	box-shadow: none !important;
}

#nf-form-2-cont .nf-response-msg {
	color: #fff !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 1.8rem !important;
	line-height: 1.5 !important;
}

/* ==================================================================
   08. Responsive breakpoints
   ================================================================== */

/** 992 tablet, 768 mobile **/
@media (min-width: 992px) {
	#menu-primary li ul.sub-menu {
		width: auto;
		white-space: nowrap;
	}
}

/* Tablet */
@media (max-width: 992px) {
	.rivershores-search-row {
		margin-top: 0;
		margin-bottom: 0;
	}
	
	.rivershores-mls-search {
		width: 90%;
	}
	
	.mls-search-form {
		grid-template-columns: 1fr 1fr;
	}
	
	.mls-search-button {
		min-height: 58px;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.heading-lines {
		width: fit-content;
		max-width: calc(100% - 30px);
		padding-left: 55px;
		padding-right: 55px;
		white-space: normal;
	
		background-size: 40px 2px, 40px 2px;
	}
}

@media (max-width: 600px) {

  .rivershores-search-row {
	margin-top: -25px;
  }

  .rivershores-mls-search {
	width: calc(100% - 30px);

	padding: 18px;
  }

  .mls-search-title {
	font-size: 1.7rem;
	letter-spacing: 1.5px;
  }

  .mls-search-form {
	grid-template-columns: 1fr;
  }

  .mls-field,
  .mls-search-button {
	min-height: 58px;
  }

}

/* Newsletter: narrow screens */
@media (max-width: 767px) {
	#nf-form-2-cont input#nf-field-5 {
		padding-right: 55px !important;
	}

	#nf-form-2-cont #nf-field-6-container,
	#nf-form-2-cont #nf-field-6-wrap,
	#nf-form-2-cont #nf-field-6-wrap .nf-field-element {
		width: 50px !important;
		height: 49px !important;
	}
}