/* ======================================================
   Steve Egelman Music – Shared Stylesheet
   ====================================================== */

/* Base */
body {
    background-color: #000;
    color: #fff;
    font-family: Verdana, Arial, sans-serif;
    margin: 0;
    padding: 8px;
}
a { color: #fff; }
img { border: 0; }

/* Site header */
.site-header { text-align: center; padding-bottom: 10px; }
.site-header img { max-width: 100%; height: auto; }
.site-title { font-size: 1.5em; font-weight: bold; letter-spacing: 0.4em; }

/* Nav */
nav.site-nav { font-weight: bold; margin: 10px 0; text-align: center; }

/* Main content area */
main { display: block; } /* Explicit block for older browsers */

/* Shows table */
table.show-table {
    width: 85%;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 4px;
}
table.show-table td {
    border: 1px solid #fff;
    padding: 3px;
    vertical-align: top;
    overflow-wrap: break-word;
}
table.show-table td img {
    max-width: 100%;
    height: auto;
}
.col-details { width: 75%; }
.col-notes { text-align: center; }
.section-heading { font-size: 1.17em; font-weight: bold; }

/* Responsive 16:9 video embeds (YouTube etc.) */
.video-container {
    max-width: 560px;
    margin: 0 0 1.5em 2em;
    aspect-ratio: 16 / 9;
}
.video-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Form elements (gigcoach pages) */
.form-table { width: 100%; max-width: 600px; }
.form-table td { padding: 4px; vertical-align: top; }
label { font-weight: bold; }
input[type="text"],
textarea {
    background-color: #222;
    color: #fff;
    border: 1px solid #fff;
    padding: 4px;
    width: 100%;
    box-sizing: border-box;
}
textarea { height: 100px; }
input[type="submit"] {
    background-color: #333;
    color: #fff;
    border: 1px solid #fff;
    padding: 6px 12px;
    cursor: pointer;
}

/* Footer */
.footer { text-align: center; font-size: 0.75em; }

/* ======================================================
   Responsive breakpoints
   ====================================================== */
@media (max-width: 640px) {
    body { padding: 4px; }

    /* Scale down the spaced-out site title */
    .site-title { font-size: 1em; letter-spacing: 0.15em; }

    /* Shows table: full width, smaller text */
    table.show-table { width: 100%; font-size: 0.9em; }

    /* Video containers: full width, no left indent on small screens */
    .video-container { max-width: 100%; margin-left: 0; }
}