/**
 * Styling for the shared site chrome: logo lockup, header, mobile drawer and footer.
 * Pairs with src/shared/header.js and src/shared/footer.js.
 */

/* ============================================================
   Logo lockup
   ============================================================ */

/**
 * The lockup is two Figma exports masked with currentColor. Ratios come straight from
 * the design: the wordmark (which carries the divider bar) is 152x75 and the tagline
 * is 109.105x44.091 inside the same 280x75 logo box.
 */
.site-logo {
  --logo-height: 58px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-height) * 0.08);
  color: inherit;
  text-decoration: none;
  flex: none;
}

.site-logo:hover {
  text-decoration: none;
}

/* The lockup in the bar is the one that sets the bar's height, so it reads the same token
   the height is derived from. Nothing else on the page does. */
.site-header .site-logo {
  --logo-height: var(--header-lockup);
}

.site-logo__wordmark,
.site-logo__tagline {
  display: block;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--logo-src) left center / contain no-repeat;
  mask: var(--logo-src) left center / contain no-repeat;
}

.site-logo__wordmark {
  --logo-src: url('../../assets/logo/churchill-living-wordmark.svg');
  width: calc(var(--logo-height) * 2.027);
  height: var(--logo-height);
}

/* On a solid header the wordmark is teal while the nav stays dark — the mask inherits
   currentColor, so it needs saying explicitly. Over a photograph the whole lockup goes
   white with the rest of the header, which is why this is scoped rather than global. */
.site-header:not(.site-header--transparent) .site-logo__wordmark,
.site-header--transparent.is-scrolled .site-logo__wordmark {
  background-color: var(--color-green-primary);
}

.site-logo__tagline {
  --logo-src: url('../../assets/logo/furnished-apartments.svg');
  width: calc(var(--logo-height) * 1.455);
  height: calc(var(--logo-height) * 0.588);
}

.site-logo--footer {
  --logo-height: 75px;
}

.site-logo--footer .site-logo__wordmark {
  --logo-src: url('../../assets/logo/churchill-living-lockup.svg');
}

/* ============================================================
   Header
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-white);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  transition: background var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

/* Home page only: the header floats over the hero photo until the user scrolls. */
.site-header--transparent {
  position: fixed;
  inset-inline: 0;
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.25);
  color: var(--text-inverse);
}

.site-header--transparent.is-scrolled {
  background: var(--color-white);
  backdrop-filter: none;
  border-bottom-color: var(--border-subtle);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
}

.site-header__inner {
  display: flex;
  align-items: center;
  /* The design's two 95px gaps are not a chosen value — they are what is left of the
     1760px row once the lockup, the nav and the actions have taken their width. A fixed
     gap pins the nav to the logo and pools all the slack at the end of the nav list. The
     gap below survives as the floor for the widths where there is nothing left over. */
  justify-content: space-between;
  gap: var(--space-8);
  height: var(--header-height);
  /* The gutter sits outside the token, as it does for .container — see base.css. */
  max-width: calc(var(--container-wide) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header__burger {
  display: none;
  flex: none;
  color: inherit;
}

/* --- Primary nav --- */

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.site-nav__item {
  position: relative;
}

/* The designer's notes set the nav in Inter Bold 18px / 3px tracking on a 1920 canvas.
   That only fits at the design width, so it steps down on narrower viewports. */
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-block: var(--space-3);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  white-space: nowrap;
}

/* caret-down.svg draws an *up* triangle despite its name, so the Locations caret has
   to be turned to point down as Figma draws it. */
.site-nav__link .icon {
  rotate: 180deg;
}

@media (min-width: 1700px) {
  .site-nav__link {
    font-size: 18px;
    letter-spacing: 3px;
  }
}

.site-nav__link:hover,
.site-nav__link[aria-current='page'] {
  color: var(--color-green-secondary);
  text-decoration: none;
}

.site-header--transparent:not(.is-scrolled) .site-nav__link:hover,
.site-header--transparent:not(.is-scrolled) .site-nav__link[aria-current='page'] {
  color: var(--color-white);
  opacity: 0.75;
}

/* The panel is wider than the nav, so it centers on .site-header (sticky or fixed, so
   already a containing block) instead of on Locations, which sits too far left to
   center a 1150px panel under. */
.site-nav__item.has-menu {
  position: static;
}

.site-nav__item.has-menu .site-nav__link {
  position: relative;
}

/* The panel starts at the header's bottom edge, below the link. This strip covers the
   gap so :hover holds while the pointer moves down onto the panel. */
.site-nav__item.has-menu .site-nav__link::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(var(--header-height) / 2);
}

