/*
 * Kingston Stamp Club - main stylesheet (mobile first).
 * Colours, fonts and boxes follow the original style3.css.
 */

:root {
    --blue: #0066cc;
    --yellow: #ffcb23;
    --red: #d00000;
    --text: #000;
    --link: #0a0a0a;
    --cream: #fdfbd4;
    --light-blue: #c7f2ff;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0 0 20px;
    background: #fff;
    color: var(--text);
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.45;
}

img { max-width: 100%; height: auto; border: 0; }

h1, h2, h3 { margin: 0 0 .4em; font-weight: normal; line-height: 1.2; }
h1 { font-size: 1.75em; }
h2 { font-size: 1.45em; }
h3 { font-size: 1.2em; }

ul, ol { margin-top: 0; line-height: 150%; }

a {
    color: var(--link);
    text-decoration: underline dotted #666;
    text-underline-offset: 3px;
}
a:hover { color: var(--blue); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* --- helpers from the original stylesheet --- */
.largefontbold, .lead { font-size: 18px; font-weight: bold; }
.largefontred { font-size: 18px; font-weight: bold; color: var(--red); }
.redfont { color: var(--red); }
.bold { font-weight: bold; }
.center { text-align: center; }

/* "Lead-in" headings: bold 18px line followed by its paragraph, as on the old site */
h2.lead, h3.lead { margin: 1em 0 0; font-size: 18px; font-weight: bold; }
h2.lead + p, h3.lead + p { margin-top: 0; }
section > .lead:first-child { margin-top: 0; }
.col > section + section { margin-top: 1em; }
.nutshell h3.lead { font-size: 15px; margin-top: .8em; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
    position: absolute; left: 8px; top: -60px; z-index: 10;
    padding: 8px 12px; background: #fff; color: var(--blue); font-weight: bold;
}
.skip-link:focus { top: 8px; }

/* --- layout --- */
#wrapper { max-width: 960px; margin: 0 auto; }

.site-header { margin: 0; }
.banner { display: block; border: 0; text-decoration: none; }
.banner img { display: block; width: 100%; }

.page { padding: 16px 12px 24px; }

/* --- menu: blue bar --- */
.menu { background: var(--blue); border-top: 2px solid #fff; }
.menu ul {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; margin: 0; padding: 2px; list-style: none; line-height: normal;
}
.menu a {
    display: flex; align-items: center; justify-content: center; min-height: 44px;
    padding: 8px 6px; text-align: center; text-decoration: none; text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold;
    color: #fff; background: #0059b3;
}
.menu a:hover { text-decoration: underline; color: #fff; }
.menu a[aria-current="page"] { background: #004c99; text-decoration: underline; text-underline-offset: 4px; }
.menu a:focus-visible { outline-color: var(--yellow); outline-offset: -3px; }

/* --- footer: blue bar --- */
.site-footer {
    margin: 0 0 0; padding: 10px 12px; background: var(--blue); color: #fff;
    font-family: Arial, Helvetica, sans-serif; font-size: 13px; text-align: center;
}
.site-footer p { margin: 2px 0; }
.site-footer a { color: #fff; text-decoration-color: #fff; }

/* --- boxes --- */
.news-box {
    margin: 0 auto 8px; padding: 4px 12px; border: 1px solid #000; text-align: center;
}
.nutshell, .festival-box {
    margin: 1em 0; padding: 10px; background: var(--yellow); border: 2px solid #000;
}
.nutshell p:first-child, .festival-box h2 { margin-top: 0; }
.festival-box h2 { font-size: 1.45em; }
.festival-box h3 { font-size: 1.2em; }
.featured-box { margin: 1em 0; padding: 10px; border: 2px solid #000; background: var(--cream); }
.notice-box { margin: 1em 0; padding: 10px; border: 2px solid #000; background: var(--cream); }
.forum-button {
    max-width: 420px; margin: 20px auto; padding: 10px; text-align: center;
    background: var(--light-blue); border: 2px solid #000;
}

/* --- maps --- */
.map { margin: .3em 0 1.2em; }
.map-thumb {
    position: relative; display: block; border: 1px solid #999; text-decoration: none;
    aspect-ratio: 3 / 2; overflow: hidden; background: #e8e8e8;
}
.map-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.map-label {
    position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
    padding: 8px 16px; background: var(--blue); color: #fff; border: 2px solid #fff;
    font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase;
    font-size: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.map-thumb:hover .map-label, .map-thumb:focus-visible .map-label { background: #004c99; }
.map iframe { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border: 0; }
.map figcaption { font-size: 13px; margin-top: 4px; }

/* --- schedule --- */
.schedule { width: 100%; max-width: 800px; margin: 0 auto; border-collapse: collapse; text-align: left; }
.schedule caption { text-align: left; font-size: 18px; font-weight: bold; padding: 0 0 8px; }
.schedule th { padding: 4px 6px; font-weight: bold; vertical-align: top; }
.schedule td { padding: 8px 6px; vertical-align: top; border-bottom: 2px solid #000; }
.schedule td:first-child { white-space: nowrap; }
.schedule .year-row th { padding-top: 16px; font-size: 18px; border-bottom: 2px solid #000; }

/* --- festival page --- */
.facts { padding-left: 1.2em; }
.facts li { margin: .2em 0; }

/* --- forms page --- */
.form-section { margin-bottom: 32px; padding-top: 12px; border-top: 1px solid #999; }
.form-section h3 { margin-top: 1em; }

/* --- election --- */
.slate dt { padding-top: 10px; font-weight: bold; }
.slate dd { margin-left: 1.5em; }

/* --- buttons (blue, like the menu bar) --- */
.button {
    display: inline-block; padding: 10px 18px; background: var(--blue); color: #fff;
    font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none;
}
.button:hover { background: #004c99; color: #fff; text-decoration: underline; }

/* --- Diane's Story: home-page block and comic page --- */
.diane-box picture img { display: block; width: 100%; border: 1px solid #000; margin-bottom: .6em; }
.diane-box p:last-child { margin-bottom: 0; }
.comic { max-width: 900px; margin: 0 auto; }
.comic h1 { text-align: center; }
.comic-intro { margin: 0 0 1.2em; padding: 10px 12px; border: 2px solid #000; background: var(--cream); }
.comic-intro p { margin: .4em 0; }
.comic-page { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; }
.comic-page img { display: block; width: 100%; height: auto; }
.comic-end { text-align: center; margin-top: 24px; }

/* --- 404 --- */
.not-found { text-align: center; }
.not-found img { margin: 12px auto; }

/* ================= wider screens ================= */
@media (min-width: 600px) {
    .menu ul { grid-template-columns: repeat(3, 1fr); }
    .news-box { width: 80%; }
}

@media (min-width: 768px) {
    body { padding-top: 20px; }
    .page { padding: 20px 10px 30px; }
    .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .col { min-width: 0; padding-top: 10px; }
    .news-box { width: 60%; margin-top: 10px; }
    .festival-page .map { float: left; width: 55%; margin: 0 20px 12px 0; }
    .schedule td { padding: 10px 14px; }
    .comic-page { grid-template-columns: 1fr 1fr; }
    .comic-page .wide { grid-column: span 2; }
}

@media (min-width: 960px) {
    .menu ul { display: flex; justify-content: space-between; gap: 0; padding: 0; }
    .menu li { flex: 0 1 auto; }
    .menu a { min-height: 0; padding: 12px 10px 10px; font-size: 14px; background: transparent; }
    .menu a[aria-current="page"] { background: #004c99; }
}

@media print {
    .menu, .skip-link, .map-thumb, .site-footer { display: none; }
    body { font-size: 12pt; }
}