/*
  styles.css
  This file contains the styles for the HTML document.
*/

/* Global styles for the entire body */
body {
      font-family: 'Source Serif 4', serif;
      color: #f3f3f3;
      font-size: 18px;
      line-height: 1.6;
      background-color: #000;
      max-width: 720px;
      margin: auto;
      padding: 1rem;
    }
    
    a:link, a:visited, a:active {
      text-decoration: none;
      color: #fa0;
    }

    a:hover {
      text-decoration: none;
      font-weight: bold;
      color: #ff0;
    }

    h1 {
      font-family: 'Source Sans 3', sans-serif;
      text-align: center;
      font-size: 3rem;
      color: #f3f3f3;
    }
    
    h2 {
      font-family: 'Source Sans 3', sans-serif;
      text-align: center;
      font-size: 1.5rem;
      color: #f3f3f3;
    }

    ul {
      font-family: 'Source Sans 3', sans-serif;
      font-size: 1rem;
      list-style-type: none; /* Removes bullets */
      text-align: center;
      margin: 0;
      padding: 0; /* Removes default indentation */
    }

    footer {
      text-align: center;
      color: #f3f3f3;
      margin-top: 1.5rem;
    }

    nav ul {
      font-family: 'Source Sans 3', sans-serif;
      list-style: none;
      padding: 0;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0;
    }

    nav ul li {
      display: inline-block;
    }

    nav a {
      text-decoration: none;
      color: #f3f3f3;
      padding: 3px 10px;
    }

    .tagline {
      font-family: 'Comfortaa', sans-serif;
      text-align: center;
      font-size: 1.25rem;
      margin-top: 0.5rem;
    }

    .ref {
    padding-left: 20px ;
    text-indent: -50px ;
    }

    .main-content li {
      margin-bottom: 10px;
    }

    .centered-img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
    }

    .center-table {
      margin-left: auto;
      margin-right: auto;
      /* Optional: set a width less than 100% for auto margins to take effect */
      width: 50%; 
      border-collapse: collapse;
    }

    .video-container {
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center;     /* Centers vertically */
    }

    .container {
        display: flex; /* Aligns children (text and image divs) side-by-side */
        width: 100%;
    }

    .text-half {
        flex: 1 1 50%;
        padding: 0;
        background-color: #000; /* Optional: adds a background color for contrast */
        overflow-y: auto; /* Adds scroll if content exceeds height */
    }

    .image-half {
        flex: 1 1 50%;
        display: flex; /* Used to center the image within its half */
        justify-content: center;
    }

    .image-half img {
        max-width: 100%; /* Ensures the image doesn't overflow its container */
        max-height: 100vh; /* Ensures the image doesn't exceed viewport height */
        object-fit: contain; /* Scales the image nicely within the space */
        object-position: top; /* Scales the image nicely within the space */
        display: block;
    }

    .cv {
        max-width: 700px;
        color: #f3f3f3;
    }

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

    .cv-section h2 {
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #f3f3f3;
        border-bottom: 1px solid #ddd;
        padding-bottom: 0.25rem;
        margin-bottom: 0.5rem;
    }

    .cv-row {
        display: grid;
        grid-template-columns: 1fr 1.5fr 1.5fr;
        padding: 0.1rem 0;
        gap: 0.2rem;
    }

    .cv-row.two-col {
        grid-template-columns: 2.5fr 1.5fr;
    }

    .cv-row.one-col {
        grid-template-columns: 1fr;
    }

    .eval-section {
        margin-bottom: 2.5rem;
    }

    .eval-section h3 {
        margin: 0 0 0.25rem;
        font-size: 1rem;
    }

    .eval-section p {
        margin: 0 0 0.75rem;
        color: #f3f3f3;
        font-size: 0.9rem;
    }

    .eval-grid {
        border: 1px solid #f3f3f3;
        border-radius: 6px;
        overflow: hidden;
        max-width: 560px;
        margin: 0 auto;
    }

    .eval-row {
        display: grid;
        grid-template-columns: 1fr auto;
        padding: 0.5rem 0.75rem;
        gap: 1rem;
        align-items: center;
        border-bottom: 1px solid #f3f3f3;
    }

    .eval-row:last-child {
        border-bottom: none;
    }

    .eval-row.header {
        background: #f3f3f3;
        font-size: 1.1rem;
        color: #000;
    }

    .eval-score {
        text-align: right;
        white-space: nowrap;
        min-width: 2.5rem;
    }

    .eval-row.header .eval-score {
        font-weight: normal;
        text-align: center;
    }
  
    /* Optional: Basic responsive design for smaller screens */
    @media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stacks the text and image vertically on mobile */
        height: auto;
    }

    .image-half img {
        max-height: 50vh; /* Limits image height on mobile */
    }
}

    .event-info {
        margin-bottom: 30px;
        line-height: 1.6;
    }
        
    #centeredsubmenu {
        clear:both;
        float:left;
        margin:0 0 1em;
        padding:0;
        width:100%;
        z-index:10; /* This makes the dropdown menus appear above the page content below */
        position:relative;
    }
 
 /* Top menu items */
    #centeredsubmenu ul {
        margin:0;
        padding:0;
        list-style:none;
        float:right;
        position:relative;
        right: 50%;
    }

    #centeredsubmenu > ul > li {
        margin:0 0 0 1px;
        padding:0;
        float:left;
        position:relative;
        left: 50%;
        top:1px;
    }

    #centeredsubmenu > ul > li a {
        display:block;
        margin:0;
        padding:.6em 1em .4em;
        font-size:1em;
        line-height:1em;
        background:#333;
        text-decoration:none;
        color:#f3f3f3;
        border-bottom:1px solid #000;
    }

    #centeredsubmenu > ul > li.active a {
        color:#f3f3f3;
        background:#333;
    }

    #centeredsubmenu > ul > li a:hover {
        background:#333; /* Top menu items background colour */
        color:#f3f3f3;
        border-bottom:1px solid #333;
    }

 /* Submenu items */
    #centeredsubmenu ul ul {
        display:none; /* Sub menus are hidden by default */
        position:absolute;
        top:2em;
        left:1em;
        width:8em; /* width of the drop-down menus */
    }

    #centeredsubmenu ul ul li {
        float: none;
        clear:both;
        width:100%;
    }

    #centeredsubmenu ul ul li a,
    #centeredsubmenu ul li.active li a { /* This line is required for IE 6 and below */
        font-size:.9em;
        font-weight:normal; /* resets the bold set for the top level menu items */
        background:#333;
        color:#f3f3f3;
        line-height:1.4em; /* overwrite line-height value from top menu */
        border-bottom:1px solid #000; /* sub menu item horizontal lines */
    }

    #centeredsubmenu ul ul li a:hover,
    #centeredsubmenu ul li.active ul li a:hover { /* This line is required for IE 6 and below */
        background:#f3f3f3; /* Sub menu items background colour */
        color:#000;
    }
 
    /* Make the sub menus appear on hover */
    #centeredsubmenu ul li:hover ul {
        display: block;
    }

