/*
Theme Name:   GeneratePress Chandler's Cove
Theme URI:    https://chandlerscovevillage.com
Description:  GeneratePress child theme for Chandler's Cove Village
Author:       Jeff VanderWal
Template:     generatepress
Version:      1.0.0
Text Domain:  generatepress-chandlerscove
*/

@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');

/* ====================== COLOUR TOKENS ====================== */
:root {
	--cc-blue-dark:   #00457D;
	--cc-blue-mid:    #286799;
	--cc-blue-light:  #0099CC;
	--cc-blue-footer: #032752;
	--cc-link-hover:  #006699;
	--cc-nav-link:    #666666;
	--cc-footer-link: #92D7F5;
	--cc-bg:          #f2f2f2;
	--cc-content-bg:  #ffffff;
}

/* ====================== BASE ====================== */
body {
	font-family: Verdana, Arial, Geneva, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #333;
	background-color: var(--cc-bg);
	background-image: url('images/boxbackground.png');
	background-attachment: fixed;
	background-repeat: repeat;
}

h1, h2, h3, h4, h5, h6,
.cursive {
	font-family: 'Gloria Hallelujah', cursive !important;
	font-weight: 400;
	line-height: 1.2;
}

h1 { font-size: 42px; color: var(--cc-blue-dark); margin: 0 0 10px 0; }
h2 { font-size: 32px; color: var(--cc-blue-light); }
h3 { font-size: 32px; color: var(--cc-blue-dark); }
h4 { font-size: 22px; color: var(--cc-blue-light); margin-top: 10px; }
h5 { font-size: 22px; color: var(--cc-blue-dark);  margin-top: 10px; }
h6 { font-size: 18px; color: var(--cc-blue-light); margin: 0; }

