/* FCF Native Chrome - styling that matches the live Elementor render. */

/* Phase 1 coexistence: hide Elementor Theme Builder chrome while flag is ON. */
body.fcf-native-chrome [data-elementor-type="header"],
body.fcf-native-chrome [data-elementor-type="footer"] {
	display: none !important;
	visibility: hidden !important;
}

:root {
	--fcf-ocean:       #1064A3;
	--fcf-ocean-dark:  #0d4f80;
	--fcf-cream:       #faf6ec;
	--fcf-cream-soft:  #fbfaf3;
	--fcf-cream-warm:  #f3ead4;
	--fcf-gold:        #c19a39;
	--fcf-gold-dark:   #a07e26;
	--fcf-navy:        #1e2a32;
	--fcf-navy-soft:   #1e2a32;
	--fcf-navy-border: #33444f;
	--fcf-text:        #1a1a1a;
	--fcf-muted:       #677084;
	--fcf-link-hover:  #7CD2E5;
	--fcf-border:      #d9d3c1;
}

/* === scoped reset === */
.fcf-chrome-header, .fcf-chrome-header *,
.fcf-chrome-footer, .fcf-chrome-footer * { box-sizing: border-box; }
.fcf-chrome-header a, .fcf-chrome-footer a { text-decoration: none; }
.fcf-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ============================================================
   HEADER
   ============================================================ */
.fcf-chrome-header {
	background: var(--fcf-cream);
	color: var(--fcf-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* --- TOP BAR (dark navy) ---
   Rest colour = #FEF9F0 (the --fcf-cream from class-fcf-assets.php — matches
   the prod .fcf-topbar-item rule). Hover = #7CD2E5 (light cyan, same as the
   footer link rest, per design pass 2026-06-11).
   These are scoped to the topbar only — they MUST NOT bleed into the cream
   main bar / nav / Browse Rentals CTA below.
   !important + specificity carrier (.fcf-topbar .fcf-topbar-item is 2 classes
   + 1 element + 1 attribute via :link/:visited variants = enough to beat the
   global `a,a:link,a:visited{color:var(--fcf-ocean)!important}` rule in
   class-fcf-assets.php — global specificity is (0,0,1) with !important;
   mine is (0,2,1) with !important so mine wins). */
.fcf-topbar {
	background: var(--fcf-navy);
	color: #FEF9F0;
	font-size: 13px;
}
.fcf-topbar-inner {
	display: flex; justify-content: space-between; align-items: center;
	gap: 18px; padding: 9px 24px; min-height: 38px;
}
.fcf-topbar-left, .fcf-topbar-right { display: flex; gap: 22px; align-items: center; }
.fcf-topbar-item {
	display: inline-flex; align-items: center; gap: 6px;
	color: #FEF9F0; line-height: 1; font-weight: 500;
	text-decoration: none;
}
.fcf-topbar .fcf-topbar-item,
.fcf-topbar .fcf-topbar-item:link,
.fcf-topbar .fcf-topbar-item:visited,
.fcf-topbar .fcf-topbar-item a,
.fcf-topbar .fcf-topbar-item a:link,
.fcf-topbar .fcf-topbar-item a:visited {
	color: #FEF9F0 !important;
}
.fcf-topbar .fcf-topbar-item:hover,
.fcf-topbar .fcf-topbar-item:focus,
.fcf-topbar .fcf-topbar-item a:hover,
.fcf-topbar .fcf-topbar-item a:focus {
	color: #7CD2E5 !important;
}
.fcf-topbar-item svg { opacity: .85; flex-shrink: 0; }

/* --- MAIN BAR (cream): logo | phone-block | CTA --- */
.fcf-mainbar { background: var(--fcf-cream); }
.fcf-mainbar-inner {
	display: flex; align-items: center; gap: 24px;
	padding: 22px 24px; min-height: 110px;
}
.fcf-logo { flex: 0 0 auto; display: flex; align-items: center; }
.fcf-logo img { max-height: 72px; width: auto; display: block; }
.fcf-logo-text {
	font-size: 22px; font-weight: 800; color: var(--fcf-ocean);
}
.fcf-headphone {
	margin-left: auto; text-align: right; line-height: 1.1;
}
.fcf-headphone-eyebrow {
	font-size: 11px; letter-spacing: 1.3px; color: var(--fcf-muted);
	font-weight: 600; text-transform: uppercase;
	margin-bottom: 4px;
}
.fcf-headphone-num {
	display: inline-block;
	color: var(--fcf-ocean); font-size: 30px; font-weight: 700;
	letter-spacing: .3px;
}
.fcf-headphone-num:hover { color: var(--fcf-ocean-dark); }
/* Browse Rentals — bg/hover/padding/radius/font/shadow lifted VERBATIM from
   the original .fcf-hdr-cta-btn rule in the prod CSS bundle (2026-06-11).
   bg=#E89B2C / hover=#C97E14 (matches --fcf-accent / --fcf-accent-hover).
   Literal hex used (not the --fcf-gold var, which was the source of the
   muddy mismatch). */
