/*
Theme Name: Retrospect PHT
Description: Child theme of Retrospect with SCF custom fields support.
Template: retrospect-wpcom
Version: 1.0.5
*/

p:empty { margin: 0; padding: 0; line-height: 0; }

.wp-block-column .is-position-sticky {
  position: relative !important;
  top: auto !important;
}

/* .pht-menu-toggle/.pht-mobile-nav only ever show inside the mobile media
   query below -- hidden by default (must come BEFORE that media query in
   source order so its display:flex/flex override actually wins there). */
.pht-menu-toggle,
.pht-mobile-nav {
  display: none;
}

/* Mobile: keep header/nav on top, but push the sidebar widget content
   (tights-for-sale, recent posts, about, social) below the main content
   instead of stacking it above, per user request.

   Each wp:template-part block (header, sidebar) renders wrapped in its own
   <div class="wp-block-template-part"> -- that wrapper sits BETWEEN the
   sticky column group and the header/sidebar's own root .wp-block-group,
   so a selector expecting .wp-block-group as a direct child never matches
   it (confirmed via computed-style inspection: order was 0 everywhere,
   this rule was silently not applying at all). Target
   .wp-block-template-part directly instead. */
@media (max-width: 781px) {
  .wp-block-columns.alignwide > .wp-block-column:first-child,
  .wp-block-columns.alignwide > .wp-block-column:first-child > .wp-block-group {
    display: contents;
  }
  .wp-block-columns.alignwide > .wp-block-column:first-child > .wp-block-group > .wp-block-template-part:first-child {
    order: 1;
    flex-basis: 100%;
  }
  .wp-block-columns.alignwide > .wp-block-column:last-child {
    order: 2;
  }
  .wp-block-columns.alignwide > .wp-block-column:first-child > .wp-block-group > .wp-block-template-part:last-child {
    order: 3;
    flex-basis: 100%;
  }

  /* Sidebar shop products ("tights for sale"): 2 per row instead of a
     single stacked column, now that this block is full-width at the
     bottom of the page on mobile. Social links live right after this
     grid (moved from the header into this same template part) so they
     land as the very last thing on the page, not between the sidebar and
     the blog posts above it. */
  .pht-sidebar-shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .pht-sidebar-shop-grid article {
    margin-bottom: 0;
  }
  .wp-block-columns.alignwide > .wp-block-column:first-child .wp-block-social-links {
    margin-top: 16px;
  }

  /* Header: title + hamburger menu on one row, matching the shop's
     compact header bar (Header.astro). Tagline hidden here to keep it
     minimal like the shop's header -- social links are no longer part of
     the header at all (moved into the sidebar, see above), so nothing to
     hide for those. The header template-part is already a real flex ITEM
     in the outer column flex context (order:1 above); it doubles as a
     flex CONTAINER here for its own children. Desktop keeps the existing
     narrow-sidebar nav untouched since this whole block is mobile-only. */
  .wp-block-columns.alignwide > .wp-block-column:first-child > .wp-block-group > .wp-block-template-part:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid #dddddd;
    background: #fff;
  }
  .wp-block-template-part:first-child .wp-block-group.alignfull {
    padding: 0;
  }
  .wp-block-template-part:first-child .wp-block-site-title {
    font-size: 20px;
    margin: 0;
  }
  .wp-block-template-part:first-child .wp-block-site-tagline {
    display: none;
  }
  /* WP core's navigation block renders as a fullscreen modal overlay on
     mobile (its own responsive/overlayMenu behavior) -- restyling that to
     look and animate exactly like the shop's compact dropdown fights the
     framework's own JS-driven dialog structure. Simpler and more reliable:
     hide it entirely on mobile and use the .pht-menu-toggle/.pht-mobile-nav
     pair injected into the header content instead (see wp:html block in
     the header template part) -- a literal port of Header.astro's
     .menu-toggle/.mobile-nav markup, CSS and toggle script, so mobile
     matches the shop exactly. Desktop is untouched: wp:navigation still
     renders its normal inline vertical link list there (only mobile
     viewports trigger core's overlay mode in the first place). */
  .wp-block-template-part:first-child .wp-block-navigation {
    display: none;
  }
  .wp-block-template-part:first-child {
    position: relative;
  }
  .pht-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 0;
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
  }
  .pht-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #333333;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .pht-menu-open .pht-menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .pht-menu-open .pht-menu-toggle span:nth-child(2) {
    opacity: 0;
  }
  .pht-menu-open .pht-menu-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .pht-mobile-nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid #dddddd;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
    z-index: 30;
  }
  .pht-menu-open .pht-mobile-nav {
    display: flex;
  }
  .pht-mobile-nav a {
    padding: 14px 20px;
    color: #333333;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #dddddd;
  }
  .pht-mobile-nav a:last-child {
    border-bottom: none;
  }
}

/* Footer: replaces the default "Designed with WordPress" line with a
   copyright line styled like the shop's footer (Footer.astro). */
.pht-footer {
  border-top: 1px solid #dddddd;
  margin-top: 48px;
  padding: 24px 20px;
  text-align: center;
}
.pht-footer-copyright {
  margin: 0;
  font-size: 12px;
  font-family: 'Figtree', sans-serif;
  color: #777777;
}