/* ==========================================================================
   SINGLE POST
   ========================================================================== */

.single-post-header .page-header-title {
  margin-bottom: var(--space-md);
}

.post-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

.post-meta-row .wp-block-post-date,
.post-meta-row .wp-block-post-author {
  margin: 0;
  color: var(--color-text-tertiary);
}

.post-meta-row .wp-block-post-author::before {
  content: '\2022';
  margin-right: var(--space-sm);
  color: var(--color-text-tertiary);
}

.post-meta-row .wp-block-post-author,
.post-meta-row .wp-block-post-author__content {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  flex: none;
}

.post-meta-row .wp-block-post-author__byline {
  width: auto;
  margin: 0 0.3em 0 0;
  font-size: inherit;
  opacity: 1;
}

.post-meta-row .wp-block-post-author__name {
  margin: 0;
  color: var(--color-text-secondary);
  font-weight: 600;
}

.single-post-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(260px, 320px);
  justify-content: center;
  align-items: start;
  gap: var(--space-2xl);
}

.single-post-body {
  max-width: 760px;
}

.single-post-featured-image {
  margin-bottom: var(--space-2xl);
  box-shadow: var(--shadow-md);
}

.single-post-content {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: 1.8;
}

.single-post-content > * + * {
  margin-top: var(--space-lg);
}

.single-post-content h2,
.single-post-content h3,
.single-post-content h4 {
  color: var(--color-text-primary);
  margin-top: var(--space-2xl);
  margin-bottom: 0;
}

.single-post-content h2 {
  font-size: var(--font-size-2xl);
}

.single-post-content h3 {
  font-size: var(--font-size-xl);
}

.single-post-content ul,
.single-post-content ol {
  padding-left: 1.25em;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.single-post-content li {
  line-height: 1.7;
}

.single-post-content a {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-decoration-color: rgba(var(--color-accent-orange-rgb), 0.35);
  text-underline-offset: 2px;
}

.single-post-content a:hover {
  text-decoration-color: currentColor;
}

.single-post-content blockquote {
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 3px solid var(--color-accent-orange);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-style: italic;
}

.single-post-content img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Article page template (templates/page-article.html): the same long-form
   typography as a blog post, in a single reading column */
.article-page > .single-post-content {
  max-width: 760px;
  margin-inline: auto;
}

/* Short "Consider it if..." takeaway under a section */
.single-post-content .is-style-callout,
.single-post-content .article-callout {
  padding: var(--space-md) var(--space-lg);
  border-left: 3px solid var(--color-accent-orange);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-surface);
  color: var(--color-text-primary);
}

/* Card grids and FAQ lists inside article content reset the heading rhythm */
.single-post-content .card-grid-item h3 {
  margin-top: 0;
  font-size: var(--font-size-lg, 1.25rem);
}

.single-post-content .card-grid {
  margin-top: var(--space-xl);
}

.single-post-footer {
  margin-top: var(--space-3xl);
}

.single-post-footer .wp-block-separator {
  margin-bottom: var(--space-lg);
  opacity: 0.3;
}

.single-post-terms {
  margin-bottom: var(--space-md);
}

.back-to-blog {
  margin-top: var(--space-lg);
}

/* Sidebar: sticks alongside the article while there's room for it, then
   drops below the content once the two columns can no longer sit side by
   side comfortably. */
.single-post-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-xl));
}

.post-toc,
.post-related {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.post-toc {
  overflow: hidden;
}

.post-related {
  padding: var(--space-lg);
}

.post-related-title {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
}

/* `.post-toc` is a <details> element - the title doubles as its <summary>
   toggle, so it carries its own padding/marker instead of sharing
   `.post-related-title`'s plain-heading styles */
.post-toc-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0;
  padding: var(--space-lg);
  cursor: pointer;
  list-style: none;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
}

.post-toc-title::-webkit-details-marker {
  display: none;
}

.post-toc-title::after {
  content: '+';
  flex: none;
  font-size: 1.2rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-accent-display);
  transition: transform var(--transition-base);
}

