/* =============================================================================
   PharmacyAI — Global Styles
   src/styles/style.css
   VERSION: 3
   FROZEN — read CLAUDE.md § Frozen Files before modifying.
   Requires: tokens.css, typography.css
   Global resets, layout system, utility classes, and base component styles.

   Changelog:
   v3 (2026-05-14): Added .pa-hero section rule (background, padding,
     position: relative, overflow: hidden) for PAHero. Added
     .pa-btn--light button variant (bone bg, midnight text) for the
     hero "Get Updates" secondary CTA. Added .pa-bg-onyx utility for
     the hero proof bar background. All required per build prompt 03.
   v2 (2026-05-14): Added box-shadow transition to .pa-nav and new
     .pa-nav--scrolled rule. Approved as part of PANav build
     (build prompt 01 / feature/web-marketing-panav).
   v1 (2026-05-14): Initial placement during bootstrap.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   GLOBAL RESET
------------------------------------------------------------------------------ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--pa-bg-primary);
  color: var(--pa-text-primary);
  font-family: var(--pa-font-sans);
  font-size: var(--pa-body-reg-size);
  line-height: var(--pa-body-reg-leading);
  letter-spacing: var(--pa-body-reg-tracking);
  min-height: 100vh;
}

img, video {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* ---------------------------------------------------------------------------
   CONTAINER
------------------------------------------------------------------------------ */

.pa-container {
  width: 100%;
  max-width: var(--pa-container-max);
  margin-inline: auto;
  padding-inline: var(--pa-container-pad);
}

.pa-container--narrow {
  max-width: 720px;
}

.pa-container--wide {
  max-width: 1440px;
}

@media (max-width: 640px) {
  .pa-container {
    padding-inline: var(--pa-container-pad-mobile);
  }
}

/* ---------------------------------------------------------------------------
   SECTION SPACING
------------------------------------------------------------------------------ */

.pa-section {
  padding-block: var(--pa-space-16);
}

.pa-section--sm {
  padding-block: var(--pa-space-10);
}

.pa-section--lg {
  padding-block: var(--pa-space-24);
}

.pa-section--dark {
  background-color: var(--pa-bg-primary);
}

.pa-section--mid {
  background-color: var(--pa-bg-secondary);
}

.pa-section--light {
  background-color: var(--pa-color-bone);
  color: var(--pa-text-on-light);
}

/* ---------------------------------------------------------------------------
   NAVIGATION
------------------------------------------------------------------------------ */

.pa-nav {
  position: sticky;
  top: 0;
  z-index: var(--pa-z-sticky);
  background-color: var(--pa-bg-primary);
  border-bottom: 1px solid var(--pa-border-subtle);
  padding-block: var(--pa-space-4);
  padding-inline: var(--pa-container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-space-6);
  transition: box-shadow var(--pa-transition-base);
}

/* Added v2: applied by PANav when window.scrollY > 60 */
.pa-nav--scrolled {
  box-shadow: var(--pa-shadow-sm);
}

/* Added v3: outer wrapper for the homepage hero (PAHero).
   Glow backdrop and content stack on z-index above the background. */
.pa-hero {
  background-color: var(--pa-color-midnight);
  padding-block: var(--pa-space-20);
  padding-inline: var(--pa-container-pad);
  position: relative;
  overflow: hidden;
}

.pa-nav__links {
  display: flex;
  align-items: center;
  gap: var(--pa-space-6);
}

.pa-nav__link {
  font-family: var(--pa-font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pa-text-secondary);
  transition: color var(--pa-transition-base);
}

.pa-nav__link:hover {
  color: var(--pa-text-primary);
}

.pa-nav__link--active {
  color: var(--pa-color-mint);
}

/* ---------------------------------------------------------------------------
   BUTTONS
------------------------------------------------------------------------------ */

/* Base */
.pa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pa-space-2);
  font-family: var(--pa-font-mono);
  font-size: var(--pa-label-button-size);
  font-weight: var(--pa-label-button-weight);
  letter-spacing: var(--pa-label-button-tracking);
  text-transform: var(--pa-label-button-transform);
  padding: var(--pa-space-3) var(--pa-space-6);
  border-radius: var(--pa-radius-sm);
  border: 1px solid transparent;
  transition: all var(--pa-transition-base);
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
}

/* Primary — Denim fill */
.pa-btn--primary {
  background-color: var(--pa-color-denim);
  color: var(--pa-color-bone);
  border-color: var(--pa-color-denim);
}

.pa-btn--primary:hover {
  background-color: color-mix(in srgb, var(--pa-color-denim) 85%, white);
}

