/* ==========================================================================
   CC's Coffee House: new components (Bowen Media redesign work)
   --------------------------------------------------------------------------
   Rules for this file:
   - Colors, fonts, type sizes, spacing and radius come from var(--ccs-*)
     tokens in tokens.css. Raw rem values are fine only for component
     dimensions (widths, icon sizes) that no token covers.
   - Prefix every class with .bm- so nothing collides with the site's
     Tailwind classes, and so the dev can see exactly what is new.
   - Reuse existing site classes in the HTML where they already exist
     (.btn .btn-standard .btn-md, .colormode-*, .text-scaling-*, .mb-base, ...).
     Only add CSS here for things the compiled app.css doesn't cover.
   - Mobile first; add breakpoints with min-width at 768px / 1024px.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Global popup (ClickUp 86e3qk3t1)
   Image, title, snippet, CTA + App Store / Google Play badges
   Markup: site/partials/popup.html
   Mobile: image on top, content stacked and centered
   768px+: image left, content right, left-aligned
   -------------------------------------------------------------------------- */

.bm-popup {
  position: fixed;
  inset: 0;
  z-index: var(--ccs-z-popup);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ccs-space-base);
}

.bm-popup__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--ccs-modal-overlay);
}

.bm-popup__dialog {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 44rem;
  max-height: calc(100dvh - 2 * var(--ccs-space-base));
  overflow-y: auto;
  background-color: var(--ccs-white);
  border-radius: var(--ccs-modal-radius);
  box-shadow: var(--ccs-modal-shadow);
  color: var(--ccs-text);
  font-family: var(--ccs-font-body);
}

.bm-popup__close {
  position: absolute;
  top: var(--ccs-space-half);
  right: var(--ccs-space-half);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: var(--ccs-radius-pill);
  background-color: var(--ccs-white);
  color: var(--ccs-text);
  font-size: 1.8rem;
  box-shadow: 0 2px 8px rgb(0 0 0 / .15);
  transition: background-color var(--ccs-duration) var(--ccs-ease), color var(--ccs-duration) var(--ccs-ease);
}

.bm-popup__close:hover {
  background-color: var(--ccs-red);
  color: var(--ccs-white);
}

.bm-popup__close:focus-visible,
.bm-popup__badge:focus-visible {
  outline: 2px solid var(--ccs-red);
  outline-offset: 2px;
}

.bm-popup__media {
  aspect-ratio: 4 / 3;
  background-color: var(--ccs-gold-light);
}

.bm-popup__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bm-popup__content {
  padding: var(--ccs-space-2x) var(--ccs-space-normal);
  text-align: center;
}

.bm-popup__title {
  font-family: var(--ccs-font-heading);
  font-size: var(--ccs-text-4xl);
  font-weight: 700;
  line-height: var(--ccs-leading-tight);
  text-transform: uppercase;
}

.bm-popup__snippet {
  margin-top: var(--ccs-space-base);
  font-size: var(--ccs-text-base);
  line-height: var(--ccs-leading-normal);
}

.bm-popup__cta {
  margin-top: var(--ccs-space-base);
}

.bm-popup__cta .btn {
  margin-right: 0;
}

.bm-popup__apps {
  margin-top: var(--ccs-space-2x);
  padding-top: var(--ccs-space-base);
  border-top: 1px solid var(--ccs-gray-200);
}

.bm-popup__apps-label {
  font-size: var(--ccs-text-sm);
  font-weight: 700;
  letter-spacing: var(--ccs-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ccs-red);
}

.bm-popup__badges {
  display: flex;
  justify-content: center;
  gap: var(--ccs-space-base);
  margin-top: var(--ccs-space-half);
}

.bm-popup__badge {
  display: block;
  border-radius: var(--ccs-radius-md);
  transition: transform var(--ccs-duration) var(--ccs-ease);
}

.bm-popup__badge:hover {
  transform: scale(1.05);
}

