/* =========================================================
   PALEBLUEDOT v0.3.4 patches — responsive nav + spacing.
   Loaded after theme.css (see inc/enqueue.php). Lives in its
   own file because theme.css is too large to edit through the
   MCP theme-file writer; fold back into theme.css at the next
   full theme-zip reinstall.

   Fixes:
   1. Mobile/tablet navigation
      - theme.css hid the whole nav (.pbd-nav{display:none}) at
        ≤960px, but the block nav's overlayMenu:"mobile" only
        renders the hamburger below 600px — so 600–960px (tablet)
        had NO menu at all. Here we keep the nav visible so the
        inline menu shows on tablet, and style the <600px overlay
        panel (which core left transparent/unstyled).
   2. Empty bands
      - the big gap under the header (hero top padding) and the
        white gap before the footer (footer margin-top) are tightened.
   ========================================================= */

/* ---- 1a. Submenu toggle button picks up the same link styling ---- */
.pbd-nav .wp-block-navigation-item__content {
  padding: 8px 14px;
  border-radius: var(--pbd-r-8);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--pbd-text-muted);
  text-decoration: none;
  transition: color .15s, background .15s;
}
.pbd-nav .wp-block-navigation-item__content:hover {
  color: var(--pbd-text);
  background: var(--pbd-bg-soft);
}
.pbd-nav .wp-block-navigation-item__content[aria-current="page"] {
  color: var(--pbd-primary-700);
}

/* ---- 1b. Keep the nav visible across tablet (override the
        theme.css `.pbd-nav{display:none}` at ≤960px) ---- */
@media (max-width: 960px) {
  .pbd-nav { display: flex; }
}

/* ---- 1c. Hamburger + close buttons ---- */
.pbd-nav .wp-block-navigation__responsive-container-open,
.pbd-nav .wp-block-navigation__responsive-container-close {
  color: var(--pbd-text-muted);
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
}
.pbd-nav .wp-block-navigation__responsive-container-open svg,
.pbd-nav .wp-block-navigation__responsive-container-close svg {
  width: 26px; height: 26px; fill: currentColor;
}
.pbd-nav .wp-block-navigation__responsive-container-open { margin-inline-start: 4px; }

/* ---- 1d. Full-screen overlay panel (mobile, <600px) ----
   The site header carries `backdrop-filter`, which makes it the
   containing block for any position:fixed descendant — so core's
   `inset:0` overlay gets trapped inside the ~74px header strip
   instead of filling the viewport. Viewport units (vw/vh) are
   viewport-relative regardless of the containing block, so they
   restore the true full-screen panel. */
.pbd-nav .wp-block-navigation__responsive-container.is-menu-open {
  position: fixed;
  top: 0; left: 0; right: auto; bottom: auto;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 100000;
  overflow-y: auto;
  /* border-box so the 100vw/100dvh box INCLUDES the padding — with the
     default content-box the panel was 100vw+40px wide / 100dvh+60px tall,
     overflowing the viewport and pushing the close button off-screen. */
  box-sizing: border-box;
  /* !important: WP core forces a white overlay background at higher
     specificity, which left the dark-mode panel white with unreadable
     light text. var(--pbd-bg) already resolves per theme. */
  background: var(--pbd-bg) !important;
  padding: 20px var(--pbd-gutter) 40px;
}
.pbd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: 12px;
  width: 100%;
}
.pbd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 2px;
  align-items: stretch;
}
.pbd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  border-bottom: 1px solid var(--pbd-border);
}
.pbd-nav .wp-block-navigation__responsive-container.is-menu-open a,
.pbd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block;
  font-family: var(--pbd-font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--pbd-text);
  padding: 16px 4px;
  border-radius: 0;
}
.pbd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important;
  opacity: 1 !important; visibility: visible !important;
  border: 0 !important; box-shadow: none !important;
  background: transparent !important; border-radius: 0 !important;
  min-width: 0 !important; width: auto !important;
  padding-inline-start: 16px;
}
.pbd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
  font-size: 17px;
  font-family: var(--pbd-font-sans);
  color: var(--pbd-text-muted);
  padding: 12px 4px;
}

