/* West Creek Residences VR microsite (sekoya17 template). Ported from the live Elementor CSS (kit post-9, header 2655,
   page template 2675, footer 2661, menu popup 2616, form popups 6896/5653).
   Breakpoints follow the site's custom Elementor ones: mobile <= 575, tablet <= 1279, desktop >= 1280.
   Colours + fonts are the only brand-specific values: change the tokens below for a variant site. */

@font-face { font-family: 'CamptonBook'; src: url('../fonts/text.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: auto; }
@font-face { font-family: 'SekoyaDispNar'; src: url('../fonts/display.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: auto; }
@font-face { font-family: 'Actor'; src: url('../fonts/actor.woff2') format('woff2'); font-weight: 400; font-style: normal; }

:root {
  --primary: #021615;     /* Elementor global primary + text */
  --secondary: #04393F;
  --accent: #EFECE7;      /* header + page background */
  --light: #F7F7F7;
  --gold: #E0BD78;
  --f-text: 'CamptonBook', montserat;
  --f-display: 'SekoyaDispNar', montserat;
  --f-form: 'Actor', montserat;
  --nav-w: 4%;            /* desktop vertical sidebar width (Elementor column 4%) */
}

/* ---- Reset (Hello Elementor reset.css essentials) ---- */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #333; font-family: var(--f-text); font-size: 14px; font-weight: normal; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; background: transparent; }
img { border: 0; max-width: 100%; height: auto; vertical-align: middle; }
h1, h2, h3, h4 { margin: .5rem 0 1rem; font-weight: normal; line-height: 1.2; }
button, input, select, textarea { font-family: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Icon wrapper: replicates Elementor icon widget box (inline-block, line-height 1, svg 1em) ---- */
.ic-wrap { text-align: center; }
.ic { display: inline-block; line-height: 1; font-size: 30px; transition: transform .3s; cursor: pointer; }
.ic img, .ic svg { display: block; width: 1em; height: 1em; }
.ic:hover { transform: scale(.9); }   /* e-animation-shrink */

/* ---- Mobile/tablet header (hidden on desktop, where the sidebar takes over) ---- */
.m-header { position: relative; z-index: 99; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; padding: 10px; background: var(--accent); box-shadow: 0 -6px 27px -10px rgba(0, 0, 0, .5); }
.m-header .ic-wrap { text-align: end; }
.m-header .ghost img { opacity: 0; }           /* live left icon is transparent (#04393F00) until hover */
.m-header .ghost:hover img { opacity: 1; }
.m-logo img { width: 75px; }

/* ---- Desktop vertical sidebar ---- */
.v-nav { display: none; }

/* ---- Page body: the viewer fills 85vh, then the footer ---- */
.page { display: flex; min-height: 50vh; }
.content { flex: 1 0 100%; background: var(--accent); }
.viewer { display: block; width: 100%; height: 85vh; border: 0; background: var(--accent); }

/* ---- Footer ---- */
.foot-top { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 11vh; padding: 5px; background: var(--secondary); }
.foot-items { display: flex; flex-direction: row; justify-content: space-around; align-items: center; width: 100%; }
.ibox { display: flex; align-items: center; gap: 15px; width: 30%; max-width: 30%; text-align: start; }
.ibox .ibox-icon { flex-shrink: 0; display: inline-block; line-height: 1; font-size: 25px; padding: 5px; border: 1px solid var(--light); border-radius: 50%; color: var(--light); }
.ibox .ibox-icon img { display: block; width: 1em; height: 1em; }
.ibox-text { flex-grow: 1; }
.ibox-title { margin: 8px 0 -5px; font-family: var(--f-display); font-weight: 700; letter-spacing: .5px; font-size: 1.3em; line-height: 1.2; color: var(--light); }
.ibox-title a { color: inherit; }
.ibox-desc { margin: 0; font-family: var(--f-text); color: var(--light); }
.ibox.phone .ibox-title { font-family: var(--f-text); font-weight: normal; letter-spacing: normal; white-space: nowrap; }
.ibox.phone .ibox-desc { font-family: var(--f-display); font-weight: 700; letter-spacing: .5px; }
.foot-bottom { display: flex; flex-direction: row; justify-content: space-between; align-items: center; min-height: 4vh; padding: 10px; background: var(--primary); }
.foot-bottom > div { text-align: center; }
.foot-tagline span { font-size: .8em; color: var(--primary); }   /* same colour as its background on the live site */
.foot-copy { margin-right: 8vw; }
.foot-copy span { font-size: .8em; color: var(--light); }
.foot-credit { margin-right: 5vw; text-align: end !important; }
.foot-credit a { font-size: .6em; color: var(--light); }

/* ---- Popups (menu + forms) ---- */
.popup { position: fixed; inset: 0; display: none; }
.popup.is-open { display: flex; }
.popup-box { position: relative; }
.popup-close { position: absolute; top: 20px; right: 20px; z-index: 2; display: flex; padding: 0; border: 0; background: none; cursor: pointer; line-height: 1; }
.popup-close svg { width: 1em; height: 1em; fill: currentColor; }

/* Slide-out menu: 320px panel, slides in from the left (from the right on phones) */
.menu-pop { z-index: 10; justify-content: flex-start; align-items: center; }
.menu-pop .popup-box { margin: 0 0 0 3%; background: var(--light) var(--panel-bg) 0 0 repeat; box-shadow: 6px 0 31px -9px rgba(0, 0, 0, .2); animation: slideInLeft .8s both; }
.menu-pop.is-closing .popup-box { animation-name: slideOutLeft; }
.menu-pop .popup-msg { display: flex; align-items: flex-start; width: 320px; height: 100vh; padding: 0 6.4px; overflow-y: auto; }   /* scrolls when the menu is taller than the screen */
.menu-pop .popup-close { font-size: 14px; color: #ACACAC; }
.menu-inner { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; width: 100%; margin: auto 0; padding: 40px 15px; }   /* centred when it fits, top-aligned (logo first) when it does not */
.menu-logo { text-align: center; }
.menu-logo img { width: 50%; }
.menu-lists { display: flex; flex-direction: column; padding: 10px; }
.menu-lists h3 { margin: 0; font-family: var(--f-display); font-size: 28px; line-height: 1; text-align: center; color: var(--light); }
.divider { padding: 15px 0; }
.divider span { display: block; width: 60%; margin: 0 auto; border-top: 1px solid var(--light); }
.menu-list { margin: 0 0 80px; padding: 0; list-style: none; text-align: center; }
.menu-list li + li { margin-top: 7px; }
.menu-list a { font-family: var(--f-text); font-weight: bold; text-transform: uppercase; color: var(--light); transition: color .3s; }
.menu-list a:hover { color: var(--gold); }

@keyframes slideInLeft { from { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes slideOutLeft { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
@keyframes slideOutRight { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(100%, 0, 0); } }
@keyframes slideInRight { from { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }

/* Form popups (brochure + pricelist) */
.form-pop { z-index: 9999; justify-content: center; align-items: center; background: rgba(239, 236, 231, .76); }
.form-pop .popup-box { background: var(--secondary) var(--panel-bg) 0 0 repeat; box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2); max-height: 100vh; overflow-y: auto; }
.form-pop .popup-msg { width: 75vw; padding: calc(75vw * .03) calc(75vw * .05); }
.form-pop .popup-close { font-size: 15px; color: var(--light); }
.form-pop .popup-close:hover { color: var(--gold); }
.form-inner { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; max-width: 820px; margin: 0 auto; padding: 10px; }   /* 800px content + 10px Elementor container padding */
.form-logo { margin-bottom: 20px; text-align: center; }
.form-logo img { width: 135px; }
.form-inner h2 { margin: 0; font-family: var(--f-display); font-size: 1.8em; font-weight: 500; line-height: 1; text-transform: uppercase; text-align: center; color: var(--light); }
.form-inner .divider { padding: 2px 0; width: 100%; }
.form-inner .divider span { width: 20%; }
.form-inner h4 { width: 70%; margin: 0; padding-bottom: 25px; font-family: var(--f-display); font-size: 1.5em; line-height: 1; text-align: center; color: var(--light); }
.lead-form { width: 70%; }
.fields { display: flex; flex-wrap: wrap; margin: 0 -5px -10px; }
.field { width: 100%; padding: 0 5px; margin-bottom: 10px; }
.field.c50 { width: 50%; } .field.c40 { width: 40%; } .field.c20 { width: 20%; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field select { width: 100%; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 0; background: rgba(247, 247, 247, .84); color: var(--primary); font-family: var(--f-form); font-size: 10px; line-height: 1.2em; outline: 0; }
.field select { padding: 5px 20px 5px 14px; color: #5B5B53; -webkit-appearance: none; appearance: none; }
.field.spacer { font-family: var(--f-form); font-size: 10px; line-height: 1.2em; }
.field.consent { color: var(--light); }
.field.consent input { margin: 0 4px 0 0; vertical-align: middle; }
.field.consent label { font-family: var(--f-form); font-size: 10px; line-height: 1.2em; }
.field.note { padding-bottom: 0; color: var(--light); font-family: var(--f-form); font-size: 10px; font-weight: 200; line-height: 1.2em; }
.field.submit { text-align: center; }
.hp { display: none !important; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 33px; padding: 0 55px; border: 1px solid var(--gold); border-radius: 0; background: var(--gold); color: #fff; font-family: var(--f-form); font-size: 12px; line-height: 1em; text-transform: uppercase; cursor: pointer; }
.btn:hover { background: var(--secondary); color: var(--primary); }
.btn:disabled { opacity: .7; cursor: wait; }
.form-error { margin: 8px 0 0; color: var(--gold); font-family: var(--f-form); font-size: 11px; text-align: center; }

/* ---- Floor plan lightbox (Elementor lightbox look) ---- */
.lb { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; background: var(--primary); color: var(--accent); }
.lb.is-open { display: flex; }
.lb img { max-width: 85vw; max-height: calc(100vh - 140px); width: auto; height: auto; }
.lb-count { position: absolute; top: 15px; left: 20px; font-size: 15px; line-height: 23px; }
.lb-close, .lb-nav { position: absolute; border: 0; background: none; color: var(--accent); cursor: pointer; padding: 0; }
.lb-close { z-index: 2; top: 13px; right: 15px; width: 30px; height: 30px; font-size: 20px; }
.lb-nav { top: 0; width: 15%; height: 100%; font-size: 25px; display: flex; align-items: center; justify-content: center; }
.lb-nav:hover, .lb-close:hover { color: var(--gold); }
.lb-nav[hidden] { display: none; }
.lb-prev { left: 0; } .lb-next { right: 0; }
.lb svg { width: 1em; height: 1em; fill: currentColor; }
/* Floor plan type tabs (built by main.js): above the side arrows, scroll sideways on narrow screens */
.lb-tabs { position: absolute; z-index: 2; left: 50%; bottom: 15px; transform: translateX(-50%); display: flex; gap: 6px; max-width: calc(100vw - 30px); overflow-x: auto; scrollbar-width: none; }
.lb-tabs::-webkit-scrollbar { display: none; }
.lb-tabs button { flex-shrink: 0; padding: 8px 14px; border: 1px solid rgba(239, 236, 231, .35); border-radius: 20px; background: none; color: var(--accent); font: inherit; font-size: 14px; line-height: 1; white-space: nowrap; cursor: pointer; }
.lb-tabs button:hover { color: var(--gold); border-color: var(--gold); }
.lb-tabs button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--primary); }
.lb-tabs button[hidden], .lb-tabs[hidden] { display: none; }

/* ---- Message pages (thank-you / download) + privacy ---- */
.message { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 85vh; padding: 40px 20px; text-align: center; color: var(--primary); }
.message .lottie { width: 150px; height: 150px; }
.message h1 { margin: 0 0 10px; font-family: var(--f-display); font-size: 2em; line-height: 1.2; }
.message p { margin: 0; }
.legal { max-width: 1140px; margin: 0 auto; padding: 40px 20px; min-height: 85vh; color: #333; }
.legal h1, .legal h2, .legal h3 { font-family: var(--f-display); color: var(--primary); }
.legal a { color: var(--secondary); text-decoration: underline; }

/* ---- Desktop (>= 1280): fixed 4% sidebar, header hidden ---- */
@media (min-width: 1280px) {
  .m-header { display: none; }
  .v-nav { position: fixed; top: 0; left: 0; z-index: 11; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; width: var(--nav-w); height: 100vh; padding: 30px 0; overflow: hidden; background: var(--accent); }
  .v-nav .home { font-size: 4vw; }
  .v-nav .menu { font-size: 35px; }
  .v-nav .caret { font-size: 25px; cursor: default; }
  .page { min-height: 85vh; }
  .content { flex-basis: auto; margin-left: var(--nav-w); width: calc(100% - var(--nav-w)); }
  /* Deliberate fix: the live footer is 100% wide PLUS a 4% left margin, overflowing the page by 4%. */
  .site-foot { margin-left: var(--nav-w); }
  .foot-items { width: 50%; }
}

/* ---- Tablet + mobile (<= 1279) ---- */
@media (max-width: 1279px) {
  .menu-pop .popup-box { margin: 0; }
  .menu-pop .popup-msg { padding: 0; }
  .form-pop .popup-msg { width: 95vw; padding: calc(95vw * .03) calc(95vw * .05); }
  .foot-bottom { flex-direction: column; padding: 0; }
  .foot-tagline { display: none; }
  .foot-copy, .foot-credit { margin: 0; text-align: center !important; }
}

/* ---- Mobile (<= 575) ---- */
@media (max-width: 575px) {
  .menu-pop { align-items: flex-start; }
  .menu-pop .popup-box { animation-name: slideInRight; }
  .menu-pop.is-closing .popup-box { animation-name: slideOutRight; }
  .menu-pop .popup-msg { width: 100vw; height: 100vh; padding: 0 28px; }
  .menu-pop .popup-close { font-size: 21px; }
  .menu-inner { padding: 120px 20px 80px; }
  .menu-logo img { width: 120px; }
  .form-logo img { width: 120px; }
  .form-inner h4 { width: 100%; }
  .lead-form { width: 100%; }
  .field.c50, .field.c40, .field.c20 { width: 100%; }
  .foot-items { flex-direction: column; justify-content: center; gap: 5px; margin: 5px 0; }
  .ibox { width: 50%; max-width: 50%; }
  .ibox .ibox-icon { font-size: 30px; }
  .foot-bottom { padding: 1%; }
  .lb-nav { width: 20%; }
}

/* ---- 2025 footer (SiteGround sites): outlined buttons, optional contact boxes + partner logo, all CMS repeaters ---- */
.foot-top { flex-direction: row; gap: 10px 4%; padding: 10px 2%; background: var(--foot-bg); }
.foot-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px 20px; width: 60%; }
.fbtn { display: inline-block; padding: 13px 20px 8px; border: 2px solid var(--fbtn); color: var(--fbtn); font-family: var(--f-text); font-size: .9em; line-height: 1; text-transform: uppercase; transition: background .3s, color .3s; }
.fbtn:hover { background: var(--fbtn); color: var(--fbtn-hover); }
.foot-items { justify-content: flex-start; gap: 20px; width: 34%; }
.foot-top:not(:has(.ibox, .foot-logo)) .foot-btns { justify-content: center; width: 100%; }   /* buttons only: centred, as live */
.foot-top:not(:has(.ibox, .foot-logo)) .foot-items { display: none; }
.ibox { width: auto; max-width: none; }
.foot-logo { width: 94px; }
.foot-bottom { background: var(--foot-bar); }
.foot-tagline { visibility: hidden; }
.foot-copy span, .foot-credit a { color: #F7F7F7; letter-spacing: .5px; text-transform: uppercase; }
/* Menu: 3D renders + floor plans are links to their pages (as live), not lists. Spacing measured on the live popup 2616 */
.menu-lists h3 a { color: inherit; }
.menu-logo img { width: auto; height: var(--menu-logo-h); }
.menu-list li { line-height: 25px; }
.menu-list li + li { margin-top: 3px; }
.menu-lists .divider + h3 { margin-top: 20px; }

/* ---- 3D renders page (live /3d-renders/): titled 8-column thumbnail grids, measured at 1440 ---- */
.gal-page { padding: 69px 5% 60px; }
.gal + .gal { margin-top: 25px; }
.gal h2 { margin: 0; font-family: var(--f-display); font-size: var(--gal-size); font-weight: 700; line-height: 1; letter-spacing: .5px; text-transform: var(--gal-case); color: var(--gal-color); }
.gal-rule { margin: 12px 0 16px; border-top: 1px solid var(--gal-rule); }
.gal-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 16px; }
.gal-grid img { display: block; width: 100%; aspect-ratio: 370 / 350; object-fit: cover; }   /* WP 370x350 thumbnail crop */
.gal-grid a[href="/"] { display: none; }   /* unused slides (main.js also removes them) */

/* ---- Floor plans page (live /floor-plans/): ruled rows, each opens its plans in the lightbox ---- */
.fp-page { width: var(--fp-w); margin: 0 auto; padding: var(--fp-top) 0 60px; text-align: center; }
.fp-title { margin: 0; padding-bottom: 46px; border-bottom: 1px solid var(--fp-rule); font-family: var(--f-display); font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: .5px; text-transform: uppercase; color: var(--fp-color); }
.fp-list { margin: 0; padding: 0; list-style: none; }
.fp-list li { padding: var(--fp-pad); border-bottom: 1px solid var(--fp-rule); }
.fp-list a { font-family: var(--fp-font); font-size: var(--fp-size); font-weight: var(--fp-weight); line-height: 29px; text-transform: var(--fp-case); color: var(--fp-color); transition: color .3s; }
.fp-list a:hover { color: var(--gold); }

@media (min-width: 1280px) {
  .foot-items { width: 34%; }
  .v-nav .ic-wrap:has(.caret) { display: none; }            /* caret is transparent on the live sidebar */
}
@media (max-width: 1279px) {
  .gal-grid { grid-template-columns: repeat(4, 1fr); }
  .fp-page { width: 90%; padding-top: 60px; }
  .foot-top { flex-direction: column; }
  .foot-btns, .foot-items { justify-content: center; width: 100%; }
}
@media (max-width: 575px) {
  .gal-page { padding: 40px 20px; }
  .gal-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .foot-items { flex-direction: row; flex-wrap: wrap; }
  .ibox { width: auto; max-width: none; }
}

/* ---- West Creek: light sidebar with the W monogram, patterned menu, blue patterned form + footer, gold button ---- */
:root { --foot-bg: #6B849A url('/img/pattern-blue.jpg') center / cover; --foot-bar: #6B849A; --fbtn: #FFFFFF; --fbtn-hover: #6B849A; --menu-logo-h: 122px;
  --gal-size: 28px; --gal-case: none; --gal-color: #695E59; --gal-rule: #695E59;
  --fp-w: 90%; --fp-top: 128px; --fp-rule: #695E59; --fp-color: #695E59; --fp-pad: 32px 0; --fp-font: var(--f-display); --fp-size: 28px; --fp-weight: 700; --fp-case: none;
}
.menu-pop .popup-box { background: var(--light) var(--panel-bg) center; }
.menu-logo { margin-bottom: 30px; }
.menu-list { margin-bottom: 30px; }
.menu-lists h3 { color: #695E59; }
.menu-pop .divider span { border-color: #695E59; }
.menu-list a { color: #695E59; }
.menu-list a:hover { color: var(--gold); }
.form-pop .popup-box { background: #6B849A url('/img/pattern-blue.jpg') center / cover; }
.form-logo img { filter: brightness(0) invert(1); }       /* live uses a white copy of the logo */
.fp-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* live floor plans page has no visible title */
.form-inner h2, .form-inner h4, .field.consent, .field.note { color: #F7F7F7; }