.bm-popup__badge img {
  display: block;
  height: 4rem;
  width: auto;
}

/* Enter / leave (classes applied by Alpine x-transition) */
.bm-popup-enter,
.bm-popup-leave {
  transition: opacity .3s var(--ccs-ease), transform .5s var(--ccs-ease);
}

.bm-popup-enter-start {
  opacity: 0;
  transform: translateY(2rem) scale(.98);
}

.bm-popup-enter-end {
  opacity: 1;
  transform: none;
}

@media (min-width: 768px) {
  .bm-popup__dialog {
    grid-template-columns: 42% 1fr;
    max-width: 80rem;
  }

  .bm-popup__media {
    aspect-ratio: auto;
    min-height: 100%;
  }

  .bm-popup__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--ccs-space-3x);
    text-align: left;
  }

  .bm-popup__badges {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bm-popup-enter,
  .bm-popup-leave,
  .bm-popup__badge,
  .bm-popup__close {
    transition: none;
  }

  .bm-popup-enter-start {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   2. Contact form (ClickUp 86e3qk438)
   Matches the existing Formie field styling on /event-support
   Markup: site/partials/contact-form.html (built into /contact by tools/build.py)
   1 column by default, 2 columns once the form's column is 480px+ wide
   -------------------------------------------------------------------------- */

.bm-form {
  padding: var(--ccs-space-normal);
  border: 1px solid var(--ccs-gray-200);
  border-radius: var(--ccs-radius-xl);
  background-color: var(--ccs-white);
  color: var(--ccs-text);
  font-size: var(--ccs-text-base);
}

.bm-form__legend {
  font-size: var(--ccs-text-sm);
  color: var(--ccs-gray-600);
}

.bm-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ccs-field-row-gap) var(--ccs-field-col-gap);
  margin-top: var(--ccs-space-base);
}

@container (min-width: 48rem) {
  .bm-form__grid {
    grid-template-columns: 1fr 1fr;
  }

  .bm-form__field--full {
    grid-column: 1 / -1;
  }
}

.bm-form__field {
  min-width: 0;
}

.bm-form__label {
  display: block;
  margin-bottom: var(--ccs-space-half);
  font-weight: var(--ccs-field-label-weight);
}

.bm-form__req {
  color: var(--ccs-error);
  font-weight: 700;
}

.bm-form__optional {
  font-weight: 400;
  color: var(--ccs-gray-600);
}

/* background-color (not background) so the forms plugin's select chevron survives */
.bm-form__input {
  display: block;
  width: 100%;
  min-height: var(--ccs-field-min-h);
  padding: var(--ccs-space-half) var(--ccs-space-base);
  border: 1px solid var(--ccs-field-border);
  border-radius: var(--ccs-field-radius);
  background-color: var(--ccs-field-bg);
  color: var(--ccs-field-text);
  font-family: var(--ccs-font-body);
  font-size: var(--ccs-field-font);
  line-height: var(--ccs-leading-normal);
  transition: border-color var(--ccs-duration) var(--ccs-ease), box-shadow var(--ccs-duration) var(--ccs-ease), background-color var(--ccs-duration) var(--ccs-ease);
}

.bm-form__textarea {
  min-height: 16rem;
  resize: vertical;
}

.bm-form__input::placeholder {
  color: var(--ccs-text);
  opacity: .5;
}

.bm-form__input:focus {
  outline: none;
  border-color: var(--ccs-red);
  background-color: var(--ccs-white);
  box-shadow: var(--ccs-focus-ring);
}

/* Error styles only after the first submit attempt */
.bm-form--submitted .bm-form__input:invalid,
.bm-form__input[aria-invalid="true"] {
  border-color: var(--ccs-error);
}

/* ---------- Custom dropdown (scripts/bm-select.js) ---------- */

.bm-select {
  position: relative;
}

/* Real <select> kept for the value + validation, hidden from view and from screen readers */
.bm-select__native {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.bm-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ccs-space-half);
  text-align: left;
  cursor: pointer;
}

