/* ==============================================
   POLICY TEMPLATE CSS
   Used by /_templates/policy.html
   Baxter Site Works
   ============================================== */

/* -----------------------------------------------
   HERO / PAGE HEADER
   ----------------------------------------------- */
.policy-hero {
  position: relative;
  padding-top: calc(var(--navbar-height, 80px) + var(--space-16));
  padding-bottom: var(--space-16);
  background: var(--color-secondary, #111111);
  overflow: hidden;
}

.policy-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-secondary, #111111) 0%, #1a1a2e 100%);
  z-index: 0;
}

.policy-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 40px,
    rgba(255, 0, 0, 0.03) 40px,
    rgba(255, 0, 0, 0.03) 80px
  );
  z-index: 0;
}

.policy-hero-content {
  position: relative;
  z-index: 1;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-neutral-400, #9ca3af);
}

.breadcrumb a {
  color: var(--color-neutral-400, #9ca3af);
  text-decoration: none;
  transition: color var(--duration-fast, 150ms) var(--ease-default);
}

.breadcrumb a:hover {
  color: var(--color-primary, #ff0000);
  text-decoration: underline;
}

.breadcrumb svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
  flex-shrink: 0;
}

.policy-hero-title {
  color: #ffffff;
  margin-bottom: var(--space-4);
}

.policy-updated {
  color: var(--color-neutral-400, #9ca3af);
  font-size: var(--font-size-sm, 0.875rem);
  margin: 0;
}

/* -----------------------------------------------
   POLICY BODY CONTENT
   ----------------------------------------------- */
.policy-body {
  background: var(--color-bg, #ffffff);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.policy-content-wrap {
  width: 100%;
}

/* Prose styles for rendered markdown body */
.policy-prose {
  color: var(--color-text, #374151);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-relaxed, 1.75);
}

.policy-prose h1,
.policy-prose h2,
.policy-prose h3,
.policy-prose h4 {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-heading, #111827);
  line-height: var(--line-height-tight, 1.25);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.policy-prose h1 { font-size: var(--font-size-3xl, 1.875rem); }
.policy-prose h2 { font-size: var(--font-size-2xl, 1.5rem); }
.policy-prose h3 { font-size: var(--font-size-xl, 1.25rem); }
.policy-prose h4 { font-size: var(--font-size-lg, 1.125rem); }

.policy-prose p {
  margin-bottom: var(--space-5);
}

.policy-prose a {
  color: var(--color-primary, #ff0000);
  text-decoration: underline;
  transition: color var(--duration-fast, 150ms) var(--ease-default);
}

.policy-prose a:hover {
  color: var(--color-primary-dark, #dc2626);
}

.policy-prose ul,
.policy-prose ol {
  margin-bottom: var(--space-5);
  padding-left: var(--space-6);
}

.policy-prose ul li,
.policy-prose ol li {
  margin-bottom: var(--space-2);
}

.policy-prose ul li::marker {
  color: var(--color-primary, #ff0000);
}

.policy-prose strong {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-heading, #111827);
}

.policy-prose blockquote {
  border-left: 4px solid var(--color-primary, #ff0000);
  padding-left: var(--space-5);
  margin: var(--space-6) 0;
  color: var(--color-text-secondary, #6b7280);
  font-style: italic;
}

.policy-prose hr {
  border: none;
  border-top: 1px solid var(--color-border, #e5e7eb);
  margin: var(--space-8) 0;
}

.policy-prose code {
  background: var(--color-neutral-100, #f3f4f6);
  padding: 0.125em 0.375em;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.9em;
  font-family: monospace;
}

.policy-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  font-size: var(--font-size-sm, 0.875rem);
}

.policy-prose table th,
.policy-prose table td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border, #e5e7eb);
  text-align: left;
}

.policy-prose table th {
  background: var(--color-neutral-50, #f9fafb);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-heading, #111827);
}

/* -----------------------------------------------
   CTA SECTION
   ----------------------------------------------- */
.policy-cta {
  background: var(--color-primary, #ff0000);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.policy-cta-inner {
  align-items: center;
  text-align: center;
  gap: var(--space-6);
}

.policy-cta-heading {
  color: #ffffff;
  margin: 0;
}

.policy-cta-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--font-size-lg, 1.125rem);
  max-width: 560px;
  margin: 0 auto;
}

.policy-cta-buttons {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.policy-cta .btn-outline {
  border-color: #ffffff;
  color: #ffffff;
}

.policy-cta .btn-outline:hover {
  background: #ffffff;
  color: var(--color-primary, #ff0000);
}

/* -----------------------------------------------
   RESPONSIVE
   ----------------------------------------------- */
@media (max-width: 768px) {
  .policy-hero {
    padding-top: calc(var(--navbar-height, 70px) + var(--space-10));
    padding-bottom: var(--space-10);
  }

  .policy-hero-title {
    font-size: var(--font-size-3xl, 1.875rem);
  }

  .policy-body {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  .policy-cta {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  .policy-cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .policy-prose h2 { font-size: var(--font-size-xl, 1.25rem); }
  .policy-prose h3 { font-size: var(--font-size-lg, 1.125rem); }
}