/*** Stylesheet setup ***/



/** Fonts import **/

@font-face {
    font-family: 'Altone';
    src: url('./folder_font/altone.ttf') format('truetype');
    font-weight: 100; /* Regular weight */
    font-style: normal;
}

@font-face {
    font-family: 'Altone';
    src: url('./folder_font/Altone-Light.ttf') format('truetype');
    font-weight: 300; /* Light weight */
    font-style: normal;
}

@font-face {
    font-family: 'Altone';
    src: url('./folder_font/Altone-SemiBold.ttf') format('truetype');
    font-weight: 600; /* SemiBold weight */
    font-style: normal;
}

@font-face {
    font-family: 'Altone';
    src: url('./folder_font/Altone-Bold.ttf') format('truetype');
    font-weight: 700; /* Bold weight */
    font-style: normal;
}



/** Root light theme **/

:root[data-theme="light"] {
    --clr-extra-donkerbruin: #331E0E;
    --clr-donkerbruin: #80481f;
    --clr-lichtbruin: #aa612b;
    --clr-oranje: #fbab3c;
    --clr-donkerbruin-pastel: #fcd4a9;
    --clr-lichtbruin-pastel: #ffefdc;
    --clr-blauw: #41a6e6;
    --clr-wit: #fff;
    --clr-wit-donkerbruin: var(--clr-wit);
    --clr-wit-extra-donkerbruin: var(--clr-wit);
    --clr-donkerbruin-wit: var(--clr-donkerbruin);
    --clr-donkerbruin-extra-donkerbruin: var(--clr-donkerbruin);

    --switch-bg: var(--clr-donkerbruin);
	--switch-bg-hover: var(--clr-donkerbruin);
	--switch-icon-sun: transparent;
	--switch-icon-moon: var(--clr-donkerbruin);
}



/** Root dark theme **/

:root[data-theme="dark"] {
    --clr-extra-donkerbruin: #331E0E;
    --clr-donkerbruin: #80481f;
    --clr-lichtbruin: #aa612b;
    --clr-oranje: #fbab3c;
    --clr-donkerbruin-pastel: #fcd4a9;
    --clr-lichtbruin-pastel: var(--clr-extra-donkerbruin);
    --clr-blauw: #41a6e6;
    --clr-wit: #fff;
    --clr-wit-donkerbruin: var(--clr-donkerbruin);
    --clr-wit-extra-donkerbruin: var(--clr-extra-donkerbruin);
    --clr-donkerbruin-wit: #fff;
    --clr-donkerbruin-extra-donkerbruin: var(--clr-extra-donkerbruin);

    --switch-bg: #FFD371;
	--switch-bg-hover: #FFDA8F;
	--switch-icon-sun: #fff;
	--switch-icon-moon: transparent;
}



/** Root for both light and dark theme **/

:root {
    --font-family-primary: 'Altone';
    --font-family-body: var(--font-family-primary);
    --font-family-heading: var(--font-family-primary);
    
    --font-weight-regular: 100;
    --font-weight-light: 300;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --font-size-s: 1rem; /* 16px */
    --font-size-m: clamp(1.25rem, 1.134rem + 0.488vi, 1.5rem); /* 20px-24px */
    --font-size-l: clamp(1.625rem, 1.451rem + 0.732vi, 2rem); /* 26px-32px */
    --font-size-xl: clamp(2.5rem, 1.573rem + 3.902vi, 4.5rem); /* 40px-72px */

    --padding-all-1rem: 1rem;
    --padding-block-default: clamp(1.5rem, 0.341rem + 4.878vi, 4rem); /* 24px-64px */

    --transition-duration: 0.25s;

    --box-shadow-default: 0px 3px 2px 0px rgba(0, 0, 0, 0.4);
    --box-shadow-soft: 0px 2px 6px 0px rgba(0, 0, 0, 0.3);
}



/** CSS reset **/

/* https://piccalil.li/blog/a-modern-css-reset */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
    margin: 0;
    padding: 0;
    font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
    height: 100%;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-family: var(--font-family-primary);
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}



/** Utility classes **/