.bm-select__trigger[aria-expanded="true"] {
  border-color: var(--ccs-red);
  background-color: var(--ccs-white);
  box-shadow: var(--ccs-focus-ring);
}

.bm-select__value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bm-select__value--placeholder {
  opacity: .5;
}

.bm-select__chevron {
  flex-shrink: 0;
  font-size: 1.2rem;
  color: var(--ccs-red);
  transition: transform var(--ccs-duration) var(--ccs-ease);
}

.bm-select__trigger[aria-expanded="true"] .bm-select__chevron {
  transform: rotate(180deg);
}

.bm-select__panel {
  position: absolute;
  top: calc(100% + var(--ccs-space-half));
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 30rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ccs-space-half);
  border: 1px solid var(--ccs-gray-200);
  border-radius: var(--ccs-radius-lg);
  background-color: var(--ccs-white);
  box-shadow: var(--ccs-shadow-pop);
}

/* Panel can grow wider than a narrow field; --end anchors it to the right edge
   for dropdowns in the right-hand column so it grows inward */
@media (min-width: 768px) {
  .bm-select__panel {
    right: auto;
    min-width: 100%;
    width: max-content;
    max-width: 32rem;
  }

  .bm-select--end .bm-select__panel {
    left: auto;
    right: 0;
  }
}

.bm-select__panel--up {
  top: auto;
  bottom: calc(100% + var(--ccs-space-half));
}

.bm-select__group {
  position: sticky;
  top: calc(-1 * var(--ccs-space-half));
  z-index: 1;
  margin: 0 calc(-1 * var(--ccs-space-half));
  padding: var(--ccs-space-base) calc(var(--ccs-space-base) + var(--ccs-space-half)) var(--ccs-space-quarter);
  background-color: var(--ccs-white);
  font-size: var(--ccs-text-xs);
  font-weight: 700;
  letter-spacing: var(--ccs-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ccs-red);
}

.bm-select__group:first-child {
  padding-top: var(--ccs-space-half);
}

.bm-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ccs-space-half);
  min-height: 4rem;
  padding: var(--ccs-space-half) var(--ccs-space-base);
  border-radius: var(--ccs-radius-md);
  font-size: var(--ccs-field-font);
  line-height: 1.3;
  cursor: pointer;
}

.bm-select__option.is-active {
  background-color: var(--ccs-gold-light);
}

.bm-select__option.is-selected {
  font-weight: 600;
  color: var(--ccs-red);
}

.bm-select__check {
  flex-shrink: 0;
  font-size: 1.2rem;
}

.bm-form__error {
  margin-top: var(--ccs-space-quarter);
  font-size: var(--ccs-text-sm);
  color: var(--ccs-error);
}

.bm-form__error:empty {
  display: none;
}

.bm-form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--ccs-space-half);
  cursor: pointer;
}

.bm-form__checkbox {
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  margin-top: .2em;
  border-color: var(--ccs-gray-400);
  border-radius: var(--ccs-radius-sm);
  color: var(--ccs-red);
}

.bm-form__checkbox:focus-visible {
  outline: none;
  box-shadow: var(--ccs-focus-ring);
}

.bm-form__actions {
  margin-top: var(--ccs-space-2x);
}

.bm-form__submit {
  margin-right: 0;
}

.bm-form__success {
  padding: var(--ccs-space-2x) 0;
  text-align: center;
}

.bm-form__success:focus {
  outline: none;
}

.bm-form__success-icon {
  font-size: 4.8rem;
  color: var(--ccs-green);
}

.bm-form__success-title {
  margin: var(--ccs-space-base) 0 var(--ccs-space-half);
  font-family: var(--ccs-font-heading);
  font-size: var(--ccs-text-3xl);
  font-weight: 700;
  line-height: var(--ccs-leading-tight);
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .bm-form__input {
    transition: none;
  }
}