@import "tailwindcss";

@source "../../Pages/**/*.cshtml";

/* Design System - matching React project */
@layer base {
  :root {
    /* Core palette - Teal/Cyan theme */
    --background: 210 20% 98%;
    --foreground: 222 47% 11%;

    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;

    --primary: 175 65% 30%; /* Teal — darkened from 35% for 4.5:1 w/ white text */
    --primary-foreground: 0 0% 100%;

    --secondary: 210 40% 96%;
    --secondary-foreground: 222 47% 11%;

    --muted: 210 30% 96%;
    --muted-foreground: 210 3% 43%;

    --accent: 205 90% 40%; /* Blue accent - darkened for AA with white text */
    --accent-foreground: 210 40% 98%;

    --destructive: 0 72% 45%; /* Darkened from 60% for 4.5:1 on white backgrounds */
    --destructive-foreground: 0 0% 100%;

    --success: 143 64% 24%;
    --success-background: 141 84% 93%;
    --warning: 23 83% 31%;
    --warning-background: 48 96% 89%;
    --info: 201 90% 27%;
    --info-background: 204 94% 94%;

    --border: 214 32% 91%;
    --ring: 205 90% 40%;

    --radius: 0.75rem;

    /* Elevation & gradients */
    --shadow-elevated: 0 10px 30px -12px hsl(var(--accent) / 0.25);
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  }
}

/* Map semantic CSS variables to Tailwind theme tokens.
   @theme inline keeps them as live CSS variable references so dark-mode
   overrides on :root still propagate. Tailwind then generates full utility
   suites: bg-secondary, bg-primary/10, border-primary/30, ring-primary, etc. */
@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-success: hsl(var(--success));
  --color-success-background: hsl(var(--success-background));
  --color-warning: hsl(var(--warning));
  --color-warning-background: hsl(var(--warning-background));
  --color-info: hsl(var(--info));
  --color-info-background: hsl(var(--info-background));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-border: hsl(var(--border));
  --color-ring: hsl(var(--ring));
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer utilities {
  .bg-hero-gradient {
    background-image: var(--gradient-primary);
  }

  .text-primary {
    color: hsl(var(--primary));
  }

  .bg-primary {
    background-color: hsl(var(--primary));
  }

  .text-primary-foreground {
    color: hsl(var(--primary-foreground));
  }

  .hover\:bg-primary:hover {
    background-color: hsl(var(--primary));
  }

  .bg-muted {
    background-color: hsl(var(--muted));
  }

  .text-muted-foreground {
    color: hsl(var(--muted-foreground));
  }

  .text-destructive {
    color: hsl(var(--destructive));
  }

  .bg-destructive {
    background-color: hsl(var(--destructive));
  }

  .text-accent {
    color: hsl(var(--accent));
  }

  .bg-accent {
    background-color: hsl(var(--accent));
  }

  .text-foreground {
    color: hsl(var(--foreground));
  }

  .font-display {
    font-family: 'Playfair Display', Georgia, serif;
  }

  .story-link {
    position: relative;
  }

  .story-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: hsl(var(--primary));
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 300ms ease;
  }

  .story-link:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }

  /* Checkbox styling with primary teal color */
  input[type="checkbox"] {
    accent-color: hsl(var(--primary));
  }
}

/* Tag cloud links — replaces inline onmouseover/onmouseout handlers */
.tag-link {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  text-decoration: none;
  background: hsl(var(--card));
  transition: border-color 200ms ease, color 200ms ease;
}

.tag-link--big {
  font-size: 1.25rem;
}

.tag-link--tiny {
  font-size: 0.75rem;
}

.tag-link:hover,
.tag-link:focus-visible {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
  outline: none;
}

/* Alert state boxes — replaces repeated inline border+bg styles in auth pages */
.alert-error {
  border: 1px solid hsl(var(--destructive) / 0.5);
  background-color: hsl(var(--destructive) / 0.1);
}

.alert-primary {
  border: 1px solid hsl(var(--primary) / 0.5);
  background-color: hsl(var(--primary) / 0.1);
}

/* Form input base — replaces inline border-color + bg-color on <input> elements */
.form-input {
  border-color: hsl(var(--border));
  background-color: hsl(var(--background));
}

/* Feature cards — replaces repeated alpha-bg inline styles in marketing panels */
.feature-box-primary {
  background-color: hsl(var(--primary) / 0.05);
  border: 1px solid hsl(var(--primary) / 0.2);
}

