/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/

/* Theme Name: Uncode Child
   Description: Child theme for Uncode theme
   Author: Undsgn™
   Author URI: http://www.undsgn.com
   Template: uncode
   Version: 1.0.0
   Text Domain: uncode */

/* =========================
   VANEDYR – LAYOUT & STIL
   (font styres av temaet)
   ========================= */

/* Wrapper */
.vd-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:12vh 16px 16vh;
  text-align:center;
}

/* HERO (stor, hvit tittel – ingen font-regler) */
.vd-hero{
  text-transform:uppercase;
  font-size:120px !important;
  line-height:1.05;
  letter-spacing:.02em;
  color:#fff !important;
  text-shadow:0 3px 28px rgba(0,0,0,.45);
  margin:0 0 34px !important;
  text-align:center;
}

/* Knapperad */
.vanedyret-row.vd-html{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:60px; /* avstand mellom knappene */
  flex-wrap:wrap;
  margin-top:6px;
}

/* ===== Firkantede, mindre knapper (ingen flikk) ===== */
.vd-cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:26px !important; /* mindre tekst */
  line-height:1;
  min-width:520px; /* lang, slank knapp */
  height:64px; /* lavere høyde */
  color:#fff !important;
  background:#00828d !important;
  border:none !important;
  border-radius:0 !important; /* ← rette hjørner */
  padding:0 40px !important;
  box-shadow:0 14px 24px rgba(0,0,0,.20) !important;
  overflow:visible;
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

/* Fjern eventuelle tidligere pseudo-elementer (chevron/flikk) */
.vd-cta::before,
.vd-cta::after{
  content:none !important;
  display:none !important;
}

.vd-cta:hover{
  filter:brightness(1.06);
  transform:translateY(-2px);
  box-shadow:0 20px 34px rgba(0,0,0,.24) !important;
}

.vd-cta:active{
  transform:translateY(0);
}

/* ===== Popup-overlay ===== */
.vd-result{
  position:fixed !important;
  inset:0;
  width:100vw;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,.25);
  padding:20px;
  z-index:999999;
}

.vd-result[hidden]{
  display:none !important;
}

.vd-panel{
  background:rgba(0,130,141,.92);
  color:#fff;
  width:min(100%,920px);
  padding:42px clamp(20px,4vw,56px);
  border-radius:10px;
  box-shadow:0 22px 54px rgba(0,0,0,.35);
  text-align:center;
  -webkit-column-count:1 !important;
  column-count:1 !important;
}

/* Panel-overskrift (ingen font-regler) */
.vd-panel-title{
  text-transform:uppercase;
  font-size:56px;
  line-height:1.08;
  margin:0 0 12px;
}

/* Panel-tekst */
.vd-panel-lead{
  font:700 22px/1.5 "Roboto",system-ui,sans-serif;
  margin:0 0 18px;
}

.vd-panel p{
  font:400 20px/1.6 "Roboto",system-ui,sans-serif;
  margin:10px 0;
}

.vd-panel-cta{
  display:inline-block;
  margin-top:18px;
  padding:14px 28px;
  font-size:22px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  border:2px solid #fff;
  border-radius:8px;
}

.vd-panel-cta:hover{
  background:rgba(255,255,255,.12);
}

/* Lås scroll når overlay er åpen */
body.vd-open{
  overflow:hidden;
}

/* ===== Responsiv ===== */
@media (max-width:1280px){
  .vd-hero{
    font-size:96px !important;
  }
  .vd-cta{
    min-width:460px;
    height:60px;
    font-size:24px !important;
  }
}

@media (max-width:1024px){
  .vd-hero{
    font-size:84px !important;
  }
  .vd-cta{
    min-width:420px;
    height:56px;
    font-size:22px !important;
  }
  .vanedyret-row.vd-html{
    gap:40px;
  }
}

@media (max-width:768px){
  .vd-hero{
    font-size:56px !important;
    margin-bottom:18px !important;
  }
  .vanedyret-row.vd-html{
    gap:24px;
  }
  .vd-cta{
    min-width:260px;
    height:50px;
    font-size:18px !important;
    padding:0 24px !important;
  }
  .vd-panel{
    padding:28px 20px;
  }
  .vd-panel-title{
    font-size:38px;
  }
  .vd-panel-lead{
    font-size:18px;
  }
  .vd-panel p{
    font-size:18px;
  }
}

/* — hero kan du beholde — hvis du vil ha den litt større: */
.vd-hero{
  text-transform: uppercase;
  font-size: 120px !important; /* juster om ønskelig */
  line-height: 1.05;
  letter-spacing: .02em;
  color: #fff !important;
  text-shadow: 0 3px 28px rgba(0,0,0,.45);
  margin: 0 0 28px !important;
  text-align: center;
}

