/* Public landing page (index.html) — deliberately its own stylesheet
   rather than reusing app-shell layout classes: this page has no sidebar
   and isn't behind auth, so it doesn't share app-shell's structure, only
   its theme variables/tokens (style.css, loaded first) and a few small
   components (.app-social-links, .theme-toggle) that genuinely are the
   same thing on both pages. */

.landing-page { min-height: 100vh; display: flex; flex-direction: column; }
/* "Industrial Safety Tech" palette (ticket #63) — the showcase/footer
   zone's own gray, one tone darker than the white about-section above
   it, so the two body sections read as distinct rather than one flat
   slab (this exact gray was already tuned/approved earlier in the
   project for the same purpose, just applied to a different section). */
.landing-page-home { background: #E9EAEC; }

.landing-topbar {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  padding: 12px 24px; box-sizing: border-box; max-width: 900px; width: 100%; margin: 0 auto;
}
.landing-topbar-right { display: flex; align-items: center; gap: 10px; }
/* Below this, .app-social-links is already hidden (style.css:530), so
   it's just the two CTA buttons left — shrink them a little rather than
   letting the row overflow on the narrowest phones (~320px). */
@media (max-width: 380px) {
  .landing-login-btn, .landing-apply-btn { padding: 7px 12px; font-size: 12px; }
  .landing-topbar-right { gap: 6px; }
}
/* Both primary CTAs share one high-intent color (International Safety
   Orange) rather than each having its own brand/positive color — the
   point is that these two are the only orange things on the page. */
.landing-login-btn, .landing-apply-btn {
  padding: 8px 16px; border-radius: 8px; border: none; background: #FF4F00; color: #fff;
  font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .15s ease;
}
.landing-login-btn:hover, .landing-apply-btn:hover { background: #D94300; }
.landing-login-btn:focus, .landing-apply-btn:focus { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.landing-hero {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 24px 24px 20px; box-sizing: border-box;
}
/* max-width:100% is the safety net, not decoration — the logo's real
   aspect ratio (~2.6:1) means height:108px alone renders it ~282px wide,
   which overflows a 320px-viewport phone once the page's own 24px side
   padding is subtracted. */
.landing-hero-logo { height: 108px; width: auto; max-width: 100%; margin-bottom: 12px; }
.landing-tagline { font-size: 20px; font-weight: 600; color: var(--accent); margin: 0; }
.landing-inline-link { color: #1E3A8A; font-weight: 700; text-decoration: underline; cursor: pointer; }
.landing-inline-link:hover { filter: brightness(1.3); }

.landing-about-section {
  width: 100%; background: #FFFFFF; padding: 40px 24px; box-sizing: border-box;
  display: flex; justify-content: center;
}
.landing-about { max-width: 560px; text-align: left; font-size: 15px; line-height: 1.7; color: #161B22; margin: 0; }
.landing-about b { color: #161B22; }

/* auto-fit + minmax (not a fixed repeat(3, 1fr)) so the row centers
   itself regardless of card count — 1fr columns always consume the full
   container width, leaving no slack for justify-content to distribute,
   which is exactly what made 2 cards read as left-aligned once Load
   Builder's card was removed. This also makes the old fixed 720px/480px
   column-count breakpoints unnecessary — auto-fit already reflows to
   fewer columns as the container narrows. */
.landing-showcase {
  width: 100%; max-width: 860px; margin: 0 auto; padding: 0 24px; box-sizing: border-box;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); gap: 18px;
  justify-content: center;
}

.landing-app-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 20px 18px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E2E8F0;
  box-shadow: 0 2px 10px rgba(15,23,42,.05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.landing-app-card:hover {
  transform: translateY(-3px); border-color: #1E3A8A; box-shadow: 0 12px 24px rgba(15,23,42,.1);
}
/* Strictly monochrome per ticket #63 — no per-app color coding, just a
   neutral circle so the icon reads as a mark, not a category badge. */
.landing-app-icon {
  width: 52px; height: 52px; border-radius: 50%; background: #F4F6F8; color: #161B22;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.landing-app-name { font-size: 16px; font-weight: 700; color: #161B22; }
.landing-app-desc { font-size: 13px; line-height: 1.5; color: #4B5563; }
.landing-app-cta { font-size: 12px; font-weight: 600; color: #1E3A8A; text-decoration: none; margin-top: 4px; }
.landing-app-cta:hover { text-decoration: underline; }

/* "Läs mer" — outline pill in the brand navy rather than a filled
   accent pill, so the page's only filled/high-intent color stays the
   two primary CTAs up top (ticket #63). */
.landing-app-readmore {
  font-size: 12px; font-weight: 700; color: #1E3A8A; background: transparent; border: 1px solid #1E3A8A;
  text-decoration: none; padding: 6px 17px; border-radius: 999px; margin-top: 6px; transition: background .15s ease, color .15s ease;
}
.landing-app-readmore:hover { background: #1E3A8A; color: #fff; }

.landing-footer { text-align: center; padding: 8px 20px 12px; font-size: 12px; color: #64748B; }
.landing-footer-copy { font-size: 12px; color: #64748B; }

/* Account-application modal — reuses .modal-box/.login-input/.login-label
   from style.css (same visual language as login.html's signup form), just
   adds spacing above the submit row since the form above it has no
   natural bottom margin of its own. Forced to a light white/black look
   below regardless of the shared theme variables — this page never loads
   theme.js, so .modal-box would otherwise inherit style.css's dark-theme
   default (light text on a dark panel), which reads wrong against this
   page's now-mostly-light palette. */
.apply-btn-row { margin-top: 16px; }
/* max-height + overflow-y — without it, adding several colleague emails
   (the "Hur många är ni" extra-email rows) can grow this form taller than
   a short phone viewport with no way to reach the submit button. */
#applyModal .modal-box { background: #FFFFFF; color: #11194B; max-height: 90vh; overflow-y: auto; }
#applyModal .modal-title { color: #11194B; }
#applyModal .modal-text { color: #4B5563; }
#applyModal .login-label { color: #4B5563; }
#applyModal .login-optional { color: #6B7280; }
#applyModal .login-optional a { color: #1E3A8A; }
#applyModal .login-input { background: #F3F4F6; color: #11194B; border-color: #D1D5DB; }
#applyModal .login-input:focus { border-color: #1E3A8A; }
#applyModal .feedback-status { color: #4B5563; }
#applyModal .modal-btn-secondary { color: #11194B; border-color: #D1D5DB; }
#applyModal .modal-btn-secondary:hover { border-color: #1E3A8A; color: #1E3A8A; }

/* Header — flat Deep Slate Charcoal, no gradient/blobs (ticket #63 drops
   the banded/flag look), but keeps a single wave divider handing off to
   the white section below rather than a hard flat cut. */
.landing-hero-band {
  position: relative; overflow: hidden;
  background: #161B22;
  padding-bottom: 36px;
}
.landing-hero-band-content { text-align: center; padding: 4px 24px 14px; }
.landing-hero-band .landing-tagline { color: rgba(255,255,255,.82); }

.landing-wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 50px; display: block; }
.landing-hero-band .landing-wave path { fill: #FFFFFF; }

/* Header placement — .app-social-links' default border-left/margin-left
   (style.css) assumes it sits right after a logo, like on the app pages.
   Here it's the first thing in .landing-topbar-right with nothing to its
   left, so that divider would just be a stray line; the parent's own
   flex gap already spaces it from the buttons next to it. */
.landing-header-social-links { margin: 0; padding: 0; border-left: none; }
.landing-header-social-links .social-link { color: rgba(255,255,255,.7); }
.landing-header-social-links .social-link:hover { color: #fff; background: rgba(255,255,255,.12); }

/* Same override reasoning as .landing-header-social-links above — the
   shared .lang-toggle styling (style.css) assumes theme.js's light/dark
   var tokens, but this page's header always sits on the dark hero band
   and never loads theme.js at all. */
.landing-header-lang-toggle {
  background: transparent; border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.85);
}
.landing-header-lang-toggle:hover { border-color: #fff; color: #fff; }

/* Mobile content scale-up — the page was rendering technically correct
   but visually a little small/cramped on a phone (confirmed against a
   real device: the user had to pinch-zoom in to get comfortable reading
   size). Bumping initial-scale in the viewport meta tag was deliberately
   avoided here — that's the exact lever that caused the original
   zoomed-out bug, and non-1.0 values behave inconsistently across mobile
   browsers. Sizing the content up directly is portable and predictable
   instead. Modest bump (not a redesign) — logo/buttons/cards untouched,
   just the text that was reading small. */
@media (max-width: 480px) {
  .landing-tagline { font-size: 22px; }
  .landing-about { font-size: 16px; }
  .landing-app-name { font-size: 17px; }
  .landing-app-desc { font-size: 14px; }
  .landing-app-cta, .landing-app-readmore { font-size: 13px; }
}