#menu-toggle {
        display: none;
        background: #000;
        color: #f3f3f3;
        border: 1px solid #f3f3f3;
        font-size: 1.5rem;
        padding: 0.3rem 0.8rem;
        cursor: pointer;
        margin: 0.5rem 0;
    }

@media (max-width: 768px) {
    #menu-toggle {
        display: block;
    }

    .image-section {
        order: -1; /* Put image on top for mobile */
        }

    #centeredsubmenu {
        display: none;
    }

    #centeredsubmenu.open {
        display: block;
    }

    #centeredsubmenu ul ul {
        display: none;
        position: static;
        width: 100%;
        float: none;
    }

    #centeredsubmenu .expanded {
        display: block;
    }

    #centeredsubmenu > ul > li {
        float: none;
        left: 0;
        position: static;
        display: block;
        text-align: left; /* overrides the earlier centered rule */
        width: 100%;
        margin: 0;
    }

     #centeredsubmenu > ul > li > a {
        padding: 0.7em 1em;
        border-bottom: 1px solid #333;
    }

    #centeredsubmenu ul {
        float: none;
        right: 0;
        position: static;
        width: 100%;
    }

    #centeredsubmenu ul ul li a {
        font-size: 1em;
        padding: 0.5em;
        border-bottom: 1px solid #333;
        text-align: left;
        padding-left: 2.5em; /* indented further than top-level items */
    }
}