/* ==========================================================
   P19.1.4 — MOBILE DRAWER ROOT-CAUSE FIX
   Loaded last. Scope: <= 860px only.
   Component redesign remains P19.2.
   ========================================================== */

:root{
  --sy-mobile-header-height:56px;
  --sy-mobile-drawer-top:56px;
  --sy-mobile-actions-height:48px;
  --sy-mobile-gutter:18px;
  --sy-mobile-section-space:56px;
}

.mobile-menu-backdrop{display:none}

@media(max-width:860px){
  html{
    width:100%;max-width:100%;overflow-x:hidden;
    scroll-padding-top:calc(var(--sy-mobile-header-height) + 12px)
  }
  body{
    width:100%;max-width:100%;overflow-x:hidden;
    padding-bottom:calc(var(--sy-mobile-actions-height) + env(safe-area-inset-bottom));
    font-size:16px
  }
  html.sy-menu-open,body.menu-open{overflow:hidden!important;overscroll-behavior:none}
  body.menu-open{touch-action:none}
  main,main>*{min-width:0}
  img,svg,iframe,video{max-width:100%}

  .container{
    width:min(var(--container),calc(100% - (var(--sy-mobile-gutter) * 2)))
  }

  /* Mobile header has one row only. */
  .topbar{display:none!important}
  .site-header,
  .admin-bar .site-header{
    top:0!important;
    z-index:10030;
    min-height:var(--sy-mobile-header-height);
    background:rgba(255,255,255,.99);
    border-bottom:1px solid #dce6ee;
    box-shadow:0 4px 16px rgba(11,31,51,.055);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px)
  }
  .header-inner{
    min-height:var(--sy-mobile-header-height)!important;
    height:var(--sy-mobile-header-height);
    gap:10px
  }
  .brand{min-width:0;max-width:calc(100% - 50px)}
  .brand img,.custom-logo{
    width:auto;max-width:152px;max-height:39px;
    object-fit:contain;object-position:left center
  }
  .brand-word{font-size:1.05rem;line-height:1}
  .header-cta{display:none!important}

  /* Self-contained hamburger. No inherited margins can crop its lines. */
  .menu-toggle{
    display:block!important;
    flex:0 0 40px;width:40px;height:40px;min-width:40px;min-height:40px;
    margin:0 0 0 auto!important;padding:0!important;overflow:visible!important;
    border:1px solid #dce6ee;border-radius:10px;background:#fff;box-shadow:none;
    position:relative;z-index:10020
  }
  .menu-toggle>span:not(.screen-reader-text){
    display:block!important;position:absolute!important;left:50%!important;
    width:18px!important;height:2px!important;margin:0!important;
    background:var(--navy)!important;border-radius:999px!important;
    transform:translateX(-50%);transform-origin:center;
    transition:transform .18s ease,opacity .18s ease,top .18s ease
  }
  .menu-toggle>span:nth-child(1){top:13px!important}
  .menu-toggle>span:nth-child(2){top:19px!important}
  .menu-toggle>span:nth-child(3){top:25px!important}
  .menu-toggle[aria-expanded="true"]>span:nth-child(1){top:19px!important;transform:translateX(-50%) rotate(45deg)}
  .menu-toggle[aria-expanded="true"]>span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"]>span:nth-child(3){top:19px!important;transform:translateX(-50%) rotate(-45deg)}

  /*
     Mobile drawer is portalled by main.js to <body>.
     It must NOT live inside sticky/backdrop-filter .site-header.
     Its top is measured ONCE when opened and then frozen.
  */
  body > .primary-nav.sy-mobile-drawer{
    display:block!important;position:fixed!important;
    z-index:10020!important;
    top:var(--sy-mobile-drawer-top)!important;
    right:0!important;bottom:0!important;left:auto!important;
    width:min(82vw,300px)!important;
    margin:0!important;
    padding:10px 10px calc(16px + env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    overscroll-behavior:contain;
    background:#fff!important;border-left:1px solid #dce6ee;
    box-shadow:-18px 20px 45px rgba(11,31,51,.14)!important;
    visibility:hidden;opacity:0;pointer-events:none;
    transform:translate3d(102%,0,0);
    will-change:transform;
    transition:transform .18s ease,opacity .14s ease,visibility .18s ease!important
  }
  body > .primary-nav.sy-mobile-drawer.is-open{
    visibility:visible;opacity:1;pointer-events:auto;transform:translate3d(0,0,0)
  }
  body > .primary-nav.sy-mobile-drawer ul{
    display:grid!important;gap:2px!important;margin:0!important;padding:0!important
  }
  body > .primary-nav.sy-mobile-drawer li{min-width:0;margin:0!important;padding:0!important}
  body > .primary-nav.sy-mobile-drawer a{
    display:flex!important;align-items:center!important;
    min-height:40px!important;padding:6px 9px!important;
    border:0!important;border-radius:8px!important;
    color:#22394e;font-size:.88rem!important;line-height:1.2!important;font-weight:800;
    white-space:normal!important
  }
  body > .primary-nav.sy-mobile-drawer a:after{display:none!important}
  body > .primary-nav.sy-mobile-drawer a:hover,
  body > .primary-nav.sy-mobile-drawer .current-menu-item>a,
  body > .primary-nav.sy-mobile-drawer .current_page_item>a{
    color:var(--blue);background:#eff8ff
  }

  /* Compact conversion bar. */
  .mobile-actions{
    display:grid!important;grid-template-columns:1fr 1fr;
    position:fixed!important;z-index:9950;left:0;right:0;bottom:0;
    min-height:calc(var(--sy-mobile-actions-height) + env(safe-area-inset-bottom));
    padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)!important;
    background:#fff;border-top:1px solid #d8e3ec;
    box-shadow:0 -6px 22px rgba(11,31,51,.09);
    transition:transform .18s ease,opacity .15s ease
  }
  .mobile-actions a{
    min-width:0;min-height:var(--sy-mobile-actions-height)!important;
    padding:0 9px!important;gap:6px!important;
    font-size:.84rem!important;line-height:1!important
  }
  .mobile-actions svg{width:16px!important;height:16px!important;flex:0 0 auto}
  body.menu-open .mobile-actions{opacity:0;pointer-events:none;transform:translateY(105%)}

  /* Foundation rhythm only. P19.2 will rebuild individual components. */
  .section{padding:var(--sy-mobile-section-space) 0}
  .section-heading{margin-bottom:30px}
  .section-heading h2,.why-copy h2,.faq-intro h2{
    font-size:clamp(1.8rem,6.2vw,2.4rem);line-height:1.08;letter-spacing:-.03em
  }
  .hero h1,.page-hero h1,.service-landing-copy h1,
  .marka-main-hero h1,.marka-brand-hero h1,.marka-product-hero h1{
    font-size:clamp(2.1rem,9vw,3rem);line-height:1.06;letter-spacing:-.04em;overflow-wrap:anywhere
  }
  .btn{min-height:42px;padding-inline:14px}
  input,select,textarea,button{max-width:100%}
  input,select,textarea{font-size:16px}
  .marka-alpha-filter,.table-scroll,.sy-scroll-x{
    max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch
  }
  [id]{scroll-margin-top:calc(var(--sy-mobile-header-height) + 12px)}
}

