/*
 * Materials Library route layer.
 * Shared tokens/components own semantics; this file composes the materials shell,
 * catalog, secure viewer, paywall, watermark, and route-specific reflow.
 */

/* Temporary token aliases retain presentation for the unchanged materials.js markup. */
.materials-page {
  --navy: var(--color-brand-ink-900);
  --off-white: var(--color-surface-canvas);
}

/* The page watermark is decorative and never captures pointer or keyboard input. */
.watermark-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent var(--content-max),
    color-mix(in srgb, var(--color-brand-gold-500) 4%, transparent) var(--content-max),
    color-mix(in srgb, var(--color-brand-gold-500) 4%, transparent) calc(var(--content-max) + var(--border-width))
  );
}

/* Protection styling is limited to the protected viewer surface. */
.viewer-body,
.viewer-body :where(img, video, iframe) {
  -webkit-user-select: none;
  user-select: none;
}

.viewer-body :where(img, video, iframe) {
  pointer-events: none;
}

.protected-page.blur-protection .material-viewer.active .viewer-body {
  filter: blur(var(--space-2));
  transition: filter var(--motion-reduced) var(--ease-standard);
}

/* Shared header composition, retaining the baseline navigation hooks. */
#main-nav {
  min-inline-size: 0;
}

/* Override base.css a color (0,0,1) which defeats :where() nav rules (0,0,0).
   Inactive links must reach 4.5:1 on ink-900 (#2C1E10) → border-subtle = #D4C4B0
   gives ≈ 9.5:1. Active state uses gold-300 (#F5E6B8, ≈ 13:1) plus underline. */
#main-nav .nav-links a {
  color: var(--color-border-subtle);
  text-decoration: none;
}

#main-nav .nav-links a:hover {
  color: var(--color-brand-gold-300);
}

#main-nav .nav-links a[aria-current="page"],
#main-nav .nav-links a.active {
  color: var(--color-brand-gold-300);
}

.nav-logo {
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
}

.nav-logo:hover {
  color: var(--color-brand-gold-300);
  text-decoration: none;
}

.nav-logo:focus-visible {
  border-radius: var(--radius-control);
  outline-color: var(--color-focus-ring-inverse);
}

.nav-logo-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  inline-size: var(--control-min-block);
  block-size: var(--control-min-block);
  border: var(--border-width) solid var(--color-brand-gold-300);
  border-radius: var(--radius-control);
  color: var(--color-brand-ink-950);
  background: var(--color-brand-gold-300);
  box-shadow: var(--shadow-inset);
}

.nav-logo-text {
  max-inline-size: 18rem;
  font-size: var(--text-step--1);
}

.nav-logo-text span {
  display: block;
  color: var(--color-brand-gold-300);
  font-size: 0.8em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-links {
  min-inline-size: 0;
}

.nav-cta {
  justify-self: start;
}

.hamburger {
  grid-column: 2;
  grid-row: 1;
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding-inline: var(--space-3);
}

.hamburger[aria-expanded] {
  display: inline-flex;
}

.hamburger span {
  display: block;
  inline-size: var(--space-5);
  block-size: calc(var(--border-width) + var(--border-width));
  border-radius: var(--radius-pill);
  background: currentColor;
}

.hamburger.open span:nth-child(2),
.hamburger.is-open span:nth-child(2) {
  opacity: 0;
}

/* Hero */
.materials-hero {
  position: relative;
  isolation: isolate;
  min-inline-size: 0;
  padding-block: clamp(var(--space-7), 9vw, var(--space-8));
  background: linear-gradient(
    145deg,
    var(--color-brand-ink-950),
    var(--color-brand-ink-900) 65%,
    var(--color-brand-ink-700)
  );
  overflow: clip;
}

.materials-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: var(--space-6);
  inset-inline-end: max(var(--layout-gutter), var(--space-4));
  inline-size: min(35vw, 18rem);
  aspect-ratio: 1;
  border: var(--border-width) solid color-mix(in srgb, var(--color-brand-gold-300) 35%, transparent);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-floating);
  opacity: 0.45;
  pointer-events: none;
}

