/* ---------------------------------------------------------------------------
   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-right: 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 20px 4px 0;
  border-right: 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;
}

/* The gradient placeholder .article-hero replaces was a fixed 320px block, and
   a photograph inherited that height. Inside the 900px column (836px of
   content) that is a 2.6:1 box, so `cover` scaled every 1200x630 featured image
   to the width and then ate ~13% off the top and the same off the bottom --
   on The Lineup that cut the heads and legs off the three creators. Give the
   box the image's own ratio instead, so the whole card is visible at any width.
   Scoped to .pe-cover-image: a post with no featured image keeps the 320px
   gradient it was drawn for. */
.article-hero.pe-cover-image {
  height: auto;
  aspect-ratio: 1200 / 630;
}

/* 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;
}

/* ---------------------------------------------------------------------------
   Skip link.

   The export shipped no way past the header for a keyboard or screen reader
   user, and the header now carries nine focusable things before the first
   heading. pe_skip_link() draws the anchor and pe_main_anchor() the target,
   both from pe_header(), so every page has it.

   Positioned rather than clipped: a clipped link that moves on focus is
   announced at the wrong place by some screen readers.
   ------------------------------------------------------------------------ */

.pe-skip-link {
  position: absolute;
  top: -100px;
  right: 16px;
  z-index: 2000;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--accent);
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: top 0.15s var(--ease-out);
}

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

/* The target is an empty div, so it must never take layout space. */
#pe-main {
  scroll-margin-top: 80px;
}

#pe-main:focus {
  outline: none;
}

/* ---------------------------------------------------------------------------
   Touch target sizing.

   The audit measured twelve tap targets under 44px at 375x812: footer
   navigation at 17px tall, the burger at 42px, and two inline text CTAs --
   "Book a call to see what fits" and "Message me on WhatsApp" -- which are
   conversion links sitting at 19-20px.

   Every rule below excludes .btn and .pe-mbar-btn. Both already ship at 48px
   from the design, and matching them on href alone (which is the only thing
   the two inline CTAs have in common) would otherwise reset the padding and
   the flex centring the real buttons depend on.
   ------------------------------------------------------------------------ */

@media (max-width: 1000px) {

  .site-header .nav-burger {
    min-width: 44px;
    min-height: 44px;
  }

  /* Footer columns are stacked links; padding grows the hit box without
     changing the visual rhythm much. */
  footer a:not(.btn) {
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  /* The two inline CTAs in the body. Neither has a class of its own, so they
     are matched on the href they point at -- hence the exclusions. */
  a[href$="#book"]:not(.btn):not(.pe-mbar-btn):not(.pe-mobile-cta),
  a[href*="wa.me"]:not(.btn):not(.pe-mbar-btn):not(.pe-mobile-cta) {
    display: inline-block;
    min-height: 44px;
    line-height: 1.5;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* --- Header logo touch target -------------------------------------------
   The logo mark is a 34px image and the link shrink-wrapped to it, leaving the
   only route back to the home page below the 44px minimum on touch. The mark
   itself is unchanged; only the hit area grows. */
.site-header .logo {
  min-height: 44px;
}

/* --- About: link the location badge to the Dubai landing page ------------
   The page had one internal link pointing at it, in the home page footer.
   The badge already said Dubai; now it goes somewhere. Styled to stay part of
   the badge rather than read as body-copy link. */
.about-portrait-tag .about-portrait-place {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
}
.about-portrait-tag .about-portrait-place:hover {
  text-decoration-thickness: 2px;
}

/* ---- In-content YouTube embeds ----------------------------------------

   php/_embeds.php replaces the oEmbed iframe with the poster frame and a play
   button, and js/embeds.js builds the real player on the first click. Two
   clips in a post body were pulling roughly 1.1MB of YouTube player script on
   load, ahead of the post hero image.

   The box is the one .pe-article iframe already had -- full width, 16:9, same
   radius -- so nothing in the article moves. A portrait Short is letterboxed
   in it, which is what the player did with it before: hence the dark ground
   and the contained fit. */

.pe-embed-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-900);
}

.pe-embed-facade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.pe-embed-facade.pe-facade-contain img {
  object-fit: contain;
}

.pe-facade-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pe-facade-play::before {
  content: "";
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
  transition: transform 0.25s ease, background 0.25s ease;
}

.pe-facade-play::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-right: 20px solid var(--blue-600);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-right: 6px;
}

.pe-embed-facade:hover .pe-facade-play::before {
  background: #fff;
  transform: scale(1.06);
}

.pe-embed-facade .pe-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pe-facade-play::before { transition: none; }
}

/* ---- Tables in an article ---------------------------------------------

   .pe-article table had its margin zeroed with everything else but was never
   given a look, because until the pricing guides no post contained one. A
   table of rates is the whole point of those pages, and it is the part a
   reader scans first. The wrapper scrolls rather than the page: a four-column
   rate table does not fit a 375px phone at a readable size. */

.pe-article .pe-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pe-article table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-body-md);
  font-variant-numeric: tabular-nums;
}

.pe-article th,
.pe-article td {
  text-align: right;
  padding: 11px 0 11px 16px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.pe-article th {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
}

.pe-article tbody tr:last-child th,
.pe-article tbody tr:last-child td {
  border-bottom: 0;
}

.pe-article td:first-child {
  color: var(--text-primary);
}

/* ---- Site footer, everywhere ------------------------------------------

   The footer is site-wide now (php/_footer.php) rather than living inside
   html/home.html, but the two rules that collapse its four columns on a
   narrow screen were written in css/home.css and load on the home page
   alone. Without them every other page showed four cramped columns on a
   phone. Same values as home.css, in the stylesheet every page loads. */

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* The dirham conversion under a shop price. Dollars remain the charge. */
.pe-aed { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }