/**
 * Design-system composition variants (core.design_schema COMPOSITION,
 * docs/design-system-schema.md).
 *
 * <body> carries one ds-<choice>-<option> class per composition choice. This
 * file styles ONLY the non-default options, so a site on every default (Blue
 * Zone) matches no rule here at all — core/tests_design_schema.py fails on a
 * selector that is not keyed on a non-default option. Paint with slots only.
 */

/* ---------------------------------------------------------------
   header: light — the page ground under the full mark, a hairline below
   --------------------------------------------------------------- */
body.ds-header-light {
  --nav-hover-color: var(--brand-primary);
  --nav-active-color: var(--brand-primary);
}
.ds-header-light #header,
.ds-header-light.index-page #header,
.ds-header-light:not(.index-page) #header {
  background-color: var(--brand-header);
  border-bottom: 1px solid var(--brand-hairline);
}
.ds-header-light.index-page.scrolled #header {
  background-color: rgba(var(--brand-header-rgb), 0.97);
  box-shadow: var(--brand-shadow-header);
}
.ds-header-light.index-page {
  padding-top: var(--header-height);  /* the hero no longer runs under a clear header */
}
.ds-header-light .header-logo-img {
  width: auto;
  max-width: 120px;
  height: 44px;
}

/* ---------------------------------------------------------------
   hero: lockup — the brand's card set in live type on the page ground
   --------------------------------------------------------------- */
.ds-hero-lockup #hero {
  display: block !important;  /* beats Bootstrap's .d-flex !important */
  height: auto;
  min-height: 0;
  padding: var(--brand-space-xl) 0 0;
  background: var(--brand-page);
  text-align: center;
  overflow: hidden;
}
.ds-hero-lockup #hero::before,
.ds-hero-lockup #hero::after {
  display: none;
}
.ds-hero-lockup #hero .hero-content-overlay {
  padding-bottom: var(--brand-space-md);
}
.ds-hero-lockup #hero .hero-mark {
  display: block;
  width: min(300px, 62vw);
  height: auto;
  margin: 0 auto var(--brand-space-xs);
}
.ds-hero-lockup #hero .brand-title {
  color: var(--brand-rating);
  text-shadow: none;
  line-height: 1.05;
  margin-bottom: 0;
}
.ds-hero-lockup #hero .hero-lead-in {
  display: block;
  font-family: var(--heading-font);
  font-size: var(--brand-type-lead-in-size);
  font-weight: var(--brand-type-lead-in-weight);
  line-height: var(--brand-type-lead-in-leading);
  letter-spacing: 0;
}
.ds-hero-lockup #hero .hero-subtext {
  font-size: var(--brand-type-tagline-size);
  font-weight: var(--brand-type-tagline-weight);
  letter-spacing: var(--brand-type-tagline-tracking);
  line-height: 1.25;
  color: var(--brand-voice-ink);
  text-shadow: none;
  margin-top: var(--brand-space-xs);
}
.ds-hero-lockup #hero .ds-flourish {
  display: block;
  width: 150px;
  height: 14px;
  margin: var(--brand-space-xs) auto 0;
  color: var(--brand-rule);
}
.ds-hero-lockup #hero .hero-search-form {
  margin-top: var(--brand-space-lg);
}
.ds-hero-lockup #hero .search-form-inner {
  background: var(--brand-raised);
  border: 1px solid var(--brand-hairline);
  box-shadow: var(--brand-shadow-soft);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ds-hero-lockup #hero .hero-tagline {  /* the short note under the search */
  font-family: var(--default-font);
  font-style: normal;
  font-size: var(--brand-type-small-size);
  font-weight: var(--brand-type-small-weight);
  letter-spacing: 0;
  color: var(--brand-muted);
  text-shadow: none;
  margin-top: var(--brand-space-sm);
}
@media (max-width: 768px) {
  .ds-hero-lockup #hero {
    min-height: 0;
    padding: var(--brand-space-lg) 0 0;
  }
  .ds-hero-lockup #hero .hero-subtext {
    font-size: var(--brand-type-tagline-size-mobile);
  }
}

/* ---------------------------------------------------------------
   motif: waves — two tinted watercolor bands at the foot of the hero
   --------------------------------------------------------------- */
