/*
 * Gracewater components — styles for the shared partials (templates/*.php) and the
 * type-scale hardening every custom element relies on. Enqueued as `gw-components`
 * wherever a gw_* element renders (template or ordinary Salient page); tokens.css first.
 * Motion pre-states are NOT here (scrollytelling.css, template only).
 */

/* Type scale hardening: element markup uses the DS classes; win over Salient/Redux heading CSS. */
.gw-display-xxl, .gw-display-xl, .gw-display-l, .gw-display-m, .gw-display-s, .gw-display-xs { font-family: var(--gw-font-display) !important; font-weight: 900 !important; letter-spacing: 0 !important; text-transform: none; margin: 0; }
.gw-display-xs { font-size: var(--gw-fluid-display-xs); line-height: 0.96; color: var(--gw-text-primary); text-wrap: pretty; }
.gw-heading-l, .gw-heading-s, .gw-heading-2xs, .gw-label-l, .gw-label-s, .gw-label-s-wide, .gw-eyebrow { font-family: var(--gw-font-display) !important; font-weight: 600 !important; }
.gw-body-l, .gw-body-m { font-family: var(--gw-font-body) !important; }
.gw-body-l p, .gw-body-m p { font: inherit; color: inherit; margin: 0 0 1em; } .gw-body-l p:last-child, .gw-body-m p:last-child { margin-bottom: 0; }

/* Section eyebrows use the larger heading scale; beat the scrolly paragraph ink reset. */
.gw-eyebrow,
.gw-scrolly .gw-eyebrow {
	color: var(--gw-text-eyebrow);
	font-size: var(--gw-fluid-heading-l);
	line-height: 1.2;
}
/* Eyebrow tones + the small chapter size (Figma Website 472:1669): big orange is the default;
   THE LUXURY OF BEING NEARBY is green-700, amenITIES teal-500, band labels cream; the chapter
   eyebrows (THE BEACHES, AIRPORTS, DOWNTOWN) are 22px / 0.04em green-700. (0,2,0) beats the
   .gw-scrolly ink and size rules above. */
.gw-eyebrow--green, .gw-scrolly .gw-eyebrow--green { color: var(--gw-green-700); }
.gw-eyebrow--teal,  .gw-scrolly .gw-eyebrow--teal  { color: var(--gw-teal-500); }
.gw-eyebrow--cream, .gw-scrolly .gw-eyebrow--cream { color: var(--gw-cream-100); }
.gw-eyebrow--s,     .gw-scrolly .gw-eyebrow--s     { font-size: var(--gw-fluid-label-l); letter-spacing: var(--gw-track-label); }

/* gw_heading_lines() rows: one line each (the hero repeats this for its own title) */
.gw-line { display: block; }

/* Ink on deep grounds (teal / green / orange panels) */
/* Page surface: the DS ground is cream-100 (Salient paints body, .ocm-effect-wrap and
   .container-wrap white, so cream sections such as gw_feature_block showed against white
   gaps). Deep-ground pages (news, contact) keep their own body-class overrides. */
:root { --nectar-page-background-color: var(--gw-surface-page); } /* Salient's dynamic stylesheet paints its wrappers with this variable */
body, .ocm-effect-wrap, .ocm-effect-wrap-inner, #ajax-content-wrap, .container-wrap { background-color: var(--gw-surface-page); }

/* Full-bleed sections. Salient's default template wraps content in a 1244px .container, so
   every gw_* section that spans the viewport carries .gw-bleed; on the scrollytelling template
   (#gw-scrolly is already full width) the negative margins resolve to 0. */
.gw-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

.gw-on-deep, .gw-on-deep .gw-display-xxl, .gw-on-deep .gw-display-xl, .gw-on-deep .gw-display-l, .gw-on-deep .gw-display-m, .gw-on-deep .gw-display-s, .gw-on-deep .gw-display-xs, .gw-on-deep .gw-heading-l, .gw-on-deep .gw-heading-s, .gw-on-deep .gw-label-l, .gw-on-deep .gw-label-s, .gw-on-deep .gw-body-l, .gw-on-deep .gw-body-m, .gw-on-deep .gw-eyebrow, .gw-on-deep .gw-intro__kicker { color: var(--gw-cream-100); }

/* Pill button (DS PillButton) */
.gw-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 51px; padding: 0 30px; border-radius: var(--gw-radius-pill); border: var(--gw-stroke-button) solid currentColor; font-family: var(--gw-font-display); font-weight: 600; font-size: var(--gw-fluid-label-s); letter-spacing: var(--gw-track-label); text-transform: uppercase; text-decoration: none; color: var(--gw-green-700); background: transparent; transition: background var(--gw-dur) var(--gw-ease), color var(--gw-dur) var(--gw-ease), transform var(--gw-dur-fast) var(--gw-ease); }
.gw-pill:hover { background: var(--gw-green-700); color: var(--gw-cream-100); }
.gw-pill:active { transform: scale(0.98); }
.gw-pill--white { color: var(--gw-white); } .gw-pill--white:hover { background: var(--gw-white); color: var(--gw-green-700); }
.gw-pill--cream { color: var(--gw-cream-100); } .gw-pill--cream:hover { background: var(--gw-cream-100); color: var(--gw-green-700); }
.gw-pill--solid { background: var(--gw-green-700); color: var(--gw-cream-100); } .gw-pill--solid:hover { filter: brightness(0.92); }
.gw-pill--citron { color: var(--gw-citron-500); } .gw-pill--citron:hover { background: var(--gw-citron-500); color: var(--gw-green-700); } /* Gallery band 48:1227 */
/* Control pill (News Filters / view toggle, Find A Home toolbar): the comp's 303x51 fixed-width pill. Also styles <button>/<summary>. */
.gw-pill--ctrl { min-height: 51px; min-width: clamp(160px, 15.8vw, 303px); padding: 0 clamp(20px, 2vw, 40px); font-size: var(--gw-fluid-label-s); cursor: pointer; }
button.gw-pill { cursor: pointer; font-family: var(--gw-font-display); font-weight: 600; font-size: var(--gw-fluid-label-s); letter-spacing: var(--gw-track-label); text-transform: uppercase; line-height: 1; } /* Salient button resets */
body[data-button-style] button.gw-pill { border-radius: var(--gw-radius-pill) !important; } /* Salient: button { border-radius: 4px !important } */
@media (max-width: 767px) { .gw-pill--ctrl { min-width: 0; } }
/* Builders intro (53:259): the outline pill is teal-500 on cream; el_class hook on the host section. */
.gw-cta-teal .gw-pill { color: var(--gw-teal-500); } .gw-cta-teal .gw-pill:hover { background: var(--gw-teal-500); color: var(--gw-white); }

/* Rule (DS Rule): a plain horizontal divider, colour set by a tone modifier. */
.gw-rule { width: 100%; max-width: var(--gw-measure-display); height: 0; margin-inline: auto; border: 0; border-top: var(--gw-stroke-rule) solid var(--gw-green-700); }
.gw-rule--citron { border-top-color: var(--gw-citron-500); }
.gw-rule--green { border-top-color: var(--gw-green-700); }
.gw-on-deep .gw-rule { border-top-color: var(--gw-cream-100); }

/* Section intro (templates/section-intro.php) */
.gw-intro__rail { position: absolute; top: 0; left: 0; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; color: inherit; }
.gw-intro__heading .gw-accent { color: var(--gw-teal-500); }
/* The amenities heading's accent line is the site's one script line (Sloop Script Three 500, same size and leading as the display line). */
.gw-amenities .gw-intro__heading .gw-accent { font-family: var(--gw-font-script); font-weight: 500; text-transform: none; letter-spacing: 0; line-height: 0; position: relative; top: -1.17vw; }
/* line-height 0 keeps the script's tall box from growing the line (comp pitch 100); top pulls its baseline up the 22px (at 1920) the box metrics push it down. */
/* One type rhythm site-wide: the grid gap is heading → body → CTA, the eyebrow adds the difference up to
   its own token. Salient's paragraph padding is dropped so the tokens are the whole gap. Pages and elements
   do not override these; Home's comp-measured sections (homepage-fidelity.css) are the one exception. */
