/* ---------------------------------------- */
/* GLOBAL RESET                             */
/* ---------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---------------------------------------- */
/* ROOT VARIABLES                           */
/* ---------------------------------------- */

:root {
  --board-width: 1440;
  --board-height: 850;
  --footer-height: 3.5rem;
}

/* ---------------------------------------- */
/* BODY BACKGROUND (TILED CORKBOARD)        */
/* ---------------------------------------- */

body {
  margin: 0;

  background-color: #d9b98f;
  background-image: url("./images/corkboard.png");
  background-repeat: repeat;

  /* adjust this number to reduce pixelation */
  background-size: 1500px auto;

  font-family: system-ui, sans-serif;
}

/* ---------------------------------------- */
/* PAGE LAYOUT                              */
/* ---------------------------------------- */

.showcase-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------- */
/* DESKTOP BOARD (SMART SCALING + CENTERING)*/
/* ---------------------------------------- */

.desktop-board {
  position: relative;

  width: min(
    100vw,
    calc(
      (100vh - var(--footer-height)) * var(--board-width) / var(--board-height)
    )
  );

  aspect-ratio: var(--board-width) / var(--board-height);

  /* THIS centers it vertically when extra space exists */
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;

  overflow: visible;
}

/* ---------------------------------------- */
/* IMAGE LAYERS                             */
/* ---------------------------------------- */

.board-img {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
}

/* Base layer */
.board-img--headline,
.board-img--paragraph,
.board-img--day1,
.board-img--day2 {
  z-index: 10;
}

/* Pins layer */
.board-img--pins {
  z-index: 20;
}

/* Clickable layer */
.board-link {
  position: absolute;
  display: block;
  z-index: 30;
}

.board-link img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------------------------------------- */
/* POSITIONING (EDIT THESE FROM FIGMA)      */
/* ---------------------------------------- */

.board-img--headline {
  left: 1.25%;
  top: -5%;
  width: 48%;
}

.board-img--paragraph {
  left: 49.4%;
  top: -0.3%;
  width: 45%;
}

.board-img--day1 {
  left: 5.5%;
  top: 44%;
  width: 36%;
}

.board-img--day2 {
  left: 58%;
  top: 44%;
  width: 36%;
}

.board-img--pins {
  left: 11.5%;
  top: -0.5%;
  width: 76.5%;
}

/* CLICKABLE ITEMS */

.board-link--day1-rsvp {
  left: 26%;
  top: 44%;
  width: 17%;
}

.board-link--day2-rsvp {
  left: 77.5%;
  top: 47.5%;
  width: 20%;
}

.board-link--archives {
  left: 44%;
  top: 82.5%;
  width: 18%;
}

/* ---------------------------------------- */
/* FOOTER                                   */
/* ---------------------------------------- */

.idm-showcase__footer {
  width: 100%;
  min-height: var(--footer-height);

  /* remove margin-top:auto so board can center */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;

  background: #5a341d;
}

/* ---------------------------------------- */
/* FOOTER ICONS (FIXED SCALING ISSUE)       */
/* ---------------------------------------- */

/*
  KEY FIX:
  You must control the <img>, not just the container
*/

.footer-icons {
  width: 8rem; /* shrink group */
  transform: translateY(0.25rem); /* vertical alignment tweak */
}

.footer-icon-row {
  display: inline-flex;
  align-items: center;
}

.footer-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  width: 3rem;
  height: 3rem;
}

/* THIS is what actually changes icon size */
.footer-icon img {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}

/* ---------------------------------------- */
/* INVERT ICON COLORS (BLACK → WHITE)       */
/* ---------------------------------------- */

.idm-showcase__footer img {
  filter: invert(1);
}

/* ---------------------------------------- */
/* FOOTER TEXT                              */
/* ---------------------------------------- */

.footer-text {
  margin: 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.8;
  color: white;
}

.footer-link {
  color: white;
  text-decoration: underline;
}

/* ---------------------------------------- */
/* FOOTER LOGO                              */
/* ---------------------------------------- */

.footer-logo {
  width: 10.5rem;
  height: 3.5rem;
  object-fit: contain;
}

/* ---------------------------------------- */
/* MOBILE                                   */
/* ---------------------------------------- */

.mobile-board {
  display: none;
}

@media (max-width: 600px) {
  .desktop-board {
    display: none;
  }

  .mobile-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0rem 0rem 0rem;
    /* gap: 1.25rem; if we want uniformed spae between */
  }

  .mobile-img--top-bar {
    width: 100%;
    margin-bottom: -1.5rem;
  }

  .mobile-img,
  .mobile-link img {
    display: block;
    width: 100%;
    height: auto;
  }

  .mobile-img--headline {
    width: 96%;
    transform: translateX(-3%);
  }

  .mobile-img--paragraph {
    width: 96%;
    transform: translateX(-2%);
  }

  .mobile-img--day1,
  .mobile-img--day2 {
    width: 80%;
    margin-bottom: -5rem;
  }

  .mobile-link--day1-rsvp {
    width: 85%;
    transform: translateX(-5%);
    margin-bottom: 1.5rem;
  }

  .mobile-link--day2-rsvp {
    width: 90%;
    margin-bottom: 1.5rem;
  }

  .mobile-link--archives {
    width: 90%;
  }
}

/* ---------------------------------------- */
/* MOBILE FOOTER                            */
/* ---------------------------------------- */

@media (max-width: 600px) {
  .idm-showcase__footer {
    flex-direction: column; /* stack vertically */
    align-items: flex-end; /* align everything to the right */
    gap: 0.75rem;
    /* spacing between items */

    padding: 0.75rem 1rem; /* tighter mobile padding */
  }

  /* Social icons row */
  .footer-icons {
    width: auto; /* remove fixed width */
    transform: none; /* remove desktop offset */
  }

  .footer-icon-row {
    justify-content: flex-end; /* push icons to the right */
  }

  /* Make icons slightly smaller for mobile */
  .footer-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .footer-icon img {
    width: 3.5rem;
    height: 3.5rem;
  }

  /* Text alignment */
  .footer-text {
    text-align: right;
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
  }

  /* Logo alignment */
  .footer-logo {
    width: 8rem;
    height: auto;
    margin-bottom: 1.5rem;
  }
}