a { color: var(--cc-blue-light); text-decoration: none; transition: color .1s ease-in-out; }
a:visited { color: var(--cc-blue-light); }
a:hover, a:active, a:focus { color: #999; text-decoration: none; }

hr {
	border: none;
	border-top: 1px dotted #ccc;
	height: 1px;
	margin: 20px 0;
}

/* ====================== HEADER ====================== */
.site-header {
	background: rgba(255,255,255,0.95);
	border-bottom: 1px solid #fff;
	box-shadow: 0 1px 7px rgba(0,0,0,0.2);
	transition: all 0.5s ease;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
	min-height: 99px;
}

.site-header:hover {
	background-color: #fff;
	box-shadow: 0 1px 32px rgba(0,0,0,0.4);
}

/* Logo */
.header-image img,
.site-logo img {
	max-height: 86px;
	max-width: 100%;
	width: auto;
	height: auto;
}
/* .site-logo is a flex item in .inside-header, which by default won't
   shrink below its content's natural size — min-width:0 lets it actually
   respect max-width:100% instead of forcing the header to overflow.
   The <a> wrapping the logo is inline by default and shrink-wraps to the
   image regardless of any max-width on the image, so it needs its own
   block display + max-width to pass the constraint down correctly. */
.site-logo {
	min-width: 0;
}
.site-logo a {
	display: block;
	max-width: 100%;
}

/* ====================== NAVIGATION ====================== */
.main-navigation a {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: var(--cc-nav-link);
	padding: 7px 5px;
	white-space: nowrap;
	transition: color 0.4s;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
	color: #069;
	background: #eee;
}

.main-navigation .sub-menu {
	background-color: #eee;
	min-width: 200px;
}

.main-navigation .sub-menu a {
	color: #069;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	display: block;
}

.main-navigation .sub-menu a:hover {
	background: #dfdfdf;
}

/* Members Only nav item — highlight */
.main-navigation .members-only-menu-item > a {
	color: var(--cc-blue-dark);
	font-weight: bold;
}

/* ====================== CONTENT AREA ====================== */
.separate-containers .site-main {
	margin: 0;
}

.content-area,
.site-main {
	background-color: var(--cc-content-bg);
	max-width: 1024px;
	margin: 30px auto;
	box-shadow: 0 1px 32px rgba(0,0,0,0.1);
}

/* Push content below fixed header */
.site-content {
	padding-top: 110px;
}

/* Pages with no banner have nothing else pushing content below the fixed
   mobile header — without this the title sits under/behind the logo.
   Banner pages are handled separately below (banner's own margin-top
   already clears the header). */
@media (max-width: 768px) {
	body:not(.has-page-banner):not(.home) .site-content {
		padding-top: 128px;
	}
}

/* ====================== BUTTONS ====================== */
.wp-block-button__link,
a.button,
button.button,
input[type="submit"] {
	background-color: var(--cc-blue-light);
	color: #fff;
	border-radius: 5px;
	font-size: 16px;
	padding: 9px 16px;
	text-shadow: 0 1px 0 rgba(0,0,0,0.3);
	border: none;
	cursor: pointer;
	transition: background-color 0.2s;
}

.wp-block-button__link:hover,
a.button:hover,
button.button:hover,
input[type="submit"]:hover {
	background-color: var(--cc-link-hover);
	color: #fff;
}

/* ====================== FOOTER ====================== */

/* Hide default GP footer */
.site-footer { display: none; }

.cc-footer {
	background-color: var(--cc-blue-mid);
	color: #fff;
	font-size: 16px;
	line-height: 1.6;
	padding: 40px 0;
}

.cc-footer-inner {
	max-width: 1024px;
	margin: 0 auto;
	padding: 0 30px;
	display: flex;
	gap: 60px;
}

.cc-footer-col {
	flex: 1;
}

.cc-footer-logo-col {
	display: flex;
	align-items: center;
}

.cc-footer-logo {
	/* Match the header logo's sizing (max-height, not max-width) so it
	   renders at the same size as the top logo instead of being scaled
	   down to fit an arbitrary width cap. */
	max-height: 86px;
	max-width: 100%;
	width: auto;
	height: auto;
}

.cc-footer h2.white,
.cc-footer .cursive {
	color: #fff !important;
	margin-bottom: 16px;
	font-size: 26px;
}

.cc-footer a,
.cc-footer a:visited {
	color: var(--cc-footer-link);
	text-decoration: none;
}

.cc-footer a:hover { color: #fff; }

.cc-quotes-wrap {
	background: url('images/quotes-big.png') top left no-repeat;
	min-height: 100px;
	padding-left: 60px;
	padding-top: 10px;
}

#cc-quotes > div {
	font-size: 15px;
	font-style: italic;
	color: #dde9f5;
}

.cc-footer-bar {
	background-color: var(--cc-blue-footer);
	color: var(--cc-footer-link);
	font-size: 12px;
	line-height: 1;
	padding: 6px 0;
}

.cc-footer-bar .cc-footer-inner { display: block; }

.cc-footer-bar p { margin: 0; }

.cc-footer-bar a,
.cc-footer-bar a:visited { color: var(--cc-footer-link); }
.cc-footer-bar a:hover { color: #fff; }

/* ====================== PAGE BANNER (interior pages) ====================== */
.cc-page-banner {
	width: 100%;
	max-width: 1024px;
	margin: 160px auto 0;
	line-height: 0;
}

.cc-page-banner img {
	width: 100%;
	height: auto;
	display: block;
}

/* These banner images are cropped/composed for wide desktop viewing —
   scaled by width alone on mobile they become a very thin sliver. Give the
   banner a fixed, reasonable height on mobile and crop to fit instead. */
@media (max-width: 768px) {
	.cc-page-banner {
		height: 200px;
		overflow: hidden;
		/* was 160px, tuned for the original taller mobile header (~186px);
		   the header fix earlier brought it down to ~111px, leaving a gap */
		margin-top: 120px;
	}
	.cc-page-banner img {
		/* the PHP that outputs this img hardcodes style="height:auto" inline
		   — !important is needed here to actually override it */
		height: 100% !important;
		object-fit: cover;
		object-position: center;
	}

	/* .content-area/.site-main normally has margin:30px auto, leaving a gap
	   between the banner and the white content box where the body's
	   background texture shows through. Close it on banner pages. */
	body.has-page-banner .content-area,
	body.has-page-banner .site-main {
		margin-top: 0;
	}

	/* Same gap, same fix, for the front-page hero slider. */
	body.home .content-area,
	body.home .site-main {
		margin-top: 0;
	}

	/* Same background-texture gap shows below the content box too, just
	   above the footer. Looks intentional on desktop, unwanted on mobile. */
	.content-area,
	.site-main {
		margin-bottom: 0;
	}
}

/* Reduce the site-content top padding when a page banner is present */
body.has-page-banner .site-content {
	padding-top: 8px;
}

/* ====================== BANNER / SLIDER ====================== */
.metaslider .flexslider,
.metaslider .nivoSlider,
#banner {
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	max-height: 640px;
	overflow: hidden;
}

.metaslider img {
	width: 100%;
	height: auto;
}

/* ====================== MEMBERS AREA ====================== */
.members-content {
	background: #f9f9f9;
	border-left: 4px solid var(--cc-blue-light);
	padding: 15px 20px;
	margin: 20px 0;
}

/* ====================== BOXES / LAYOUT ====================== */
.box-1-2 {
	display: inline-block;
	float: left;
	width: 47.5%;
	margin: 10px 1%;
	padding: 10px;
}

.box-1-3 {
	display: inline-block;
	float: left;
	width: 31%;
	margin: 10px 1%;
	padding: 10px;
}

.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0; }

