/*
 Theme Name:   Torsten
 Theme URI:    https://octostudio.fr/
 Description:  Custom theme for Torsten
 Author:       Octostudio
 Author URI:   https://octostudio.fr
 Template:     Divi
 Version:      1.0.1
*/

a:hover{
    color:#000000 !important;
   text-decoration: underline !important;
}

/* By default (desktop): show <br>, hide dash */
.line-break {
   display: inline;
 }
 .date-separator {
   display: none;
 }
 

/* Event details - Initially hidden and off-screen */
.custom-event-details, .custom-writing-details  {
   opacity: 1;
   transform: none;

/* transform: translateX(50px);*/
/* transition: opacity 0.8s ease-out, transform 0.8s ease-out;*/
}

/* Add animation when elements become visible */
.custom-event-item.show .custom-event-details, .custom-writing-item.show .custom-writing-details {
   opacity: 1;
/* transform: translateX(0);*/
   transform: none;
   
}

/* Container for all events */
.custom-events-container,.custom-writings-container {
/*     max-width: 900px; */
   margin: auto;
   font-family: 'Arial', sans-serif;
}

/* Year header */
.custom-event-year, .custom-writing-year {
font-family: 'IBM Plex Mono', monospace;
   font-weight: 300;
   font-size: 20px;
   color: #E02B20 !important;
   margin: 40px 30px 15px;
}

.custom-writing-year{
   padding-bottom:30px;
}

/* Event item container */
.custom-event-item, .custom-writing-item {
   display: flex;
   align-items: flex-start;
   margin-bottom: 25px;
   padding-bottom: 10px;
}

/* Date section with horizontal line */
.custom-event-date-line, .custom-writing-date-line {
   display: flex;
   align-items: center;
   width: 20%; 
   margin-right: 50px;
}

/* Date styling */
.custom-event-date, .custom-writing-date  {
font-family: 'IBM Plex Mono', monospace;
   font-weight: 300;
   font-size: 20px;
   color: #000000 !important;
}

.custom-writing-date {
   width: 10%;
   padding-top:100px;
}

/* Horizontal line */
.custom-event-line,.custom-writing-line {
   flex-grow: 1;
   height: 1px;
   background-color: #ccc;
   margin-left: 50px;
}


/* Event details section */
.custom-event-details, .custom-writing-details {
   flex: 1;
}

/* Event type */
.custom-event-type {
font-family: 'IBM Plex Mono', monospace;
   font-weight: 300;
   text-transform: uppercase;
   font-size: 17px;
   color: #E02B20 !important;
   text-transform: uppercase;
   display: block;
   margin-bottom: 5px;
   padding-bottom:10px;
}

/* Event title */
.custom-event-title {
font-family: 'Eczar', Georgia, "Times New Roman", serif;
   font-size: 32px;
   color: #000000 !important;
   margin-top: 5px;
}

.custom-writing-title {
   font-family: 'Eczar', Georgia, "Times New Roman", serif;
      font-size: 32px;
      color: #000000 !important;
      margin-top: -20px;
   }

/* Event location */
.custom-event-location, .custom-writing-publisher {
font-family: 'IBM Plex Mono', monospace;
   font-weight: 300;
   text-transform: uppercase;
   font-size: 17px;
   color: #E02B20 !important;
}


/* MOBILE STYLES (less than 768px) */
@media (max-width: 767px) {
   html, body {
      overflow-x: hidden;
   }
   
   header.et-l.et-l--header {
      position: fixed !important;
      top: 0;
      left: 0;
      right: 0;
      width: 100% !important;
      z-index: 9999 !important;
      background-color: #ffffff !important;
   }
   
   /* Prevent overlapping */
   #et-main-area {
      margin-top: 170px; /* match header height */
   }
   

   
   /* Hide the horizontal line on mobile */
   .custom-event-line,w
   .custom-writing-line {
     display: none;
   }
 
   /* Year styling on mobile */
   .custom-event-year,
   .custom-writing-year {
     font-size: 30px;
     margin: 0;
     padding-bottom: 20px;
     padding-left: 0;
   }
 
   /* Align title block to the left */
   .custom-event-details,
   .custom-writing-details {
     text-align: left;
   }
 
   /* Optional: stack items vertically on mobile */
   .custom-event-item,
   .custom-writing-item {
     flex-direction: column;
     align-items: flex-start;
   }
 
   /* Optional: adjust date section to avoid excess spacing */
   .custom-event-date-line,
   .custom-writing-date-line {
     width: 100%;
     margin-bottom: 10px;
     margin-right: 0;
   }
 
   .custom-writing-date {
     padding-top: 0;
     width: auto;
   }

   .line-break {
      display: none;
    }
    .date-separator {
      display: inline;
    }
 }