/*
  base.css
  Global reset, CSS variables, typography, and shared utility/component styles.

  Breakpoints (for reference — use literal values in @media queries):
    sm-min:  320px
    sm-max:  600px
    md-min:  601px
    md-max:  1023px
    lg-min:  1024px
    lg-max:  1440px
*/

/* ─── Variables ──────────────────────────────────────────────────────────── */

:root {
  /* Colors */
  --emerald:          #267055;
  --gold:             #B69640;
  --gold-hover:       #c1a24f;  /* scale-color(--gold, lightness +10%) */
  --dark-gold:        #876E2A;
  --faded-gold:       #daca9f;
  --super-faded-gold: #f4efe3;
  --jade:             #263e36;
  --slate:            #425C76;
  --linen:            #f5f5f5;
  --asphalt:          #242424;
  --dirty-linen:      #f2f2f4;
  --ash:              #5d5d5d;
  --border-muted:     #a7a7a7;  /* scale-color(--asphalt, lightness +60%) */

  /* Typography */
  --poppins: 'Poppins', sans-serif;
  --unical:  'Uncial Antiqua', cursive;

  /* Form spacing */
  --form-gap:      1rem;
  --col2-gap-calc: calc(var(--form-gap) / 2);
  --col3-gap-calc: calc(var(--form-gap) / 3);
}


/* ─── Reset & base ───────────────────────────────────────────────────────── */

html {
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--poppins);
  background-color: var(--dirty-linen);
  color: var(--asphalt);
  margin: 0;
  padding: 0;
}

html.noscroll,
body.noscroll {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

p {
  margin: 0;
  margin-bottom: 1rem;

  & strong {
    font-weight: 600;
  }
}


/* ─── Typography ─────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--unical);
}

h2 {
  font-family: var(--unical);
  font-size: calc(1rem + 5vw);
  font-weight: 500;
  color: var(--emerald);

  @media screen and (min-width: 601px) {
    font-size: 3rem;
  }
}

h3 {
  font-family: var(--unical);
  font-size: calc(1rem + 3vw);
  font-weight: 500;
  color: var(--emerald);

  @media screen and (min-width: 601px) {
    font-size: calc(2rem + 0.75vw);
  }
}

h4 {
  margin: 0;
  color: black;
  font-size: 1rem;
  font-weight: 600;
}

.main-heading,
.main-heading--centered {
  color: var(--emerald);
  font-size: calc(1rem + 5vw);

  @media screen and (min-width: 601px) {
    font-size: calc(3rem + 1vw);
  }
}

.main-heading--centered {
  text-align: center;
}

.emphasis {
  font-family: var(--poppins);
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 700;
  text-align: center;
}


/* ─── Utility classes ────────────────────────────────────────────────────── */

.hidden {
  display: none;
}

.bold {
  font-weight: 700;
}

.centered-text {
  text-align: center;
}

.white-text {
  color: var(--linen);
}

.gold-background {
  background-color: var(--super-faded-gold);
}

.gold-rule {
  border: none;
  border-top: 3px solid var(--gold);
  width: 100%;
  margin: 50px auto;
}


/* ─── Links ──────────────────────────────────────────────────────────────── */

.text-link {
  color: var(--emerald);
  font-weight: 600;

  &:hover {
    color: var(--gold);
  }
}

.text-link--external {
  color: var(--emerald);
  font-weight: 600;

  &:hover {
    color: var(--gold);

    &::after {
      background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M497.6,0L334.4,0.17C326.5,0.17 320,6.67 320,14.57L320,47.88C320,47.881 320,47.882 320,47.883C320,55.783 326.5,62.283 334.4,62.283C334.497,62.283 334.593,62.282 334.69,62.28L408.32,59.56L410.38,61.62L131.52,340.49C129.261,342.741 127.991,345.801 127.991,348.99C127.991,352.179 129.261,355.239 131.52,357.49L154.52,380.49C156.771,382.749 159.831,384.019 163.02,384.019C166.209,384.019 169.269,382.749 171.52,380.49L450.38,101.62L452.44,103.68L449.72,177.31C449.718,177.407 449.717,177.503 449.717,177.6C449.717,185.5 456.217,192 464.117,192C464.118,192 464.119,192 464.12,192L497.43,192C505.33,192 511.83,185.5 511.83,177.6L512,14.4C512,6.5 505.5,0 497.6,-0ZM432,288L416,288C407.223,288 400,295.223 400,304L400,458C400,461.292 397.292,464 394,464L54,464C50.708,464 48,461.292 48,458L48,118C48,114.708 50.708,112 54,112L208,112C216.777,112 224,104.777 224,96L224,80C224,71.223 216.777,64 208,64L48,64C21.668,64 -0,85.668 0,112L0,464C0,490.332 21.668,512 48,512L400,512C426.332,512 448,490.332 448,464L448,304C448,295.223 440.777,288 432,288Z' style='fill:rgb(182,150,64);fill-rule:nonzero;'/%3E%3C/svg%3E%0A");
    }
  }

  &::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M497.6,0L334.4,0.17C326.5,0.17 320,6.67 320,14.57L320,47.88C320,47.881 320,47.882 320,47.883C320,55.783 326.5,62.283 334.4,62.283C334.497,62.283 334.593,62.282 334.69,62.28L408.32,59.56L410.38,61.62L131.52,340.49C129.261,342.741 127.991,345.801 127.991,348.99C127.991,352.179 129.261,355.239 131.52,357.49L154.52,380.49C156.771,382.749 159.831,384.019 163.02,384.019C166.209,384.019 169.269,382.749 171.52,380.49L450.38,101.62L452.44,103.68L449.72,177.31C449.718,177.407 449.717,177.503 449.717,177.6C449.717,185.5 456.217,192 464.117,192C464.118,192 464.119,192 464.12,192L497.43,192C505.33,192 511.83,185.5 511.83,177.6L512,14.4C512,6.5 505.5,0 497.6,-0ZM432,288L416,288C407.223,288 400,295.223 400,304L400,458C400,461.292 397.292,464 394,464L54,464C50.708,464 48,461.292 48,458L48,118C48,114.708 50.708,112 54,112L208,112C216.777,112 224,104.777 224,96L224,80C224,71.223 216.777,64 208,64L48,64C21.668,64 -0,85.668 0,112L0,464C0,490.332 21.668,512 48,512L400,512C426.332,512 448,490.332 448,464L448,304C448,295.223 440.777,288 432,288Z' style='fill:rgb(38,112,85);fill-rule:nonzero;'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: contain;
  }
}


