/* ==========================================================================
   IPX Theme — Infoplex Support Portal
   Custom stylesheet for brand identity, typography, layout, and interactions
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --ipx-navy: #1f456e;
  --ipx-navy-dark: #162f4d;
  --ipx-navy-light: #2a5a8f;
  --ipx-accent: #3a8fd4;
  --ipx-accent-light: #e8f2fb;
  --ipx-teal: #1a9e8f;
  --ipx-teal-light: #e6f7f5;
  --ipx-amber: #e8910c;
  --ipx-amber-light: #fef4e4;
  --ipx-red: #c9302c;
  --ipx-green: #2e7d32;
  --ipx-green-dark: #256b28;
  --ipx-green-light: #e8f5e9;
  --ipx-green-border: #b8dfba;
  --ipx-accent-hover: #d9eaf7;
  --ipx-amber-border: #f0d28e;
  --ipx-amber-text: #7a4f00;
  --ipx-amber-text-dark: #6b4400;

  /* Neutrals */
  --ipx-gray-50: #f8f9fa;
  --ipx-gray-100: #f1f3f5;
  --ipx-gray-200: #e9ecef;
  --ipx-gray-300: #dee2e6;
  --ipx-gray-400: #adb5bd;
  --ipx-gray-500: #6c757d;
  --ipx-gray-600: #495057;
  --ipx-gray-700: #343a40;
  --ipx-gray-800: #212529;

  /* Typography */
  --ipx-font-heading: 'Roboto Condensed', Arial, sans-serif;
  --ipx-font-body: 'Roboto', Arial, sans-serif;

  /* Spacing */
  --ipx-space-xs: 0.25rem;
  --ipx-space-sm: 0.5rem;
  --ipx-space-md: 1rem;
  --ipx-space-lg: 1.5rem;
  --ipx-space-xl: 2rem;
  --ipx-space-2xl: 3rem;
  --ipx-space-3xl: 4rem;

  /* Borders & Radius */
  --ipx-radius-sm: 0.375rem;
  --ipx-radius-md: 0.75rem;
  --ipx-radius-lg: 1rem;

  /* Shadows */
  --ipx-shadow-sm: 0 1px 3px rgba(31, 69, 110, 0.08);
  --ipx-shadow-md: 0 4px 12px rgba(31, 69, 110, 0.1);
  --ipx-shadow-lg: 0 8px 30px rgba(31, 69, 110, 0.12);
  --ipx-shadow-hover: 0 8px 25px rgba(31, 69, 110, 0.18);

  /* Transitions */
  --ipx-transition-fast: 150ms ease;
  --ipx-transition-base: 250ms ease;
  --ipx-transition-slow: 400ms ease;
}

/* --------------------------------------------------------------------------
   2. ACCESSIBILITY — Skip Link
   -------------------------------------------------------------------------- */
.ipx-skip-link {
  position: absolute;
  top: -100%;
  left: var(--ipx-space-md);
  z-index: 10000;
  padding: var(--ipx-space-sm) var(--ipx-space-lg);
  background: var(--ipx-navy);
  color: #fff;
  font-family: var(--ipx-font-body);
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 0 0 var(--ipx-radius-sm) var(--ipx-radius-sm);
  text-decoration: none;
  transition: top var(--ipx-transition-fast);
}

.ipx-skip-link:focus {
  top: 0;
  outline: 3px solid var(--ipx-accent);
  outline-offset: 0;
  color: #fff;
}

/* Global focus styles */
*:focus-visible {
  outline: 3px solid var(--ipx-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. BASE & TYPOGRAPHY
   -------------------------------------------------------------------------- */
body {
  font-family: var(--ipx-font-body);
  color: var(--ipx-gray-700);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ipx-font-heading);
  font-weight: 700;
  color: var(--ipx-gray-800);
  line-height: 1.2;
}

.ipx-page-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--ipx-space-lg);
}

.ipx-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ipx-navy);
  margin-bottom: var(--ipx-space-md);
}

