/* ==========================================================================
   Downloads page — reference-matched layout.
   The page intentionally uses a soft white / pale-blue visual system, with
   restrained light-blue accents around tabs, manual cards, icons and CTAs.
   ========================================================================== */

/* The header and footer are part of the shared site shell.
   Do not set display, height, position, padding, margins, or layout rules
   for them from this page stylesheet. Their geometry belongs to the global
   shell CSS so every page uses exactly the same header. */

/* NOTE: no .site-header override here on purpose. An earlier version of
   this page had a light/white hero, which clashed with the header's
   default translucent-to-transparent state (meant to blend into a dark
   hero) and needed a forced solid-header override to compensate. The
   hero below is now a dark navy gradient (matching about-hero), so that
   clash no longer exists — the header needs zero special-casing and
   should render byte-for-byte like it does on Home/About: same default
   height, same logo size, same shrink-on-scroll behavior. Do NOT
   reintroduce a `.site-header` height/background override here; that's
   exactly what caused the header to render at a different (shorter)
   height than every other page. */

.downloads-hero,
.dl-filters-band,
.downloads-section {
  --dl-bg: #f7fafc;
  --dl-white: #ffffff;
  --dl-ink: #142033;
  --dl-ink-soft: #5b6a7f;
  --dl-line: #dbe5ec;
  --dl-blue: #8ec9e7;
  --dl-blue-strong: #5daecc;
  --dl-blue-ice: #eaf6fb;
  --dl-blue-soft: #f2f9fc;
  --dl-shadow: 0 7px 20px rgba(24, 54, 76, 0.07);

  /* Requested palette additions */
  --dl-faint-white: #edf1f6;      /* faint white — hero title on the dark hero */
  --dl-faded-navy: #3c5578;       /* faded navy blue — active pill, PDF icon, help icons, request-a-manual link */
  --dl-faded-navy-shadow: rgba(60, 85, 120, 0.28);
  --dl-faint-light-blue: #6fb6e0; /* faint light blue — Vision Testing icon/text */
  --dl-dark-green: #1e6b3e;       /* dark green — Refraction icon/text */
  --dl-dark-orange: #b35c12;      /* dark orange — Lens icon/text */
  --dl-light-dark: #4b5768;       /* light-dark — card left edge */
  --dl-faint-red: #c1665c;        /* faint red — "Uploading soon" */
  --dl-faint-red-bg: #fbeae8;
}

html,
body {
  background: var(--dl-bg);
}

/* ---------- Hero ---------- */
.downloads-hero {
  position: relative;
  min-height: 268px;
  /* Top padding clears the fixed header. Same pattern as about-hero and
     home-hero: --header-h (the shared default), since the header is no
     longer force-pinned to its shorter scrolled height on this page. */
  padding: calc(var(--header-h) + var(--space-4)) 0 42px;
  overflow: hidden;
  /* Dark gradient, matching the same navy + electric-glow treatment used
     on about-hero, instead of the previous light/white background. */
  background:
    radial-gradient(55% 50% at 85% 20%, rgba(0, 163, 255, 0.16) 0%, rgba(0, 163, 255, 0) 60%),
    radial-gradient(45% 40% at 10% 90%, rgba(38, 56, 128, 0.45) 0%, rgba(38, 56, 128, 0) 65%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-900) 100%);
  color: var(--text-on-dark);
  border-bottom: 1px solid var(--navy-700);
}

.downloads-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Decorative wave lines — recolored from a pale-blue line (for the old
   light background) to the same translucent white/electric tone used for
   borders and accents elsewhere on dark sections. */
.downloads-hero-bg::before {
  content: '';
  position: absolute;
  width: 125%;
  height: 170px;
  left: -10%;
  top: 52px;
  border: 1px solid var(--border-dark-strong);
  border-left: 0;
  border-bottom: 0;
  border-radius: 52% 0 0 0 / 48% 0 0 0;
  transform: rotate(-3deg);
  opacity: 0.72;
}

.downloads-hero-bg::after {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  top: 5px;
  right: 18px;
  background-image: radial-gradient(rgba(51, 199, 255, 0.35) 1.2px, transparent 1.2px);
  background-size: 15px 15px;
  mask-image: radial-gradient(circle at top right, black 35%, transparent 86%);
  -webkit-mask-image: radial-gradient(circle at top right, black 35%, transparent 86%);
}

.downloads-hero .container {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 1120px;
}

/* Additional dotted motif on the left side without changing the markup. */
.downloads-hero .container::before {
  content: '';
  position: absolute;
  width: 105px;
  height: 105px;
  left: -92px;
  top: -16px;
  background-image: radial-gradient(rgba(51, 199, 255, 0.35) 1.2px, transparent 1.2px);
  background-size: 15px 15px;
  mask-image: radial-gradient(circle at top left, black 35%, transparent 86%);
  -webkit-mask-image: radial-gradient(circle at top left, black 35%, transparent 86%);
}

