/**
Theme Name: Child-theme-KarolineRelster
Template: astra
Version: 1.0.0
*/
body{
background:#F3ECDD!important;
color:#512E0F;
font-family:Arial, sans-serif;
}
@media (max-width:769px){

	body {
		background: #E4D9C4;
	}

	   

}


h1, h2, h3, h4, h5, h6{
	font-family:Arial, sans-serif;
font-weight:400;
	color:#512E0F !important;

	letter-spacing:-6%;
}

p {
font-family:Arial, sans-serif;
	color:#512E0F;

}

a {
font-family:Arial, sans-serif;
	letter-spacing: -6%;
		color:#512E0F !important;

}


a:visited {
	color:#512E0F !important;
	border: 1rem;
}

a:active {
	color:#512E0F !important;

}


.site-logo {
	font-size: 1.5rem !important;
	letter-spacing: -6%;
}
/* TO-TOP botton */

#ast-scroll-top {
	background-color: #512E0F;
	color: #F5EFE3;
	border-radius: 50rem;
}
/* -------------------------
SINGLE PROJECT PAGE
------------------------- */

.single-project{
   max-width: 48rem;
    margin: auto;
	padding: 2vw;
padding-top: 10vw; 

}

.back-arrow  {
	font-size: 2vw;
}

/* -------------------------
INTRO SECTION DESKTOP
------------------------- */

.project-intro{
max-width:48rem;
margin-left:auto;
margin-right:auto;
	padding-bottom:5rem;
}

.project-intro h1{

font-size: clamp(2.5rem, 3.5vw, 5.5rem);
	margin-bottom:0;
line-height:100%;
		color:#512E0F;
	font-family:Arial, sans-serif;
font-weight:400;
	letter-spacing:-6%

}

.project-year{

font-size:1rem;
margin-bottom:2rem;

}

.project-description{

line-height:1.3;
margin-bottom:2rem;
	font-family: arial;
	font-size: 1.2rem;

}

.project-reference{

font-size:0.9rem;
	line-height:1rem;
font-family: arial;
	font-style: italic;
	

}


/* -------------------------
PROJECT GALLERY
------------------------- */

.project-gallery{

display:flex;
gap:1rem;

overflow-x:auto;
overflow-y:hidden;

padding-bottom:1rem;

scroll-behavior:smooth;

}

.project-gallery{

position:relative;

width:100vw;
left:50%;
right:50%;

margin-left:-50vw;
margin-right:-50vw;

display:flex;
gap:1rem;

overflow-x:auto;
overflow-y:hidden;

padding:0 4rem 2rem 4rem;

scroll-behavior:smooth;

}
.project-gallery{

position:relative;

width:100vw;

left:50%;
margin-left:-50vw;

display:flex;
gap:1rem;

overflow-x:auto;
overflow-y:hidden;

padding:0 0 2rem 0;

scroll-behavior:smooth;

}
/* -------------------------
GALLERY ITEM
------------------------- */

.gallery-item{

flex:0 0 24rem;
aspect-ratio:4 / 5.5;

}


/* -------------------------
IMAGE & VIDEOS
------------------------- */

.gallery-item img,
.gallery-item video{

width:100%;
height:100%;

object-fit:cover;

display:block;

}


/* FJERN VIDEO CONTROLS (CHROME / SAFARI) */

.project-video::-webkit-media-controls{
display:none !important;
}

.project-gallery video::-webkit-media-controls-panel{
display:none !important;
}

.project-gallery video::-webkit-media-controls-play-button{
display:none !important;
}

.project-gallery video::-webkit-media-controls-start-playback-button{
display:none !important;
}




/* -------------------------
SCROLLBAR
------------------------- */

.project-gallery::-webkit-scrollbar{

height:0.2rem;

}

.project-gallery::-webkit-scrollbar-thumb{

background:#794A21;

}


/* -------------------------
PROJECTS MOBILE
------------------------- */


@media (max-width:769px){
	
	.single-project{
    margin: auto;
	padding: 2rem;
padding-top: 15vw; 

}
	
	.back-arrow  {
	font-size: 10vw;
}
.project-intro{
max-width:48rem;
margin-left:auto;
margin-right:auto;
	padding-bottom:5rem;

}

.project-intro h1{

font-size: clamp(2.5rem, 10vw, 5.5rem);
	margin-bottom:0;
line-height:100%;
		color:#512E0F;
	font-family:Arial, sans-serif;
font-weight:400;
	letter-spacing:-6%

}

.project-year{

font-size:3vw;
margin-bottom:2rem;

}

.project-description{

line-height:1.3;
margin-bottom:2rem;
	font-family: arial;
	font-size: 1.2rem;

}

.project-reference{

font-size:1rem;
	line-height:1rem;
font-family: arial;
	font-style: italic;
	

}
}


