@import "tailwindcss";

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

/* PEN 2026 design system */
@layer base {
  :root {
    /* Brand palette from the PEN 2026 Website Style Guide. */
    --pen-green: 165.000 94.118% 26.667%;
    --pen-blue: 182.474 56.069% 33.922%;
    --pen-orange: 20.870 65.714% 41.176%;
    --pen-medium-grey: 0.000 0% 43.137%;
    --pen-white: 0.000 0% 100%;
    --pen-light-grey: 0.000 0% 94.118%;
    --pen-black: 0.000 0% 22.353%;
    --pen-kale: 169.024 100% 16.078%;
    --pen-dark-blue: 187.586 100% 17.059%;
    --pen-dark-orange: 17.500 67.606% 27.843%;
    --pen-sage: 142.500 39.506% 68.235%;
    --pen-bright-blue: 185.915 60.169% 53.725%;
    --pen-sunflower: 32.581 93.939% 61.176%;

    --background: var(--pen-white);
    --foreground: var(--pen-black);

    --card: var(--pen-white);
    --card-foreground: var(--pen-black);

    --primary: var(--pen-green);
    --primary-foreground: var(--pen-white);
    --primary-hover: var(--pen-kale);
    --primary-active: var(--pen-black);

    --secondary: var(--pen-light-grey);
    --secondary-foreground: var(--pen-black);

    --muted: var(--pen-light-grey);
    --muted-foreground: var(--pen-medium-grey);

    --accent: var(--pen-blue);
    --accent-foreground: var(--pen-white);
    --accent-hover: var(--pen-dark-blue);
    --accent-active: var(--pen-black);
    --secondary-action: var(--pen-dark-blue);
    --secondary-action-foreground: var(--pen-white);
    --secondary-action-hover: var(--pen-black);
    --secondary-action-active: var(--pen-black);
    --emphasis: var(--pen-orange);
    --emphasis-foreground: var(--pen-white);
    --emphasis-hover: var(--pen-dark-orange);
    --emphasis-active: var(--pen-black);
    --inactive: var(--pen-light-grey);
    --inactive-foreground: var(--pen-medium-grey);

    --destructive: 0.000 74.359% 45.882%;
    --destructive-foreground: var(--pen-white);

    --success: 141.250 64.865% 29.020%;
    --success-background: var(--pen-light-grey);
    --warning: var(--pen-orange);
    --warning-background: var(--pen-light-grey);
    --info: 211.511 70.558% 38.627%;
    --info-background: var(--pen-light-grey);

    --border: var(--pen-light-grey);
    --ring: var(--pen-orange);

    --radius: 0.375rem;

    /* 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-secondary-action: hsl(var(--secondary-action));
  --color-secondary-action-foreground: hsl(var(--secondary-action-foreground));
  --color-secondary-action-hover: hsl(var(--secondary-action-hover));
  --color-secondary-action-active: hsl(var(--secondary-action-active));
  --color-emphasis: hsl(var(--emphasis));
  --color-emphasis-foreground: hsl(var(--emphasis-foreground));
  --color-inactive: hsl(var(--inactive));
  --color-inactive-foreground: hsl(var(--inactive-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: 'Roboto', 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: 'Roboto', ui-sans-serif, system-ui, -apple-system, sans-serif;
  }

  .font-serif-content {
    font-family: 'Noto Serif', 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 PEN colour */
  input[type="checkbox"] {
    accent-color: hsl(var(--primary));
  }
}

.pen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-family: 'Roboto', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.hidden.pen-btn,
.hidden.pen-alert {
  display: none;
}

.pen-btn:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.pen-btn:disabled,
.pen-btn[aria-disabled="true"] {
  border-color: hsl(var(--inactive));
  background-color: hsl(var(--inactive));
  color: hsl(var(--inactive-foreground));
  cursor: not-allowed;
  opacity: 1;
}

.pen-btn--primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.pen-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: hsl(var(--primary-hover));
  color: hsl(var(--primary-foreground));
}

.pen-btn--primary:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: hsl(var(--primary-active));
}

.pen-btn--secondary {
  background-color: hsl(var(--secondary-action));
  color: hsl(var(--secondary-action-foreground));
}

.pen-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: hsl(var(--secondary-action-hover));
  color: hsl(var(--secondary-action-foreground));
}

.pen-btn--secondary:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: hsl(var(--secondary-action-active));
}