.feature-box-accent {
  background-color: hsl(var(--accent) / 0.05);
  border: 1px solid hsl(var(--accent) / 0.2);
}

/* Badge chip — small colored pill label */
.badge-primary {
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

/* Primary button hover/active — applies to all bg-primary interactive elements */
button.bg-primary:hover:not(:disabled),
a.bg-primary:hover {
  background-color: hsl(175 65% 25%);
  transition: background-color 200ms ease;
}

button.bg-primary:active:not(:disabled) {
  background-color: hsl(175 65% 22%);
}

/* Knowledge Pathway content table styling - matches old WebForms main.css lines 872-895 */
.kp-content table {
  overflow-x: hidden;
  width: 100%;
  border: 1px solid #d6d7d8;
  background-color: #FAFAFA;
  margin-top: 20px;
  border-collapse: collapse;
}

.kp-content table tr {
  border-bottom: 1px solid #d6d7d8;
}

.kp-content table td {
  padding: 12px;
  border-right: 1px solid #d6d7d8;
  vertical-align: top;
}

.kp-content table th {
  background-color: #ffffff;
  font-weight: bold;
  text-align: left;
  padding: 12px;
  border-right: 1px solid #d6d7d8;
  border-bottom: 1px solid #d6d7d8;
}

/* Prose table override for KP content - same styling */

/* Legacy-matching prose spacing — tighter than default prose to match
   the traditional ASP.NET WebForms page rhythm used on pennutrition.com */
.prose-legacy p {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose-legacy :is(h2, h3) {
  margin-top: 1.2em;
  margin-bottom: 0.4em;
}
.prose-legacy :is(ul, ol) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose-legacy li {
  margin-top: 0.35em;
  margin-bottom: 0.35em;
}

.prose table {
  overflow-x: hidden;
  width: 100%;
  border: 1px solid #d6d7d8;
  background-color: #FAFAFA;
  margin-top: 20px;
  border-collapse: collapse;
}

.prose table tr {
  border-bottom: 1px solid #d6d7d8;
}

.prose table td {
  padding: 12px;
  border-right: 1px solid #d6d7d8;
  vertical-align: top;
}

.prose table th {
  background-color: #ffffff;
  font-weight: bold;
  text-align: left;
  padding: 12px;
  border-right: 1px solid #d6d7d8;
  border-bottom: 1px solid #d6d7d8;
}
/* Video Container Styles */
.video-container {
  position: relative;
  width: 100%;
  max-width: 753px;
  margin: 20px auto;
}

.video-container iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 753 / 471;
  border: 0;
}

/* Legacy content styles - used by dynamic content pages for visual parity with old site */
.legacy-content {
  font-size: 16px;
  line-height: 1.7;
  color: rgb(44 51 57);
}
.legacy-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 0.75rem;
}
.legacy-content p { margin-bottom: 1rem; }
.legacy-content ul, .legacy-content ol { margin-left: 1.25rem; }
.legacy-content a { color: #0b66ff; }

/* Helpful Links page - card-style link sections
   Uses standard semantic elements so it works in both view and TinyMCE edit modes.
   Applied via content-class on the DynamicContent ViewComponent. */
.helpful-links-content {
  font-size: 16px;
  line-height: 1.6;
  color: rgb(44 51 57);
}

.helpful-links-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: hsl(222 47% 11%);
  margin: 2rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid hsl(var(--primary) / 0.3);
}

.helpful-links-content h2:first-child {
  margin-top: 0;
}

.helpful-links-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}

.helpful-links-content li {
  margin: 0;
  padding: 0;
}

.helpful-links-content li p {
  margin: 0;
}

.helpful-links-content li a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(214 32% 91%);
  background: hsl(0 0% 100%);
  color: hsl(222 47% 11%);
  text-decoration: none;
  font-weight: 500;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.helpful-links-content li a:hover {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.04);
  box-shadow: 0 2px 8px hsl(var(--primary) / 0.1);
  transform: translateY(-1px);
}

.helpful-links-content li a::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23389E9B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* In TinyMCE editor, fall back to simpler layout since grid may not be supported */
.mce-content-body.helpful-links-content ul {
  display: block;
}

.mce-content-body.helpful-links-content li {
  margin-bottom: 0.5rem;
}