/* CTA — Mint accent for primary conversion actions */
.pa-btn--cta {
  background-color: var(--pa-color-mint);
  color: var(--pa-color-midnight);
  border-color: var(--pa-color-mint);
  font-weight: 600;
}

.pa-btn--cta:hover {
  background-color: color-mix(in srgb, var(--pa-color-mint) 85%, white);
}

/* Ghost */
.pa-btn--ghost {
  background-color: transparent;
  color: var(--pa-color-bone);
  border-color: var(--pa-border-default);
}

.pa-btn--ghost:hover {
  border-color: var(--pa-color-mint);
  color: var(--pa-color-mint);
}

/* Ghost on light */
.pa-btn--ghost-dark {
  background-color: transparent;
  color: var(--pa-color-midnight);
  border-color: var(--pa-color-denim);
}

.pa-btn--ghost-dark:hover {
  border-color: var(--pa-color-midnight);
}

/* Added v3: bone fill for secondary CTAs on dark backgrounds (hero email button). */
.pa-btn--light {
  background-color: var(--pa-color-bone);
  color: var(--pa-color-midnight);
  border-color: var(--pa-color-bone);
}
.pa-btn--light:hover {
  background-color: color-mix(in srgb, var(--pa-color-bone) 88%, white);
}

/* Added v3: onyx bg utility — used by the hero proof bar (deepest dark). */
.pa-bg-onyx {
  background-color: var(--pa-color-onyx);
}

/* Sizes */
.pa-btn--sm {
  font-size: var(--pa-label-legal-size);
  padding: var(--pa-space-2) var(--pa-space-4);
}

.pa-btn--lg {
  font-size: var(--pa-label-lg-size);
  padding: var(--pa-space-4) var(--pa-space-8);
}

/* Disabled state */
.pa-btn:disabled,
.pa-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   FORM ELEMENTS
------------------------------------------------------------------------------ */

.pa-input {
  width: 100%;
  background-color: rgba(45, 62, 81, 0.5);  /* denim at 50% */
  border: 1px solid var(--pa-border-default);
  border-radius: var(--pa-radius-sm);
  color: var(--pa-text-primary);
  font-family: var(--pa-font-sans);
  font-size: var(--pa-body-reg-size);
  padding: var(--pa-space-3) var(--pa-space-4);
  transition: border-color var(--pa-transition-base);
  outline: none;
}

.pa-input::placeholder {
  color: var(--pa-text-secondary);
}

.pa-input:focus {
  border-color: var(--pa-color-mint);
}

.pa-input--on-light {
  background-color: #fff;
  border-color: #ddd;
  color: var(--pa-color-midnight);
}

.pa-input--on-light::placeholder {
  color: var(--pa-color-sky);
}

.pa-label {
  display: block;
  font-family: var(--pa-font-mono);
  font-size: var(--pa-label-legal-size);
  font-weight: var(--pa-label-legal-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pa-text-secondary);
  margin-bottom: var(--pa-space-2);
}

.pa-field {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-2);
  margin-bottom: var(--pa-space-5);
}

/* Inline input + button (email capture) */
.pa-input-group {
  display: flex;
  gap: 0;
}

.pa-input-group .pa-input {
  border-radius: var(--pa-radius-sm) 0 0 var(--pa-radius-sm);
  border-right: none;
  flex: 1;
}

.pa-input-group .pa-btn {
  border-radius: 0 var(--pa-radius-sm) var(--pa-radius-sm) 0;
}

/* ---------------------------------------------------------------------------
   CARDS
------------------------------------------------------------------------------ */

.pa-card {
  background-color: var(--pa-bg-secondary);
  border: 1px solid var(--pa-border-subtle);
  border-radius: var(--pa-radius-sm);
  padding: var(--pa-space-6);
  transition: border-color var(--pa-transition-base);
}

.pa-card:hover {
  border-color: var(--pa-border-accent);
}

.pa-card--flat {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* Prompt / content card */
.pa-card--prompt {
  background-color: var(--pa-bg-secondary);
  border: 1px solid var(--pa-border-subtle);
  border-radius: var(--pa-radius-sm);
  padding: var(--pa-space-5);
  cursor: pointer;
  transition: all var(--pa-transition-base);
}

.pa-card--prompt:hover {
  border-color: var(--pa-color-mint);
  background-color: color-mix(in srgb, var(--pa-bg-secondary) 90%, var(--pa-color-mint));
}

/* ---------------------------------------------------------------------------
   CATEGORY PILLS / BADGES
------------------------------------------------------------------------------ */

.pa-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-1);
  font-family: var(--pa-font-mono);
  font-size: var(--pa-label-legal-size);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: var(--pa-radius-sm);
  border: 1px solid;
  line-height: 1;
}

