/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * Sticky header + long hamburger menus: keep items reachable on phones.
 * Header bar is h-20 / 5rem. This file is served by Propshaft without a
 * Tailwind build, so the rule applies in CI system tests as well as production.
 *
 * Hide desktop nav below md. Clip the 72px logo to the 5rem bar only on
 * phones. Do not clip at md+: desktop More and user-initials dropdowns are
 * absolutely positioned children of this bar (#644). Do not define a global
 * `.hidden` utility here: that would change visibility of every Stimulus-
 * toggled panel in the Propshaft-only CI path.
 */
@media (max-width: 767px) {
  header[role="banner"] nav[aria-label="Main navigation"],
  header[role="banner"] [data-desktop-user-nav] {
    display: none;
  }

  .mobile-nav-bar {
    overflow: hidden;
  }
}

@media (min-width: 768px) {
  .mobile-nav-bar {
    overflow: visible;
  }
}

.mobile-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
}

@media (max-width: 767px) {
  .mobile-nav-bar img {
    height: 72px;
    width: auto;
  }
}

@media (min-width: 768px) {
  .mobile-nav-bar img {
    height: 3.5rem;
    width: auto;
  }
}

.mobile-nav-panel {
  max-height: calc(100vh - 5rem);
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/*
 * Body scroll lock while the hamburger is open. Do not rely on Tailwind's
 * overflow-hidden utility: CI system tests load this Propshaft file without
 * a Tailwind build. Shared overlays also use this class via scroll_lock.js.
 */
.mobile-nav-body-lock {
  overflow: hidden;
}

/* Agenda plans: headings and leader notes, without styling every prose page. */
.agenda-prose h1,
.agenda-prose h2,
.agenda-prose .trix-content h1 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: #312e81;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.25rem;
}

.agenda-prose h1:first-of-type,
.agenda-prose h2:first-of-type {
  margin-top: 0;
}

.agenda-prose p,
.agenda-prose li {
  line-height: 1.6;
}

.agenda-prose p {
  margin: 0.5rem 0;
}

.agenda-prose ul,
.agenda-prose ol {
  margin: 0.5rem 0 0.75rem 1.25rem;
}

.agenda-prose ul {
  list-style: disc;
}

.agenda-prose ol {
  list-style: decimal;
}

.agenda-prose li {
  margin: 0.25rem 0;
}

.agenda-prose blockquote,
.agenda-prose .trix-content blockquote {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid #4338ca;
  background: #eef2ff;
  color: #1f2937;
}

.agenda-prose blockquote p,
.agenda-prose .trix-content blockquote p {
  margin: 0;
}

/*
 * Avery 5395 adhesive name badges: 3-3/8 in × 2-1/3 in, 8 per US Letter sheet.
 * Print dialog must be Letter, actual size, headers and footers off.
 */
.name-tag-page {
  width: 8.5in;
  height: 11in;
  box-sizing: border-box;
  padding: 0.55in 0.6875in;
  display: grid;
  grid-template-columns: 3.375in 3.375in;
  grid-template-rows: repeat(4, calc(7in / 3));
  column-gap: 0.375in;
  row-gap: 0.19in;
  break-after: page;
  page-break-after: always;
}

.name-tag-page:last-child {
  break-after: auto;
  page-break-after: auto;
}

.name-tag {
  box-sizing: border-box;
  width: 3.375in;
  height: calc(7in / 3);
  padding: 0.15in;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.name-tag-guide {
  outline: 1px dashed #d1d5db;
}

.name-tag-first {
  margin: 0;
  font-size: 28pt;
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.name-tag-last {
  margin: 0.08in 0 0;
  font-size: 16pt;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.name-tag-place {
  margin: 0.1in 0 0;
  font-size: 11pt;
  line-height: 1.2;
  color: #374151;
  overflow-wrap: anywhere;
}

@media print {
  @page {
    size: letter;
    margin: 0;
  }

  .name-tag-screen-only,
  .name-tag-guide {
    outline: none;
  }

  .name-tag-screen-only {
    display: none !important;
  }

  body:has(.name-tag-page) #main-content {
    max-width: none;
    width: 8.5in;
    margin: 0;
    padding: 0;
  }
}