.downloads-title {
  display: block;
}

.dl-status-dot {
  display: none;
}

.downloads-title h1 {
  margin: 0;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: clamp(2.1rem, 2.9vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: var(--dl-faint-white);
}

.downloads-lead {
  margin: 14px auto 0;
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mist);
}

/* ---------- Search ---------- */
.downloads-search {
  position: relative;
  width: min(680px, 100%);
  margin: 33px auto 0;
}

.downloads-search svg {
  position: absolute;
  top: 50%;
  left: 22px;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  color: var(--mist);
  pointer-events: none;
}

.downloads-search input {
  width: 100%;
  height: 54px;
  padding: 0 20px 0 53px;
  border: 1.5px solid var(--border-dark-strong);
  border-radius: 999px;
  background: var(--glass-fill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 9px 22px rgba(5, 8, 16, 0.25);
  color: var(--text-on-dark);
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 1rem;
}

.downloads-search input::placeholder {
  color: var(--mist-dim);
}

.downloads-search input:focus {
  outline: none;
  border-color: var(--electric);
  background: var(--glass-fill-strong);
  box-shadow: 0 0 0 4px rgba(0, 163, 255, 0.18), 0 9px 22px rgba(5, 8, 16, 0.25);
}

/* ---------- Filter band ---------- */
.dl-filters-band {
  position: relative;
  background: #ffffff;
  padding: 20px 0 24px;
  border-bottom: 1px solid #edf2f5;
}

.dl-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.dl-filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 44px;
  min-width: 148px;
  padding: 10px 20px;
  border-radius: 11px;
  border: 1px solid #d7e2e9;
  background: #ffffff;
  color: #172338;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(26, 63, 84, 0.02);
  transition: all 180ms ease;
}

.dl-filter-pill:hover {
  border-color: #b6d8e8;
  background: #f8fcfe;
}

.dl-filter-pill.is-active {
  background: var(--dl-faded-navy);
  border-color: var(--dl-faded-navy);
  color: #ffffff;
  box-shadow: 0 6px 14px var(--dl-faded-navy-shadow);
}

.dl-filter-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* Per-category filter icon colors */
.dl-filter-pill[data-dl-filter="vision-testing"] .dl-filter-icon {
  color: var(--dl-faint-light-blue);
}

.dl-filter-pill[data-dl-filter="refraction"] .dl-filter-icon {
  color: var(--dl-dark-green);
}

.dl-filter-pill[data-dl-filter="lens"] .dl-filter-icon {
  color: var(--dl-dark-orange);
}

/* ---------- Manuals section ---------- */
.downloads-section {
  padding: 8px 0 30px;
  background: #ffffff;
}

.downloads-section .container {
  max-width: 1300px;
}

.manuals-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

.manual-card {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 123px;
  padding: 20px 22px;
  background: #ffffff;
  border: 1px solid #e0e8ed;
  border-left: 3px solid var(--dl-light-dark);
  border-radius: 12px;
  box-shadow: var(--dl-shadow);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.manual-card:hover {
  transform: translateY(-2px);
  border-color: #c9e3ef;
  box-shadow: 0 10px 28px rgba(25, 65, 89, 0.09);
}

.manual-card[data-dl-category] {
  border-left-color: var(--dl-light-dark);
}

.manual-card__icon {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  border-radius: 15px;
  background: #eff7fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.manual-card__icon svg {
  width: 33px;
  height: 33px;
  color: var(--dl-faded-navy);
}

.manual-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.manual-card__title {
  margin: 0;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 500;
  color: #131f32;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-card__category {
  margin-top: 8px;
  font-size: 0.88rem;
  line-height: 1.2;
  font-weight: 500;
  color: #16709b;
}

/* Per-category text colors, matching the filter-pill icon colors */
.manual-card[data-dl-category="refraction"] .manual-card__category {
  color: var(--dl-dark-green);
}

.manual-card[data-dl-category="vision-testing"] .manual-card__category {
  color: var(--dl-faint-light-blue);
}

.manual-card[data-dl-category="lens"] .manual-card__category {
  color: var(--dl-dark-orange);
}

.manual-card__meta {
  margin-top: 8px;
  font-size: 0.82rem;
  line-height: 1.2;
  color: #677689;
}

.manual-card__meta--pending {
  display: inline-flex;
  align-items: center;
  margin-top: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--dl-faint-red-bg);
  color: var(--dl-faint-red);
  font-weight: 600;
  font-size: 0.75rem;
}

.manual-card__meta--checking {
  color: #7d8c9b;
  opacity: 0.8;
}

.manual-card__download {
  flex: 0 0 auto;
}

.btn-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 138px;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid #a9cedf;
  border-radius: 999px;
  background: #ffffff;
  color: #0e6a90;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  transition: all 180ms ease;
}

.btn-outline-light:hover {
  background: #f0f9fc;
  border-color: #7fb9d3;
}

