/* ======================================================
   BASE
====================================================== */

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

/* ======================================================
   START PAGE LAYOUT
====================================================== */

main {
  max-width: 420px;
  margin: 60px auto;
  padding: 1rem;
  text-align: center;
}

/* ======================================================
   LOGO (Desktop default)
====================================================== */

.logo-desktop {
  display: block;
  width: auto;
  height: auto;
  margin: 0 auto;
}

/* Dölj alla mobilvarianter på desktop */
.logo-mobile-img,
.logo-mobile,
.logo-mobile-text {
  display: none;
}
/* ======================================================
   Start Title
====================================================== */
.start-title {
  font-size: 1.4rem;   /* mobil standard */
  line-height: 1.2;
  max-width: 30ch;
  margin: 0 auto;
}


/* ======================================================
   LOGIN PAGE
====================================================== */

.loginSection {
  margin-top: 40px;
  border: 1px solid #ddd;
  padding: 15px;
}

.heading2 {
  margin-top: 5px;
}

h4 {
  font-size: 1.25rem;
  max-width: 40ch;
  margin: 0 auto;
}

/* ======================================================
   BUTTONS (GU STANDARD)
====================================================== */

.btn-gu {
  background-color: #005293;
  border: 2px solid #005293;
  color: #ffffff;
  border-radius: 6px;
  font-size: 1rem;
  text-decoration: none !important;
}

.btn-gu:hover,
.btn-gu:focus {
  background-color: #003f73;
  border-color: #003f73;
  color: #ffffff;
  outline: 3px solid #000;
  outline-offset: 3px;
}

nav {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Start page buttons as blocks */
nav .btn-gu {
  width: 100%;
  max-width: 300px;
  margin: 0.75rem 0;

  padding: 0.75rem 1rem;   /* jämn vertikal padding */
  text-align: center;
  text-decoration: none !important;
}

/* Bootstrap override safety */
input.btn-gu,
button.btn-gu,
a.btn-gu {
  background-color: #005293 !important;
  border-color: #005293 !important;
  color: #ffffff !important;
}

/* ======================================================
   TEXT LINKS (WCAG SAFE)
====================================================== */

.info-text a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.info-text a:focus {
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* ======================================================
   RESPONSIVE (ONE SINGLE MEDIA QUERY)
====================================================== */

@media (max-width: 576px) {
  main {
    padding: 0.2rem;      /* mindre luft på små skärmar */
  }

  /* Logo behaviour */
  .logo-desktop {
    display: none;
  }

  /* Start.html använder denna */
  .logo-mobile-img {
    display: none;

  }

  /* Index.html använder denna */
  .logo-mobile-text {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 1rem 0;
    text-align: center;
  }

  /* Login adjustments */
  .heading2 {
    font-size: 1rem;
    max-width: 28ch;
    margin-bottom: 0.5rem;
  }

  h4 {
    font-size: 1rem;
    max-width: 28ch;
    margin-bottom: 0;
  }

  .loginSection {
    margin-top: 0;
    padding: 0;
    border: none;
    background: transparent;
  }

  .info-text {
    margin-top: 0.5rem;
    font-size: 0.9rem;
  }
    .start-title {
    font-size: 1.3rem;   /* fast storlek */
    line-height: 1.1;
  }
 

}
/* ======================================================
   DESKTOP ONLY – FÅ ALLT ATT RYMMAS
   (på små laptops och uppåt)
====================================================== */

@media (min-width: 768px) {

  html, body {
    height: 100%;
    margin: 0;
  }
.start-title {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  white-space: nowrap;
}
 /* Gäller ENDAST start-sidan */
  .page-wrapper {
    height: 100vh;              /* inte min-height */
    display: flex;
    flex-direction: column;
    justify-content: center;    /* börja från center */
    align-items: center;
  }

  main {
    transform: translateY(-12vh); /* flytta upp visuellt */
    max-width: 600px;
  }

  .logo-desktop {
    max-height: 25vh;
    width: auto;               /* inte width: center */
  }
  

}


/* ======================================================
   BROWSER CHECK
====================================================== */

#browserInvalid,
#browserValid {
  display: none;
}

#browserInvalid {
  margin-top: 40px;
}

.browserInvalid p {
  text-align: center;
}

.browserInvalid div {
  text-align: left;
  margin: 0 auto;
  display: inline-block;
}

.browserInvalid div ul {
  text-align: left;
}