/* — knapperad: side-om-side — */
.vanedyret-row.vd-html{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px; /* avstand mellom knappene */
  flex-wrap: nowrap; /* tving side-om-side på store skjermer */
  margin-top: 6px;
}

/* — knapper: smalere, høyere tekst, rene firkanter — */
.vd-cta{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 70px !important; /* STØRRE tekst */
  line-height: 1;
  min-width: 320px; /* SMALERE knapp */
  height: 76px; /* slank profil */
  padding: 0 32px !important;
  color: #fff !important;
  background: #00828d !important;
  border: none !important;
  border-radius: 0 !important; /* rette hjørner */
  box-shadow: 0 14px 24px rgba(0,0,0,.20) !important;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

/* sikkerhet: fjern evt. gamle chevron-pseudoer */
.vd-cta::before,
.vd-cta::after{
  content: none !important;
  display: none !important;
}

.vd-cta:hover{
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 20px 34px rgba(0,0,0,.24) !important;
}

/* — responsiv: stack på smal skjerm — */
@media (max-width: 900px){
  .vanedyret-row.vd-html{
    flex-wrap: wrap;
    gap: 18px;
  }
  .vd-cta{
    min-width: 260px;
    height: 64px;
    font-size: 24px !important;
    padding: 0 24px !important;
  }
}



/* =========================
   VANEDYR – MOBIL (≤ 600px) OVERRIDES
   ========================= */
@media (max-width: 600px){

  /* litt tettere layout på mobil */
  .vd-wrap{
    padding: 56px 12px 72px !important;
  }

  /* STØRRE heading på mobil */
  .vd-hero{
    font-size: 72px !important;          /* stor, som i mockupen */
    margin-bottom: 14px !important;
    line-height: 1.06;
  }

  /* to små knapper VED SIDEN AV HVERANDRE på mobil */
  .vanedyret-row.vd-html{
    flex-wrap: nowrap !important;         /* tving side-by-side */
    gap: 12px !important;
  }

  .vd-cta{
    flex: 0 0 calc(50% - 6px) !important; /* to like brede */
    min-width: 0 !important;              /* overstyr tidligere min-width */
    height: 48px !important;              /* mindre høyde */
    font-size: 34px !important;           /* mindre tekst */
    padding: 0 12px !important;           /* smal padding */
    box-shadow: 0 10px 18px rgba(0,0,0,.18) !important;
  }
}

/* Ekstra stramt for veldig smale skjermer (≤ 360px) */
@media (max-width: 360px){
  .vd-hero{ font-size: 64px !important; }
  .vd-cta{ height: 44px !important; font-size: 16px !important; }
}

/* ===== VANEDYR: Panel-stil som i mockup (alt hvitt) ===== */
.vd-panel{
  /* bredere panel på desktop, god padding */
  width: min(96vw, 1200px);
  padding: clamp(24px, 5vw, 72px) clamp(16px, 4vw, 64px);
  border-radius: 12px;
  text-align: center;                 /* sentrert innhold */
  color: #fff !important;             /* fallback for alt */
}

/* Stor, hvit tittel (Atrament via tema) */
.vd-panel-title{
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 800;
  font-size: clamp(50px, 8vw, 120px);  /* mobil → desktop */
  line-height: 1.06;
  margin: 0 0 clamp(12px, 2vw, 24px);
}

@media (min-width: 1200px){
  .vd-panel-title{
    font-size: 100px !important;
  }
}


/* Hvit ingress / mellomtittel */
.vd-panel-lead{
  color: #fff !important;
  font-weight: 500;
  font-size: clamp(18px, 3.2vw, 40px);
  line-height: 1.35;
  margin: 0 0 clamp(12px, 2vw, 22px);
}

/* Brødtekst – stor og lettlest, hvit */
.vd-panel p{
  color: #fff !important;
  font-size: clamp(16px, 2.4vw, 30px);
  line-height: 1.55;
  margin: clamp(8px, 1.4vw, 16px) 0;
}

/* CTA – hvit kant og hvit tekst, litt større */
.vd-panel-cta{
  color: #fff !important;
  border: 3px solid #fff !important;
  border-radius: 8px;
  text-transform: uppercase;
  font-weight: 800;
  font-size: clamp(16px, 2.2vw, 40px);
  padding: clamp(10px, 1.2vw, 16px) clamp(18px, 2.2vw, 20px);
  text-decoration: none;
}
.vd-panel-cta:hover{
  background: rgba(255,255,255,.12);
}

/* Sikre at evt. <strong>, <a> osv. holder seg hvite */
.vd-panel a,
.vd-panel strong,
.vd-panel em{
  color: #fff !important;
}