@media(max-width:620px){
  :root{--sy-mobile-gutter:15px;--sy-mobile-section-space:50px}
  .brand img,.custom-logo{max-width:146px;max-height:38px}
  body > .primary-nav.sy-mobile-drawer{width:min(84vw,292px)!important}
}

@media(max-width:380px){
  :root{--sy-mobile-gutter:13px;--sy-mobile-header-height:54px}
  .header-inner{min-height:54px!important;height:54px}
  .brand img,.custom-logo{max-width:140px;max-height:37px}
  .menu-toggle{flex-basis:38px;width:38px;height:38px;min-width:38px;min-height:38px}
  .menu-toggle>span:nth-child(1){top:12px!important}
  .menu-toggle>span:nth-child(2){top:18px!important}
  .menu-toggle>span:nth-child(3){top:24px!important}
  .menu-toggle[aria-expanded="true"]>span:nth-child(1),
  .menu-toggle[aria-expanded="true"]>span:nth-child(3){top:18px!important}
  .mobile-actions a{padding-inline:6px!important;font-size:.8rem!important}
}


/*
   WordPress frontend admin bar behaviour:
   <=600px: admin bar is absolute and scrolls away, so sticky header must use top:0.
   601-782px: admin bar is fixed at 46px.
   783-860px: admin bar is fixed at 32px.
   No JavaScript scroll chasing is needed.
*/
@media (min-width:601px) and (max-width:782px){
  body.admin-bar .site-header{top:46px!important}
}
@media (min-width:783px) and (max-width:860px){
  body.admin-bar .site-header{top:32px!important}
}

@media(prefers-reduced-motion:reduce){
  body > .primary-nav.sy-mobile-drawer,.mobile-menu-backdrop,.mobile-actions,.menu-toggle>span:not(.screen-reader-text){transition:none!important}
}