/* Container scaling via CSS variable */
.ah-post-content-wrapper,
.entry-content,
.post-content {
  /* Default scale; JS sets this on the element style */
  --ah-scale: 1.0;
  font-size: calc(1rem * var(--ah-scale));
}

/* Don’t blow up headings out of control; scale them a bit less aggressively */
.ah-post-content-wrapper h1,
.entry-content h1,
.post-content h1 { font-size: calc(2.0rem * (0.9 * var(--ah-scale))); }
.ah-post-content-wrapper h2,
.entry-content h2,
.post-content h2 { font-size: calc(1.6rem * (0.92 * var(--ah-scale))); }
.ah-post-content-wrapper h3,
.entry-content h3,
.post-content h3 { font-size: calc(1.3rem * (0.95 * var(--ah-scale))); }

/* Widget toolbar styles */
.ah-fr-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.ah-fr-btn-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d0d7de;
  background: #000000;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  font-size: 14px;
}

.ah-fr-btn:hover {
  background: #f6f8fa;
}

.ah-fr-btn[aria-pressed="true"] {
  border-color: #0969da;
  box-shadow: 0 0 0 2px rgba(9,105,218,0.15);
}

.ah-fr-A {
  font-weight: 700;
  display: inline-block;
  line-height: 1;
}

/* Visible size indicators */
.ah-fr-A--sm { font-size: 14px; }
.ah-fr-A--md { font-size: 18px; }
.ah-fr-A--lg { font-size: 22px; }

.ah-fr-label {
  white-space: nowrap;
}

/* Scope a predictable look inside widgets (front page + single posts) */
.ah-fr-widget .ah-fr-btn {
  background: #1f2328 !important;          /* neutral, readable base */
  color: #e6edf3 !important;               /* force text color */
  border: 1px solid #d0d7de !important;    /* visible border */
}

/* Hover/active/focus states */
.ah-fr-widget .ah-fr-btn:hover {
  background: #f6f8fa !important;
}

.ah-fr-widget .ah-fr-btn[aria-pressed="true"] {
  border-color: #0969da !important;
  box-shadow: 0 0 0 2px rgba(9,105,218,0.15) !important;
}

/* If your single-post template inverts widget colors, this prevents inheritance */
.ah-fr-widget,
.ah-fr-widget * {
  text-shadow: none !important;
}

/* Optional: dark mode courtesy pass */
@media (prefers-color-scheme: dark) {
  .ah-fr-widget .ah-fr-btn {
    background: #1f2328 !important;
    color: #e6edf3 !important;
    border-color: #30363d !important;
  }
  .ah-fr-widget .ah-fr-btn:hover {
    background: #262b31 !important;
  }
  .ah-fr-widget .ah-fr-btn[aria-pressed="true"] {
    border-color: #2f81f7 !important;
    box-shadow: 0 0 0 2px rgba(47,129,247,0.25) !important;
  }
}