.gw-intro { position: relative; display: grid; gap: var(--gw-fluid-gap-heading-body); }
.gw-intro > .gw-eyebrow { padding-bottom: 0; margin-bottom: calc(var(--gw-fluid-gap-eyebrow-heading) - var(--gw-fluid-gap-heading-body)); }
.gw-intro__body p:last-child { padding-bottom: 0; }
.gw-intro--center { justify-items: center; text-align: center; }
.gw-intro__heading { margin: 0; }
.gw-intro__body { max-width: var(--gw-measure-body); } .gw-intro__body p { margin: 0 0 1em; } .gw-intro__body p:last-child { margin: 0; }
.gw-intro__kicker { color: var(--gw-teal-500); max-width: 36ch; line-height: 1.35; }

/* Ring marker */
.gw-ring-marker { display: inline-block; line-height: 0; color: var(--gw-teal-500); }
.gw-ring-marker--citron { color: var(--gw-citron-400); }
.gw-ring-marker--cream { color: var(--gw-cream-100); }
.gw-ring-marker svg { width: 100%; height: auto; display: block; overflow: visible; }


/* Sticker (templates/sticker.php): x/y are % of the parent box, w is px at the 1920 canvas */
.gw-sticker { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) / 1920 * 100vw); pointer-events: none; will-change: transform; }
.gw-sticker--above { z-index: 4; } .gw-sticker--below { z-index: 1; }
.gw-sticker__img { display: block; width: 100%; height: auto; transform: rotate(var(--r)); filter: drop-shadow(0 8px 12px rgba(0,0,0,0.08)); }

/* Mobile sticker rules (BUILD-PLAN §5), shared by every sticker host: only stickers 1 and 2
   survive, width clamps, parallax is desktop-only in gw-motion.js. Hosts decide the slots. */
@media (max-width: 999px) {
  .gw-sticker { width: min(calc(var(--w) / 1920 * 220vw), 38vw); }
  .gw-sticker:not(.gw-sticker--1):not(.gw-sticker--2) { display: none; }
}

/* Circle button (DS CircleButton): hairline ring + brand arrow/plus/close glyph. Ring scales with size. */
.gw-circle-btn { display: inline-grid; place-items: center; width: 64px; height: 64px; padding: 0; border-radius: var(--gw-radius-circle); border: 2.631px solid currentColor; background: transparent; color: var(--gw-green-700); cursor: pointer; line-height: 1; font: inherit; transition: background var(--gw-dur) var(--gw-ease), color var(--gw-dur) var(--gw-ease), transform var(--gw-dur-fast) var(--gw-ease); }
.gw-circle-btn svg { width: 42%; height: auto; display: block; }
.gw-circle-btn--sm { width: 44px; height: 44px; border-width: 2.21px; }
.gw-circle-btn--lg { width: 96px; height: 96px; border-width: 3.505px; }
.gw-circle-btn--white, .gw-circle-btn--cream { color: var(--gw-cream-100); }
.gw-circle-btn--glass { background: var(--gw-glass-button); border-color: transparent; color: var(--gw-green-700); backdrop-filter: blur(12px); }
.gw-circle-btn:hover { background: currentColor; }
.gw-circle-btn:hover svg { color: var(--gw-cream-100); }
.gw-circle-btn--white:hover svg, .gw-circle-btn--cream:hover svg { color: var(--gw-green-700); }
.gw-circle-btn:active { transform: scale(0.96); }
.gw-circle-btn:disabled { opacity: 0.35; cursor: default; }
.gw-circle-btn:focus-visible, .gw-pill:focus-visible { outline: 2px solid var(--gw-teal-500); outline-offset: 3px; }

/* Salient gotcha: body[data-button-style*="slightly_rounded"] button { border-radius: 4px !important } (0,1,2).
   Any <button> we style needs (0,2,1)+ with !important to keep its own radius. */
body[data-button-style] button.gw-circle-btn { border-radius: var(--gw-radius-circle) !important; }
body[data-button-style] button.gw-pill { border-radius: var(--gw-radius-pill) !important; }

/* Scroll lock while a sheet is open (Lenis stops itself when present) */
html.gw-scroll-lock, html.gw-scroll-lock body { overflow: hidden; }