/* HEADER */

.site-header{
position:fixed;
top:0;
left:0;
width:100%;
padding:1.5rem 4rem;
padding-top:4rem;
background:transparent;
z-index:100;
}

.header-inner{
display:flex;
justify-content:space-between;
align-items:center;
}


/* HEADER MOBILE */

@media (max-width:769px){

	.site-header { 
		padding: 2.1rem 2rem !important;
	margin-top: 0;}

	   

}


/* DESKTOP MENU */

.desktop-menu .menu{
display:flex;
gap:2rem;
list-style:none;
margin:0;
padding:0;
}

.desktop-menu a{
text-decoration:none;
color:#512E0F;
}

/* DESKTOP MENU LINKS */

.desktop-menu a{

text-decoration:none;
color:#512E0F;

padding:.8rem 1rem; /* plads til border */

border:1px solid transparent; /* forhindrer layout shift */

border-radius:0rem;

transition:all .2s ease;

}


/* HOVER */

.desktop-menu a:hover{

border-color:#512E0F;

}


/* ACTIVE PAGE */

.desktop-menu .current-menu-item a{

border-color:#512E0F;

}

/* BURGER */

.menu-toggle{
display:none;
background:none;
border:none;
cursor:pointer;
box-shadow: none;
color: #794A21;
	transform: scale(0.75);
		padding: 0 !important;
	margin-right: 1vw;
	
}

/* OVERLAY - MOBILE *//* OVERLAY - MOBILE */


.menu-overlay{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background: #512E0F;
display:none;
z-index:9999;
padding:2.5rem 2rem;
overflow-y:auto;
}

.menu-overlay.active{
display:block;
}

.overlay-close{
position:absolute;
top:2rem;
right:1rem;
background:none;
border:none;
font-size:2rem;
color:white;
cursor:pointer;
}

.overlay-content .site-logo {
color:#F5EFE3 !important;

}
.menu-overlay .menu{
list-style:none;
padding:0;
margin:3rem 3rem 3rem 0rem;
}

.menu-overlay .menu a{
display:block;
font-size:3rem;
line-height:110%;
text-decoration:none;
color:#F5EFE3 !important;
}

/* fjern Contact fra menu */

.menu-overlay .menu li:last-child{
display:none;
}

.contact-info{
font-size:1.2rem;
line-height:1.6;
color:#F5EFE3 !important;
display:block;
font-size:2rem;
margin-bottom:1rem;
text-decoration:none;
color:#F5EFE3 !important;
}

.contact-info p{
font-size:1rem;
line-height:1.6;
color:#F5EFE3 !important;
		margin-bottom:0;

}

.contact-info a{
font-size:1rem;
line-height:1.6;
color:#F5EFE3 !important;
}
.menu-overlay .info {
	font-size: 2rem;
	line-height: 110%;
}

.menu-overlay .social-title {
	margin-top: 10vw;

}
    .menu-overlay .social-links {
display: flex;
    flex-direction: column;
			font-size: 2rem !important;
	line-height: 110% !important;

}

    .menu-overlay .social-links a {

			font-size: 2rem !important;
	line-height: 110% !important;

}
/* MOBILE */

@media (max-width:900px){

.desktop-menu{
display:none;
}

.menu-toggle{
display:block;
}

}

/* -------------------------
DESKTOP CONTACT OVERLAY
------------------------- */

.menu-overlay-desktop{

position:fixed;
top:0;
left:0;

width:100vw;
height:90vh;

background:#512E0F;
color:#F5EFE3;

display:none;
z-index:9999;

padding:4rem;

}


.menu-overlay-desktop.active{
display:block;
	
}
.menu-overlay-desktop.active{

transform:translateY(0);
opacity:1;
visibility:visible;

}


/* CLOSE BUTTON */

.overlay-close-desktop{

position:absolute;
top:2.5rem;
right:2.5rem;

font-size:2rem;

background:none;
border:none;

color:#F5EFE3;

cursor:pointer;
transition:transform .3s ease;


}

.overlay-close-desktop:hover{
transform:rotate(90deg);
background-color: transparent !important;
}


/* LOGO */

.overlay-desktop-content .site-logo{

display:block;
margin-bottom:8rem;

color:#F5EFE3 !important;
text-decoration:none;

}


