/* ==========================================================================
   Modern Conference Stylesheet
   Preserves original visual identity while improving:
   - responsiveness
   - readability
   - maintainability
   - spacing consistency
   - modern layout behavior
   ========================================================================== */


/* ==========================================================================
   Fonts
   ========================================================================== */

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700');


/* ==========================================================================
   Theme Variables
   ========================================================================== */

:root {
    --bg-color: #fafafa;
    --text-color: #505050;

    --primary: #52739e;
    --accent: #b2132e;
    --heading: #813c54;
    --link: #b8860b;

    --white: #ffffff;
    --light-gray: #f2f2f2;
    --shadow: rgba(0,0,0,0.08);

    --content-width: 1200px;
    --text-width: 900px;

    --radius: 10px;
    --transition: 0.25s ease;
}


/* ==========================================================================
   Base Reset
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0 auto;
    padding: 0 20px 40px 20px;

    max-width: var(--content-width);

    background-color: var(--bg-color);
    background-size: cover;
    background-attachment: fixed;

    color: var(--text-color);

    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.7;
}


/* ==========================================================================
   Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5 {
    clear: both;

    margin-top: 1.75em;
    margin-bottom: 0.75em;

    color: var(--heading);

    font-family: 'Roboto Slab', serif;
    line-height: 1.2;

    text-shadow: 1px 1px 2px #dcdcdc;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.3rem; }
h3 { font-size: 1.8rem; }
h4,
h5 { font-size: 1.35rem; }

p {
    max-width: var(--text-width);
    margin: 1.5rem auto;
}

ul,
ol {
    max-width: 850px;
    margin: 1.5rem auto;
    padding-left: 2rem;
}

ul li,
ol li {
    margin-bottom: 0.6rem;
}

i,
em {
    font-style: italic;
}

b,
strong {
    font-weight: 700;
}

sup,
sub {
    font-size: 0.8em;
    line-height: 0;
}

sup { vertical-align: super; }
sub { vertical-align: sub; }


/* ==========================================================================
   Links
   ========================================================================== */

a {
    color: var(--link);
    text-decoration: none;

    transition: color var(--transition);
}

a:hover {
    color: var(--accent);
}

a:active {
    color: #e82945;
}

a.current {
    color: var(--primary);
    font-weight: 500;
}

a.current:hover {
    color: #e82945;
}

li a,
p a {
    text-decoration: underline;
    text-decoration-color: var(--link);
    text-underline-offset: 2px;
}


/* ==========================================================================
   Tables
   ========================================================================== */

table {
    width: 100%;
    margin: 1rem auto 2rem auto;

    border-collapse: collapse;
}

th,
td {
    padding: 0.6rem;
    text-align: left;
    vertical-align: center;
}

tr:nth-child(even) {
    background-color: var(--light-gray);
}


/* ==========================================================================
   Website Banner
   ========================================================================== */