/* ====================== TABLES ====================== */
table { width: 100%; }

.fancy th {
	background-color: #006699;
	color: #fff;
	font-weight: 700;
	padding: 0.65em 0.75em;
	white-space: nowrap;
}

.fancy tr:nth-child(odd)  { background-color: #f1f1f1; }
.fancy tr:nth-child(even) { background-color: #fafafa; }
.fancy tbody tr { border-bottom: 1px dotted #ccc; }
.fancy tbody tr:hover { background: rgba(235,245,251,0.8); }

/* ====================== FRONT PAGE SPECIFIC ====================== */

/* Hide page title on front page */
.home .entry-header,
.home .page-title {
	display: none;
}

/* ====================== METASLIDER ====================== */

/* Hide prev/next arrows */
.metaslider .flex-direction-nav,
.metaslider .flexslider .flex-direction-nav {
	display: none !important;
}

/* Slider sits directly below fixed header, full viewport width */
.home-fullwidth-slider {
	margin-top: 99px;
	width: 100%;
	line-height: 0;
	height: 420px;
	overflow: hidden;
	position: relative;
}

.home-fullwidth-slider .metaslider-wrap,
.home-fullwidth-slider .metaslider,
.home-fullwidth-slider .flexslider,
.home-fullwidth-slider .nivoSlider {
	width: 100% !important;
	max-width: 100% !important;
	height: 420px !important;
	overflow: hidden !important;
	position: relative !important;
}

.home-fullwidth-slider ul,
.home-fullwidth-slider li {
	height: 420px !important;
	overflow: hidden !important;
}

/* Image fills the 420px window and crops to fit — these images are sized for
   wide desktop banners, so on narrow viewports width:100%/height:auto leaves
   large gaps above/below; object-fit:cover fills the box instead. */
.home-fullwidth-slider img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	position: relative !important;
	top: 0 !important;
	transform: none !important;
}

/* Front page: normal site-content padding (no extra push needed) */
.home .site-content {
	padding-top: 0;
}

/* Content card sits below slider with grey gap visible */
.home .inside-article {
	padding: 15px 30px 30px 30px !important;
}

/* Remove the translateX slider trick — slider is now outside the card */
.home .entry-content > div[id^="metaslider"] {
	display: none;
}

/* Hide the entry-header gap */
.home .entry-header {
	display: none;
	margin: 0;
	padding: 0;
}

/* MetaSlider full width */
.metaslider-wrap,
.metaslider {
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
	visibility: visible !important;
}

.metaslider img {
	display: block !important;
}

/* ====================== GOOGLE EARTH BOX ====================== */
.google-earth-link {
	display: block;
	text-decoration: none;
	margin-top: 20px;
}

.google-earth-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #e8e8e8;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 14px 18px;
	max-width: 380px;
}

.google-earth-text {
	font-family: 'Gloria Hallelujah', cursive;
	font-size: 14px;
	color: #333;
	line-height: 1.4;
}

.google-earth-icon {
	width: 64px;
	height: auto;
	flex-shrink: 0;
	margin-left: 16px;
}

/* ====================== SIDEBAR ====================== */

/* Hide sidebar sitewide */
.widget-area,
#secondary {
	display: none;
}

/* Full width content when no sidebar */
.content-area {
	width: 100%;
	float: none;
}

/* ====================== MOBILE ====================== */
@media (max-width: 670px) {
	body { font-size: 12px; line-height: 1.3; }
	h1 { font-size: 28px; }
	h2, h3 { font-size: 22px; }
	h4, h5 { font-size: 18px; }
	h6 { font-size: 14px; }
	.site-content { padding-top: 50px; }
	.box-1-2, .box-1-3 { width: 98%; float: none; }
}

