/* =========================================================
   header.css – Varmehjælp
   ========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:999;

  background:#fff;
  border-bottom:1px solid var(--line);

  padding-top:env(safe-area-inset-top);
}

.site-header .wrap.header-inner{
  width:100%;
  max-width:none;
  margin:0;

  padding:12px 24px;

  display:grid;
  grid-template-columns:320px minmax(0,1fr) 360px;
  align-items:center;
  column-gap:24px;
}


/* =========================================================
   LOGO
   ========================================================= */

.brand{
  grid-column:1;
  justify-self:center;

  display:flex;
  align-items:center;
}

.brand img{
  display:block;
  width:auto;
  height:90px;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.site-nav{
  grid-column:2;
  justify-self:center;

  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;

  gap:24px;
  min-width:0;
}

.site-nav a{
  padding:10px 0;

  white-space:nowrap;

  font-size:15px;
  font-weight:400;

  color:rgba(32,32,33,.70);
  text-decoration:none;

  transition:
    color .18s ease,
    font-weight .18s ease;
}

.site-nav a:hover{
  color:rgba(32,32,33,.95);
  font-weight:600;
}

.site-nav a.active{
  color:var(--primary-1);
  font-weight:700;
}


/* =========================================================
   HØJRE KNAPPER
   ========================================================= */

.header-actions{
  grid-column:3;
  justify-self:center;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:12px;
}

.header-login,
.header-phone{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:44px;
  padding:0 22px;

  border:1px solid var(--primary-1);
  border-radius:999px;

  background:#fff;
  color:var(--primary-1);

  font-size:14px;
  font-weight:700;
  line-height:1;

  text-decoration:none;
  white-space:nowrap;

  transition:
    background .18s ease,
    color .18s ease;
}

.header-login:hover,
.header-phone:hover{
  background:var(--primary-1);
  color:#fff;
}

.header-login{
  min-width:78px;
}

.header-phone{
  min-width:245px;
}


/* =========================================================
   MELLEMSTORE SKÆRME
   ========================================================= */

@media (max-width:1350px){

  .site-header .wrap.header-inner{
    grid-template-columns:300px minmax(0,1fr) 340px;
    column-gap:18px;
  }

  .site-nav{
    gap:18px;
  }

  .site-nav a{
    font-size:14px;
  }

  .header-login,
  .header-phone{
    padding:0 18px;
    font-size:13px;
  }
}


/* =========================================================
   TABLET / SMAL DESKTOP
   ========================================================= */

@media (max-width:1180px){

  .site-header .wrap.header-inner{
    grid-template-columns:1fr;
    row-gap:10px;

    padding:10px 16px;
  }

  .brand,
  .site-nav,
  .header-actions{
    grid-column:1;
    justify-self:center;
  }

  .brand img{
    height:70px;
  }

  .site-nav{
    flex-wrap:wrap;
    gap:8px 16px;
  }

  .site-nav a{
    padding:6px 0;
    font-size:14px;
  }

  .header-actions{
    flex-wrap:wrap;
  }
}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width:640px){

  .site-header{
    position:relative;
  }

  .site-header .wrap.header-inner{
    row-gap:8px;
    padding:8px 12px;
  }

  .brand img{
    height:58px;
  }

  .site-nav{
    width:100%;
    gap:6px 12px;
  }

  .site-nav a{
    padding:4px 0;
    font-size:13px;
  }

  .header-actions{
    width:100%;
    gap:8px;
  }

  .header-login,
  .header-phone{
    min-width:0;
    min-height:40px;

    padding:0 14px;

    font-size:12px;
  }

  .header-phone{
    flex:1 1 auto;
  }
}