.navigation-link {
    text-decoration: none;
    color: var(--clr-donkerbruin-wit);
    font-weight: 600;
    background-image: linear-gradient(90deg, var(--clr-donkerbruin-wit), var(--clr-donkerbruin-wit));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left 1.5em;
    padding-block: 0.25em;
    transition: 
        color var(--transition-duration),
        background-size var(--transition-duration);
}

.navigation-link:hover,
.navigation-link:focus {
    color: var(--clr-donkerbruin-wit);
    background-size: 100% 2px;
}

.navigation-link-inverse {
    text-decoration: none;
    color: var(--clr-wit);
    font-weight: 600;
    background-image: linear-gradient(90deg, var(--clr-wit), var(--clr-wit));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left 1.5em;
    padding-block: 0.25em;
    transition: 
        color var(--transition-duration),
        background-size var(--transition-duration);
}

.navigation-link-inverse:hover,
.navigation-link-inverse:focus {
    color: var(--clr-wit);
    background-size: 100% 2px;
}

.font-clr-donkerbruin {
    color: var(--clr-donkerbruin-wit);
}

.font-clr-donkerbruin-extra-donkerbruin {
    color: var(--clr-donkerbruin-extra-donkerbruin);
}

.font-clr-lichtbruin {
    color: var(--clr-lichtbruin);
}

.font-clr-wit {
    color: var(--clr-wit);
}


.bg-clr-donkerbruin {
    background-color: var(--clr-donkerbruin);
}

.bg-clr-lichtbruin {
    background-color: var(--clr-lichtbruin);
}

.bg-clr-lichtbruin-pastel {
    background-color: var(--clr-lichtbruin-pastel);
}

.bg-clr-wit {
    background-color: var(--clr-wit);
}


.font-weight-regular {
    font-weight: var(--font-weight-regular);
}

.font-weight-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-weight-bold {
    font-weight: var(--font-weight-bold);
}


.font-size-s {
    font-size: var(--font-size-s);
}

.font-size-m {
    font-size: var(--font-size-m);
}

.font-size-l {
    font-size: var(--font-size-l);
    line-height: 1.1;
}

.font-size-xl {
    font-size: var(--font-size-xl);
    line-height: 1.1;
}

.font-style-italic {
    font-style: italic;
}


.padding-block-default {
    padding-block: var(--padding-block-default);
}

.vertical-align-items {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.margin-top {
    margin-top: clamp(1.5rem, 0.805rem + 2.927vi, 4rem);
}


/** General styling **/

body {
    font-family: 'Altone', Arial, sans-serif; /* Fallbacks for better compatibility */
}

.container {
    --max-width: 85rem;
    --padding: 1rem;

    width: min(var(--max-width), 100% - (var(--padding) * 2));
    margin-inline: auto;
}

.even-columns {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 56em) {
    .even-columns {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}

/* Apply a transition duration to every element to make a smoot transition between light and dark mode */
* {
    transition-duration: var(--transition-duration);
    transition-property: all; /* Apply to all properties */
}



/*** Specific styling ***/



/** Header styles **/

.primary-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--clr-wit-extra-donkerbruin);
    display: flex;
    justify-content: center;
    padding-block: 0.5rem;
    box-shadow: var(--box-shadow-soft);
    transition: padding-block 0.3s ease;
    z-index: 1000; /* Ensure the header stays above other content */
}

.primary-header.scrolled {
    padding-block: 0.3rem;
}

.primary-header .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

html[data-theme="light"] .header-logo {
    width: 15rem;
}

html[data-theme="dark"] .header-logo {
    display: none;
}

html[data-theme="light"] .header-logo-dark-mode {
    display: none;
}

html[data-theme="dark"] .header-logo-dark-mode {
    width: 15rem;
}

@media (max-width: 45em) {
    html[data-theme="light"] .header-logo {
    width: 10rem;
    }

    html[data-theme="dark"] .header-logo-dark-mode {
    width: 10rem;
    }
}

@media (max-width: 40em) {
    html[data-theme="light"] .header-logo {
    width: 8rem;
    }

    html[data-theme="dark"] .header-logo-dark-mode {
    width: 8rem;
    }
}

.header-menu-wrapper {
    display: flex;
    gap: 1rem;
}

.container-contact-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-me-button {
    background-color: var(--clr-wit);
    color: var(--clr-donkerbruin-extra-donkerbruin);
    padding: 5px 15px 5px 15px;
    border: 1px solid var(--clr-donkerbruin-wit);
    border-radius: 10px;
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
}

