/**
 * NFL Native Pool - form styles
 *
 * Pulled out of inline JS styles into a real stylesheet specifically so
 * media queries and clamp() can do responsive sizing - inline React
 * styles can't use either.
 *
 * Two genuinely different logo-sizing cases live here, kept
 * deliberately separate rather than sharing a "width: 100%" base rule:
 *   1. .nflnp-logo-large - ONE logo fills its whole column (per-game
 *      step). The column stretches the button to its own width, and
 *      the box is 100% of that.
 *   2. .nflnp-logo-xsmall - TWO logos sit side by side in one row
 *      (survivor grid). Each box gets its own fixed clamp() size
 *      instead of a percentage, so they can never both try to claim
 *      100% of the same shared row (that's what caused the earlier
 *      overlapping/squished bug - percentage widths shared by two
 *      siblings in a row don't divide themselves automatically).
 */

#nflnp-form-inner {
  font-family: 'Kalam', cursive;
  padding: 0 12px;
  box-sizing: border-box;
  width: 100%;
}

#nflnp-form-inner * {
  font-family: 'Kalam', cursive;
  box-sizing: border-box;
}

/* The receipt modal renders as a sibling of #nflnp-form-inner (so it
   can overlay the whole viewport via position: fixed), so it needs its
   own font rule rather than inheriting from the selector above. */
#nflnp-receipt-print-area,
#nflnp-receipt-print-area * {
  font-family: 'Kalam', cursive;
  box-sizing: border-box;
}

/* --- Team logo buttons --- */

.nflnp-team-logo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: clamp(6px, 1.5vw, 16px);
  border-radius: 10px;
  border: 3px solid transparent;
  background: transparent;
  cursor: pointer;
}

.nflnp-team-logo-btn.selected {
  background-color: #dcfce7;
  border-color: #16a34a;
}

.nflnp-team-logo-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.nflnp-team-logo-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* scales the logo to fit the box in BOTH dimensions, preserving its own aspect ratio */
}

/* --- Case 1: one logo per column (per-game step) --- */

.nflnp-matchup-team {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* explicit: makes the button (and therefore the box) fill this column's width */
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 420px;
}

.nflnp-logo-large .nflnp-logo-box {
  width: 100%; /* 100% of the stretched column - safe here because there is exactly one box per column */
  height: clamp(70px, 20vw, 220px);
}

/* Unused currently, kept for the display-layer phase - same pattern as large */
.nflnp-logo-small .nflnp-logo-box {
  width: 100%;
  height: clamp(40px, 8vw, 70px);
}

/* --- Case 2: two logos side by side (survivor grid) --- */

.nflnp-survivor-pair {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto; /* sized to its own content, not stretched */
}

.nflnp-logo-xsmall .nflnp-logo-box {
  width: clamp(36px, 6vw, 76px);   /* fixed size independent of the row - both logos can safely have this at once */
  height: clamp(30px, 5vw, 60px);
}

/* --- Layout containers --- */

.nflnp-matchup-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(20px, 5vw, 60px);
  padding: 20px 0;
  flex-wrap: nowrap;
}

.nflnp-record-label {
  display: flex;
  justify-content: center;
  font-size: clamp(15px, 3vw, 30px);
  font-weight: bold;
  color: #374151;
  text-align: center !important;
  width: 100%;
}

.nflnp-survivor-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 28px);
  flex-wrap: nowrap;
}

.nflnp-survivor-divider {
  width: 1px;
  height: 44px;
  background-color: #d1d5db;
  flex-shrink: 0;
}

/* --- Mobile breakpoint --- */

@media (max-width: 700px) {
  .nflnp-survivor-row {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 14px;
    column-gap: 14px;
  }

  /* Dividers only make sense in a single unbroken row; once the row
     wraps to 2-per-line they'd land in awkward spots, so hide them. */
  .nflnp-survivor-divider {
    display: none;
  }
}

@media (max-width: 480px) {
  #nflnp-form-inner h1 {
    font-size: 24px !important;
  }
  #nflnp-form-inner h2 {
    font-size: 18px !important;
  }
  .nflnp-matchup-row {
    gap: 12px;
  }
}

/* --- Wide desktop: scale text and buttons up to match the bigger
   logos, so the extra width feels intentional rather than just empty
   margins. --- */
@media (min-width: 1100px) {
  #nflnp-form-inner h1 {
    font-size: 40px;
  }
  #nflnp-form-inner h2 {
    font-size: 28px;
  }
  #nflnp-form-inner p {
    font-size: 16px;
  }
  .nflnp-nav-btn {
    font-size: 17px !important;
    padding: 13px 28px !important;
  }
}

/* --- Print: isolate the receipt only ---
   Standard print-isolation technique: hide everything on the page via
   visibility (not display:none, which would collapse layout and can
   confuse some browsers' print pagination), then make only the
   receipt subtree visible again and pin it to the top of the printed
   page. This works regardless of what theme/header/footer markup
   surrounds the shortcode on the live site. */
@media print {
  body * {
    visibility: hidden;
  }
  #nflnp-receipt-print-area,
  #nflnp-receipt-print-area * {
    visibility: visible;
  }
  #nflnp-receipt-print-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: none;
    box-shadow: none;
  }
  .nflnp-no-print {
    display: none !important;
  }
}