/* ====================== CONTACT FORM 7 ====================== */
/* Neither CF7's own CSS nor the theme constrains form field width at all —
   fields fall back to unpredictable browser-default sizing, and CF7's form
   template wraps the label text and its field together as one inline unit
   (<label> Your name [text* your-name] </label>), which some mobile
   browsers don't reliably break onto separate lines. Force both explicitly. */
.wpcf7-form label {
	display: block;
	width: 100%;
	box-sizing: border-box;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea,
.wpcf7-form select {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* ====================== PREMIUM-GRADE DOCUMENT LIBRARY OVERRIDES ====================== */
body ul.document-library-list {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}
body ul.document-library-list li {
    margin: 0;
    padding: 0;
    border-bottom: none;
    background: transparent;
    transition: background-color 0.15s ease-in-out;
}
body ul.document-library-list li::before {
    content: none !important;
    display: none !important;
}
body ul.document-library-list li:hover {
    background-color: #f8fafc;
}
body ul.document-library-list li a {
    display: flex;
    align-items: center;
    padding: 2px 6px;
    color: var(--cc-blue-dark);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    transition: color 0.15s ease-in-out;
}
body ul.document-library-list li a::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230099CC' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.2s ease;
}
body ul.document-library-list li a::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: auto;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.5;
    transition: all 0.2s ease;
}
body ul.document-library-list li a:hover {
    color: var(--cc-blue-light);
    text-decoration: none;
}
body ul.document-library-list li a:hover::before {
    transform: scale(1.08);
}
body ul.document-library-list li a:hover::after {
    opacity: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230099CC' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3'/%3E%3C/svg%3E");
    transform: translateY(1px);
}

/* ── Minutes Accordion ────────────────────────────────────── */
body .minutes-accordion {
    margin: 12px 0 20px 0;
}
body .minutes-accordion details.minutes-year {
    margin-bottom: 0;
}
body .minutes-accordion summary.minutes-year-title {
    font-family: "Gloria Hallelujah", cursive !important;
    font-size: 22px;
    color: var(--cc-blue-dark);
    padding: 10px 16px 10px 32px;
    cursor: pointer;
    list-style: none;
    position: relative;
    user-select: none;
    transition: background 0.15s, color 0.15s;
}
body .minutes-accordion summary.minutes-year-title::-webkit-details-marker { display: none; }
body .minutes-accordion summary.minutes-year-title::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2300457D' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.2s ease-in-out;
}
body .minutes-accordion details[open] summary.minutes-year-title {
    background: #f8fafc;
    color: var(--cc-blue-light);
}
body .minutes-accordion details[open] summary.minutes-year-title::before {
    transform: translateY(-50%) rotate(90deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230099CC' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5'/%3E%3C/svg%3E");
}
body .minutes-accordion summary.minutes-year-title:hover {
    background: #f8fafc;
    color: var(--cc-blue-light);
}
body .minutes-accordion summary.minutes-year-title:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230099CC' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5'/%3E%3C/svg%3E");
}
body .minutes-accordion details ul.document-library-list {
    padding: 2px 16px 6px 32px;
    margin: 0;
}
body .minutes-accordion details ul.document-library-list li {
    border-bottom: none;
}

/* ── Mobile Overrides ─────────────────────────────────────── */
@media (max-width: 670px) {
    body .minutes-accordion summary.minutes-year-title { font-size: 16px; padding: 8px 12px 8px 28px; }
    body .minutes-accordion summary.minutes-year-title::before { left: 8px; width: 12px; height: 12px; }
    body ul.document-library-list li a { font-size: 13px; padding: 2px 6px; }
    body ul.document-library-list li a::before { width: 16px; height: 16px; margin-right: 8px; }
    body ul.document-library-list li a::after { width: 14px; height: 14px; }
}