/* Terminology & Features page - glossary accordion + features table
   Uses <details>/<summary> for native accordion (no JS).
   Applied via content-class on the DynamicContent ViewComponent. */
.terminology-content {
  font-size: 16px;
  line-height: 1.6;
  color: rgb(44 51 57);
}

.terminology-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(222 47% 11%);
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid hsl(var(--primary) / 0.3);
}

.terminology-content h2:first-child {
  margin-top: 0;
}

/* Glossary accordion using native <details>/<summary> */
.terminology-content details {
  border: 1px solid hsl(214 32% 91%);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  background: hsl(0 0% 100%);
  transition: box-shadow 200ms ease;
}

.terminology-content details[open] {
  box-shadow: 0 2px 8px hsl(var(--primary) / 0.08);
  border-color: hsl(var(--primary) / 0.3);
}

.terminology-content details summary {
  padding: 0.875rem 1rem;
  cursor: pointer;
  font-weight: 600;
  color: hsl(222 47% 11%);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.terminology-content details summary::-webkit-details-marker {
  display: none;
}

.terminology-content details summary::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23389E9B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 200ms ease;
}

.terminology-content details[open] > summary::before {
  transform: rotate(90deg);
}

.terminology-content details summary:hover {
  background: hsl(var(--primary) / 0.04);
  border-radius: 0.5rem;
}

.terminology-content details .term-def {
  padding: 0 1rem 1rem;
  color: hsl(215 16% 46%);
  line-height: 1.7;
  border-top: 1px solid hsl(214 32% 91%);
  margin: 0 0.5rem;
  padding-top: 0.75rem;
}

/* Sub-terms (indented) */
.terminology-content .sub-terms {
  padding-left: 1.5rem;
}

.terminology-content .sub-terms details {
  border-color: hsl(214 32% 91% / 0.6);
  background: hsl(210 20% 98%);
}

/* Introductory paragraph and bullet list between sections */
.terminology-content > p {
  margin-bottom: 1rem;
}

.terminology-content > ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.terminology-content > ul > li {
  margin-bottom: 0.25rem;
}

/* Features table */
.terminology-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.terminology-content thead th {
  background: hsl(var(--primary));
  color: white;
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
}

.terminology-content thead th:first-child {
  border-radius: 0.5rem 0 0 0;
}

.terminology-content thead th:last-child {
  border-radius: 0 0.5rem 0 0;
}

.terminology-content tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid hsl(214 32% 91%);
  vertical-align: top;
}

.terminology-content tbody tr:hover {
  background: hsl(var(--primary) / 0.03);
}

.terminology-content tbody td:first-child {
  font-weight: 600;
  color: hsl(222 47% 11%);
  white-space: nowrap;
  width: 30%;
}

.terminology-content .updated-note {
  color: hsl(215 16% 46%);
  font-size: 0.875rem;
  font-style: italic;
  margin-top: 2rem;
}

/* TinyMCE editor fallback */
.mce-content-body.terminology-content details {
  border: 1px solid #ccc;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

/* ============================================================
   Page-level layout grids — extracted from inline <style> blocks
   ============================================================ */

/* Index page — hero section two-column grid */
#hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 768px) {
  #hero-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
  }
}

/* Index page — explore section — 4 clickable boxes */
#explore-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  #explore-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  #explore-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Index page — info cards (What is PEN, Access Options, Global) */
#info-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  #info-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Index page — featured resources three-column grid */
#featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  #featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  #featured-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Login page — marketing + form two-column grid */
@media (min-width: 1024px) {
  .login-grid {
    grid-template-columns: minmax(0, 1fr) 420px;
  }
}

/* Theme behavior: dark mode is intentionally disabled; light tokens are always used. */

/* ═══════════════════════════════════════════════════════════
   AUTHENTICATED DASHBOARD
   Grid layouts, navigation cards, fade-in animations
   ═══════════════════════════════════════════════════════════ */

/* Dashboard navigation grid — 2→4 larger icon/label cards */
#dash-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 768px) {
  #dash-nav-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
}

.dash-nav-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  min-height: 8.75rem;
  padding: 1.25rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  text-align: center;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.dash-nav-card:hover {
  background-color: hsl(var(--card));
  border-color: hsl(var(--border));
  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.06);
}
.dash-nav-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--primary)), 0 0 0 4px hsl(var(--background));
  border-radius: 0.75rem;
}

