
/* ix.ua v100
   Mobile public header:
   - logo on the left;
   - burger stays on the top row, immediately after the logo;
   - a small gap separates burger from the remaining controls;
   - UA/EN + auth/account + create profile stay on the top row;
   - only Chat moves to the second row;
   - same layout on index.php and idea.php.
*/
@media (max-width:650px){
  html,
  body.landing{
    max-width:100%;
    overflow-x:hidden!important;
  }

  body.landing .landing-head{
    position:relative!important;
    width:calc(100% - 18px)!important;
    max-width:100%!important;
    min-height:91px!important;
    height:auto!important;
    margin:0 auto!important;
    padding:8px 0!important;
    display:grid!important;
    grid-template-columns:74px 40px 8px minmax(0,1fr)!important;
    grid-template-rows:38px 38px!important;
    column-gap:5px!important;
    row-gap:5px!important;
    align-items:center!important;
    box-sizing:border-box!important;
  }

  /* Logo remains unchanged and spans both rows. */
  body.landing .landing-head>.landing-logo,
  body.landing.idea-page .landing-head>.ix-approved-logo{
    grid-column:1!important;
    grid-row:1 / 3!important;
    align-self:start!important;
    width:74px!important;
    min-width:74px!important;
    height:auto!important;
    margin:2px 0 0!important;
    padding:0!important;
  }
  body.landing .landing-head>.landing-logo img,
  body.landing.idea-page .landing-head>.ix-approved-logo img{
    display:block!important;
    width:72px!important;
    max-width:72px!important;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
  }

  /* Burger: top row, directly after the logo. */
  body.landing .landing-head>.landing-menu-toggle{
    grid-column:2!important;
    grid-row:1!important;
    position:static!important;
    z-index:5!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    justify-self:start!important;
    width:40px!important;
    min-width:40px!important;
    height:38px!important;
    min-height:38px!important;
    margin:0!important;
    padding:0!important;
    border-radius:9px!important;
    box-sizing:border-box!important;
  }
  body.landing .landing-head>.landing-menu-toggle b{
    display:none!important;
  }
  body.landing .landing-head>.landing-menu-toggle span{
    font-size:18px!important;
    line-height:1!important;
  }

  /* Actions occupy the area after burger.
     Top: language + auth/account + create profile.
     Bottom: chat only. */
  body.landing .landing-head>.landing-actions.index-header-actions{
    grid-column:4!important;
    grid-row:1 / 3!important;
    align-self:stretch!important;
    justify-self:start!important;
    position:static!important;
    display:grid!important;
    grid-template-columns:auto auto auto!important;
    grid-template-rows:38px 38px!important;
    align-items:center!important;
    justify-content:start!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    column-gap:5px!important;
    row-gap:5px!important;
    box-sizing:border-box!important;
  }

  /* UA / EN first on top row. */
  body.landing .index-header-actions>.language-switch{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    align-self:center!important;
    display:inline-flex!important;
    align-items:center!important;
    position:static!important;
    width:auto!important;
    height:36px!important;
    min-height:36px!important;
    margin:0!important;
    padding:2px!important;
    box-sizing:border-box!important;
  }
  body.landing .index-header-actions>.language-switch a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:25px!important;
    height:30px!important;
    padding:0 4px!important;
    font-size:10.5px!important;
    box-sizing:border-box!important;
  }

  /* Sign in / My dashboard. */
  body.landing .index-header-actions>a.u-btn.secondary{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:start!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:0!important;
    height:36px!important;
    min-height:36px!important;
    margin:0!important;
    padding:0 8px!important;
    border-radius:8px!important;
    font-size:10.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }

  /* Create profile — stays compact, not full-width. */
  body.landing .index-header-actions>a.u-btn:not(.secondary){
    grid-column:3!important;
    grid-row:1!important;
    justify-self:start!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:0!important;
    height:36px!important;
    min-height:36px!important;
    margin:0!important;
    padding:0 8px!important;
    border-radius:8px!important;
    font-size:10.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }

  /* Chat is the ONLY second-row control. */
  body.landing .index-header-actions>.ix-community-chat-header{
    grid-column:1!important;
    grid-row:2!important;
    justify-self:start!important;
    align-self:center!important;
    position:static!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:40px!important;
    min-width:40px!important;
    height:38px!important;
    min-height:38px!important;
    margin:0!important;
    padding:0!important;
    border-radius:9px!important;
    box-sizing:border-box!important;
  }
  body.landing .index-header-actions>.ix-community-chat-header span{
    display:none!important;
  }
  body.landing .index-header-actions>.ix-community-chat-header svg{
    width:19px!important;
    height:19px!important;
    margin:0!important;
  }

  /* Mobile dropdown still opens below the whole header. */
  body.landing .landing-head>nav{
    top:calc(100% - 1px)!important;
    right:0!important;
    width:min(310px,calc(100vw - 18px))!important;
    max-width:calc(100vw - 18px)!important;
    box-sizing:border-box!important;
  }
}

