/* Font Face Declarations */
@font-face {
    font-family: 'Montserrat';
    src: url('./fonts/Montserrat/static/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

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

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

@font-face {
    font-family: 'Montserrat';
    src: url('./fonts/Montserrat/static/Montserrat-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('./fonts/Montserrat/static/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

html {
    background-color: white;
}

body {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: small;
    
    /* A4 dimensions */
    width: 21cm;
    height: 29.7cm;
    padding: 1cm;

    /* Elements for easy views when editing */
    /* outline: 1px solid black; */
    filter: drop-shadow(10px 10px 10px rgb(230, 229, 229)) drop-shadow(10px 20px 30px rgb(230, 229, 229));
    background-color: rgb(255, 255, 255);
    border-radius: 25px;

    /* Center the content on the page */
    margin-left: auto;
    margin-right: auto;

    /* Default text alignment */
    text-align: justify;

    /* Ensure elements use full page*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    color: rgb(0, 0, 0);
}

a {
    color: rgb(0, 0, 0);
    text-decoration-style: dotted;
}

/* Header Grid Layout */
header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 25px;
    align-items: start;
    margin-bottom: 20px;
}

header img {
    width: 135px;
    height: 100%;
    border-radius: 5px;
    object-fit: cover;
    align-self: center;
}

header .description h1 {
    /* margin: 0 0 10px 0; */
    margin-top: 0;
    font-size: x-large;
}

header .description p {
    margin: 0;
    font-size: larger;
    /* font-style: italic; */
}

header > div.description {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Contact table styling */
table#contact-infos {
    /* border-radius: 10px;
    border-collapse: collapse; */
    border: 2px solid black;

    border-collapse: separate;
    border-radius: 10px;

    padding:8px;

    text-align: left;
    min-width: 250px;
    height: 100%;
}

table#contact-infos > thead {
    display: none;
}

table#contact-infos td {
    padding: 4px 8px;
}

/* table#contact-infos td:first-child {
    font-weight: bold;
    background-color: #f0f0f0;
} */

table#contact-infos td + td, table#contact-infos th + th {
    text-align: right;
}

/* Experience style (no grid - as requested) */
main {
    height: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

main div#experiences {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

h3 > a, h4 > a {
    color: black;
    text-decoration: none;
}

h4 > a::before {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 5px;
    /* margin-left: 5px; */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.8;
    vertical-align: 0%;
}

h3 > a::before {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 5px;
    /* margin-left: 5px; */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.8;
    vertical-align: 0%;
}

div.badges {
    display: flex;
    justify-content: space-between;
}

tech {
    font-size: smaller;
    background-color: rgb(237, 237, 237);
    padding: 1px 5px;
    border-radius: 10px;
    font-weight: 500;
}

main h2 {
    margin-bottom: 15px;
}

/* main div.experience {
    margin-bottom: 20px;
} */

main div.experience-title {
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
}

main div.experience-title h3 {
    text-decoration: underline;
    /* text-decoration-style: dotted; */
    font-weight: bold;
    margin-bottom: 0px;
}

main div.experience-title h4 {
    font-weight: lighter;
    font-style: italic;
    margin-bottom: 0px;
}

main div.experience .description {
    margin-bottom: 8px;
    margin-top: 5px;
}

main div.experience ul.tasks {
    margin: 0;
    padding-left: 20px;
}

main div.experience ul.tasks li {
    margin-bottom: 8px;
}

/* Footer Grid Layout - Two columns */
footer {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 50px;
}

footer h2 {
    margin-bottom: 15px;
}

/* Interests Grid Layout */
.interests {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 50px;
    /* height: 100%; */
    /* align-items: end; */
}

div.interest > ul {
    padding-left: 20px;
}

/* Formations */
.formations {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

div.formation h4 {
    margin-bottom: 0px;
    text-align: left;
    /* margin-top: 0px; */
}

div.formation h5 {
    margin-top: 2px;
    margin-bottom: 4px;
    font-style: italic;
    font-weight: lighter;
}

div.formation p {
    margin-top: 0;
    margin-bottom: 0;
}

/* Formation timeline */

.formations {
  position: relative;
}

/* Arrow at the top of the timeline */
.formations::before {
  content: '';
  position: absolute;
  top: 0px;
  left: -9.7%;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid rgb(0, 0, 0);
  z-index: 2;
}

/* The actual timeline (the vertical ruler) */
.formations::after {
  content: '';
  position: absolute;
  width: 3px;
  background-color: rgb(0, 0, 0);
  top: 10px;
  bottom: 0;
  left: -20px;
}

/* Container around content */
.formation {
  position: relative;
}

/* The circles on the timeline */
.formation::before {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  left: -9.3%;
  background-color: rgb(0, 0, 0);
  top: 20px;
  border-radius: 100%;
  z-index: 1;
}

/* Add arrows to the formation containers */
/* .formation::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: -8%;
  border: medium solid rgb(0, 0, 0);
  border-width: 5px 5px 5px 0;
  border-color: transparent rgb(0, 0, 0) transparent transparent;
} */


/* PDF export */
@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }
    
    html {
        background-color: transparent;
    }
    
    body {
        /* Remove drop shadow and outline for print */
        filter: none;
        outline: none;
        border-radius: 0;
        
        /* Remove margins to ensure full page usage */
        margin: 0;
        
        /* Ensure proper positioning */
        position: relative;
        
        /* Keep A4 dimensions but remove any extra spacing */
        width: 21cm;
        height: 29.7cm;
        padding: 1cm;
    }
}