.materials-hero-inner {
  position: relative;
  z-index: var(--z-content);
  text-align: center;
}

.materials-badge {
  display: inline-flex;
  align-items: center;
  max-inline-size: 100%;
  min-block-size: var(--target-size-floor);
  margin-block-end: var(--space-5);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-brand-gold-300);
  border-radius: var(--radius-pill);
  color: var(--color-brand-gold-300);
  background: var(--color-brand-ink-950);
  font-size: var(--text-step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.materials-hero h1 {
  max-inline-size: 18ch;
  margin-inline: auto;
  color: var(--color-text-inverse);
}

.materials-hero p {
  max-inline-size: 60ch;
  margin: 0 auto;
  color: var(--color-border-subtle);
  font-size: var(--text-step-1);
}

/* Catalog shell and semantic level tabs */
.materials-section {
  --container-max: var(--content-max);
}

.materials-tabs {
  margin-block-end: var(--space-7);
}

.mat-tab:not(.active) {
  border-color: transparent;
  color: var(--color-brand-ink-700);
  background: transparent;
  box-shadow: none;
}

.mat-tab.active {
  border-color: var(--color-brand-gold-700);
  color: var(--color-brand-ink-950);
  background: var(--color-brand-gold-300);
  box-shadow: var(--shadow-inset);
}

.level-panel {
  display: none;
  min-inline-size: 0;
  padding: clamp(var(--space-4), 4vw, var(--space-6));
}

.level-panel.active {
  display: block;
}

.level-panel:focus-visible {
  outline: var(--focus-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-offset);
}

.level-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
}

.level-dot {
  flex: 0 0 auto;
  inline-size: var(--space-3);
  block-size: var(--space-3);
  border: var(--border-width) solid var(--color-brand-ink-900);
  background: var(--color-brand-gold-500);
  box-shadow: var(--shadow-inset);
}

.level-dot.a1 {
  border-radius: var(--radius-pill);
}

.level-dot.a2 {
  border-radius: var(--space-1);
}

.level-dot.b1 {
  border: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.level-dot.b2 {
  border: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* Access category headers pair persistent text with icons, shapes, and boundaries. */
.mat-category + .mat-category {
  margin-block-start: var(--space-7);
}

.cat-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border-subtle);
  border-inline-start-width: var(--focus-width);
  border-radius: var(--radius-control);
  background: var(--color-surface-canvas);
}

.cat-header.free {
  border-inline-start-color: var(--color-status-success);
}

.cat-header.paid {
  border-color: var(--color-border-strong);
  border-inline-start-color: var(--color-brand-gold-700);
  border-style: dashed;
  border-inline-start-style: solid;
}

.cat-header h3 {
  margin: 0;
}

.cat-icon {
  flex: 0 0 auto;
  font-size: var(--text-step-1);
  line-height: 1;
}

.cat-badge {
  margin-inline-start: auto;
}

/* Material cards */
.mat-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 18rem), 1fr)
  );
  gap: var(--space-5);
  min-inline-size: 0;
}

.mat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-inline-size: 0;
}

.mat-card[data-status="free"] {
  border-inline-start: var(--focus-width) solid var(--color-status-success);
}

.mat-card[data-status="locked"] {
  border-color: var(--color-border-strong);
  border-style: dashed;
}

.mat-lock-badge {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  display: grid;
  place-items: center;
  min-inline-size: var(--target-size-floor);
  min-block-size: var(--target-size-floor);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface-raised);
  line-height: 1;
}

.mat-card-icon {
  font-size: var(--text-step-2);
  line-height: 1;
}

.mat-card-body {
  min-inline-size: 0;
}

.mat-card-body h4 {
  margin-block-end: var(--space-2);
  color: var(--color-brand-ink-900);
  font-size: var(--text-step-1);
}

.mat-card-body p {
  margin-block-end: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-step--1);
}

