/* ==========================================================================
   site.css — reindeer.gift new prototype
   Loaded after main.css/plugins.css: overrides Oomph's split-panel layout
   with a centered content window, adds the snow background, and defines
   the redesigned gift/comment card component.
   ========================================================================== */

/* Only shown while the Hub home-state is active (see site.js) */
.home-state--hub-only {
  display: none;
}
.home-state--hub-only.is-visible {
  display: block;
}

/* Center to match the rest of the centered-content design language
   (the theme's own default here is left-aligned, a leftover from the
   removed split-panel layout). */
.main__dataline {
  text-align: center;
}

/* ---------- Fullscreen snow background (behind everything) ---------- */

#snow-js {
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, #3a4638 0%, #232920 55%, #171c15 100%);
}

/* Let the home screen's own backgrounds go transparent so snow shows through */
.main,
.main__content {
  background-color: transparent !important;
}

/* ---------- Transition model: Home is a static base layer; sections are drawers
   that slide in from the right over it, and slide back out to reveal it again.
   (Oomph's original behavior slid Home away instead and faded sections in in
   place — this replaces that, and also fixes the old -50%/50% half-width slide
   values, which were calibrated for the removed two-column layout.) ---------- */

@media only screen and (min-width: 1200px) {
  .menu {
    width: 100%;
  }
}

/* Home never moves */
.main.move-out,
.main.move-in {
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
}

/* The hamburger menu shouldn't do its own competing slide-away when a section
   opens (that reads as "a second thing flying across the screen"). It already
   fades via opacity (menu has `transition: all 0.6s`), so just drop its own
   slide and let it disappear cleanly while the section slides in on top. */
.menu.move-out {
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
}

/* Sections rest off-screen to the right, and slide to cover the screen when open */
.inner {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
}
.inner.animate-in {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

/* While closing, .animate-in is still present alongside .animate-out/.to-back
   for part of the sequence — without !important here, the rule above (equal
   specificity, later in source order) would win and pin the section in place,
   so only opacity would visibly change instead of it sliding back out. */
.inner.animate-out,
.inner.to-back {
  -webkit-transform: translateX(100%) !important;
  -moz-transform: translateX(100%) !important;
  -ms-transform: translateX(100%) !important;
  transform: translateX(100%) !important;
}

/* ---------- Home hub ---------- */

/* .main itself normally gets its height from a `height: 100%` chain rooted
   at html/body, which can independently carry the same mobile-viewport bug
   as raw `vh` units (both were historically sized against the largest
   possible viewport, address bar collapsed). Since .main scrolls internally
   (overflow-y: auto from the theme), any extra height here becomes exactly
   the dead scroll space below correctly-centered content. Override it
   directly with the same corrected-height fallback chain used below. */
.main--centered {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  height: 100dvh;
}

/* .main--centered is on the <section>, but .main__header/.hub__stage/
   .main__dataline are children of the inner .container-fluid.fullheight,
   not direct children of the section — the flex container needs to go
   there, or it never actually applies to them. */
.main--centered > .container-fluid {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* absolute fallback if JS is disabled (has the mobile bug) */
  min-height: calc(var(--vh, 1vh) * 100); /* JS-measured real visible height (site.js) — the most reliable cross-browser fix */
  min-height: 100dvh; /* wins over both above when the browser supports it natively, no JS needed */
}

/* The theme floats .main__header out of flow (position: absolute) at
   >=1200px, so it hovers over content instead of scrolling away with it —
   causing it to overlap the text underneath once a home-state's own content
   scrolls (each state manages its own scroll now, see .home-state.is-active
   below). Xavier wants it to stay in normal flow and scroll away with the
   page instead ("fixed on the page, not fixed on the screen"), so keep it
   position: relative at all sizes rather than letting the theme float it. */
.main--centered .main__header {
  position: relative;
}

/* .hub__stage no longer manages its own scroll or absolute-positions its
   children — only one .home-state is ever in the DOM's layout at a time
   (the rest are display:none), so the whole page (header included) scrolls
   together as one normal unit via .main's own overflow-y: auto, and the
   header genuinely scrolls away with the content instead of hovering fixed
   above a separately-scrolling pane. */
.hub__stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Asymmetric on purpose: less top padding than bottom pulls the
     auto-centered content up a bit, closer to the header, rather than
     sitting at a strict mathematical center that read as "too low". */
  padding: 1rem 1.5rem 6rem;
}

/* ---------- Home states (Landing / Login / Activate / Hub) ----------
   Only .is-active is shown; the rest are fully removed from layout
   (display: none) so an inactive state's content — e.g. Hub's tall
   headline + 4 tiles — can't inflate the page's height while hidden.
   site.js coordinates display:none/block around the opacity fade, since
   display can't itself be transitioned. */

.home-state {
  display: none;
  opacity: 0;
  width: 100%;
  transition: opacity 0.4s ease-in-out;
}