/* CONTACT TITLE */

.menu-overlay-desktop h2{

font-size:1rem;
margin-bottom:0.6rem;

color:#F5EFE3;

}


/* EMAIL + PHONE */

.menu-overlay-desktop .info{

font-size:4rem;
line-height:1.05;

margin-bottom:4rem;

}


/* SOCIAL TITLE */

.menu-overlay-desktop .social-title{

font-size:1rem;
margin-bottom:0.6rem;

}


/* SOCIAL LINKS */

.menu-overlay-desktop .social-links a{

display:block;
font-size:2rem;
color:#F5EFE3 !important;
text-decoration:none;
	line-height: 100%;


}
/* DESKTOP ONLY */

@media (max-width:900px){

.menu-overlay-desktop{
display:none!important;
}

}

@media (min-width:901px){

.menu-overlay{
display:none!important;
}

}

@media (max-width:900px){

.menu-overlay-desktop{
display:none;
}

}


-----
/* PAGES CSS */


.page-intro{

max-width:700px;
margin:10rem auto 5rem auto;

}

.page-intro h1{

font-size:3rem;
margin-bottom:1rem;

}

.page-intro p{

font-size:1.1rem;
line-height:1.6;
margin-bottom:2rem;

}

.intro-button{

display:inline-block;
padding:0.8rem 1.4rem;
border:1px solid #512E0F;
text-decoration:none;
	color: #512E0F;

}


/* PROJECTS GRID */

.projects-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.5rem;
padding:0 12rem !important;
margin-bottom:6rem;

}
.project-slider{

position:relative;
aspect-ratio:4/5.5;

}

.project-slider img{

position:absolute;
width:100%;
height:100%;

object-fit:cover;

opacity:0;

transition:opacity .6s ease;

}

.project-slider img.active{

opacity:1;

}


/* PROJECT ITEM */

.project-item img{

width:100%;
height:100%;

object-fit:cover;

aspect-ratio:4/6;

display:block;

}

.page-intro{

max-width:650px;
margin:10rem auto 2rem auto;

}

.page-intro h1{

font-size: clamp(2.5rem, 4vw, 5.5rem);
margin-bottom:0.5rem;

}

.page-intro p{

line-height:1.6;
margin-bottom:2rem;

}

.intro-button{

border:1px solid #6b3d16;
padding:0.8rem 1.2rem;
text-decoration:none;
	margin:0;

}



/* PROJECTS GRID */

.projects-grid{

	
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1rem;
padding:0 4rem;
margin-bottom:6rem;
}

.project-item img{

width:100%;
height:100%;

aspect-ratio:4/6;

object-fit:cover;

display:block;

}

/* MOBILE */

@media (max-width:768px){

/* INTRO */

.page-intro{

width:85vw;
/*margin:10rem auto 1rem auto;*/

}

.page-intro h1{

font-size:15vw;
line-height:90%;
margin-bottom:1.5rem;
max-width:80vw;

}

.page-intro p{

font-size:1.1rem;
line-height:1.7;

margin-bottom:2rem;

}



/* BUTTON */

.intro-button{

display:inline-block;

padding:.8rem 1.6rem;

border:1px solid #794A21;

font-size:1.5rem;

text-decoration:none;

color:#794A21;

}



/* PROJECT GRID */

.projects-grid{

display:grid;
width: 100vw !important;
grid-template-columns:repeat(2,1fr); /* 2 billeder */

gap:0.8rem;

padding:0 7.5vw !important;

margin-bottom:6rem;

}

	

/* PROJECT IMAGE */

.project-slider{

position:relative;

aspect-ratio:4/5.5;

}
	


}

/* ABOUT PAGE */

.about-panel{

min-width:100vw;
height:100vh;

display:flex;
align-items:center;
padding:120px 80px;

scroll-snap-align:start;

}


/* ABOUT PAGE LAYOUT */

/* PAGE */

.about-page{

width:90vw;
max-width:80rem;

margin:auto;

padding-top:10rem;
padding-bottom:10rem;

display:flex;
flex-direction:column;


}

/* PAGE */

.about{

width:90vw;
max-width:80rem;

margin:auto;

padding:10rem 0;

display:flex;
flex-direction:column;

}



/* HERO */

.about-hero{

display:flex;
justify-content:center;
margin-bottom:3rem;

}

.about-container{

max-width:42rem;

}

.about-hero h1{

font-size:4vw;
margin-bottom:1rem;

}

.about-hero{

font-size:1.1rem;
line-height:1.7;

margin-bottom:1.5rem;
		padding-bottom: 3vw;


}