.site-nav__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(1150px, calc(100vw - 2 * var(--gutter)));
  padding: 30px 50px 50px;
  /* Fixed height, per the design: more cities add columns to the right, never rows.
     Any columns past the panel's width scroll sideways. */
  overflow-x: auto;
  border-radius: 0 0 var(--radius-control-lg) var(--radius-control-lg);
  background: var(--color-white);
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  translate: -50% 6px;
  transition: opacity var(--duration-fast) var(--ease-out),
    translate var(--duration-fast) var(--ease-out),
    visibility var(--duration-fast);
}

.site-nav__item.has-menu:hover .site-nav__menu,
.site-nav__item.has-menu:focus-within .site-nav__menu {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}

/* 190px columns with an 80px gap fit four across at 1150px, which is what the states
   fill at this height. A fifth would sit empty. */
.loc-menu {
  /* Columns fill top to bottom in SortOrder, so the height decides where each column
     breaks. Balanced columns spread the states thin across every column that fits;
     400px keeps New York, New Jersey and Florida together in the first one. */
  height: 400px;
  column-width: 190px;
  column-gap: 80px;
  column-fill: auto;
  column-rule: 1px solid var(--border-subtle);
}

.loc-menu__state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 40px;
  break-inside: avoid;
}

.loc-menu__state-link {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 16px;
  font-weight: var(--weight-bold);
  line-height: 24px;
  color: var(--color-black);
  white-space: nowrap;
}

.loc-menu__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 16px;
  border-radius: 2px;
  background: var(--color-rose-chip);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-bold);
  line-height: 12px;
  color: var(--color-white);
  text-transform: uppercase;
}

.loc-menu__city {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 24px;
  color: var(--color-black);
}

.loc-menu__state-link:hover,
.loc-menu__state-link:focus-visible {
  color: var(--color-green-primary);
  text-decoration: none;
}

.loc-menu__city:hover,
.loc-menu__city:focus-visible {
  color: var(--color-green-primary);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

/* --- Header actions --- */

.site-header__actions {
  display: flex;
  align-items: center;
  /* Off the spacing scale, as the design has it. */
  gap: 30px;
  flex: none;
}

.header-search {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 190px;
  /* The rule sits at the foot of a 41px box with the icon and the text centred in it,
     so the clearance under the text is the box, not padding. */
  height: 41px;
  border-bottom: 1px solid currentColor;
  opacity: 0.9;
}

.header-search__icon {
  flex: none;
  opacity: 0.8;
}

.header-search input {
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-size: var(--text-xs);
  color: inherit;
}

.header-search input::placeholder {
  color: currentColor;
  opacity: 0.7;
}

/* Google sizes the suggestion panel (.pac-container) to its input, and the header's
   190px field truncated most destinations. Google writes the width inline, so the
   floor needs !important; the panel stays anchored at the field's left edge and the
   extra width extends to the right. */
.pac-container {
  min-width: 320px !important;
}

.site-header__phone {
  font-family: var(--font-ui);
  font-size: 25px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  color: inherit;
  white-space: nowrap;
}

.site-header__phone:hover {
  text-decoration: none;
  color: var(--color-green-secondary);
}

.site-header__account {
  color: inherit;
}

.site-header__icon-only {
  display: none;
  color: inherit;
}

/* ============================================================
   Mobile drawer
   ============================================================ */

.site-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
}

