@import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css") layer(bootstrap);

:root {
  --color-primary: #ff4040;
  --color-primary-active: #b30000;
  --color-text: #545454;
  --color-muted: #a8a8a8;
  --color-disabled-bg: #f0f0f0;

  --font-body: "Open Sans", sans-serif;
  --font-display: "Great Vibes", cursive;
}

@layer bootstrap, base, layout, components, pages;

@layer base {
  html,
  body {
    margin: 0;
    height: 100%;
  }

  body {
    font-family: var(--font-body);
    color: var(--color-text);
  }

  h1 {
    font-family: var(--font-display);
  }

  a {
    color: var(--color-primary);
  }
}

@layer layout {
  .app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .container {
    padding-block: 40px;
  }

  #hearts-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
}

@layer components {
  .nav-bar {
    display: flex;
    justify-content: center;
    background-color: var(--color-primary);
  }
  .nav-bar nav {
    margin-block: 20px;
  }
  .nav-bar ul {
    margin: 0;
    padding: 0;
  }
  .nav-bar li {
    display: inline;
    list-style: none;
  }
  .nav-bar a {
    color: white;
    text-decoration: none;
  }
  .nav-bar a.is-active {
    border-bottom: 2px solid white;
  }
  .nav-bar .separator::after {
    content: "\00b7";
    margin: 0 10px;
    color: white;
  }

  header hr {
    margin-top: 2px;
    margin-bottom: 0;
    border-top: 1px solid var(--color-primary);
    border-bottom: 0;
  }

  .btn.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
  }

  .btn.btn-primary:hover:not(:disabled) {
    color: white;
    text-decoration: underline;
  }

  .btn.btn-primary:active:not(:disabled) {
    background-color: var(--color-primary-active);
  }

  .btn.btn-primary:disabled {
    background-color: var(--color-muted);
    border-color: var(--color-muted);
    color: white;
    cursor: not-allowed;
    opacity: 1;
  }

  .form-control:disabled {
    background-color: var(--color-disabled-bg);
    color: var(--color-muted);
    cursor: not-allowed;
  }

  .input-group:has(.form-control:disabled) .input-group-text {
    background-color: var(--color-disabled-bg);
    color: var(--color-muted);
    cursor: not-allowed;
  }
}

@layer pages {
  .page-details h1,
  .page-accommodation h1,
  .page-rsvp h1 {
    margin-bottom: 40px;
  }

  .names {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-family: var(--font-display);
    font-size: 48px;
  }

  .names .name {
    flex: 1 0 0;
    color: var(--color-muted);
  }

  .names .separator {
    margin: 0 20px;
    color: var(--color-primary);
    font-size: 36px;
  }

  .tag-line {
    margin-top: 40px;
    color: var(--color-muted);
    text-align: center;
  }

  .tag-line .emphasize {
    color: var(--color-primary);
    font-style: italic;
  }

  .photos {
    display: flex;
    justify-content: center;
    margin-top: 40px;
  }

  .photos .photo {
    width: 200px;
    height: 200px;
    border: 5px solid var(--color-muted);
    border-radius: 50%;
    background-size: cover;
    background-position: center;
  }

  .photos .photo.one {
    background-image: url("/assets/couple_1.jpg");
    margin-right: 40px;
  }

  .photos .photo.two {
    background-image: url("/assets/couple_2.jpg");
  }

  .photos .photo.three {
    background-image: url("/assets/couple_3.jpg");
    margin-left: 50px;
  }

  .photos .photo:not(.main) {
    display: none;
  }

  @media (min-width: 575px) {
    .names {
      flex-direction: row;
      font-size: 84px;
    }

    .names .name.bride {
      text-align: right;
    }

    .names .name.groom {
      text-align: left;
    }

    .names .separator {
      font-size: 84px;
    }

    .tag-line {
      margin-top: 20px;
    }

    .photos {
      margin-top: 60px;
    }

    .photos .photo:not(.main) {
      display: block;
    }
  }

  .schedule-section .full-date {
    margin-bottom: 20px;
  }

  .schedule-section .full-date .date {
    color: var(--color-primary);
  }

  .schedule th {
    text-align: right;
  }

  .schedule tr:first-of-type th,
  .schedule tr:first-of-type td {
    border-width: 0;
  }

  .venue-section {
    margin-top: 60px;
  }

  .booking-offer-row {
    margin-bottom: 40px;
  }
  .page-accommodation .description {
    margin-bottom: 20px;
  }
  .location-section {
    margin-top: 60px;
  }

  .maps-container {
    height: 400px;
  }

  .maps-container iframe {
    width: 100%;
    height: 100%;
  }

  .page-rsvp .description {
    margin-bottom: 40px;
  }

  .submit-msg {
    margin: 20px 0;
  }

  .response-group .form-check {
    margin-left: 20px;
  }

  .response-group .form-check strong {
    color: var(--color-primary);
  }
}