/* ==========================================================
   P19.2.1 — MOBILE MENU VISUAL UPGRADE
   Presentation only. P19.1.4 drawer geometry remains authority.
   ========================================================== */

.mobile-drawer-brand,
.mobile-drawer-section-label,
.mobile-drawer-actions{display:none}

@media(max-width:860px){
  /* Keep proven P19.1.4 geometry; improve only the surface treatment. */
  body > .primary-nav.sy-mobile-drawer{
    padding:0!important;
    background:
      radial-gradient(circle at 100% 0,rgba(47,155,255,.10),transparent 34%),
      linear-gradient(180deg,#fbfdff 0,#fff 24%,#f9fbfd 100%)!important;
    border-left:1px solid rgba(191,209,222,.82)!important;
    box-shadow:-24px 18px 60px rgba(11,31,51,.18)!important;
    scrollbar-width:thin;
    scrollbar-color:#cad9e5 transparent
  }

  /* Drawer identity. Sticky only inside the already-fixed drawer. */
  body > .primary-nav.sy-mobile-drawer .mobile-drawer-brand{
    display:flex;
    align-items:center;
    gap:11px;
    position:sticky;
    top:0;
    z-index:3;
    min-height:72px;
    padding:13px 14px 12px;
    background:rgba(251,253,255,.94);
    border-bottom:1px solid rgba(216,229,239,.9);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px)
  }
  .mobile-drawer-brandmark{
    display:grid;
    place-items:center;
    flex:0 0 40px;
    width:40px;
    height:40px;
    border-radius:13px;
    color:#fff;
    background:linear-gradient(145deg,#0d5fa5,#2f9bff);
    box-shadow:0 8px 20px rgba(47,155,255,.25)
  }
  .mobile-drawer-brandmark svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
  }
  .mobile-drawer-brandcopy{
    display:flex;
    flex-direction:column;
    min-width:0;
    line-height:1.15
  }
  .mobile-drawer-brandcopy strong{
    color:var(--navy);
    font-size:.95rem;
    font-weight:900;
    letter-spacing:-.02em
  }
  .mobile-drawer-brandcopy small{
    margin-top:4px;
    color:#71869a;
    font-size:.71rem;
    font-weight:700
  }

  body > .primary-nav.sy-mobile-drawer .mobile-drawer-section-label{
    display:block;
    margin:12px 14px 5px;
    color:#8a9aac;
    font-size:.65rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase
  }

  /* Premium menu rows. No change to drawer dimensions or positioning. */
  body > .primary-nav.sy-mobile-drawer ul{
    gap:4px!important;
    padding:0 10px 8px!important
  }
  body > .primary-nav.sy-mobile-drawer li{position:relative}
  body > .primary-nav.sy-mobile-drawer li>a{
    position:relative;
    min-height:44px!important;
    padding:8px 39px 8px 12px!important;
    border:1px solid transparent!important;
    border-radius:12px!important;
    color:#263e53!important;
    background:transparent!important;
    font-size:.9rem!important;
    font-weight:800!important;
    letter-spacing:-.01em;
    transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease!important
  }
  body > .primary-nav.sy-mobile-drawer li>a::after{
    content:"›"!important;
    display:grid!important;
    place-items:center;
    position:absolute;
    right:9px;
    top:50%;
    width:24px;
    height:24px;
    margin:0!important;
    border-radius:8px;
    background:#edf3f8;
    color:#6f8497;
    font-size:1.1rem;
    font-weight:700;
    line-height:1;
    transform:translateY(-50%)!important;
    opacity:1!important
  }
  body > .primary-nav.sy-mobile-drawer li>a:hover,
  body > .primary-nav.sy-mobile-drawer li>a:focus-visible{
    color:#0c5c9f!important;
    background:#f2f8fd!important;
    border-color:#d9ebf8!important;
    outline:none;
    box-shadow:0 5px 16px rgba(11,31,51,.055)
  }
  body > .primary-nav.sy-mobile-drawer li>a:hover::after,
  body > .primary-nav.sy-mobile-drawer li>a:focus-visible::after{
    background:#dff1ff;
    color:#0c6db7
  }
  body > .primary-nav.sy-mobile-drawer .current-menu-item>a,
  body > .primary-nav.sy-mobile-drawer .current_page_item>a,
  body > .primary-nav.sy-mobile-drawer .current-menu-ancestor>a{
    color:#075b9e!important;
    background:linear-gradient(90deg,#eaf6ff,#f5fbff)!important;
    border-color:#cce9fb!important;
    box-shadow:inset 3px 0 0 #2f9bff,0 5px 16px rgba(11,31,51,.045)
  }
  body > .primary-nav.sy-mobile-drawer .current-menu-item>a::after,
  body > .primary-nav.sy-mobile-drawer .current_page_item>a::after,
  body > .primary-nav.sy-mobile-drawer .current-menu-ancestor>a::after{
    background:#2f9bff;
    color:#fff
  }

  /* Conversion block replaces the hidden bottom bar while menu is open. */
  body > .primary-nav.sy-mobile-drawer .mobile-drawer-actions{
    display:block;
    margin:5px 10px 0;
    padding:12px 0 calc(14px + env(safe-area-inset-bottom));
    border-top:1px solid #e1ebf2
  }
  body > .primary-nav.sy-mobile-drawer .mobile-drawer-primary{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-height:58px!important;
    padding:9px 11px!important;
    color:#fff!important;
    background:linear-gradient(135deg,#0e7d55,#12a66f)!important;
    border:0!important;
    border-radius:14px!important;
    box-shadow:0 10px 24px rgba(18,166,111,.22)!important
  }
  body > .primary-nav.sy-mobile-drawer .mobile-drawer-primary::after{display:none!important}
  .mobile-drawer-action-icon{
    display:grid;
    place-items:center;
    flex:0 0 34px;
    width:34px;
    height:34px;
    border-radius:11px;
    background:rgba(255,255,255,.16)
  }
  .mobile-drawer-action-icon svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round
  }
  .mobile-drawer-primary>span:nth-child(2){display:flex;flex:1;min-width:0;flex-direction:column;line-height:1.15}
  .mobile-drawer-primary strong{font-size:.85rem;font-weight:900}
  .mobile-drawer-primary small{margin-top:3px;color:rgba(255,255,255,.82);font-size:.68rem;font-weight:700}
  .mobile-drawer-primary b{font-size:1.05rem;font-weight:800}

  .mobile-drawer-meta{
    display:grid;
    gap:5px;
    margin-top:8px
  }
  .mobile-drawer-meta>a,
  .mobile-drawer-meta>span{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    min-height:31px!important;
    padding:4px 7px!important;
    color:#657c90!important;
    background:transparent!important;
    border:0!important;
    border-radius:8px!important;
    font-size:.72rem!important;
    font-weight:750!important
  }
  .mobile-drawer-meta>a::after{display:none!important}
  .mobile-drawer-meta svg{
    width:14px;
    height:14px;
    flex:0 0 14px;
    fill:none;
    stroke:#2f9bff;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
  }

  /* Real dim/blur backdrop; P19.1.4 click-to-close behaviour is unchanged. */
  .mobile-menu-backdrop{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:10010!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:rgba(8,24,39,.35)!important;
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease,visibility .18s ease!important
  }
  html.sy-menu-open .mobile-menu-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto
  }

  /* More polished toggle surface; dimensions remain P19.1.4 authority. */
  .menu-toggle{
    border-color:#d6e5f0!important;
    background:linear-gradient(180deg,#fff,#f8fbfd)!important;
    box-shadow:0 5px 14px rgba(11,31,51,.06)!important;
    transition:background .16s ease,border-color .16s ease,box-shadow .16s ease!important
  }
  .menu-toggle[aria-expanded="true"]{
    border-color:#b9dcf4!important;
    background:#eef8ff!important;
    box-shadow:0 6px 16px rgba(47,155,255,.13)!important
  }
  .menu-toggle[aria-expanded="true"]>span:not(.screen-reader-text){background:#0c6db7!important}
}

@media(max-width:380px){
  body > .primary-nav.sy-mobile-drawer .mobile-drawer-brand{min-height:68px;padding:11px 12px 10px}
  .mobile-drawer-brandmark{flex-basis:37px;width:37px;height:37px;border-radius:12px}
  body > .primary-nav.sy-mobile-drawer .mobile-drawer-section-label{margin-inline:12px}
  body > .primary-nav.sy-mobile-drawer ul{padding-inline:8px!important}
  body > .primary-nav.sy-mobile-drawer li>a{min-height:42px!important;font-size:.86rem!important}
  body > .primary-nav.sy-mobile-drawer .mobile-drawer-actions{margin-inline:8px}
}

@media(prefers-reduced-motion:reduce){
  .mobile-menu-backdrop,
  .menu-toggle,
  body > .primary-nav.sy-mobile-drawer li>a{transition:none!important}
}

/* ==========================================================
   P19.2.2 — MENU ARROW / LABEL COLLISION HOTFIX
   Root cause: main.css keeps .primary-nav a { white-space: nowrap; }
   Reserve a real grid column for the chevron instead of overlaying it.
   ========================================================== */
@media(max-width:860px){
  body > .primary-nav.sy-mobile-drawer li>a:not(.mobile-drawer-primary):not(.mobile-drawer-meta>a){
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 24px!important;
    align-items:center!important;
    column-gap:10px!important;
    padding:8px 10px 8px 12px!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
  }

  body > .primary-nav.sy-mobile-drawer li>a:not(.mobile-drawer-primary):not(.mobile-drawer-meta>a)::after{
    position:static!important;
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    right:auto!important;
    top:auto!important;
    margin:0!important;
    transform:none!important;
  }
}