.site-drawer__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: min(320px, 86vw);
  padding: var(--space-6);
  background: var(--color-white);
  color: var(--text-primary);
  box-shadow: var(--shadow-float);
  animation: drawer-in var(--duration-base) var(--ease-out);
}

@keyframes drawer-in {
  from {
    translate: -100% 0;
  }
}

.site-drawer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--color-green-primary);
}

.site-drawer__list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.site-drawer__list a {
  display: block;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--text-primary);
}

.site-drawer__scrim {
  position: absolute;
  inset: 0;
  background: var(--surface-scrim);
  cursor: pointer;
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--surface-dark);
  color: var(--text-inverse);
}

.site-footer a {
  color: inherit;
}

/* Figma `175:19201`: 40px top / 60px bottom inside the band, 50px between the two
   rows, and the hairline sitting 159px down from the band's top edge. */
.site-footer__top-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-10);
  padding-top: var(--space-10);
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__lockup {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* Sits in the contact block and reads at its 20/26, so only the <address> italic needs
   undoing. */
.site-footer__address {
  font-style: normal;
  color: var(--text-inverse);
}

/* Left-aligned in its own 497px column, not ranged right against the edge. */
.site-footer__statement {
  flex: none;
  width: 517px;
  max-width: 100%;
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 28px;
  line-height: 40px;
  font-weight: var(--weight-bold);
  text-align: left;
}

/* Figma's four columns and 117px gutter need 1451px to fit. Below that the fixed
   tracks used to overflow the page — the footer was setting the document's scroll width
   on every page from 900px up to 1440px. The columns now shrink before they wrap. */
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 346px) minmax(0, 180px) minmax(0, 180px) minmax(0, 346px);
  justify-content: start;
  gap: clamp(var(--space-8), 6.5vw, 117px);
  padding-block: 50px 60px;
}

.site-footer__contact-numbers {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  font-size: 20px;
  line-height: 26px;
}

.site-footer__column-title {
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 16px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.32px;
  text-transform: uppercase;
  color: var(--text-inverse);
  opacity: 0.5;
}

.site-footer__column ul {
  display: flex;
  flex-direction: column;
  font-size: var(--text-body);
  line-height: 26px;
}

.site-footer__column a:hover {
  color: var(--color-green-secondary);
}

.site-footer__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  font-size: 20px;
  line-height: 26px;
  color: var(--text-inverse);
}

.site-footer__cta .btn {
  height: 50px;
  padding-inline: 40px;
  border-radius: var(--radius-control);
  font-size: 20px;
  letter-spacing: 1.4px;
}

.site-footer__bar {
  background: var(--surface-dark-alt);
}

.site-footer__bar-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: 30px;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  letter-spacing: -0.16px;
  color: var(--text-inverse);
}

/* The copyright sits in a <small>, which the browser shrinks to 13px. The design has it
   at the bar's 16px. */
.site-footer__bar-inner small {
  font-size: inherit;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-footer__social a:hover {
  color: var(--color-white);
}

/* ============================================================
   Cookie banner
   ============================================================ */

/* The markup is Views/Shared/_CookieConsentPartial.cshtml, shared with every other site
   and written for Bootstrap. This theme loads no Bootstrap, so the rules key off the
   partial's own id and classes instead of changing the partial. */
#cookieConsent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-header);
  /* The right side stays clear of the chat bubble, which is pinned to the same corner. */
  padding: var(--space-4) 88px var(--space-4) var(--gutter);
  background: var(--surface-dark);
  box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.18);
  color: var(--text-inverse);
}

#cookieConsent p {
  max-width: var(--container-max);
  margin: 0 auto;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
}

#cookieConsent a {
  color: inherit;
  text-decoration: underline;
}

#cookieConsent a:hover {
  color: var(--color-green-secondary);
}

#cookieConsent .closecookiebtn {
  margin-left: var(--space-3);
  padding: var(--space-1) var(--space-5);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-green-primary);
  color: var(--text-inverse);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 1px;
  cursor: pointer;
}

#cookieConsent .closecookiebtn:hover {
  background: var(--color-green-secondary);
}

