/* osprey.css — Osprey standard base stylesheet.
 * Loaded (via the base head templates) BEFORE each site's aws-<site>.css, so any
 * site can override these framework defaults in its own stylesheet.
 * Cross-site structural / responsive defaults only.
 * NOTE: mobile rules use !important deliberately — they must beat site utility
 * classes (.d-flex, .site-nav display:flex) and the .no-left/.no-right grid
 * modifiers, which otherwise win by specificity/order. Updated 2026-07-24. */

/* Content should never sit against the container edge. */
.page-grid .section { padding: 1rem; box-sizing: border-box; }
.content { padding: .75rem 1rem; box-sizing: border-box; }

/* Content images must never overflow their column (mobile + desktop). */
.page-grid__main img, .content img, .page-grid__left img { max-width: 100%; height: auto; }

/* Hamburger toggle — hidden on desktop, shown on mobile (see media query). */
.nav-burger {
  display: none; margin-left: auto;
  font-size: 1.8rem; line-height: 1; padding: .1rem .6rem;
  background: none; border: 0; cursor: pointer; color: inherit;
}

/* ===================== Mobile: phones & narrow (<=768px) ===================== */
@media (max-width: 768px) {
  /* Header: logo top-left, hamburger top-right, search on its own full-width row. */
  .site-header__top { flex-wrap: wrap; align-items: center; }
  .nav-burger { display: inline-block; order: 2; }
  .site-header__search { flex: 1 1 100% !important; order: 3; margin-left: 0 !important; }

  /* Admin edit buttons hidden on mobile even for ITSUS (beats .d-flex). */
  .site-header__edit, .itsus { display: none !important; }

  /* mhr's header title block (company + page H1) declutters on mobile so the
     header matches the standard logo-left / hamburger-right / search-row layout. */
  .site-header__title { display: none !important; }

  /* Nav collapses behind the hamburger. All sites use <nav class="site-nav">;
     some wrap it in .header_nav, some don't — target .site-nav directly. */
  .site-nav { display: none !important; }
  #wrapper.nav-open .site-nav { display: flex !important; flex-direction: column; align-items: stretch; }
  .site-nav .nav-drop { width: 100%; }
  .nav-drop[open] > .drop-menu,
  .nav-drop[open] > .drop-menu.wide {
    position: static !important; min-width: 0 !important; max-width: 100% !important;
    box-shadow: none; border: 0; padding-left: 1rem;
  }

  /* Single column so content gets full width — beats the .no-left/.no-right fixed tracks. */
  .page-grid,
  .page-grid.no-left,
  .page-grid.no-right,
  .page-grid.no-left.no-right {
    grid-template-columns: 1fr !important;
    grid-template-areas: "title" "main" "left" "right" "foot" !important;
  }
  .product-grid,
  .product-grid.no-aside {
    grid-template-columns: 1fr !important;
    grid-template-areas: "main" "aside" !important;
  }
  /* mhr mode uses a custom .mhr-grid (150px left + main) — collapse it too. */
  .mhr-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "main" "left" "foot" !important;
  }
}

/* ===================== Phone portrait (<=600px): drop the Etsy side ads ====== */
@media (max-width: 600px) {
  .page-grid__right,
  .product-grid__aside { display: none !important; }
}