/* ------------------------------------------------------------------
   Global Stylesheet for the Conference Website
   This file defines the visual appearance of the conference portal.
   It uses CSS variables for easy theming and focuses on clean, readable
   layouts across devices.  No external frameworks are required.
------------------------------------------------------------------- */

/* Colour palette */
:root {
    --primary-color: #283593;     /* deep blue */
    --secondary-color: #f57c00;   /* warm orange */
    --accent-color: #3f51b5;      /* mid blue */
    --light-bg: #f9f9f9;
    --dark-bg: #1a237e;
    --text-color: #333;
    --light-text: #fff;
    --border-radius: 4px;
}

/* Reset defaults */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fff;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Navigation */
.site-header {
    background-color: var(--primary-color);
    color: var(--light-text);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo a {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--light-text);
}

.main-nav ul {
    display: flex;
    gap: 1rem;
    align-items: center;
    transition: max-height 0.3s ease;
}

.main-nav a {
    color: var(--light-text);
    padding: 8px 12px;
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease;
    font-size: 0.95rem;
}

.main-nav a:hover,
.main-nav a.active {
    background-color: var(--secondary-color);
    color: #fff;
}

/* Mobile menu toggle hidden by default */
.menu-toggle {
    display: none;
}

/* Hero section */
.hero {
    position: relative;
    background-image: url('../images/hero.png');
    background-size: cover;
    background-position: center;
    height: 60vh;
    /* Slowly zoom the background image for a dynamic feel */
    animation: heroZoom 30s ease-in-out infinite alternate;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-text);
}

@keyframes heroZoom {
    /* Increase the zoom range for a more noticeable effect */
    0% { background-size: 100%; }
    100% { background-size: 125%; }
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 31, 60, 0.65);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.hero-content h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.btn {
    display: inline-block;
    padding: 10px 24px;
    font-size: 1rem;
    border-radius: var(--border-radius);
    background-color: var(--secondary-color);
    color: #fff;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.btn:hover {
    background-color: #e64a19;
}

/* Section styling */
section {
    padding: 60px 0;
}

section.light-bg {
    background-color: var(--light-bg);
}

section h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.8rem;
    color: var(--primary-color);
    font-weight: 600;
}

section p.lead {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 1.1rem;
    color: #555;
}

/* About section specifics */
.about-image {
    width: 100%;
    max-width: 500px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.about-content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
}

.about-content > div {
    flex: 1;
    min-width: 250px;
}

/* List styling */
ul.tick-list {
    list-style: none;
    padding-left: 0;
}

ul.tick-list li {
    padding-left: 28px;
    margin-bottom: 8px;
    position: relative;
}

ul.tick-list li::before {
    content: '\2713'; /* check mark */
    position: absolute;
    left: 0;
    top: 0;
    color: var(--secondary-color);
    font-weight: 600;
}

/* Schedule table */
.schedule-tabs {
    text-align: center;
    margin-bottom: 20px;
}

.schedule-tabs button {
    margin: 0 5px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--primary-color);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.schedule-tabs button.active,
.schedule-tabs button:hover {
    background-color: var(--secondary-color);
}

table.schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

table.schedule-table thead {
    background-color: var(--primary-color);
    color: var(--light-text);
}

table.schedule-table th,
table.schedule-table td {
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    text-align: left;
    font-size: 0.95rem;
}

table.schedule-table tbody tr:nth-child(even) {
    background-color: var(--light-bg);
}

/* Forms */
form {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    font-size: 1rem;
    background-color: #fff;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-group .fee-display {
    font-weight: 600;
    color: var(--secondary-color);
    margin-top: 6px;
}

.alert {
    padding: 12px;
    margin-bottom: 20px;
    border-radius: var(--border-radius);
    font-size: 0.95rem;
}

.alert-success {
    background-color: #c8e6c9;
    color: #256029;
}

.alert-error {
    background-color: #ffcdd2;
    color: #b71c1c;
}

/* Footer */
.site-footer {
    background-color: var(--primary-color);
    color: var(--light-text);
    padding: 40px 0 20px;
    margin-top: 60px;
}

.site-footer .footer-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
}

.site-footer .footer-col {
    flex: 1;
    min-width: 200px;
}

.site-footer h4 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.site-footer ul li {
    margin-bottom: 8px;
}

.site-footer ul li a {
    color: var(--light-text);
    transition: color 0.3s ease;
}

.site-footer ul li a:hover {
    color: var(--secondary-color);
}

.footer-bottom {
    text-align: center;
    margin-top: 30px;
    font-size: 0.85rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 15px;
}

.published-logo {
    width: 100px;
    margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .main-nav ul {
        flex-direction: column;
        align-items: flex-start;
        background-color: var(--primary-color);
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        padding: 0 0 10px;
    }
    .hero {
        height: 50vh;
    }
    .hero-content h1 {
        font-size: 2rem;
    }
    .hero-content p {
        font-size: 1rem;
    }
    .about-content {
        flex-direction: column;
        text-align: center;
    }
    .site-footer .footer-cols {
        flex-direction: column;
        text-align: center;
    }
    /* Show menu toggle button */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
    }
    .menu-toggle span {
        display: block;
        width: 26px;
        height: 3px;
        background-color: var(--light-text);
        border-radius: 3px;
        transition: transform 0.3s ease;
    }
    /* When nav is open, allow menu to expand */
    .site-header.nav-open .main-nav ul {
        max-height: 500px;
    }

    .main-nav ul li {
        width: 100%;
    }
    .main-nav ul li a {
        display: block;
        width: 100%;
        padding: 10px 16px;
    }
}