:root {
    --menu-bg-color: #2F2F2F;
    --primary-bg-color: #272727;
    --categories-bg:  #FB669E/*#085883*/;
    --project-button-bg:  #D0D0D0/*#087583*/;
    --text-color-bright: #EBEBEB;
    --text-color-dark: #000000;
    --shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
}


/* --- Font Definitions --- */
@font-face {
    font-family: feroniapi;
    src: url('https://katihyyppa.com/fonts/feroniapi-main/fonts/woff2/Feroniapi-MediumItalic.woff2') format('woff2'),
        url('https://katihyyppa.com/fonts/feroniapi-main/fonts/woff/Feroniapi-MediumItalic.woff') format('woff');
}

@font-face {
    font-family: poppins;
    src: url('https://katihyyppa.com/fonts/poppins/Poppins-Regular.otf') format('opentype');
}

* { /*-------- no highlighting -----*/
  -webkit-tap-highlight-color: transparent;
}

/* --- Base HTML/Body Styles --- */
html:focus, body:focus {
    outline: none !important;
}


html {
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
    background-color: var(--primary-bg-color);
    color:var(--text-color-bright);
    font-size: 20px;
}

body {
    padding: 0;
    margin: 0;
    background-color: var(--primary-bg-color);
    color:var(--text-color-bright);
}
 
body ::-moz-selection { /* Firefox-specific Text selection style */}

body ::selection {  /* Standard Text selection style */}

body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}
body.loaded {
    opacity: 1 !important;
    transition: opacity .5s ease-in;
}


/* --- Anchor Tag (Link) Styles --- */
a:link, a:visited, a:hover, a:active{
    /* unvisited link */
    text-decoration: none;
    font-weight: normal;
    color: var(--text-color-bright);
}

/* --- Menu Bar --- */
#menu-bar {
    font-family: feroniapi;
    background: var(--menu-bg-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    transition: height .2s;
    z-index: 1000;
}

.clickable {
    cursor: pointer;
}

/* --- Menu overlay --- */
 
#menu-overlay {
    font-family: feroniapi;
    position: fixed;
    top: 0;
    left: 0;  
    width: 100vw; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 

    height: 100vh; 
    height: 100svh; 

    background-color: var(--menu-bg-color);

    transform: translateY(-100%); /* Initial state: Hidden above the viewport, using the same offset unit */
    
    transition: transform 0.4s ease-in-out;
    z-index: 1001;
    visibility: hidden;
}


#menu-overlay.open { /* Final state: visible in the viewport */
    transform: translateY(0);
}

#close-menu{
    position:absolute;
}



#overlay-menu-list {
    flex-grow: 1;           /* Takes up the remaining height of the overlay */
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    justify-content: center;/* Centers items vertically */
    align-items: center;    /* Centers items horizontally */
    list-style: none;       /* Removes bullet points */
    padding: 0;
    margin: 0;
}

#overlay-menu-list li {
    padding: 50px;          /* Adds spacing between items */
    color: var(--text-color-bright);
}

/* --- Headline --- */
#headline {
    font-family: feroniapi;
    text-align: center;
    color: var(--text-color-bright);
}

/* --- Category Selector Bar --- */
#categories-wrapper {
    width: 100%;
    position: sticky;

    z-index: 999;
}


#categories { /* default: One Line */
    font-family: poppins;
    position: relative;
    margin: 0 auto;
    background: var(--categories-bg);
    display: flex;
    /*justify-content: space-between;*/ /* no gaps at the edges */
    justify-content: space-evenly;      /* equal gaps at edges and between items */
    align-items: center;
    flex-wrap: wrap;
    transition: padding .2s;
    box-shadow: var(--shadow);
}

 
#categories.is-stacked { /* vertical stacked */
    flex-direction: column;
    align-items: flex-start;
}

#upDown {
    position: absolute; 
}

.category-item {
    color: var(--text-color-dark);
    transition: color 0.1s ease-in-out;
    height:100%
}

.category-item.selected {
   /* color: var(--text-color-bright);*/
   text-decoration: underline;
}

/* --- Project Content Grid --- */
#projects-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
    margin: 0 auto;
    padding: 80px;
}

/* --- Individual Project Box --- */
.project-box {
    position: relative;
    cursor: pointer;
    margin-bottom: 60px;
    box-shadow: var(--shadow);
    opacity: 1;
}


/* Wrapper to maintain a specific aspect ratio for the image area */
.image-ratio-wrapper {
    width: 100%;
    aspect-ratio: 5 / 6;
    position: relative;
    z-index: 1;
    background-color: var(--menu-bg-color);
}

/* The actual image element */
.project-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.5s ease-in;
    box-shadow: var(--shadow);
}

/* Class added by JS when the image is fully loaded */
.project-cover-image.loaded {
    opacity: 1;
}


/* --- Project Title: Positioned for the Overlap Effect --- */
.project-title {
    hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: 75%;
    text-align: center;
    font-family: poppins, sans-serif;
    background-color: var(--project-button-bg);
    color: var(--text-color-dark);
    z-index: 10;
    box-shadow: var(--shadow);
}

/* --- Footer Section --- */
#footer {
    font-family: poppins, sans-serif;
    background-color: var(--menu-bg-color);
    text-align: center;
}

#full-height {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100lvh;
    width: 0vw;
}

#dynamic-height {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: 0vw;
}