.pen-btn--emphasis {
  background-color: hsl(var(--emphasis));
  color: hsl(var(--emphasis-foreground));
}

.pen-btn--emphasis:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: hsl(var(--emphasis-hover));
  color: hsl(var(--emphasis-foreground));
}

.pen-btn--emphasis:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: hsl(var(--emphasis-active));
}

.pen-btn--text {
  min-height: 1.5rem;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: hsl(var(--primary));
  font-weight: 400;
}

.pen-btn--text:hover {
  color: hsl(var(--primary));
  font-weight: 700;
}

.pen-btn--text:active {
  color: hsl(var(--primary-active));
  font-weight: 400;
}

.pen-btn--icon {
  min-width: 2.5rem;
  min-height: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}

.pen-shell-icon-btn {
  border-color: transparent;
  background: transparent;
  color: hsl(var(--muted-foreground));
}

.pen-shell-icon-btn:hover,
.pen-shell-icon-btn:focus-visible {
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
}

.pen-shell-link-btn {
  min-height: 2.5rem;
  padding: 0.625rem 0.75rem;
  border-color: transparent;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  font-weight: 500;
}

.pen-shell-link-btn:hover,
.pen-shell-link-btn:focus-visible {
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
}

.pen-language-option {
  color: hsl(var(--foreground));
}

.pen-language-option:hover,
.pen-language-option:focus-visible {
  background: hsl(var(--secondary));
}

.pen-form-field {
  display: grid;
  gap: 0.375rem;
}

.pen-form-label {
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
}

.pen-form-required {
  color: hsl(var(--emphasis));
}

.pen-form-control {
  min-height: 2.75rem;
  width: 100%;
  border: 1px solid hsl(var(--pen-medium-grey));
  border-radius: 3px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Roboto', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pen-form-control::placeholder {
  color: hsl(var(--pen-medium-grey));
}

.pen-form-control:hover:not(:disabled) {
  color: hsl(var(--foreground));
}

.pen-form-control:focus-visible {
  border-color: hsl(var(--ring));
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.pen-form-control:disabled {
  border-color: hsl(var(--pen-light-grey));
  background: hsl(var(--pen-light-grey));
  color: hsl(var(--pen-medium-grey));
  cursor: not-allowed;
}

.pen-search-control {
  min-height: 2.75rem;
  font-size: 1rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .pen-search-control {
    min-height: 3.5rem;
    font-size: 2.25rem;
  }
}

.pen-form-control[aria-invalid="true"],
.pen-form-control.input-validation-error {
  border-color: hsl(var(--destructive));
}

.pen-form-help {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  line-height: 1.5;
}

.pen-form-error {
  color: hsl(var(--destructive));
  font-size: 0.875rem;
  line-height: 1.5;
}

.pen-form-check,
.pen-form-radio {
  accent-color: hsl(var(--primary));
}

.pen-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid currentColor;
  border-radius: 0.375rem;
  padding: 1rem;
  background: hsl(var(--pen-light-grey));
  font-size: 0.875rem;
  line-height: 1.5;
}

.pen-alert--success { color: hsl(var(--success)); }
.pen-alert--warning { color: hsl(var(--warning)); }
.pen-alert--error { color: hsl(var(--destructive)); }
.pen-alert--info { color: hsl(var(--info)); }

.pen-alert--solid {
  color: hsl(var(--pen-white));
}

.pen-alert--success.pen-alert--solid {
  border-color: hsl(var(--success));
  background: hsl(var(--success));
}

.pen-alert--warning.pen-alert--solid {
  border-color: hsl(var(--warning));
  background: hsl(var(--warning));
}

.pen-alert--error.pen-alert--solid {
  border-color: hsl(var(--destructive));
  background: hsl(var(--destructive));
}

.pen-alert--info.pen-alert--solid {
  border-color: hsl(var(--info));
  background: hsl(var(--info));
}

.pen-alert--solid a:not(.pen-btn),
.pen-alert--solid button:not(.pen-btn) {
  color: hsl(var(--pen-white));
}

.pen-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  line-height: 1.2;
}

.pen-breadcrumb__link {
  color: hsl(var(--primary));
  text-decoration: none;
}

.pen-breadcrumb__link:hover,
.pen-breadcrumb__link:focus-visible {
  color: hsl(var(--primary-hover));
}

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

.pen-quicklinks {
  display: grid;
  gap: 0.5rem;
}

