@import url("./tokens.css?v=35");
@import url("./globals.css?v=19");
@import url("./utilities.css?v=15");

/* Shared page chrome and the reusable lesson-button visual language. */

.page-shell {
  width: 100%;
  margin: 0 auto;
}

.page-panel {
  width: 100%;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  color: var(--color-text);
  border: var(--frame-border-width) solid var(--frame-border-color);
  border-radius: var(--frame-radius);
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0.45rem 0.7rem rgba(39, 54, 36, 0.12),
    inset 0 0.08rem 0 rgba(255, 255, 255, 0.82);
}

body:has(> site-navbar) .page-panel {
  margin-top: 0;
}

.page-panel__eyebrow {
  margin: 0 0 0.45rem;
  color: var(--color-brand-deep);
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-panel h1 {
  margin: 0;
  color: #3f3a34;
  font-size: var(--font-size-menu);
  line-height: 1.05;
}

.page-panel p:last-child {
  margin: 0.85rem 0 0;
  font-family: Arial, sans-serif;
  font-size: var(--font-size-menu);
  line-height: 1.25;
}

.grammar-button {
  position: relative;
  isolation: isolate;
  display: grid;
  min-width: 0;
  aspect-ratio: 1.27;
  place-items: center;
  padding: 0.5rem;
  overflow: hidden;
  color: var(--lesson-button-text, #fff);
  border: 2px solid var(--lesson-button-border, var(--color-orange-border));
  border-radius: clamp(0.8rem, 1.4vw, 1.05rem);
  outline: none;
  cursor: pointer;
  background:
    linear-gradient(
      158deg,
      var(--lesson-button-start, #ffd451) 0%,
      var(--lesson-button-mid, #ffb21e) 34%,
      var(--lesson-button-end, #ef8a08) 100%
    );
  box-shadow:
    0 0.22rem 0 var(--lesson-button-deep, var(--color-orange-deep)),
    0 0.7rem 0.875rem var(--lesson-button-shadow, rgba(80, 48, 5, 0.19)),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.75),
    inset 0 -0.5rem 0.7rem
      var(--lesson-button-inset-shadow, rgba(139, 67, 0, 0.22));
  font-size: var(--font-size-menu);
  font-weight: 900;
  line-height: 1;
  text-shadow: var(
    --lesson-button-text-shadow,
    0 0.12rem 0 rgba(159, 74, 0, 0.28),
    0 0.22rem 0.35rem rgba(110, 49, 0, 0.18)
  );
  transform: translateY(0) scale(1);
  transition:
    transform var(--duration-buttery) var(--ease-buttery),
    box-shadow var(--duration-buttery) var(--ease-buttery),
    filter var(--duration-buttery) var(--ease-buttery);
  -webkit-tap-highlight-color: transparent;
}

.grammar-button::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: var(--lesson-button-highlight-opacity, 0.9);
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.48) 0%,
    rgba(255, 255, 255, 0.08) 30%,
    transparent 54%
  );
  pointer-events: none;
}

.grammar-button::after {
  position: absolute;
  z-index: 1;
  top: -35%;
  left: -75%;
  width: 45%;
  height: 170%;
  content: "";
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: rotate(18deg);
  transition:
    left 700ms var(--ease-buttery),
    opacity 250ms ease;
  pointer-events: none;
}

.grammar-button:hover {
  filter: saturate(1.08) brightness(1.04);
  box-shadow:
    0 0.35rem 0 var(--lesson-button-deep, var(--color-orange-deep)),
    0 0.9rem 1.2rem
      var(--lesson-button-shadow-hover, rgba(80, 48, 5, 0.23)),
    inset 0 0.11rem 0 rgba(255, 255, 255, 0.88),
    inset 0 -0.5rem 0.7rem
      var(--lesson-button-inset-hover, rgba(139, 67, 0, 0.18));
  transform: translateY(-0.27rem) scale(1.025);
}

.grammar-button:hover::after {
  left: 140%;
  opacity: 1;
}

.grammar-button:focus-visible {
  outline: 3px solid var(--lesson-button-focus, rgba(255, 190, 42, 0.8));
  outline-offset: 3px;
}

.grammar-button:active {
  filter: saturate(1.04) brightness(0.98);
  box-shadow:
    0 0.05rem 0 var(--lesson-button-deep, var(--color-orange-deep)),
    0 0.17rem 0.32rem rgba(80, 48, 5, 0.24),
    inset 0 0.17rem 0.32rem
      var(--lesson-button-active-inset, rgba(123, 55, 0, 0.2)),
    inset 0 -0.06rem 0.15rem
      var(--lesson-button-active-highlight, rgba(255, 226, 117, 0.3));
  transform: translateY(0.27rem) scale(0.96);
  transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}