/* THE MELONHEADS - style.css */

:root {
    --link: #109b1a;
    --link-visited: #00360a;
    --link-hover: #00ba79;
    --bg: #ffffff;
    --text: #000000;
    --heading: #cd5900;
    --border: #999999;
    --nav-bg: #fff78a;
    --highlight: #fff78a;
    --table-head: #000080;
    --table-stripe: #eeeeff;
}

body {
    font-family: Helvetica, sans-serif;
    font-size: 14px;
    background-color: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
}

a:link {
    color: var(--link);
}
a:visited {
    color: var(--link-visited);
}
a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

p {
    margin: 6px 0 10px;
    line-height: 1.5;
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 12px 0;
}

/* ---- Page wrapper ---- */
.page-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 8px;
}

/* ---- Site header ---- */
.site-header {
    display: flex;
    flex-direction: column;
    letter-spacing: 3px;
    border-bottom: 2px solid var(--border);
    padding: 10px 0 6px;
    margin-bottom: 8px;
}

/* GIF + title + GIF row */
.site-header-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.site-title {
    font-family: Helvetica, sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: var(--heading);
    text-decoration: none;
    display: block;
    margin-bottom: 2px;
}
.site-title:visited {
    color: var(--heading);
}
.site-title:hover {
    color: var(--link-hover);
    text-decoration: none;
}

.site-subtitle {
    font-size: 12px;
    color: #555555;
    font-style: italic;
}

/* ---- Navigation bar ---- */
.nav-bar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    background-color: var(--nav-bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 4px 8px;
    font-family: Helvetica, sans-serif;
    font-size: 13px;
    margin-bottom: 12px;
}

.nav-bar a {
    padding: 0 8px;
    color: var(--link);
    text-decoration: none;
    font-weight: bold;
}
.nav-bar a:visited {
    color: var(--link-visited);
}
.nav-bar a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}
.nav-bar a.active {
    color: var(--link-hover);
    text-decoration: underline;
}

.nav-sep {
    color: #666666;
}

/* ---- Page headings ---- */
h1 {
    font-family: Helvetica, sans-serif;
    font-size: 20px;
    color: var(--heading);
    border-bottom: 1px solid var(--border);
    padding-bottom: 3px;
    margin-top: 10px;
    margin-bottom: 8px;
}

h2 {
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    color: var(--heading);
    margin-top: 16px;
    margin-bottom: 6px;
}

h3 {
    font-family: Helvetica, sans-serif;
    font-size: 14px;
    color: var(--heading);
    margin-top: 12px;
    margin-bottom: 4px;
}

/* ---- Two-column page layout (replaces layout-table) ----
   .layout-cols        — the flex row container
   .layout-main        — wide left column
   .layout-sidebar     — narrow right column
   On mobile these stack vertically (see bottom of file). */
