/*
Theme Name: Divi Child - BHACR
Theme URI: https://new.bhacr.com
Description: Child theme for BHACR cottage rental website
Author: BHACR Development
Author URI: https://bhacr.com
Template: Divi
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: divi-child-bhacr
*/
/* ==========================================================================
BHACR Brand Colors (matching bhacr.com)
========================================================================== */
:root {
--bhacr-purple: #3300CC;
--bhacr-cyan: #99FFFF;
--bhacr-dark-blue: #000099;
--bhacr-magenta: #FF33FF;
--bhacr-light-blue: #e8f4f8;
}
/* ==========================================================================
Body Font Size - larger for readability
========================================================================== */
body .et_pb_text_inner,
body .et_pb_text_inner p,
body .et_pb_module p {
font-size: 16px !important;
line-height: 1.7em !important;
}
/* Reduce gap between header and page content */
.et_pb_section:first-child {
padding-top: 15px !important;
}
#page-container .et_pb_section:first-of-type {
padding-top: 15px !important;
}
/* Reduce Divi's default top padding on page containers */
#et-main-area {
padding-top: 0 !important;
}
.entry-content {
padding-top: 0 !important;
}
/* Fix: Leaflet JS initialization on maps page interferes with Divi's header
fixation script. Force the header to stay fixed so there's no whitespace
above it. The #page-container padding-top (175px) already accounts for header height. */
body.page-id-661 #main-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 99999 !important;
}
#main-content .container {
padding-top: 10px !important;
}
/* Widen Divi's default content container from 1080px to 1400px */
.container,
#main-content .container,
.et_pb_row {
max-width: 1400px !important;
}
/* ==========================================================================
Global Link Colors
========================================================================== */
a {
color: var(--bhacr-purple) !important;
}
a:hover {
color: var(--bhacr-magenta) !important;
}
/* ==========================================================================
Header Layout - Logo above centered menu
Divi structure: #main-header > .container.et_menu_container >
.logo_container > a > img#logo
#et-top-navigation > nav#top-menu-nav > ul#top-menu
========================================================================== */
/* Main header bar - height auto prevents Divi JS from constraining */
#main-header {
background-color: #ffffff !important;
box-shadow: none !important;
height: auto !important;
min-height: auto !important;
}
/* Stack logo and nav vertically instead of side-by-side */
#main-header .container.et_menu_container {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
}
/* Logo container - full width, centered, override Divi's position:absolute and height:0/opacity:0 */
#main-header .logo_container,
#main-header:not(.et-fixed-header) .logo_container {
position: relative !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
opacity: 1 !important;
text-align: center !important;
float: none !important;
padding: 5px 0 !important;
margin: 0 !important;
}
/* Logo image - display at natural size, centered */
#main-header .logo_container a {
display: block !important;
text-align: center !important;
}
img#logo {
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
display: inline-block !important;
}
/* Navigation - full width below logo, blue bar with white text.
`overflow: visible` is REQUIRED so dropdown sub-menus aren't clipped.
The previous `max-height: 50px + overflow: hidden` combo prevented zoom-
driven height growth but also hid the dropdowns. Removed both — height
is constrained by the inner #top-menu-nav being `display: inline-flex`
on a single row of items, which keeps the nav at its natural ~46px. */
#main-header #et-top-navigation {
width: 100% !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
background-color: var(--bhacr-purple) !important;
border-bottom: none !important;
height: auto !important;
flex: 0 0 auto !important; /* don't grow in flex container */
text-align: center !important;
overflow: visible !important;
}
/* Center the nav list - override Divi's float:left on #top-menu-nav */
#top-menu-nav {
float: none !important;
text-align: center !important;
}
/* Menu list - inline centered */
#top-menu {
float: none !important;
display: inline-flex !important;
flex-wrap: nowrap !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
#top-menu > li {
display: inline-block !important;
float: none !important;
}
#top-menu > li > a {
color: #ffffff !important;
font-size: 13pt !important;
line-height: 20pt !important;
padding: 8px 20px !important;
display: block !important;
transition: all 0.2s ease !important;
}
#top-menu > li > a:hover,
#top-menu > li.current-menu-item > a {
color: var(--bhacr-cyan) !important;
background-color: rgba(255,255,255,0.15) !important;
}
/* Dropdown submenus - matching blue bar style */
#top-menu .sub-menu {
background-color: var(--bhacr-purple) !important;
border: none !important;
min-width: 220px !important;
}
#top-menu .sub-menu li a {
color: #ffffff !important;
background-color: var(--bhacr-purple) !important;
padding: 10px 20px !important;
font-size: 11pt !important;
}
#top-menu .sub-menu li a:hover {
color: var(--bhacr-cyan) !important;
background-color: rgba(255,255,255,0.15) !important;
}
/* Sticky/fixed header adjustments */
.et-fixed-header #main-header {
box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}
.et-fixed-header #main-header .logo_container {
padding: 2px 0 !important;
}
.et-fixed-header img#logo {
max-height: 55px !important;
}
.et-fixed-header #top-menu > li > a {
padding: 6px 15px !important;
}
/* Hide Divi's search icon in header */
#et_search_icon,
.et_search_outer {
display: none !important;
}
/* Shrink menu at narrower desktop widths to prevent wrapping */
@media (max-width: 1200px) and (min-width: 981px) {
#top-menu > li > a {
font-size: 11pt !important;
padding: 8px 12px !important;
}
.et-fixed-header #top-menu > li > a {
padding: 6px 10px !important;
}
}
@media (max-width: 1050px) and (min-width: 981px) {
#top-menu > li > a {
font-size: 10pt !important;
padding: 7px 8px !important;
}
.et-fixed-header #top-menu > li > a {
padding: 5px 7px !important;
}
}
/* 769–980px: Divi hamburger hasn't fired yet; shrink nav items to all fit one line */
@media (max-width: 980px) and (min-width: 769px) {
#top-menu > li > a {
font-size: 9pt !important;
padding: 6px 7px !important;
letter-spacing: -0.01em;
}
.et-fixed-header #top-menu > li > a {
padding: 4px 6px !important;
}
}
/* Mobile menu */
@media (max-width: 980px) {
/* Hide the desktop nav at mobile widths so only Divi's hamburger shows.
Without this, #top-menu's forced `display:inline-flex !important` (set
above for the centered desktop bar) keeps the full desktop menu rendered
at ~943px on phones, overflowing the viewport and pushing the hamburger
off-screen (GitHub #22). The hamburger (#et_mobile_nav_menu) is already
present and functional — we just stop forcing the desktop list visible. */
#et-top-navigation nav#top-menu-nav,
#top-menu {
display: none !important;
}
#et_mobile_nav_menu {
display: block !important;
}
.mobile_menu_bar {
background-color: var(--bhacr-purple) !important;
}
/* Hamburger icon (#227, 2nd pass — Miles: still too small/faint). Replace
Divi's thin font glyph with three thick white bars inside a bordered pill,
so it reads clearly as a tappable menu button on the purple bar. */
.mobile_menu_bar:before {
content: "" !important;
display: inline-block !important;
width: 30px !important;
height: 4px !important;
background: #ffffff !important;
border-radius: 2px !important;
box-shadow: 0 -10px 0 #ffffff, 0 10px 0 #ffffff !important;
vertical-align: middle !important;
margin: 12px 4px !important;
}
/* Give the tap target a visible boxed-button look */
.mobile_menu_bar {
display: inline-block !important;
padding: 0 14px !important;
border: 2px solid #ffffff !important;
border-radius: 6px !important;
margin: 6px 10px 6px 0 !important;
line-height: 0 !important;
}
.et_mobile_menu {
background-color: #ffffff !important;
border: 2px solid var(--bhacr-purple) !important;
}
.et_mobile_menu li a {
color: var(--bhacr-purple) !important;
border-bottom: 1px solid #eee !important;
}
.et_mobile_menu li a:hover {
color: #ffffff !important;
background-color: var(--bhacr-purple) !important;
}
}
/* ==========================================================================
Homepage Hero Section
========================================================================== */
/* Hero container - holds slideshow + overlays */
.bhacr-hero-container {
position: relative;
width: 100%;
max-width: 100%;
margin: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
}
/* Hide stray
tags WordPress inserts */
.bhacr-hero-container > br {
display: none;
}
/* Slideshow fills the container */
.bhacr-hero-container .bhacr-slideshow {
padding-bottom: 45%; /* taller hero */
}
/* Featured bubble(s) — float on top of slideshow.
Single bubble: centered around 32.5% from left (preserves original layout).
Two bubbles: rendered side-by-side, centered horizontally on the hero. */
.bhacr-bubbles-wrap {
/* Now rendered in normal flow inside the hero text box, beneath the copy
(Rebecca's request — keeps the 2026 calendar off the slideshow photos
instead of floating over them). */
position: static;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
margin: 4px auto 0;
width: 100%;
}
/* The wrap is a static, full-width flex COLUMN that centers its own items
(align-items:center), so it must NOT be shifted with the old absolute-layout
left/transform — those clipped it against the overlay's overflow:hidden. */
.bhacr-bubbles-count-1,
.bhacr-bubbles-count-2 {
left: auto;
transform: none;
}
.bhacr-bubbles-wrap .bhacr-calendar-bubble {
position: static !important;
transform: none !important;
left: auto !important;
bottom: auto !important;
}
/* Two bubbles (2026 calendar oval + promo box): side by side on desktop to match
the homepage mockup (Rebecca). Stacks on tablet/mobile so the promo text has room. */
.bhacr-bubbles-wrap.bhacr-bubbles-count-2 {
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;
}
.bhacr-bubbles-count-2 a.bhacr-text-bubble {
width: auto;
flex: 1 1 auto;
max-width: 62%;
font-size: 16px;
}
@media (max-width: 768px) {
.bhacr-bubbles-wrap.bhacr-bubbles-count-2 { flex-direction: column; }
.bhacr-bubbles-count-2 a.bhacr-text-bubble { width: 100%; max-width: 100%; flex: 0 0 auto; font-size: 18px; }
}
/* Legacy direct-placement bubble (kept for backwards compat with hardcoded HTML) */
.bhacr-calendar-bubble {
position: absolute !important;
left: 32.5%;
bottom: 10px;
transform: translateX(-50%);
z-index: 100;
display: block !important;
}
.bhacr-calendar-bubble img {
display: block;
width: 160px;
max-width: 100%;
height: auto;
border: none;
margin: 0 auto;
}
/* Text / promo bubble — same footprint as image bubble */
a.bhacr-text-bubble {
display: flex !important;
align-items: center;
justify-content: center;
flex: 0 0 auto; /* full width of the hero text window; own row in the column stack */
width: 100%;
min-height: 0;
height: auto;
box-sizing: border-box;
border-radius: 8px;
padding: 5px 14px;
text-align: center;
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: 900;
line-height: 1.05;
text-decoration: none !important;
box-shadow: 0 3px 10px rgba(0,0,0,0.35);
transition: opacity 0.2s, transform 0.2s;
}
a.bhacr-text-bubble:hover {
opacity: 0.88;
transform: scale(1.03);
text-decoration: none !important;
}
@media (max-width: 768px) {
/* The bubble now lives inside the hero text box in normal flow, and that
box stacks below the slideshow on mobile — so it no longer floats over
body text (the old Issue #169 cause is gone). Keep it visible, smaller. */
.bhacr-calendar-bubble img {
width: 150px;
}
}
/* "No booking fees. No cleaning fees." marketing badge — real text (SEO
indexable) styled like the classic NoBooking.gif: dark serif on light blue
(Rebecca, 6/6). */
.bhacr-no-fees-banner {
display: inline-block;
background: #8FD6E3;
color: #131d1f;
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
font-size: 16px;
line-height: 1.25;
text-align: center;
padding: 6px 14px;
border-radius: 6px;
margin: 0;
}
.bhacr-no-fees-banner .bhacr-no-fees-line {
display: block;
white-space: nowrap;
}
.bhacr-no-fees-banner.bhacr-no-fees-inline .bhacr-no-fees-line {
display: inline;
}
/* "No fees" bar directly below the hero slideshow. Same width as the slideshow
/ cottage section headings (it sits in the same 1200px content row), styled
to match the cyan section-heading bars (Arial, purple), bold and a bit larger
(Rebecca, 6/6). The cyan is on the bar itself so it doesn't span full width. */
.bhacr-no-fees-bar {
background: #2C5234; /* hunter/dark green — stands out, flush under the slideshow (Rebecca, 6/9) */
text-align: center;
height: 30px; /* same height as the category/menu heading bars */
display: flex;
align-items: center; /* vertically center the text */
justify-content: center;
padding: 0 10px;
border-bottom: 5px solid #ffffff; /* match the small white gap above the bar */
}
/* Remove the Divi text-module / column / row padding around the bar so it fills
the row width AND sits flush against the slideshow above (no gap). Scoped via
:has() to the elements holding the bar, not a section index (which renumbers
when sections are added/removed). NOTE: only zero the VERTICAL margins — the
Divi row centers itself with margin-left/right:auto, so a blanket margin:0
would left-align the bar. */
.et_pb_text_inner:has(.bhacr-no-fees-bar),
.et_pb_text:has(.bhacr-no-fees-bar),
.et_pb_column:has(.bhacr-no-fees-bar),
.et_pb_row:has(.bhacr-no-fees-bar) {
padding: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.bhacr-no-fees-bar .bhacr-no-fees-banner {
background: transparent;
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.35); /* keep white legible on bright magenta */
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 22px;
line-height: 1.2;
padding: 0;
border-radius: 0;
text-transform: uppercase;
}
@media (max-width: 768px) {
.bhacr-no-fees-bar .bhacr-no-fees-banner { font-size: 18px; }
}
/* Footer copy of the badge: smaller so it fits the bullet-separated row. */
.bhacr-footer-bottom .bhacr-no-fees-banner {
font-size: 13px;
padding: 2px 9px;
vertical-align: middle;
}
/* Nav overlay - left side */
.bhacr-hero-nav-overlay {
position: absolute;
top: 20px;
left: 10px;
width: 170px;
z-index: 10;
}
.bhacr-hero-vertical-nav {
display: flex;
flex-direction: column;
gap: 0;
}
.bhacr-hero-vertical-nav a {
display: block;
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 13pt;
line-height: 24pt;
font-weight: bold;
text-decoration: none !important;
padding: 0 5px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}
.bhacr-hero-vertical-nav a:hover {
color: var(--bhacr-cyan) !important;
text-decoration: underline !important;
}
/* Text overlay - right 1/3 with dark backdrop, clipped to slideshow height */
.bhacr-hero-text-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 35%;
background: rgba(0, 0, 20, 0.55);
padding: 15px 18px;
z-index: 10;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 1.5;
}
.bhacr-hero-text-overlay p {
color: #ffffff !important;
font-size: 10pt !important;
line-height: 1.24 !important;
margin-bottom: 4px;
}
.bhacr-hero-text-overlay a {
color: var(--bhacr-cyan) !important;
}
/* Responsive hero */
@media (max-width: 768px) {
.bhacr-hero-container .bhacr-slideshow {
padding-bottom: 66%;
}
.bhacr-hero-nav-overlay {
display: none;
}
.bhacr-hero-text-overlay {
position: relative;
width: 100%;
height: auto;
padding: 15px;
}
}
/* ==========================================================================
Homepage Hero Slideshow
========================================================================== */
.bhacr-slideshow {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%; /* 4:3 aspect ratio matching 384x288 images */
overflow: hidden;
background: #1a1a2e;
}
.bhacr-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.2s ease-in-out;
}
.bhacr-slide.active {
opacity: 1;
}
/* Remove Divi module padding from slideshow column */
.et_pb_section:first-child .et_pb_text_inner {
/* Keep default for most, override below for slideshow */
}
/* Category navigation bar */
.bhacr-category-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 5px;
}
.bhacr-category-nav a {
color: #ffffff !important;
text-decoration: none !important;
font-size: 13pt;
padding: 5px 15px;
transition: all 0.2s ease;
}
.bhacr-category-nav a:hover {
color: var(--bhacr-cyan) !important;
text-decoration: underline !important;
}
.bhacr-category-nav .separator {
color: #ffffff;
font-size: 14pt;
}
/* ==========================================================================
Cottage Grid (for [bhacr_cottage_grid] shortcode)
Vertical cards: 4 across on wide screens, scales down gracefully
========================================================================== */
.bhacr-cottage-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin: 15px 0;
max-width: 1200px;
}
/* Card container */
.bhacr-cottage-card {
border-radius: 8px;
overflow: hidden;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.bhacr-cottage-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
transform: translateY(-3px);
}
/* Card link wraps everything */
.bhacr-card-link {
display: flex;
flex-direction: column;
height: 100%;
color: inherit !important;
text-decoration: none !important;
}
.bhacr-card-link:hover {
color: inherit !important;
text-decoration: none !important;
}
/* Card image */
.bhacr-card-image {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.bhacr-card-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
max-height: none !important;
transition: transform 0.5s ease;
}
.bhacr-cottage-card:hover .bhacr-card-image img {
transform: scale(1.05);
}
.bhacr-new-badge {
position: absolute;
top: 10px;
left: 10px;
background: #ff3300;
color: #fff;
font-family: Arial, sans-serif;
font-weight: 800;
font-size: 12px;
letter-spacing: 0.08em;
padding: 4px 9px;
border-radius: 4px;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
z-index: 2;
pointer-events: none;
}
/* Card body */
.bhacr-card-body {
padding: 14px 16px 16px;
display: flex;
flex-direction: column;
flex: 1;
}
.bhacr-card-title {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px !important;
font-weight: 700;
line-height: 1.3 !important;
color: #1a1a2e !important;
margin: 0 0 6px 0 !important;
padding: 0;
}
.bhacr-cottage-card:hover .bhacr-card-title {
color: var(--bhacr-purple) !important;
}
/* Spec rows with icons */
.bhacr-card-spec-row {
display: flex;
align-items: center;
gap: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px !important;
line-height: 1.4 !important;
color: #444 !important;
margin: 0 !important;
padding: 2px 0;
}
.bhacr-card-spec-row svg {
flex-shrink: 0;
color: var(--bhacr-purple);
}
/* Category header bar (cyan background, purple text) — matches bhacr.com #cottagetypeheader */
.bhacr-category-header {
background-color: var(--bhacr-cyan);
min-height: 34px;
display: flex;
align-items: center;
justify-content: center;
margin: 10px 0 5px 0;
padding: 3px 0;
}
.bhacr-category-header h2 {
color: var(--bhacr-purple) !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: 700 !important;
line-height: 28px;
margin: 0;
padding: 0;
}
/* Responsive cottage grid */
@media (max-width: 1100px) {
.bhacr-cottage-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 800px) {
.bhacr-cottage-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.bhacr-cottage-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
Sidebar Widgets
========================================================================== */
.widget_text h3 {
margin-top: 0;
}
.widget_text .widgettitle {
background-color: #e8f4f8;
padding: 15px 20px 10px;
margin: 0 0 10px 0;
font-size: 16px;
font-weight: bold;
}
.widget_text ul {
background-color: #e8f4f8;
padding: 0 20px 20px 40px;
margin: -10px 0 0 0;
list-style-type: disc;
}
.widget_text ul li {
line-height: 1.8;
}
#main-sidebar .widget {
margin-bottom: 30px;
}
#main-sidebar .widget img {
max-width: 100%;
height: auto;
display: block;
}
/* ==========================================================================
Homepage Two-Column Layout (main content + sidebar)
Matches bhacr.com: ~928px left + ~260px right
========================================================================== */
.bhacr-home-layout {
display: flex;
gap: 20px;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.bhacr-home-main {
flex: 1;
min-width: 0;
}
.bhacr-home-sidebar-col {
width: 200px;
flex-shrink: 0;
}
/* Sidebar styling */
.bhacr-home-sidebar {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 13pt;
}
.bhacr-sidebar-badge {
text-align: center;
margin-bottom: 15px;
}
.bhacr-sidebar-badge img {
max-width: 100%;
height: auto;
}
.bhacr-sidebar-alpha {
margin-bottom: 15px;
}
.bhacr-sidebar-alpha h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
color: #FF0000;
text-decoration: underline;
margin: 0 0 8px 0;
padding: 0;
}
.bhacr-alpha-list {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
line-height: 12pt;
font-weight: bold;
}
.bhacr-alpha-list a {
color: var(--bhacr-purple) !important;
text-decoration: none !important;
}
.bhacr-alpha-list a:hover {
color: var(--bhacr-magenta) !important;
text-decoration: underline !important;
}
.bhacr-sidebar-contact {
margin-top: 15px;
padding-top: 12px;
border-top: 2px solid var(--bhacr-cyan);
text-align: center;
font-size: 10pt;
line-height: 1.5;
}
.bhacr-sidebar-contact p {
margin: 5px 0 !important;
font-size: 10pt !important;
line-height: 1.5 !important;
}
/* Responsive: stack sidebar below on mobile */
@media (max-width: 980px) {
.bhacr-home-layout {
flex-direction: column;
}
.bhacr-home-sidebar-col {
width: 100%;
}
}
/* ==========================================================================
Footer (Custom BHACR footer)
========================================================================== */
#main-footer.bhacr-footer {
background-color: var(--bhacr-dark-blue) !important;
margin-top: 0 !important;
padding: 0 !important;
}
.bhacr-footer-inner {
max-width: 1400px;
margin: 0 auto;
padding: 18px 20px 14px;
text-align: center;
}
.bhacr-footer-nav {
margin-bottom: 10px;
}
.bhacr-footer-nav a {
color: #ffffff !important;
text-decoration: none !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
font-weight: bold;
transition: color 0.2s ease;
}
.bhacr-footer-nav a:hover {
color: var(--bhacr-magenta) !important;
text-decoration: underline !important;
}
.bhacr-footer-sep {
color: rgba(255, 255, 255, 0.5);
margin: 0 8px;
font-size: 11pt;
}
.bhacr-footer-bottom {
margin-top: 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9.5pt;
color: rgba(255,255,255,0.88) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bhacr-footer-bottom a {
color: #ffffff !important;
text-decoration: none !important;
font-weight: bold;
}
.bhacr-footer-bottom a:hover {
color: var(--bhacr-magenta) !important;
}
.bhacr-footer-nosmoking {
font-style: italic;
opacity: 0.85;
}
.bhacr-footer-copyright {
opacity: 0.85;
}
/* Footer bottom bar is a single `white-space:nowrap` line (Login · Register ·
no-smoking notice · copyright + phone). On phones that line is wider than the
viewport and was clipped with an ellipsis (GitHub #22). Let it wrap instead. */
@media (max-width: 600px) {
.bhacr-footer-bottom {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.6;
}
}
/* Hide Divi footer elements we don't use */
#footer-bottom,
#et-footer-nav {
display: none !important;
}
/* Reduce gap above footer on homepage */
.home #main-content .container:last-child {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* Kill extra Divi section padding on homepage */
.home .et_pb_section {
padding-top: 5px !important;
padding-bottom: 0 !important;
}
/* Keep hero section padded properly */
.home .et_pb_section:first-child {
padding-top: 0 !important;
}
/* Category nav bar needs its own padding */
.home .et_pb_section[class*="Category"] {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* Kill extra Divi row padding inside sections */
.home .et_pb_row {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Extra bottom padding on last section so content doesn't butt against footer */
.home .et_pb_section:last-child {
padding-bottom: 15px !important;
}
/* ==========================================================================
Single Cottage Template (matching bhacr.com layout exactly)
Original: #leftcol 400px, #rightcol 500px, #main 925px
========================================================================== */
/* Cottage title - cursive font matching bhacr.com .namecottage.
Sticky `top` is set dynamically by bhacr_fix_header_layout() JS to match the
live (post-shrink) header height. CSS sets a 176px fallback (full Divi header
height) so the title sits below the fixed menu even if JS is slow / fails to
run — without this, top:0 sends the title behind the fixed header on scroll. */
.bhacr-cottage-title {
font-family: cursive;
font-size: 36px;
font-weight: normal; /* it's an now (#207); keep the original light look */
color: #000066;
margin: 0 0 5px 0;
padding: 14px 0 8px 0; /* extra top padding to mask the header/title seam */
position: sticky;
top: 176px;
background: #fff;
z-index: 99;
border-bottom: 1px solid #eee;
}
/* Mobile: Divi's header is NOT fixed below 980px — it scrolls away with the page.
So the sticky title should stick to the top of the viewport (top:0), not float
at the desktop header height. JS in bhacr_fix_header_layout() also respects this
by skipping the dynamic-top override when the header isn't position:fixed. */
@media (max-width: 980px) {
.bhacr-cottage-title { top: 0; }
}
/* Two-column layout matching bhacr.com */
.bhacr-cottage-columns {
display: flex;
gap: 25px;
margin: 0 0 20px 0;
align-items: flex-start;
}
/* Left column: description + pricing (bhacr.com #leftcol = 400px) */
.bhacr-cottage-leftcol {
width: 400px;
flex-shrink: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
line-height: 15pt;
padding-top: 10px;
}
.bhacr-cottage-leftcol p {
margin-bottom: 10px;
font-size: 9pt;
line-height: 15pt;
}
/* Description paragraphs */
.bhacr-cottage-description {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
line-height: 15pt;
color: #000;
}
.bhacr-cottage-description p {
margin-bottom: 1em;
}
/* Standard "What's Included" note box (restores old bhacr.com blue amenities box) */
.bhacr-included-note {
background: #eaf2fb;
border: 1px solid #2c5aa0;
border-radius: 4px;
padding: 12px 16px;
margin: 14px 0 18px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
font-size: 8.5pt;
line-height: 1.5;
color: #1a1a1a;
}
/* Floor plan section */
.bhacr-cottage-floorplan {
margin-bottom: 10px;
}
.bhacr-cottage-floorplan p {
margin-bottom: 8px;
}
/* Pricing section */
.bhacr-pricing-section {
margin: 20px 0;
padding: 20px;
background: #f8f9fa;
border: 2px solid var(--bhacr-cyan);
border-radius: 6px;
}
.bhacr-pricing-heading {
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
color: var(--bhacr-purple);
margin: 0 0 12px 0;
padding-bottom: 8px;
border-bottom: 2px solid var(--bhacr-cyan);
}
table.bhacr-pricing-table {
width: 100%;
border-collapse: collapse;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 1.4;
}
.bhacr-pricing-table thead th {
background: var(--bhacr-purple);
color: #fff;
font-weight: bold;
font-size: 10pt;
padding: 8px 10px;
text-align: left;
}
.bhacr-pricing-table thead th:last-child {
text-align: right;
}
.bhacr-pricing-table tbody td {
padding: 8px 10px;
border-bottom: 1px solid #ddd;
}
/* When a row has a long note (3-column layout), the browser's auto table
layout can squeeze the date-range column into wrapping across two lines
to make room. Give the columns fixed proportions instead so the date
always stays on one line and the note wraps within its own lane
(Rebecca, 2026-07-12 — Rainbow House). Only applied to the 3-column
variant (`.bhacr-pricing-table-notes`, set in single-cottage.php) so the
plain 2-column rate tables elsewhere keep their normal auto layout. */
table.bhacr-pricing-table-notes {
table-layout: fixed;
}
.bhacr-pricing-table-notes td {
padding-left: 6px;
padding-right: 6px;
}
.bhacr-pricing-table-notes th:first-child,
.bhacr-pricing-table-notes td:first-child {
width: 46%;
white-space: nowrap;
}
.bhacr-pricing-table-notes th:nth-child(2),
.bhacr-pricing-table-notes td:nth-child(2) {
width: 27%;
}
.bhacr-pricing-table-notes th:last-child,
.bhacr-pricing-table-notes td:last-child {
width: 27%;
}
.bhacr-pricing-table tbody tr:last-child td {
border-bottom: 2px solid #ccc;
}
.bhacr-pricing-table tbody tr:hover {
background: #eef6ff;
}
/* Peak rate row (no special highlight - uniform rows) */
.bhacr-pricing-table tr.bhacr-peak-rate td {
}
.bhacr-rate-amount {
text-align: right;
font-weight: 600;
white-space: nowrap;
color: #222;
}
.bhacr-rate-per {
font-size: 11pt;
font-weight: normal;
color: #888;
margin-left: 1px;
}
.bhacr-rate-note {
font-size: 9pt;
color: #666;
font-style: italic;
text-align: right;
}
/* Footer rows (pet fee, security deposit) */
.bhacr-pricing-table tfoot td {
padding: 6px 10px;
font-size: 9pt;
color: #555;
border-bottom: 1px solid #e8e8e8;
}
.bhacr-pricing-table tfoot tr:last-child td {
border-bottom: none;
}
.bhacr-pricing-notes {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #666;
margin: 10px 0 5px 0;
font-style: italic;
}
.bhacr-no-booking-fees {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: var(--bhacr-purple);
margin: 10px 0 0 0;
text-align: center;
}
/* Right column: photos + specs (bhacr.com #rightcol = 500px) */
.bhacr-cottage-rightcol {
width: 500px;
flex-shrink: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-align: center;
}
/* Photos stacked vertically, 500px wide like bhacr.com */
.bhacr-cottage-photos {
margin-bottom: 5px;
}
.bhacr-cottage-photos img {
width: 500px;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto 5px auto;
}
/* Gallery link */
.bhacr-gallery-link {
text-align: center;
margin-bottom: 15px;
}
.bhacr-gallery-link a {
font-size: 14pt;
font-weight: bold;
color: #ffffff !important;
text-decoration: underline !important;
padding: 10px 24px;
background-color: var(--bhacr-purple);
border-radius: 20px;
display: inline-block;
transition: all 0.2s ease;
}
.bhacr-gallery-link a:hover {
background-color: var(--bhacr-dark-blue) !important;
color: #ffffff !important;
text-decoration: underline !important;
}
/* At a Glance specs panel */
.bhacr-specs-panel {
background: #f8f9fa;
border: 2px solid var(--bhacr-cyan);
border-radius: 6px;
padding: 20px;
margin-top: 15px;
}
.bhacr-specs-heading {
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
color: var(--bhacr-purple);
margin: 0 0 15px 0;
padding-bottom: 10px;
border-bottom: 2px solid var(--bhacr-cyan);
text-align: left;
}
.bhacr-spec-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid #e8e8e8;
}
.bhacr-spec-row:last-child {
border-bottom: none;
}
.bhacr-spec-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
color: var(--bhacr-purple);
margin-top: 1px;
}
.bhacr-spec-icon svg {
display: block;
}
.bhacr-spec-text {
flex: 1;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 1.5;
text-align: left;
}
.bhacr-spec-text strong {
display: block;
font-size: 10.5pt;
color: #222;
}
.bhacr-spec-detail {
display: block;
font-size: 9pt;
color: #666;
margin-top: 1px;
}
.bhacr-specs-divider {
border-top: 2px solid var(--bhacr-cyan);
margin: 12px 0 8px 0;
}
.bhacr-specs-subheading {
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
color: var(--bhacr-purple);
margin: 0 0 8px 0;
text-align: left;
}
.bhacr-spec-amenity {
padding: 5px 0;
}
.bhacr-spec-amenity .bhacr-spec-text strong {
font-size: 10pt;
font-weight: normal;
}
/* Location Map (Leaflet) */
.bhacr-cottage-map {
margin: 20px 0;
}
.bhacr-map-heading {
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
color: var(--bhacr-purple);
margin: 0 0 10px 0;
padding-bottom: 8px;
border-bottom: 2px solid var(--bhacr-cyan);
}
#bhacr-map {
width: 100%;
height: 250px;
border: 2px solid var(--bhacr-cyan);
border-radius: 6px;
}
.bhacr-map-wrap {
position: relative;
}
.bhacr-map-jump {
margin-bottom: 8px;
}
#bhacr-map-jump-select {
width: 100%;
max-width: 360px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10.5pt;
padding: 8px 12px;
border: 1.5px solid #b0aac8;
border-radius: 6px;
background: #fff;
color: #2c2c3a;
cursor: pointer;
transition: border-color 0.2s ease;
}
#bhacr-map-jump-select:focus {
outline: none;
border-color: var(--bhacr-purple);
box-shadow: 0 0 0 3px rgba(51, 0, 204, 0.08);
}
/* Inquiry CTA button */
.bhacr-inquiry-cta {
text-align: left;
margin: 20px 0;
}
.bhacr-btn-inquiry {
display: inline-block;
background-color: var(--bhacr-purple);
color: #ffffff !important;
padding: 10px 25px;
font-size: 11pt;
font-weight: bold;
text-decoration: none !important;
border-radius: 3px;
transition: background-color 0.2s ease;
}
/* Larger CTA for Available Weeks section */
/* Available Weeks section spacing */
.bhacr-available-weeks-section {
margin-top: 30px;
padding: 20px;
background: #f8f9fa;
border: 2px solid var(--bhacr-cyan);
border-radius: 6px;
}
.bhacr-available-weeks-section .bhacr-pricing-heading {
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 2px solid var(--bhacr-cyan);
}
table.bhacr-available-weeks-table {
width: 100%;
border-collapse: collapse;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}
table.bhacr-available-weeks-table th {
text-align: left;
padding: 6px 10px;
border-bottom: 2px solid var(--bhacr-cyan);
font-size: 10pt;
font-weight: 600;
color: #333;
}
table.bhacr-available-weeks-table th:last-child {
text-align: right;
}
table.bhacr-available-weeks-table td {
padding: 6px 10px;
border-bottom: 1px solid #e0e0e0;
line-height: 1.4;
}
table.bhacr-available-weeks-table tbody tr:hover {
background: #eef6ff;
}
table.bhacr-available-weeks-table tbody tr:last-child td {
border-bottom: none;
}
.bhacr-available-weeks-cta {
margin-top: 20px;
text-align: center;
}
.bhacr-available-weeks-cta .bhacr-btn-inquiry {
font-size: 15pt;
padding: 14px 35px;
border-radius: 25px;
}
.bhacr-no-weeks-cottage {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #666;
padding: 10px 0;
}
.bhacr-btn-inquiry:hover {
background-color: #2200aa !important;
color: #ffffff !important;
}
/* Full photo gallery section */
.bhacr-cottage-gallery-full {
clear: both;
margin: 30px 0;
padding-top: 20px;
border-top: 2px solid var(--bhacr-cyan);
}
.bhacr-cottage-gallery-full h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18pt;
color: #000066;
text-align: center;
margin: 0 0 15px 0;
}
/* Envira gallery captions below photos */
.bhacr-envira-caption {
font-size: 11px;
color: #555;
text-align: center;
padding: 3px 4px 6px;
line-height: 1.3;
}
/* Fallback gallery grid (when Envira not used) */
.bhacr-gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.bhacr-gallery-thumb img {
width: 100%;
height: 140px;
object-fit: cover;
display: block;
border: 1px solid #ddd;
}
.bhacr-gallery-thumb:hover img {
opacity: 0.8;
}
/* Footer navigation links (matching bhacr.com footer) */
.bhacr-cottage-footer-links {
clear: both;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
padding: 15px 0;
border-top: 1px solid #ccc;
margin-top: 20px;
}
.bhacr-cottage-footer-links a {
color: var(--bhacr-purple) !important;
font-size: 9pt;
}
/* ==========================================================================
Envira Lightbox - Full Screen Override
Make lightbox images fill the entire screen when clicked
========================================================================== */
/* Fullscreen mode: remove all padding/margins */
.envirabox-container:fullscreen,
.envirabox-container:-webkit-full-screen {
background: #000 !important;
}
.envirabox-container:fullscreen .envirabox-content,
.envirabox-container:-webkit-full-screen .envirabox-content {
max-width: 100% !important;
max-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Also enlarge when not in fullscreen API mode */
.envirabox-container .envirabox-content {
max-width: calc(100% - 10px) !important;
max-height: calc(100% - 10px) !important;
}
.envirabox-container .envirabox-image-wrap img {
max-width: 100vw !important;
max-height: 100vh !important;
object-fit: contain !important;
}
/* Envira gallery caption styling.
The .envira-caption span (which also has class .envira-gallery-captioned-text)
ships hidden via Envira's own stylesheet (`visibility: hidden`) — designed
for hover/lightbox overlays. We override here so captions show below each
thumbnail in our cottage galleries. */
.envira-caption,
.envira-gallery-captioned-text {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
line-height: 13pt;
color: #333;
display: block !important;
visibility: visible !important;
position: static !important;
text-align: center;
padding: 4px 2px 8px;
}
.envira-gallery-captioned-data,
.envira-gallery-captioned-data-base {
display: block !important;
visibility: visible !important;
position: static !important;
height: auto !important;
}
/* Responsive: stack columns on mobile */
@media (max-width: 980px) {
.bhacr-cottage-columns {
flex-direction: column;
}
.bhacr-cottage-leftcol {
width: 100%;
}
.bhacr-cottage-rightcol {
width: 100%;
}
.bhacr-cottage-photos img {
width: 100%;
}
table.bhacr-pricing-table {
width: 100%;
}
.bhacr-specs-panel {
margin-top: 20px;
}
.bhacr-gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ==========================================================================
Search Page (FacetWP) - Two column: filters + results
========================================================================== */
.bhacr-search-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 30px;
max-width: 1500px;
margin: 0 auto;
padding: 20px 20px;
}
/* --- Filters sidebar --- */
.bhacr-search-filters {
background: #f8f9fa;
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 20px 18px;
align-self: start;
/* #237 — The full filter panel is ~2300px tall (10 facets), far taller than
any viewport, so the old sticky + max-height + overflow-y (#153) produced a
permanent inner scrollbar ("stray scrollbar") AND a too-tall sticky element
still can't reveal its bottom filters. Let the panel sit in normal page flow
instead: no inner scrollbar, and every filter is reachable by scrolling the
page. */
}
.bhacr-search-filters > h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
color: var(--bhacr-purple);
margin: 0 0 10px 0;
padding-bottom: 10px;
border-bottom: 2px solid var(--bhacr-cyan);
}
.bhacr-reset-filters {
display: block;
width: 100%;
padding: 8px 12px;
margin-bottom: 15px;
background: #fff;
color: var(--bhacr-purple);
border: 2px solid var(--bhacr-purple);
border-radius: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
}
.bhacr-reset-filters:hover {
background: var(--bhacr-purple);
color: #fff;
}
.bhacr-filter-section {
margin-bottom: 18px;
padding-bottom: 15px;
border-bottom: 1px solid #ddd;
}
.bhacr-filter-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.bhacr-filter-section h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt !important;
font-weight: bold;
color: #333;
margin: 0 0 8px 0 !important;
padding: 0;
line-height: 1.3 !important;
}
/* --- Results area --- */
.bhacr-search-results {
min-width: 0;
overflow: visible;
}
.bhacr-search-results .bhacr-cottage-grid {
grid-template-columns: repeat(3, 1fr);
}
.bhacr-search-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 15px;
background: var(--bhacr-cyan);
border-radius: 4px;
margin-bottom: 15px;
min-height: 0;
}
.bhacr-search-counts {
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
color: var(--bhacr-purple);
font-weight: bold;
}
.bhacr-search-counts .facetwp-counts {
display: inline;
}
.bhacr-search-sort {
min-width: 160px;
}
.bhacr-no-results {
text-align: center;
padding: 40px 20px;
font-size: 14pt;
color: #666;
}
.bhacr-search-pager {
margin-top: 20px;
text-align: center;
}
/* --- FacetWP widget overrides --- */
/* Search input */
.bhacr-search-filters .facetwp-search {
width: 100%;
padding: 8px 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
}
.bhacr-search-filters .facetwp-search:focus {
border-color: var(--bhacr-purple);
outline: none;
box-shadow: 0 0 3px rgba(51, 0, 204, 0.3);
}
/* Search icon button */
.bhacr-search-filters .facetwp-icon {
top: 9px;
}
/* Slider styling */
.bhacr-search-filters .facetwp-slider-wrap {
padding: 0 5px;
}
.bhacr-search-filters .facetwp-slider .noUi-connect {
background: var(--bhacr-purple);
}
.bhacr-search-filters .facetwp-slider .noUi-handle {
border-color: var(--bhacr-purple);
}
.bhacr-search-filters .facetwp-slider-label {
font-size: 10pt;
color: #555;
margin-top: 5px;
}
/* Checkbox styling */
.bhacr-search-filters .facetwp-checkbox {
display: block;
padding: 3px 0 3px 26px !important;
background-position: 0 50% !important;
background-size: 16px 16px !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt !important;
color: #333;
cursor: pointer;
line-height: 1.5 !important;
}
.bhacr-search-filters .facetwp-checkbox:hover {
color: var(--bhacr-purple);
}
.bhacr-search-filters .facetwp-checkbox.checked {
color: var(--bhacr-purple);
font-weight: bold;
}
.bhacr-search-filters .facetwp-counter {
font-size: 9pt;
color: #999;
margin-left: 3px;
}
/* Sort dropdown */
.bhacr-search-sort .facetwp-sort-select,
.bhacr-search-sort select {
padding: 6px 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
background: #fff;
}
/* Pager */
.facetwp-pager .facetwp-page {
display: inline-block;
padding: 6px 12px;
margin: 0 3px;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 10pt;
color: var(--bhacr-purple) !important;
text-decoration: none !important;
cursor: pointer;
}
.facetwp-pager .facetwp-page:hover {
background: var(--bhacr-purple);
color: #fff !important;
border-color: var(--bhacr-purple);
}
.facetwp-pager .facetwp-page.active {
background: var(--bhacr-purple);
color: #fff !important;
border-color: var(--bhacr-purple);
}
/* Result count text */
.facetwp-counts {
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
}
/* --- Responsive: single column on mobile --- */
@media (max-width: 768px) {
.bhacr-search-layout {
grid-template-columns: 1fr;
padding: 10px;
}
.bhacr-search-filters {
position: static;
}
.bhacr-search-toolbar {
flex-direction: column;
gap: 10px;
text-align: center;
}
.bhacr-search-sort {
min-width: auto;
width: 100%;
}
}
/* ==========================================================================
404 Page
========================================================================== */
.bhacr-404-page {
max-width: 700px;
margin: 0 auto;
padding: 40px 20px 60px;
}
.bhacr-404-title {
font-family: Arial, Helvetica, sans-serif;
font-size: 28pt;
color: var(--bhacr-purple);
margin: 0 0 15px 0;
text-align: center;
}
.bhacr-404-message {
font-family: Arial, Helvetica, sans-serif;
font-size: 13pt;
line-height: 1.6;
color: #333;
text-align: center;
margin-bottom: 5px;
}
.bhacr-404-submessage {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #666;
text-align: center;
margin-bottom: 25px;
}
.bhacr-404-actions {
text-align: center;
margin-bottom: 30px;
}
.bhacr-404-actions .bhacr-btn-inquiry {
margin: 0 8px;
}
.bhacr-404-actions .bhacr-btn-secondary {
background-color: #fff;
color: var(--bhacr-purple) !important;
border: 2px solid var(--bhacr-purple);
}
.bhacr-404-actions .bhacr-btn-secondary:hover {
background-color: var(--bhacr-purple) !important;
color: #fff !important;
}
.bhacr-404-links {
background: #f8f9fa;
border: 2px solid var(--bhacr-cyan);
border-radius: 6px;
padding: 20px 25px;
margin-bottom: 25px;
}
.bhacr-404-links h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
color: var(--bhacr-purple);
margin: 0 0 12px 0;
}
.bhacr-404-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.bhacr-404-links li {
padding: 6px 0;
border-bottom: 1px solid #e8e8e8;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 1.5;
color: #555;
}
.bhacr-404-links li:last-child {
border-bottom: none;
}
.bhacr-404-links li a {
font-weight: bold;
}
.bhacr-404-contact {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #555;
}
/* ==========================================================================
FacetWP Available Week Dropdown
========================================================================== */
/* ==========================================================================
Inquiry Form Page - hide "2026 Availability" sidebar widget title (Issue #71)
========================================================================== */
.page-id-725 #media_image-1 .widgettitle {
display: none !important;
}
.facetwp-facet-available_week .facetwp-dropdown {
width: 100%;
padding: 6px 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
border: 1px solid #ccc;
border-radius: 3px;
background-color: #fff;
}
.facetwp-facet-available_week .facetwp-dropdown:focus {
border-color: var(--bhacr-purple);
outline: none;
}
/* =========================================================================
Record Reservation — Staff Page
========================================================================= */
.bhacr-staff-page {
max-width: 900px;
margin: 20px auto 60px;
font-family: Arial, Helvetica, sans-serif;
}
.bhacr-staff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid #99FFFF;
}
.bhacr-staff-title {
font-family: Arial, Helvetica, sans-serif;
font-size: 24pt;
color: #3300CC;
margin: 0;
padding: 0;
}
.bhacr-staff-nav {
font-size: 10pt;
}
.bhacr-staff-nav a {
color: #3300CC !important;
}
.bhacr-staff-nav a:hover {
color: #FF33FF !important;
}
/* ==========================================================================
BHACR primary button — white text on purple, resists Divi link overrides
========================================================================== */
a.bhacr-btn-primary,
a.bhacr-btn-primary:visited,
a.bhacr-btn-primary:hover,
a.bhacr-btn-primary:active {
color: #fff !important;
text-decoration: none !important;
}
a.bhacr-btn-primary:hover {
background: #2200AA !important;
}
/* ==========================================================================
Full-width custom template pages — remove Divi sidebar gutter
========================================================================== */
.page-template-page-complete-registration-php #left-area,
.page-template-page-login-php #left-area,
.page-template-page-logout-php #left-area,
.page-template-page-my-account-php #left-area,
.page-template-page-record-reservation-php #left-area,
.page-template-page-help-php #left-area {
width: 100% !important;
float: none !important;
padding-right: 0 !important;
border-right: none !important;
border-left: none !important;
}
.page-template-page-complete-registration-php #sidebar,
.page-template-page-login-php #sidebar,
.page-template-page-logout-php #sidebar,
.page-template-page-my-account-php #sidebar,
.page-template-page-record-reservation-php #sidebar,
.page-template-page-help-php #sidebar {
display: none !important;
}
/* Remove any stray sidebar vertical divider on full-width custom pages */
.page-template-page-complete-registration-php .container:after,
.page-template-page-login-php .container:after,
.page-template-page-logout-php .container:after,
.page-template-page-my-account-php .container:after,
.page-template-page-record-reservation-php .container:after,
.page-template-page-help-php .container:after {
display: none !important;
}
/* Divi draws a 1px gray vertical "gutter" via .container::before (between
#left-area and #sidebar in the standard 2-column layout). On Divi
Builder pages and any layout where the sidebar is hidden, this leaves
a visible faint vertical line floating in the middle of the page.
Hide it globally — pages that genuinely want the divider can re-enable. */
.container::before,
#main-content .container::before {
display: none !important;
background: transparent !important;
}
.page-template-page-complete-registration-php .et_pb_widget_area_left,
.page-template-page-complete-registration-php .et_pb_widget_area_right,
.page-template-page-login-php .et_pb_widget_area_left,
.page-template-page-login-php .et_pb_widget_area_right,
.page-template-page-logout-php .et_pb_widget_area_left,
.page-template-page-logout-php .et_pb_widget_area_right,
.page-template-page-my-account-php .et_pb_widget_area_left,
.page-template-page-my-account-php .et_pb_widget_area_right,
.page-template-page-record-reservation-php .et_pb_widget_area_left,
.page-template-page-record-reservation-php .et_pb_widget_area_right,
.page-template-page-help-php .et_pb_widget_area_left,
.page-template-page-help-php .et_pb_widget_area_right {
border: none !important;
}
/* ==========================================================================
Prevent fixed-header flicker on short pages
Divi's waypoint fires too eagerly when the page barely scrolls.
Increase the scroll threshold and ensure enough content height.
========================================================================== */
/* Give short pages enough height so the header doesn't bounce */
.page-template-page-my-account-php #et-main-area,
.page-template-page-login-php #et-main-area,
.page-template-page-complete-registration-php #et-main-area,
.page-template-page-logout-php #et-main-area {
min-height: calc(100vh - 80px);
}
/* ==========================================================================
Inquired About tab
========================================================================== */
.bhacr-inquired-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 16px;
}
.bhacr-inquired-card {
display: flex;
align-items: center;
gap: 16px;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 8px;
padding: 12px 16px;
transition: box-shadow 0.2s;
}
.bhacr-inquired-card:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.bhacr-inquired-thumb {
flex-shrink: 0;
width: 80px;
height: 56px;
border-radius: 6px;
overflow: hidden;
}
.bhacr-inquired-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bhacr-inquired-info {
flex: 1;
min-width: 0;
}
.bhacr-inquired-info h4 {
margin: 0 0 2px;
font-size: 15px;
}
.bhacr-inquired-info h4 a {
color: #3300CC;
text-decoration: none;
}
.bhacr-inquired-info h4 a:hover {
color: #FF33FF;
}
.bhacr-inquired-town,
.bhacr-inquired-date {
margin: 0;
font-size: 13px;
color: #888;
}
.bhacr-inquired-action {
flex-shrink: 0;
font-size: 13px;
color: #3300CC;
text-decoration: none;
white-space: nowrap;
}
.bhacr-inquired-action:hover {
color: #FF33FF;
}
/* ==========================================================================
Correspondence tab
========================================================================== */
.bhacr-correspondence-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
}
.bhacr-email-item {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 8px;
overflow: hidden;
}
.bhacr-email-item summary {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
cursor: pointer;
font-size: 14px;
list-style: none;
}
.bhacr-email-item summary::-webkit-details-marker {
display: none;
}
.bhacr-email-item summary::before {
content: '▸';
font-size: 12px;
color: #999;
transition: transform 0.2s;
}
.bhacr-email-item[open] summary::before {
transform: rotate(90deg);
}
.bhacr-email-date {
flex-shrink: 0;
color: #888;
font-size: 13px;
min-width: 90px;
}
.bhacr-email-subject {
flex: 1;
font-weight: 600;
color: #333;
}
.bhacr-email-attachment-badge {
flex-shrink: 0;
}
.bhacr-email-body {
padding: 0 16px 16px;
font-size: 14px;
line-height: 1.6;
color: #444;
border-top: 1px solid #f0f0f0;
padding-top: 16px;
margin-top: 4px;
}
.bhacr-email-attachments {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid #f0f0f0;
}
.bhacr-email-attachments ul {
margin: 4px 0 0;
padding-left: 20px;
}
.bhacr-email-attachments a {
color: #3300CC;
}
.bhacr-empty-state {
text-align: center;
padding: 40px 20px;
color: #888;
}
/* When page is too short to scroll, prevent Divi from toggling fixed header */
.bhacr-no-fixed-header #main-header {
position: relative !important;
}
.bhacr-no-fixed-header #main-header.et-fixed-header {
position: relative !important;
transform: none !important;
}
/* ── Spacing for auth/account pages with Divi fixed header ── */
/* Divi's fixed header floats above #page-container. We use a small JS snippet
(in the template footer) to set exact clearance. As a CSS fallback, set
#page-container padding to 0 and #main-content padding to 0 — the JS
snippet in functions.php handles the real offset. */
.page-template-page-login-php #page-container,
.page-template-page-register-php #page-container,
.page-template-page-my-account-php #page-container,
.page-template-page-logout-php #page-container,
.page-template-page-complete-registration-php #page-container,
.page-template-page-help-php #page-container {
padding-top: 0 !important;
}
/* Record Reservation: keep clearance for the fixed header so the page H1
doesn't flash behind the menu before the JS offset-sync runs. */
.page-template-page-record-reservation-php #page-container {
padding-top: 182px;
}
.page-template-page-login-php #main-content,
.page-template-page-register-php #main-content,
.page-template-page-my-account-php #main-content,
.page-template-page-logout-php #main-content,
.page-template-page-complete-registration-php #main-content,
.page-template-page-help-php #main-content,
.page-template-page-record-reservation-php #main-content {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* ── Saved Search Bar (on /search/) ────────────────────────── */
.bhacr-saved-search-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
margin-bottom: 20px;
background: #f5f0fa;
border: 1px solid #e0d4f0;
border-radius: 6px;
font-size: 14px;
}
.bhacr-save-search-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: #3300CC;
color: #fff !important;
border: none;
padding: 7px 14px;
border-radius: 20px;
font-size: 13px;
cursor: pointer;
transition: background 0.2s;
}
.bhacr-save-search-btn:hover {
background: #5500EE;
}
.bhacr-save-search-btn .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
line-height: 16px;
}
.bhacr-saved-searches-dropdown {
position: relative;
}
.bhacr-load-search-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: #fff;
color: #3300CC !important;
border: 1px solid #3300CC;
padding: 7px 14px;
border-radius: 20px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.bhacr-load-search-btn:hover {
background: #f5f0fa;
}
.bhacr-load-search-btn .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
line-height: 16px;
color: #cc9900;
}
.bhacr-saved-searches-list {
display: none;
position: absolute;
top: 100%;
left: 0;
margin-top: 4px;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
min-width: 260px;
z-index: 1000;
}
.bhacr-saved-searches-list.open {
display: block;
}
.bhacr-saved-search-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
border-bottom: 1px solid #f0f0f0;
}
.bhacr-saved-search-item:last-child {
border-bottom: none;
}
.bhacr-saved-search-item a.bhacr-load-saved {
color: #3300CC !important;
text-decoration: none;
flex: 1;
}
.bhacr-saved-search-item a.bhacr-load-saved:hover {
text-decoration: underline;
}
.bhacr-delete-saved {
background: none;
border: none;
color: #999;
font-size: 18px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
}
.bhacr-delete-saved:hover {
color: #c00;
}
.bhacr-save-login-prompt {
color: #666;
font-size: 13px;
}
.bhacr-save-login-prompt a {
color: #3300CC !important;
font-weight: 600;
}
/* ── Saved Searches in My Account ─────────────────────────── */
.bhacr-saved-searches-account {
margin-top: 20px;
}
.bhacr-saved-searches-account h3 {
font-size: 18px;
margin-bottom: 12px;
color: #333;
}
.bhacr-saved-search-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: #f9f9f9;
border: 1px solid #e8e8e8;
border-radius: 6px;
margin-bottom: 8px;
}
.bhacr-saved-search-card:hover {
background: #f5f0fa;
border-color: #d0c0e8;
}
.bhacr-saved-search-card a {
color: #3300CC !important;
text-decoration: none;
font-weight: 500;
font-size: 15px;
}
.bhacr-saved-search-card a:hover {
text-decoration: underline;
}
.bhacr-saved-search-date {
color: #999;
font-size: 12px;
margin-left: 10px;
}
/* ==========================================================================
Help & Tutorials Page
========================================================================== */
.bhacr-help-page {
max-width: 1100px;
margin: 0 auto;
padding: 30px 20px 60px;
font-family: Arial, Helvetica, sans-serif;
}
.bhacr-help-header {
margin-bottom: 30px;
}
.bhacr-help-header h1 {
color: var(--bhacr-purple);
font-size: 28px;
margin-bottom: 8px;
}
.bhacr-help-header p {
color: #555;
font-size: 16px;
margin-bottom: 12px;
}
.bhacr-help-back {
display: inline-block;
color: var(--bhacr-purple) !important;
text-decoration: none;
font-size: 14px;
font-weight: 600;
}
.bhacr-help-back:hover {
text-decoration: underline;
}
/* Quick link cards */
.bhacr-help-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 40px;
}
.bhacr-help-card {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 10px;
padding: 24px 20px;
text-align: center;
transition: box-shadow 0.2s, transform 0.2s;
}
.bhacr-help-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
transform: translateY(-2px);
text-decoration: none;
}
a.bhacr-help-card {
text-decoration: none;
color: inherit;
display: block;
}
.bhacr-help-card .dashicons {
font-size: 36px;
width: 36px;
height: 36px;
color: var(--bhacr-purple);
margin-bottom: 12px;
}
.bhacr-help-card h3 {
font-size: 17px;
color: #222;
margin-bottom: 6px;
}
.bhacr-help-card p {
font-size: 13px;
color: #666;
line-height: 1.5;
margin: 0;
}
/* Sections */
.bhacr-help-section {
margin-bottom: 40px;
}
.bhacr-help-section h2 {
font-size: 22px;
color: #222;
border-bottom: 2px solid var(--bhacr-purple);
padding-bottom: 8px;
margin-bottom: 20px;
}
/* Placeholder */
.bhacr-help-placeholder {
background: #f8f5ff;
border: 1px dashed #c4b0e8;
border-radius: 8px;
padding: 30px;
text-align: center;
color: #777;
font-size: 15px;
}
/* Documentation expandables */
.bhacr-help-doc {
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 10px;
overflow: hidden;
}
/* Brief highlight when a FAQ is deep-linked from the "Related Help Topics" box */
.bhacr-help-doc.bhacr-help-flash,
.bhacr-help-section.bhacr-help-flash {
animation: bhacr-help-flash 1.6s ease-out;
}
@keyframes bhacr-help-flash {
0% { box-shadow: 0 0 0 3px rgba(33,118,209,0.55); }
100% { box-shadow: 0 0 0 3px rgba(33,118,209,0); }
}
.bhacr-help-doc summary {
padding: 14px 20px;
font-size: 15px;
font-weight: 600;
color: #333;
cursor: pointer;
background: #fafafa;
transition: background 0.15s;
}
.bhacr-help-doc summary:hover {
background: #f0ecf8;
}
.bhacr-help-doc[open] summary {
border-bottom: 1px solid #e0e0e0;
background: #f5f0fa;
}
.bhacr-help-doc-body {
padding: 16px 24px;
}
.bhacr-help-doc-body ol {
margin: 0;
padding-left: 20px;
}
.bhacr-help-doc-body li {
margin-bottom: 8px;
font-size: 14px;
line-height: 1.6;
color: #444;
}
/* Support form */
.bhacr-help-support-form {
max-width: 600px;
}
.bhacr-help-support-form .bhacr-form-row {
margin-bottom: 16px;
}
.bhacr-help-support-form label {
display: block;
font-weight: 600;
font-size: 14px;
color: #333;
margin-bottom: 6px;
}
.bhacr-help-support-form input[type="text"],
.bhacr-help-support-form select,
.bhacr-help-support-form textarea {
width: 100%;
padding: 10px 12px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 6px;
font-family: inherit;
box-sizing: border-box;
}
.bhacr-help-support-form textarea {
resize: vertical;
}
.bhacr-help-support-form input:focus,
.bhacr-help-support-form select:focus,
.bhacr-help-support-form textarea:focus {
border-color: var(--bhacr-purple);
outline: none;
box-shadow: 0 0 0 2px rgba(51, 0, 204, 0.1);
}
.bhacr-help-support-form .bhacr-btn-inquiry {
background: var(--bhacr-purple);
color: #fff;
border: none;
padding: 12px 28px;
font-size: 15px;
font-weight: 600;
border-radius: 25px;
cursor: pointer;
transition: background 0.2s;
}
.bhacr-help-support-form .bhacr-btn-inquiry:hover {
background: #2600a0;
}
.bhacr-success-msg {
background: #e8f5e9;
border: 1px solid #a5d6a7;
border-radius: 8px;
padding: 20px;
color: #2e7d32;
font-size: 15px;
font-weight: 600;
}
/* Contact section */
.bhacr-help-contact {
background: #f8f5ff;
border-radius: 10px;
padding: 24px 28px;
}
.bhacr-help-contact h2 {
border-bottom-color: #c4b0e8;
}
.bhacr-help-contact a {
color: var(--bhacr-purple) !important;
}
/* Screenshot images */
.bhacr-help-img {
margin: 16px 0 20px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.bhacr-help-img img {
display: block;
width: 100%;
height: auto;
}
/* Responsive */
@media (max-width: 768px) {
.bhacr-help-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.bhacr-help-cards {
grid-template-columns: 1fr;
}
.bhacr-help-page {
padding: 20px 15px 40px;
}
}
/* ==========================================================================
#43 Full-width layout — remove sidebar, use full available width
========================================================================== */
/* Homepage: hide 200px right sidebar column (cottage list + badge).
.bhacr-home-main expands to fill the space via flex: 1. */
.bhacr-home-sidebar-col {
display: none;
}
/* Standard Divi content pages with right sidebar:
expand #left-area to 100%, hide #sidebar.
Excludes search (page-id-714) which manages its own layout internally. */
body.et_right_sidebar:not(.page-id-714) #left-area {
width: 100% !important;
float: none !important;
padding-right: 0 !important;
border-right: none !important;
}
body.et_right_sidebar:not(.page-id-714) #sidebar {
display: none !important;
}
/* Remove Divi's vertical divider pseudo-element */
body.et_right_sidebar:not(.page-id-714) #main-content .container:after {
display: none !important;
}
/* Cottage grid: allow cards to spread across the newly available width.
Restate responsive columns since the max-width container is now wider. */
body.home .bhacr-cottage-grid {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
body.home .bhacr-cottage-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
body.home .bhacr-cottage-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
body.home .bhacr-cottage-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
#38 Hero text overlay — responsive scaling at mid-width (769–980px)
========================================================================== */
/* Between tablet and desktop: overlay starts feeling cramped.
Increase its width slightly so text doesn't overflow; shrink font. */
@media (max-width: 980px) and (min-width: 769px) {
.bhacr-hero-text-overlay {
width: 45%;
font-size: 9pt;
padding: 10px 14px;
}
.bhacr-hero-text-overlay p {
font-size: 9pt !important;
margin-bottom: 6px;
}
/* Calendar bubble: shift left proportionally so it stays on the image */
.bhacr-calendar-bubble {
left: 25%;
}
}
/* ==========================================================================
#34 Header gap — tighten space between nav and page content
========================================================================== */
/* Standard (non-home) Divi pages: reduce first-section top padding further.
The existing rule targets .et_pb_section:first-child globally (15px);
this override tightens non-home pages specifically. */
body:not(.home) #et-main-area .et_pb_section:first-child {
padding-top: 8px !important;
}
body:not(.home) #et-main-area .et_pb_section:first-child .et_pb_row:first-child {
padding-top: 0 !important;
}
/* Slightly increase body font on content pages for readability.
(Already 16px globally; bump to 16.5px for denser text blocks.) */
body.page #main-content .et_pb_text_inner p,
body.page #main-content .entry-content p {
font-size: 16.5px;
line-height: 1.75em;
}
/* ==========================================================================
#35 Bar Harbor & Acadia page — remove duplicate auto title, tighten layout
========================================================================== */
/* Divi auto-generates the post_title as h1.entry-title above the builder;
the page already has its own h1 in the first Divi section, so hide the dupe. */
body.page-id-655 h1.entry-title {
display: none !important;
}
/* The title-only first section doesn't need the default ~40px top/bottom padding. */
body.page-id-655 #et-main-area .et_pb_section:first-child {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* Tighten the top of the main content section too. */
body.page-id-655 #et-main-area .et_pb_section:nth-child(2) {
padding-top: 15px !important;
}
/* ==========================================================================
Single cottage page: fallback page-container clearance for the fixed header.
The JS in bhacr_fix_header_layout() sets exact value dynamically by measuring
the actual header height (handles zoom/resize). This is a CSS fallback for
the no-JS case.
========================================================================== */
body.single-cottage #page-container,
body.bhacr-cottage-additional-info #page-container {
padding-top: 182px;
}
/* Cottage additional-info page polish */
body.bhacr-cottage-additional-info .entry-title,
body.bhacr-cottage-additional-info .et_pb_title_container h1 {
color: #000066;
margin: 10px 0 20px 0;
}
/* Make sure the in-content "Back to ..." button text is white even with our
global a { color: var(--bhacr-purple) !important } rule. */
body.bhacr-cottage-additional-info a[style*="background:#3300CC"],
.bhacr-additional-info-back-btn {
color: #fff !important;
}
/* #163/#176 — Joint marketing page (/acadia-beach-walk/, /seaward-and-pond-house/).
Renders 2+ cottages side-by-side as cards linking to each individual cottage page. */
.bhacr-joint-page {
max-width: 1100px;
margin: 0 auto;
font-family: 'Source Sans 3', Arial, sans-serif;
}
.bhacr-joint-intro {
font-size: 17px;
line-height: 1.7;
color: #2c2c3a;
margin: 0 0 26px 0;
}
.bhacr-joint-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
margin: 28px 0;
}
.bhacr-joint-card {
display: block;
background: #fff;
border: 1.5px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
text-decoration: none !important;
color: inherit !important;
transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.bhacr-joint-card:hover {
border-color: #3300CC;
box-shadow: 0 6px 22px rgba(51,0,204,0.16);
transform: translateY(-3px);
}
.bhacr-joint-card-photo {
width: 100%;
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center;
background-color: #ddd;
}
.bhacr-joint-card-body {
padding: 16px 18px 20px;
}
.bhacr-joint-card-body h3 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 22px;
margin: 0 0 6px 0;
color: #000066;
font-style: italic;
}
.bhacr-joint-specs {
font-size: 13.5px;
color: #666;
margin: 0 0 12px 0;
}
.bhacr-joint-card-cta {
color: #3300CC;
font-weight: 600;
font-size: 13.5px;
}
.bhacr-joint-location {
font-size: 15px;
color: #555;
line-height: 1.6;
margin: 24px 0;
}
.bhacr-joint-cta-row {
text-align: center;
margin: 30px 0 10px;
}
.bhacr-joint-inquire-btn {
display: inline-block;
padding: 12px 28px;
background: #3300CC;
color: #fff !important;
text-decoration: none !important;
border-radius: 25px;
font-size: 15px;
font-weight: 600;
transition: background 0.2s;
}
.bhacr-joint-inquire-btn:hover {
background: #2600a0;
}
@media (max-width: 768px) {
.bhacr-joint-intro { font-size: 15px; }
.bhacr-joint-cards { gap: 16px; }
.bhacr-joint-card-body h3 { font-size: 19px; }
}
/* #163/#176 — paired property banner. Shown at top of single-cottage page
when this cottage has a joint marketing page (its sibling). */
.bhacr-paired-banner {
background: linear-gradient(135deg, #fff8e0 0%, #ffe9b3 100%);
border: 1.5px solid #d4a017;
border-radius: 6px;
padding: 10px 18px;
margin: 10px auto 18px;
max-width: 940px;
font-family: 'Source Sans 3', Arial, sans-serif;
font-size: 14.5px;
color: #000066;
display: flex;
align-items: center;
gap: 12px;
}
.bhacr-paired-banner-icon {
font-size: 20px;
letter-spacing: -3px;
color: #d4a017;
font-weight: bold;
flex-shrink: 0;
}
.bhacr-paired-banner a {
color: #000066 !important;
text-decoration: underline;
}
.bhacr-paired-banner a:hover {
color: #3300CC !important;
}
/* Staff-only "Edit parent page" pill in the paired banner */
.bhacr-paired-banner-edit {
flex-shrink: 0;
margin-left: auto;
background: #3300CC;
color: #fff !important;
text-decoration: none !important;
font-weight: 600;
font-size: 13px;
padding: 5px 12px;
border-radius: 20px;
white-space: nowrap;
}
.bhacr-paired-banner-edit:hover {
background: #000066;
color: #fff !important;
}
@media (max-width: 768px) {
.bhacr-paired-banner {
font-size: 13px;
padding: 8px 12px;
gap: 8px;
}
}
/* #157 — additional-info page header: cottage hero photo + yellow banner.
Matches the look of the original bhacr.com {Name}3.html pages. */
.bhacr-addinfo-header {
margin: 0 0 24px 0;
text-align: center;
}
.bhacr-addinfo-hero-link {
display: block;
margin-bottom: 0;
}
.bhacr-addinfo-hero {
display: block;
width: 100%;
max-width: 700px;
max-height: 360px;
object-fit: cover;
margin: 0 auto;
border-radius: 6px;
box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.bhacr-addinfo-banner {
background: #ffcc33;
color: #000066;
font-family: 'Source Sans 3', Arial, sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.5px;
text-align: center;
padding: 12px 18px;
margin: 18px auto 0;
max-width: 700px;
border: 2px solid #d4a017;
border-radius: 4px;
text-transform: uppercase;
}
.bhacr-addinfo-cottage-name {
font-family: 'Playfair Display', Georgia, serif !important;
font-size: 28px !important;
font-style: italic;
color: #000066 !important;
margin: 14px 0 0 0 !important;
text-align: center;
}
.bhacr-addinfo-cottage-name a {
color: #000066 !important;
text-decoration: none !important;
}
.bhacr-addinfo-cottage-name a:hover { text-decoration: underline !important; }
.bhacr-addinfo-back-btn {
display: inline-block;
padding: 10px 22px;
background: #3300CC !important;
color: #fff !important;
text-decoration: none !important;
border-radius: 4px;
font-weight: bold;
font-family: 'Source Sans 3', Arial, sans-serif;
}
.bhacr-addinfo-back-btn:hover {
background: #2600a0 !important;
}
@media (max-width: 768px) {
.bhacr-addinfo-banner { font-size: 17px; padding: 10px 12px; }
.bhacr-addinfo-cottage-name { font-size: 22px !important; }
.bhacr-addinfo-hero { max-height: 240px; }
}
/* ==========================================================================
Invisible reCAPTCHA — hide the stray "CAPTCHA" field label
All Gravity Forms use reCAPTCHA v2 Invisible (no visible widget), but GF
still renders a "CAPTCHA"