/* Shared site styles. Domain-specific styles live in their own stylesheet
   loaded by the owning template (devpy convention).

   Visual theme: "tactical dark" — slate surfaces, ember accent, ivory text.
   Built on Bulma's CSS custom properties + its [data-theme=dark] scheme, so the
   whole palette is retinted from a handful of variables (no Sass recompile). */

/* ---- Self-hosted display face (SIL OFL 1.1; see fonts/Oswald-OFL.txt) ------ */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/fonts/oswald-600-latin.woff2") format("woff2");
}

/* ---- Theme tokens --------------------------------------------------------- */
:root {
  /* Retint every neutral surface toward slate-blue. */
  --bulma-scheme-h: 222;
  --bulma-scheme-s: 26%;
  /* Ember accent (≈ #e0913a) drives buttons, links, and active states. */
  --bulma-primary-h: 32;
  --bulma-primary-s: 73%;
  --bulma-primary-l: 55%;
  /* Slightly rounder corners. */
  --bulma-radius: 0.5rem;
  --bulma-radius-large: 0.875rem;

  --mbf-ember: hsl(32deg 73% 55%);
  --mbf-ivory: #ece7da;
  --mbf-slate-deep: #171c28;
  --mbf-hairline: hsl(222deg 20% 100% / 8%);
}

/* Display face + tracking for headings and the brand. */
.title,
.hero .title,
.navbar-brand .is-brand {
  font-family: "Oswald", var(--bulma-family-sans-serif), sans-serif;
  letter-spacing: 0.01em;
}

/* ---- Page frame (sticky footer) ------------------------------------------- */
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

/* ---- Sticky banner -------------------------------------------------------- */
.mbf-banner {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: var(--mbf-slate-deep);
  border-bottom: 1px solid var(--mbf-hairline);
  box-shadow: 0 2px 12px rgb(0 0 0 / 35%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.mbf-banner .navbar-brand .is-brand {
  color: var(--mbf-ivory);
}

.mbf-banner .navbar-brand .is-brand .mbf-mark {
  color: var(--mbf-ember);
}

/* ---- Hero: full-bleed slate with a faint tactical grid -------------------- */
.mbf-hero {
  position: relative;
  overflow: hidden;
  color: var(--mbf-ivory);
  background:
    radial-gradient(120% 90% at 50% -10%, hsl(32deg 60% 22% / 55%) 0%, transparent 60%),
    linear-gradient(180deg, #20283a 0%, #161b27 100%);
}

/* The grid overlay reads as a battlemat without needing an image asset. */
.mbf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--mbf-hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--mbf-hairline) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(110% 80% at 50% 0%, #000 55%, transparent 100%);
  mask-image: radial-gradient(110% 80% at 50% 0%, #000 55%, transparent 100%);
  pointer-events: none;
}

.mbf-hero .hero-body {
  position: relative;
  z-index: 1;
}

.mbf-hero .title {
  color: var(--mbf-ivory);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mbf-hero .subtitle {
  color: hsl(222deg 14% 78%);
}

/* ---- Cards: subtle elevation + hover lift --------------------------------- */
.mbf-card {
  height: 100%;
  border: 1px solid var(--mbf-hairline);
  border-radius: var(--bulma-radius-large);
  box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.mbf-card:hover {
  transform: translateY(-4px);
  border-color: hsl(32deg 73% 55% / 40%);
  box-shadow: 0 12px 28px rgb(0 0 0 / 38%);
}

/* Buttons inherit the ember primary; add a gentle press feedback. */
.button {
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.button:active {
  transform: translateY(1px);
}

/* ---- Section rhythm ------------------------------------------------------- */
.mbf-band {
  padding: 3.5rem 0;
}

.mbf-band.mbf-band-alt {
  background-color: var(--bulma-scheme-main-bis);
  border-block: 1px solid var(--mbf-hairline);
}

/* ---- Footer --------------------------------------------------------------- */
.mbf-footer {
  background-color: var(--mbf-slate-deep);
  border-top: 1px solid var(--mbf-hairline);
}

.mbf-footer a {
  color: hsl(222deg 14% 78%);
}

.mbf-footer a:hover {
  color: var(--mbf-ember);
}

/* Discreet back-office entry point on the footer baseline. Deliberately low
   contrast so it stays out of customers' way; brightens on hover/focus. */
.mbf-footer a.mbf-admin-link {
  margin-left: 0.35rem;
  color: hsl(222deg 12% 46%);
  text-decoration: none;
}

.mbf-footer a.mbf-admin-link:hover,
.mbf-footer a.mbf-admin-link:focus {
  color: var(--mbf-ember);
}

/* ---- Contact form --------------------------------------------------------- */
/* Honeypot: removed from layout and hidden from assistive tech (the template
   also sets aria-hidden + tabindex=-1), so only bots ever fill it. Not
   `display:none`, which some bots skip. */
.mbf-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Preserve the author's line breaks in a stored message. */
.mbf-message-body {
  white-space: pre-wrap;
}

/* Configurator range control: a slider with a paired numeric input. */
.mbf-range {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mbf-range-slider {
  flex: 1 1 auto;
}

.mbf-range-number {
  flex: 0 0 5rem;
  width: 5rem;
  text-align: right;
}

/* The slider already covers stepping, so hide the number field's spinners. */
.mbf-range-number {
  appearance: textfield;
  -moz-appearance: textfield;
}

.mbf-range-number::-webkit-outer-spin-button,
.mbf-range-number::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

/* Keep the live preview in view while the configurator form is scrolled. The
   offset clears the sticky banner (3.25rem) so "Aperçu" is not tucked behind it. */
.mbf-preview-sticky {
  position: sticky;
  top: calc(3.25rem + 1rem);
}

/* Configurator step capsules: a clearer border than Bulma's default box. */
.mbf-step {
  border: 1px solid hsl(222deg 20% 100% / 22%);
}

/* ---- Accessibility -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mbf-card,
  .button {
    transition: none;
  }
}

/* ---- Product thumbnail (engine-rendered) + fallback placeholder ----------- */
.mbf-product-thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--mbf-hairline);
}

.mbf-product-thumb img,
.mbf-product-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback for products the engine cannot render yet (e.g. coming-soon). */
.mbf-product-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2b3a55 0%, #5a3b6b 100%);
  color: #fff;
}

.mbf-product-placeholder-label {
  font-weight: 600;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgb(0 0 0 / 40%);
}

/* ---- "How it works" steps ------------------------------------------------- */
.mbf-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.75rem;
  border: 1px solid hsl(32deg 73% 55% / 45%);
  border-radius: 50%;
  color: var(--mbf-ember);
  font-family: "Oswald", var(--bulma-family-sans-serif), sans-serif;
  font-weight: 600;
}

/* ---- Spec-based reassurance band ------------------------------------------ */
.mbf-spec {
  height: 100%;
  padding: 1.25rem;
  border: 1px solid var(--mbf-hairline);
  border-radius: var(--bulma-radius-large);
  background-color: var(--bulma-scheme-main-bis);
}

.mbf-spec-title {
  margin-bottom: 0.35rem;
  color: var(--mbf-ember);
  font-family: "Oswald", var(--bulma-family-sans-serif), sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}