/* Extra compact tuning for narrow phones. */
@media (max-width:390px){
  body.landing .landing-head{
    width:calc(100% - 14px)!important;
    grid-template-columns:64px 36px 5px minmax(0,1fr)!important;
    column-gap:3px!important;
  }

  body.landing .landing-head>.landing-logo,
  body.landing.idea-page .landing-head>.ix-approved-logo{
    width:64px!important;
    min-width:64px!important;
  }
  body.landing .landing-head>.landing-logo img,
  body.landing.idea-page .landing-head>.ix-approved-logo img{
    width:62px!important;
    max-width:62px!important;
  }

  body.landing .landing-head>.landing-menu-toggle{
    width:36px!important;
    min-width:36px!important;
    height:34px!important;
    min-height:34px!important;
  }

  body.landing .landing-head>.landing-actions.index-header-actions{
    column-gap:3px!important;
  }

  body.landing .index-header-actions>.language-switch{
    height:34px!important;
    min-height:34px!important;
  }
  body.landing .index-header-actions>.language-switch a{
    min-width:22px!important;
    height:28px!important;
    padding:0 3px!important;
    font-size:9.7px!important;
  }

  body.landing .index-header-actions>a.u-btn.secondary,
  body.landing .index-header-actions>a.u-btn:not(.secondary){
    height:34px!important;
    min-height:34px!important;
    padding-left:6px!important;
    padding-right:6px!important;
    font-size:9.7px!important;
  }

  body.landing .index-header-actions>.ix-community-chat-header{
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    min-height:36px!important;
  }
}


/* v101: burger stays beside logo; all other controls hug the right edge. */
@media (max-width:650px){
  body.landing .landing-head{
    grid-template-columns:74px 40px minmax(0,1fr)!important;
    grid-template-rows:38px 38px!important;
    column-gap:6px!important;
    row-gap:5px!important;
  }

  body.landing .landing-head>.landing-menu-toggle{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:start!important;
  }

  body.landing .landing-head>.landing-actions.index-header-actions{
    grid-column:3!important;
    grid-row:1 / 3!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:auto auto auto!important;
    grid-template-rows:38px 38px!important;
    justify-content:end!important;
    align-items:center!important;
    column-gap:5px!important;
    row-gap:5px!important;
  }

  /* Top row, pushed to the right. */
  body.landing .index-header-actions>.language-switch{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:end!important;
  }
  body.landing .index-header-actions>a.u-btn.secondary{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end!important;
  }
  body.landing .index-header-actions>a.u-btn:not(.secondary){
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
  }

  /* Chat alone on row 2, also against the right edge. */
  body.landing .index-header-actions>.ix-community-chat-header{
    grid-column:3!important;
    grid-row:2!important;
    justify-self:end!important;
  }
}

@media (max-width:390px){
  body.landing .landing-head{
    grid-template-columns:64px 36px minmax(0,1fr)!important;
    column-gap:4px!important;
  }
  body.landing .landing-head>.landing-actions.index-header-actions{
    column-gap:3px!important;
  }
  body.landing .index-header-actions>a.u-btn.secondary,
  body.landing .index-header-actions>a.u-btn:not(.secondary){
    padding-left:5px!important;
    padding-right:5px!important;
    font-size:9.4px!important;
  }
  body.landing .index-header-actions>.language-switch a{
    min-width:21px!important;
    padding:0 2px!important;
    font-size:9.4px!important;
  }
}


/* v102: show the word "Меню / Menu" beside the burger on mobile.
   Keep the burger beside the logo; all other controls stay right-aligned. */
@media (max-width:650px){
  body.landing .landing-head{
    grid-template-columns:74px 58px minmax(0,1fr)!important;
    column-gap:6px!important;
  }

  body.landing .landing-head>.landing-menu-toggle{
    width:58px!important;
    min-width:58px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 6px!important;
    gap:4px!important;
    justify-content:center!important;
  }

  body.landing .landing-head>.landing-menu-toggle b{
    display:inline-block!important;
    margin:0!important;
    padding:0!important;
    font-size:10.5px!important;
    line-height:1!important;
    font-weight:700!important;
    white-space:nowrap!important;
  }

  body.landing .landing-head>.landing-menu-toggle span{
    font-size:16px!important;
    line-height:1!important;
    flex:0 0 auto!important;
  }
}

/* Narrow phones: keep "Меню" visible, but make the control tighter. */
@media (max-width:390px){
  body.landing .landing-head{
    grid-template-columns:64px 55px minmax(0,1fr)!important;
    column-gap:4px!important;
  }

  body.landing .landing-head>.landing-menu-toggle{
    width:55px!important;
    min-width:55px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 5px!important;
    gap:3px!important;
  }

  body.landing .landing-head>.landing-menu-toggle b{
    font-size:9.4px!important;
  }

  body.landing .landing-head>.landing-menu-toggle span{
    font-size:15px!important;
  }
}

/* Only on extremely narrow screens fall back to burger-only. */
@media (max-width:330px){
  body.landing .landing-head{
    grid-template-columns:60px 36px minmax(0,1fr)!important;
  }

  body.landing .landing-head>.landing-menu-toggle{
    width:36px!important;
    min-width:36px!important;
    padding:0!important;
  }

  body.landing .landing-head>.landing-menu-toggle b{
    display:none!important;
  }
}


/* v104: compact authenticated mobile header.
   When the user is logged in there is no "Create profile" button,
   so collapse the unused third column and keep "My dashboard" against the right edge. */
@media (max-width:650px){
  body.landing .landing-head>.landing-actions.index-header-actions.is-authenticated{
    grid-template-columns:auto auto!important;
    justify-content:end!important;
  }

  body.landing .index-header-actions.is-authenticated>.language-switch{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:end!important;
  }

  body.landing .index-header-actions.is-authenticated>a.u-btn.secondary{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end!important;
  }

  body.landing .index-header-actions.is-authenticated>.ix-community-chat-header{
    grid-column:2!important;
    grid-row:2!important;
    justify-self:end!important;
  }
}

@media (max-width:390px){
  body.landing .landing-head>.landing-actions.index-header-actions.is-authenticated{
    grid-template-columns:auto auto!important;
    column-gap:4px!important;
  }
}
