/*
    CSS file created by Lars Skjærbæk
*/

body {
    width: 100%;
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;
    margin: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #0b3d0b;
    color: white;
    text-align: center;
}

#nav {
    width: 100%;
    margin: auto;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: transparent;
    text-align: center;
}

#section {
        display: flex;
        text-align: left;
        width: 100%;
        margin: 0;
        gap: 2%;
}

.text-card {
    flex: 1;
    order: 1;
}

.section-image {
    width: 40%;
    order: 2;
    object-fit: cover;
    border-radius: 8px;
}

#aside {
    float: left;
    text-align: center;
    width: 36%;
    margin: 2%;
}

#footer {
    float: left;
    width: 100%;
    margin: auto;
    padding-top: 1px;
    padding-bottom: 1px;
    background-color: #0b3d0b;
    color: white;
    text-align: center;
}

#menu {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #2e7d32;
}

.menuPunkt {
    float: left;
}

.menuPunkt a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background-color: transparent;
}

.menuPunkt a:hover {
    background-color: #145214;
}

/* mobil optimeret design */
@media screen and (max-width: 800px) {

    #section {
      width: 100%;
      margin: auto;
    }

    #aside {
      width: 100%;
      margin: auto;
    }

}

/* Gallery & modern tweaks */
#cv-gallery {margin-top:1rem}
/* Gallery: responsive grid that spreads images and avoids empty placeholders */
.cv-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:0}
.cv-gallery figure{margin:0;background:#fff;border-radius:8px;overflow:hidden;border:1px solid #eee;padding:0}
.cv-gallery img{display:block;width:100%;height:200px;object-fit:cover}
.cv-gallery figcaption{padding:.5rem;font-size:.9rem;color:#444;text-align:center}

/* Slight header/nav polish */
#header{padding:0.8rem 0}
#nav{background:linear-gradient(90deg,#00796b,#66bb6a)}
.menuPunkt a{background:transparent;padding:10px 14px;border-radius:6px}

@media screen and (max-width: 520px) {
    .cv-gallery img{height:160px}
}

/* Enhanced 'kant' layout: cards, shadows, subtle transitions */
body{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(180deg,#f7fbf7 0%, #eef8ee 100%);
    color: #08320a;
}

#header{
    box-shadow: 0 6px 20px rgba(6,40,18,0.12);
    border-bottom: 3px solid rgba(255,255,255,0.03);
}

#menu{    
    box-shadow: 0 6px 18px rgba(10,60,10,0.06);
    border-radius: 10px;
    display: inline-block;
    padding: 6px 8px;
}

.menuPunkt a{
    transition: transform .14s ease, box-shadow .14s ease, background-color .14s;
}
.menuPunkt a:hover{
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(6,50,20,0.12);
}

/* Make main content and sidebar look like cards */
/* revert card look for section/aside to previous simpler layout */
#section, #aside{
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* profile image: remove heavy border/shadow and allow inline placement */
#aside img{
    border-radius: 0;
    box-shadow: none;
}

/* Profile box: image left, caption to the right */
.profile-box{display:flex;align-items:center;gap:0.6rem;justify-content:flex-start}
.profile-box img{width:90px;height:90px;object-fit:cover;border-radius:0;box-shadow:none}
/* caption removed */

#footer{
    margin-top: 1.2rem;
    border-top: 1px solid rgba(0,0,0,0.06);
}

/* Slight spacing & typography tweaks for headings */
h1, h2, h3{letter-spacing:0.2px}
h1{font-size:1.8rem}
h2{font-size:1.2rem}

@media screen and (max-width:800px){
    #section, #aside{box-shadow:none;padding:.9rem;border-radius:8px;width:100%;margin:auto;float:none}
    .profile-box img{width:100px;height:100px}
}

/* Text card used on pages like fritidsinteresser */
.text-card{
    border:2px solid #2e7d32;
    padding:1rem 1.1rem;
    border-radius:8px;
    background:transparent;
    overflow:auto; /* ensure floated images are contained inside the frame */
}

.text-card h2{margin-top:0}

/* Section images: float to the right and scale on small screens */
.section-image{float:right;width:140px;height:140px;object-fit:cover;margin-left:1rem;border-radius:6px}
@media screen and (max-width:800px){
    .section-image{float:none;display:block;margin:0 auto 1rem auto;width:70%;height:auto}
}

/* Bottom/full-width section image for hobby page */
.section-bottom-image{float:right;width:140px;height:140px;object-fit:cover;margin-left:1rem;border-radius:6px;margin-top:0}
@media screen and (max-width:800px){
    .section-bottom-image{float:none;display:block;margin:0 auto 1rem auto;width:70%;height:auto}
}