/* v3.7.313: Position .wtpp-header-icons in its new home
   (.site-header-main). The strip is moved here on mobile
   by wtpp-header-icons.js (pickStripParent function); on
   desktop it stays inside .page-nav.

   ORIGINAL v3.7.313 BEHAVIOR (replaced in v3.7.385):
   Absolutely positioned the strip at top:10 right:16 of the
   brand row so it was visible on mobile (where .page-nav is
   display:none). That worked for visibility but caused the
   strip to overlap the brand title — Jason’s screenshot
   in v3.7.385 review showed the icons on top of "We The
   People".

   v3.7.385 BEHAVIOR: in-flow positioning. The strip becomes
   the last child of .site-header-main on mobile, rendering
   as its own left-aligned row just above the tricolor band.
   No more overlap; the strip has its own space. */

.site-header-main {
  position: relative;
}
.site-header-main > .wtpp-header-icons {
  /* In-flow: render as the last child of .site-header-main,
     its own row immediately above the tricolor band.
     v3.7.553: packs toward the menu side (justify-content:
     flex-end). In the default Right mode (normal order) that
     hugs the right edge; in Left mode the row-reverse from
     wtpp-header-icons-styles.css makes flex-end hug the left
     edge instead. Packing toward the menu side also keeps the
     Site menu (outermost icon) visible if the row is still
     tight on a very narrow screen.
     !important is preserved on the layout properties so this
     rule wins over any earlier authored rules anywhere on
     the page. */
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px 10px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 540px) {
  /* Small viewports: tighten so all ten icons fit one row.
     30px buttons + 4px gap + 8px side padding -> ~336px of
     content, which fits a ~360px phone with room to spare. */
  .site-header-main > .wtpp-header-icons {
    padding: 6px 8px 10px !important;
    gap: 4px !important;
  }
  .site-header-main > .wtpp-header-icons .wtpp-header-icon-btn {
    width: 30px !important;
    height: 30px !important;
  }
  .site-header-main > .wtpp-header-icons .wtpp-header-icon-btn svg {
    width: 15px !important;
    height: 15px !important;
  }
}

@media (max-width: 360px) {
  /* Narrowest phones: tighter still (28px + 3px gap + 6px pad
     -> ~307px content) so ten icons fit down to ~320px wide. */
  .site-header-main > .wtpp-header-icons {
    padding: 6px 6px 10px !important;
    gap: 3px !important;
  }
  .site-header-main > .wtpp-header-icons .wtpp-header-icon-btn {
    width: 28px !important;
    height: 28px !important;
  }
  .site-header-main > .wtpp-header-icons .wtpp-header-icon-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
}