.home-state.is-active {
  display: flex; /* centers .hub__content horizontally via justify-content below */
  justify-content: center;
  opacity: 1;
  /* Main-axis auto-margin centering within .hub__stage's column flex —
     degrades gracefully to top-alignment if content is taller than the
     available space, instead of overflowing symmetrically off both edges. */
  margin-top: auto;
  margin-bottom: auto;
}

.hub__content {
  max-width: 640px;
  width: 100%;
  text-align: center;
}

/* A bit more room for the Hub state specifically, since it has 4 tiles to fit */
.home-state--hub .hub__content {
  max-width: 760px;
}

/* Oomph's .countdown is built to absolutely-position itself over a full-height
   hero section; here it sits inline in the Hub's centered content flow instead. */
.hub-countdown {
  position: static;
  -webkit-transform: none;
     -moz-transform: none;
      -ms-transform: none;
          transform: none;
  width: auto;
  margin-top: 3rem; /* matches .hub__grid's own margin-top, now that it sits below the grid */
}

/* Login / Activate UI */

.auth__buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 360px;
  margin: 2.5rem auto 0;
}

.btn-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.9rem 1.5rem;
  border-radius: 30px;
  border: none;
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-auth:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.btn-auth--google {
  background: #fff;
  color: #232920;
}

.btn-auth--email {
  background: transparent;
  color: #f5efe3;
  border: 1px solid rgba(245, 239, 227, 0.5);
}

.activate-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 360px;
  margin: 2.5rem auto 0;
}

.activate-form input {
  padding: 0.85rem 1.2rem;
  border-radius: 30px;
  border: 1px solid rgba(245, 239, 227, 0.35);
  background: rgba(245, 239, 227, 0.08);
  color: #f5efe3;
  font-size: 0.95rem;
}

.activate-form input::placeholder {
  color: rgba(245, 239, 227, 0.6);
}

.activate-form .btn {
  margin-top: 0.5rem;
}

.home-back {
  display: inline-block;
  margin-top: 1.75rem;
  background: none;
  border: none;
  color: rgba(245, 239, 227, 0.7);
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
}

.home-back:hover {
  color: #f5efe3;
}

/* ---------- Site-wide error banner ---------- */

.site-error-banner {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%) translateY(-0.5rem);
  z-index: 1000; /* above the dev-switcher (999) so it's never hidden behind it */
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: calc(100% - 2rem);
  background: #5c2018;
  border: 1px solid #c9a51c;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.site-error-banner[hidden] {
  display: flex; /* keep transitioning instead of the attribute's default display:none */
}

.site-error-banner.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.site-error-banner__text {
  font: normal 400 0.95rem/1.4 "Mulish", sans-serif;
  color: #ffffff;
}

.site-error-banner__close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.site-error-banner__close:hover {
  color: #ffffff;
}

/* ---------- Prototype-only dev state switcher ---------- */

.dev-switcher {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  padding: 0.4rem 0.6rem;
  border-radius: 20px;
  font-family: monospace;
  font-size: 0.75rem;
}

.dev-switcher__label {
  color: rgba(255, 255, 255, 0.6);
  margin-right: 0.2rem;
}

.dev-switcher button {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #fff;
  border-radius: 14px;
  padding: 0.25rem 0.7rem;
  font-family: monospace;
  font-size: 0.75rem;
  cursor: pointer;
}

.dev-switcher button:hover {
  background: rgba(255, 255, 255, 0.15);
}

.dev-switcher button.is-current {
  background: #c9a51c;
  color: #232920;
  border-color: #c9a51c;
}

.hub__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}

@media (min-width: 640px) {
  .hub__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 479px) {
  .hub__grid {
    grid-template-columns: 1fr;
  }
}

.hub__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  border-radius: 14px;
  background: rgba(245, 239, 227, 0.06);
  border: 1px solid rgba(201, 165, 28, 0.35);
  color: #f5efe3;
  text-decoration: none;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.hub__tile:hover {
  transform: translateY(-6px);
  background: rgba(201, 165, 28, 0.12);
  border-color: #c9a51c;
  color: #f5efe3;
}

.hub__tile-icon {
  font-size: 2rem;
  color: #c9a51c;
  margin-bottom: 0.25rem;
}

.hub__tile-title {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 1.15rem;
}

.hub__tile-text {
  font-size: 0.85rem;
  opacity: 0.75;
}

/* ---------- Centered content sections (About / Gift Lists / My Claims) ---------- */

.inner--centered .inner__content {
  float: none;
}

.inner--centered .panel {
  border-radius: 18px;
  margin: 0 auto 2.5rem;
  max-width: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.inner--centered .inner__block.panel {
  padding: 3rem 0;
}

@media (min-width: 1200px) {
  .inner--centered .inner__block.panel {
    padding: 3.5rem 0;
  }
}

.giftlist-anon-toggle {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 400;
  color: #6b6555;
  margin-left: 1rem;
  vertical-align: middle;
}

/* ---------- Gift list "whose list" tile menu ---------- */

.giftlist-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.5rem;
}

