/* ─────────────────────────────────────────────
   immi.tv — Shared Chrome Styles
   Nav + Ticker + Trust Bar + Mobile Menu
   Single source of truth. All pages link this.
───────────────────────────────────────────── */

/* ── Design tokens (chrome-relevant subset) ── */
:root {
  --warm-white: #fafaf5;
  --cream: #f5f0e8;
  --cream-dark: #ede5d4;
  --forest: #166534;
  --forest-mid: #15803d;
  --forest-light: #dcfce7;
  --forest-faint: #f0fdf4;
  --amber: #d97706;
  --brown: #1c1917;
  --stone: #57534e;
  --stone-light: #78716c;
  --border: #e7e2d9;
  --border-dark: #d4cfc6;
  --white: #ffffff;
  --ticker-bg: #1c1917;
  --ticker-text: #f5f0e8;
  --ticker-dot: #ef4444;
  --ticker-sep: #d97706;
  --nav-h: 60px;
  --ticker-h: 32px;
  --trust-bar-h: 40px;
  --offset: calc(
    var(--nav-h) + var(--ticker-h) + var(--trust-bar-h)
  ); /* 132px */
}

/* Keyboard focus styles */
*:focus-visible {
  outline: 2px solid #166534;
  outline-offset: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

/* ── TV logo animations ── */
@keyframes tv-flicker {
  0%,
  88%,
  100% {
    opacity: 0.8;
    fill: var(--forest);
  }
  90% {
    opacity: 0.25;
    fill: var(--amber);
  }
  92% {
    opacity: 0.9;
    fill: var(--forest);
  }
  95% {
    opacity: 0.15;
  }
  97% {
    opacity: 0.85;
    fill: var(--forest);
  }
}
@keyframes antenna-sway {
  0%,
  100% {
    transform: rotate(0deg);
    transform-origin: bottom center;
  }
  30% {
    transform: rotate(-4deg);
    transform-origin: bottom center;
  }
  70% {
    transform: rotate(3deg);
    transform-origin: bottom center;
  }
}
@keyframes tv-glow-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0px rgba(22, 101, 52, 0));
  }
  50% {
    filter: drop-shadow(0 0 5px rgba(22, 101, 52, 0.5));
  }
}

.tv-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  animation: tv-glow-pulse 4s ease-in-out infinite;
}
.tv-icon {
  width: 36px;
  height: 32px;
  flex-shrink: 0;
}
.tv-screen {
  fill: var(--forest);
  animation: tv-flicker 5s ease-in-out infinite;
}
.tv-antenna-l {
  animation: antenna-sway 6s ease-in-out infinite;
}
.tv-antenna-r {
  animation: antenna-sway 6s ease-in-out infinite reverse;
}
.logo-text {
  font-family: "Fraunces", serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--brown);
  letter-spacing: -0.02em;
  line-height: 1;
}
.logo-text span {
  color: var(--forest);
}

