/* ==========================================================================
   Vanessa Gonzalez Realtor & Property Manager - shared stylesheet

   The pages copy the original Wix site's layout. Each block is placed
   absolutely inside its section at the spot it holds on the original at
   1280px wide; the positions live in each page's <style> block (header and
   footer in assets/chrome.css). Positions are measured from the page centre,
   so the 980px content column stays centred at any window width, as on Wix.
   Phones get the original's own 320px mobile layout (see the media queries).

   This file holds the theme: fonts, text styles, colours, buttons, the nav,
   slideshows, galleries, forms and the FAQ accordion.
   ========================================================================== */

/* -------- fonts --------
   Armin Soft and Inter Bold are the files the site owner uploaded to Wix;
   Anybody, Wix Madefor Display and Anton are open-licence fonts. Wix's
   licensed Alliance No.2 and Avenir are replaced by the closest open fonts
   (Onest and Nunito Sans). The extra family names below match the names the
   original's text boxes ask for, so copied text renders in the right face. */
@font-face { font-family: wfont_f0021c_45c64772620b4fb3849e0c3bde5e999a; font-display: swap; src: url("fonts/armin-soft.woff2") format("woff2"); }
@font-face { font-family: wf_45c64772620b4fb3849e0c3bd; font-display: swap; src: url("fonts/armin-soft.woff2") format("woff2"); }
@font-face { font-family: wfont_f0021c_0878bc7dda904401a33c021465825852; font-display: swap; src: url("fonts/armin-soft-ultrabold.woff2") format("woff2"); }
@font-face { font-family: wf_0878bc7dda904401a33c02146; font-display: swap; src: url("fonts/armin-soft-ultrabold.woff2") format("woff2"); }
@font-face { font-family: wfont_c79f9d_b7c1b5ecc22540718679c93c5a404a7d; font-display: swap; src: url("fonts/inter-bold.woff2") format("woff2"); }
@font-face { font-family: wf_b7c1b5ecc22540718679c93c5; font-display: swap; src: url("fonts/inter-bold.woff2") format("woff2"); }
@font-face { font-family: anybody; font-weight: 100 900; font-display: swap; src: url("fonts/anybody.woff2") format("woff2"); }
@font-face { font-family: madefor-display; font-weight: 400 800; font-display: swap; src: url("fonts/madefor-display.woff2") format("woff2"); }
@font-face { font-family: anton; font-display: swap; src: url("fonts/anton.woff2") format("woff2"); }
@font-face { font-family: alliance-no-2; font-weight: 100 900; font-display: swap; src: url("fonts/onest.woff2") format("woff2"); ascent-override: 98%; descent-override: 18%; line-gap-override: 0%; }
@font-face { font-family: avenir-lt-w01_85-heavy1475544; font-display: swap; src: url("fonts/avenir-heavy-sub.woff2") format("woff2"); }
@font-face { font-family: avenir-lt-w01_35-light1475496; font-display: swap; src: url("fonts/avenir-light-sub.woff2") format("woff2"); }

:root {
  --ff-armin: wfont_f0021c_45c64772620b4fb3849e0c3bde5e999a, sans-serif;
  --ff-armin-ub: wfont_f0021c_0878bc7dda904401a33c021465825852, sans-serif;
  --ff-inter: wfont_c79f9d_b7c1b5ecc22540718679c93c5a404a7d, sans-serif;
  --ff-anybody: anybody, sans-serif;
  --ff-madefor: madefor-display, sans-serif;
  --ff-alliance: alliance-no-2, sans-serif;
  --ff-avenir-heavy: avenir-lt-w01_85-heavy1475544, sans-serif;
  --ff-avenir-light: avenir-lt-w01_35-light1475496, sans-serif;

  /* theme text styles, as defined on the original */
  --font_0: normal normal normal 60px/1.4em var(--ff-armin-ub);
  --font_1: normal normal normal 16px/1.4em sans-serif;
  --font_2: normal normal normal 40px/1.4em var(--ff-armin-ub);
  --font_3: normal normal normal 38px/1.4em var(--ff-armin-ub);
  --font_4: normal normal normal 35px/1.4em var(--ff-armin-ub);
  --font_5: normal normal normal 27px/1.4em var(--ff-armin-ub);
  --font_6: normal normal normal 25px/1.4em var(--ff-armin-ub);
  --font_7: normal normal normal 22px/1.4em var(--ff-armin);
  --font_8: normal normal normal 16px/1.4em var(--ff-armin);
  --font_9: normal normal normal 14px/1.4em var(--ff-armin);
  --font_10: normal normal normal 12px/1.4em sans-serif;

  --navy: #1c2d37;
  --gold: #eed26e;
  --mist: #c0cdd1;
  --paper: #e8e6e6;
}

/* -------- base -------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #000; font: 14px/1.4 var(--ff-armin); }
img { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 10px 16px; background: var(--navy); color: #fff; }
.skip-link:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* -------- section + block placement -------- */
.sec { position: relative; width: 100%; }
.sec > .bg-fill, .bg-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-img { object-fit: cover; }
picture { display: contents; }
.c { position: absolute; margin: 0; }
.img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.img { overflow: hidden; }
.box > img.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vec svg { display: block; width: 100%; height: 100%; overflow: visible; }
iframe.c { border: 0; }

/* -------- rich text (Wix text boxes) -------- */
.rt { overflow-wrap: break-word; }
:where(.rt) :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li) { margin: 0; padding: 0; font: inherit; }
.rt a { color: inherit; }
.rt ul { list-style: disc; margin-inline: .5em 0; padding-inline: 1.3em 0; letter-spacing: normal; line-height: normal; }
.rt ol { list-style: decimal; margin-inline: .5em 0; padding-inline: 1.3em 0; line-height: normal; }
.rt li { font-style: inherit; font-weight: inherit; line-height: inherit; letter-spacing: normal; }
.font_0 { font: var(--font_0); color: #000; letter-spacing: 0em; }
.font_1 { font: var(--font_1); color: #595959; letter-spacing: 0em; }
.font_2 { font: var(--font_2); color: #000; letter-spacing: 0em; }
.font_3 { font: var(--font_3); color: #000; letter-spacing: 0em; }
.font_4 { font: var(--font_4); color: #000; letter-spacing: 0em; }
.font_5 { font: var(--font_5); color: #000; letter-spacing: 0em; }
.font_6 { font: var(--font_6); color: #000; letter-spacing: 0em; }
.font_7 { font: var(--font_7); color: #000; letter-spacing: 0em; }
.font_8 { font: var(--font_8); color: #000; letter-spacing: 0em; }
.font_9 { font: var(--font_9); color: #595959; letter-spacing: 0em; }
.font_10 { font: var(--font_10); color: #595959; letter-spacing: 0em; }
.color_11, .color_36, .color_44 { color: #fff; }
.color_12, .color_38 { color: var(--paper); }
.color_13, .color_39 { color: #c7c7c7; }
.color_14, .color_40 { color: #595959; }
.color_15, .color_37, .color_45 { color: #000; }
.color_18, .color_41 { color: var(--navy); }
.color_42 { color: var(--mist); }
.color_43 { color: var(--gold); }
.backcolor_43 { background-color: var(--gold); }

/* -------- buttons (Wix "stylable" buttons: gold pill, navy on hover) -------- */
.btn { overflow: hidden; transition: background-color .2s, border-color .2s, color .2s; white-space: nowrap; }
.btn .lbl, .btn .ico { position: absolute; display: block; }
.btn .lbl { text-align: center; }
.btn .ico svg { display: block; width: 100%; height: 100%; fill: currentColor; transition: transform .2s; }
.btn .ico { color: inherit; }
.btn:hover, .btn:focus-visible { background: var(--navy) !important; border-color: var(--navy) !important; color: var(--gold) !important; }
.btn:hover .ico svg, .btn:focus-visible .ico svg { transform: rotate(315deg); }

/* -------- header + nav -------- */
#SITE_HEADER { height: 78px; background: #fff; z-index: 50; }
.hdr-strip { position: absolute; inset: 0; background: var(--paper); }
#nav { display: flex; height: 100%; list-style: none; margin: 0; padding: 0; }
#nav > li { display: flex; }
#nav > li > a {
  flex: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 1000px; color: rgba(89, 89, 89, .8);
  font: 16px/1 var(--ff-armin); white-space: nowrap; transition: background-color .2s, color .2s;
}
#nav > li > a:hover, #nav > li > a:focus-visible, #nav > li > a[aria-current] { background: rgba(28, 45, 55, .1); color: var(--navy); }
.nav-toggle, .mnav { display: none; }

/* -------- slideshows (hero + testimonials) -------- */
.slideshow { overflow: hidden; }
.ss-track { position: absolute; inset: 0; }
.ss-slide { position: absolute; inset: 0; visibility: hidden; }
.ss-slide.is-active { visibility: visible; }
.ss-bgimg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ss-arrow { position: absolute; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer; }
.ss-arrow svg { display: block; width: 100%; height: 100%; fill: inherit; }
.ss-next svg { transform: scaleX(-1); }
.ss-dots { position: absolute; z-index: 2; display: flex; align-items: center; gap: var(--dot-gap); width: max-content; }
.ss-dot { flex: none; width: var(--dot); height: var(--dot); padding: 0; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }
.ss-dot.is-active { width: var(--dot-on); height: var(--dot-on); background: transparent; border: 2px solid #fff; }

/* -------- home "Properties" strip (Wix Pro Gallery slider, scrolls continuously) -------- */
.pg-slider { overflow: hidden; }
.pg-track { display: flex; gap: var(--gap); height: 100%; width: max-content; will-change: transform; }
.pg-item { position: relative; flex: none; width: var(--gw); height: var(--gh); border-radius: 10px; overflow: hidden; }
.pg-item img { width: 100%; height: 100%; object-fit: cover; }
.pg-item::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); opacity: 0; transition: opacity .3s; }
.pg-item:hover::after { opacity: 1; }
.pg-next { position: absolute; right: 95px; top: 50%; width: 23px; height: 23px; margin-top: -11.5px; padding: 0; border: 0; border-radius: 50%; background: var(--gold); color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pg-next svg { width: 10px; height: 8px; }

/* -------- projects grid (Wix Pro Gallery grid) -------- */
.pg-cell { position: absolute; border-radius: 10px; overflow: hidden; }
.pg-cell img { width: 100%; height: 100%; object-fit: cover; }
.pg-cell::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); opacity: 0; transition: opacity .3s; }
.pg-cell:hover::after { opacity: 1; }

/* -------- listings: photo gallery per property + "Read more" text -------- */
.lgallery { overflow: hidden; background: rgb(47, 46, 46); }
.lg-slide { position: absolute; inset: 0; }
.lg-slide img { width: 100%; height: 100%; object-fit: cover; }
.lg-prev, .lg-next {
  position: absolute; top: 50%; width: 45px; height: 70px; margin-top: -35px; padding: 0; border: 0; cursor: pointer; z-index: 2;
  background: url("img/gallery-arrows.png") 0 0 / 100px 70px no-repeat; opacity: 0; transition: opacity .5s;
}
.lg-prev { left: 20px; }
.lg-next { right: 20px; background-position: 100% 0; }
.lg-panel { position: absolute; left: 0; right: 0; bottom: 0; height: 38px; background: rgba(255, 255, 255, .7); opacity: 0; transition: opacity .5s; z-index: 1; }
.lg-count { position: absolute; right: 10px; bottom: 10px; font: 12px/14px Arial, sans-serif; color: #000; }
.lgallery:hover .lg-prev, .lgallery:hover .lg-next, .lgallery:focus-within .lg-prev, .lgallery:focus-within .lg-next { opacity: .4; }
.lgallery .lg-prev:hover, .lgallery .lg-next:hover, .lgallery .lg-prev:focus-visible, .lgallery .lg-next:focus-visible { opacity: 1; }
.lgallery:hover .lg-panel { opacity: 1; }
.collapsible p { margin: 0; font: 14px/21px Arial, sans-serif; color: var(--paper); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.collapsible.open p { display: block; -webkit-line-clamp: none; }
.cl-toggle { display: block; margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer; font: 12px/18px var(--ff-avenir-heavy); color: var(--mist); }
.page-listings .sec { overflow: visible; }

/* -------- forms (Wix Forms look) -------- */
.wixform .ff, .wixform .form-submit { position: absolute; }
.wixform .ff { border: 1px solid #c7c7c7; border-radius: 10px; background: rgba(192, 205, 209, 0); display: flex; }
.wixform input, .wixform textarea {
  flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; background: transparent; outline: 0;
  font: 14px/19.6px var(--ff-armin); color: var(--paper); padding: 8px 2px 8px 12px; resize: none;
}
.wixform textarea { padding: 8px 12px; }
.wixform ::placeholder { color: var(--paper); opacity: .45; }
.wixform .ff:focus-within { border-color: var(--paper); }
.wixform .ff-phone input { padding-left: 0; }
.ff-cc { position: relative; flex: none; display: flex; align-items: center; gap: 0; padding-left: 12px; color: var(--paper); width: auto !important; }
.ff-cc svg:first-child { width: 24px; height: 24px; }
.ff-cc svg:last-child { width: 16px; height: 16px; margin-right: 0; }
.wixform .form-submit { display: flex; align-items: center; justify-content: center; border: 0; border-radius: 100px; background: var(--gold); color: var(--navy); font: 16px/19.2px var(--ff-armin); cursor: pointer; transition: background-color .2s, color .2s; }
.wixform .form-submit:hover, .wixform .form-submit:focus-visible { background: var(--navy); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -------- FAQ (Wix FAQ app, numbered accordion) -------- */
.faq { color: #fff; }
.faq-title { margin: 0; text-align: center; font: 400 32px/38.4px var(--ff-anybody); color: #fff; }
.faq-list { list-style: none; padding: 0; }
.faq-item { position: relative; padding-left: 100px; }
.faq-num { position: absolute; left: 0; top: 0; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; font: 20px/28px var(--ff-alliance); color: var(--gold); background: var(--navy); }
.faq-box { border: 1px solid #000; }
.faq-box h3 { margin: 0; font: inherit; }
.faq-q { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; text-align: left; cursor: pointer; color: #fff; }
.faq-q .q { flex: 1; font: 20px/28px var(--ff-alliance); }
.faq-ic { flex: none; width: 30px; height: 30px; fill: #fff; transition: transform .3s; }
.faq-q[aria-expanded="true"] .faq-ic { transform: rotate(180deg); }
.faq-body { font: 16px/24px var(--ff-alliance); color: #fff; }
.faq-body p { margin: 0 0 6px; }
.faq-body ul, .faq-body ol { margin: 0 0 6px; padding-left: 1.4em; }
.faq-body a { text-decoration: underline; }
.faq-share { display: flex; gap: 16px; list-style: none; margin: 18px 0 0; padding: 0; }
.faq-share a, .faq-share button { display: block; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.faq-share svg { width: 24px; height: 24px; fill: #fff; }

/* -------- map (contact) -------- */
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-dir { position: absolute; left: 10px; top: 10px; padding: 6px 10px; background: #fff; border-radius: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.3); font: 13px/1.2 Arial, sans-serif; color: #1a73e8; }

/* -------- lightbox -------- */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.96); }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: calc(100vw - 160px); max-height: calc(100vh - 80px); object-fit: contain; }
.lightbox button { position: absolute; border: 0; background: none; cursor: pointer; color: #000; font: 300 40px/1 sans-serif; padding: 16px; }
.lb-close { top: 10px; right: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }

/* -------- mobile --------
   Like the original, phones get Wix's 320px-wide mobile layout (a script in
   each page head sets the viewport to 320px on phones). The block positions
   for it live in the "@media (max-width: 750px)" part of each page's <style>
   block and of chrome.css. */
.m-only { display: none; }
@media (min-width: 751px) { body { min-width: 980px; } }
.sec { overflow-x: clip; }
@media (max-width: 750px) {
  body { min-width: 320px; }
  .d-only { display: none; }
  .m-only { display: block; }
  #SITE_HEADER { height: 96px; }
  .hdr-strip, #site-nav, #hdr-contact { display: none; }
  .nav-toggle { display: block; left: calc(50% + 96px); top: 21px; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 7px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.14); cursor: pointer; z-index: 70; }
  .nav-toggle svg { width: 100%; height: 100%; }
  .mnav:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 100; }
  .mnav-shade { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
  .mnav-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 200px; background: #fff; overflow-y: auto; }
  .mnav-close { position: absolute; top: 21px; right: 14px; width: 50px; height: 50px; padding: 13px; border: 0; border-radius: 7px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.14); color: #aaa; cursor: pointer; }
  .mnav-close svg { width: 100%; height: 100%; }
  .mnav ul { list-style: none; margin: 65px 10px 0 0; padding: 0; }
  .mnav li { border-bottom: 1px solid #d9d9d9; }
  .mnav a { display: block; padding: 0 10px; height: 56px; line-height: 56px; text-align: right; font: 16px/56px var(--ff-armin); color: #c7c7c7; }
  .mnav a[aria-current] { color: var(--navy); }
  .pg-next { display: none; }
}