.about .intro {
}



/* BUTTONS */

.about-buttons{
  display: flex;
  width: 100%;
  gap: 1vw;           
	/* afstand mellem knapper i rem */
}
.about-buttons .intro-button{
  flex: 1 1 0;               /* deler plads ligeligt */
  text-align: center;
  padding: 1.5rem !important;     /* rem-baseret padding */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
		margin-top: 1vw;

}


/* SKILLS SECTION CONTAINER */

.skills{

max-width:45rem;
margin:auto;

/* styrer afstand mellem hver dropdown */
gap:0.9vw;          /* ↓ GØR MINDRE hvis de skal være tættere */
display:flex;
flex-direction:column;
margin-top:3rem;


}



/* SELVE DROPDOWN ITEM */

.skill{

cursor:pointer;

/* styrer afstand over/under hvert punkt */
padding:.1rem 0;   /* ↓ juster hvis der skal være mere/mindre luft */

}



/* HEADER (tekst + pil) */

.skill-header{

display:flex;
justify-content:space-between;
align-items:center;
	padding-bottom: 0.5rem;

}

.experience .skill-header{

	padding-bottom: 0rem;

}


/* TITEL */

.skill h3{

font-size:3vw;

/* afstand mellem titel og næste dropdown */
margin:0;          /* vigtigt for kompakt layout */

}



/* PIL */

.arrow{

width:1.2rem;
height:1.2rem;

/* animation når dropdown åbner */
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



/* pil roterer når aktiv */

.skill.active .arrow{

transform:rotate(90deg);

}



/* DROPDOWN TEKST */

.skill-content{

max-height:0;
overflow:hidden;
	transition:
max-height 0.5s ease,
opacity 0.3s ease,
transform 0.3s ease;

/* animation for dropdown */
transition:max-height .35s ease;

/* afstand mellem titel og tekst */
margin-top:.6rem;

/* tekst styling */
font-size:1.1rem;
line-height:1.6;



}

/* ACTIVE STATE */



/* når dropdown er aktiv */

.skill.active .skill-content{

max-height:10vw; /* ↑ juster hvis teksten bliver længere */
padding-top: 1vw;
	padding-bottom: 1vw;
	opacity:1;
transform:translateY(0);
	
}



.experience .skill.active .skill-content{

padding-top: 1vw;
	padding-bottom: 0vw;
	
}
.skill-content {
		margin: 0;
	}
	
	.skill-wrapper {
		border: 1px solid;
padding: 1vw;
	}

.skill-wrapper h3 {
	font-size: 2vw;
}
.skill-wrapper p {
	font-size: 0.78vw;
}

/* MOBILE */
@media (max-width:768px){
	
	
.about{

width:85vw;

margin:auto;


display:flex;
flex-direction:column;


}

	/* TITEL */

.skill h3{
font-size:6vw;
}
	
.skill-wrapper p {
font-size: 1.1rem;}
	
	
.skill-wrapper {
		padding: 4vw;
	}
.about-hero h1{

font-size:15vw;
margin-bottom:2rem;
	max-width: 80vw;
	line-height:90%;

}

.about-hero p{

font-size:1.1rem;
line-height:1.7;


}

.desktop p{
	display: none !important;
	}





}
/* default = desktop */

.skill-content.mobile{
display:none;
}

.skill-content.desktop{
display:block;
}


/* MOBILE */

@media (max-width:768px){

.skill-content.desktop{
display:none;
}

.skill-content.mobile{
display:block;
}

}

/* AUTO SCROLL */

	.auto-scroll-gallery{
display:flex;
gap:1rem;

overflow-x:auto;
overflow-y:hidden;

scroll-behavior:smooth;
}


.button-about {
	padding: 4vw !important;
	line-height: 1;
}

/* -------------------------
FRONT PAGE
------------------------- */

.front-page{
padding-top:6rem;
}


/* HERO */

.hero{

min-height:50vh;

display:flex;
flex-direction:column;
justify-content:end;
padding:0 12rem;
align-items: flex-start;


}

.hero-title{

font-size:clamp(2.5rem,5vw,5rem);
line-height:1.05;

max-width:900px;

}

.hero-sub{

margin-top:1.5rem;

font-size:1.2rem;
max-width:500px;

opacity:0.8;

}


.hero-title{
font-size:clamp(2.5rem,5vw,5rem);
line-height:90%;
max-width:900px;
}

.front-contact {
	align-items: flex-start

}


/* cursor */

.cursor{
display:inline-block;
width:2px;
height:1em;
background:#512E0F;
margin-left:5px;

animation: blink 1s infinite;
}

@keyframes blink{
50%{ opacity:0 }
}




.project-item{
display:block;
overflow:hidden;
}

.project-item img{

width:100%;
height:100%;

aspect-ratio:4/5.5;

object-fit:cover;

display:block;

}


/* ABOUT */

.front-about{

max-width:600px;
margin:6rem auto;

text-align:center;

}

.hero-title{
text-rendering:optimizeLegibility !important;
-webkit-font-smoothing:antialiased !important;
	white-space:pre-line;
	

}

/* MOBILE */

@media(max-width:900px){

.hero{
padding:0 2rem;

}

.front-projects{
grid-template-columns:1fr;
padding:0 2rem 4rem;
}
	

	
	.hero-title{
line-height:1.1;
	font-size: 2.5rem !important;
}
	
	.hero-title{
text-rendering:optimizeLegibility !important;
-webkit-font-smoothing:antialiased !important;
}


animation: blink 1s infinite;
}
	
	#typewriter {
		white-space: pre-line;
	}

}

