/* ============================================================
   10. DinSnarvei
   assets/style.css

   Versjon: 1.300
   Formål
   - Mørk og rolig startside
   - Header med søk, knapper og logo
   - To menyer: normal_meny og mobil_meny
   - Grid med 6 kolonner
============================================================ */


/* ============================================================
   20. Variabler
============================================================ */

:root{
  --bg: #0c111b;

  --card: rgba(255,255,255,0.08);
  --ring: rgba(255,255,255,0.18);

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);

  --link: rgba(140, 200, 255, 0.95);
  --linkHover: rgba(190, 230, 255, 1);

  --field: rgba(255,255,255,0.10);
  --fieldRing: rgba(255,255,255,0.26);

  --max: 1200px;
  --maxTop: 1080px;
}


/* ============================================================
   30. Reset og grunn
============================================================ */

*{
  box-sizing: border-box;
}

html, body{
  margin: 0;
  padding: 0;
}

body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

a{
  color: var(--link);
  text-decoration: none;
}

a:visited{
  color: var(--link);
}

a:hover{
  color: var(--linkHover);
}

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}


/* ============================================================
   40. Wrapper
============================================================ */

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding-left: 18px;
  padding-right: 18px;
}

.site-header .wrap,
.topbar .wrap{
  max-width: var(--maxTop);
}

/* ============================================================
   50. Header
   - Logo rad øverst
   - Søk og knapper under
   - Strammere mellomrom
============================================================ */

.site-header{
  border-bottom: 1px solid var(--ring);
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.06),
    rgba(0,0,0,0.10)
  );
}

/* Logo på egen linje */
.header-brand{
  padding: 6px 0 0 0;
}

/* Rad med søk og knapper */
.site-header-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 6px 0 12px 0;
}

/* Sikkerhet. Ingen gammel grid-area styring */
.brand-img{
  grid-area: auto;
}

.header-search{
  grid-area: auto;
}

.toplinks{
  grid-area: auto;
}
 
/* ============================================================
   60. Søk i header
   - Mer kontrollert bredde
   - Roligere uttrykk
============================================================ */

