@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Playfair+Display:wght@400;700&family=Pacifico&display=swap');

:root{
    /* Farger */
    --primary: #3B82F6;
    --secondary: #1E3A8A;
    --bg: #F9FAFB;
    --surface: #FFFFFF;
    --text: #111827;

    /* Font */
    --font-base: 'Poppins', sans-serif;
    --font-size-small: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.25rem;
    --font-size-lg: clamp(1.8rem, 3vw, 2.5rem);
    --font-size-xl: clamp(2.5rem, 4vw, 3.5rem);
    --line-height: 1.7;

    /* Spacing */
    --space-1: .5rem;
    --space-2: 1rem;
    --space-3: 2rem;
    --space-4: 4rem;
    --space-5: 6rem;

    /* Border radius og skygger */
    --radius: .75rem;
    --shadow-soft: 0 4px 18px rgba(0,0,0,.18);
    --shadow-strong: 0 8px 30px rgba(0,0,0,.3);
}

html, body{
    overscroll-behavior-y: none;
}

body{
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    display: flex;
    flex-direction: column;
    background-color: var(--bg);
}

nav{
    background-color: var(--surface);
    display: flex;
    text-align: center;
    gap: var(--space-1);
    padding:0 var(--space-1);
    overflow-x: auto;
    align-items: center;
    border-bottom: 2px solid #BFDBFE;
}

.nav_logo img{
    max-width: 8em;
}

nav a{
    text-decoration: none;
    background-color:transparent;
    color: var(--text);
    flex: 0 0 3rem;
    padding: 0.2em 0.3em;
    margin: 0 var(--space-1);
    border: 0.2em var(--surface);
    border-radius: var(--radius);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

nav a.new-year-dot{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--space-1);
  width: 4rem;
}

nav a.new-year-dot .dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--blue-main);
  box-shadow: 0 0 0 0 rgba(59,130,246,0.5);
  animation: pulseDot 2.4s ease-in-out infinite;
}

.selected_year{
    background-color: var(--primary);
    color: var(--surface);
}

nav a:hover{
    background-color: var(--primary);
    color: var(--surface);
    transform: translateY(-2px);
}

@keyframes pulseDot{
  0%,100%{ box-shadow:0 0 0 0 rgba(59,130,246,.0); }
  50%    { box-shadow:0 0 0 6px rgba(119, 176, 242, 0.5); }
}

@media (prefers-reduced-motion: reduce){
  nav a.new-year-dot .dot{ animation:none; }
}

main{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-4) var(--space-3);
    gap: var(--space-4);
    background-color: var(--bg);
    color: var(--text);
    flex: 1;
}

.overskrift{
    display: flex;
    flex-direction: column;
    text-align: center;
}

.overskrift h1{
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-2);
}

.overskrift p{
    font-size: var(--font-size-md);
    color: #555;
}

.galleri{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    width: min(90%, 1100px);
}

.galleri img{ 
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    max-width: 80%;
    max-height: 80vh;
}

.galleri a{
    display: flex;
    justify-content: center;
}

.galleri img:hover{
    transform: translateY(-4px); 
    box-shadow: var(--shadow-strong);
}

.bakgrunn_2027{
    position: relative;
    background: url("images/cervinia.jpg") center / cover no-repeat;
}

.bakgrunn_2027::before{
    content: "";
    background-color: rgba(45, 45, 45, 0.4);
    z-index: 0;
    inset: 0;
    position: absolute;
}

.rom{
    height: var(--space-4)
}

footer{
    background-color: var(--secondary);
    padding: var(--space-2);
    color: #ffffffa2;
    border-top: 2px solid #193178;
}


@media screen and (max-width: 750px) {
    .rom{
        height: var(--space-5);
    }
}