.ds-motif-waves .ds-waves {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 90px;
  margin-top: calc(-1 * var(--brand-space-xs));
}
@media (max-width: 768px) {
  .ds-motif-waves .ds-waves { height: 48px; }
}

/* ---------------------------------------------------------------
   sections: washes — the listings on the first wash, light bands on the second
   --------------------------------------------------------------- */
.ds-sections-washes #listings {
  --background-color: var(--brand-wash-1);
}
.ds-sections-washes .light-background {
  --background-color: var(--brand-wash-2);
}
.ds-sections-bands .light-background {
  --background-color: var(--brand-band);
  --default-color: var(--brand-on-band);
  --heading-color: var(--brand-on-band);
}

/* ---------------------------------------------------------------
   separator under a section title
   --------------------------------------------------------------- */
.ds-separator-flourish .section-title h2::after {
  width: 150px;
  height: 14px;
  border-radius: 0;
  background: var(--brand-rule);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 14'%3E%3Cpath d='M3 10 C 45 1, 105 1, 147 8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 14'%3E%3Cpath d='M3 10 C 45 1, 105 1, 147 8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ds-separator-rule .section-title h2::after {
  width: 96px;
  height: 1px;
  border-radius: 0;
}
.ds-separator-none .section-title h2::after {
  display: none;
}

/* ---------------------------------------------------------------
   cards and buttons
   --------------------------------------------------------------- */
.ds-cards-outline .card,
.ds-cards-outline .bz-listing-card,
.ds-cards-outline .resort-item-card {
  box-shadow: none;
  border: 1px solid var(--brand-hairline);
}
.ds-cards-flat .card,
.ds-cards-flat .bz-listing-card,
.ds-cards-flat .resort-item-card {
  box-shadow: none;
}
.ds-buttons-pill .btn-primary,
.ds-buttons-pill .btn-outline-primary,
.ds-buttons-pill .reserve-btn,
.ds-buttons-pill .checkout-submit-btn {
  border-radius: var(--brand-radius-full);
}
.ds-buttons-square .btn-primary,
.ds-buttons-square .btn-outline-primary,
.ds-buttons-square .reserve-btn,
.ds-buttons-square .checkout-submit-btn {
  border-radius: var(--brand-radius-xs);
}

/* ---------------------------------------------------------------
   icons: circle — the business card's contact block
   --------------------------------------------------------------- */
.ds-icons-circle .ds-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--brand-space-xs);
  text-align: left;
}
.ds-icons-circle .ds-contact-list li {
  display: flex;
  align-items: center;
  gap: var(--brand-space-sm);
  min-width: 0;
}
.ds-icons-circle .ds-contact-list a {
  color: var(--brand-text);
  overflow-wrap: anywhere;
}
.ds-icons-circle .ds-contact-list a:hover {
  color: var(--brand-link);
}
.ds-icons-circle .ds-dot {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--brand-radius-full);
  display: grid;
  place-items: center;
  color: var(--brand-text);
  font-size: 1.05rem;
}
.ds-icons-circle .ds-fill-1 { background: var(--brand-fill-1); }
.ds-icons-circle .ds-fill-2 { background: var(--brand-fill-2); }
.ds-icons-circle .ds-fill-3 { background: var(--brand-fill-3); }

/* ---------------------------------------------------------------
   tagline: voice — and the host's signed name
   --------------------------------------------------------------- */
.ds-tagline-voice .hero-tagline,
.ds-tagline-voice.ds-hero-lockup #hero .hero-subtext {
  font-family: var(--voice-font);
  font-style: normal;
}
.ds-signature-signed .owner-note-signature {
  font-family: var(--voice-font);
  font-size: var(--brand-type-signature-size);
  font-weight: var(--brand-type-signature-weight);
  line-height: var(--brand-type-signature-leading);
  color: var(--brand-voice-ink);
  margin: var(--brand-space-xs) 0 0;
}
/* With tinted icons the host card's highlight chips join them (Bootstrap's
   .bg-primary/.text-primary utilities are !important and Bootstrap-blue). */
.ds-icons-circle .card .badge.bg-primary {
  background-color: var(--brand-fill-2) !important;
  color: var(--brand-text) !important;
}