.pen-quicklink {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: 100%;
  border-radius: 0.375rem;
  background: hsl(var(--pen-light-grey));
  color: hsl(var(--pen-kale));
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  text-decoration: none;
}

.pen-quicklink:hover,
.pen-quicklink:focus-visible,
.pen-quicklink--active {
  background: hsl(var(--pen-kale));
  color: hsl(var(--pen-white));
}

.pen-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.pen-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  border-radius: 0.375rem;
  border: 1px solid hsl(var(--pen-light-grey));
  background: hsl(var(--pen-light-grey));
  color: hsl(var(--pen-kale));
  padding: 0 0.75rem;
  text-decoration: none;
}

.pen-page-link:hover,
.pen-page-link:focus-visible,
.pen-page-link--current {
  border-color: hsl(var(--pen-kale));
  background: hsl(var(--pen-kale));
  color: hsl(var(--pen-white));
}

.pen-page-link--disabled {
  border-color: hsl(var(--pen-light-grey));
  background: hsl(var(--pen-light-grey));
  color: hsl(var(--pen-medium-grey));
  cursor: not-allowed;
}

.pen-content {
  max-width: 680px;
  color: hsl(var(--foreground));
  font-family: 'Roboto', ui-sans-serif, system-ui, -apple-system, sans-serif;
  line-height: 1.5;
}

.pen-content--serif {
  font-family: 'Noto Serif', Georgia, serif;
}

/* 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));
  color: hsl(var(--destructive));
  background-color: hsl(var(--pen-light-grey));
}

.alert-primary {
  border: 1px solid hsl(var(--primary));
  color: hsl(var(--primary));
  background-color: hsl(var(--pen-light-grey));
}

/* Form input base — replaces inline border-color + bg-color on <input> elements */
.form-input {
  border-color: hsl(var(--pen-medium-grey));
  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.35);
}

/* 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(var(--primary-hover));
  transition: background-color 200ms ease;
}

button.bg-primary:active:not(:disabled) {
  background-color: hsl(var(--primary-active));
}

/* 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 */

/* Restore paragraph + list spacing for rendered rich content. Tailwind v4 preflight
   zeroes <p>/<ul>/<ol> margins, and @tailwindcss/typography is not installed, so a bare
   `.prose` container (editor-authored KP / tool-resource / practice-question / dynamic
   content rendered via @Html.Raw) collapsed to no inter-paragraph spacing — the public
   side looked cramped compared with the Web Preview. Values match the Web Preview
   container (.webpreview-container) so public == preview. Declared BEFORE `.prose-legacy`
   so the tighter legal-page rhythm still wins by source order where pages opt into it. */
.prose p {
  margin-top: 1em;
  margin-bottom: 1em;
}
.prose ul,
.prose ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* 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;
}

/* Restore list markers for rendered rich content. Tailwind v4 preflight resets
   `ol,ul,menu { list-style: none }`, which stripped bullets/numbers from content
   authored in the editor (Userback #7881421). Legacy (Froala + non-Tailwind CSS)
   showed markers, so this restores legacy parity for unclassed content lists.
   Values match the editor's content_style in pen-editor.js so the editor is WYSIWYG. */
.prose ul {
  list-style: disc outside;
  padding-left: 1.5em;
}
.prose ol {
  list-style: decimal outside;
  padding-left: 1.5em;
}
.prose ul ul {
  list-style-type: circle;
}
.prose ul ul ul {
  list-style-type: square;
}

.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: 'Roboto', ui-sans-serif, system-ui, -apple-system, sans-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: 'Roboto', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  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='%23048464' 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: 'Roboto', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  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='%23048464' 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(var(--pen-light-grey)) 0%, hsl(var(--background)) 55%, hsl(var(--pen-sage) / 0.35) 100%);
  border-bottom: 1px solid hsl(var(--border));
  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(var(--primary-hover));
}

.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(var(--primary));
  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(var(--primary) / 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(var(--primary));
  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(var(--primary-hover));
}

/* 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(var(--primary));
  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(var(--primary) / 0.2);
}

.access-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -4px hsl(var(--primary) / 0.35);
  background-color: hsl(var(--primary-hover));
}

.access-cta:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px hsl(var(--primary) / 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);
}

.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(var(--primary));
  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: hsl(var(--primary-hover));
  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(var(--primary-hover));
}

.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;
}