/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Reserves the scrollbar gutter so the .is-clipped scroll lock the modals apply
   does not shift the page sideways on classic-scrollbar platforms. Ignored by
   older Safari, which then behaves exactly as before */
html {
  scrollbar-gutter: stable;
}

/* Keeps the footer pinned to the bottom on short pages. The dvh line repeats the
   vh line because on mobile 100vh is the RETRACTED-URL-bar height, so this floor
   was ~86px taller than the visible viewport and pushed the footer below the fold
   even on pages with nothing to scroll. Browsers without dvh drop that
   declaration and keep the vh one */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main {
  flex: 1;
}

/* Bulma hardcodes min-height:100vh on .hero.is-fullheight and uses dvh/svh/lvh
   nowhere, so the marketing hero reserved the retracted URL bar's height on top
   of the visible viewport. Same two-declaration fallback as body above. Equal
   specificity to Bulma's own .hero.is-fullheight, and this file's link tag comes
   after the Bulma CDN link in the layout, so source order decides and no
   !important is needed */
.hero.is-fullheight {
  min-height: 100vh;
  min-height: 100dvh;
}

/* These rules keep the logo proportioned */
.navbar {
  min-height: 100px;
}

.navbar-brand .navbar-item img {
  max-height: 80px;
  width: auto;
  object-fit: contain;
}

.navbar-item.is-active {
  background-color: transparent !important;
  color: var(--bulma-text-strong) !important;
  font-weight: bold;
}

a {
  color: #00796b;
}

@media (prefers-color-scheme: dark) {
  a {
    color: #00D1B2;
  }
}

.card-full-height {
  height: 100%;
}

.processing-spinner {
  text-align: center;
  margin: 20px 0;
}

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
  margin: 0 auto;
}

@media (prefers-color-scheme: dark) {
  .spinner {
    border-color: #444;
    border-top-color: #3498db;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Centers the interview session screen and makes its record control a circle.
   The 100px matches the .navbar min-height above. Geometry only, by design —
   the record button's colour comes from the is-warning/is-danger the Stimulus
   controller swaps on it. Note those filled variants render the same in light
   and dark, so if the disabled state needs more contrast on a dark scheme it
   wants its own rule here rather than a tweak to these.
   The dvh line repeats the vh line as a fallback for browsers without dvh
   support. dvh tracks the mobile URL bar, so this no longer reserves the
   retracted bar's height on top of the visible viewport. It still does NOT
   account for main's 3rem section padding or the ~256px footer, so this page
   keeps scrolling on a short phone — that under-count is a known accepted
   limitation, not an oversight */
.session-hero {
  min-height: calc(100vh - 100px);
  min-height: calc(100dvh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.session-ptt-box {
  width: 480px;
  max-width: 100%;
  margin: 0 auto;
}

.ptt-button {
  width: 140px;
  height: 140px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Wins over Bulma's .button .icon (1.5em) on source order only — adding
   is-large to this span would out-specify it and silently shrink the glyph. */
.ptt-button .icon {
  margin: 0;
  height: 4rem;
  width: 4rem;
}

.ptt-button .material-symbols-outlined {
  font-size: 4rem;
}