.ipx-lead {
  font-size: 1.1rem;
  color: var(--ipx-gray-600);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   4. NAVBAR
   -------------------------------------------------------------------------- */
.ipx-navbar {
  background: linear-gradient(135deg, var(--ipx-navy-dark) 0%, var(--ipx-navy) 100%);
  padding: 0.6rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 1000;
}

.ipx-navbar .navbar-brand {
  font-family: var(--ipx-font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: #fff;
  padding: 0.3rem 0;
  transition: opacity var(--ipx-transition-fast);
}

.ipx-navbar .navbar-brand:hover {
  opacity: 0.9;
  color: #fff;
}

.ipx-navbar .nav-link {
  font-family: var(--ipx-font-heading);
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  padding: 0.5rem 0.85rem;
  border-radius: var(--ipx-radius-sm);
  transition: color var(--ipx-transition-fast), background-color var(--ipx-transition-fast);
  position: relative;
}

.ipx-navbar .nav-link:hover,
.ipx-navbar .nav-link:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

.ipx-navbar .nav-link.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
  font-weight: 700;
}

.ipx-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.3);
  padding: 0.35rem 0.65rem;
}

.ipx-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(58, 143, 212, 0.5);
}

.ipx-navbar .ipx-nav-external {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 1);
  text-transform: none;
  font-weight: 300;
}

.ipx-navbar .ipx-nav-external:hover {
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
}

/* --------------------------------------------------------------------------
   5. HERO SECTIONS
   -------------------------------------------------------------------------- */
.ipx-hero {
  position: relative;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--ipx-space-2xl) var(--ipx-space-lg);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.ipx-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(22, 47, 77, 0.92) 0%, rgba(31, 69, 110, 0.85) 100%);
  z-index: 1;
}

.ipx-hero__content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.ipx-hero__title {
  font-family: var(--ipx-font-heading);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  color: #fff;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.ipx-hero__subtitle {
  font-family: var(--ipx-font-body);
  font-weight: 300;
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--ipx-space-sm);
}

.ipx-hero--home {
  min-height: 380px;
}

.ipx-hero--compact {
  min-height: 160px;
  padding: var(--ipx-space-xl) var(--ipx-space-lg);
}

/* Subtle shadow bridge between hero and content */
header[role="banner"] + main::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(to bottom, rgba(31, 69, 110, 0.08), transparent);
}

/* Breadcrumb-style nav hint in hero */
.ipx-hero__breadcrumb {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--ipx-space-sm);
  font-weight: 300;
}

.ipx-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--ipx-transition-fast);
}

.ipx-hero__breadcrumb a:hover {
  color: #fff;
}

/* --------------------------------------------------------------------------
   6. HOMEPAGE FEATURE CARDS
   -------------------------------------------------------------------------- */
.ipx-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ipx-space-lg);
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: var(--ipx-space-3xl);
}

@media (max-width: 640px) {
  .ipx-features {
    grid-template-columns: 1fr;
  }
}

.ipx-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--ipx-space-2xl) var(--ipx-space-xl);
  border-radius: var(--ipx-radius-lg);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--ipx-gray-200);
  background: #fff;
  transition: transform var(--ipx-transition-base),
              box-shadow var(--ipx-transition-base),
              border-color var(--ipx-transition-base);
  position: relative;
  overflow: hidden;
}

.ipx-feature-card:hover,
.ipx-feature-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--ipx-shadow-hover);
  text-decoration: none;
  color: inherit;
}

.ipx-feature-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--ipx-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--ipx-space-lg);
  transition: transform var(--ipx-transition-base);
}

.ipx-feature-card:hover .ipx-feature-card__icon {
  transform: scale(1.08);
}

.ipx-feature-card__title {
  font-family: var(--ipx-font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ipx-gray-800);
  margin-bottom: var(--ipx-space-sm);
}

.ipx-feature-card__desc {
  font-size: 0.95rem;
  color: var(--ipx-gray-500);
  line-height: 1.6;
  margin: 0;
}