/* ─── Legacy button classes (green-button, white-button) ─────────────────── */

.green-button {
  display: inline-block;
  background-color: var(--emerald);
  padding: 10px 20px;
  border-radius: 30px;
  border: 2px solid var(--emerald);
  transition: background-color 0.3s ease, color 0.3s ease;

  & a {
    color: var(--linen);
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    display: block;
    text-align: center;
  }

  &:hover {
    background-color: var(--linen);
    border-color: var(--emerald);

    & a {
      color: var(--emerald);
    }
  }
}

.white-button a {
  display: block;
  background-color: var(--linen);
  border-radius: 30px;
  border: 2px solid var(--emerald);
  box-sizing: border-box;
  color: var(--emerald);
  margin: 0 auto;
  max-width: 340px;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.white-button:hover {
  background-color: var(--emerald);
  color: var(--linen);

  & a {
    color: white;
  }
}


/* ─── CTA Button system ──────────────────────────────────────────────────── */

/*
  Shared base styles for all CTA buttons.
  Dark variant: .cta--register, .cta--schedule, .cta--tickets-stay
  Light variant: .cta--choose-gm, .cta--explore, .cta--learn-more, .btn--explore
*/

.cta--register,
.cta--schedule,
.cta--tickets-stay,
.cta--choose-gm,
.cta--explore,
.cta--learn-more,
.btn--explore {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 240px;
  height: 44px;
  padding: 0 1rem;
  border-radius: 22px;
  font-size: 16px;
  font-family: var(--poppins);
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  overflow: hidden;

  @media screen and (min-width: 1024px) {
    padding: 0 40px;
    font-size: 18px;
    transition: all 125ms ease-in-out;
  }
}

/* Dark variant */
.cta--register,
.cta--schedule,
.cta--tickets-stay {
  border: 2px solid var(--emerald);
  background-color: var(--emerald);
  color: var(--linen);

  &:hover {
    background-color: var(--super-faded-gold);
    color: var(--emerald);
  }
}

/* Light variant */
.cta--choose-gm,
.cta--explore,
.cta--learn-more,
.btn--explore {
  border: 2px solid var(--emerald);
  background-color: var(--linen);
  color: var(--emerald);

  &:hover {
    background-color: var(--emerald);
    color: var(--super-faded-gold);
  }
}

/* Positional overrides */
.cta--choose-gm,
.cta--schedule,
.cta--tickets-stay {
  margin: 0 auto;
}

.cta--footer {
  margin-top: 20px;

  @media screen and (max-width: 600px) {
    margin: 20px auto 0;
  }
}

.cta--choose-gm {
  @media screen and (max-width: 600px) {
    letter-spacing: -0.01em;
  }
}