.layout-cols {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.layout-main {
    flex: 3;
    min-width: 0;
} /* ~72% */
.layout-sidebar {
    flex: 1;
    min-width: 0;
} /* ~28% */

/* Contact page uses a 60/40 split */
.layout-main-wide {
    flex: 5;
    min-width: 0;
}
.layout-sidebar-narrow {
    flex: 3;
    min-width: 0;
    padding-left: 20px;
}

/* ---- Data tables (tracklist, shows, members) ----
   These stay as <table> since they're actual tabular data.
   .table-scroll wraps them for horizontal scrolling on mobile. */
table {
    border-collapse: collapse;
    font-size: 13px;
    width: 100%;
}

th {
    background-color: var(--table-head);
    color: #ffffff;
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    padding: 4px 8px;
    text-align: left;
}

td {
    padding: 3px 8px;
    border-bottom: 1px solid #dddddd;
    vertical-align: top;
}

tr.stripe td {
    background-color: var(--table-stripe);
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---- Members table ---- */
.members-table td:first-child {
    font-weight: bold;
    white-space: nowrap;
    width: 160px;
}

.members-table td {
    padding-bottom: 10px;
}

/* ---- Track listing ---- */
.track-num {
    text-align: right;
    color: #666666;
    width: 24px;
}
.track-single {
    background-color: var(--highlight);
}
.track-meta {
    font-size: 11px;
    color: #666666;
    font-style: italic;
}
.track-dur {
    text-align: right;
    white-space: nowrap;
    color: #444444;
}

/* ---- Shows table ---- */
.show-date {
    white-space: nowrap;
    font-weight: bold;
    width: 80px;
}
.show-venue {
    font-weight: bold;
}
tr.show-past td {
    color: #888888;
}

.show-ticket a {
    background-color: var(--nav-bg);
    border: 1px solid var(--border);
    padding: 1px 6px;
    font-family: Helvetica, sans-serif;
    font-size: 11px;
    text-decoration: none;
    color: var(--link);
    white-space: nowrap;
}
.show-ticket a:hover {
    background-color: #9999ff;
    color: #000000;
}

/* ---- Highlight / infobox ---- */
.infobox {
    background-color: var(--highlight);
    border: 1px solid #cccc00;
    padding: 6px 10px;
    font-size: 13px;
    margin: 10px 0;
}

/* ---- Video embeds ---- */
.video-section {
    margin-bottom: 14px;
}
.video-section iframe {
    border: 1px solid var(--border);
    display: block;
}
.video-label {
    font-size: 12px;
    font-family: Helvetica, sans-serif;
    margin-top: 3px;
}

/* ---- Contact form ---- */
/* The form itself uses a small inner table for label/input alignment —
   that's fine, it's a form layout not a page layout. */
.contact-form table {
    width: auto;
}
.contact-form td {
    padding: 4px 6px;
    border: none;
}
.contact-form td:first-child {
    text-align: right;
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
    font-family:
        Times New Roman,
        Times,
        serif;
    font-size: 13px;
    border: 1px solid #999999;
    padding: 2px 4px;
}

.contact-form textarea {
    width: 360px;
    height: 120px;
}
.contact-form input[type="text"],
.contact-form input[type="email"] {
    width: 240px;
}
.contact-form select {
    width: 250px;
}

input[type="submit"] {
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    background-color: var(--nav-bg);
    border: 2px outset #aaaacc;
    padding: 3px 14px;
    cursor: pointer;
}
input[type="submit"]:hover {
    background-color: #9999ff;
}

/* ---- Footer ---- */
.site-footer {
    margin-top: 20px;
    padding: 8px 0;
    font-size: 11px;
    color: #555555;
    font-family: Helvetica, sans-serif;
    text-align: center;
}
.site-footer a {
    color: var(--link);
    font-size: 11px;
}

/* =================================================================
   MOBILE — stacks columns, scrolls tables, reflowing the form
   ================================================================= */
@media screen and (max-width: 600px) {
    body {
        font-size: 15px;
    }
    .page-wrap {
        padding: 0 10px;
    }
    .site-title {
        font-size: 22px;
    }

    /* Nav wraps naturally as a flex row — separators hidden */
    .nav-bar {
        padding: 6px 4px;
        line-height: 2.2;
    }
    .nav-bar a {
        font-size: 14px;
    }
    .nav-sep {
        display: none;
    }

    /* Stack both two-column layouts vertically */
    .layout-cols {
        flex-direction: column;
        gap: 12px;
    }
    .layout-sidebar-narrow {
        padding-left: 0;
    }

    /* Shows "With" column hidden on small screens */
    .shows-with {
        display: none;
    }

    /* Responsive 16:9 video embeds */
    .video-section {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }
    .video-section iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        border: 1px solid var(--border);
    }

    /* Contact form: stack label above input */
    .contact-form table,
    .contact-form tbody,
    .contact-form tr,
    .contact-form td {
        display: block;
        width: 100%;
        padding: 0;
        text-align: left;
    }
    .contact-form td:first-child {
        text-align: left;
        padding-top: 8px;
        padding-bottom: 2px;
        white-space: normal;
    }
    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form select,
    .contact-form textarea {
        width: 100%;
        box-sizing: border-box;
        font-size: 16px; /* prevents iOS zoom on focus */
    }
    .contact-form textarea {
        height: 100px;
    }

    input[type="submit"] {
        font-size: 15px;
        padding: 6px 20px;
        margin-top: 8px;
    }

    .members-table td:first-child {
        width: auto;
    }
    table {
        font-size: 13px;
    }
    th,
    td {
        padding: 4px 6px;
    }
}