/* Category variants */
.pa-badge--prior-auth   { background: rgba(131,188,120,0.12); color: var(--pa-color-mint); border-color: rgba(131,188,120,0.3); }
.pa-badge--drug-int     { background: rgba(244,169,78,0.12);  color: #F4A94E;              border-color: rgba(244,169,78,0.3); }
.pa-badge--documentation{ background: rgba(143,163,184,0.12); color: var(--pa-color-sky);  border-color: rgba(143,163,184,0.3); }
.pa-badge--inventory    { background: rgba(242,107,78,0.12);  color: var(--pa-color-ember);border-color: rgba(242,107,78,0.3); }
.pa-badge--billing      { background: rgba(61,190,154,0.12);  color: var(--pa-color-jade); border-color: rgba(61,190,154,0.3); }

/* HubSpot / lead flow annotations (internal use) */
.pa-badge--hubspot      { background: #FF7A59; color: #fff; border-color: #FF7A59; }
.pa-badge--email        { background: var(--pa-color-mint); color: var(--pa-color-midnight); border-color: var(--pa-color-mint); }
.pa-badge--free         { background: var(--pa-border-subtle); color: var(--pa-text-secondary); border-color: var(--pa-border-default); }

/* Pill shape variant */
.pa-badge--pill {
  border-radius: var(--pa-radius-pill);
  padding-inline: var(--pa-space-3);
}

/* ---------------------------------------------------------------------------
   DIVIDERS
------------------------------------------------------------------------------ */

.pa-rule {
  width: 100%;
  height: 1px;
  background-color: var(--pa-border-subtle);
  border: none;
}

.pa-rule--accent {
  width: 36px;
  height: 2px;
  background: var(--pa-color-gradient);
  border: none;
  border-radius: 1px;
}

/* ---------------------------------------------------------------------------
   CODE BLOCK
------------------------------------------------------------------------------ */

.pa-code-block {
  position: relative;
  background-color: var(--pa-color-onyx);
  border: 1px solid var(--pa-border-subtle);
  border-radius: var(--pa-radius-md);
  padding: var(--pa-space-5) var(--pa-space-6);
  overflow-x: auto;
}

.pa-code-block__label {
  font-family: var(--pa-font-mono);
  font-size: var(--pa-label-legal-size);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pa-color-sky);
  margin-bottom: var(--pa-space-4);
  opacity: 0.6;
}

.pa-code-block pre {
  font-family: var(--pa-font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--pa-color-mint);
  white-space: pre-wrap;
  word-break: break-word;
}

.pa-code-block__copy {
  position: absolute;
  top: var(--pa-space-3);
  right: var(--pa-space-3);
  font-family: var(--pa-font-mono);
  font-size: var(--pa-label-legal-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--pa-color-denim);
  color: var(--pa-text-secondary);
  border: 1px solid var(--pa-border-default);
  padding: var(--pa-space-1) var(--pa-space-3);
  border-radius: var(--pa-radius-sm);
  cursor: pointer;
  transition: all var(--pa-transition-base);
}

.pa-code-block__copy:hover {
  color: var(--pa-text-primary);
  border-color: var(--pa-color-mint);
}

/* ---------------------------------------------------------------------------
   STAT / METRIC DISPLAY
------------------------------------------------------------------------------ */

.pa-stat {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-1);
}

.pa-stat__value {
  font-family: var(--pa-font-mono);
  font-size: 2rem;
  font-weight: 500;
  color: var(--pa-color-mint);
  line-height: 1;
}

.pa-stat__label {
  font-family: var(--pa-font-mono);
  font-size: var(--pa-label-legal-size);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pa-text-secondary);
  opacity: 0.6;
}

/* ---------------------------------------------------------------------------
   IQR CLASSIFICATION CHIPS
------------------------------------------------------------------------------ */

.pa-iqr-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--pa-font-mono);
  font-size: var(--pa-label-legal-size);
  font-weight: 500;
  padding: 0.2rem 0.45rem;
  border-radius: var(--pa-radius-sm);
  border: 1px solid;
  line-height: 1;
  letter-spacing: 0.06em;
}

