/* ---------------------------------------------------------------------------
   Corrections to bugs in the static design export itself.

   Kept separate from the generated css/<page>.css files, which are overwritten
   whenever the export is regenerated. Anything in here is hand-authored and
   should survive a re-export.
   ------------------------------------------------------------------------ */

/* Header CTA buttons.
   The CTA group is a `div.nav-desktop`, so every page's
   `.site-header .nav-desktop a { color: var(--text-secondary) }` (0,2,1) beat
   `.btn-primary` / `.btn-secondary` (0,1,0) and painted both buttons slate:
   Dashboard came out grey instead of ink, and Book a call came out grey on its
   own blue -- then blue on blue on hover, from the matching :hover rule.
   Let each variant reclaim its own colour at 0,3,1. */
.site-header .pe-cta-group a.btn-primary,
.site-header .pe-cta-group a.btn-primary:hover,
.site-header .pe-cta-group a.btn-primary:focus-visible {
  color: var(--text-inverse);
}

.site-header .pe-cta-group a.btn-secondary,
.site-header .pe-cta-group a.btn-secondary:hover,
.site-header .pe-cta-group a.btn-secondary:focus-visible {
  color: var(--text-primary);
}

/* Portfolio filter tabs.
   The three tabs are `white-space: nowrap` inside an `inline-flex` pill that
   measures 448px. On a 375px phone that pushed the whole document 37px wide,
   so the page scrolled sideways and "Photography" could not be reached at all.
   Scrolling the wrapper (not the pill) keeps the pill's radius and shadow. */
@media (max-width: 720px) {

  .tabbar-wrap {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tabbar-wrap::-webkit-scrollbar {
    display: none;
  }

  /* Do not let the pill be squeezed by the flex container. */
  .tabbar {
    flex: 0 0 auto;
  }
}

/* WordPress swaps emoji characters for <img class="emoji"> served from s.w.org,
   and the core rule that keeps them 1em tall is in a stylesheet render.php
   strips — so a Shorts card whose YouTube title ended in an emoji drew it at the
   full width of the tile. render.php now removes the script that does the
   swapping; this is here for anything that puts the markup back. */
img.emoji,
img.wp-smiley {
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  margin: 0 .07em !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  vertical-align: -.1em !important;
}

/* ---------------------------------------------------------------------------
   Blog: the parts the export never had.

   html/blogpost.html carried its article body as four <p class="text-body-lg">
   with the styling inline, because the body was typed into the file. A real
   post comes out of the_content() as plain markup, so the same treatment is
   applied here by container instead — and it has to cover the tags an editor
   can actually produce, not just paragraphs.
   --------------------------------------------------------------------------- */

.pe-article {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: var(--font-body);
  font-size: var(--size-body-lg);
  line-height: 1.7;
  color: var(--text-secondary);
}

.pe-article > *:first-child {
  margin-top: 0;
}

.pe-article p,
.pe-article ul,
.pe-article ol,
.pe-article blockquote,
.pe-article figure,
.pe-article table {
  margin: 0;
}

.pe-article h2,
.pe-article h3,
.pe-article h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
  margin: 20px 0 0;
}

.pe-article h2 { font-size: var(--size-display-sm); }
.pe-article h3 { font-size: 22px; }
.pe-article h4 { font-size: 18px; }

.pe-article ul,
.pe-article ol {
  padding-left: 24px;
}

.pe-article li {
  margin-bottom: 8px;
}

.pe-article a {
  color: var(--text-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pe-article a:hover {
  color: var(--accent-hover);
}

.pe-article strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.pe-article blockquote {
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--border-accent);
  color: var(--text-primary);
}

.pe-article img,
.pe-article iframe {
  max-width: 100%;
  border-radius: var(--radius-lg);
}

.pe-article iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  display: block;
}

.pe-article figcaption {
  font-size: var(--size-caption);
  color: var(--text-muted);
  margin-top: 8px;
}

.pe-article code {
  background: var(--surface-alt);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.9em;
}

.pe-article pre {
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
  padding: 16px;
  overflow-x: auto;
}

/* A post with a featured image uses it where the gradient placeholder was.
   The gloss the export lays over every cover reads as haze on a photograph,
   so it is dropped for real imagery only. */
.pe-cover-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.pe-cover-image::after {
  display: none;
}

/* Paging under the post grid. Hidden until there is a second page, which the
   listing reaches at thirteen posts. */
.pe-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}

.pe-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: var(--weight-medium);
  transition: all var(--duration-base) var(--ease-out);
}

.pe-pagination .page-numbers:hover {
  border-color: var(--border-accent);
  color: var(--text-accent);
}

.pe-pagination .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
}

.pe-pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
}