.mat-type {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-size-floor);
  max-inline-size: 100%;
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  background: var(--color-surface-canvas);
  font-size: var(--text-step--1);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.mat-btn {
  inline-size: 100%;
  margin-block-start: auto;
}

.mat-btn-locked {
  border-style: dashed;
}

/* Full-screen secure material viewer */
.material-viewer {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: none;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
  max-inline-size: 100vw;
  max-block-size: 100vh;
  max-block-size: 100dvh;
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
}

.material-viewer.active {
  display: flex;
}

.viewer-header {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-inline-size: 0;
  padding: var(--space-3) var(--layout-gutter);
  border-block-end: var(--focus-width) solid var(--color-brand-gold-500);
  color: var(--color-text-inverse);
  background: var(--color-surface-inverse);
}

.viewer-title {
  flex: 1 1 16rem;
  min-inline-size: 0;
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-size: var(--text-step-1);
  font-weight: 700;
  line-height: var(--line-heading);
  overflow-wrap: anywhere;
}

.viewer-close {
  --action-bg: transparent;
  --action-text: var(--color-text-inverse);
  --action-border: var(--color-brand-gold-300);

  flex: 0 0 auto;
  font-size: var(--text-step-2);
}

.viewer-close:focus-visible {
  outline-color: var(--color-focus-ring-inverse);
}

.viewer-body {
  position: relative;
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 0;
  padding: clamp(var(--space-4), 5vw, var(--space-7));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.viewer-body:focus-visible {
  outline: var(--focus-width) solid var(--color-focus-ring);
  outline-offset: calc(0px - var(--focus-width));
}

.viewer-placeholder {
  inline-size: min(100%, var(--reading-max));
  margin-inline: auto;
  padding-block: var(--space-7);
  color: var(--color-text-secondary);
  text-align: center;
}

.viewer-placeholder > :last-child {
  margin-block-end: 0;
}

.viewer-placeholder .viewer-note {
  margin-block-start: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-step--1);
}

.viewer-placeholder code {
  overflow-wrap: anywhere;
}

.viewer-watermark {
  position: absolute;
  inset-inline-end: var(--space-4);
  inset-block-end: var(--space-4);
  z-index: var(--z-content);
  display: none;
  max-inline-size: calc(100% - var(--space-6));
  color: color-mix(in srgb, var(--color-brand-gold-700) 40%, transparent);
  font-size: var(--text-step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-align: end;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.material-viewer.active .viewer-watermark {
  display: block;
}

/* Premium access dialog */
.paywall-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-dialog) + 1);
  display: none;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-inline-size: 0;
  max-inline-size: 100%;
  max-block-size: 100vh;
  max-block-size: 100dvh;
  padding: max(var(--space-4), env(safe-area-inset-top, 0px))
    max(var(--space-4), env(safe-area-inset-right, 0px))
    max(var(--space-4), env(safe-area-inset-bottom, 0px))
    max(var(--space-4), env(safe-area-inset-left, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--color-brand-ink-950) 88%, transparent);
}

.paywall-modal.active {
  display: grid;
}

.paywall-card {
  position: relative;
  inline-size: min(100%, 46rem);
  max-inline-size: 100%;
  min-inline-size: 0;
  margin: auto;
  padding: clamp(var(--space-5), 5vw, var(--space-7));
  text-align: center;
  overflow: visible;
}

.paywall-close {
  --action-bg: var(--color-surface-raised);
  --action-text: var(--color-brand-ink-900);
  --action-border: var(--color-border-strong);

  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  z-index: var(--z-content);
  font-size: var(--text-step-1);
}

.paywall-icon {
  display: grid;
  place-items: center;
  inline-size: var(--space-8);
  aspect-ratio: 1;
  margin: 0 auto var(--space-4);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-pill);
  color: var(--color-brand-ink-900);
  background: var(--color-brand-gold-300);
  font-size: var(--text-step-2);
  line-height: 1;
}

.paywall-card > h3 {
  margin-inline: var(--space-7);
}