/* The OK button already dismisses the banner. Without Bootstrap's glyph the second
   close button is an empty box. */
#cookieConsent .close {
  display: none;
}

/* ============================================================
   Responsive
   ============================================================ */

/* The header runs out of room well above the old 1180 breakpoint, so it sheds width in
   stages rather than overflowing all the way down to the 900px burger.
   At the sizes the design draws, the row measures 1488px and so needs a 1536px window
   with nothing to spare. The first stage starts at 1600 to leave room for a fallback
   face to render wider than the one those numbers came off. The lockup sheds here as
   well: the 75px in the design only ever had a 1920 canvas to sit on. */
@media (max-width: 1600px) {
  /* Stepping the lockup here takes the bar's height down with it. */
  :root {
    --header-lockup: 58px;
  }

  .site-nav__list {
    gap: var(--space-5);
  }

  .header-search {
    width: 150px;
  }

  .site-header__inner {
    gap: var(--space-5);
  }
}

@media (max-width: 1400px) {
  /* The field goes first; the icon button keeps search reachable. */
  .header-search {
    display: none;
  }

  .site-header__icon-only {
    display: inline-flex;
  }

  /* chrome.js drops the same form into a strip under the header bar. .site-header is
     sticky, so it is already the containing block for this. */
  .site-header.is-search-open .header-search {
    display: flex;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    width: auto;
    /* The strip is padded, not a fixed-height field. */
    height: auto;
    gap: var(--space-3);
    padding: var(--space-4) var(--gutter);
    /* Its own colours, not the header's: over the hero photograph the transparent
       header paints this white on white. */
    background: var(--color-white);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    opacity: 1;
  }

  .site-header.is-search-open .header-search input {
    font-size: var(--text-body);
  }
}

@media (max-width: 1280px) {
  .site-header__phone {
    display: none;
  }
}

/* Four footer columns cannot shrink past the phone numbers in the first one, so they
   wrap to two before that point rather than setting the page's scroll width. */
@media (max-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .site-footer__cta {
    grid-column: 1 / -1;
  }
}

/* Below this the six nav items no longer fit alongside the logo and the icons, so the
   drawer takes over — earlier than the 900px the rest of the mobile layout uses. */
@media (max-width: 1000px) {
  .site-header__burger {
    display: inline-flex;
  }

  .site-nav {
    display: none;
  }
}

@media (max-width: 1180px) {
  .site-nav__list {
    gap: var(--space-4);
  }

  .site-nav__link {
    font-size: var(--text-sm);
    letter-spacing: 2px;
  }
}

@media (max-width: 1024px) {
  .header-search,
  .site-header__phone {
    display: none;
  }

  .site-header__icon-only {
    display: inline-flex;
  }
}

@media (max-width: 900px) {
  .site-header__burger {
    display: inline-flex;
  }

  .site-nav {
    display: none;
  }

  .site-header .site-logo {
    --logo-height: 40px;
  }

  .site-footer__top-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }

  .site-footer__statement {
    text-align: left;
    font-size: var(--text-h4);
    line-height: 28px;
  }

  .site-footer__statement {
    width: auto;
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .site-footer__cta {
    gap: var(--space-6);
  }

  .site-footer__cta {
    grid-column: 1 / -1;
  }

  .site-footer__cta .btn {
    width: 100%;
    min-height: 56px;
  }

  /* Mobile footer (`1:3563`): near-desktop type, and the social row large and
     centered above the centered copyright line. */
  .site-footer .site-logo--footer {
    --logo-height: 56px;
  }

  .site-footer__contact-numbers {
    font-size: 22px;
    line-height: 32px;
  }

  .site-footer__statement {
    font-size: 22px;
    line-height: 32px;
  }

  .site-footer__column ul {
    font-size: 20px;
    line-height: 40px;
  }

  .site-footer__bar-inner {
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--space-5);
    text-align: center;
  }

  .site-footer__social {
    gap: 56px;
  }

  .site-footer__social .icon,
  .site-footer__social svg {
    width: 26px !important;
    height: 26px !important;
  }
}

@media (max-width: 560px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}