/* ─────────────────────────────────────────────
   FIXED NAV
───────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
}
.nav-links a {
  color: var(--stone);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s;
}
.nav-links a:hover {
  color: var(--brown);
}
.nav-links a.nav-active {
  color: var(--forest);
  font-weight: 600;
}

/* ── Geo toggle ── */
.nav-geo {
  display: inline-flex;
  align-items: center;
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 3px;
  gap: 2px;
}
.nav-geo-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--stone);
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}
.nav-geo-btn.active {
  background: var(--forest);
  color: var(--white);
}
.flag-svg {
  width: 22px;
  height: 15px;
  border-radius: 2px;
  border: 0.5px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.nav-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.nav-btn-ghost {
  color: var(--stone);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: all 0.15s;
}
.nav-btn-ghost:hover {
  border-color: var(--forest);
  color: var(--forest);
}
.nav-btn-primary {
  background: var(--forest);
  color: var(--white);
  padding: 9px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.nav-btn-primary:hover {
  background: var(--forest-mid);
}

/* ── Free Tools dropdown ── */
.nav-item-dd {
  position: relative;
  list-style: none;
}
.nav-dd {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 6px;
  display: none;
  z-index: 300;
}
/* Right-aligned dropdown for items near the right edge of the nav */
.nav-dd-right {
  left: auto;
  right: 0;
}
.nav-item-dd:hover .nav-dd {
  display: block;
}
.nav-dd-inner {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(28, 25, 23, 0.12);
  min-width: 244px;
  padding: 8px;
  overflow: hidden;
}
.nav-dd-inner-wide {
  min-width: 480px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 8px;
  padding: 12px;
}
/* Two-column layout: each col is a grid child that stacks items vertically */
.nav-dd-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nav-dd-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone-light);
  padding: 2px 8px 8px;
}
/* Full-width separator and cross-country row span both columns */
.nav-dd-sep-full,
.nav-dd-row-full {
  grid-column: 1 / -1;
}
.nav-dd-sep-full {
  height: 1px;
  background: var(--border);
  margin: 8px 0 4px;
}
.nav-dd-row-full {
  display: flex;
  gap: 4px;
}
/* Legacy single-separator rule (kept for backward compat) */
.nav-dd-sep {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}
.nav-dd-inner-wide .nav-dd-item {
  grid-column: auto;
}
.nav-dd-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 14px;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s;
}
.nav-dd-item:hover {
  background: var(--forest-faint);
}
.nav-dd-item:hover .nav-dd-item-name {
  color: var(--forest);
}
.nav-dd-item-icon {
  font-size: 16px;
  line-height: 1.3;
  flex-shrink: 0;
}
.nav-dd-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-dd-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--brown);
}
.nav-dd-item-sub {
  font-size: 11px;
  color: var(--stone-light);
  font-weight: 400;
  line-height: 1.4;
}
/* Small badge to distinguish calculators/tools from guide links in dropdowns */
.nav-dd-tool-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--forest-faint);
  color: var(--forest);
  border: 1px solid var(--forest-mid);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.6;
}

/* ─────────────────────────────────────────────
   LIVE TICKER
───────────────────────────────────────────── */
@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes live-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
.live-ticker {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 199;
  height: var(--ticker-h);
  background: var(--ticker-bg);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 2px solid var(--amber);
}
.ticker-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--ticker-bg);
  z-index: 2;
  position: relative;
}
.ticker-live-dot {
  width: 8px;
  height: 8px;
  background: var(--ticker-dot);
  border-radius: 50%;
  animation: live-blink 1s step-start infinite;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}
