/*
Theme Name: Aviruna
Description: Custom WordPress theme based on Aviruna layout.
Version: 1.0
*/

:root{
  --sky:#1F4E5F;
  --earth:#1F4E5F;
  --leaf:#6B7D4F;
  --gold:#E39556;
  --white:#E39556;
  --content-width:1200px;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family: Arial, sans-serif;
  background: linear-gradient(to bottom, var(--leaf) 50%, var(--sky) 75%);
  color:#222;
}

.site-header{
  background:var(--sky);
  min-height:120px;
}
.header-inner{
  max-width:var(--content-width);
  margin:auto;
  display:flex;
  align-items:center;
  align-content: center;
  justify-content:center;
  padding:20px;
}
.logo img{
  max-height:200px;
  width:auto;
}

.main-nav{
  background: linear-gradient(to bottom, var(--sky) 0%, var(--leaf) 100%);
}


.main-nav ul{
  list-style:none;
  display:flex;
  justify-content:center;
}
.main-nav a{
  display:block;
  color:#fff;
  text-decoration:none;
  padding:12px 20px;
}

.site-content{
  max-width:var(--content-width);
  margin:40px auto;
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:40px;
}

.content-area article,
.widget-area .widget{
  background:rgba(255,255,255,0.85);
  color:#222;
  padding:35px;
  margin-bottom:35px;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.widget-title{
  margin:-35px -35px 25px;
  padding:15px 25px;
  background:#1F4E5F;
  color:white;
  border-radius:20px 20px 0 0;
  font-size:1.3rem;
}

.widget-area{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.site-footer{
  background:var(--earth);
  color:#fff;
  text-align:center;
  padding:40px 20px;
  margin-top:40px;
}

/* Hamburger standaard verborgen op desktop */
.menu-toggle {
  display: none;
}


/* Alleen mobiel */
@media(max-width:768px){

  .menu-toggle{
    display:block;
    width:100%;
    text-align:center;
    background:linear-gradient(to bottom, var(--sky) 0%, var(--leaf) 100%);;
    color:#fff;
    border:none;
    font-size:32px;
    padding:12px;
    cursor:pointer;
  }

  .main-nav{
    width:100%;
    background:linear-gradient(
      to bottom,
      var(--sky) 0%,
      var(--leaf) 100%
    );
  }

  .main-nav ul{
    display:none;
    flex-direction:column;
    width:100%;
    background:#000;
  }

  .main-nav ul.open{
    display:flex;
  }

  .main-nav li{
    width:100%;
  }

  .main-nav a{
    display:block;
    color:#fff;
    text-align:center;
    padding:15px;
    text-decoration:none;
  }

  .main-nav a:hover{
    background:#222;
  }
	
   .site-content{
    grid-template-columns:1fr;
  }

	.logo img{
    max-width:100%;
    height:auto;
  }

}
	
}