/* ---- 2. Spacing — keep the breathing room INSIDE main ----
   WP applies a block-gap margin (~24px, body-coloured) above the
   top-level <main> and above the footer template-part. On the HOME page
   <main> carries a tinted hero-backdrop gradient, so those bare
   body-coloured bands (under the header, and above the bg-soft footer)
   read as detached slabs in a different colour. Pull the block-gap
   margins off the top-level parts and move the spacing into main's own
   padding so it carries the backdrop, with a compact footer. Scoped to
   body.home — interior pages (plain bg) already look fine and are left
   untouched. */
.pbd-hero { padding-top: 32px; padding-bottom: 28px; }
.pbd-site-footer { margin-top: 0; padding-top: 72px; }

body.home .wp-site-blocks > main.pbd-hero-backdrop { margin-block-start: 0; }
body.home .wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }
body.home .pbd-hero-backdrop { padding-bottom: 64px; }
body.home .pbd-site-footer { padding-top: 44px; }

@media (max-width: 640px) {
  .pbd-hero { padding-top: 18px; padding-bottom: 18px; }
  .pbd-site-footer { margin-top: 0; padding-top: 52px; }
  body.home .pbd-hero-backdrop { padding-bottom: 44px; }
  body.home .pbd-site-footer { padding-top: 36px; }
}

/* ---- 3. Search / archive result rows ----
   The row used to be a whole-row <a> (tagName:"a") that WRAPPED the
   category link (post-terms) — an <a> inside an <a> is invalid HTML, so
   the browser auto-closed the outer anchor and ejected the title/excerpt
   out of the row, fragmenting every result into an orphaned date-only row
   plus empty rows. The row is now a <div> and the post title is the link.
   Restore whole-row click with a valid stretched-link on the title,
   keeping the category link clickable above it. */
.pbd-archive-row { position: relative; }
.pbd-archive-row .wp-block-post-title { margin: 0; }
.pbd-archive-row .wp-block-post-title a { text-decoration: none; color: inherit; }
.pbd-archive-row .wp-block-post-title a:hover { color: var(--pbd-primary-700); }
body[data-theme="dark"] .pbd-archive-row .wp-block-post-title a:hover { color: var(--pbd-primary-300); }
.pbd-archive-row .wp-block-post-title a::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
/* keep the category link independently clickable above the stretched link */
.pbd-archive-row .pbd-cat a { position: relative; z-index: 2; }
/* date column reads as a quiet meta label, not a giant empty band */
.pbd-archive-row .pbd-date { align-self: start; }

/* ---- 4. Single-post layout: drop the right "Related" rail ----
   The Related aside (data-pbd-related) was never wired up to any JS and
   the "min read" byline chip never computed a value, so both were removed
   from templates/single.html. Collapse the 3-column post grid (TOC | prose
   | aside) down to 2 columns (TOC | prose) so the prose isn't left with an
   empty 220px gutter on the inline-end.
   NOTE: must be desktop-scoped. Without the media query this clobbered
   theme.css's `@media (max-width:960px){ .pbd-post-layout{1fr} }` collapse
   (nav-spacing.css loads after theme.css), so on mobile the TOC kept its
   220px track and squished the article body to ~83px — clipping every
   table / code block / long token under the html{overflow-x:clip} guard. */
@media (min-width: 961px) {
  .pbd-post-layout { grid-template-columns: 220px minmax(0, 1fr); }
}

/* =========================================================
   v0.4.1 — Language switcher dropdown + footer Donate link
   Loaded site-wide (both EN + FA); RTL alignment in fa.css.
   ========================================================= */