.manual-card__download:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Help / footer-style strip ---------- */
.help-strip {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 118px;
  margin-top: 44px;
  padding: 20px 24px;
  border: 1px solid #e1ecef;
  border-radius: 12px;
  background: linear-gradient(90deg, #f7fbfc 0%, #f5fafb 100%);
  box-shadow: 0 4px 16px rgba(30, 70, 90, 0.03);
}

.help-strip__item {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.help-strip__item--grow {
  flex: 1 1 0;
}

.help-strip__icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #e7f5fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-strip__icon svg {
  width: 24px;
  height: 24px;
  color: var(--dl-faded-navy);
}

.help-strip__label {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.25;
  font-weight: 700;
  color: #172338;
}

.help-strip__value {
  margin: 5px 0 0;
  font-size: 0.87rem;
  line-height: 1.45;
  color: #607084;
}

.help-strip__value a {
  color: inherit;
}

.help-strip__value a:hover {
  color: #4f9fc0;
}

.help-strip .btn {
  margin-left: auto;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 19px;
  border: 1px solid #73bad9;
  border-radius: 10px;
  background: #ffffff;
  color: var(--dl-faded-navy);
  box-shadow: none;
}

.help-strip .btn:hover {
  background: #eef9fc;
  border-color: #5aa8c7;
  color: #17627f;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .downloads-section .container {
    padding-inline: 20px;
  }

  .manual-card {
    gap: 17px;
    padding-inline: 18px;
  }

  .help-strip {
    gap: 18px;
  }
}

@media (max-width: 800px) {
  .downloads-hero {
    /* Preserve the shared header clearance on mobile as well. */
    padding: calc(var(--header-h) + 20px) 20px 36px;
  }

  .dl-filters {
    gap: 10px;
    padding-inline: 12px;
  }

  .dl-filter-pill {
    min-width: 0;
    flex: 1 1 145px;
  }

  .manuals-grid {
    grid-template-columns: 1fr;
  }

  .help-strip {
    flex-wrap: wrap;
  }

  .help-strip__item,
  .help-strip__item--grow {
    flex: 1 1 calc(50% - 12px);
  }

  .help-strip .btn {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }
}

@media (max-width: 520px) {
  .downloads-title h1 {
    font-size: 2rem;
  }

  .downloads-lead {
    font-size: 0.92rem;
  }

  .downloads-search input {
    height: 52px;
  }

  .manual-card {
    flex-wrap: wrap;
    align-items: flex-start;
    min-height: 0;
  }

  .manual-card__download {
    width: 100%;
    margin-left: 95px;
  }

  .help-strip__item,
  .help-strip__item--grow {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   Request-a-Manual modal
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(5, 8, 16, 0.6);
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  transition: opacity var(--dur-base) var(--ease-out);
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal-overlay[hidden] {
  display: none;
}

.request-modal {
  width: 100%;
  max-width: 420px;
  background: #0a1428;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  transform: scale(0.96) translateY(8px);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

.modal-overlay.is-open .request-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .modal-overlay,
  .request-modal {
    transition: none;
  }
}

.request-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.request-modal__head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: var(--ls-normal);
  color: #ffffff;
}

.request-modal__head p {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: #aab8d6;
}

.request-modal__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #aab8d6;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.request-modal__close:hover,
.request-modal__close:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
}

.request-modal__close svg {
  width: 18px;
  height: 18px;
}

/* Field styling matches the Contact page's dark glass-card form fields
   exactly, for consistency between the two forms on the site. */
.request-form .form-field {
  margin-bottom: 12px;
}

.request-form .form-field > label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #aab8d6;
  margin-bottom: 5px;
}

.request-form .form-field input,
.request-form .form-field select {
  width: 100%;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: #ffffff;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.request-form .form-field input:hover,
.request-form .form-field select:hover {
  background: rgba(255, 255, 255, 0.07);
}

.request-form .form-field input:focus,
.request-form .form-field select:focus {
  outline: none;
  border-color: #4c8bff;
  background: rgba(255, 255, 255, 0.08);
}

.request-form .select-wrap {
  position: relative;
}

.request-form .select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  cursor: pointer;
}

/* Same native-<option> readability fix as the Contact page's select —
   see contact.css for the full explanation. */
.request-form .select-wrap select option {
  background-color: #0f1e3d;
  color: #ffffff;
}

.request-form .select-wrap svg {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #aab8d6;
  pointer-events: none;
}

.request-form .form-submit-row {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.request-form .form-submit-row .btn {
  min-width: 148px;
  background: #2f6fed;
  border-color: #2f6fed;
}

.request-form .form-status {
  text-align: center;
  margin-top: 6px;
  font-size: var(--fs-body-sm);
  min-height: 1.4em;
}

.request-form .form-status[data-state='success'] {
  color: #5fe3a6;
}

.request-form .form-status[data-state='error'] {
  color: #f09088;
}

.request-form .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}