/*
 * SalamXP content typography — h4/h5/h6 fix + a real 6-level scale.
 *
 * Found 2026-08-10: the theme's compiled Tailwind build (assets/css/app.css, a MINIFIED build
 * artifact with no live build pipeline in this replica — never hand-edit it, changes would be
 * unreviewable and could be clobbered by a future rebuild) styles `.prose h1/h2/h3` with real
 * font-sizes, font-weight 900, tight tracking, slate-900 color, and margin — but `.prose h4` has
 * NO font-size rule at all. Tailwind's preflight reset sets `h1..h6 { font-size: inherit }`, so any
 * h4 in post content was silently rendering at plain-paragraph size, just bold. `.prose h5`/`h6`
 * had no rules whatsoever.
 *
 * Only h4/h5/h6 need fixing here — h1/h2/h3 that lead a content chunk are pulled OUT of the prose
 * flow entirely by salamxp-content-sections.php and rendered as a card's own title (styled by
 * salamxp_section_heading_class() in that file, sized by original heading level, OUTSIDE this
 * .prose scope on purpose — see that file's render function for why). So any h1/h2/h3 that still
 * shows up here would only be one nested deeper than a chunk boundary, which the current content
 * on this install never does — but the rules below are included for completeness/safety, matching
 * the already-compiled sizes exactly so nothing looks inconsistent if it ever happens.
 *
 * h5/h6 are deliberately NOT just smaller versions of h4 — they reuse this theme's own existing
 * "eyebrow label" micro-pattern (small, black-weight, uppercase, wide letter-spacing — see
 * single.php's "Transparency" label and inc/helpers.php's "Route" card eyebrow, both literally
 * `text-[10px] font-black tracking-widest uppercase text-slate-400`), rather than inventing a
 * generic scale unrelated to the rest of the site's typographic language.
 */

.prose h4 {
  font-size: 1.0625rem;   /* 17px — a clear step down from h3 (1.25rem), still a real heading */
  line-height: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgb(15 23 42);   /* slate-900, matches h1-h3 */
  margin-top: 1.25rem;
  margin-bottom: 0.375rem;
}

.prose h5 {
  font-size: 0.8125rem;   /* 13px */
  line-height: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(51 65 85);   /* slate-700 — the eyebrow treatment starts here */
  margin-top: 1.25rem;
  margin-bottom: 0.375rem;
}

.prose h6 {
  font-size: 0.6875rem;   /* 11px — matches the site's finest meta-label size exactly */
  line-height: 1rem;
  font-weight: 900;
  letter-spacing: 0.1em;  /* tracking-widest, same value as the site's own eyebrow labels */
  text-transform: uppercase;
  color: rgb(148 163 184); /* slate-400, same as the "Transparency"/"Route" eyebrow labels */
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}

/* Safety net matching the already-compiled h1/h2/h3 rules exactly (see file header — should be
   unreachable with current content, kept for defensive consistency). */
.prose h1 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 900; letter-spacing: -0.025em; color: rgb(15 23 42); margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose h2 { font-size: 1.5rem;   line-height: 2rem;    font-weight: 900; letter-spacing: -0.025em; color: rgb(15 23 42); margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose h3 { font-size: 1.25rem;  line-height: 1.75rem; font-weight: 900; letter-spacing: -0.025em; color: rgb(15 23 42); margin-top: 1.5rem; margin-bottom: 0.5rem; }

/*
 * Image-only section cards (salamxp-content-sections.php's 'image_only' type, ported from the
 * Nuxt source's isImageOnly handling). Same problem as this file solves for h4-h6: the wrapper's
 * Tailwind ARBITRARY-VARIANT classes ([&_figure]:m-0, [&_img]:w-full, etc.) only ever appear in
 * that PHP file, which lives in wp-content/mu-plugins/ — outside the theme directory Tailwind's
 * build actually scanned (./wp-themes/salamxp/**\/*.php) — so, exactly like the tag-filter chip
 * row bug the founder screenshotted, these classes compiled to nothing. Written explicitly here
 * instead of relying on the Tailwind build to ever see them.
 */
.salamxp-image-only-body figure {
  margin: 0;
}
.salamxp-image-only-body img {
  width: 100%;
  height: auto;
  display: block;
}

/**
 * Accessibility fix (2026-08-10, PageSpeed/Lighthouse audit): the brand primary color
 * (emerald-600, #059669) only reaches a 3.76:1 contrast ratio against white text/icons --
 * below WCAG AA's 4.5:1 minimum for normal-size text. Affects every white-on-primary button
 * and the language-switcher pill sitewide. Darkened to emerald-700 (#047857, 5.48:1) here
 * rather than editing tailwind.config.js, since app.css is a static pre-built artifact that
 * would need a full rebuild to pick up a config change -- same reasoning as every other
 * hand-written CSS override in this file.
 */
.bg-primary,
.salamxp-lang[data-active],
.salamxp-lang.active {
  background-color: #047857 !important;
}
.hover\:bg-primary:hover {
  background-color: #047857 !important;
}
.text-primary {
  color: #047857 !important;
}
/* Same audit: text-slate-400/300 on the light #f8fafc section background also failed
   (2.45:1 and 1.41:1 respectively, both far under the 4.5:1 minimum). */
.text-slate-400 {
  color: #64748b !important;
}
.text-slate-300 {
  color: #475569 !important;
}

/**
 * Tablet/mobile nav drawer (2026-08-10, founder direction: match arayaweddingplanner.com's
 * pattern -- a left-side slide-in drawer with its own brand header, not a dropdown panel that
 * pushes page content down). Hand-written, not Tailwind utilities: the transform/positioning
 * classes this needs (fixed, translate-x, backdrop) aren't used anywhere else in the theme's
 * scanned PHP, so the static app.css build never compiled them -- same recurring trap as every
 * other override in this file.
 */
.salamxp-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 60;
}
.salamxp-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.salamxp-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  max-width: 85vw;
  background: #ffffff;
  box-shadow: 8px 0 30px rgba(15, 23, 42, 0.15);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 61;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.salamxp-drawer.is-open {
  transform: translateX(0);
}
.salamxp-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #f1f5f9;
}
.salamxp-drawer-close {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  border: none;
  cursor: pointer;
}
.salamxp-drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 2px;
}
.salamxp-drawer-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 12px 20px;
}
.salamxp-drawer-foot {
  padding: 16px 20px 24px;
}
@media (min-width: 1024px) {
  .salamxp-drawer,
  .salamxp-drawer-backdrop {
    display: none;
  }
}

/* The drawer foot is flex-col, whose default align-items:stretch was making the Learn button
   span the drawer's full width instead of hugging its own text (2026-08-10 founder feedback). */
.salamxp-drawer-cta {
  align-self: flex-start;
}

/* Tailwind static-compile trap (recurring this session): app.css is a pre-built artifact that
   only scanned the theme's own PHP files, so a utility class used ONLY in a mu-plugin never got
   compiled in. `lg:hidden` happened to already exist (the hamburger button uses it), but
   `lg:block` did not -- confirmed via grep on the compiled CSS, 0 matches. Needed for the
   responsive halal-badge placement (2026-08-10): mobile/tablet shows the badge right after the
   hero image, desktop shows it as its own sidebar card above Location -- both instances render in
   the DOM always, `lg:hidden` / `hidden lg:block` toggle which one is visible per breakpoint.
   Hand-written here since the static build won't regenerate it. */
@media (min-width: 1024px) {
  .lg\:block {
    display: block;
  }
}