/* Place list item (DS PlaceListItem, templates/place-list-item.php; Location page).
   The Website link sits outside the button (nested interactive elements are invalid). */
/* Website comp 472:1304: name 33px ExtraBold, 12px blurb, address + WEBSITE on one row, rule under each item */
.gw-place-item { list-style: none; position: relative; border-bottom: var(--gw-stroke-rule) solid var(--gw-rule); padding-bottom: clamp(10px, 1vw, 19px); margin-bottom: clamp(14px, 1.46vw, 28px); }
.gw-place-item__button { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.gw-place-item__name { display: block; color: var(--gw-text-primary); margin: 0 0 clamp(10px, 0.94vw, 18px); font-family: var(--gw-font-display) !important; font-weight: 800 !important; font-size: clamp(22px, 1.72vw, 33px) !important; line-height: 0.95 !important; letter-spacing: -0.01em !important; text-transform: none !important; transition: color var(--gw-dur) var(--gw-ease); }
.gw-place-item__blurb { display: block; color: var(--gw-text-primary); margin: 0 0 clamp(10px, 0.94vw, 18px); font-size: clamp(14px, 0.9vw, 17px) !important; line-height: 1.4 !important; } /* larger, and closer to the address (Danny, 2026-10-05; was 12-13px with a 45px gap) */
.gw-place-item__address { display: block; max-width: calc(100% - 90px); color: var(--gw-text-secondary); text-transform: uppercase; letter-spacing: var(--gw-track-heading); font-size: 12px !important; line-height: 1.25; }
.gw-place-item__site { position: absolute; right: clamp(8px, 0.8vw, 15px); bottom: clamp(10px, 1vw, 19px); font-size: 12px !important; line-height: 1.25; color: var(--gw-text-link); text-transform: uppercase; letter-spacing: var(--gw-track-label); text-decoration: none; transition: color var(--gw-dur) var(--gw-ease); }
.gw-place-item__button:hover .gw-place-item__name,
.gw-place-item__button:focus-visible .gw-place-item__name,
.gw-place-item__site:hover,
.gw-place-item__site:focus-visible { color: var(--gw-teal-500); }
.gw-place-item__button:focus-visible { outline: 2px solid var(--gw-teal-500); outline-offset: 3px; }
.gw-place-item.is-active .gw-place-item__name { color: var(--gw-teal-500); }

/* Builder sales phone after a "Call For Information" price line (cards, singles, compare; feedback card 47). */
.gw-price-phone { color: inherit !important; white-space: nowrap; text-decoration: underline 1px; text-underline-offset: 0.2em; }
.gw-price-phone:hover, .gw-price-phone:focus-visible { text-decoration-thickness: 2px; }

/* Cursor-driven carousel nav (assets/js/gw-cursor-nav.js; Danny 2026-10-13): over a sliding gallery the mouse
   is the DS hand-drawn arrow in white (a faint green-900 outline keeps it readable over light photos), left
   half = previous, right half = next, click moves. The circle arrows stay in the DOM for keyboard and touch
   users but are invisible while the cursor nav is live (fine pointers only; the JS sets the attribute). */
[data-gw-cursor="next"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='36'%20viewBox='0%200%2060%2036'%3E%3Cg%20fill='white'%20stroke='%23012E2B'%20stroke-opacity='0.55'%20stroke-width='1.6'%20stroke-linejoin='round'%20paint-order='stroke'%20transform='translate(3%204)'%3E%3Cpath%20d='M%2052.964%2013.651%20L%2052.964%2015.402%20L%2053.581%2012.011%20L%2052.964%2013.651%20Z%20M%200%2013.651%20L%200%2015.402%20L%2052.964%2015.402%20L%2052.964%2013.651%20L%2052.964%2011.899%20L%200%2011.899%20L%200%2013.651%20Z%20M%2052.964%2013.651%20L%2053.581%2012.011%20C%2050.433%2010.827%2045.864%208.748%2042.368%206.381%20C%2040.609%205.19%2039.237%204.002%2038.431%202.907%20C%2037.625%201.813%2037.588%201.119%2037.776%200.641%20L%2036.146%200%20L%2034.516%20-0.641%20C%2033.7%201.434%2034.458%203.42%2035.611%204.985%20C%2036.763%206.55%2038.514%208.002%2040.404%209.282%20C%2044.209%2011.858%2049.053%2014.051%2052.348%2015.29%20L%2052.964%2013.651%20Z'/%3E%3Cpath%20transform='translate(0.214%2027.845)%20scale(1%20-1)'%20d='M%2052.546%2014.197%20L%2052.546%2015.948%20L%2053.188%2012.567%20L%2052.546%2014.197%20Z%20M%200%2014.197%20L%200%2015.948%20L%2052.546%2015.948%20L%2052.546%2014.197%20L%2052.546%2012.445%20L%200%2012.445%20L%200%2014.197%20Z%20M%2052.546%2014.197%20L%2053.188%2012.567%20C%2050.068%2011.337%2045.539%209.176%2042.073%206.716%20C%2040.33%205.479%2038.966%204.243%2038.162%203.097%20C%2037.358%201.954%2037.288%201.18%2037.5%200.615%20L%2035.86%200%20L%2034.22%20-0.615%20C%2033.436%201.475%2034.155%203.488%2035.295%205.111%20C%2036.434%206.731%2038.167%208.24%2040.046%209.573%20C%2043.822%2012.254%2048.631%2014.536%2051.903%2015.826%20L%2052.546%2014.197%20Z'/%3E%3C/g%3E%3C/svg%3E") 30 18, e-resize; }
[data-gw-cursor="prev"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='36'%20viewBox='0%200%2060%2036'%3E%3Cg%20fill='white'%20stroke='%23012E2B'%20stroke-opacity='0.55'%20stroke-width='1.6'%20stroke-linejoin='round'%20paint-order='stroke'%20transform='translate(60%200)%20scale(-1%201)%20translate(3%204)'%3E%3Cpath%20d='M%2052.964%2013.651%20L%2052.964%2015.402%20L%2053.581%2012.011%20L%2052.964%2013.651%20Z%20M%200%2013.651%20L%200%2015.402%20L%2052.964%2015.402%20L%2052.964%2013.651%20L%2052.964%2011.899%20L%200%2011.899%20L%200%2013.651%20Z%20M%2052.964%2013.651%20L%2053.581%2012.011%20C%2050.433%2010.827%2045.864%208.748%2042.368%206.381%20C%2040.609%205.19%2039.237%204.002%2038.431%202.907%20C%2037.625%201.813%2037.588%201.119%2037.776%200.641%20L%2036.146%200%20L%2034.516%20-0.641%20C%2033.7%201.434%2034.458%203.42%2035.611%204.985%20C%2036.763%206.55%2038.514%208.002%2040.404%209.282%20C%2044.209%2011.858%2049.053%2014.051%2052.348%2015.29%20L%2052.964%2013.651%20Z'/%3E%3Cpath%20transform='translate(0.214%2027.845)%20scale(1%20-1)'%20d='M%2052.546%2014.197%20L%2052.546%2015.948%20L%2053.188%2012.567%20L%2052.546%2014.197%20Z%20M%200%2014.197%20L%200%2015.948%20L%2052.546%2015.948%20L%2052.546%2014.197%20L%2052.546%2012.445%20L%200%2012.445%20L%200%2014.197%20Z%20M%2052.546%2014.197%20L%2053.188%2012.567%20C%2050.068%2011.337%2045.539%209.176%2042.073%206.716%20C%2040.33%205.479%2038.966%204.243%2038.162%203.097%20C%2037.358%201.954%2037.288%201.18%2037.5%200.615%20L%2035.86%200%20L%2034.22%20-0.615%20C%2033.436%201.475%2034.155%203.488%2035.295%205.111%20C%2036.434%206.731%2038.167%208.24%2040.046%209.573%20C%2043.822%2012.254%2048.631%2014.536%2051.903%2015.826%20L%2052.546%2014.197%20Z'/%3E%3C/g%3E%3C/svg%3E") 30 18, w-resize; }
[data-gw-cursor-nav] .gw-circle-btn.gw-gallery__arrow:not(:focus-visible),
[data-gw-cursor-nav] .gw-circle-btn.gw-amenities__arrow:not(:focus-visible) { opacity: 0; pointer-events: none; }