/* ── Events Calendar (WPBakery grid) ─────────────────────────── */
.cc-cal-year {
    font-family: "Gloria Hallelujah", cursive;
    font-size: 48px;
    text-align: center;
    color: var(--cc-blue-dark);
    margin-bottom: 6px;
}
.vc_row.cc-cal-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 10px !important;
}
.vc_row.cc-cal-row::before,
.vc_row.cc-cal-row::after {
    content: none !important;
}
.vc_row.cc-cal-row > .wpb_column {
    width: auto !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
    float: none !important;
}
@media (max-width: 782px) {
    .vc_row.cc-cal-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .vc_row.cc-cal-row { grid-template-columns: 1fr; }
}
.wpb_column.cc-cal-month {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 13px 15px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.wpb_column.cc-cal-month .vc_column-inner,
.wpb_column.cc-cal-month .wpb_wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.wpb_column.cc-cal-month.has-event {
    border-color: var(--cc-blue-light);
}
.wpb_column.cc-cal-month:hover {
    box-shadow: 0 4px 16px rgba(0, 69, 125, 0.1);
}
.cc-cal-month-name {
    font-family: "Gloria Hallelujah", cursive;
    font-size: 26px;
    color: var(--cc-blue-dark);
    margin-bottom: 12px;
}
.cc-cal-empty {
    font-size: 13px;
    color: #94a3b8;
    font-style: italic;
    padding: 6px 0 2px;
}
.cc-cal-event {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cc-cal-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    background: var(--cc-blue-light);
    border-radius: 10px;
    flex-shrink: 0;
    color: #fff;
}
.cc-cal-day {
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}
.cc-cal-dow {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}
.cc-cal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--cc-blue-dark);
    margin-bottom: 2px;
    line-height: 1.3;
}
.cc-cal-time {
    font-size: 13px;
    color: #64748b;
}
.cc-cal-note {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}
@media (max-width: 670px) {
    .cc-cal-year { font-size: 36px; }
    .cc-cal-month-name { font-size: 21px; }
    .wpb_column.cc-cal-month { padding: 14px 16px; }
}

/* ====================== MOBILE HEADER / NAV ====================== */
@media (max-width: 768px) {
	/* The logo fills the entire available row width, leaving no room for the
	   toggle beside it, so it wraps onto its own row and inflates the fixed
	   header's height. Take the toggle wrapper out of flex flow and position
	   it precisely instead. (#site-navigation, the separate dropdown list
	   element, keeps its own flex-basis:100% — that's fine, it's 0-height
	   until opened and isn't what's pushing the header taller.) */
	.inside-header { position: relative; }
	#mobile-menu-control-wrapper {
		flex-basis: auto !important;
		width: auto !important;
		position: absolute !important;
		top: 12px;
		right: 18px;
	}
	.main-navigation .menu-toggle {
		padding: 6px !important;
		height: auto !important;
		width: auto !important;
		line-height: 1 !important;
		margin-top: 10px;
	}

	/* Nav links inherit a 60px line-height meant for the desktop horizontal
	   bar; in the vertical mobile dropdown that makes every item far taller
	   than its padding alone suggests. */
	.main-navigation .main-nav > ul > li > a,
	.main-navigation .sub-menu a {
		line-height: 1.4 !important;
		padding: 10px 20px !important;
	}
}

/* ====================== AMENITIES LOGOS (mobile 2-col) ====================== */
/* WPBakery's vc_col-sm-3 columns stack to a single full-width column below
   768px by default — force 2 across and center each logo instead. */
@media (max-width: 768px) {
	.vc_row.cc-amenity-logos .wpb_column {
		width: 50% !important;
		float: left !important;
	}
	.vc_row.cc-amenity-logos .wpb_column .vc_column-inner {
		text-align: center;
	}
	.vc_row.cc-amenity-logos .wpb_column img {
		display: inline-block;
		max-width: 80%;
		height: auto;
	}
}

/* ====================== PHOTO GALLERY (mobile 2-col) ====================== */
/* vc_gallery renders each thumbnail as a fixed 220x165px <img> floated left
   (no percentage-based column CSS at all) — on a narrow phone only one
   220px image fits per row before wrapping. Shrink each item to ~48% width
   so two fit per row regardless of viewport width. */
@media (max-width: 768px) {
	.wpb_image_grid_ul .isotope-item {
		width: 48% !important;
		margin: 0 1% 2% 1% !important;
		float: left;
	}
	.wpb_image_grid_ul .isotope-item img {
		width: 100% !important;
		height: auto !important;
	}
}

/* ====================== FOOTER (mobile centering) ====================== */
@media (max-width: 768px) {
	/* .cc-footer-inner is a flex row (empty col + address col) — switch to
	   block so text-align actually centers the address text instead of
	   just centering it within its half-width flex column. */
	.cc-footer .cc-footer-inner {
		display: block;
		text-align: center;
	}
	.cc-footer-bar .cc-footer-inner {
		text-align: center;
	}

	/* Logo column stays hidden on mobile, same as when this column was empty. */
	.cc-footer-logo-col {
		display: none;
	}
}