.contact-me-button:hover {
    background-color: var(--clr-lichtbruin);
    border: 1px solid var(--clr-lichtbruin);
    transform: translateY(-2px);
	box-shadow: var(--box-shadow-default);
    color: var(--clr-wit);
}

.contact-me-button:active {
    transform: translateY(-0px);
	box-shadow: none;
}


/* Theme switcher */

#theme-switcher {
	background-color: transparent;
	border-radius: 8px;
	display: flex;
	align-items: center;
	height: 2.188rem;
	width: 2.188rem;
	cursor: pointer;
	margin-right: 3px;
	padding: 0.66rem;
	position: relative;
}

@media (max-width: 56em) {
    #theme-switcher {
        padding: 0.25rem;
    }
}

#theme-switcher:hover {
	background-color: var(--switch-bg-hover);
	transform: translateY(-2px);
	box-shadow: var(--box-shadow-default);
}

#theme-switcher:active {
	transform: translateY(-0px);
	box-shadow: none;
}

#theme-switcher svg {
	z-index: 1;
}

#icon-sun {
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	bottom: 0.25rem;
	left: 0.25rem;
	fill: var(--switch-icon-sun);
}

#icon-moon {
	position: absolute;
	top: 0.33rem;
    right: 0.33rem;
	bottom: 0.33rem;
	left: 0.33rem;
	fill: var(--switch-icon-moon);
}

@media (max-width: 56em) {
    #icon-sun {
	top: 0.25rem;
	right: 0;
	bottom: 0;
	left: 0.25rem;
    }

    #icon-moon {
	top: 0.25rem;
    right: 0;
	bottom: 0;
	left: 0.25rem;
    }

}

html[data-theme="dark"] #theme-switcher:hover #icon-sun {
	fill: #896E37;
}

html[data-theme="light"] #theme-switcher:hover #icon-moon {
	fill: #fff;
}



/** Hero stying **/

.section-hero {
    padding-top: 11rem;
}

@media (max-width: 56em) {
    .section-hero {
        padding-top: 10rem;
    }
}

@media (max-width: 45em) {
    .section-hero {
        padding-top: 8rem;
    }
}

@media (max-width: 40em) {
    .section-hero {
        padding-top: 6.5rem;
    }
}

.section-hero {
    background-color: var(--clr-wit-donkerbruin);
}

@media (max-width: 56em) {
    .hero-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .p-hero-content-title {
        text-align: center;
    }
}



/** Subhero styling **/

.foto-subhero-wrapper {
    display: flex;
    align-items: center; 
    justify-content: flex-end;
    width: 100%;
}

.foto-subhero {
    margin-left: auto; /* Pushes .foto-subhero to the right within .foto-subhero-wrapper */
    margin-right: 2rem;
    width: 75%; 
}

.subhero-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-left: 1rem;
}

.table-of-contents {
    padding-top: 0.5rem;
}

@media (max-width: 56em) {
    .foto-subhero-wrapper {
        display: none;
    }
}


/*** Web projects styling ***/

.section-cards {
    background-color: var(--clr-wit-donkerbruin);
}

.current-web-projects, .finished-web-projects {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.current-web-projects-cards, .finished-web-projects-cards {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}

.current-web-project-card, .finished-web-project-card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.75rem;
    background-color: var(--clr-donkerbruin-extra-donkerbruin);
    padding: var(--padding-all-1rem);
    border-radius: 15px;
}

.current-web-project-card-content, .finished-web-project-card-content {
    width: 100%;
}

.p-content, .p-maand {
    margin-bottom: 0.5rem;
}

.p-techstack {
    padding-top: 0.5rem;
    border-top: 1px solid var(--clr-wit);
}

.p-techstack-clean {
    padding-top: 1rem;
}

.current-web-project-card-image, .finished-web-project-card-image {
    display: flex;
    background-color: var(--clr-wit);
    width: 40%;
    padding: 0.5rem;
    border-radius: 12px;
}