.banner {
    position: relative;
    overflow: hidden;

    border-radius: 10px;

    margin-bottom: 1.5rem;

    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

/* Banner image */
.banner-image {
    display: block;

    width: 100%;
    height: 260px;          /* MAIN HEIGHT CONTROL */

    object-fit: cover;
}

/* Top title */
.top-left {
    position: absolute;
    top: 0;

    width: 100%;

    padding: 4px 0;         /* reduced vertical padding */

    text-align: center;

    background: rgba(250,250,250,0.90);

    line-height: 1.0;
}

/* Main title text */
.title1 {
    color: #b2132e;
   
    font-size: clamp(1.6rem, 3.5vw, 3.8rem);

    font-weight: 400;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-shadow: 1px 1px 2px rgba(0,0,0,0.15);
}

/* Bottom-right date/location */
.bottom-right {
    position: absolute;

    right: 0;
    bottom: 0;

    padding: 0.5rem 1rem;

    color: white;

    font-size: clamp(0.9rem, 1.8vw, 1.5rem);

    line-height: 1.2;

    text-align: right;

    text-shadow: 0 0 6px rgba(0,0,0,0.8);

    background: linear-gradient(
        to left,
        rgba(0,0,0,0.35),
        rgba(0,0,0,0)
    );
}

/* ========== End of Banner ===================*/

/* ==========================================================================
   Conference Logo
   ========================================================================== */

.title1 {
    color: var(--accent);
    font-size: 1.8em;
    font-weight: 300;
    line-height: 1.1;

    text-shadow: 1px 1px 3px #c0c0c0;
}

.title2 {
    color: var(--primary);
    font-size: 0.40em;
    font-weight: 300;

    text-shadow: 1px 1px 3px #c0c0c0;
}

.year {
    color: var(--text-color);
    font-size: 0.35em;
    font-weight: 300;
}


/* ==========================================================================
   Navigation
   ========================================================================== */

table.navigation {
    width: 100%;
    margin: 1.5rem auto;
}

td.navigation {
    width: 20%;

    padding: 0.75rem;

    text-align: center;
    vertical-align: middle;

    font-size: 1.25rem;
    white-space: nowrap;
}

td.navigation a {
    display: inline-block;

    padding: 0.4rem 0.8rem;

    border-radius: 6px;

    transition:
        background-color var(--transition),
        color var(--transition);
}

td.navigation a:hover {
    background-color: rgba(82,115,158,0.12);
}


/* ==========================================================================
   Sponsors
   ========================================================================== */

table.sponsors {
    width: 100%;
    max-width: 500px;
}

td.sponsor {
    text-align: center;
    vertical-align: top;
    padding: 1rem;
}

td.sponsor img {
    width: 180px;
    height: 248px;

    object-fit: cover;

    border-radius: 8px;
}
.logo-img {
    display: block;

    width: 180px !important;
    height: 92px !important;

    object-fit: contain !important;

    margin: 0 auto;

    background: white;
    padding: 4px;
}


td.sponsor img:hover {
    transform: scale(1.03);
}


/* ==========================================================================
   Program Table
   ========================================================================== */

table.plenary {
    background: var(--white);

    border-radius: var(--radius);
    overflow: hidden;

    box-shadow: 0 3px 12px var(--shadow);

    padding-top: 8px;
}

td.room {
    width: 90%;

    color: var(--primary);
    font-size: 1.5rem;

    padding: 0.5rem;
}

td.date {
    width: 130px;

    padding: 0.5rem 1rem 0 0;

    text-align: right;
    white-space: nowrap;
}

td.title,
td.title-special {
    width: 90%;
    padding: 0.5rem;

    font-family: 'Roboto Slab', serif;

    text-shadow: 1px 1px 2px #d0d0d0;
}

td.title {
    color: var(--heading);
    font-size: 1.4rem;
}

td.title-special {
    color: var(--primary);
    font-size: 1.5rem;
}

td.speaker {
    padding: 0.5rem;

    font-style: italic;
}

td.abstract {
    padding: 0.5rem 0.5rem 1rem 0.5rem;
}

td.abstract img {
    display: block;
    margin: 0.5rem auto 1rem auto;

    max-width: 100%;
    height: auto;

    border-radius: var(--radius);
}


/* ==========================================================================
   Embedded Content
   ========================================================================== */

iframe.registration,
iframe.directions {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 1.5rem auto 2rem auto;

    border: none;
    border-radius: var(--radius);

    box-shadow: 0 4px 14px var(--shadow);
}

iframe.registration {
    height: 1400px;
}

iframe.directions {
    height: 400px;
}

img.center {
    display: block;

    width: 67%;
    max-width: 100%;

    margin: 1.5rem auto 2rem auto;

    border-radius: var(--radius);
}


/* ==========================================================================
   Flyers
   ========================================================================== */

table.flyers {
    width: 100%;
}

td.flyer {
    width: 33%;
    padding: 1rem;

    text-align: center;
    vertical-align: middle;
}


/* ==========================================================================
   Footer
   ========================================================================== */

table.footer {
    width: 100%;
    max-width: 400px;

    margin: 4rem auto 1rem auto;

    font-size: 0.95rem;
}

td.footer {
    text-align: center;
    color: var(--primary);
}


/* ==========================================================================
   Utility Classes
   ========================================================================== */

.r { color: red; }
.g { color: green; }
.b { color: blue; }

.em {
    font-style: italic;
    font-weight: 500;
}


/* ==========================================================================
   Side-by-Side Columns
   ========================================================================== */

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    margin: 1rem 0;
}

.column {
    flex: 1 1 48%;
}


/* ==========================================================================
   Custom Minimal Table
   ========================================================================== */

table.m {
    width: 90%;
    border-spacing: 0;
    border-collapse: collapse;
}


/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media only screen and (max-width: 1100px) {

    body {
        width: 100%;
        padding: 0 16px 40px 16px;
    }

    .top-left {
        font-size: 3rem;
        position: relative;
    }

    .bottom-right {
        font-size: 1.4rem;
        position: relative;
        text-align: center;
        padding: 1rem;
        background: rgba(0,0,0,0.45);
    }

    h1 { font-size: 2.4rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.6rem; }

    p,
    li,
    td,
    th {
        font-size: 1rem;
        line-height: 1.7;
    }

    td.navigation {
        font-size: 1rem;
        padding: 0.5rem;
    }

    .row {
        flex-direction: column;
    }

    .column {
        width: 100%;
    }

    iframe.registration,
    iframe.directions {
        height: 500px;
    }

    img.center {
        width: 100%;
    }
}


@media only screen and (max-width: 700px) {

    body {
        font-size: 15px;
    }

    .top-left {
        font-size: 2.2rem;
    }

    .bottom-right {
        font-size: 1.1rem;
    }

    td.date {
        width: auto;
        display: block;
        text-align: left;
        padding-bottom: 0;
    }

    td.room,
    td.title,
    td.title-special {
        font-size: 1.15rem;
    }

    table.navigation,
    table.footer,
    table.flyers,
    table.sponsors {
        width: 100%;
    }

    td.navigation {
        display: block;
        width: 100%;
    }
}