.giftlist-menu__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 1.25rem 1rem;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.giftlist-menu__tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  color: inherit;
}

.giftlist-menu__tile img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #c9a51c;
  margin-bottom: 0.75rem;
}

.giftlist-menu__tile--me {
  border: 2px solid #c9a51c;
}

.giftlist-menu__name {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 1rem;
}

.giftlist-menu__tile small {
  color: #c9a51c;
  font-style: italic;
  font-size: 0.8rem;
  margin-top: 0.15rem;
}

/* ---------- Gift / comment card component ---------- */

.gc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.gc-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  padding: 1.25rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.gc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.gc-card--gift.is-claimed-by-me {
  border: 2px solid #c9a51c;
}

.gc-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1rem;
  background: #f4f1e6;
}

.gc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.gc-title {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: #2c342b;
  margin: 0;
  line-height: 1.3;
}

.gc-qty {
  flex-shrink: 0;
  font-family: "Cinzel", serif;
  font-weight: 700;
  color: #c9a51c;
  font-size: 1rem;
  background: #f4f1e6;
  border-radius: 20px;
  padding: 0.15rem 0.6rem;
}

.gc-desc {
  font-size: 0.95rem;
  color: #444;
  margin: 0.5rem 0 0;
}

.gc-meta {
  font-size: 0.78rem;
  font-style: italic;
  color: #9a9384;
  margin-top: 0.5rem;
}

.gc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.gc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
}

.gc-badge--open {
  background: #f4f1e6;
  color: #6b6555;
}

.gc-badge--partial {
  background: #fbe8c6;
  color: #8a5a00;
}

.gc-badge--full {
  background: #2c342b;
  color: #c9a51c;
}

.gc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  border-radius: 20px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.gc-btn:active {
  transform: translateY(1px);
}

.gc-btn--claim {
  background: #c9a51c;
  color: #2c342b;
}

.gc-btn--claim:hover {
  background: #b3910c;
}

.gc-btn--unclaim {
  background: transparent;
  color: #9e2525;
  border: 1px solid #9e2525;
}

.gc-btn--unclaim:hover {
  background: #9e2525;
  color: #fff;
}

.gc-claimants {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0.6rem 0 0;
  border-top: 1px solid #eee6d6;
  font-size: 0.8rem;
  color: #6b6555;
}

.gc-claimants li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.gc-claimants li i {
  color: #2c9e4a;
  font-size: 0.75rem;
}

.gc-claimants li.is-me {
  color: #8a5a00;
  font-weight: 600;
}

/* Comment card variant */

.gc-card--comment {
  background: #f4f1e6;
  justify-content: center;
  min-height: 160px;
}

.gc-quote-icon {
  color: #c9a51c;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  opacity: 0.7;
}

.gc-comment-text {
  font-style: italic;
  font-size: 1.05rem;
  color: #2c342b;
  margin: 0;
}

/* ---------- Bottom account bar (Hub state only) ---------- */

.account-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.9rem 0.4rem 0.4rem;
  border-radius: 30px;
  background: rgba(245, 239, 227, 0.08);
  border: 1px solid rgba(245, 239, 227, 0.2);
}

.account-bar__profile {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #f5efe3;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.account-bar__profile:hover {
  opacity: 0.8;
  color: #f5efe3;
}

.account-bar__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #c9a51c;
}

.account-bar__name {
  font-size: 0.85rem;
  font-weight: 600;
}

.account-bar__divider {
  color: rgba(245, 239, 227, 0.4);
}

.account-bar__logout {
  font-size: 0.85rem;
  color: rgba(245, 239, 227, 0.7);
  text-decoration: underline;
}

.account-bar__logout:hover {
  color: #f5efe3;
}

/* ---------- Events ---------- */

.event-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.event-card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  padding: 1.25rem 1.5rem;
}

.event-date {
  flex-shrink: 0;
  width: 64px;
  text-align: center;
  background: #2c342b;
  color: #c9a51c;
  border-radius: 12px;
  padding: 0.6rem 0;
}

.event-date__day {
  display: block;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
}

.event-date__month {
  display: block;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  margin-top: 0.2rem;
}

.event-title {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: #2c342b;
  margin: 0 0 0.35rem;
}

.event-meta {
  font-size: 0.85rem;
  color: #9a9384;
  margin: 0 0 0.5rem;
}

.event-meta i {
  color: #c9a51c;
  margin-right: 0.2rem;
}

.event-desc {
  font-size: 0.95rem;
  color: #444;
  margin: 0;
}

/* ---------- Account ---------- */

.account-form {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.account-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.account-avatar img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #c9a51c;
}

.account-fields {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.account-fields label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: rgba(245, 239, 227, 0.7);
}

.account-fields input {
  padding: 0.7rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(245, 239, 227, 0.35);
  background: rgba(245, 239, 227, 0.08);
  color: #f5efe3;
  font-size: 1rem;
}

.account-fields .btn {
  align-self: flex-start;
}