.dash-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  flex-shrink: 0;
}

.dash-nav-icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.dash-nav-label {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

@media (min-width: 768px) {
  .dash-nav-label {
    font-size: 1.125rem;
  }
}

/* Dashboard main content — balanced 3 column layout on desktop */
#dash-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 768px) {
  #dash-content-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}
@media (min-width: 1024px) {
  #dash-content-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* Dashboard search button — satisfying press */
.dash-search-btn:hover {
  box-shadow: 0 4px 14px hsl(var(--primary) / 0.3);
  opacity: 0.95;
}
.dash-search-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px hsl(var(--primary) / 0.2);
}

/* Dashboard staggered fade-in animation */
@keyframes dashFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dash-fade-in {
  opacity: 0;
  animation: dashFadeIn 0.4s ease-out forwards;
}

/* ═══════════════════════════════════════════════════════════
   ACCESS PAGE — Hero, sections, tables, CTA, micro-interactions
   ═══════════════════════════════════════════════════════════ */

/* Hero — warm teal-tinted gradient background */
.access-hero {
  background:
    linear-gradient(135deg, hsl(175 40% 96%) 0%, hsl(210 30% 97%) 50%, hsl(175 30% 94%) 100%);
  border-bottom: 1px solid hsl(175 30% 88%);
  position: relative;
  overflow: hidden;
}

/* Decorative corner accent — subtle geometric shape */
.access-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: hsl(var(--primary) / 0.04);
  pointer-events: none;
}

@media (min-width: 768px) {
  .access-hero::after {
    width: 480px;
    height: 480px;
    right: -120px;
    top: -120px;
  }
}

.access-breadcrumb {
  color: hsl(175 25% 35%);
}

.access-hero-sub {
  color: hsl(215 16% 40%);
}

/* Article entrance — staggered sections */
.access-article {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes accessSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.access-section {
  opacity: 0;
  animation: accessSlideUp 0.5s var(--ease-out-quart) forwards;
  animation-delay: calc(var(--i, 0) * 120ms + 100ms);
}

/* Section headings — icon + text with teal underline accent */
.access-section-heading {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.access-heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: hsl(var(--primary) / 0.08);
  color: hsl(175 65% 30%);
  flex-shrink: 0;
}

/* Table wrappers — elevated on hover */
.access-table-wrap {
  transition: box-shadow 300ms var(--ease-out-quart);
  border-color: hsl(214 32% 89%);
}

.access-table-wrap:hover {
  box-shadow: 0 4px 20px -6px hsl(175 40% 30% / 0.08);
}

/* Table row hover — subtle teal tint */
.access-row {
  transition: background-color 200ms ease;
}

.access-row:hover {
  background-color: hsl(var(--primary) / 0.04) !important;
}

/* Links inside tables — animated underline */
.access-row a,
.access-intl-inner a {
  color: hsl(175 65% 30%);
  text-decoration: none;
  background-image: linear-gradient(hsl(var(--primary)), hsl(var(--primary)));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 300ms ease, color 200ms ease;
}

.access-row a:hover,
.access-intl-inner a:hover {
  background-size: 0% 1px;
  color: hsl(175 65% 25%);
}

/* CTA button — satisfying teal with subtle lift */
.access-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  background: hsl(175 65% 30%);
  color: white;
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: 0.625rem;
  text-decoration: none;
  transition:
    transform 200ms cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 200ms cubic-bezier(0.25, 1, 0.5, 1),
    background-color 200ms ease;
  box-shadow: 0 2px 8px hsl(175 65% 30% / 0.2);
}

.access-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -4px hsl(175 65% 30% / 0.35);
  background-color: hsl(175 65% 26%);
}

.access-cta:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px hsl(175 65% 30% / 0.2);
}

.access-cta:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* Arrow icon nudge on hover */
.access-cta-arrow {
  transition: transform 200ms cubic-bezier(0.25, 1, 0.5, 1);
}

.access-cta:hover .access-cta-arrow {
  transform: translateX(3px);
}

/* International banner — teal-tinted callout */
.access-intl-banner {
  /* inherits stagger animation from .access-section */
}

.access-intl-inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: hsl(var(--primary) / 0.04);
  border: 1px solid hsl(var(--primary) / 0.12);
  border-radius: 0.75rem;
  border-left: 3px solid hsl(var(--primary) / 0.5);
}

