/* Shared custom styles for book HTML */

/* Charter font declarations */
@font-face {
    font-family: 'Charter';
    src: url('../fonts/charter_regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src: url('../fonts/charter_italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src: url('../fonts/charter_bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src: url('../fonts/charter_bold_italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

:root {
    --cover-deep: #242341;
    --cover-accent: #ff6688;
    --pico-font-family: 'Charter', Georgia, serif;
}

/* Offset anchor scrolls so targets aren't hidden behind the fixed compact header */
html {
    scroll-padding-top: 5rem;
}

/* Use Open Sans for headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', system-ui, sans-serif;
}

.book-header {
    padding: 1.5rem 1.25rem;
    background:
        radial-gradient(circle at 20% 25%, rgba(255, 102, 136, 0.2), transparent 45%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1), transparent 40%),
        linear-gradient(135deg, var(--cover-deep) 0%, #2e294f 45%, var(--cover-accent) 100%);
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s ease;
}

/* Compact header state when scrolled past original header */
.book-header.scrolled-past {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 50;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.book-header.scrolled-past .book-header-cover {
    display: none;
}

.book-header.scrolled-past h1 {
    font-size: 1.25rem;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.book-header.scrolled-past h1:hover {
    opacity: 0.8;
}

.book-header.scrolled-past .chapter-nav {
    position: static;
    margin-left: auto;
}

.book-header-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.book-header-cover {
    flex-shrink: 0;
}

.book-header-cover img {
    width: 160px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.book-header h1 {
    color: white;
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
}

.book-header h1 .chapter-number {
    font-weight: 300;
}

.book-header .chapter-nav {
    position: absolute;
    top: 1.5rem;
    right: 1.25rem;
}

.book-header .chapter-nav details.dropdown {
    margin: 0;
}

.book-header .chapter-nav summary {
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-weight: 500;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: 'Open Sans', system-ui, sans-serif;
}

.book-header .chapter-nav summary:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.book-header .chapter-nav ul {
    max-height: 400px;
    overflow-y: auto;
}

.book-header .chapter-nav ul li a {
    font-family: 'Open Sans', system-ui, sans-serif;
}

/* Move Chapters button to top-left on mobile and small tablets */
@media (max-width: 768px) {
    .book-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .book-header .chapter-nav {
        position: static;
        margin-bottom: 1rem;
    }

    .book-header-content {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .book-header-cover img {
        width: 100%;
    }

    .book-header h1 {
        font-size: 1.5rem;
    }

    /* Compact mobile header - smaller sizing */
    .book-header.scrolled-past {
        flex-direction: row;
    }

    .book-header.scrolled-past .chapter-nav {
        margin-bottom: 0;
    }

    .book-header.scrolled-past .book-header-content {
        flex-direction: row;
        align-items: center;
    }

    .book-header.scrolled-past h1 {
        font-size: 1rem;
    }
}

.book-subtitle {
  text-decoration: italic;
  font-size: 80%;
  font-weight: 400;
  line-height: 1.0;
}

.element-bodymatter,
.element-non-bodymatter {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 1.25rem;
}

/* Figure styling */
.inline-image {
  background-color: var(--pico-card-background-color);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.inline-image img {
  display: block;
  margin: 0 auto;
  border-radius: 4px;
}

.inline-image-caption {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--pico-muted-color);
  text-align: center;
  font-family: 'Open Sans', system-ui, sans-serif;
}

/* Video embed styling */
.video-embed {
  margin: 1.5rem 0;
}

.video-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

/* Add "Chapter " prefix to chapter numbers */
.element-number-block .element-number::before {
  content: "Chapter ";
}

/* Hide the chapter heading in body content since it's now in the header */
.element-with-heading > .heading {
  display: none;
}

/* Footnotes */
.refnotes-addendum {
  max-width: 960px;
  margin: 3rem auto 0;
  padding: 0 1.25rem;
  border-top: 2px solid var(--pico-muted-border-color);
  padding-top: 2rem;
}

.refnotes-separator {
  display: none;
}

.refnote {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.refnote p {
  margin: 0;
}

.refnote-marker-container {
  display: inline !important;
}

.refnote-marker-container[hidden] {
  display: inline !important;
}

.refnote-backlink {
  font-weight: 700;
  margin-right: 0.5rem;
  color: var(--cover-accent);
  text-decoration: none;
}

.refnote-backlink:hover {
  text-decoration: underline;
}

/* Footnote return link at end of footnote */
.refnote-return {
  color: var(--cover-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1em;
  margin-left: 0.25rem;
}

.refnote-return:hover {
  text-decoration: underline;
}

/* Footnote reference in text */
.refnote-cue {
  color: var(--cover-accent);
  text-decoration: none;
  font-weight: 600;
}

.refnote-cue:hover {
  text-decoration: underline;
}

/* Page Navigation */
.page-navigation {
  max-width: 960px;
  margin: 3rem auto 0;
  padding: 0 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.page-navigation a {
  flex: 1;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-navigation .nav-prev {
  background: linear-gradient(120deg, #ffffff 0%, #f7f1ff 100%);
  color: var(--cover-deep);
  text-align: left;
}

.page-navigation .nav-next {
  background: linear-gradient(120deg, #ffe9f1 0%, #ffffff 100%);
  color: var(--cover-deep);
  text-align: right;
}

.page-navigation a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 600px) {
  .page-navigation {
    flex-direction: column;
  }

  .page-navigation a {
    text-align: center;
  }
}

/* Footer */
.site-footer {
  margin-top: 2rem;
  background:
    radial-gradient(circle at 20% 25%, rgba(255, 102, 136, 0.25), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15), transparent 40%),
    linear-gradient(135deg, var(--cover-deep) 0%, #2e294f 45%, var(--cover-accent) 100%);
  width: 100%;
  font-family: 'Open Sans', system-ui, sans-serif;
}

.footer-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  text-align: center;
}

.footer-inner p {
  color: white;
  font-size: 0.75rem;
  line-height: 1.6;
  margin: 0 0 0.5rem 0;
}

.footer-inner p:last-child {
  margin-bottom: 0;
}

/* Bibliography hanging indent */
.bibliography-content {
  padding-left: 2rem;
  text-indent: -2rem;
}

/* Enhanced focus indicators for keyboard navigation */
a:focus,
button:focus,
summary:focus,
details:focus {
  outline: 3px solid var(--cover-accent);
  outline-offset: 2px;
}

/* Ensure focus is never hidden */
*:focus {
  outline-width: 2px !important;
  outline-style: solid !important;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--cover-deep);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Nested ordered lists use lowercase letters */
ol ol {
  list-style-type: lower-alpha;
}

ol ol ol {
  list-style-type: lower-roman;
}