/* Billy Wall - shared stylesheet
   Plain: no framework, no JavaScript, no webfonts.
   Colours carried over from the original style2.css. */

:root {
    --dark:    #3d6c87;   /* headings, masthead h1 */
    --mid:     #5f8ea9;   /* links, subheading */
    --hover:   #33627d;   /* link hover */
    --bg:      #f2f2f7;   /* page background */
    --panel:   #ffffff;   /* content panel */
    --panel2:  #fafaff;   /* masthead */
    --panel3:  #fefeff;   /* footer */
    --edge-lt: #dcdcdc;   /* bevel: top */
    --edge-md: #a9a9a9;   /* bevel: sides */
    --edge-dk: #808080;   /* bevel: bottom */
}

/* The original used a three-tone border to fake a raised panel.
   Kept, since it's most of the site's character. */
.panel {
    border-top: 1px solid var(--edge-lt);
    border-right: 1px solid var(--edge-md);
    border-bottom: 1px solid var(--edge-dk);
    border-left: 1px solid var(--edge-md);
}

body {
    margin: 0;
    padding: 10px;
    background-color: var(--bg);
    background-image: url('images/background.gif');
    background-repeat: repeat;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.page {
    max-width: 920px;
    margin: 0 auto;
}

/* ---------- masthead ---------- */

#masthead {
    text-align: center;
    padding: 0.5em 1em;
    background-color: var(--panel2);
}

#masthead h1 {
    color: var(--dark);
    font-size: 28px;
    margin: 0.3em 0 0.1em;
}

#masthead h3 {
    color: var(--mid);
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 0.4em;
}

/* ---------- navigation ---------- */

nav {
    margin: 10px 0;
    padding: 0.4em 0.8em;
    background-color: var(--panel);
}

nav a {
    display: inline-block;
    margin-right: 0.5em;
    padding: 5px 10px;
    color: var(--dark);
    text-decoration: none;
    border: 1px solid var(--panel);
}

nav a:hover,
nav a:focus {
    color: #ffffff;
    border: 1px solid var(--mid);
    background-color: var(--mid);
}

nav a[aria-current="page"] {
    border: 1px solid var(--edge-md);
}

/* ---------- content ---------- */

#content {
    padding: 0.5em 1.5em 1.5em;
    background-color: var(--panel);
}

#content h1,
#content h2,
#content h3 {
    color: var(--dark);
}

h1 { font-size: 22px; }
h2 { font-size: 18px; margin: 1.5em 0 0.5em; }
h3 { font-size: 15px; margin: 0 0 0.3em; }

p {
    max-width: 70ch;
}

a {
    color: var(--mid);
    text-decoration: underline;
}

a:hover,
a:focus {
    color: var(--hover);
}

/* ---------- albums ---------- */

.albums {
    list-style: none;
    margin: 1em 0 0;
    padding: 0;
}

.albums > li {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    align-items: flex-start;
    padding: 1.5em 0;
    border-top: 1px solid var(--edge-lt);
}

.albums > li:first-child {
    border-top: none;
    padding-top: 0.5em;
}

.albums img {
    width: 220px;
    height: auto;
    padding: 5px;
    border: 1px solid var(--edge-dk);
    background: #ffffff;
}

.album-info {
    flex: 1 1 320px;
}

.album-info h2 {
    margin-top: 0;
}

.year {
    color: var(--edge-dk);
    font-size: 12px;
}

.listen {
    list-style: none;
    margin: 1em 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
}

.listen li {
    margin: 0;
}

/* Buttons reuse the navigation's hover treatment: white on mid-blue. */
.listen a {
    display: inline-block;
    padding: 9px 18px;
    color: #ffffff;
    background-color: var(--mid);
    border: 1px solid var(--mid);
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
}

.listen a:hover,
.listen a:focus {
    color: #ffffff;
    background-color: var(--hover);
    border-color: var(--hover);
    text-decoration: none;
}

/* ---------- photos ---------- */

.gallery {
    list-style: none;
    margin: 1em 0 0;
    padding: 0;
}

.gallery li {
    margin-bottom: 1.5em;
}

.gallery img {
    display: block;
    width: 100%;
    height: auto;
    padding: 5px;
    border: 1px solid var(--edge-dk);
    background: #ffffff;
    box-sizing: border-box;
}

/* ---------- footer ---------- */

#footer {
    clear: both;
    text-align: center;
    margin-top: 10px;
    padding: 0.6em 1em;
    background-color: var(--panel3);
    font-size: 12px;
}

#footer p {
    max-width: none;
    color: var(--edge-dk);
    margin: 0.4em 0;
}

#footer a {
    color: var(--mid);
}

#footer a:hover {
    color: var(--hover);
    text-decoration: none;
}

.copyright {
    font-size: 11px;
}

/* ---------- small screens ---------- */

@media (max-width: 600px) {
    body { padding: 5px; font-size: 14px; }
    #content { padding: 0.5em 1em 1em; }
    .albums img { width: 100%; max-width: 300px; }
    nav a { margin-bottom: 0.2em; }
}