.header-search{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.header-search input{
  width: 100%;
  max-width: 300px;
  background: var(--field);
  border: 1px solid var(--fieldRing);
  border-radius: 999px;
  color: var(--text);
  padding: 10px 14px;
  font-size: 16px;
  outline: none;
}
.header-search{
  margin-right: 12px;
}


.header-search input::placeholder{
  color: rgba(255,255,255,0.60);
}

.header-search input:focus{
  border-color: rgba(140,200,255,0.55);
  box-shadow: 0 0 0 3px rgba(140,200,255,0.18);
}

.header-search button{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  color: var(--text);
  padding: 10px 14px;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
}

.header-search button:hover{
  border-color: rgba(255,255,255,0.32);
}

/* ============================================================
   70. Knapper i header
============================================================ */

.toplinks{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}

.toplink{
  display: inline-block;
  color: var(--link);
  border: 1px solid var(--ring);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  padding: 10px 12px;
  font-size: 15px;
}

.toplink:hover{
  color: var(--linkHover);
  border-color: rgba(255,255,255,0.28);
}

.toplink-mini{
  padding: 10px 12px;
}


/* ============================================================
   80. Logo som bilde
   - Står alene på toppen
   - Større og tydeligere
============================================================ */

.brand-img{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  margin-top: 0px;
  margin-bottom: 0px;
}

.brand-logo{
  display: block;
  height: 70px;
  width: auto;
  opacity: 0.95;
}

/* ============================================================
   90. Hurtiglenker under header
============================================================ */

.topbar{
  border-bottom: 1px solid var(--ring);
  background: rgba(0,0,0,0.12);
}

.topbar .wrap{
  padding: 12px 0;
}

.quicknav{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

.quicknav a{
  display: inline-block;
  color: var(--link);
  border: 1px solid var(--ring);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  padding: 9px 13px;
  font-size: 16px;
  text-decoration: none;
}

.quicknav a:visited{
  color: var(--link);
}

.quicknav a:hover{
  color: var(--linkHover);
  border-color: rgba(255,255,255,0.28);
}


/* ============================================================
   95. Menyvalg for mobil og desktop
   - normal_meny vises på stor skjerm
   - mobil_meny vises på liten skjerm
   - Hard skjuling slik at det aldri blir to menyer
============================================================ */

/* Standard */
.quicknav.mobil_meny{
  display: none !important;
}

.quicknav.normal_meny{
  display: flex !important;
}

/* normal_meny får mindre luft enn standard quicknav */
.quicknav.normal_meny a{
  padding: 7px 10px;
  font-size: 14px;
}

/* Mobil */
@media (max-width: 560px){

  .quicknav.normal_meny{
    display: none !important;
  }

  .quicknav.mobil_meny{
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    align-items: center;
  }


  /* mobil_meny skal være tekstlenker */
  .quicknav.mobil_meny a{
    background: transparent;
    border: none;
    padding: 6px 2px;
    border-radius: 0;
    color: rgba(180,225,255,1);
    font-weight: 700;
    letter-spacing: 0.2px;
  }

  .quicknav.mobil_meny a:hover{
    color: rgba(210,240,255,1);
    text-decoration: underline;
    text-underline-offset: 6px;
  }
}


/* ============================================================
   100. Grid
============================================================ */

.grid{
  display: grid;
  gap: 14px;
  padding: 16px 0 22px 0;
  grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 900px){
  .grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px){
  .grid{
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   110. Kolonner og lister
============================================================ */

.col{
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 14px;
  padding: 12px 12px 10px 12px;
}

.col ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.col li{
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.col li:last-child{
  border-bottom: none;
}

.col a{
  color: var(--text);
  text-decoration: none;
}

.col a:visited{
  color: var(--text);
}

.col a:hover{
  color: var(--linkHover);
}

.col .heading{
  font-weight: 700;
  color: var(--link);
  font-size: 18px;
  padding: 4px 0 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}


/* ============================================================
   120. Mobil
   - Logo alene øverst
   - Søk på egen linje
   - Knapper under søk
   - normal_meny skjules og mobil_meny vises
============================================================ */

@media (max-width: 560px){

  body{
    font-size: 18px;
    line-height: 1.6;
  }

  /* Logo-rad */
  .header-brand{
    padding: 12px 0 8px 0;
  }

  .brand-img{
    justify-content: flex-start;
  }

  .brand-logo{
    height: 44px;
  }

  /* Søk og knapper blir stablet */
  .site-header-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
    padding: 0 0 12px 0;
  }

  .header-search{
    justify-content: flex-start;
  }

  .header-search input{
    width: 100%;
    min-width: 0;
    font-size: 16px;
    padding: 10px 12px;
  }

  .header-search button{
    font-size: 15px;
    padding: 10px 12px;
  }

  /* Knapperader på mobil. Tre små knapper i én rad */
  .toplinks{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    justify-content: stretch;
  }

  .toplink{
    text-align: center;
    font-size: 14px;
    padding: 9px 10px;
    border-radius: 999px;
  }

  /* Menybytte */
  .quicknav.normal_meny{
    display: none !important;
  }

  .quicknav.mobil_meny{
    display: flex !important;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-start;
    align-items: center;
  }

  /* Mobilmeny som tekstlenker */
  .quicknav.mobil_meny a{
    background: transparent;
    border: none;
    padding: 6px 2px;
    border-radius: 0;
    color: rgba(180,225,255,1);
    font-weight: 700;
    letter-spacing: 0.2px;
  }

  .quicknav.mobil_meny a:hover{
    color: rgba(210,240,255,1);
    text-decoration: underline;
    text-underline-offset: 6px;
  }

  /* Toppbar litt roligere */
  .topbar .wrap{
    padding: 10px 0;
  }

  /* Kolonner kan være store */
  .col .heading{
    font-size: 20px;
  }

  .col a{
    font-size: 20px;
  }
}



/* ============================================================
   125. Webmail side
   - Skjul søk i header
   - Vis logo alene på toppen
============================================================ */

.page-webmail .header-search{
  display: none;
}

.page-webmail .toplinks{
  display: none;
}

.page-webmail .site-header-row{
  grid-template-columns: 1fr;
  justify-items: start;
}


/* ============================================================
   130. Footer
============================================================ */

.site-footer{
  margin-top: 24px;
  border-top: 1px solid rgba(140,200,255,0.25);
  background: linear-gradient(
    to top,
    rgba(140,200,255,0.10),
    rgba(0,0,0,0.15)
  );
  color: var(--muted);
}

.footer-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
}

.footer-title{
  font-weight: 700;
  font-size: 18px;
  color: rgba(180,225,255,1);
}

.footer-sub{
  margin-top: 4px;
  font-size: 14px;
  color: rgba(255,255,255,0.65);
}

.footer-links{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-links a{
  color: rgba(160,210,255,0.95);
  font-size: 15px;
}

.footer-links a:hover{
  color: rgba(200,235,255,1);
}

@media (max-width: 560px){

  .footer-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .footer-title{
    font-size: 20px;
  }

  .footer-sub{
    font-size: 16px;
  }

  .footer-links a{
    font-size: 18px;
  }
}