.paywall-card > p {
  max-inline-size: 58ch;
  margin-inline: auto;
  color: var(--color-text-secondary);
}

.paywall-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-block: var(--space-6);
}

.paywall-option {
  min-inline-size: 0;
  text-align: center;
}

.paywall-option.best-value {
  border-color: var(--color-brand-gold-700);
  border-block-start-width: var(--focus-width);
}

.paywall-option-badge {
  margin: 0 auto var(--space-4);
}

.paywall-option h4 {
  font-size: var(--text-step-1);
}

.paywall-option p {
  color: var(--color-text-secondary);
  font-size: var(--text-step--1);
}

.paywall-cta,
.paywall-buy-btn {
  inline-size: 100%;
}

.paywall-buy-note {
  display: block;
  margin-block-start: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-step--1);
}

.paywall-divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.paywall-divider::before,
.paywall-divider::after {
  content: "";
  block-size: var(--border-width);
  background: var(--color-border-subtle);
}

.paywall-includes {
  padding-block-start: var(--space-5);
  border-block-start: var(--border-width) solid var(--color-border-subtle);
  text-align: start;
}

.paywall-includes p {
  color: var(--color-brand-ink-900);
  font-size: var(--text-step--1);
}

.paywall-includes ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.paywall-includes li {
  padding-block: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--text-step--1);
}

/* Footer */
.materials-footer {
  text-align: center;
}

.materials-footer .site-footer__inner {
  padding-block: var(--space-6);
}

.materials-footer p {
  color: var(--color-border-subtle);
  font-size: var(--text-step--1);
}

.materials-footer-links {
  color: var(--color-border-subtle);
  font-size: var(--text-step--1);
}

.materials-footer a {
  color: var(--color-brand-gold-300);
}

.materials-footer a:focus-visible {
  border-radius: var(--radius-control);
  outline-color: var(--color-focus-ring-inverse);
}

/* Keep the secure material surface protected without suppressing public-page print. */
@media print {
  .material-viewer.active > * {
    display: none !important;
  }

  .material-viewer.active::after {
    content: "Printing is disabled for this content. © Hamshu Deutsch World Academy";
    display: block;
    max-inline-size: var(--reading-max);
    margin: auto;
    padding: var(--space-8) var(--space-5);
    color: var(--color-text-primary);
    font-size: var(--text-step-2);
    text-align: center;
  }
}

/* Responsive navigation remains fully visible when JavaScript is unavailable. */
@media (max-width: 63.999rem) {
  #main-nav:has(#hamburgerBtn[aria-expanded="false"]) #navLinks {
    display: none;
  }

  #main-nav:has(#hamburgerBtn[aria-expanded="true"]) #navLinks {
    display: grid;
  }
}

@media (min-width: 64rem) {
  #main-nav {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  }

  #navLinks {
    grid-column: auto;
    grid-row: auto;
  }

  .nav-cta {
    justify-self: end;
  }

  .hamburger,
  .hamburger[aria-expanded] {
    display: none !important;
  }
}

@media (max-width: 48rem) {
  .materials-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mat-tab {
    inline-size: 100%;
  }

  .cat-header {
    align-items: flex-start;
  }

  .cat-badge {
    flex-basis: 100%;
    margin-inline-start: 0;
  }
}

@media (max-width: 30rem) {
  .nav-logo-text {
    max-inline-size: 11rem;
  }

  .materials-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  .level-panel,
  .mat-card,
  .paywall-card {
    padding: var(--space-4);
  }

  .viewer-header {
    align-items: flex-start;
  }

  .viewer-close {
    margin-inline-start: auto;
  }

  .paywall-card > h3 {
    margin-inline: var(--space-6);
  }

  .paywall-option-badge {
    margin-block-start: 0;
  }
}

@media (forced-colors: active) {
  .level-dot,
  .cat-header,
  .mat-card,
  .mat-lock-badge,
  .paywall-icon {
    border-color: CanvasText;
  }
}

@supports not (overflow: clip) {
  .materials-hero {
    overflow: hidden;
  }
}