/* Emperor's Children page-specific styles */
/* Uses variables from framework.css (linked in the HTML) */

body {
  background: #f1e6ff;
  color: #000000;
  min-height: 100vh;
  line-height: 1.7;
  padding: 4px;
  margin: 0;
}

body.with-vertical-nav {
  background: #f1e6ff;
}

header { padding: 1rem 0; }
header h1 {
  font-size: 2rem;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.with-vertical-nav > header {
  margin-left: calc(var(--nav-width) + 12px);
}

/* Ensure header stays centered when used inside different layouts */
header { text-align: center; }

header h1 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }

main section { margin-bottom: 1.25rem; padding: 0.25rem 0; }

/* Make sections fit nicely into the 3-column grid */
.container section { padding: var(--card-padding); background: rgba(255,255,255,0.03); border-radius: 6px; }

/* Ensure images inside content scale to column width */
.container img { width: 100%; height: auto; display: block; }

img { border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }

a { color: #ffe6ff; }
.vertical-nav a { color: rgba(255,255,255,0.95); display: block; padding: 0.35rem 0; }

footer { padding: 1rem 0; opacity: 0.95; text-align: center; }

/* Lightweight framework for chapter pages */
:root {
  --ec-purple: #890ae4;
  --ec-purple-dark: #43145e;
  --text-on-primary: #ffffff;
  --max-width: 1100px;
  --gap: 1rem;
  --framework-padding: clamp(12px, 2.5vw, 28px);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }

.container { max-width: var(--max-width); margin: 0 auto; padding: var(--framework-padding); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); align-items: start; }
.container > * { min-width: 0; }

@media (max-width: 900px) {
  .container { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 450px) {
  .container { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .with-vertical-nav > header { margin-left: 0; }
}

@media (max-width: 350px) {
  .container { gap: 12px; padding: calc(var(--gap) * 0.75); }
}
.center { display:flex; align-items:center; justify-content:center; }
.text-center { text-align:center; }

img { max-width: 100%; height: auto; display: block; }

/* Center header & footer when present */
header, footer { text-align: center; }


/* Simple utilities */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Buttons */
.btn { display: inline-block; padding: 0.5rem 1rem; border-radius: 4px; text-decoration: none; cursor: pointer; }
.btn-primary { background: var(--ec-purple-dark); color: var(--text-on-primary); border: 1px solid rgba(255,255,255,0.08); }

/* Headings spacing */
h1, h2, h3 { margin: 0 0 0.5rem 0; }