.pbd-lang-switch.pbd-lang-dropdown {
  position: relative;
  display: inline-block;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.pbd-lang-switch.pbd-lang-dropdown > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  padding: 6px 10px;
  border: 1px solid var(--pbd-border);
  border-radius: var(--pbd-r-full);
  background: var(--pbd-surface);
  color: var(--pbd-text);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.pbd-lang-switch.pbd-lang-dropdown > summary::-webkit-details-marker { display: none; }
.pbd-lang-switch.pbd-lang-dropdown > summary:hover { border-color: var(--pbd-border-strong); background: var(--pbd-bg-soft); }
.pbd-lang-switch.pbd-lang-dropdown > summary:focus-visible { outline: 2px solid var(--pbd-primary-500); outline-offset: 2px; }
.pbd-lang-switch .pbd-globe svg { width: 15px; height: 15px; display: block; opacity: .8; }
.pbd-lang-switch .pbd-lang-caret { width: 13px; height: 13px; transition: transform .15s ease; }
.pbd-lang-switch.pbd-lang-dropdown[open] > summary .pbd-lang-caret { transform: rotate(180deg); }

.pbd-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 60;
  min-width: 150px;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--pbd-surface);
  border: 1px solid var(--pbd-border);
  border-radius: 12px;
  box-shadow: var(--pbd-shadow-md, 0 10px 30px rgba(2, 32, 71, .14));
}
.pbd-lang-menu li { margin: 0; }
.pbd-lang-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--pbd-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.pbd-lang-menu a:hover { background: var(--pbd-bg-soft); }
/* Active item: override the legacy `.pbd-lang-switch .is-active{background:primary-700;color:#fff}`
   pill rule from theme.css — inside the dropdown that left primary-700 text on a
   primary-700 background (invisible). Use a soft tint + accent text instead. */
.pbd-lang-menu a.is-active { background: var(--pbd-bg-soft); color: var(--pbd-primary-700); font-weight: 700; }
body[data-theme="dark"] .pbd-lang-menu a.is-active { background: var(--pbd-bg-soft); color: var(--pbd-primary-300, #9cd0f5); }

/* Header tools (search + theme toggle) — flex row so the icons sit side by side.
   Wrapped in a block-level div by [pbd_header_tools] to dodge the shortcode
   block's wpautop, which previously stacked them with injected <br>. */
.pbd-header-tools { display: inline-flex; align-items: center; gap: 8px; }

/* Footer "Support" Donate link */
.pbd-footer-donate { display: inline-flex; align-items: center; gap: 7px; }
.pbd-footer-donate svg { width: 15px; height: 15px; color: var(--pbd-primary-500); flex: 0 0 auto; }

/* ===========================================================
   v0.4.3 — bordered content tables (.wp-block-table)
   Tables shipped borderless (no grid lines), so data tables
   (Reports comparisons, the 10k-skills figures) read as loose
   floating text. Add cell borders + a header tint. Theme-agnostic
   colours via --pbd tokens so it works in light + dark. text-align
   start keeps LTR(EN) left / RTL(FA) right automatically.
   =========================================================== */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th,
.wp-block-table td {
  border: 1px solid var(--pbd-border);
  padding: 10px 14px;
  text-align: start;
  vertical-align: top;
}
.wp-block-table thead th {
  background: var(--pbd-bg-soft);
  font-weight: 600;
}

/* v0.4.8 — RSS feed link in the category-archive meta bar inherits the muted
   stat colour with just an underline affordance (was static text). */
.pbd-meta-bar .pbd-rss-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pbd-meta-bar .pbd-rss-link:hover { color: var(--pbd-primary-700); }
body[data-theme="dark"] .pbd-meta-bar .pbd-rss-link:hover { color: var(--pbd-primary-300); }

/* v0.4.9 — featured-image thumbnail on category-archive + search result rows.
   Sits in the row's 3rd grid track (.pbd-archive-row is 100px 1fr auto); the
   track collapses for posts with no featured image. Hidden on small screens. */
.pbd-archive-row .pbd-archive-thumb { width: 148px; margin: 0; align-self: center; }
.pbd-archive-row .pbd-archive-thumb a { display: block; line-height: 0; }
.pbd-archive-row .pbd-archive-thumb img {
  width: 148px; height: 96px; object-fit: cover; border-radius: 8px; display: block;
}
@media (max-width: 640px) {
  .pbd-archive-row { grid-template-columns: 72px 1fr; }
  .pbd-archive-row .pbd-archive-thumb { display: none; }
}

/* v0.4.11 — post-card divider line: the original border sat under the author
   byline (now removed); relocate it between the cat·date meta and the title
   (the body is flex column gap:10px, so a meta border-bottom reads as a clean
   rule above the heading). */
.pbd-post-card .pbd-meta {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pbd-border);
}