/* Primary card (Downloads) — larger and more prominent */
.ipx-feature-card--primary {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: var(--ipx-space-xl);
  padding: var(--ipx-space-2xl) var(--ipx-space-2xl);
  border-color: var(--ipx-accent);
  background: linear-gradient(135deg, var(--ipx-accent-light) 0%, #fff 60%);
}

.ipx-feature-card--primary .ipx-feature-card__icon {
  width: 72px;
  height: 72px;
  font-size: 2rem;
  flex-shrink: 0;
}

.ipx-feature-card--primary .ipx-feature-card__text {
  text-align: left;
}

.ipx-feature-card--primary .ipx-feature-card__title {
  font-size: 1.6rem;
}

@media (max-width: 640px) {
  .ipx-feature-card--primary {
    flex-direction: column;
  }
  .ipx-feature-card--primary .ipx-feature-card__text {
    text-align: center;
  }
}

/* Card accent colours */
.ipx-feature-card--downloads .ipx-feature-card__icon {
  background: var(--ipx-accent-light);
  color: var(--ipx-accent);
}

.ipx-feature-card--downloads:hover {
  border-color: var(--ipx-accent);
}

.ipx-feature-card--faq .ipx-feature-card__icon {
  background: var(--ipx-teal-light);
  color: var(--ipx-teal);
}

.ipx-feature-card--faq:hover {
  border-color: var(--ipx-teal);
}

.ipx-feature-card--blog .ipx-feature-card__icon {
  background: var(--ipx-amber-light);
  color: var(--ipx-amber);
}

.ipx-feature-card--blog:hover {
  border-color: var(--ipx-amber);
}

.ipx-feature-card--support .ipx-feature-card__icon {
  background: var(--ipx-green-light);
  color: var(--ipx-green);
}

.ipx-feature-card--support:hover {
  border-color: var(--ipx-green);
}

/* Support as primary card — green accent instead of blue */
.ipx-feature-card--primary.ipx-feature-card--support {
  border-color: var(--ipx-green);
  background: linear-gradient(135deg, var(--ipx-green-light) 0%, #fff 60%);
}

/* --------------------------------------------------------------------------
   7. PAGE CONTENT AREAS
   -------------------------------------------------------------------------- */
.ipx-content {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--ipx-space-2xl) var(--ipx-space-lg);
}

.ipx-content--wide {
  max-width: 1100px;
}

/* First paragraph in content pages styled as a lead */
.ipx-content > p:first-child,
.ipx-content > .ipx-lead {
  font-size: 1.1rem;
  color: var(--ipx-gray-600);
  line-height: 1.7;
  padding-bottom: var(--ipx-space-lg);
  border-bottom: 1px solid var(--ipx-gray-200);
  margin-bottom: var(--ipx-space-xl);
}

.ipx-content h2 {
  font-size: 1.6rem;
  color: var(--ipx-navy);
  margin-top: var(--ipx-space-2xl);
  margin-bottom: var(--ipx-space-md);
  padding-top: var(--ipx-space-lg);
  border-top: 1px solid var(--ipx-gray-100);
}

.ipx-content h2:first-child,
.ipx-content > p:first-child + h2 {
  border-top: none;
  padding-top: 0;
}

.ipx-content h3 {
  font-size: 1.25rem;
  margin-top: var(--ipx-space-xl);
  margin-bottom: var(--ipx-space-sm);
}

.ipx-content p {
  margin-bottom: var(--ipx-space-md);
}

.ipx-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ipx-radius-md);
}

.ipx-content ul,
.ipx-content ol {
  margin-left: var(--ipx-space-lg);
  margin-bottom: var(--ipx-space-md);
  line-height: 1.8;
}

.ipx-content li {
  margin-bottom: var(--ipx-space-xs);
}

.ipx-content blockquote {
  border-left: 4px solid var(--ipx-navy);
  margin: var(--ipx-space-xl) 0;
  padding: var(--ipx-space-md) var(--ipx-space-xl);
  background: var(--ipx-gray-50);
  border-radius: 0 var(--ipx-radius-sm) var(--ipx-radius-sm) 0;
  color: var(--ipx-gray-600);
}

.ipx-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--ipx-gray-200);
  border-radius: var(--ipx-radius-md);
  overflow: hidden;
  margin: var(--ipx-space-xl) 0;
}

.ipx-content table th,
.ipx-content table td {
  padding: var(--ipx-space-sm) var(--ipx-space-md);
  border-top: 1px solid var(--ipx-gray-200);
  text-align: left;
}

.ipx-content table th {
  background: var(--ipx-gray-50);
  font-weight: 600;
}

.ipx-content a {
  color: var(--ipx-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--ipx-transition-fast);
}

.ipx-content a:hover {
  color: var(--ipx-navy);
}

.ipx-content hr {
  border: none;
  border-top: 1px solid var(--ipx-gray-200);
  margin: var(--ipx-space-2xl) 0;
}

.ipx-content code {
  background: var(--ipx-gray-100);
  padding: 0.15em 0.4em;
  border-radius: var(--ipx-radius-sm);
  font-size: 0.9em;
}

.ipx-content pre {
  background: var(--ipx-gray-800);
  color: var(--ipx-gray-100);
  padding: var(--ipx-space-lg);
  border-radius: var(--ipx-radius-md);
  overflow-x: auto;
  margin: var(--ipx-space-xl) 0;
}

.ipx-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* --------------------------------------------------------------------------
   8. DOWNLOADS PAGE — Product Grid
   -------------------------------------------------------------------------- */
.ipx-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ipx-space-xl);
  max-width: 1100px;
  margin: var(--ipx-space-xl) auto;
}

@media (max-width: 576px) {
  .ipx-products {
    grid-template-columns: 1fr;
  }
}

.ipx-product-card {
  display: block;
  border-radius: var(--ipx-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ipx-gray-200);
  transition: transform var(--ipx-transition-base), box-shadow var(--ipx-transition-base);
  background: #fff;
}

.ipx-product-card:hover,
.ipx-product-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--ipx-shadow-hover);
}

.ipx-product-card img {
  display: block;
  width: 100%;
  height: auto;
}

/* Status banner on downloads page */
.ipx-status-banner {
  text-align: center;
  padding: var(--ipx-space-md) var(--ipx-space-lg);
  border-radius: var(--ipx-radius-md);
  margin-bottom: var(--ipx-space-xl);
  font-size: 0.95rem;
}

.ipx-status-banner--info {
  background: var(--ipx-gray-100);
  color: var(--ipx-gray-600);
  border: 1px solid var(--ipx-gray-200);
}

.ipx-status-banner--warning {
  background: var(--ipx-amber-light);
  color: var(--ipx-amber-text);
  border: 1px solid var(--ipx-amber-border);
}

.ipx-status-banner--warning strong {
  display: block;
  font-size: 1rem;
  margin-bottom: var(--ipx-space-xs);
}

.ipx-status-banner a {
  color: var(--ipx-navy);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   9. VERSION TABLE (Archive pages)
   -------------------------------------------------------------------------- */
.ipx-version-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--ipx-gray-200);
  border-radius: var(--ipx-radius-md);
  overflow: hidden;
  margin: var(--ipx-space-xl) 0;
}

/* Override Bootstrap table defaults */
.ipx-version-table > :not(caption) > * > * {
  padding: 0;
  background-color: transparent;
  border-bottom-width: 0;
  box-shadow: none;
}

.ipx-version-table thead {
  background: var(--ipx-navy);
}

.ipx-version-table thead th {
  color: #fff;
  background-color: var(--ipx-navy);
  font-family: var(--ipx-font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--ipx-space-md) var(--ipx-space-lg);
  border: none;
  text-align: center;
}

.ipx-version-table thead th:first-child {
  text-align: left;
}

.ipx-version-table tbody tr {
  transition: background-color var(--ipx-transition-fast);
}

.ipx-version-table tbody tr:nth-child(even) {
  background-color: var(--ipx-gray-50);
}

