/* Pathways & Outcomes — mobile-first overrides */

/* Mobile nav drawer + backdrop (mobile-nav.js) */
.po-nav-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.po-nav-backdrop--visible {
  opacity: 1;
  pointer-events: auto;
}

body.po-nav-open {
  overflow: hidden;
}

@media (max-width: 639px) {
  /* Prevent horizontal page scroll */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* Responsive type scale */
  .text-display-lg,
  .font-display-lg.text-display-lg {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
  }

  .text-headline-lg,
  .font-headline-lg.text-headline-lg {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }

  /* Compact site header */
  header .font-headline-lg.text-headline-lg {
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }

  .po-header-cta {
    padding: 0.5rem 0.75rem !important;
    font-size: 10px !important;
    white-space: nowrap;
  }

  /* Touch-friendly menu icon */
  header .material-symbols-outlined.cursor-pointer {
    padding: 0.5rem;
    margin: -0.5rem;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Hero / primary CTAs full width */
  .po-hero-ctas {
    flex-direction: column;
    width: 100%;
    max-width: 20rem;
  }

  .po-hero-ctas a {
    width: 100%;
    text-align: center;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Horizontally scrollable tab bars */
  .po-tabs-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 1.25rem !important;
    padding-left: 0;
    padding-right: 0;
  }

  .po-tabs-scroll::-webkit-scrollbar { display: none; }

  .po-tabs-scroll .type-tab,
  .po-tabs-scroll button[type="button"] {
    min-height: 44px;
    flex-shrink: 0;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  /* Filter sidebar: touch targets */
  aside label.flex.items-center {
    min-height: 44px;
    padding: 0.25rem 0;
  }

  aside input[type="checkbox"],
  aside input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
  }

  aside button,
  aside .bg-primary {
    min-height: 44px;
  }

  /* Publication list cards: consistent padding on small screens */
  .publication-card .flex-1,
  article.group.flex .flex-1 {
    padding: 1.25rem !important;
  }

  /* Newsletter / forms */
  form.flex-col input,
  form.flex-col button,
  #newsletter input,
  #newsletter button {
    min-height: 48px;
    width: 100%;
  }

  /* Brand board: horizontal section nav on mobile */
  .bb-nav-mobile {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #CBD5E0;
  }

  .bb-nav-mobile::-webkit-scrollbar { display: none; }

  .bb-nav-mobile a {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    background: #F7FAFC;
    border: 1px solid #CBD5E0;
    font-size: 10px !important;
  }

  .bb-nav-desktop { display: none; }

  /* Code blocks */
  pre, code {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  pre {
    max-width: 100%;
    padding: 0.75rem !important;
  }

  /* Trust / donate rows */
  .po-stack-mobile {
    flex-direction: column !important;
    text-align: center;
  }

  .po-stack-mobile a,
  .po-stack-mobile button {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Featured insight stat */
  .po-feature-stat {
    font-size: 2.75rem !important;
  }

  /* Topic chips: comfortable tap targets */
  .po-topic-chips a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Audience cards: full-width tap on narrow screens */
  .grid.grid-cols-1.md\:grid-cols-3 > a {
    min-height: 44px;
  }

  /* Search inputs */
  input[type="search"],
  input[type="email"],
  select {
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  /* Breadcrumbs wrap */
  nav.flex.items-center.gap-2,
  .po-breadcrumb {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  /* Utah bureau hero — tighter display type on small phones */
  .utah-hero__content h1.font-display-lg {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  /* Series prev/next navigation on publication pages */
  .po-series-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .po-series-nav-link,
  .po-series-nav-link--next {
    max-width: none;
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 0;
    justify-content: flex-start;
    text-align: left;
  }

  .po-series-nav-link--next {
    margin-left: 0;
    justify-content: flex-start;
  }

  .po-series-nav-hub {
    order: -1;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Publication badges wrap cleanly */
  .flex.flex-wrap.gap-2.mb-4 .po-badge {
    max-width: 100%;
  }

  /* Footer links — comfortable tap targets */
  footer nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0;
  }

  /* Data tables scroll horizontally instead of breaking layout */
  .po-data-table-wrap,
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  table.po-data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Inline CTAs and secondary actions */
  .po-content a.font-label-caps,
  .po-content button.font-label-caps {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Safe-area padding for notched devices */
  header.fixed {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }

  footer {
    padding-bottom: max(5rem, calc(5rem + env(safe-area-inset-bottom, 0px)));
  }

  /* Responsive media */
  .po-content img,
  .po-content video,
  .po-content svg:not(.material-symbols-outlined) {
    max-width: 100%;
    height: auto;
  }
}

@media (min-width: 640px) {
  .bb-nav-mobile { display: none; }
}