/* ─────────────────────────────────────────────────────────────────────────────
   PushPilot brand theme — red / maroon / white, taken from the logo.
   Loaded after the compiled app CSS on every page (public site + dashboards),
   so it recolours through the existing CSS variables without a Vite rebuild.
   ──────────────────────────────────────────────────────────────────────────── */
:root {
  --pp-red: #e1061b;          /* logo "Pilot" red */
  --pp-red-bright: #ff2a3a;
  --pp-red-soft: #ff4d5a;
  --pp-red-dark: #b00012;
  --pp-maroon: #320202;       /* logo "Push" maroon */
  --pp-ink: #1a0507;          /* near-black for dark sections */
  --pp-tint: #fff1f2;
  --pp-tint-2: #ffe4e6;

  --pp-primary: var(--pp-red);
  --pp-primary-dark: var(--pp-red-dark);
  --pp-secondary: var(--pp-red-soft);
  --pp-info: var(--pp-red-soft);
  --pp-text: #22090b;
  --pp-text-muted: #5f4b4d;   /* warm grey, ≥ 7:1 on white */
  --pp-border: #f1dcde;
  --pp-bg: #fffafa;

  --pp-sidebar-bg: #1a0507;
  --pp-sidebar-hover: #3a0a0d;
  --pp-sidebar-active: var(--pp-red);
  --pp-sidebar-text: #f6dfe1;

  --bs-primary: #e1061b;
  --bs-primary-rgb: 225, 6, 27;
  --bs-link-color: #c8051a;
  --bs-link-color-rgb: 200, 5, 26;
  --bs-link-hover-color: #8f0010;
  --bs-link-hover-color-rgb: 143, 0, 16;
  --bs-focus-ring-color: rgba(225, 6, 27, .25);

  --pp-font-heading: 'Poppins', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --pp-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Typography: rounded geometric headings (close to the logo), crisp body ── */
body { font-family: var(--pp-font-body); color: var(--pp-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6, .display-4, .display-5, .fw-black, .navbar-brand, .pricing-price, .stat-num, .pp-page-title {
  font-family: var(--pp-font-heading);
  letter-spacing: -.01em;
}
.text-muted { color: var(--pp-text-muted) !important; }

/* ── Bootstrap components in brand colours ── */
.btn-primary {
  --bs-btn-bg: var(--pp-red); --bs-btn-border-color: var(--pp-red);
  --bs-btn-hover-bg: var(--pp-red-dark); --bs-btn-hover-border-color: var(--pp-red-dark);
  --bs-btn-active-bg: #8f0010; --bs-btn-active-border-color: #8f0010;
  --bs-btn-disabled-bg: var(--pp-red); --bs-btn-disabled-border-color: var(--pp-red);
  --bs-btn-focus-shadow-rgb: 225, 6, 27;
}
.btn-outline-primary {
  --bs-btn-color: var(--pp-red); --bs-btn-border-color: var(--pp-red);
  --bs-btn-hover-bg: var(--pp-red); --bs-btn-hover-border-color: var(--pp-red);
  --bs-btn-active-bg: var(--pp-red-dark); --bs-btn-active-border-color: var(--pp-red-dark);
}
.text-primary { color: var(--pp-red) !important; }
.bg-primary, .text-bg-primary { background-color: var(--pp-red) !important; color: #fff !important; }
.border-primary { border-color: var(--pp-red) !important; }
.link-primary { color: var(--pp-red) !important; }
.form-control:focus, .form-select:focus, .pp-input:focus { border-color: var(--pp-red) !important; box-shadow: 0 0 0 3px rgba(225, 6, 27, .18) !important; }
.form-check-input:checked { background-color: var(--pp-red); border-color: var(--pp-red); }
.page-link { color: var(--pp-red); }
.page-item.active .page-link { background-color: var(--pp-red); border-color: var(--pp-red); }
.pp-badge-primary, .pp-badge-info { background: var(--pp-tint-2) !important; color: #9b0013 !important; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--pp-red); }
.progress-bar.bg-primary, .progress-bar { background-color: var(--pp-red); }

/* ── Logo image ── */
.pp-brand-logo { display: block; height: 42px; width: auto; max-width: 100%; }
.pp-sidebar .pp-logo img.pp-brand-logo { height: 40px; }
.pp-sidebar .pp-logo img.pp-brand-logo-sm, .pp-brand-logo-sm { height: 34px; }

/* ── Dashboards: maroon sidebar, readable section labels ── */
.pp-sidebar .nav-section { color: rgba(246, 223, 225, .62); }
.pp-sidebar .nav-link.active { box-shadow: inset 3px 0 0 #fff; }
.pp-topbar { border-bottom: 1px solid var(--pp-border); }

/* ── Public layout footer ── */
.pp-footer { background: var(--pp-ink); }
.pp-footer .text-white-50, .pp-footer.text-white-50 { color: rgba(255, 255, 255, .74) !important; }
.pp-footer a.text-white-50:hover { color: #fff !important; }
.pp-footer hr { border-color: rgba(255, 255, 255, .14) !important; opacity: 1; }

/* ── Scroll progress bar (top of the page) ── */
.pp-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 2147483000;
  transform-origin: 0 50%; transform: scaleX(var(--pp-scroll, 0));
  background: linear-gradient(90deg, #8f0010, var(--pp-red), var(--pp-red-bright), #ffb3b8, var(--pp-red));
  background-size: 200% 100%;
  animation: ppProgressShine 2.4s linear infinite;
  box-shadow: 0 0 10px rgba(225, 6, 27, .55);
  pointer-events: none;
}
@keyframes ppProgressShine { to { background-position: -200% 0; } }

/* ── Custom scrollbars ── */
html { scrollbar-color: var(--pp-red) #fde7e9; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #fdeef0; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--pp-red-bright), var(--pp-red) 45%, #8f0010);
  border-radius: 999px; border: 2px solid #fdeef0;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ff5260, var(--pp-red-bright) 45%, var(--pp-red)); }
::-webkit-scrollbar-corner { background: #fdeef0; }
.pp-sidebar ::-webkit-scrollbar-track, .pp-sidebar::-webkit-scrollbar-track { background: #12030a; }

/* ── Back-to-top button with scroll-progress ring ── */
.pp-totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 2147482000;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--pp-red); box-shadow: 0 8px 24px rgba(50, 2, 2, .25);
  display: grid; place-items: center; font-size: 1.15rem; font-weight: 800;
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.pp-totop.show { opacity: 1; transform: none; pointer-events: auto; }
.pp-totop:hover { transform: translateY(-3px); }
.pp-totop svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.pp-totop circle { fill: none; stroke-width: 3; }
.pp-totop .ring-bg { stroke: #fde2e4; }
.pp-totop .ring { stroke: var(--pp-red); stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: calc(138.2 * (1 - var(--pp-scroll, 0))); }

/* ── Reveal on scroll (classes added by motion.js; content stays visible without JS) ── */
.pp-reveal { opacity: 0; transform: translateY(28px) scale(.985); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--pp-i, 0) * 70ms); }
.pp-reveal.pp-in { opacity: 1; transform: none; }

/* ── Button shine sweep ── */
.btn-primary, .btn-light.btn-lg { position: relative; overflow: hidden; }
.btn-primary::after, .btn-light.btn-lg::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg); transition: left .6s ease;
}
.btn-primary:hover::after, .btn-light.btn-lg:hover::after { left: 120%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .pp-reveal { opacity: 1; transform: none; }
}

/* ── Top ticker: dark maroon bar with gold highlights (stands apart from the red hero) ── */
html body .announce-bar {
  background: linear-gradient(90deg, #12030a, #320202 30%, #4a0610 50%, #320202 70%, #12030a);
  background-size: 300% 100%;
  border-bottom: 2px solid #e1061b;
  box-shadow: inset 0 -1px 0 rgba(255, 196, 0, .25);
}
html body .announce-item { color: #fff; font-size: .82rem; }
html body .announce-dot { background: #ffc400; box-shadow: 0 0 10px #ffc400, 0 0 2px #fff; }
html body .announce-sep { color: #ffc400; opacity: .85; }

/* ── Menu links as buttons ── */
html body .navbar .navbar-nav { gap: .5rem; }
html body .navbar .navbar-nav .nav-link {
  padding: .45rem 1.05rem; border-radius: 999px; font-weight: 600; font-size: .9rem;
  color: #320202; background: #fff; border: 1.5px solid #f3c6cb;
  box-shadow: 0 1px 2px rgba(50, 2, 2, .06);
  transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
html body .navbar .navbar-nav .nav-link:hover,
html body .navbar .navbar-nav .nav-link:focus-visible {
  background: var(--pp-red); color: #fff; border-color: var(--pp-red);
  transform: translateY(-2px); box-shadow: 0 6px 16px rgba(225, 6, 27, .28);
}
html body .navbar .navbar-nav .nav-link.active { background: var(--pp-tint); color: var(--pp-red-dark); border-color: var(--pp-red); }
html body .navbar .navbar-nav .nav-link.active:hover { background: var(--pp-red); color: #fff; }
@media (max-width: 991.98px) {
  html body .navbar .navbar-nav { gap: .45rem; padding: .5rem 0; }
  html body .navbar .navbar-nav .nav-link { text-align: center; }
}

/* ── Hero badge: maroon pill on the red hero ── */
.pub-hero .badge.text-bg-primary { background: #320202 !important; color: #fff !important; padding: .45em 1em; border-radius: 999px; box-shadow: 0 4px 14px rgba(50, 2, 2, .3); }

/* ── Hero notification cards: bigger, bolder, highlighted ── */
.hero-fx .toast {
  min-width: 225px; padding: .75rem 1rem .75rem .85rem; gap: .7rem;
  border-left: 5px solid var(--pp-red);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .28), 0 18px 40px rgba(50, 2, 2, .38);
}
.hero-fx .toast img { width: 38px; height: 38px; }
.hero-fx .toast b { font-size: 1rem; font-weight: 800; color: var(--pp-red-dark); letter-spacing: -.01em; }
.hero-fx .toast small { font-size: .8rem; font-weight: 600; color: #320202; }
.hero-fx .toast::after {
  content: ''; position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border-radius: 50%;
  background: #ffc400; border: 2px solid #fff; animation: ppToastPing 1.6s ease-out infinite;
}
@keyframes ppToastPing { 0% { box-shadow: 0 0 0 0 rgba(255, 196, 0, .7); } 100% { box-shadow: 0 0 0 12px rgba(255, 196, 0, 0); } }
html body .navbar .btn, html body .nav-actions .btn { white-space: nowrap; }
html body .nav-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
html body .navbar .btn-ghost { font-weight: 600; color: #320202; }
html body .navbar .btn-ghost:hover { color: var(--pp-red); background: var(--pp-tint); }
@media (min-width: 992px) and (max-width: 1199.98px) {
  html body .navbar .navbar-nav { gap: .3rem; }
  html body .navbar .navbar-nav .nav-link { padding: .4rem .8rem; }
}