/* Shared PSMJ component styles, nav chrome and animations.
   Loaded by every page alongside the compiled Tailwind stylesheet. */

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--psmj-red);
  color: var(--psmj-white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 14px 26px;
  border-radius: var(--radius-btn);
  transition: background var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  min-height: 48px;
  border: 0;
  cursor: pointer;
}
.btn-primary:hover { background: var(--psmj-red-600); }
.btn-primary:active { background: var(--psmj-red-700); transform: translateY(1px); }

.btn-navy {
  background: var(--psmj-navy);
  color: var(--psmj-white);
}
.btn-navy:hover { background: #041d38; }
.btn-navy:active { background: #041d38; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--psmj-navy);
  border: 1px solid var(--psmj-navy);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 13px 25px;
  border-radius: var(--radius-btn);
  transition: background var(--duration-base) var(--ease-standard);
  min-height: 48px;
  cursor: pointer;
}
.btn-secondary:hover { background: rgba(6, 41, 70, 0.06); }

.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--psmj-white);
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  padding: 13px 25px;
  border-radius: var(--radius-btn);
  transition: background var(--duration-base) var(--ease-standard);
  min-height: 48px;
  cursor: pointer;
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.10); }

.slash {
  display: inline-block;
  width: 56px;
  height: 4px;
  background: var(--psmj-red);
  transform: skewX(-28deg);
}

/* Decorative slash under the Coach portrait is only shown on large screens,
   where the portrait sits in its own column. On smaller screens it would
   stack directly beneath the "Your Coach" eyebrow slash, so it is hidden. */
.coach-portrait .slash-deco { display: none; }
@media (min-width: 64rem) {
  .coach-portrait .slash-deco { display: inline-block; }
}

.container-psmj {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}
.container-wide {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* Hero CTA pulse */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 65, 53, 0.55), 0 0 0 0 rgba(239, 65, 53, 0.35);
  }
  50% {
    box-shadow: 0 0 18px 6px rgba(239, 65, 53, 0.55), 0 0 34px 12px rgba(239, 65, 53, 0.25);
  }
}
.animate-glow-pulse {
  animation: glow-pulse 3s ease-in-out infinite;
}

/* Route loading bar under the sticky nav */
.nav-loading-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}
.nav-loading-fill {
  height: 100%;
  width: 0%;
  opacity: 0;
  background: var(--psmj-red);
}
.nav-loading-fill.is-running {
  width: 100%;
  opacity: 1;
  transition: width 1300ms linear, opacity 100ms ease-out;
}

/* HubSpot compatibility — restores Tailwind responsive visibility */
@media (min-width: 640px) {
  .sm\:inline, .sm\:flex, .sm\:block { visibility: visible !important; }
  .sm\:inline *, .sm\:flex *, .sm\:block * { visibility: visible !important; }
}
@media (min-width: 768px) {
  nav.hidden, .md\:flex, .md\:block, .md\:inline { visibility: visible !important; }
  nav.hidden *, .md\:flex *, .md\:block *, .md\:inline * { visibility: visible !important; }
}
@media (min-width: 1024px) {
  .lg\:flex, .lg\:block, .lg\:inline { visibility: visible !important; }
  .lg\:flex *, .lg\:block *, .lg\:inline * { visibility: visible !important; }
}

/* Belt-and-braces: HubSpot's global .hidden rule also forces display:none */
@media (min-width: 640px) {
  [class*="sm:inline"] { display: inline !important; }
  [class*="sm:flex"] { display: flex !important; }
  [class*="sm:block"] { display: block !important; }
}
@media (min-width: 768px) {
  nav[class*="hidden"][class*="md:flex"] { display: flex !important; }
  [class*="md:flex"] { display: flex !important; }
  [class*="md:block"] { display: block !important; }
  [class*="md:inline"] { display: inline !important; }
}
@media (min-width: 1024px) {
  [class*="lg:flex"] { display: flex !important; }
  [class*="lg:block"] { display: block !important; }
  [class*="lg:inline"] { display: inline !important; }
}

/* The nav host div would otherwise become the sticky containing block and the
   header would scroll away with it. display:contents hoists the header into
   the page wrapper so `position: sticky` has the full page to stick against. */
[data-site-nav] {
  display: contents;
}

body {
  overflow: unset !important;
}

/* HubSpot site-wide header offset: the shared PSMJ top nav is 84px tall, so the
   in-page sticky nav ships with `top-21` (84px). In the Lovable preview only,
   shared.js swaps that for `top-0` since there is no site-wide nav above it. */