/* ───────────────────────────────────────────────────────────────────
   Wedding site — styles
   Bootstrap 4 supplies the grid, components, and utilities; we layer
   our wedding-specific identity on top.

   Bootstrap is imported into its own cascade layer so the rest of
   this file can override it via plain selectors rather than via
   specificity hacks or !important.
   ─────────────────────────────────────────────────────────────────── */

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


/* ───────────────────────────────────────────────────────────────────
   Tokens
   ─────────────────────────────────────────────────────────────────── */
:root {
  --color-primary: #ff4040;
  --color-primary-active: #b30000; /* darken(--color-primary, 20%) */
  --color-text: #545454;
  --color-muted: #a8a8a8;
  --color-disabled-bg: #f0f0f0; /* slightly lighter than Bootstrap's default #e9ecef for disabled inputs */

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


/* ───────────────────────────────────────────────────────────────────
   Cascade layers (lowest → highest precedence)
   ─────────────────────────────────────────────────────────────────── */
@layer bootstrap, base, layout, components, pages;


/* ───────────────────────────────────────────────────────────────────
   Base — minimal reset + body type
   ─────────────────────────────────────────────────────────────────── */
@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);
  }
}


/* ───────────────────────────────────────────────────────────────────
   Layout — app shell + canvas background
   ─────────────────────────────────────────────────────────────────── */
@layer layout {
  .app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Bootstrap's .container handles horizontal padding + responsive
     max-width; we only add vertical breathing room. */
  .container {
    padding-block: 40px;
  }

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


/* ───────────────────────────────────────────────────────────────────
   Components — site chrome + button overrides
   ─────────────────────────────────────────────────────────────────── */
@layer components {

  /* Red nav bar */
  .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"; /* middle dot · */
    margin: 0 10px;
    color: white;
  }

  /* The 1px red line that sits just below the nav bar */
  header hr {
    margin-top: 2px;
    margin-bottom: 0;
    border-top: 1px solid var(--color-primary);
    border-bottom: 0;
  }

  /* Re-color Bootstrap's primary button to wedding red.
     Hover + active are scoped to enabled buttons only so that
     disabled buttons remain visually inert. */
  .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; /* override Bootstrap's default .65 — we use grey instead */
  }

  /* Disabled form controls feel disabled — lighter background + not-allowed
     cursor. For input-groups, propagate the same bg treatment to the
     prepended label so the whole control reads as inert (uses :has()). */
  .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;
  }
}


/* ───────────────────────────────────────────────────────────────────
   Pages
   ─────────────────────────────────────────────────────────────────── */
@layer pages {

  /* Every inner-page heading shares the same bottom rhythm */
  .page-details h1,
  .page-accommodation h1,
  .page-rsvp h1 {
    margin-bottom: 40px;
  }


  /* ── Home ───────────────────────────────────────────────────────── */
  .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; }

  /* Side photos hidden on mobile; only the main centered one shows */
  .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; }
  }


  /* ── Details ────────────────────────────────────────────────────── */
  .schedule-section .full-date {
    margin-bottom: 20px;
  }
  .schedule-section .full-date .date {
    color: var(--color-primary);
  }

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

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


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


  /* ── Map embeds (shared by Details + Accommodation) ─────────────── */
  .maps-container {
    height: 400px;
  }
  .maps-container iframe {
    width: 100%;
    height: 100%;
  }


  /* ── RSVP ───────────────────────────────────────────────────────── */
  .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);
  }
}