@media (max-width: 80em) {
    .current-web-project-card, .finished-web-project-card {
        flex-direction: column;
    }

    .current-web-project-card-image {
        width: 50%;
        height: clamp(6.25rem, 4.512rem + 7.317vi, 10rem); /* 100px - 160px */
        padding: var(--padding-all-1rem);
    }

    .current-web-project-card-content {
        order: 2;
    }

    .finished-web-project-card-image {
        width: 50%;
        height: clamp(6.25rem, 4.512rem + 7.317vi, 10rem); /* 100px - 160px */
        padding: var(--padding-all-1rem);
    }

    .finished-web-project-card-content {
        order: 2;
    }
}

@media (max-width: 56em) {
    .current-web-project-card-image {
        width: 50%;
        height: clamp(10rem, 7.683rem + 9.756vi, 15rem); /* 160px - 240px */
    }

    .finished-web-project-card-image {
        width: 50%;
        height: clamp(10rem, 7.683rem + 9.756vi, 15rem); /* 160px - 240px */
    }
}

.extern-link {
    color: var(--clr-wit);
}

.extern-link:hover, .extern-link:active, .extern-link:focus {
    color: #d3d3d3;
}



/** Recente werkervaring styling **/

.recent-working-experience {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

@media (max-width: 56em) {
    .recent-working-experience {
        align-items: flex-start;
    }
}

.recent-working-experience-cards {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1.5rem;
}

@media (max-width: 56em) {
    .recent-working-experience-cards {
        flex-direction: column;
    }
}

.recent-working-experience-card {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-self: baseline;
    gap: 0.75rem;
    background-color: var(--clr-donkerbruin-extra-donkerbruin);
    padding: var(--padding-all-1rem);
    border-radius: 15px;
    width: 100%;
}

.recent-working-experience-card-image {
    display: flex;
    background-color: var(--clr-wit);
    padding: 0.5rem;
    border-radius: 12px;
    height: clamp(10rem, 7.683rem + 9.756vi, 15rem); /* 160px - 240px */
    padding: var(--padding-all-1rem);
}

@media (max-width: 56em) {
    .recent-working-experience-card-image {
        width: 50%;
    }
}

.p-functie {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--clr-wit);
}

.p-datum {
    color: var(--clr-wit);
    text-decoration: none;
}



/** Skills styling **/

.section-skills {
    background-color: var(--clr-wit-donkerbruin);
}

.web-development-skills {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    gap: 1.5rem;
}

.skills-columns {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 1.5rem;
}

@media (max-width: 64em) {
    .skills-columns {
        flex-direction: column;
        justify-content: left;
    }
}

.web-development-skills-cards, .media-productie-skills-cards, .soft-skills-cards {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 1.5rem;
    max-width: 30%;
    min-width: 30%;
}

@media (max-width: 64em) {
    .web-development-skills-cards, .media-productie-skills-cards, .soft-skills-cards {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.5rem;
        max-width: 100%;
    }

    .web-development-skills-cards h3, .media-productie-skills-cards h3, .soft-skills-cards h3 {
        text-align: center;
        width: 100%;
    }

}

@media (max-width: 40em) {
    .web-development-skills-cards, .media-productie-skills-cards, .soft-skills-cards {
        max-width: 100%;
    }
}

.web-development-skills-card, .media-productie-skills-card, .soft-skills-card {
    background-color: var(--clr-wit);
    display: flex;
    flex-direction: row;
    border: 1px solid var(--clr-donkerbruin-wit);
    border-radius: 15px;
    padding: var(--padding-all-1rem);
    gap: 1.5rem;
    width: 100%;
}


@media (max-width: 64em) {
    .web-development-skills-card, .media-productie-skills-card, .soft-skills-card {
        width: 48%;
        height: 175px;
    }
}

@media (max-width: 40em) {
    .web-development-skills-card, .media-productie-skills-card, .soft-skills-card {
        width: 100%;
    }
}

.web-development-skills-card-image, .media-productie-skills-card-image, .soft-skills-card-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 18%;
}

.web-development-skills-card-content, .media-productie-skills-card-content, .soft-skills-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 82%;
}

.progress-bar {
    width: 100%;                
    height: 20px;               
    background-color: lightgrey; 
    border-radius: 10px;       
    position: relative;         
    overflow: hidden;       
    margin-block: 0.25rem;   
}