.fcf-headcta {
	flex: 0 0 auto;
	background: #E89B2C; color: #fff !important;
	padding: 12px 22px; border-radius: 6px;
	font-weight: 700; font-size: 15px;
	text-decoration: none !important;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgb(0 0 0 / .12);
	transition: background .15s;
}
.fcf-headcta:hover { background: #C97E14; color: #fff !important; }

/* --- NAV BAR (cream, edge-to-edge) ---
   Layout lifted from the prod .dt-nav-menu-horizontal rules:
     ul min-height: 60px
     a font-size: 16px (--the7-text-big-font-size)
     a line-height: 1.5em (--the7-text-big-line-height)
   Items distributed across the full container width via justify-content:
   space-between (the original Elementor section spreads its widgets edge to
   edge inside its 1240px container). Contact dropdown structure preserved. */
.fcf-navbar {
	background: var(--fcf-cream);
	border-top: 1px solid var(--fcf-border);
}
.fcf-navbar-inner {
	display: flex; align-items: stretch;
	padding: 0 24px;
	min-height: 60px;
}
.fcf-nav { display: flex; width: 100%; }
.fcf-nav-list {
	display: flex; list-style: none; margin: 0; padding: 0;
	width: 100%;
	justify-content: space-between;
	align-items: stretch;
}
.fcf-nav-list > li { position: relative; display: flex; align-items: center; }
.fcf-nav-list > li > a {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 18px 8px;
	color: var(--fcf-ocean);
	font-size: 16px; line-height: 1.5em; font-weight: 600;
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.fcf-nav-list > li > a:hover { background: rgba(16,100,163,0.08); color: var(--fcf-ocean-dark); }
.fcf-nav-caret { font-size: 10px; opacity: .8; }

/* Hover dropdown under Contact (and any other parent) */
.fcf-nav-sub {
	list-style: none; padding: 6px 0; margin: 0;
	position: absolute; top: 100%; right: 0;
	min-width: 260px;
	background: #fff;
	border: 1px solid var(--fcf-border);
	border-top: 2px solid var(--fcf-ocean);
	box-shadow: 0 12px 24px rgba(0,0,0,0.08);
	opacity: 0; visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s, transform .15s, visibility 0s linear .15s;
	z-index: 100;
}
.fcf-nav-has-sub:hover > .fcf-nav-sub,
.fcf-nav-has-sub:focus-within > .fcf-nav-sub {
	opacity: 1; visibility: visible;
	transform: translateY(0);
	transition: opacity .15s, transform .15s;
}
.fcf-nav-sub a {
	display: block; padding: 8px 18px;
	font-size: 14px; font-weight: 500;
}
.fcf-nav-sub a:hover { background: var(--fcf-cream-soft); }

/* --- MOBILE BAR + DRAWER --- */
.fcf-mobilebar { display: none; background: var(--fcf-cream); border-bottom: 1px solid var(--fcf-border); }
.fcf-mobilebar-inner {
	display: flex; justify-content: space-between; align-items: center;
	gap: 16px; padding: 10px 16px; min-height: 56px;
}
.fcf-mobile-logo img { max-height: 40px; width: auto; display: block; }
.fcf-mobile-actions { display: flex; align-items: center; gap: 14px; }
.fcf-mobile-phone {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--fcf-ocean); color: #fff;
}
.fcf-mobile-phone:hover { background: var(--fcf-ocean-dark); color: #fff; }
.fcf-mobile-toggle {
	background: transparent; border: 0; padding: 8px;
	display: flex; flex-direction: column; gap: 5px; cursor: pointer;
	width: 40px; height: 40px;
}
.fcf-burger {
	display: block; width: 26px; height: 3px;
	background: var(--fcf-ocean); border-radius: 2px;
	transition: transform .25s, opacity .15s;
}
.fcf-mobile-toggle[aria-expanded="true"] .fcf-burger:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.fcf-mobile-toggle[aria-expanded="true"] .fcf-burger:nth-child(2) { opacity: 0; }
.fcf-mobile-toggle[aria-expanded="true"] .fcf-burger:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.fcf-mobile-drawer {
	position: fixed; top: 0; right: 0; bottom: 0;
	width: 85%; max-width: 360px; background: var(--fcf-cream);
	z-index: 9999; transform: translateX(100%); transition: transform .3s ease;
	overflow-y: auto; box-shadow: -4px 0 24px rgba(0,0,0,0.15);
}
.fcf-mobile-drawer.is-open { transform: translateX(0); }
.fcf-mobile-drawer-inner { padding: 60px 24px 24px; }
.fcf-mobile-close {
	position: absolute; top: 12px; right: 16px;
	background: transparent; border: 0; font-size: 32px;
	color: var(--fcf-text); cursor: pointer; line-height: 1;
	width: 40px; height: 40px;
}
.fcf-mobile-drawer .fcf-nav-list {
	flex-direction: column; gap: 2px;
}
.fcf-mobile-drawer .fcf-nav-list > li > a {
	display: block; padding: 12px 0; font-size: 16px;
	border-bottom: 1px solid rgba(0,0,0,0.06);
}
.fcf-mobile-drawer .fcf-nav-sub {
	position: static; opacity: 1; visibility: visible;
	transform: none; box-shadow: none; border: 0;
	background: transparent;
	padding: 4px 0 8px 16px;
	margin: -4px 0 0;
}
.fcf-mobile-drawer .fcf-nav-sub a {
	padding: 8px 0; font-size: 14px;
	border-bottom: 1px dotted rgba(0,0,0,0.06);
}
.fcf-mobile-drawer-foot {
	margin-top: 24px; padding-top: 18px;
	border-top: 1px solid var(--fcf-border);
}
.fcf-mobile-drawer-phone {
	display: block; font-size: 22px; font-weight: 700;
	color: var(--fcf-ocean); margin-bottom: 8px;
}
.fcf-mobile-drawer-addr { font-size: 13px; color: var(--fcf-muted); line-height: 1.5; }
.fcf-mobile-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,0.4);
	z-index: 9998; opacity: 0; pointer-events: none;
	transition: opacity .25s;
}
.fcf-mobile-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ============================================================
   FOOTER
   ============================================================ */
