/* ============================================================
   enhancements.css — cross-device & cross-browser layer
   Loaded AFTER each page's inline <style> so it can refine it.
   Covers: mobile nav drawer, touch targets, safe-area insets,
   tablet refinements. (Vendor prefixes for backdrop-filter /
   mask-image are applied inline in each page.)
   ============================================================ */

/* Drawer + backdrop are injected by site.js; hidden by default */
.m-drawer, .m-backdrop { display: none; }

@media (max-width: 980px) {
  /* --- Hamburger: real 44x44 touch target --- */
  .nav-burger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }

  /* --- Backdrop --- */
  .m-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(1, 22, 59, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  /* --- Slide-in drawer --- */
  .m-drawer {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    width: min(82vw, 360px);
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.2, .7, .2, 1);
  }
  .m-drawer-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--navy-700, #01163b);
    padding: calc(16px + env(safe-area-inset-top)) 22px
             calc(22px + env(safe-area-inset-bottom))
             max(22px, env(safe-area-inset-right));
    box-shadow: -20px 0 60px rgba(0, 0, 0, .4);
    overflow-y: auto;
  }
  .m-drawer-close {
    align-self: flex-end;
    width: 44px;
    height: 44px;
    font-size: 30px;
    line-height: 1;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
  }
  .m-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
  }
  .m-drawer-links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 6px 12px;
    border-radius: 8px;
    color: #fff;
    font-family: var(--font-display, system-ui, sans-serif);
    font-weight: 600;
    font-size: 17px;
    text-decoration: none;
  }
  .m-drawer-links a:hover,
  .m-drawer-links a.active { background: rgba(255, 255, 255, .08); }
  .m-drawer-cta {
    margin-top: 16px;
    justify-content: center;
    text-align: center;
  }

  body.m-open { overflow: hidden; }
  body.m-open .m-drawer { transform: translateX(0); }
  body.m-open .m-backdrop { opacity: 1; pointer-events: auto; }

  /* --- Safe-area for the sticky bar in landscape (notch phones) --- */
  .nav-in {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }

  /* --- Comfortable tap size for primary buttons on touch --- */
  .btn { min-height: 44px; }
}

/* Small phones: the in-bar CTA lives in the drawer, free up space */
@media (max-width: 560px) {
  .nav-right > .btn { display: none; }
}

/* Never let the drawer leak onto desktop */
@media (min-width: 981px) {
  .m-drawer, .m-backdrop { display: none !important; }
  body.m-open { overflow: auto; }
}

/* Guard against accidental horizontal overflow from wide media */
img, svg, video, table { max-width: 100%; }

/* Proposal form status message */
.form-status {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
}
.form-status.is-ok  { color: #d6f0e2; background: rgba(31,138,91,.18); border: 1px solid rgba(31,138,91,.4); }
.form-status.is-err { color: #ffd9d2; background: rgba(186,0,0,.18); border: 1px solid rgba(186,0,0,.45); }