/* =====================================================================
   Lingonect — mobile & native-app adaptations
   Loaded on every page (after each page's own <style>) so it can adapt
   the shared desktop layout for iPhone screens and iOS safe areas
   (notch / Dynamic Island / home indicator). Desktop is unaffected.
   ===================================================================== */

/* ---- Universal app hygiene ---- */
html{
  -webkit-text-size-adjust:100%;   /* stop iOS auto-inflating text */
}
body{
  -webkit-tap-highlight-color:transparent;  /* no grey flash on tap */
  overscroll-behavior-y:none;               /* no rubber-band scroll leak */
}

/* ---- Phone layout: drop the desktop 0.75 zoom ----
   The desktop pages shrink everything to 75% to fit wide screens. On a
   phone that makes text tiny, so render at native size instead. */
@media (max-width:640px){
  html{ zoom:1 !important; }
}

/* ---- iOS safe areas ----
   Only applied where the device actually reports insets, so nothing
   shifts on devices without a notch or home indicator. */
@supports (top:env(safe-area-inset-top)){

  /* Top nav: grow it up under the notch, filling that strip with its own
     background and keeping the links themselves below the notch. */
  .top-nav{
    height:calc(44px + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
    box-sizing:border-box;
  }
  .top-nav::after{                 /* scroll-fade overlay follows the taller bar */
    height:calc(44px + env(safe-area-inset-top));
  }

  /* The in-flow logo clearance for app pages is handled per-page (their
     mobile logo-rail padding), because the landing/login pages lay their
     logo out differently and must not be shifted here. */

  /* Landing page bottom chrome sits above the home indicator. */
  .site-footer{
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
  }
  .language-switcher{
    bottom:calc(54px + env(safe-area-inset-bottom));
  }
}

/* ---- Registered-trademark mark ----
   The little ® after the "Lingonect" wordmark in visible text. Kept small
   and subtle so it reads as a mark, not a character in the name. */
.tm{
  font-size:0.55em;
  vertical-align:super;
  line-height:0;
  font-weight:normal;
  margin-left:0.05em;
}