.post-toc[open] .post-toc-title::after {
  transform: rotate(45deg);
}

.post-toc-nav {
  padding: 0 var(--space-lg) var(--space-lg);
}

.post-toc-list,
.post-toc-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.post-toc-sublist {
  margin-top: var(--space-sm);
  padding-left: var(--space-md);
  border-left: 1px solid var(--color-border);
}

.post-toc-nav a {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.post-toc-nav a:hover,
.post-toc-nav a.is-active {
  color: var(--color-accent-text);
}

.post-related .wp-block-post-template {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The global `.wp-block-post-template > li` rule (main.css) gives every
   query-loop item its own card padding/background/radius - meant for the
   blog grid cards, not this compact sidebar list, and its 24px padding was
   the real source of the excess space between related-post rows */
.post-related .wp-block-post-template > li {
  padding: 0;
  background: none;
  border-radius: 0;
}

/* That same global rule also lifts the li 4px on hover, tuned for the
   lifted card look elsewhere - without the card visual it just shifts
   this plain text row, so cancel it here */
.post-related .wp-block-post-template > li:hover {
  transform: none;
}

.related-post-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-sm);
  align-items: center;
}

/* Without a thumbnail, the title is the item's only child - left at
   `72px 1fr` it would fall into the (now empty) thumbnail track and wrap
   at 72px wide instead of spanning the full item */
.related-post-item:not(:has(.related-post-thumb)) {
  grid-template-columns: 1fr;
}

/* Extra `.related-post-item` qualifier on both of these to out-specificity
   the global `.wp-block-post-featured-image{margin-bottom:...}` and
   `.wp-block-post-featured-image img{height:auto}` in main.css - equal
   specificity there would win on source order and throw off this
   thumbnail's margin and its image filling the square box */
.related-post-item .related-post-thumb {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.related-post-item .related-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-post-title {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.related-post-title a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.related-post-title a:hover {
  color: var(--color-accent-text-hover);
}

@media (max-width: 1024px) {
  .single-post-layout {
    grid-template-columns: 1fr;
  }

  .single-post-sidebar {
    position: static;
    max-width: 760px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 782px) {
  .single-post-content {
    font-size: var(--font-size-base);
  }
}

/* ==========================================================================
   STATE MAP + STATE RESOURCE LISTS (SBA resources page, Article Page template)
   [telescope_us_map] outputs an SVG where every state is a jump link. The
   small Northeast states also get callout boxes, which are easier to tap.
   ========================================================================== */

.single-post-content h2[id] {
  scroll-margin-top: calc(var(--navbar-height) + 2rem);
}

.single-post-content .us-map {
  max-width: 880px;
  margin-inline: auto;
}

.single-post-content .us-map a {
  text-decoration: none;
}

.us-map__svg {
  display: block;
  width: 100%;
  height: auto;
}

.us-map__state path {
  fill: var(--color-surface-higher);
  stroke: var(--color-base);
  stroke-width: 1.5;
  stroke-linejoin: round;
  transition: fill var(--transition-fast);
  cursor: pointer;
}

.us-map__state:hover path,
.us-map__state:focus-visible path {
  fill: var(--color-accent-orange);
}

.us-map__callout rect {
  fill: var(--color-surface);
  stroke: var(--color-border);
  transition:
    fill var(--transition-fast),
    stroke var(--transition-fast);
}

.us-map__callout line {
  stroke: var(--color-border);
  stroke-width: 1;
}

.us-map__callout text {
  fill: var(--color-text-primary);
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.us-map__callout:hover rect,
.us-map__callout:focus-visible rect {
  fill: var(--color-accent-orange);
  stroke: var(--color-accent-orange);
}

.us-map__callout:hover text,
.us-map__callout:focus-visible text {
  fill: var(--color-on-accent);
}

.us-map a:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 2px;
}

.single-post-content .state-resources {
  margin-top: var(--space-md);
}

.single-post-content .state-resources a {
  word-break: break-word;
}

.single-post-content .back-to-map {
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
}