/* litlink.lt: site wide styles layered on top of the design's inline styles.
   The design is desktop first (1440px artboards). This file adds the mobile
   navigation and responsive rules. Helper classes (ll-grid, ll-between,
   ll-h1, ll-section, ll-display, ll-sticky) are assigned by build/render.js. */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img { max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
input, select, textarea { min-width: 0; }
:focus-visible { outline: 2px solid #0F8465; outline-offset: 2px; }
#ll-main:focus { outline: none; }

/* Terminal output: a long unbroken token (a full form IPv6 address) must wrap
   rather than be clipped by the panel. */
[data-ll-lg-out], [data-ll-lg-prompt] { overflow-wrap: anywhere; }

/* Skip link: off screen until focused */
.ll-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: #121212; color: #fff; font-size: 14px; font-weight: 600; padding: 12px 20px; border-radius: 0 0 8px 0; }
.ll-skip:focus { left: 0; color: #fff; }

/* Alternative headings that only make sense when the page scripts cannot run */
.ll-noscript-only { display: none; }

/* The hero globe fills itself with a canvas once WebGL and three.js are ready.
   Until then, and if either is unavailable, show a soft sphere in its place so the
   hero never renders as an empty white block. */
ll-globe { display: block; }
ll-globe:empty {
  background:
    radial-gradient(circle at 42% 34%, rgba(255,255,255,.9) 0%, rgba(15,132,101,.10) 46%, rgba(15,132,101,0) 62%),
    radial-gradient(circle at 50% 50%, rgba(18,18,18,.05) 0%, rgba(18,18,18,.05) 34%, rgba(18,18,18,0) 35%);
}

/* Mobile menu button (hidden on desktop) */
.ll-menu { display: none; width: 40px; height: 40px; border: 0; background: transparent; border-radius: 999px; cursor: pointer; padding: 0; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.ll-menu span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.ll-only-mobile { display: none !important; }
.ll-wrap { flex-wrap: wrap !important; }

/* Sections whose two columns hold something that cannot shrink (the status components
   table, the contact form) need to collapse while there is still room for both. */
@media (max-width: 1120px) {
  .ll-grid-wide { grid-template-columns: 1fr !important; }
  .ll-grid-wide > * { min-width: 0; }
  .ll-scroll-x { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 1100px) {
  .ll-h1 { font-size: 56px !important; }
  .ll-display { font-size: 120px !important; }
}

/* Four and five column rows have fixed px tracks in the design (the careers rows on
   /about/ are 1fr 200px 120px 24px) and stop fitting before the mobile breakpoint. */
@media (max-width: 1000px) {
  .ll-grid-4, .ll-grid-5 { grid-template-columns: 1fr 1fr !important; }
  .ll-grid-4 > *, .ll-grid-5 > * { min-width: 0; }
}

@media (max-width: 900px) {
  .ll-menu { display: flex; }
  [data-ll-lg] { display: none !important; }
  [data-ll-pill] { position: relative; gap: 16px !important; }
  nav[data-ll-nav] { display: none !important; }
  [data-ll-pill].ll-open nav[data-ll-nav] { display: flex !important; position: absolute; left: 0; right: 0; top: calc(100% + 8px); flex-direction: column; align-items: stretch !important; gap: 0 !important; background: #121212; border-radius: 24px; padding: 10px 8px; box-shadow: 0 10px 30px rgba(18,18,18,.25); }
  [data-ll-pill].ll-open nav[data-ll-nav] a { padding: 12px 16px; border-radius: 12px; font-size: 16px; }
  [data-ll-pill].ll-open nav[data-ll-nav] .ll-only-mobile { display: block !important; }
  [data-ll-pill].ll-open .ll-menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  [data-ll-pill].ll-open .ll-menu span:nth-child(2) { opacity: 0; }
  [data-ll-pill].ll-open .ll-menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .ll-grid { grid-template-columns: 1fr !important; }
  .ll-grid > * { min-width: 0; }
  .ll-grid-3, .ll-grid-4, .ll-grid-5 { grid-template-columns: 1fr 1fr !important; }
  .ll-between { flex-wrap: wrap !important; }
  .ll-stack { flex-direction: column !important; }
  .ll-stack > [style*="flex:0 0 160px"] { flex-basis: auto !important; padding-top: 0 !important; }
  .ll-sticky { position: static !important; }
  .ll-scroll-x { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .ll-scroll-x > * { min-width: 640px; }
  .ll-h1 { font-size: 48px !important; }
  .ll-display { font-size: 96px !important; }

  /* Hero: the design overlays the status cards on the globe inside one 560px box.
     Stacked on a phone that box is too short, so the globe and the cards are put
     into normal flow one after the other instead. */
  .ll-hero-media { height: auto !important; }
  .ll-hero-media > ll-globe { position: relative !important; inset: auto !important; height: 300px !important; }
  .ll-hero-media > div { position: static !important; margin-top: 20px; }
}

@media (max-width: 600px) {
  .ll-grid-3, .ll-grid-4, .ll-grid-5 { grid-template-columns: 1fr !important; }
  .ll-section { padding-left: 20px !important; padding-right: 20px !important; }
  .ll-section > [style*="padding:0 40px"], .ll-section > [style*="padding: 0 40px"] { padding-left: 0 !important; padding-right: 0 !important; }
  .ll-h1 { font-size: 38px !important; }
  .ll-display { font-size: 64px !important; }
  .ll-hero-media > ll-globe { height: 260px !important; }
  [data-ll-header] { padding: 12px 12px !important; }
}