.ipx-version-table tbody tr:hover {
  background-color: var(--ipx-gray-100);
}

/* Emphasise the current (first) row */
.ipx-version-table tbody tr:first-child {
  background-color: var(--ipx-accent-light);
}

.ipx-version-table tbody tr:first-child:hover {
  background-color: var(--ipx-accent-hover);
}

.ipx-version-table tbody td,
.ipx-version-table tbody th {
  padding: var(--ipx-space-md) var(--ipx-space-lg);
  border-top: 1px solid var(--ipx-gray-200);
  border-bottom: none;
  font-size: 0.95rem;
  vertical-align: middle;
  background-color: inherit;
}

.ipx-version-table tbody th {
  font-weight: 600;
  text-align: left;
  color: var(--ipx-gray-800);
}

.ipx-version-table tbody td {
  text-align: center;
  font-weight: 400;
  color: var(--ipx-gray-600);
}

.ipx-version-badge {
  display: inline-block;
  padding: 0.15em 0.6em;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  background: var(--ipx-green-light);
  color: var(--ipx-green);
  margin-left: var(--ipx-space-sm);
  vertical-align: middle;
}

/* Download link in table */
.ipx-download-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ipx-space-xs);
  color: var(--ipx-accent);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--ipx-transition-fast);
}

.ipx-download-link:hover {
  color: var(--ipx-navy);
  text-decoration: underline;
}

.ipx-download-link .fa {
  font-size: 0.85em;
}

/* --------------------------------------------------------------------------
   10. SINGLE DOWNLOAD PAGE — Details
   -------------------------------------------------------------------------- */
.ipx-download-details {
  display: flex;
  flex-direction: column;
  gap: var(--ipx-space-xl);
  margin: var(--ipx-space-xl) 0;
}

.ipx-detail-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--ipx-gray-200);
  border-radius: var(--ipx-radius-md);
  overflow: hidden;
}

.ipx-detail-table thead th {
  background: var(--ipx-navy);
  color: #fff;
  font-family: var(--ipx-font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--ipx-space-md) var(--ipx-space-lg);
}

.ipx-detail-table tbody th {
  font-weight: 600;
  color: var(--ipx-gray-600);
  width: 40%;
  padding: var(--ipx-space-md) var(--ipx-space-lg);
  border-top: 1px solid var(--ipx-gray-200);
}

.ipx-detail-table tbody td {
  padding: var(--ipx-space-md) var(--ipx-space-lg);
  border-top: 1px solid var(--ipx-gray-200);
}

/* Release notes */
.ipx-release-notes textarea {
  width: 100%;
  min-height: 200px;
  resize: vertical;
  border: 1px solid var(--ipx-gray-300);
  border-radius: var(--ipx-radius-md);
  padding: var(--ipx-space-md);
  font-family: var(--ipx-font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ipx-gray-700);
  background: var(--ipx-gray-50);
}

/* Download button as table row */
.ipx-detail-table__action td {
  text-align: center !important;
  padding: var(--ipx-space-xl) var(--ipx-space-lg) !important;
  background-color: #fff !important;
}

.ipx-detail-table__action form,
.ipx-detail-table__action .ipx-btn {
  display: inline-block;
}

.ipx-detail-table__action .ipx-pending-msg {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Spinner animation for download button loading state */
.fa-spin {
  animation: fa-spin 1s linear infinite;
}

@keyframes fa-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   11. BUTTONS
   -------------------------------------------------------------------------- */
.ipx-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ipx-space-sm);
  font-family: var(--ipx-font-heading);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.7rem 2rem;
  border-radius: var(--ipx-radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--ipx-transition-base);
  letter-spacing: 0.02em;
}

.ipx-btn--download {
  background: var(--ipx-green);
  color: #fff;
  font-size: 1.1rem;
  padding: 0.8rem 2.5rem;
}

.ipx-btn--download:hover {
  background: var(--ipx-green-dark);
  box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
  transform: translateY(-1px);
  color: #fff;
}

.ipx-btn--pending {
  background: var(--ipx-amber-light);
  color: var(--ipx-amber-text);
  border: 1px solid var(--ipx-amber-border);
  cursor: not-allowed;
}

.ipx-btn--disabled {
  background: var(--ipx-gray-200);
  color: var(--ipx-gray-500);
  cursor: not-allowed;
}

.ipx-btn--primary {
  background: var(--ipx-navy);
  color: #fff;
}

.ipx-btn--primary:hover {
  background: var(--ipx-navy-dark);
  color: #fff;
}

.ipx-btn--secondary {
  background: var(--ipx-gray-100);
  color: var(--ipx-gray-700);
  border: 1px solid var(--ipx-gray-300);
}

.ipx-btn--secondary:hover {
  background: var(--ipx-gray-200);
}

.ipx-btn--sm {
  font-size: 0.8rem;
  padding: 0.3rem 0.8rem;
}

.ipx-btn--blog {
  background: var(--ipx-navy);
  color: #fff;
  font-size: 0.9rem;
  padding: 0.5rem 1.25rem;
}

.ipx-btn--blog:hover {
  background: var(--ipx-navy-dark);
  color: #fff;
}

/* --------------------------------------------------------------------------
   12. BLOG LISTING
   -------------------------------------------------------------------------- */
.ipx-blog-post {
  padding: var(--ipx-space-xl) 0;
  border-bottom: 1px solid var(--ipx-gray-200);
}

.ipx-blog-post:last-child {
  border-bottom: none;
}

.ipx-blog-post__title {
  font-family: var(--ipx-font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: var(--ipx-space-xs);
}

.ipx-blog-post__title a {
  color: var(--ipx-gray-800);
  text-decoration: none;
  transition: color var(--ipx-transition-fast);
}

.ipx-blog-post__title a:hover {
  color: var(--ipx-accent);
}

.ipx-blog-post__meta {
  font-size: 0.85rem;
  color: var(--ipx-gray-400);
  margin-bottom: var(--ipx-space-md);
}

.ipx-blog-post__excerpt {
  color: var(--ipx-gray-600);
  line-height: 1.7;
  margin-bottom: var(--ipx-space-md);
}

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.ipx-footer {
  background: var(--ipx-gray-800);
  color: var(--ipx-gray-400);
  padding-top: var(--ipx-space-3xl);
}

.ipx-footer__heading {
  font-family: var(--ipx-font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--ipx-space-lg);
}

.ipx-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ipx-footer li {
  margin-bottom: var(--ipx-space-sm);
}

.ipx-footer a {
  color: var(--ipx-gray-400);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color var(--ipx-transition-fast);
}

.ipx-footer a:hover {
  color: #fff;
}

.ipx-footer__address {
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.8;
}

.ipx-footer__copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: var(--ipx-space-2xl);
  padding: var(--ipx-space-lg) 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ipx-gray-500);
}

/* --------------------------------------------------------------------------
   14. DOWNLOAD TOAST / FEEDBACK
   -------------------------------------------------------------------------- */
.ipx-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: var(--ipx-space-md);
  padding: var(--ipx-space-md) var(--ipx-space-xl);
  border-radius: var(--ipx-radius-md);
  background: var(--ipx-green);
  color: #fff;
  font-family: var(--ipx-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  animation: ipx-toast-in 0.4s ease forwards;
  pointer-events: auto;
}

.ipx-toast .fa {
  font-size: 1.2rem;
}

@keyframes ipx-toast-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ipx-toast--out {
  animation: ipx-toast-out 0.3s ease forwards;
}

