/* ─── Mobile-Friendly: Header, Footer, Nav Popup, Subnav ──────────────────── */

/* ─── Header (#4694) ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Force header into single row */
  #brxe-qzagia {
    height: 56px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  /* Header child containers: shrink to fit in one row */
  #brxe-qzagia > .brxe-container {
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  /* Search icon container: left-align, minimal width */
  #brxe-qzagia > .brxe-container:first-child {
    flex: 0 0 auto !important;
  }
  /* Logo container: center, take remaining space */
  #brxe-qzagia > .brxe-container:nth-child(2) {
    flex: 1 1 auto !important;
    justify-content: center !important;
  }
  /* Right controls (dark mode + hamburger): right-align */
  #brxe-djawlp {
    flex: 0 0 auto !important;
    gap: 5px !important;
  }
  /* Scale logo on mobile — keep aspect ratio */
  #brxe-djoyhl {
    max-width: 100px;
    margin-left: 0 !important;
  }
  #brxe-djoyhl img {
    object-fit: contain !important;
    width: auto !important;
    max-height: 40px !important;
  }
  /* Dark mode toggle: keep original size, use padding for tap target */
  .toggle-dark-mode {
    padding: 7px 0 !important;
  }
  /* Burger menu icon only — not the dark mode icon */
  .burger-menu-toggle {
    font-size: 28px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Reading progress bar: adjust for smaller header */
  #brxe-nzyrlb {
    transform: translateY(56px) !important;
  }
}

/* ─── Footer (#4734) ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Stack footer columns vertically */
  #brxe-dxrwzh {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 20px 15px !important;
  }
  /* Center social icons */
  #brxe-bcyahr {
    justify-content: center !important;
  }
  /* Center Patreon */
  #brxe-xdryuk {
    justify-content: center !important;
    text-align: center;
  }
  /* Center copyright */
  #brxe-knggrw {
    justify-content: center !important;
    text-align: center;
    flex-direction: column !important;
    align-items: center !important;
  }
  #brxe-uqdiwb {
    text-align: center !important;
    font-size: 12px !important;
  }
}

/* ─── Nav Popup (#4722) ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Stack 4-column nav into 2 columns */
  .brx-popup.brxe-popup-4722 #brxe-ferdfy {
    flex-wrap: wrap !important;
    gap: 20px !important;
  }
  .brx-popup.brxe-popup-4722 #brxe-ferdfy > .brxe-container {
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
  /* Ensure links are tappable */
  .brx-popup.brxe-popup-4722 .brxe-text-link {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
  }
  /* Make popup scrollable */
  .brx-popup.brxe-popup-4722 .brx-popup-content {
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 20px 15px !important;
  }
}

@media (max-width: 480px) {
  /* Single column on very small screens */
  .brx-popup.brxe-popup-4722 #brxe-ferdfy > .brxe-container {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ─── Subnav (#4968) ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Make horizontally scrollable */
  #subnav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  #subnav::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  /* Prevent links from shrinking */
  #subnav .subnav-link,
  #subnav > .brxe-text-link {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 14px !important;
    padding: 6px 12px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ─── General Mobile Improvements ────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Ensure Bricks sections don't overflow */
  .brxe-section {
    overflow-x: hidden;
  }
  /* Better tap targets for interactive elements (exclude header toggle icon) */
  .brxe-icon[data-interaction]:not(.toggle-dark-mode .brxe-icon),
  .brxe-text-link {
    min-width: 44px;
    min-height: 44px;
  }
}