/* main.css */

/* These are the colors and fonts used throughout the webpage.
 * I've listed them here so that a user may easily
 * do a search-and-replace for these to change the site theme.
 *   'Roboto',sans-serif; Font for the title text
 *   'Roboto-Slab',serif; Font for the body text 
 *   #fafafa; Background color of the site
 *   #505050; Foreground (text) color of the site
 *   #52739e; Navy, "Template" in the logo, current page in navigation, special titles in the Program
 *   #b2132e; Reddish, "Conference" in the logo, hover color for links
 *   #813c54; Heading color, titles in the Program
 *   #b8860b; Dark Goldenrod, color for links
 */

@import url('https://fonts.googleapis.com/css?family=Roboto%7CRoboto+Slab');

*{
    border:0;
    font:inherit;
    font-size:1em;
    margin:0;
    padding:0;
    vertical-align:baseline;
}

body{
    background-color: #fafafa;
    background-size: cover;
    background-attachment: fixed;
    color: #505050; 
    text-align:left;
    font-family:'Roboto',sans-serif;
    font-size:1em;
    line-height:1.5em;
    margin: 60px auto;
    width: 1000px;
    margin-left: 220px; /* space for the sidebar */
}


a{color: #b8860b; text-decoration:none;}
a.current{color: #52739e;}
a.current:hover{color: #e82945;}
a:hover{color: #b2132e;}
a:active{color: #e82945;}
h1,h2,h3,h4{
    clear:left; 
    color: #813c54; 
    margin:1.5em 0em 1em 0em; 
    font-family:'Roboto Slab',
    serif; 
    text-shadow : none;
    /*text-shadow: 1px 1px 2px #d0d0d0;*/
}
h1{font-size:2.67em;}
h2{font-size:2.00em;}
h3{font-size:1.67em;}
h4{font-size:1.33em;}
p{list-style:none; margin:24px auto 24px auto; padding:0px; width:900px; text-align:left;}
li a, p a {text-decoration:underline; text-decoration-color:#b8860b;}
ul{list-style:none; margin:24px auto 24px auto; padding:0px; width:800px; text-align:left;}
ul li{list-style:none; margin:0px auto 0px auto; padding:0px; text-align:left;}
i,em{font-style:italic;}
b,strong{font-weight:bold;}
sup{
    vertical-align: super;
    font-size: 0.8em;
    line-height: 0;
}
sub{
    vertical-align: sub;
    font-size: 0.8em;
    line-height: 0;
}
table{
    width: 1000px;
    margin: 12px auto 24px auto;
    float: center;
    /* UNCOMMENT THIS FOR DEBUGGING THE ALIGNMENT */
    /*border: 1px solid black;*/
}
th,td{
    text-align: left;
    /* UNCOMMENT THIS FOR DEBUGGING THE ALIGNMENT */
    /*border: 1px solid black;*/
}

/* Website Banner */
.banner {position: relative; font-family:'Roboto Slab',serif;}
.top-left {font-size:5.33em; 
    color: #505050; 
    background: #fafafa; 
    text-align: center; 
    width: 1000px;
    height: 67px; 
    position: absolute; 
    padding: 36px 0 0 0; top: 0px;
}
.bottom-right {font-size:2.33em; 
    color: #fafafa; 
    line-height: 1.5em; 
    width: auto; 
    height: 100px; 
    padding: 0px 27px 27px 0px; 
    text-align: right; 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
    text-shadow: none;
    /*text-shadow: 0px 0px 6px #000000;*/
}

/* Conference Title Logo */
.title1{
    color: #b2132e; 
    text-shadow: none;
    /*text-shadow: 1px 1px 3px #c0c0c0;*/
} 
.title2{
    color: #52739e; 
    text-shadow: none;
    /*text-shadow: 1px 1px 3px #c0c0c0;*/
}
.year{color: #505050; font-size:0.67em; font-weight: lighter;}

/* Navigation Links (Home, Registration, etc) */
/*
table.navigation{width:800px;}
td.navigation{font-size:1.2em; white-space:nowrap; width:20%; text-align:center; vertical-align:middle; padding:0px 0px 0px 0px;}
*/

/* Vertical sidebar navigation */
.side-nav { 
    width: 200px;
    padding: 10px;
    background: #fafafa;
    border-right: 1px solid #ccc;

    display: flex;
    flex-direction: column;
    gap: 8px;

    position: fixed;   /* stays on the left while scrolling */
    top: 165px;
    left: 0;
    height: 100vh;

    overflow-y: auto;
}

/* Links */
.side-nav a {
    text-decoration: none;
    padding: 8px;
    display: block;
    font-size: 1.1em;
    color: #333;
}

.side-nav a:hover,
.side-nav a.current {
    background: #ddd;
}

/* Highlight style for selected menu item */
.side-nav a.active {
    background-color: #003366;   /* or your preferred highlight color */
    color: white;
    font-weight: bold;
}

/* Sponsor Images */
table.sponsors{width:800px;}
td.sponsor{white-space:nowrap; width:33%; text-align:center; vertical-align:middle; padding:0px 0px 0px 0px;}
td.sponsor img{width: 100%}

/* The Table on the Program Page */
td.room{
    padding: 4px 12px 4px 4px; 
    width: 90%; 
    vertical-align:bottom; 
    font-size:1.67em; 
    color: #52739e; 
    height:32px;
}
td.date{
    white-space:nowrap; 
    width:130px; 
    text-align:right; 
    vertical-align:top; 
    padding:4px 16px 0px 0px;
}
td.title{
    padding: 4px 12px 4px 4px; 
    width: 90%; 
    vertical-align:top; 
    font-size:1.5em; 
    color: #813c54; 
    height:32px; 
    font-family:'Roboto Slab',
    serif; 
    text-shadow: none;
    /*text-shadow: 1px 1px 2px #d0d0d0; */
}
td.title-special{
    padding: 4px 12px 4px 4px; 
    width: 90%; 
    vertical-align:top; 
    font-size:1.67em; 
    color: #52739e; 
    height:32px; 
    font-family:'Roboto Slab',serif; 
    text-shadow: none;
    /*text-shadow: 1px 1px 2px #d0d0d0;*/
}
td.speaker{
    padding: 4px 12px 4px 4px; 
    font-style: italic; 
    font-size:1em; 
    max-height:999999px
}
td.abstract{
    padding: 4px 12px 12px 4px; 
    font-size:1em; 
    max-height:999999px
}
td.abstract img{
    display: block; 
    margin: 4px auto 8px auto
}
table.plenary{
    padding-top: 8px; 
    background: #ffffff;
}

/* Registration and Directions iframes and Images */
iframe.registration{display:block; margin:1em auto 2em auto; width:700px; height:1400px; border:none;}
iframe.directions{display:block; margin:1em auto 2em auto; width:800px; height:400px; border:none;}
img.center{display:block; width:67%; margin:1em auto 2em auto;}

/* Flyer Images */
table.flyers{width:800px;}
td.flyer{white-space:nowrap; width:50%; text-align:center; vertical-align:middle; padding:0px 0px 0px 0px;}
td.sponsor img{width: 100%}

footer{font-size:0.875em; margin-top:12em; text-align:center;}

.sponsor-section {
    text-align: left;
    margin-left: 20px; /* adjust as needed */
}

.dates-section {
    width: 800px;
    margin: 0 auto;
    margin-top: 40px;
}

.dates-section h3 {
    color: #52739e;
    margin-top: 10px;
    margin-left: 5px;
    font-family: 'Roboto Slab', serif;
    font-size: 1em;
}

.dates-section p {
    width: 800px;
    /*margin: 6px auto 20px auto;*/
    font-size: 1em;
    margin-left: 5px;
}

/* google maps placement */
.map-container {
    display: flex;
    justify-content: flex-start; /* you can change to center if needed */
    padding-left: 40px; /* adjusts horizontal shift */
}

/* style for committees */
committee {
    background: #ffffff;
    border: 1px solid #ccc;
    padding: 20px;
    margin: 25px 0;
    border-radius: 8px;
    max-width: 800px;
    margin-top: 60px;
}

/* Committee headings */
.committee h3 {
    margin-top: 60px;
    margin-left: 20px;
    font-size: 1.5em;
    color: #003366; /* Matches typical conference style */
}
/* logo for boxes and sponsors */
.logo-box{
    width:120px;
    height:80px;
    background:
            linear-gradient(45deg, #555 2px, transparent 2px),
            linear-gradient(-45deg, #555 2px, transparent 2px),
            #e2e8f0;
    margin-left: 40px;
    border-radius:8px
}
.logo-img {
    width: 200px;
    height: 140px;
    object-fit: contain;   /* Keeps full logo visible */
    background-color: white; /* Same background as before (optional) */
    border-radius: 8px;
    margin-left: 40px;
    padding: 6px;          /* Optional: adds breathing room around the logo */
    box-shadow: 0 0 6px rgba(0,0,0,0.15);
}


.tier-grid{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
.tier-box{
    width:120px;
    height:120px;
    background:
    #f1f5f9;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:20px}
.tier-box.small{width:80px;height:80px;font-size:16px}

.tier-box-platinum{
    width:140px;
    height:140px;
    background:
    #f1f5f9;
    background-image: url("icons/sponsor-platinum.svg"); /* path to your icon */
    opacity: 0.5;
    border-radius:8px;
    display:flex;
    align-items:center;
    margin-left: 40px;
    justify-content:center;
    font-weight:700;
    font-size:20px}


.tier-box-gold{
    width:120px;
    height:120px;
    background:
    #f1f5f9;
    background-image: url("icons/sponsor-gold.svg"); /* path to your icon */
    opacity: 0.5;
    border-radius:8px;
    display:flex;
    align-items:center;
    margin-left: 40px;
    justify-content:center;
    font-weight:700;
    font-size:20px
}

.tier-box-silver{
        width:100px;
        height:100px;
        background:
        #f1f5f9;
        background-image: url("icons/sponsor-silver.svg"); /* path to your icon */
        opacity: 0.5;
        border-radius:8px;
        display:flex;
        align-items:center;
        margin-left: 40px;
        justify-content:center;
        font-weight:700;
        font-size:20px
}

.tier-box-bronze{
        width:80px;
        height:80px;
        background:
        #f1f5f9;
        background-image: url("icons/sponsor-bronze.svg"); /* path to your icon */
        opacity: 0.5;
        border-radius:8px;
        display:flex;
        align-items:center;
        margin-left: 40px;
        justify-content:center;
        font-weight:700;
        font-size:20px
}

.tier-box-school{
    width:100px;
    height:100px;
    background:
    #f1f5f9;
    background-image: url("icons/sponsor-school.svg"); /* path to your icon */
    opacity: 0.5;
    border-radius:8px;
    display:flex;
    align-items:center;
    margin-left: 40px;
    justify-content:center;
    font-weight:700;
    font-size:20px
}        


/* My hacky way of making the site mobile-friendly */
/*
@media only screen and (max-width: 1100px) {
    h2{font-size:3.00em;}
    p{font-size:1.5em; line-height:1.5em;}
    th,td,tr{font-size:1.5em; line-height:1.5em;}
    td.date{font-size:1em; padding-top:0.5em;}
    td.navigation{font-size:1.5em; padding:0px 20px 0px 20px;}
    table.footer{font-size:0.33em;}
}
*/
/* side note with important dates */


.dates-sidebar {
    position: fixed;
    display: block;
    /*right: 120px;  Adjust based on your layout width */
    top: 900px;    /* Adjust based on where you want it to start */
    left: 5px;
    width: 180px;
    margin: 20px auto; /* Centers the logo on mobile */
    background: #fff;
    border: 1px solid #ddd;
    border-left: 5px solid #b2132e; /* Red accent */
    padding: 15px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
    font-size: 0.9em;
}

@media (min-width: 1100px) {
    .dates-sidebar {
        position: fixed;
        display: block;
        /*right: 120px;  Adjust based on your layout width */
        top: 150px;    /* Adjust based on where you want it to start */
        left: 1250px;
        width: 180px;
        margin: 20px auto; /* Centers the logo on mobile */
        background: #fff;
        border: 1px solid #ddd;
        border-left: 5px solid #b2132e; /* Red accent */
        padding: 15px;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
        font-size: 0.9em;
    }
    }

/* 2. Desktop Style (for screens wider than 1100px) */
/*
@media (min-width: 1100px) {
    .dates-sidebar {
      position: absolute;
      right: 250px; 
      top: 500px;
      margin: 0;     
    }
  }
*/

.dates-sidebar h3 {
    margin-top: 0;
    font-size: 1.2em;
    color: #52739e;
    text-shadow: none;
}

.dates-sidebar ul {
    width: 100%; /* Overrides your 800px global ul width */
    margin: 0;
    padding: 0;
    text-shadow: none;
}

.dates-sidebar li {
    margin-bottom: 12px;
    line-height: 1.3;
    text-shadow: none;
}

.dates-sidebar .highlight {
    color: #b2132e;
    font-weight: bold;
}

.dates-sidebar .view-all {
    display: block;
    margin-top: 10px;
    font-size: 0.85em;
    text-align: right;
    text-decoration: none;
}


/** entry for the springer logo */

/* 1. Default Style (for Mobile/Small screens) */
/*
.inline-support {
    display: block;
    width: 180px;
    margin: 20px auto; 
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
    box-sizing: border-box;
  }
  
  */
  /* 2. Desktop Style (for screens wider than 1100px) */
    .inline-support {
      display: block;   /* Makes it visible */
      position: fixed;  /* Locks it to the viewport */
      /*right: 40px;       /* Distance from the left edge */
      left: 5px;
      top: 610px;       /* Distance from the top */
      width: 180px;
      display: block;      /* Ensures it is always visible */
      padding: 10px;
      border: 1px solid #ddd;
      text-align: center;
      background-color: white; /* Prevents text behind it from showing through */
      z-index: 1000;
    }
  

  .inline-support img {
    width: 100%;
    height: auto;
  }
  
  .inline-support figcaption {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.2;
  }