.ticker-live-text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ticker-dot);
  text-transform: uppercase;
}
.ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker-scroll 45s linear infinite;
}
.ticker-track:hover {
  animation-play-state: paused;
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  padding: 0 24px;
}
.ticker-item-country {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  margin-right: 8px;
}
.ticker-item-flag {
  font-size: 15px;
  line-height: 1;
  margin-right: 6px;
  flex-shrink: 0;
}
.ticker-item-date {
  font-size: 12px;
  color: var(--ticker-sep);
  margin-right: 6px;
  white-space: nowrap;
}
.ticker-breaking {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--stone-900, #1c1917);
  background: #ef4444;
  padding: 1px 5px;
  border-radius: 2px;
  margin-right: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ticker-item-link {
  font-size: 12px;
  color: var(--ticker-text);
  font-weight: 400;
  text-decoration: none;
}
.ticker-item-link:hover {
  color: var(--amber);
  text-decoration: underline;
}
.ticker-item-text {
  font-size: 12px;
  color: var(--ticker-text);
  font-weight: 400;
}
.ticker-sep {
  color: var(--ticker-sep);
  font-size: 14px;
  padding: 0 8px;
  opacity: 0.5;
}

/* ─────────────────────────────────────────────
   TRUST BAR
───────────────────────────────────────────── */
.trust-bar-sticky {
  position: fixed;
  top: calc(var(--nav-h) + var(--ticker-h));
  left: 0;
  right: 0;
  z-index: 198;
  height: var(--trust-bar-h);
  background: var(--forest);
  padding: 0 48px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.trust-bar-sticky .trust-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-wrap: nowrap;
}
.trust-bar-sticky .trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.trust-bar-sticky .trust-item:first-child {
  padding-left: 0;
}
.trust-bar-sticky .trust-item:last-child {
  border-right: none;
  padding-right: 0;
}
.trust-bar-sticky .trust-item strong {
  color: var(--white);
}
.trust-bar-sticky .trust-icon {
  font-size: 13px;
}

/* ─────────────────────────────────────────────
   MOBILE NAV — hamburger + drawer
───────────────────────────────────────────── */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--brown);
  font-size: 22px;
  line-height: 1;
}
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  z-index: 300;
  padding: 16px 20px 24px;
  border-bottom: 2px solid var(--border);
  box-shadow: 0 8px 32px rgba(28, 25, 23, 0.12);
  overflow-y: auto;
  max-height: calc(100vh - var(--nav-h));
}
.nav-mobile-menu.open {
  display: block;
}
.nav-mobile-links {
  list-style: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.nav-mobile-links li a {
  display: block;
  padding: 12px 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--brown);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.nav-mobile-links li:last-child a {
  border-bottom: none;
}
.nav-mobile-geo {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.nav-mobile-geo .nav-geo-btn {
  flex: 1;
  padding: 10px 8px;
  font-size: 13px;
  text-align: center;
}
.nav-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nav-mobile-actions .nav-btn-ghost,
.nav-mobile-actions .nav-btn-primary {
  display: block;
  text-align: center;
  padding: 13px;
  font-size: 15px;
}

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
footer {
  background: var(--forest);
  padding: 56px 48px 40px;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.footer-logo-text {
  font-family: "Fraunces", serif;
  font-size: 20px;
  font-weight: 700;
  color: white;
}
.footer-logo-text span {
  color: white;
}
.footer-brand p {
  font-size: 13px;
  color: white;
  line-height: 1.6;
  margin-bottom: 16px;
}
.footer-cred {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.footer-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  color: white;
}
.footer-compliance {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-compliance-line {
  font-size: 11px;
  color: white;
  line-height: 1.5;
}
.footer-compliance-line strong {
  color: white;
  font-weight: 600;
}
.footer-compliance-line a {
  color: white;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}
.footer-compliance-line a:hover {
  color: white;
}
.footer-rcic-badge {
  margin-top: 12px;
  display: inline-block;
  background: var(--white);
  border-radius: 6px;
  padding: 10px 16px;
}
.footer-rcic-badge img {
  display: block;
  height: 56px;
  width: auto;
}
.footer-col h5 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: white;
  margin-bottom: 16px;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col a {
  font-size: 13px;
  color: white;
  text-decoration: none;
  transition: color 0.1s;
}
.footer-col a:hover {
  color: rgba(255, 255, 255, 0.75);
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-copy {
  font-size: 12px;
  color: white;
}
.footer-bottom-links {
  display: flex;
  gap: 20px;
}
.footer-bottom-links a {
  font-size: 12px;
  color: white;
  text-decoration: none;
}

/* ─────────────────────────────────────────────
   EMBED MODE — hide all chrome
───────────────────────────────────────────── */
.embed-mode #site-chrome,
.embed-mode #site-footer,
.embed-mode nav,
.embed-mode .live-ticker,
.embed-mode .trust-bar-sticky,
.embed-mode .nav-mobile-menu {
  display: none !important;
}
.embed-mode body {
  padding-top: 0 !important;
}

/* ─────────────────────────────────────────────
   RESPONSIVE — MEDIUM DESKTOP (1024–1279px)
   Compact nav: tighten gaps, drop ghost button
───────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {
  nav {
    padding: 0 16px;
    overflow: visible;
  }
  .nav-links {
    gap: 12px;
  }
  .nav-links a {
    font-size: 13px;
  }
  .nav-btn-ghost {
    display: none;
  }
  .nav-geo-btn {
    padding: 4px 7px;
    font-size: 10px;
  }
  .nav-btn-primary {
    padding: 8px 14px;
    font-size: 13px;
  }
  /* Prevent wide dropdowns from overflowing viewport at compact-desktop width */
  .nav-dd-inner-wide {
    min-width: 260px;
    grid-template-columns: 1fr;
  }
  .nav-dd-inner-wide .nav-dd-sep-full,
  .nav-dd-inner-wide .nav-dd-row-full {
    grid-column: 1;
  }
}

/* ─────────────────────────────────────────────
   RESPONSIVE — TABLET (769–1023px)
   Hamburger replaces full nav
───────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1023px) {
  nav {
    padding: 0 20px;
  }
  .nav-links,
  .nav-geo,
  .nav-actions {
    display: none;
  }
  .nav-hamburger {
    display: flex;
    align-items: center;
  }
  .footer-top {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }
}

/* ─────────────────────────────────────────────
   COOKIE CONSENT BANNER
───────────────────────────────────────────── */
@keyframes cookie-slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

#cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 24px));
  z-index: 9999;
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 680px;
  width: calc(100% - 32px);
  box-shadow:
    0 4px 24px rgba(28, 25, 23, 0.1),
    0 1px 4px rgba(28, 25, 23, 0.06);
  opacity: 0;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease;
}
#cookie-banner.cookie-banner-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.cookie-banner-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}

.cookie-banner-text {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 13px;
  color: var(--stone);
  line-height: 1.5;
  flex: 1;
  margin: 0;
}
.cookie-banner-text a {
  color: var(--forest);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.cookie-banner-text a:hover {
  color: var(--forest-mid);
}

#cookie-accept {
  flex-shrink: 0;
  background: var(--forest);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    box-shadow 0.15s;
  white-space: nowrap;
  line-height: 1;
}
#cookie-accept:hover {
  background: var(--forest-mid);
  box-shadow: 0 2px 8px rgba(22, 101, 52, 0.25);
}

@media (max-width: 600px) {
  #cookie-banner {
    bottom: 12px;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 10px;
  }
  .cookie-banner-icon {
    display: none;
  }
  .cookie-banner-text {
    flex-basis: calc(100% - 40px);
    font-size: 12px;
  }
  #cookie-accept {
    margin-left: auto;
    padding: 7px 16px;
    font-size: 12px;
  }
}

