/* ---------------------------------------------------------------------------
   Shared layout for eMathArt content pages (guides, about, contact, terms).
   Extracted from the inline styles in learn.html so that new articles do not
   each carry their own copy. Colours come from the palette tokens in
   theme.css; nothing here hard-codes a hue.
   --------------------------------------------------------------------------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: radial-gradient(ellipse at bottom, var(--bg-glow) 0%, var(--bg-page) 100%);
  min-height: 100vh;
  color: var(--text, #e0e0e0);
  line-height: 1.8;
  overflow-x: hidden;
  position: relative;
}

/* --- Ambient background ---------------------------------------------------- */

.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent),
    radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 230px 80px, #ddd, transparent),
    radial-gradient(2px 2px at 300px 150px, #fff, transparent),
    radial-gradient(1px 1px at 370px 50px, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 450px 180px, #eee, transparent),
    radial-gradient(1px 1px at 520px 90px, #fff, transparent),
    radial-gradient(2px 2px at 600px 200px, rgba(255,255,255,0.8), transparent);
  background-size: 650px 250px;
  animation: twinkle 5s ease-in-out infinite;
  z-index: 0;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.orb-1 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(var(--accent-mid-rgb), 0.5) 0%, transparent 70%);
  top: 10%; left: -100px;
  animation: float1 20s ease-in-out infinite;
}
.orb-2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.4) 0%, transparent 70%);
  top: 60%; right: -50px;
  animation: float2 25s ease-in-out infinite;
}
.orb-3 {
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(var(--accent-bright-rgb), 0.3) 0%, transparent 70%);
  bottom: 10%; left: 30%;
  animation: float3 18s ease-in-out infinite;
}

@keyframes float1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, 50px) scale(1.1); }
  66%      { transform: translate(-20px, 30px) scale(0.95); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-40px, -30px) scale(1.05); }
  66%      { transform: translate(20px, -50px) scale(0.9); }
}
@keyframes float3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(50px, -20px) scale(1.15); }
  66%      { transform: translate(-30px, 40px) scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .stars, .orb { animation: none; }
}

/* --- Shell ----------------------------------------------------------------- */

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  position: relative;
  z-index: 1;
}

.back-link {
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 30px;
  padding: 10px 20px;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  transition: all 0.3s;
}
.back-link:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: var(--accent);
}
.back-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

header { text-align: center; margin-bottom: 50px; }

h1 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.5rem;
  background: linear-gradient(135deg, var(--accent-bright) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
  text-wrap: balance;
}

header p { color: var(--accent-muted); }

/* --- Article body ---------------------------------------------------------- */

article {
  background: rgba(var(--bg-panel4-rgb), 0.8);
  padding: 40px;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  margin-bottom: 30px;
}

h2 {
  font-family: 'Cinzel', Georgia, serif;
  color: var(--accent-bright);
  font-size: 1.8rem;
  margin: 30px 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
  text-wrap: balance;
}
h2:first-child { margin-top: 0; }

h3 {
  font-family: 'Cinzel', Georgia, serif;
  color: var(--gold);
  font-size: 1.3rem;
  margin: 25px 0 15px 0;
}

p { margin-bottom: 15px; color: var(--accent-pale); }

ul, ol { margin: 15px 0 15px 30px; color: var(--accent-pale); }
li { margin-bottom: 10px; }

article a { color: var(--accent); }
article a:hover { text-decoration: none; }

strong { color: var(--gold-soft); font-weight: 600; }

blockquote {
  margin: 20px 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid rgba(var(--gold-rgb), 0.5);
  color: var(--accent-soft);
  font-style: italic;
}

/* Shown only to readers whose chosen language this article is not written in.
   Hidden for English readers by i18n.js, and hidden entirely without JS. */
.lang-notice {
  background: rgba(var(--bg-panel-rgb), 0.6);
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  border-radius: 10px;
  padding: 12px 18px;
  margin-bottom: 24px;
  font-size: 0.92rem;
  color: var(--accent-muted);
}
.lang-notice[hidden] { display: none; }

/* Worked calculations */
.calc {
  background: rgba(var(--bg-panel-rgb), 0.6);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 20px 0;
  font-variant-numeric: tabular-nums;
  overflow-x: auto;
}
.calc p { margin-bottom: 8px; }
.calc p:last-child { margin-bottom: 0; }
.calc .result { color: var(--gold-bright); font-weight: 600; }

.number-card {
  background: rgba(var(--accent-deep-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
}
.number-card h4 {
  color: var(--gold);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.number-card p:last-child { margin-bottom: 0; }

/* --- Table of contents ----------------------------------------------------- */

.toc {
  background: rgba(var(--bg-panel-rgb), 0.5);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 12px;
  padding: 20px 30px;
  margin-bottom: 30px;
}
.toc h3 { margin-top: 0; color: var(--accent-bright); }
.toc ul { list-style: none; margin-left: 0; }
.toc a { color: var(--accent); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* --- Guide index grid ------------------------------------------------------ */

.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 16px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.guide-grid li { margin: 0; }
.guide-grid a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 20px;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 12px;
  background: rgba(var(--accent-deep-rgb), 0.1);
  text-decoration: none;
  transition: all 0.3s;
}
.guide-grid a:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  transform: translateY(-2px);
}
.guide-grid a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.guide-grid .g-num {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gold);
}
.guide-grid .g-title {
  font-family: 'Cinzel', Georgia, serif;
  color: var(--accent-bright);
  font-size: 1.05rem;
}
.guide-grid .g-desc { color: var(--accent-muted); font-size: 0.9rem; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .guide-grid a:hover { transform: none; }
}

/* --- Call to action -------------------------------------------------------- */

.cta-box {
  background: linear-gradient(135deg, rgba(var(--accent-deep-rgb), 0.2) 0%, rgba(var(--accent-rgb), 0.1) 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  margin-top: 40px;
}
.cta-box h3 { margin-top: 0; }
.cta-btn {
  display: inline-block;
  padding: 14px 40px;
  background: linear-gradient(135deg, var(--accent-deep) 0%, var(--accent) 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  margin-top: 15px;
  transition: all 0.3s;
}
.cta-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(var(--accent-mid-rgb), 0.4); }
.cta-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .cta-btn:hover { transform: none; }
}

/* --- Footer ---------------------------------------------------------------- */

.site-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 10px 20px 40px;
  font-size: 0.85rem;
  color: var(--accent-muted2);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 768px) {
  .container { padding: 20px 15px; }
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.4rem; }
  article { padding: 24px 20px; }
  .cta-box { padding: 20px 15px; }
  .cta-btn { padding: 12px 30px; font-size: 0.9rem; }
  .toc { padding: 15px 20px; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  p, li { font-size: 0.95rem; }
}