/***** VARIABLES *****/
/** Colors **/
:root {
  --background-primary: #5b514a;
  --background-primary-partial: rgba(64, 58, 53, 0.9);
  --background-secondary: #493b2e;
  --background-secondary-darker: #30271e;
  --accent-moss: #363930;
  --accent-gold-lighter: #ffb833;
  --accent-gold: #e8a423;
  --accent-gold-darker: #d49520;
  --text-primary: #f4f2ee;
  --text-primary-soft: #dedddc;
  --text-primary-dark: #291f10;
}

/***** FONTS *****/
/** Regular text **/
.quicksand-thin {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.quicksand-regular {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.quicksand-thick {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

/** Regular text or header **/
.merriweather-thin {
  font-family: "Merriweather", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.merriweather-regular {
  font-family: "Merriweather", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.merriweather-thick {
  font-family: "Merriweather", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/** Headers **/
.texturina-thin {
  font-family: "Texturina", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

.texturina-regular {
  font-family: "Texturina", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.texturina-thick {
  font-family: "Texturina", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.dm-serif-text-regular {
  font-family: "DM Serif Text", serif;
  font-weight: 400;
  font-style: normal;
}

.dm-serif-text-regular-italic {
  font-family: "DM Serif Text", serif;
  font-weight: 400;
  font-style: italic;
}

.rye-regular {
  font-family: "Rye", serif;
  font-weight: 400 !important;
  font-style: normal;
}


/***** GLOBAL *****/
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: var(--text-primary) !important;
    background: linear-gradient(var(--background-primary-partial), var(--background-primary-partial)), url("../images/topography-bg.avif");

    /* Default font */
    font-family: "Merriweather", serif !important;
    font-optical-sizing: auto;
    font-weight: 300 !important;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
}


/***** COMPONENTS *****/
.btn-primary {
    color: #f2f9ff !important;
    background-color: var(--accent-gold-darker) !important;
    border-color: var(--background-primary) !important;
}

.coming-soon {
  pointer-events: none;
  cursor: default;
}

.header-text {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin: auto;
}

.section-divider {
  background-color: var(--background-secondary-darker);
  height: 2px;
  width: 100%;
  margin: 20px 0;
  border-radius: 50%;
}

/***** NAVBAR/HEADER *****/
header {
    padding: 20px 35px;
}

#navbar .navbar-container {
    gap: 2vw;
    align-items: center;
    position: relative;
    z-index: 105;
}

#navbar .navbar-brand {
    text-decoration: none;
    font-size: 2rem;

    & > img {
      height: clamp(40px, 15vw, 100px);
    }
}

#navbar .nav-link {
    color: white;
    text-decoration: none;
    font-size: 1.25rem;

    @media (max-width: 767px) {
      color: var(--background-secondary-darker) !important;
    }
}

#contact-link {
    padding: 10px 30px;
}

/* keep header positioning */
header {
    position: relative;
    padding: 20px 35px;
    z-index: 100;
}

/* navbar container flex layout for desktop/expanded view */
#navbar .navbar-container {
    display: flex;
    gap: 2vw;
    align-items: center;     /* keeps items on same y-axis */
    position: relative;
    z-index: 105;
}

/* nav list alignment when expanded */
#navbar .navbar-collapse {
    /* revert to default behavior on desktop */
    position: static;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* ensure nav items and contact button align vertically with brand */
#navbar .navbar-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* contact sits to the right when expanded */
#navbar .navbar-collapse > a#contact-link,
#navbar .navbar-collapse > .btn#contact-link {
    margin-left: 1rem;
}

#navbarContent {
  border-radius: 10px;
  justify-content: end;
}

/* General */
p.building-img-subtitle {
    font-size: 12px;
    text-align: center;
    margin-bottom: 0;
}

.light-page-section {
    background-color: var(--background-secondary-darker);
    color: white;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 30px 10vw 50px 10vw;

    @media (max-width: 575px) {
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }
}

.text-gold {
  color: var(--accent-gold-lighter) !important;
}

/* --- Mobile-only overlay styles --- */
@media (max-width: 767px) {
    /* overlay the collapse below the navbar-brand */
    #navbar .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 6px 18px rgba(0,0,0,0.12);
        z-index: 1000;
        padding: 1rem 1.25rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    /* center nav links and stack vertically */
    #navbar .navbar-collapse .navbar-nav {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding-left: 0;
        margin: 0;
        list-style: none;
    }

    /* ensure each nav-item is full-width for easier tapping but centered content */
    #navbar .navbar-collapse .nav-item {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* center contact button even though it's outside the .navbar-nav */
    #contact-link {
        display: inline-block;
        margin: 0.5rem auto 0;
        width: auto;
    }

    /* remove desktop alignment margins that could push things left */
    #navbar .navbar-collapse > #contact-link,
    #navbar .navbar-collapse > .btn#contact-link,
    #navbar .navbar-collapse .ms-auto,
    #navbar .navbar-collapse .me-auto {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* keep the toggler aligned to the right */
    .navbar-toggler {
      filter: invert(1);
        margin-left: auto;
        font-size: 16px;
        padding: .25rem .5rem;
    }

    /* override display flex when collapsed */
    #navbar .collapse:not(.show) {
        display: none;
    }
}

.copyright-footer {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 0 20px;

    & > div {
        font-size: 12px;
        padding: 10px 5px;

        & > a {
            text-decoration: none;
            color: var(--text-primary);
        }
    }
}

.thank-you-text {
  font-size: 18px;
  text-align: center;
  padding: 20vh 10px 40vh;
}

.btn-outline-secondary {
  color: var(--text-primary-soft) !important;
  border-color: var(--text-primary-soft) !important;
  transition: background-color ease 0.5s, border ease 0.5s, color ease 0.5s;

  &:hover {
    background-color: color-mix(in srgb, white 15%, var(--background-secondary-darker)) !important;
    border: 1px solid color-mix(in srgb, black 15%, var(--text-primary-soft));
    color: color-mix(in srgb, black 5%, var(--text-primary-soft));
  }
}

/* ===== Legal Hero Section ===== */

.legal-hero {
    padding: 80px 0 40px;
    background-color: var(--background-secondary-darker);
}

.legal-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.legal-effective {
    font-size: 0.95rem;
    color: var(--text-primary-soft);
}

/* ===== Legal Content ===== */

.legal-content {
    padding: 40px 0 80px;
}

.legal-section {
    width: 80%;
    margin: 0 auto 40px;

    a {
      color: var(--accent-gold-darker) !important;
    }
}

.legal-section h2 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.legal-section p {
    margin-bottom: 12px;
    line-height: 1.7;
    font-size: 0.95rem;
}

.legal-section ul {
    margin-bottom: 15px;
    padding-left: 20px;
}

.legal-section li {
    margin-bottom: 6px;
    font-size: 0.95rem;
}