/* ============================================================
   CALCULATOR-PAGE.CSS — Calculator Page Specific Styles
   ============================================================
   PURPOSE:
     Scoped styles for calculator.html ONLY.
     Covers the dark nav bar, dark body background, and loading
     states for the DC bundler app that renders the calculator.

   NAMING NOTE:
     This file is named "calculator-page.css" (not "calculator.css")
     to avoid confusion with sections/calculator.css, which styles
     the calculator SECTION inside index.html.

   ARCHITECTURE NOTE — THE BUNDLER APP:
     The calculator UI itself is a self-contained reactive
     application packaged by a proprietary DC (Data Component)
     bundler. It decompresses and renders at runtime via the
     bundler script tags in calculator.html.

     That means:
       - The calculator form/inputs/results are all rendered
         by the bundler at runtime — you CANNOT style them
         with normal CSS from this file.
       - The bundler app uses inline styles exclusively.
       - This CSS file only controls what we OWN: the nav bar,
         the page background, and the loading screen.

     DO NOT attempt to target .sc-for, .x-dc, or internal
     calculator elements — they live inside a shadow-like
     runtime and will not respond to external CSS.

   SAFE TO EDIT:
     - Nav background color (#00263A) if branding updates
     - Nav height (64px) to match index.html nav if desired
     - Body background color (#0A2540) — the dark navy
     - Loading spinner colors

   DO NOT MODIFY:
     - #calc-nav z-index: 200 — keeps nav above bundler overlay
     - #__bundler_thumbnail z-index: 9999 — bundler loading screen
     - #__bundler_loading z-index: 10000 — bundler status badge
       These z-index values are set by the bundler system.
       Changing them can cause the loading overlay to appear
       on top of the nav, blocking navigation during load.
============================================================ */


/* ── Page Body ────────────────────────────────────────────────
   Dark navy background matches the DC app's own background.
   padding-top: 64px reserves space for the fixed nav bar.
   The DC app renders inside the body, centered by the bundler.
────────────────────────────────────────────────────────────── */
.calc-page-body {
  background: #0A2540;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding-top: 64px;   /* matches nav height */
}


/* ── Calculator Page Navigation ──────────────────────────────
   Dark-themed nav specific to the calculator page.
   Uses id="calc-nav" to avoid colliding with the main nav
   (id="main-nav") in index.html.

   IMPORTANT: This nav is intentionally different from the
   main site nav in hero.css:
     - Uses a dark navy background instead of white
     - Has white text instead of dark
     - Has a different logo format (text-only, no logo image)
   This is a deliberate design choice for the calculator's
   immersive dark-background experience.
────────────────────────────────────────────────────────────── */
#calc-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;        /* above the bundler loading overlay */
  height: 64px;
  background: rgba(0, 38, 58, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
}


/* ── Calculator Nav Logo ──────────────────────────────────── */
#calc-nav .calc-nav-logo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
}

#calc-nav .calc-nav-logo-text {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #fff;
}

/* Green dot accent in logo */
#calc-nav .calc-nav-logo-text span {
  color: var(--gold-lt);
}

/* Subtitle below name */
#calc-nav .calc-nav-logo-sub {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}


/* ── Calculator Nav Right Side ────────────────────────────── */
#calc-nav .calc-nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}


/* ── Back to Homepage Button ─────────────────────────────────
   Outline style — secondary action.
   SAFE TO EDIT: text content in calculator.html
────────────────────────────────────────────────────────────── */
#calc-nav .calc-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 0.45rem 1rem;
  min-height: 44px; /* touch target — see calc-consult-btn below */
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius);
  transition: all 0.2s;
}

#calc-nav .calc-back-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.4);
}


/* ── Language Toggle (FR / EN) ────────────────────────────────
   Small pill switch — sits left of the back link in calc-nav.
   SAFE TO EDIT: colors/spacing only — the "FR"/"EN" button
   labels are language codes and stay as-is in both languages.
────────────────────────────────────────────────────────────── */
#calc-nav .calc-lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  padding: 0.2rem;
}