/* ─────────────────────────────────────────────
   RESPONSIVE — MOBILE (≤768px)
───────────────────────────────────────────── */
@media (max-width: 768px) {
  nav {
    padding: 0 20px;
  }
  .nav-links,
  .nav-geo,
  .nav-actions {
    display: none;
  }
  .nav-hamburger {
    display: flex;
    align-items: center;
  }

  .trust-bar-sticky {
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* ⛔ HIDE THE SCROLLBAR CHROME, KEEP THE SCROLL (owner review 2026-08-20).
       The five credential items are 949px wide in a 390px viewport, so this bar has always
       scrolled horizontally — on LIVE too (measured 2026-08-20: live 948/390, staged 949/390,
       identical). Nobody reports seeing a bar on a phone because iOS and Android draw OVERLAY
       scrollbars that fade; Chrome DevTools device emulation on a desktop OS draws a classic
       persistent one, which is what surfaced this (R-051: emulation is not the user's runtime).
       ⛔ Do NOT "fix" this by removing overflow-x — the items genuinely do not fit and would be
       clipped with no way to reach them. Only the bar chrome is hidden; swipe still works.
       ⚠ This is site-wide chrome, not occupation-page CSS: it changes every page on immi.tv. */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* legacy Edge */
  }
  .trust-bar-sticky::-webkit-scrollbar {
    display: none; /* Chrome / Safari */
  }
  .trust-bar-sticky .trust-bar-inner {
    justify-content: flex-start;
    gap: 0;
    min-width: max-content;
  }
  .trust-bar-sticky .trust-item {
    padding: 0 12px;
    font-size: 11px;
  }

  footer {
    padding: 40px 20px 28px;
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────
   CALCULATOR MODAL (injected by chrome.js)
───────────────────────────────────────────── */
.calc-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(28, 25, 23, 0.82);
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.calc-modal-overlay.open {
  display: flex;
}
.calc-modal {
  background: var(--white, #ffffff);
  border-radius: 16px;
  width: 100%;
  max-width: 1100px;
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 80px rgba(28, 25, 23, 0.35);
  transition: height 0.25s ease;
}
.calc-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  background: var(--brown, #78350f);
  color: var(--white, #ffffff);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  font-family: inherit;
}
.calc-modal-close:hover {
  background: var(--stone, #57534e);
}
.calc-modal-frame {
  width: 100%;
  flex: 1;
  border: none;
  display: block;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .calc-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .calc-modal {
    width: 100%;
    height: 92vh;
    border-radius: 16px 16px 0 0;
    max-width: 100%;
    overflow: hidden;
  }
  .calc-modal-close {
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
}

/* ── Mobile sticky CTA bar (site-wide) ── */
.mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 12px 20px;
  z-index: 500;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
}
.mobile-cta a {
  display: block;
  background: #fff;
  color: var(--forest);
  text-align: center;
  padding: 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
/* ⛔ 580px AND SCROLL-REVEALED — matching `.mobile-cta`, which is what 617 pages
   already use against this class's 262. Owner 2026-08-27: "the mobile CTA appears
   on the hub pages sooner than the occupation pages".
   Measured: this appeared at 1140px IMMEDIATELY, while `.mobile-cta` appears at
   580px and only once the hero scrolls out of view. Two classes, two breakpoints
   and two reveal mechanisms — a 560px difference from one "shared" component.
   ⚠ A sticky bar at 1140px covers content on a small laptop, which is why the
   narrower breakpoint is the right one to converge on.
   ⚠ KNOWN GAP, NOT INTRODUCED HERE: between 580px and 1140px neither the sidebar
   (hidden below 1140) nor the sticky bar (shown below 580) is present. That dead
   zone already existed on all 617 occupation-style pages; converging makes it
   consistent rather than creating it. Worth a design decision separately. */
@media (max-width: 1000px) {
  .mobile-cta {
    display: block;
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .mobile-cta.show {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
}

/* Occupation-page tiered variant: calc-primary row + Book/Call/WhatsApp secondary row.
   Set by chrome.js on /australia/occupations/* pages only. */
.mobile-cta-tiered {
  padding: 10px 14px 8px;
}
.mobile-cta-tiered .mobile-cta-primary {
  display: block;
  background: var(--forest-2, #08724a);
  color: #fff;
  text-align: center;
  padding: 11px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.mobile-cta-tiered .mobile-cta-secondary {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.mobile-cta-tiered .mobile-cta-secondary a {
  flex: 1 1 0;
  display: block;
  background: transparent;
  border: 1.5px solid var(--forest-2, #08724a);
  color: var(--forest-2, #08724a);
  text-align: center;
  padding: 7px 4px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 12.5px;
  text-decoration: none;
}
.mobile-cta-tiered .mobile-cta-secondary a:active {
  background: var(--mint, #e8f5ed);
}

/* ── v7 occupation corpus: the SAME tiered bar on a WHITE background ──────────
   ⛔ WHY THIS BLOCK EXISTS (CP-C11, 2026-08-20). Everything above assumes the
   bar is `--forest` dark green, so it paints the primary button WHITE and the
   secondary links WHITE-on-transparent. The v7 occupation page ships
   `.mobile-cta { background:#fff }` from its own inline <style>. Pointing
   chrome.js at that node without this block renders white-on-white — the CTA
   is present, clickable, passes every gate, and is INVISIBLE (R-125).
   Measured before writing this: bar bg rgb(255,255,255) vs the tiered rules'
   assumed rgb(22,101,52).
   Specificity: `.mobile-cta-tiered X` (0,3,0) beats
   `.mobile-cta-tiered X` (0,2,0), so these win without !important —
   ⛔ never !important here, the bar's show/hide is a transform animation
   (R-126a). Colours are the v7 page's own tokens, hard-coded as a fallback
   because chrome.css redefines `--forest` to a different green than the v7
   page does and must not be relied on across that boundary. */
.mobile-cta-tiered {
  padding: 10px 13px calc(8px + env(safe-area-inset-bottom));
}
.mobile-cta-tiered .mobile-cta-primary {
  background: var(--forest-2, #08724a);
  color: #fff;
  font-size: 15px;
  padding: 13px;
}
.mobile-cta-tiered .mobile-cta-secondary a {
  border: 1.5px solid var(--forest-2, #08724a);
  color: var(--forest-2, #08724a);
  background: transparent;
  min-height: 34px;
  line-height: 1.35;
}
.mobile-cta-tiered .mobile-cta-secondary a:active {
  background: var(--mint, #e8f5ed);
}
/* ⛔ THE SAME HEADING THE OCCUPATION PAGES USE (owner 2026-08-26). Measured on
   `.occ-disc summary`: flex, justify-content FLEX-START, gap 8px, an inline ⓘ svg before the text,
   and a `+`/`−` marker pushed right by `margin-left:auto`. This widget had
   justify-content:space-between with a `▼` chevron GLYPH in the markup, and the title read
   "Important disclaimer". Title, icon and marker are now identical; only the body wording differs
   by page, which is the agreed rule. */
.disclaimer-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}
.disclaimer-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone-light);
}
.disclaimer-chevron {
  font-size: 12px;
  color: var(--stone-light);
  transition: transform 0.2s;
}
/* 🗄 The rotate rules are retired — there is no chevron to rotate any more. */

.disclaimer-body {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  color: var(--stone-light);
  line-height: 1.7;
}
.disclaimer-body strong {
  font-weight: 600;
  color: var(--stone);
}
.disclaimer-body a {
  color: var(--stone);
  text-decoration: underline;
}

/* 🗄 `.calc-disclaimer.legal` RULES REMOVED 2026-08-27 (step b5).
   They were a hand-written twin of the frozen template's `.occ-disc`, kept in step BY HAND
   — one guarantee, two mechanisms (R-116), and it had drifted twice in one week.
   The single definition now lives in the GENERATED assets/css/disclaimer.css, emitted from
   the frozen template by automation-scripts/build-disclaimer-css.py, which maps the two
   different markups (native <details>/<summary> vs div/.disclaimer-toggle) from one source.
   ⛔ Do not re-add disclaimer rules here. Regenerate instead. */

/* ── SPACING BELOW THE LEGAL DISCLAIMER — one value site-wide ─────────────────
   Owner 2026-08-27: the gap above and below the disclaimer must be the same on
   occupation pages and hubs. Above is 44px on both (the panel's own margin-top).
   Below was 90px on occupation pages and 0 on hubs.

   ⛔ The 90px comes from `main{padding:48px 0 90px}` in the FROZEN template's
   inline <style>, which sits BEFORE the <link> tags — so this rule overrides it
   without touching the frozen file and without a regeneration.
   ⚠ `:has(.occ-disc)` scopes it to pages carrying the occupation disclaimer, so
   it cannot reach hubs (which use .calc-disclaimer.legal and get their 40px from
   the panel's own margin-bottom) or any other family with a <main>.
   ⚠ CHANGE BOTH TOGETHER: the hub value lives in the GENERATED
   assets/css/disclaimer.css, emitted by automation-scripts/build-disclaimer-css.py. */
/* ⚠ ZERO, not 40. The 40px now comes from the panel's own margin-bottom in the
   GENERATED disclaimer.css, so it is one rule for every page instead of two
   mechanisms that drifted to 90px and 0px. Leaving 40 here would double it. */
main:has(.occ-disc) { padding-bottom: 0; }

/* ── ONE COLOUR SCHEME FOR THE STICKY BAR ────────────────────────────────────
   ⛔ These were INVERTED between the two classes, and nobody had configured
   them to differ. Measured 2026-08-28 at 390px:
     .mobile-cta        white bar · forest #08724a primary · forest text
     .mobile-cta  FOREST #166534 bar · WHITE primary · white text
   Two classes, two independent schemes — and two different greens, because one
   read `--forest` from chrome.css (#166534) and the other `--forest-2` from the
   occupation template (#08724a). The token collision this project namespaced
   around was showing up as a visible colour difference on the primary
   conversion control.
   ⇒ Converged on the occupation scheme, which is the reference and which 617
   pages already used against this class's 262.
   ⚠ The old `.mobile-cta-tiered` overrides below are now
   REDUNDANT — they restate what the base rules say. Left in place only because
   removing them is a separate, verifiable edit; they cannot cause drift while
   they agree, and a gate would catch it if they stopped. */