.fcf-chrome-footer {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	color: #e8ecf2;
	margin-top: 40px;
}

/* Footer bg pinned to the literal hex — `--fcf-navy` is also declared by
   the homepage css with a different value (#1C2E40 for SATG board text), so
   relying on the CSS var risks a cascade collision when LiteSpeed combines
   the bundles. Hex matches the original .fcf-footer { background: #1e2a32 }
   rule in fcf-lodgix-native/assets/css/homepage.css. */
.fcf-foot-main { background: #1e2a32; padding: 50px 0 40px; }

/* Dark-footer link colours — REST = light cyan, HOVER = ocean blue.
   Literal hex (not vars) because both must beat the global
   `a,a:link,a:visited{color:var(--fcf-ocean)!important}` +
   `a:hover,a:focus{color:var(--fcf-navy)!important}` rules from
   class-fcf-assets.php (Brief 5.p pattern, ported into chrome).
   `:link` + `:visited` repeated because the global uses both — without
   those specifiers, an unvisited link still inherits the global ocean colour.
   Carve-outs: .fcf-foot-owner-cta (gold button), [data-satg-link] (cream
   board), .fcf-hp-card (white property card on dark strip). */
.fcf-foot-main a:not(.fcf-foot-owner-cta):not([data-satg-link]),
.fcf-foot-main a:not(.fcf-foot-owner-cta):not([data-satg-link]):link,
.fcf-foot-main a:not(.fcf-foot-owner-cta):not([data-satg-link]):visited {
	color: #7CD2E5 !important;
}
.fcf-foot-main a:not(.fcf-foot-owner-cta):not([data-satg-link]):hover,
.fcf-foot-main a:not(.fcf-foot-owner-cta):not([data-satg-link]):focus {
	color: #1064A3 !important;
}
.fcf-foot-bottom a:not(.fcf-hp-card),
.fcf-foot-bottom a:not(.fcf-hp-card):link,
.fcf-foot-bottom a:not(.fcf-hp-card):visited {
	color: #7CD2E5 !important;
}
.fcf-foot-bottom a:not(.fcf-hp-card):hover,
.fcf-foot-bottom a:not(.fcf-hp-card):focus {
	color: #1064A3 !important;
}

/* Property cards (white bg, dark text) — keep their existing colour scheme
   regardless of any inherited cyan/ocean link colour. */
.fcf-hp-card,
.fcf-hp-card:link,
.fcf-hp-card:visited,
.fcf-hp-card:hover,
.fcf-hp-card:focus,
.fcf-foot-bottom .fcf-hp-card { color: #1a1a1a !important; text-decoration: none; }
.fcf-hp-card .fcf-hp-card-title { color: #1a1a1a; }
.fcf-hp-card .fcf-hp-card-loc   { color: #666; }
.fcf-hp-card .fcf-hp-card-rate  { color: #E89B2C; }

.fcf-foot-cols {
	display: grid; grid-template-columns: 1.2fr 1.2fr 1fr 1.1fr;
	gap: 36px;
	align-items: start;
}
.fcf-foot-col { font-size: 14px; line-height: 1.6; }

/* --- Col 1: about block ---
   Logo sized to match the rendered prod size (300x96), per visual measurement
   2026-06-11 (the homepage.css 180px rule was too tight in practice). */
.fcf-foot-logo { display: block; margin-bottom: 18px; }
.fcf-foot-logo img {
	max-width: 300px; height: auto; display: block;
}
.fcf-foot-tagline {
	font-size: 14px; color: #cdd5e0; font-style: italic;
	line-height: 1.5; margin-bottom: 14px;
}
.fcf-foot-address { font-style: normal; color: #cdd5e0; margin-bottom: 10px; }
.fcf-foot-address div { margin-bottom: 2px; }
.fcf-foot-hours { color: #aab5c5; font-size: 13px; margin-bottom: 14px; }
.fcf-foot-social a { display: inline-block; font-weight: 600; }

/* --- Col 2: owner CTA --- */
.fcf-foot-owner-heading {
	color: #fff; font-size: 19px; font-weight: 700;
	margin: 0 0 12px;
}
.fcf-foot-owner-blurb {
	color: #cdd5e0; font-size: 14px; line-height: 1.5;
	margin: 0 0 16px;
}
/* Owner-CTA button — bg + hover + radius + padding lifted verbatim from the
   original .fcf-ft-cta rule in homepage.css:94.
   bg     = var(--fcf-accent)       = #E89B2C (defined in class-fcf-assets.php:33)
   hover  = var(--fcf-accent-hover) = #C97E14
   radius = 6px, padding = 12px 22px, font-weight 600
   Literal hex used (not the var) — --fcf-gold was the source of the mismatch. */
.fcf-foot-owner-cta {
	display: inline-block;
	background: #E89B2C; color: #fff !important;
	padding: 12px 22px; border-radius: 6px;
	font-weight: 600; line-height: 1.3;
	text-decoration: none !important;
	margin-bottom: 14px; transition: background .15s;
}
.fcf-foot-owner-cta:hover { background: #C97E14; color: #fff !important; }
.fcf-foot-owner-or { color: #cdd5e0; font-size: 13px; line-height: 1.5; }

/* --- Col 3: site nav + WE SERVE --- */
.fcf-foot-nav {
	list-style: none; padding: 0; margin: 0 0 18px;
	display: grid; grid-template-columns: 1fr; gap: 4px;
}
.fcf-foot-nav a { display: block; padding: 2px 0; }
.fcf-foot-serve-head {
	color: #fff; font-size: 13px; font-weight: 700;
	letter-spacing: 1.2px; text-transform: uppercase;
	margin: 18px 0 8px;
}
.fcf-foot-areas {
	list-style: none; padding: 0; margin: 0;
	display: grid; grid-template-columns: 1fr; gap: 4px;
}
.fcf-foot-areas a { display: block; padding: 1px 0; font-size: 13px; }

/* --- Col 4: SATG Guide character with cream board overlay ---
   Single tall PNG (766x1455) of the character. The "Things to Do" board
   is absolutely positioned over the character's torso. Position percentages
   are calibrated to the image's cream-board region (y 28-82%, x 8-92%).
   Same recipe as the homepage [satg-guide] widget. */
.satg-footer-column { transition: transform .2s ease; }
.satg-footer-column:hover { transform: translateY(-2px); }
.satg-guide-frame {
	position: relative; width: 100%; max-width: 320px; margin: 0 auto;
}
.satg-guide-image { width: 100%; height: auto; display: block; }
.satg-board-content {
	position: absolute;
	top: 31%; left: 13%; right: 13%; bottom: 21%;
	display: flex; flex-direction: column; justify-content: space-between;
	padding: 2px 0;
	color: #1C2E40;
}
.satg-board-heading {
	font-weight: bold; font-size: 13px; text-transform: uppercase; letter-spacing: 1px;
	margin: 0 0 4px; text-align: center;
	border-bottom: 1px solid #1C2E40; padding-bottom: 4px;
}
.satg-board-links {
	list-style: none; padding: 0; margin: 0;
	flex: 1; display: flex; flex-direction: column; justify-content: space-evenly;
}
.satg-board-links li { margin: 0; line-height: 1.2; }
.satg-board-links a { color: #1C2E40; text-decoration: none; font-size: 13px; }
.satg-board-links a:hover { color: #FC822B; text-decoration: underline; }
.satg-board-cta { font-size: 13px; font-weight: bold; text-align: center; margin: 4px 0 0; }
.satg-board-cta a { color: #FC822B; text-decoration: none; }
.satg-board-cta a:hover { text-decoration: underline; }
@media (max-width: 768px) {
	.satg-guide-frame { max-width: 360px; }
	.satg-board-links a, .satg-board-cta { font-size: 15px; }
	.satg-board-heading { font-size: 14px; }
}

/* --- Bottom strip --- */
.fcf-foot-bottom {
	background: #1e2a32;
	padding: 32px 0 24px;
	border-top: 1px solid #33444f;
}
/* Featured properties — vertical white cards matching the original
   .fcf-hp-card / .fcf-hp-row recipe from homepage.css. Image on top
   (aspect 4/3), white body below with title (bold), area (muted),
   gold "from $X/night". Three across, 20px gap. */
.fcf-foot-featured { margin-bottom: 24px; }
.fcf-hp-row { display: grid; gap: 20px; }
.fcf-hp-row--3 { grid-template-columns: repeat(3, 1fr); }
.fcf-hp-card {
	display: block; text-decoration: none; color: inherit;
	background: #fff; border-radius: 10px; overflow: hidden;
	box-shadow: 0 1px 6px rgba(0,0,0,.08);
	transition: transform .15s, box-shadow .15s;
}
.fcf-hp-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.fcf-hp-card-imgwrap {
	position: relative; aspect-ratio: 4 / 3; overflow: hidden;
	background: #e8ebef;
}
.fcf-hp-card-img,
.fcf-hp-card-imgwrap img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.fcf-hp-card-noimg { width: 100%; height: 100%; background: #e8ebef; }
.fcf-hp-card-body { padding: 14px 16px; }
.fcf-hp-card-title {
	font-size: 1.05rem; font-weight: 600; margin: 0 0 4px;
	color: #1a1a1a; line-height: 1.25;
}
.fcf-hp-card-loc { font-size: .85rem; color: #666; margin-bottom: 6px; }
.fcf-hp-card-rate {
	font-size: .92rem; font-weight: 600;
	color: var(--fcf-gold);
}

.fcf-foot-correction {
	text-align: center; font-size: 13px; color: #aab5c5;
	padding: 12px 0 4px;
}
.fcf-foot-correction a { color: var(--fcf-link-hover); margin-left: 8px; font-weight: 600; }
.fcf-foot-correction a:hover { color: #fff; }

.fcf-foot-affiliate {
	text-align: center; font-size: 12px; color: #8e98ad;
	font-style: italic; line-height: 1.5;
	margin: 4px 0 14px; padding: 0 20px;
}

.fcf-foot-copyright {
	border-top: 1px solid rgba(255,255,255,0.08);
	padding-top: 14px;
	display: flex; justify-content: space-between; align-items: center;
	gap: 16px; color: #aab5c5; font-size: 13px;
}
.fcf-foot-legal { display: flex; gap: 8px; align-items: center; }
.fcf-foot-legal a { color: var(--fcf-link-hover); }
.fcf-foot-legal a:hover { color: #fff; }
.fcf-foot-legal .sep { color: #4a5570; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199px) and (min-width: 1024px) {
	.fcf-mainbar-inner { gap: 18px; }
	.fcf-headphone-num { font-size: 26px; }
	.fcf-nav-list a { padding: 13px 16px; }
}
@media (max-width: 1199px) and (min-width: 700px) {
	.fcf-foot-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 1023px) {
	.fcf-mainbar, .fcf-navbar { display: none; }
	.fcf-mobilebar { display: block; }
	.fcf-hp-row--3 { grid-template-columns: 1fr; gap: 22px; }
	.fcf-foot-copyright { flex-direction: column; text-align: center; }
}
@media (max-width: 699px) {
	.fcf-foot-cols { grid-template-columns: 1fr; gap: 24px; }
	.fcf-topbar-inner { flex-wrap: wrap; gap: 6px; padding: 8px 16px; }
	.fcf-topbar-left { font-size: 11.5px; }
}
@media (min-width: 1024px) {
	.fcf-mobilebar { display: none; }
}