/* ================================================================
   responsive.css — DESKTOP-ONLY enhancements (min-width breakpoints),
   e.g. the compact desktop hero. Per an explicit site-owner request, this
   site intentionally shows the SAME desktop layout at every screen size —
   the mobile-narrowing (max-width) overrides that used to live here
   (hamburger nav, stacked hero, 1-column grids, etc.) have been removed,
   and index.html's viewport meta tag is fixed-width rather than
   device-width, so phones render (and auto-zoom-to-fit) this same desktop
   layout instead of a native mobile one.
   ================================================================ */


    /* Roomier version once there's real width to spare (matches the
       reference logo/contact-bar mockup), kept in the site's own navy theme. */
    @media (min-width: 640px) {
      .logo-icon { width: 58px; height: 58px; border-radius: 15px; font-size: 22px; }
      .logo-icon.logo-icon-custom { height: 54px; max-width: 90px; }
      .logo-text .top { font-size: 26px; letter-spacing: 0; }
      .logo-text .bottom { font-size: 13px; gap: 8px; }
      .logo-text .bottom::before, .logo-text .bottom::after { width: 18px; }
      .logo-divider { width: 1.5px; margin: 0 4px; }
      .header-contact { gap: 32px; }
      .header-contact-item { gap: 10px; }
      .header-contact-item .hc-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }
      .header-contact-item .hc-text a, .header-contact-item .hc-text span.hc-main { font-size: 15.5px; }
      .header-contact-item .hc-text small { font-size: 11.5px; }
    }


    /* nav ul li a sizing is now set directly in main.css (comfortable at
       >=1280px) with a separate 901–1279px tightening rule further below —
       this is no longer a separate >=640px bump, since mobile never
       actually renders at a narrow CSS width any more (see the file header
       comment above). .nav-utility sizing stays at its one comfortable
       size, same at every width now. */
    @media (min-width: 640px) {
      .nav-utility { gap: 8px; padding: 8px 0 8px 14px; margin-left: 4px; }
      .nav-utility button { width: 40px; height: 40px; font-size: 15px; }
    }


    /* ---- STEP 1: Desktop-only hero compaction (>900px, i.e. tablet-landscape
       and up — the stacked mobile/tablet layout above is untouched). Cuts the
       hero's own vertical footprint by ~30% (tighter section padding, a
       smaller-but-proportional photo frame since its aspect-ratio is fixed,
       and slightly tighter text spacing) without changing colors, the photo,
       or the overall composition. Every value here is a fixed px/%, and the
       hero's own text/image proportions are fixed px/%, independent of
       .container's max-width, so it still looks the same (and doesn't keep
       growing) at 1024, 1366 and 1920 even though .container itself is now
       much wider (near edge-to-edge) than it used to be. ---- */
    @media (min-width: 901px) {
      .hero { padding: 26px 0 24px; }
      .hero-grid { gap: 30px; }
      .hero-visual { min-height: 300px; }
      .hero-photo-frame { width: 58%; margin: 3% 6% 0 auto; }
      .hero .eyebrow { margin-bottom: 10px; }
      .hero h1 { font-size: 33px; margin-bottom: 10px; }
      .hero p.lead { margin-bottom: 16px; }
      .hero-buttons { margin-bottom: 12px; }
    }


@media(min-width:901px){
  #admCollapseTab{display:flex;align-items:center;gap:6px;}
  .adm-sidebar.adm-collapsed{display:none;}
}

/* Narrow-desktop nav fit: a 1024px-wide browser window (not a phone — those
   are locked to the desktop viewport via index.html's fixed viewport meta,
   so they land in the >=1280px rule above) doesn't have room for all 9 nav
   items at the normal comfortable size without the overflow-x scrollbar
   kicking in. This tightens spacing/size just enough that it still doesn't
   need to scroll, while >=1280px keeps the larger, more readable sizing. */
@media (min-width: 901px) and (max-width: 1279px) {
  nav ul { font-size: 11px; gap: 1px; }
  nav ul li a { padding: 7px 8px; gap: 4px; }
  nav ul li a i { font-size: 15px; }
}