/* ROOT: CUSTOM PROPERTIES (VARIABLES) */

@font-face {
    font-family: 'Messina Sans';
    src: url('fonts/MessinaSans-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Messina Sans';
    src: url('fonts/MessinaSans-RegularItalic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Messina Sans';
    src: url('fonts/MessinaSans-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Messina Sans';
    src: url('fonts/MessinaSans-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Messina Sans';
    src: url('fonts/MessinaSans-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Messina Sans';
    src: url('fonts/MessinaSans-BoldItalic.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
}


:root {
    /* COLOR */
    --color-pri: HSL(205, 100%, 50%);
    /* ! define: color secondary */
    --color-sec: HSL();
    --color-text: HSL(0 0% 0%);
    --color-background: HSL(0 0% 90%);
    --color-accent: HSL(325 100% 50%);

    /* FONT SIZE & LINE HEIGHT */
    /*    --font-size-small: clamp(0.875rem, 0.8315rem + 0.2174vw, 1rem);*/
    --font-size-small: 1rem;
    --line-height-small: 1.5;
    /*    --font-size-body: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);*/
    --font-size-body: 1.2rem;
    --line-height-body: 1.75;
    --font-size-h1: clamp(2.25rem, 2.125rem + 0.625vw, 2.625rem);
    --font-size-h2: clamp(1.5rem, 1.3125rem + 0.9375vw, 2.0625rem);

}

/* CSS RESET: GENERAL
key reference: Andy Bell, https://andy-bell.co.uk/a-more-modern-css-reset */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin-block-end: 0;
}

ul[role='list'],
ol[role='list'] {
    list-style: none;
}

body {
    min-height: 100vh;
}

img,
picture,
svg,
video {
    max-width: 100%;
    display: block;
}


/* CSS RESET: OVERFLOW */

body {
    overflow-y: scroll;
    overflow-x: hidden;
}

/* CSS RESET: TYPOGRAPHY */

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    font-size: 100%
}

h1,
h2,
h3,
h4,
button,
input,
label {
    line-height: 1.1;
}

h1,
h2,
h3,
h4,
blockquote {
    text-wrap: balance;
    /* 29 Oct 2023: text-wrap not supported on Safari, Firefox */
}

/* COLOR (COLOUR) */

h1,
h2,
h3 {
    color: color-mix(in oklab, var(--color-pri), black 25%);
}

/* Main Text Style */

section,
section {
    text-align: left !important; /* Ensure text is aligned to the left */
    font-size: 25px;
    line-height: 1.5;
    margin-left: 0; /* No left margin */
    margin-right: 20rem; /* Add a right margin */
    width: calc(80% - 2rem); /* Adjust width to accommodate the right margin */
}

section p {
    font-size: 25px;
}


footer > * {

}

/* TYPOGRAPHY */

h1 {
    font-size: var(--font-size-h1);
    font-variation-settings: 'ital'0, 'opsz'6, 'wght'275;
}

h2 {
    font-size: var(--font-size-h2);
    font-variation-settings: 'ital'0, 'opsz'6, 'wght'300;
}

h3 {
    text-transform: uppercase; 
    letter-spacing: 0.075em; 
    font-size: var(--font-size-body);
    font-variation-settings: 'ital'0, 'opsz'6, 'wght'600;
}

header {
    position: relative; /* Allows positioning of children */
    width: 100%; /* Full width of the container */
    overflow: hidden; /* Prevents content overflow issues */
}

/* Style for the text container or Header */
.text-container {
    position: absolute; /* Position text container above the image */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    width: 100%; /* Full width */
    background-color: white; /* Background color for visibility */
    padding: 1rem; /* Padding around text */
    padding-left: 350px;
    box-sizing: border-box; /* Include padding in width calculation */
    z-index: 10; /* Ensure text is above the image */
    text-align: left; /* Align text to the left */
    font-size: 25px; /* Adjust font size */
    line-height: 29px;
}



/* Style for the image container */
.image-container {
    position: relative; /* Ensure proper stacking context */
    padding-left: 450px;
}

.image-container img {
    display: block; /* Block-level element to avoid extra space */
    width: 100%; /* Full width */
    height: auto; /* Maintain aspect ratio */
    /* Ensure the image is not covering text */
}

/* Add space at the top of the header */
header::before {
    content: ''; /* Empty content */
    display: block; /* Block-level element */
    height: 4rem; /* Space for text, adjust as needed */
}


header,
nav,
section,
figure,
footer > * {
    font-family:  Messina Sans, sans-serif;

}

.container {
    display: flex; /* Enable flexbox layout */
    padding: 0; /* Remove padding if not needed */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Main column styles */
.main-column {
    flex-grow: 1; /* Allow the column to grow */
    /* No padding or margin */
}

/* Styling sections in the main column */
.main-column section {
    line-height: var(--line-height-body);
}

/* Ensure sections in the sidebar and main column have no extra margins affecting layout */
.container section {
    margin: 0;
}



section {
    margin-bottom: 1rem; /* Space between sections */
    padding-left: 0px;
    font-size: 20px; /* Use existing body font size */
}

.main-column section,
.sidebar-column section {
    margin: 0;
}

figure,
footer {
    font-size: 15px;
    line-height: var(--line-height-small);
    font-size: 15px;
}

pre,
code {
    font-family: var(--monospace), monospace;
    font-variation-settings: 'wght'300;
    font-size: var(--font-size-small);
    line-height: inherit;
    background-color: var(--color-background); 
}

pre {
    outline: 2px solid var(--color-background); 
}

/* LEFT NAVBAR */
nav {
    position: fixed;
    top: 0;
    left: 0; /* Or right: 0; if you want it on the right side */
    width: 350px; /* Adjust the width as needed */
    height: 100vh;
    padding: 1rem 0.8rem;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    z-index: 100;
}

.nav-bottom-text {
    margin-top: auto; /* Push the text to the bottom */
    padding-top: 1rem; /* Optional padding above the bottom text */
    padding-top: 800px; /* Optional border above the bottom text */
}

.nav-bottom-text a {
    pointer-events: auto; /* Allow links to be clickable */
    text-decoration: none; /* Remove underline if desired */
    pointer-events: auto; /* Enable link interaction */
    text-decoration: none; /* Remove underline */
    color: #333; /* Link color */
}

.nav-bottom-text {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column; /* stack vertically */
    gap: 8px; /* spacing between the two links */
    z-index: 1000;
  }
  
  .nav-bottom-text p {
    margin: 0;
  }
  


.nav-bottom-text a:hover {
    text-decoration: underline; /* Optional hover effect */
    color: #f700ff; /* Change color on hover */
}




/* Ensure all hover effects are removed from .nav-bottom-text */
.nav-bottom-text a, 
.nav-bottom-text a:hover, 
.nav-bottom-text a:focus, 
.nav-bottom-text a:active {
    text-decoration: none; /* No underline */
    color: inherit; /* Maintain original color */
    pointer-events: none; /* Disable all pointer events */
    cursor: default; /* Show default cursor */
}

/* Remove any additional hover styles if they are applied directly to the div */
.nav-bottom-text:hover {
    background: inherit; /* Maintain background color */
    color: inherit; /* Maintain text color */
    pointer-events: none; /* Disable pointer events */
    cursor: default; /* Show default cursor */
}

nav p {
    display: inline;
    line-height: 29px;
    font-size: 25px;
    font-family: "Messina Sans", sans-serif;
}

/* Gradient for Website */
.gradient-1 {
    background: linear-gradient(to right, #00ffff, #ffffff, #ff1d25); /* Example gradient */
    padding-left: 10px;
    padding-right: 8px;
    border-radius: 50px; /* Rounded corners */
    line-height: 38px;

}

.gradient-1:hover {
    background: linear-gradient(to right, #ff00ff, #ffffff, #00ff00); /* New gradient on hover */
    transition: background 1s ease; /* Smooth transition for color */
    color: rgb(0, 255, 242);
}

/* Gradient for Email */
.gradient-2 {
    background: linear-gradient(to right, #ffff00, #ffffff, #0000ff); /* Example gradient */
    padding-left: 10px;
    padding-right: 8px;
    border-radius: 50px; /* Rounded corners */
    line-height: 38px;
}

.gradient-2:hover {
    background: linear-gradient(to right, #558651, #0021b5, #b9007b); /* New gradient on hover */
    color: rgb(183, 255, 0); /* Change text color if needed */
}

/* Gradient for Instagram */
.gradient-3 {
    background: linear-gradient(to right, #21536e, #ffffff, #83aa4b); /* Example gradient */
    padding-left: 10px;
    padding-right: 8px;
    border-radius: 50px; /* Rounded corners */
    line-height: 38px;
    width: 190px;
}


.gradient-3:hover {
    background: linear-gradient(to right, #5d00ff, #7bfdff, #185546); /* New gradient on hover */
    color: rgb(230, 0, 255); /* Change text color if needed */
}

.nav-bottom-text a {
    text-decoration: none; /* Remove underline */
}

/* Style for the gradient box */
.gradient-box {
    display: inline-block;
    padding-left: 10px;
    padding-right: 8px;
    border-radius: 50px; /* Rounded corners */
    background: linear-gradient(to right, #00ff00, #ffffff, #ff00ff); /* Gradient colors inside the box */
}

.gradient-box:hover {
    background: linear-gradient(to right, #5d00ff, #00f5a7, #6d6907); /* New gradient on hover */
    color: rgb(251, 255, 0); /* Change text color if needed */
}

/* LAYOUT: IMAGES, FIGURES */

.image-container {
    position: relative;
    display: inline-block; /* Adjust based on your layout */

}

/* Style for the image */
.image-container img {
    display: block; /* Ensures image is a block-level element */
    width: 100%; /* Ensures the image fills its container */
    height: auto; /* Maintain aspect ratio */
    padding-left: 350px;
}

.fullscreen-slider {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
    background: black;
  }
  
  .slide-wrapper {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out;
  }
  
  .slide {
    width: 100vw;
    height: 100%;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .slide img {
    max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  display: block;
  margin: 0;
  }
  
  .nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 30px;      
    font-weight: 300;     
    color: white;
    cursor: pointer;
    z-index: 1000;
    line-height: 1;
  }
  
  .nav.prev {
    left: 20px;
  }
  
  .nav.next {
    right: 20px;
  }

  

.iframe-container {
    position: relative; /* Create a positioning context */
    width: 100%; /* Parent container width */
    height: 100vh; /* Optional: Full viewport height */
    background-color: #f8f9fa; /* Optional background color */
}

.iframe-container iframe {
    position: absolute;
    top: 50%; /* Move to the vertical center */
    left: 50%; /* Move to the horizontal center */
    transform: translate(-50%, -50%); /* Adjust for the iframe's size */
    width: 800px; /* Set desired width */
    height: 600px; /* Set desired height */
    border: none; /* Remove iframe border */
}

.iframe-caption {
    font-family: "Messina Sans", sans-serif; /* Use Messina Sans font */
    font-size: 12px; /* Set font size to 12px */
    color: #ff0000; /* Text color */
    text-align: center; /* Center align the caption */
    margin-top: 0.5rem; /* Space above the caption */
}

.iframe-caption a {
    text-decoration: none; /* Remove underline from the link */
    color: #007acc; /* Set link color */
}

.iframe-caption a:hover {
    text-decoration: underline; /* Add underline on hover */
    color: #005f99; /* Change color on hover */
}



figure:not(.full-bleed) {
    grid-column: 2/3;
}

.full-bleed {
    grid-column: 1/4;
}

.aspect-1-1 img {
    aspect-ratio: 1/1;
}

.aspect-4-3 img {
    aspect-ratio: 4/3;
}

.aspect-3-2 img {
    aspect-ratio: 3/2;
}

.aspect-16-9 img {
    aspect-ratio: 16/9;
}

#week1img {
    width: auto;
    height: auto;
    display: block; /* Ensure the image is displayed */
}

/* VERTICAL SPACE */

section *,
figure > *,
footer,
footer > * {
    margin-top: 1rem;
}

h2,
h3,
h4 {
    margin-top: 2rem;
}

footer {
    display: flex;
    flex-direction: column;
    background-color: white;
    border-top: 1.5px solid var(--color-background);
    margin-left: 350px; /* Align the footer with the main content */
    width: calc(100% - 300px); /* Ensure it stays within the visible area */
    box-sizing: border-box; /* Ensure padding and width calculation are correct */
    line-height: 29px;
}

/*MAIN TEXT*/

main {
    margin-left: 350px; /* Align main content with the left sidebar */
    margin-right: 100px; /* Space for the right sidebar */
    box-sizing: border-box;
    min-height: calc(100vh - 200px); /* Adjust based on expected footer height */
}

/* Adjust footer content to ensure visibility */
footer > div {
    margin-bottom: 1rem;
    margin-bottom: 30px;
    margin-top: 200px;
}

/* Footer Text style */

footer p {
    line-height: 25px;
    color: #606060;
}

/* RULES AND BORDERS */

/* LEFT NAVBAR */
nav,
figure,
.horizontal-scroll {
    border-bottom: 1.5px solid var(--color-background);
}

figure,
.horizontal-scroll {
    padding: 1rem 0;
}

.horizontal-scroll,
footer {
    border-top: 1.5px solid var(--color-background);
}

/* RIGHT NAVBAR */
.right-sidebar {
    width: 350px; /* Same width as the left sidebar */
    position: fixed;
    top: 0;
    padding-bottom: 25px;
    right: 0; /* Position it on the right */
    padding: 1rem;
    background-color: rgb(255, 255, 255);
    z-index: 100;
    float: right;
    font-family: messina sans;
    font-size: 25px;
    line-height: 40px;
}

.sidebar.right-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 260px;
    height: 100vh; /* constrain height */
    overflow: hidden;
    background-color: white;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 1rem;

  }

  .right-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 350px; /* try 260px if it's still too wide */
    height: 100vh;
    overflow-y: auto;
    background-color: white;
    padding: 1rem;
    z-index: 1000;
  }
  
  
  /* Make the scrollable part take all available height */
  .sidebar.right-sidebar .right-sidebar {
    overflow-y: auto;
    flex: 1;
  }
  

.agenda-item {
    display: flex;
    align-items: flex-start; /* Align items at the top */
    margin-bottom: 8px; /* Adjust this value to control space between items */
}

.agenda-item a {
    text-decoration: none; /* Remove underline */
    outline: none; /* Remove focus outline */
    box-shadow: none; /* Remove any box-shadow if applied */
}

/* Optional: Add hover effect for clarity */
.agenda-item a:hover {
    text-decoration: none; /* Ensure no underline on hover */
    color: #f700ff; /* Optional: Change color on hover */
}

.agenda-item a:focus,
.agenda-item a:hover,
.agenda-item a:active {
    text-decoration: none; /* Ensure no underline on hover */
    outline: none; /* Remove focus outline */
    box-shadow: none; /* Remove hover highlight */
    background: none; /* Remove any background highlight if present */
}

.random-color:hover {
    text-decoration: none; /* No underline */
    color: #f700ff; /* Fallback color */
}

.number {
    font-size: 45px;
    margin-right: 12px; /* Add space between number and text */
    line-height: 1; /* Adjust line height if necessary */
    color: #000000;
    font-family: Helvetica Now Display;
}

.details p {
    margin: 0;
    padding: 0;
    font-size: 15px;
    color: #333; /* Adjust as needed */
    line-height: 1.5; /* Adjust this value to control the leading */
}

/*HOVER FOR NUMBER AND DETAILS*/
.agenda-item:hover .number {
    color: #f700ff; /* Change color on hover */
}

.agenda-item:hover .details p {
    color: #f700ff; /* Change color on hover */
}

/*CURSOR*/
html, body{ 
    /* cursor: none */
}

.custom-cursor {
    position: absolute;
    top: 0;
    left: 0;
    /* display: none; */
}

.site-wide {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid black;
}

.site-wide .pointer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate (-50%, -50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #000000;
}


.main-content {
    width: 70%;
    float: left;
}
/* LAYOUT: HORIZONTAL SCROLL */
/* key reference: Kevin Powell, tutorial: https://youtu.be/3yfswsnD2sw?si=1MEtE3e6K0ufnWtx
*/

.horizontal-scroll {
    grid-column: 1/4;
    margin: 2rem;
    display: grid;
    gap: 1rem;
    grid-auto-flow: column;
    grid-auto-columns: clamp(27%, 40vh, 75%);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    padding-bottom: 1rem;
}

.horizontal-scroll div {
    scroll-snap-align: start;
}

.horizontal-scroll img {
    object-fit: cover;
    justify-content: center;
}

.horizontal-scroll {
    margin-left: 1rem;
}

/* LINKS */

a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.155em;
    text-decoration-color: var(--color-accent);
}

a:not([class]):hover {
    background-color: none; /* Remove background highlight */
}

/* INDEX PAGE OR LANDING PAGE */

.main-section {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    height: 100vh;
    box-sizing: border-box;
  }
  
  /* Left Column */
  .left-column {
    font-family: 'Messina Sans', sans-serif;
    font-size: 25px;
    width: 60%;
    background-color: #ffffff;
    padding: 1rem 2rem 2rem 2rem;
    padding-left: 100px;
    box-sizing: border-box;
    color: #111;
  }
  
  /* Right Column */
  .right-column {
    font-family: 'Messina Sans', sans-serif;
    font-weight: 500;
    font-size: 18px;
    width: 30%;
    background-color: #ffffff;
    padding: 1rem 2rem 2rem 2rem;
    box-sizing: border-box;
    color: #111;
  }
  
  /* Headings */
  .column-title {
    color: #000000;
    margin-top: 0;
  }

  .no-underline {
    text-decoration: none;
    color: inherit;
  }
  
  .iframe-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem auto;
    background-color: white; /* match page background */
    padding: 0;
    border: none;
  }
  
  .agenda-item .number.active {
    background-color: none;
    color: rgb(0, 255, 208);
    transition: all 0.3s ease;
  }