/*
 * Reading-tools toolbar for the big-3 long-form pages (building entry,
 * regional essay, thematic essay). Pairs with js/reading-tools.js.
 * All preferences persist client-side (localStorage) — no DB/config.
 */

/* Toolbar shell — a quiet right-aligned cluster above the title (D7-style). */
.reading-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
}

.reading-tools__group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.reading-tools__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5a7282;
  margin-right: 0.15rem;
}

.reading-tools button {
  font-family: var(--sah-font-body);
  border: 1px solid #c3e8f3;
  background: #fff;
  color: #014360;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.reading-tools button:hover {
  border-color: #238fb5;
}

.reading-tools button:focus-visible {
  outline: 2px solid #238fb5;
  outline-offset: 2px;
}

/* Active / pressed state. */
.reading-tools button[aria-pressed="true"] {
  background: #014360;
  border-color: #014360;
  color: #fff;
}

/* The three font-size buttons share a glyph "A" at increasing sizes. */
.reading-tools__font-s { font-size: 0.8rem; }
.reading-tools__font-m { font-size: 1rem; }
.reading-tools__font-l { font-size: 1.25rem; }

/* =============================================
   Effects applied to the <article> via data-* attributes
   ============================================= */

/* Font scale — relative to the current inherited size, so "m" = no change. */
[data-rt-font="s"] { --rt-scale: 0.9; }
[data-rt-font="m"] { --rt-scale: 1; }
[data-rt-font="l"] { --rt-scale: 1.15; }

/* Line-spacing — default mirrors the body's 1.7. */
[data-rt-spacing="normal"] { --rt-lh: 1.7; }
[data-rt-spacing="roomy"]  { --rt-lh: 2.1; }

/* Scale the actual prose elements (not just the container): Olivero sets an
   explicit font-size/line-height on <p>, <li>, etc., so a container-only rule
   never reaches the text. `calc(1em * scale)` resolves against each element's
   inherited size, so it scales relative to the current design (no compounding,
   since the container itself is left unscaled). */
[data-rt-font] .building-entry__body p,
[data-rt-font] .building-entry__body li,
[data-rt-font] .building-entry__body dt,
[data-rt-font] .building-entry__body dd,
[data-rt-font] .building-entry__body blockquote {
  font-size: calc(1em * var(--rt-scale, 1));
}

[data-rt-spacing] .building-entry__body p,
[data-rt-spacing] .building-entry__body li,
[data-rt-spacing] .building-entry__body blockquote {
  line-height: var(--rt-lh, 1.7);
}

/* Reading-width — narrow caps the body to a comfortable measure on demand. */
[data-rt-width="narrow"] .building-entry__body {
  max-width: 70ch;
}

/* =============================================
   Back-to-top button
   ============================================= */

.reading-backtotop {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  background: #014360;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(1, 67, 96, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.reading-backtotop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.reading-backtotop:hover {
  background: #1a6d8c;
}

.reading-backtotop:focus-visible {
  outline: 2px solid #238fb5;
  outline-offset: 2px;
}

/* =============================================
   Copy-citation button
   ============================================= */

.reading-copycite {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--sah-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.reading-copycite:hover,
.reading-copycite:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}

/* =============================================
   "In This Essay" table of contents
   ============================================= */

.essay-toc {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #d7e6ee;
}

.essay-toc__heading {
  font-size: 1rem;
  font-weight: 700;
  color: #014360;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.6rem;
}

.essay-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.essay-toc__list li {
  padding: 0.2rem 0;
  line-height: 1.35;
}

.essay-toc__list a {
  color: #014360;
  text-decoration: none;
  font-size: 0.88rem;
}

.essay-toc__list a:hover,
.essay-toc__list a:focus {
  color: #238fb5;
  text-decoration: underline;
}

/* Offset so jump targets aren't hidden under the very top of the viewport. */
.essay-section {
  scroll-margin-top: 1rem;
}

/* Section headings double as deep-links: the text quietly highlights on
   hover/focus instead of surfacing an out-of-flow "#".
   The descendant selector + box-shadow reset are needed to beat Olivero's
   `.text-content a` treatment (a teal underline bar at rest and a black,
   underlined, fill-highlight on hover). */
.essay-section .essay-section__link {
  color: inherit;
  text-decoration: none;
  box-shadow: none;
  transition: color 0.15s;
}

.essay-section .essay-section__link:hover,
.essay-section .essay-section__link:focus {
  color: #238fb5;
  text-decoration: none;
  box-shadow: none;
}

/* =============================================
   Print / save-friendly view
   ============================================= */

@media print {
  /* Strip site + tool chrome. */
  .reading-tools,
  .reading-backtotop,
  .reading-copycite,
  .section-list__filter,
  .site-header,
  .site-footer,
  .region--secondary-menu,
  header[role="banner"],
  footer {
    display: none !important;
  }

  /* Expand the A–Z scroll panel so every entry prints. */
  .section-list-enhanced .section-list {
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
  }

  /* Drop the sticky/card treatment and let content reflow for paper. */
  .regional-essay__sidebar,
  .thematic-essay__sidebar,
  .building-entry__sidebar {
    position: static !important;
    box-shadow: none !important;
  }

  .building-entry__body {
    max-width: none !important;
  }
}