/* Skill level: beginner */
.progress-bar-photoshop::after {
    content: '';
    display: block;
    height: 100%;               
    width: 7%;                 
    background-color: var(--clr-lichtbruin);  
    border-radius: 10px;
}

/* Skill level: basis */
.progress-bar-whimsical::after, .progress-bar-illustrator::after, .progress-bar-after-effects::after, .progress-bar-xd::after, .progress-bar-php::after, .progress-bar-javascript::after {
    content: '';
    display: block;
    height: 100%;               
    width: 25%;                 
    background-color: var(--clr-lichtbruin);  
    border-radius: 10px;
}

/* Skill level: gevorderd */
.progress-bar-notion::after, .progress-bar-audition::after, .progress-bar-wordpress::after, .progress-bar-css::after, .progress-bar-html::after, .progress-bar-coachen::after  {
    content: '';
    display: block;
    height: 100%;               
    width: 65%;                 
    background-color: var(--clr-lichtbruin);  
    border-radius: 10px;
}

/* Skill level: gevorderd niveau 2 */
.progress-bar-mentale-weerbaarheid::after, .progress-bar-communicatie::after, .progress-bar-luisteren::after  {
    content: '';
    display: block;
    height: 100%;               
    width: 90%;                 
    background-color: var(--clr-lichtbruin);  
    border-radius: 10px;
}



/** Testimonials styling **/

.testimonials {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--padding-block-default);
}

.testimonials-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    row-gap: 1.5rem;
    column-gap: 1.5rem;
}

.testimonial {
    background-color: var(--clr-wit-extra-donkerbruin);
    padding: var(--padding-all-1rem);
    display: flex;
    flex-direction: column;
    align-self: baseline;
    gap: 0.5rem;
    width: 30%;
    border: 1px solid var(--clr-wit);
    border-radius: 15px;
}

@media (max-width: 56em) {
    .testimonial {
        width: 47%;
    }
}

@media (max-width: 40em) {
    .testimonial {
        width: 100%;
    }
}

.testimonial-quote {
    width: 2.5rem;
}

#testimonial-quote-svg {
    fill: var(--clr-donkerbruin-wit);
}

.testimonial-text {
    color: var(--clr-donkerbruin-wit);
}

.testimonial-text .testimonial-author {
    font-weight: var(--font-weight-semibold);
}



/** Contact styling **/

.section-contact .even-columns {
    gap: 3.5rem;
}

@media (max-width: 56em) {
    .section-contact .even-columns {
        gap: 1.5rem
    }
    
    .contact-content {
        order: 1;
    }

    .contact-image-wrapper {
        order: 2;
    }
}



/** Footer styling **/

.section-footer {
    background-color: var(--clr-wit-donkerbruin);
}

.content-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-block: 1rem;
}

@media (min-width: 40em) {
    .content-footer {
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
    }
}

.privacy-link {
    text-decoration: none;
    color: var(--clr-donkerbruin-wit);
    font-weight: 600;
    transition: color var(--transition-duration);
}

.privacy-link:hover,
.privacy-link:focus {
    color: var(--clr-lichtbruin);
}

.back-link {
    text-decoration: none;
    color: var(--clr-donkerbruin-wit);
    font-weight: 600;
    background-image: linear-gradient(90deg, var(--clr-donkerbruin-wit), var(--clr-donkerbruin-wit));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left 1.5em;
    padding-block: 0.25em;
    transition: 
        color var(--transition-duration),
        background-size var(--transition-duration);
}

.back-link:hover,
.back-link:focus {
    color: var(--clr-donkerbruin-wit);
    background-size: 100% 2px;
}



/** Privacy page styling **/

.section-privacy {
    padding-top: 11rem;
    background-color: var(--clr-wit-donkerbruin);
}

@media (max-width: 56em) {
    .section-privacy {
        padding-top: 10rem;
    }
}

@media (max-width: 45em) {
    .section-privacy {
        padding-top: 8rem;
    }
}

@media (max-width: 40em) {
    .section-privacy {
        padding-top: 6.5rem;
    }
}

.privacy-section {
    margin-bottom: 2rem;
}

.privacy-section h2 {
    margin-bottom: 1rem;
}

.privacy-section p {
    margin-bottom: 0.75rem;
}

.privacy-section ul {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}