.page-intro{
margin:10rem auto 0 auto !important;
}

.projects-grid{
margin-top:6rem !important;
}


.hero .projects-grid:hover {
  cursor: pointer; /* A hand icon, commonly used for links/buttons */
	
	
}


.page-intro{
min-height: 20vw;
}

.hero-title{
line-height:1.1
}

.hero-title .line{
display:block;
}

.skill-content{
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}

/* når aktiv */

.skill.active .skill-content{
max-height: 1000px; /* 👈 vigtig */
	padding-top: 1rem;
padding-bottom: 2rem;
}


/* skjul default cursor på projekter */

.project-item{
cursor:none;
}


/* custom cursor */

.cursor-explore{
position:fixed;
top:0;
left:0;

width:80px;
height:80px;

border:1px solid #512E0F;
border-radius:50%;

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

font-size:12px;
letter-spacing:0.05em;

color:#512E0F;

pointer-events:none;

transform:translate(-50%, -50%) scale(0);

transition:
transform .2s ease,
opacity .2s ease;

z-index:9999;

background:transparent;
backdrop-filter: blur(10px);}


/* aktiv (hover) */

.cursor-explore.active{
transform:translate(-50%, -50%) scale(1);
}


/* skjul på mobile */

@media (max-width:768px){
.cursor-explore{
display:none;
}
}

/* -------------------------
FOOTER (MATCH OVERLAY)
------------------------- */

.site-footer{

background:#512E0F;
color:#F5EFE3;

padding:6rem 4rem;

}


/* WRAPPER */

.footer-content{
max-width:700px;
}


/* LOGO */

.site-footer .site-logo{

display:block;

margin-bottom:6rem;

color:#F5EFE3;
text-decoration:none;

}


/* CONTACT TITLE */

.site-footer h2{

font-size:1rem;
margin-bottom:1rem;

color:#F5EFE3 !important;

}


/* INFO (stor tekst) */

.site-footer .info{

font-size:3.5rem;
line-height:1.05;

margin-bottom:4rem;

}


/* SOCIAL */

.site-footer .social-title{

font-size:1rem;
margin-bottom:1rem;

}

.site-footer a{

display:block;

font-size:2rem;
line-height:1;
color:#F5EFE3 !important;
text-decoration:none;
margin-bottom:.5rem;

}

/* FOOTER = overlay style på mobile */

@media (max-width:768px){

.site-footer{
padding:7.5vw;
	padding-top: 12vw;
}
	
.site-footer .info{

font-size:3rem;
line-height:1.05;

margin-bottom:4rem;

}

	

/* gør footer som overlay */

.site-footer .menu-overlay{

position:relative;

display:block !important;

transform:none !important;

height:auto;

padding:4rem 2rem;

background:#6b3d16;
color:#F5EFE3;

}

}

/* -------------------------
HORIZONTAL SCROLL IMAGE
------------------------- */

.horizontal-scroll{

width:100%;

overflow-x:auto;
overflow-y:hidden;

padding:2rem 0;

scroll-behavior:smooth;

}


/* IMAGE */

.horizontal-scroll img{

height:80vh;
width:auto;

display:block;

max-width:none; /* 🔥 vigtig */

}


/* SCROLLBAR */

.horizontal-scroll::-webkit-scrollbar{
height:2px;
}

.horizontal-scroll::-webkit-scrollbar-thumb{
background:#512E0F;
}