.pa-iqr-chip--nm { background: rgba(139,48,48,0.2);  color: #d08080; border-color: rgba(139,48,48,0.4); }
.pa-iqr-chip--sm { background: rgba(139,104,48,0.2); color: #d0a060; border-color: rgba(139,104,48,0.4); }
.pa-iqr-chip--e1 { background: rgba(74,107,58,0.2);  color: #80b070; border-color: rgba(74,107,58,0.4); }
.pa-iqr-chip--e2 { background: rgba(58,90,42,0.2);   color: #70a060; border-color: rgba(58,90,42,0.4); }
.pa-iqr-chip--e3 { background: rgba(42,74,26,0.2);   color: #609050; border-color: rgba(42,74,26,0.4); }
.pa-iqr-chip--a1 { background: rgba(131,188,120,0.2);color: var(--pa-color-mint); border-color: rgba(131,188,120,0.4); }
.pa-iqr-chip--a2 { background: rgba(61,190,154,0.2); color: var(--pa-color-jade); border-color: rgba(61,190,154,0.4); }

/* ---------------------------------------------------------------------------
   PAYWALL / GATE OVERLAY
------------------------------------------------------------------------------ */

.pa-gate {
  position: relative;
}

.pa-gate__blur {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
}

.pa-gate__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(20, 32, 46, 0.88);
  backdrop-filter: blur(4px);
  z-index: var(--pa-z-raised);
  padding: var(--pa-space-8);
  text-align: center;
  border-radius: var(--pa-radius-sm);
}

/* ---------------------------------------------------------------------------
   SECTION TAG (eyebrow label above headings)
   Usage: <p class="pa-section-tag">What we do</p>
------------------------------------------------------------------------------ */

.pa-section-tag {
  font-family: var(--pa-font-mono);
  font-size: var(--pa-label-legal-size);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pa-color-mint);
  margin-bottom: var(--pa-space-2);
}

/* ---------------------------------------------------------------------------
   GRADIENT UTILITIES
------------------------------------------------------------------------------ */

.pa-gradient-text {
  background: var(--pa-color-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pa-gradient-border {
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}

.pa-gradient-border::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--pa-color-gradient);
  z-index: -1;
}

/* ---------------------------------------------------------------------------
   LAYOUT UTILITIES
------------------------------------------------------------------------------ */

.pa-flex         { display: flex; }
.pa-flex-col     { display: flex; flex-direction: column; }
.pa-items-center { align-items: center; }
.pa-items-start  { align-items: flex-start; }
.pa-justify-between { justify-content: space-between; }
.pa-justify-center  { justify-content: center; }
.pa-gap-2  { gap: var(--pa-space-2); }
.pa-gap-4  { gap: var(--pa-space-4); }
.pa-gap-6  { gap: var(--pa-space-6); }
.pa-gap-8  { gap: var(--pa-space-8); }

.pa-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; }
.pa-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.pa-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }

/* Grid with border lines between cells (1px gap on dark bg trick) */
.pa-grid-ruled {
  background-color: var(--pa-border-subtle);
}

.pa-grid-ruled > * {
  background-color: var(--pa-bg-primary);
}

/* ---------------------------------------------------------------------------
   SPACING UTILITIES
------------------------------------------------------------------------------ */

.pa-mt-4  { margin-top: var(--pa-space-4); }
.pa-mt-8  { margin-top: var(--pa-space-8); }
.pa-mt-12 { margin-top: var(--pa-space-12); }
.pa-mb-4  { margin-bottom: var(--pa-space-4); }
.pa-mb-8  { margin-bottom: var(--pa-space-8); }
.pa-p-6   { padding: var(--pa-space-6); }

/* ---------------------------------------------------------------------------
   FOCUS VISIBLE (accessibility)
------------------------------------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--pa-color-mint);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   SCROLLBAR (optional subtle styling)
------------------------------------------------------------------------------ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--pa-bg-primary); }
::-webkit-scrollbar-thumb { background: var(--pa-color-denim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--pa-color-sky); }

/* ---------------------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
------------------------------------------------------------------------------ */

/* sm: 640px | md: 768px | lg: 1024px | xl: 1280px */

@media (max-width: 1024px) {
  .pa-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pa-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .pa-grid-4,
  .pa-grid-3,
  .pa-grid-2 { grid-template-columns: 1fr; }

  .pa-h1 { font-size: 2.5rem; }
  .pa-h2 { font-size: 2rem; }
  .pa-h-serif-large { font-size: 2.5rem; }
  .pa-h-serif-reg { font-size: 2rem; }

  .pa-section { padding-block: var(--pa-space-10); }
  .pa-section--lg { padding-block: var(--pa-space-12); }
}

@media (max-width: 640px) {
  .pa-nav__links .pa-nav__link { display: none; }
  .pa-input-group { flex-direction: column; }
  .pa-input-group .pa-input { border-radius: var(--pa-radius-sm); border-right: 1px solid var(--pa-border-default); }
  .pa-input-group .pa-btn { border-radius: var(--pa-radius-sm); }
}