/* -------------------------
GLOBAL
------------------------- */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#ffffff;

overflow-x:hidden;
}

/* -------------------------
header
------------------------- */
header{
color: white;
}


/* -------------------------
NAVIGATION
------------------------- */

#sidebar{
background:#DEDEDE;
color:black;
height:100%;
width:260px;
position:fixed;
left:0;
top:0;
padding:25px;
z-index:1000;
transition:transform 0.3s ease;
}

#sidebar a{
color:black;
text-decoration:none;
display:block;
margin:14px 0;
}
#sidebar a:hover {
    font-weight: bold;           /* Makes text bold */
    text-decoration: underline;  /* Optional: underline on hover */
}

#menuButton{
display:block;
background:none;
border:none;
color:black;
font-size:1.4rem;
margin-bottom:20px;
cursor:pointer;
}

/* -------------------------
MAIN
------------------------- */

main{
margin-left:260px;
scroll-snap-type:y mandatory;
}


/* -------------------------
CONTENT
------------------------- */

.content{
position:relative;
text-align:center;
max-width:900px;
padding:2rem;
opacity:0;
transform:translateY(40px);
transition:all 0.8s ease;
z-index:3;
}

.card.visible .content{
opacity:1;
transform:translateY(0);
}

h1{
font-size:clamp(2.5rem,6vw,4.5rem);
letter-spacing:-0.03em;
}

p{
font-size:clamp(1.1rem,2vw,1.4rem);
opacity:0.85;
margin-top:1rem;
line-height:1.6;
}

.hint{
margin-top:1.5rem;
font-size:0.95rem;
opacity:0.75;
}

/* -------------------------
BUTTONS
------------------------- */

.button{
display:inline-block;
margin-top:24px;
padding:12px 24px;
background:#4F7FFF;
color:#ffffff;
border-radius:8px;
font-size:0.95rem;
font-weight:600;
}

.button: hover{
background:#ffffff;
color:#000000;
}


/* -------------------------
SPACER
------------------------- */

.spacer{
height:22px;
background:#FFFFFF;
}

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

@media (max-width:900px){

#sidebar{
background:#DEDEDE;
color:black;

height:100%;
width:260px;

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

padding:80px 25px 25px 25px;

z-index:1000;

transform:translateX(0);
transition:transform 0.35s ease;
}

#sidebar.closed{
transform:translateX(-100%);
}

#sidebar a{
color:black;
text-decoration:none;
display:block;
margin:14px 0;
}

#sidebar.open{
transform:translateX(0);
}

#menuButton{
position:fixed;
top:20px;
left:20px;
z-index:1100;

background:#ffffff;
color:black;

border:none;
font-size:1.6rem;

padding:10px 14px;
border-radius:6px;

cursor:pointer;
}

main{
margin-left:0;
}

}
/* -------------------------
HEADER IMAGE (Google Sites style)
------------------------- */

.page-header{
position:relative;
width:100%;
height:33vh; /* about 1/3 of screen */
min-height:220px;
max-height:420px;
overflow:hidden;
}

/* Image handling (auto crop magic) */
.page-header img{
position:absolute;
width:100%;
height:100%;
object-fit:cover; /* THIS fixes bad image sizes */
object-position:center;
}

/* Dark overlay for readability */
.page-header::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
to bottom,
rgba(0,0,0,0.2),
rgba(0,0,0,0.6)
);
}

/* Text on top */
.header-content{
    color: white;
position:relative;
z-index:2;
height:100%;

display:flex;
flex-direction:column;
justify-content:flex-end;

padding:30px;
}

.header-content h1{
font-size:clamp(2rem,5vw,3rem);
margin-bottom:10px;
}

.header-content p{
opacity:0.85;
font-size:1.1rem;
}
/* -------------------------
FOOTER
------------------------- */
  footer{
background: ffffff;
color: black;
margin-left:260px;
width:calc(100% - 260px);
}
  @media (max-width: 768px){

main{
margin-left:0;
}

footer{
margin-left:0;
width:100%;
}

}
/* -------------------------
BUTTON CONTAINER (centers in main content)
------------------------- */

.button-container{
width:100%;
display:flex;
justify-content:center;
gap:20px;
margin:40px 0;
flex-wrap:wrap;
}

/* -------------------------
BASE BUTTON
------------------------- */

.btn{
display:inline-block;
padding:14px 28px;

background:#F7F7F7;
color:#000000;

border-radius:8px;
text-decoration:none;
font-size:1rem;
font-weight:600;

transition:all 0.25s ease;
}

/* HOVER EFFECT */

.btn:hover{
background:#e6e6e6;
transform:translateY(-2px);
}

/* -------------------------
SECONDARY BUTTON
------------------------- */

.btn.secondary{
background:white;
color:black;
border:2px solid black;
}

.btn.secondary:hover{
background:#e6e6e6;
color:white;
}