#calc-nav .calc-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  padding: 0.3rem 0.6rem;
  min-height: 36px; /* secondary control — smaller target is an accepted tradeoff */
  cursor: pointer;
  transition: all 0.2s;
}

#calc-nav .calc-lang-btn:hover {
  color: #fff;
}

#calc-nav .calc-lang-btn.active {
  background: rgba(255,255,255,0.16);
  color: #fff;
}


/* ── Free Consultation CTA Button ────────────────────────────
   Filled green — primary action.
   Links back to index.html#contact.
────────────────────────────────────────────────────────────── */
#calc-nav .calc-consult-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 0.45rem 1rem;
  /* min-height: 44px keeps this button at Apple/Google's minimum
     touch-target height (~36px before this fix) without affecting
     its width — important since width is already tight on phones */
  min-height: 44px;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  transition: background 0.2s;
}

#calc-nav .calc-consult-btn:hover {
  background: var(--gold-lt);
  border-color: var(--gold-lt);
}


/* ── Bundler Loading States ───────────────────────────────────
   These styles control the DC bundler's built-in loading
   overlay and status badge.

   DO NOT MODIFY z-index values — see file header notes.
   These are PASSTHROUGH styles; the bundler injects the
   elements itself. We override only their appearance.
────────────────────────────────────────────────────────────── */

/* Small status badge: "Unpacking..." / "Rendering..." */
#__bundler_loading {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font: 13px/1.4 var(--font-sans);
  color: #666;
  background: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  z-index: 10000;
}

/* Full-screen thumbnail shown while app decompresses */
#__bundler_thumbnail {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0A2540;
  z-index: 9999;
}

#__bundler_thumbnail svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* ── Mobile Nav Adjustments ──────────────────────────────────
   Hide the logo image on very small screens to save space.
   Keep both buttons always visible.
────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #calc-nav {
    padding: 0 4vw;
  }

  /* Hide the Multi-Prêts logo image, keep name text */
  #calc-nav .calc-nav-logo-img {
    display: none;
  }

  #calc-nav .calc-nav-logo-divider {
    display: none;
  }

  /* Hide the "Calculateur hypothécaire" subtitle — it's wider than the
     name above it, so it's the main driver of the logo block's width.
     Measured in a real browser: with all 4 nav elements (logo, lang
     toggle, back button, consult button) in one unwrapped row, the
     consult button was pushed ~97px past the right edge at 320px wide.
     Dropping this trims the logo block down with no loss of meaning
     (the page title already says "Calculateur Hypothécaire"). */
  #calc-nav .calc-nav-logo-sub {
    display: none;
  }

  /* Hide the "← Accueil" back button. It's redundant at this width —
     the logo itself is also a link to index.html — and removing it
     was the main fix needed to stop the consult button from being
     pushed off-screen (see measurement note above). */
  #calc-nav .calc-back-btn {
    display: none;
  }

  /* Tighten button padding on small screens */
  #calc-nav .calc-consult-btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.72rem;
  }
}


/* ── Property Type Toggle ─────────────────────────────────────
   Styles the House/Condo toggle inserted by the script in
   calculator.html directly above the bundled app's own native
   "Property expenses" section. Scoped to .prop-type-toggle only —
   does not touch any bundler-internal markup.
────────────────────────────────────────────────────────────── */
.prop-type-toggle {
  margin-bottom: 1rem;
}

.prop-type-toggle-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.5rem;
}

.prop-type-toggle-group {
  display: flex;
  gap: 0.5rem;
}

.prop-type-toggle-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.prop-type-toggle-group label {
  flex: 1;
  text-align: center;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ink);
  transition: all 0.15s;
}

.prop-type-toggle-group input[type="radio"]:checked + label {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

.prop-type-toggle-note {
  font-size: 0.78rem;
  color: var(--stone);
  margin-top: 0.5rem;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .prop-type-toggle-group {
    flex-direction: column;
  }
}