@keyframes ipx-toast-out {
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* --------------------------------------------------------------------------
   15. ALERTS & STATUS
   -------------------------------------------------------------------------- */
.ipx-alert {
  padding: var(--ipx-space-md) var(--ipx-space-lg);
  border-radius: var(--ipx-radius-md);
  font-size: 0.95rem;
  line-height: 1.6;
}

.ipx-alert--warning {
  background: var(--ipx-amber-light);
  border: 1px solid var(--ipx-amber-border);
  color: var(--ipx-amber-text-dark);
}

.ipx-alert--warning strong {
  color: var(--ipx-amber-text-dark);
}

.ipx-alert--info {
  background: var(--ipx-accent-light);
  border: 1px solid var(--ipx-accent);
  color: var(--ipx-navy);
}

.ipx-alert a {
  font-weight: 600;
  text-decoration: underline;
}

/* Welcome banner for first-time users */
.ipx-welcome {
  display: flex;
  align-items: flex-start;
  gap: var(--ipx-space-lg);
  padding: var(--ipx-space-lg) var(--ipx-space-xl);
  padding-right: var(--ipx-space-3xl);
  border-radius: var(--ipx-radius-md);
  background: var(--ipx-green-light);
  border: 1px solid var(--ipx-green-border);
  color: var(--ipx-gray-700);
  animation: ipx-welcome-in 0.5s ease forwards;
  position: relative;
}

.ipx-welcome__icon {
  font-size: 1.6rem;
  color: var(--ipx-green);
  flex-shrink: 0;
  line-height: 1;
  padding-top: 0.15rem;
}

.ipx-welcome__text strong {
  display: block;
  font-size: 1.1rem;
  color: var(--ipx-gray-800);
  margin-bottom: var(--ipx-space-xs);
}

.ipx-welcome__text p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ipx-gray-600);
}

.ipx-welcome__close {
  position: absolute;
  top: var(--ipx-space-sm);
  right: var(--ipx-space-sm);
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ipx-gray-400);
  cursor: pointer;
  padding: var(--ipx-space-xs) var(--ipx-space-sm);
  border-radius: var(--ipx-radius-sm);
  transition: color var(--ipx-transition-fast), background-color var(--ipx-transition-fast);
}

.ipx-welcome__close:hover {
  color: var(--ipx-gray-700);
  background: rgba(0, 0, 0, 0.05);
}

@keyframes ipx-welcome-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pending message on single download pages */
.ipx-pending-msg {
  margin-top: var(--ipx-space-md);
  font-size: 0.9rem;
  color: var(--ipx-gray-500);
  max-width: 500px;
  line-height: 1.6;
}

.ipx-pending-msg strong {
  color: var(--ipx-gray-700);
}

/* --------------------------------------------------------------------------
   16. UTILITY CLASSES
   -------------------------------------------------------------------------- */
.ipx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.ipx-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--ipx-space-lg);
}

.ipx-text-center {
  text-align: center;
}

.ipx-mt-0 { margin-top: 0; }
.ipx-mt-md { margin-top: var(--ipx-space-md); }
.ipx-mt-lg { margin-top: var(--ipx-space-lg); }
.ipx-mt-xl { margin-top: var(--ipx-space-xl); }
.ipx-mb-lg { margin-bottom: var(--ipx-space-lg); }
.ipx-mb-xl { margin-bottom: var(--ipx-space-xl); }

/* --------------------------------------------------------------------------
   17. INTRO SECTION (Homepage)
   -------------------------------------------------------------------------- */
.ipx-intro {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
  padding: var(--ipx-space-3xl) var(--ipx-space-lg) var(--ipx-space-xl);
}

.ipx-intro__title {
  font-family: var(--ipx-font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ipx-navy);
  margin-bottom: var(--ipx-space-md);
}

.ipx-intro p {
  color: var(--ipx-gray-600);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: var(--ipx-space-sm);
}

/* --------------------------------------------------------------------------
   18. RESPONSIVE TWEAKS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .ipx-hero {
    min-height: 160px;
    padding: var(--ipx-space-xl) var(--ipx-space-md);
  }

  .ipx-hero__title {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
  }

  .ipx-content {
    padding: var(--ipx-space-xl) var(--ipx-space-md);
  }

  .ipx-footer .container {
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   19. PRINT STYLES
   -------------------------------------------------------------------------- */
@media print {
  .ipx-navbar,
  .ipx-hero,
  .ipx-footer,
  .ipx-skip-link {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }
}