.access-intl-icon {
  flex-shrink: 0;
  color: hsl(175 65% 30%);
  margin-top: 2px;
}

/* Tabular numbers for price alignment */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ── CMS dynamic content styling ────────────────────────────────────────────── */
/* Targets raw HTML injected by the DynamicContent ViewComponent (evidence grade,
   help, about, etc.). Since @tailwindcss/typography is not installed, we style
   the child elements directly. */

.cms-content h3 {
  font-size: 1.375rem;
  font-weight: 600;
  color: hsl(var(--primary));
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.cms-content h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(var(--primary));
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.cms-content p {
  font-size: 1rem;
  line-height: 1.75;
  color: hsl(var(--foreground) / 0.85);
  margin-bottom: 1.25rem;
}

.cms-content a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color 150ms ease;
}

.cms-content a:hover {
  color: hsl(var(--accent));
}

.cms-content strong {
  font-weight: 600;
  color: hsl(var(--foreground));
}

.cms-content hr {
  border: none;
  border-top: 1px solid hsl(var(--border));
  margin: 2.5rem 0;
}

.cms-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.06);
}

.cms-content table td,
.cms-content table th {
  border: 1px solid hsl(var(--border));
  padding: 0.875rem 1rem;
  vertical-align: top;
}

.cms-content table tr:first-child td,
.cms-content table tr:first-child th {
  background-color: hsl(var(--muted));
  font-weight: 600;
}

.cms-content table tr:nth-child(2) td {
  background-color: hsl(var(--muted) / 0.5);
  font-weight: 600;
}

.cms-content ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 1.25rem 0;
}

.cms-content ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 1.25rem 0;
}

.cms-content li {
  margin-bottom: 0.375rem;
  line-height: 1.6;
}

/* ── Newsletter article content styling ─────────────────────────────────────── */
/* Matches legacy NewsletterPreview.ascx + enews.aspx styling.
   The article HTML stored in DB already contains its own headings, lists, and
   inline styles. These rules restore the list markers stripped by Tailwind's
   base reset and ensure spacing/font sizes match the legacy site. */

.newsletter-content {
  font-size: 16px;
  line-height: 1.7;
  color: hsl(var(--foreground));
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.newsletter-content h1 {
  color: hsl(var(--primary));
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.27;
  margin-bottom: 1.5rem;
}

.newsletter-content h2 {
  color: #00705b;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.36;
  margin: 1.875rem 0 0.625rem;
}

.newsletter-content h3 {
  font-size: 1rem;
  line-height: 1.5;
  color: hsl(var(--primary));
  font-weight: normal;
  margin: 1.5rem 0 0.75rem;
}

.newsletter-content p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.newsletter-content a {
  color: hsl(var(--primary));
  font-weight: bold;
  text-decoration: underline;
}

.newsletter-content a:hover {
  color: hsl(175 65% 25%);
}

.newsletter-content ul {
  list-style: disc;
  padding-left: 2.5rem;
  margin: 1rem 0;
}

.newsletter-content ol {
  list-style: decimal;
  padding-left: 2.5rem;
  margin: 1rem 0;
}

.newsletter-content ol.upperAlpha, .newsletter-content ol.upperalpha { list-style-type: upper-alpha; }
.newsletter-content ol.lowerAlpha, .newsletter-content ol.loweralpha { list-style-type: lower-alpha; }
.newsletter-content ol.upperRoman, .newsletter-content ol.upperroman { list-style-type: upper-roman; }
.newsletter-content ol.lowerRoman, .newsletter-content ol.lowerroman { list-style-type: lower-roman; }
.newsletter-content ul.square { list-style-type: square; }
.newsletter-content ul.disc, .newsletter-content ul.Disc { list-style-type: disc; }
.newsletter-content ul.circle { list-style-type: circle; }

.newsletter-content li {
  display: list-item;
  margin-bottom: 0.375rem;
  line-height: 1.7;
  padding: 0;
}

.newsletter-content img {
  max-width: 100%;
  height: auto;
}

.newsletter-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}

.newsletter-content table td,
.newsletter-content table th {
  padding: 0.5rem;
  border: 1px solid hsl(var(--border));
}

.newsletter-content strong {
  font-weight: 700;
}

.newsletter-content hr {
  border: none;
  border-top: 2px solid hsl(var(--primary));
  margin: 2rem 0;
}