/* ==========================================================================
   TSMG theme – tsmgrunning.com
   Recreates the original static-site look (green menu hanging from a fixed
   top bar, logo, running-track background, framed slider, 3-column footer)
   with a responsive layout. Breakpoint: 760px.
   ========================================================================== */

:root {
    --green: #428649;          /* links */
    --green-menu: #53a75b;     /* menu buttons */
    --blue-hover: #0099cc;     /* link hover */
    --menu-hover: #00c4ff;     /* menu button hover */
    --photo-border: #0099ff;
    --text: #000;
    --muted: #999;
    --footer-title: #666;
    --content-width: 920px;    /* 900px + 2 x 10px gutter, as on the old site */
    --topbar-h: 12px;
}

/* ---- Base --------------------------------------------------------------- */

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

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

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: #fff url(../images/track.png) no-repeat center top fixed;
}

h1, h2, h3, h4, h5, h6 { font-weight: bold; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4, h5, h6 { font-size: 14px; }

p { margin: 0 0 1em; }

a { color: var(--green); text-decoration: none; }
a:hover, a:focus { color: var(--blue-hover); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue-hover); outline-offset: 2px; }

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

ul, ol { margin: 0 0 1em; padding-left: 1.5em; }

.container {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 10px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 1000;
    background: #fff; padding: 8px 12px;
}
.skip-link:focus { left: 10px; top: 20px; }

/* ---- Header: fixed top bar + hanging menu ------------------------------- */

.topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: var(--topbar-h);
    background: url(../images/blue-back.png) repeat-x;
}
.topbar-inner { position: relative; height: 100%; }
.topbar-brand, .nav-toggle { display: none; }

.site-nav {
    position: absolute;
    top: 0;
    right: 10px;
}

.nav-menu, .sub-menu { list-style: none; margin: 0; padding: 0; }

.nav-menu {
    display: flex;
    padding: 0 1px 1px;
    background: #000 url(../images/mainbk.png) repeat;
    border-radius: 0 0 5px 5px;
    box-shadow: -0.5px 0.5px 5px #333;
}
.nav-item { position: relative; }

.nav-menu > .nav-item > a {
    display: block;
    min-width: 98px;
    padding: 10px 20px;
    font: bold 12px/16px Arial, Helvetica, sans-serif;
    color: #fff;
    text-align: center;
    text-shadow: #000 0 -1px 1px;
    white-space: nowrap;
    background: var(--green-menu) url(../images/mainbk.png) repeat 0 200px;
}
.nav-menu > .nav-item:first-child > a { min-width: 74px; }
.nav-menu > .nav-item:last-child > a { border-radius: 0 0 5px 0; min-width: 121px; }
.nav-menu > .nav-item:first-child > a { border-radius: 0 0 0 5px; }

.nav-menu > .nav-item:hover > a,
.nav-menu > .nav-item:focus-within > a,
.nav-menu > .nav-item.active > a {
    background-color: var(--menu-hover);
    background-position: 0 100px;
    color: #fff;
    text-shadow: #3d3d3d 0 -1px 1px;
}

/* Drop-down */
.sub-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 110;
    min-width: 100%;
    padding: 0 9px 9px;
    background: #333;
    border: 1px solid #5a5e60;
    border-radius: 0 0 4px 4px;
    box-shadow: .7px .7px 1px #777;
    transition: opacity .15s, visibility .15s;
}
.nav-item:hover > .sub-menu,
.nav-item:focus-within > .sub-menu { visibility: visible; opacity: 1; }

.sub-menu li { margin: 9px 0 0; }
.sub-menu a {
    display: block;
    padding: 8px 0 0;
    border-top: 1px solid #262626;
    font: 13px Arial, Helvetica, sans-serif;
    color: #ccc;
    white-space: nowrap;
}
.sub-menu a:hover, .sub-menu a:focus, .sub-menu .active > a { color: #1f80ae; }

/* Logo */
.logo { padding-top: 12px; padding-bottom: 12px; }
.logo a { display: inline-block; }
.logo img { display: block; width: 442px; }

/* ---- Main --------------------------------------------------------------- */

.site-main { flex: 1 0 auto; padding-bottom: 40px; }

.page-title { margin-top: 30px; margin-bottom: 15px; }

/* Home */
.home-intro { margin: 45px auto 20px; text-align: center; }
.home-intro h1 { margin-bottom: 20px; }
.home-body { padding: 10px; margin: 30px 0 20px; text-align: center; }
.home-body h2 { margin-bottom: 20px; }

/* ---- Slider ------------------------------------------------------------- */

.slider {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 35px; /* room for the dots */
}
.slider-frame {
    background: #fff;
    padding: 16px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 14px 18px -12px rgba(0, 0, 0, .35);
}
.slider-ribbon {
    position: absolute;
    top: -4px;
    left: -4px;
    z-index: 5;
    width: 111px;
    height: 111px;
    background: url(../images/ribbon.png) no-repeat;
    background-size: contain;
    pointer-events: none;
}
.slider-viewport {
    position: relative;
    aspect-ratio: 568 / 268;
    overflow: hidden;
    background: #eee;
}
.slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility 0s linear .8s;
}
.slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .8s ease, visibility 0s;
    z-index: 1;
}
.slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slide-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 5px;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
}
.slide-caption p { margin: 0; color: #fff; }
.slide-caption strong { color: #fff; }
.slide-caption a { color: #fff; border-bottom: 1px dotted #fff; }
.slide-caption a:hover, .slide-caption a:focus { color: #ccc; }

.slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 34px;
    height: 34px;
    margin-top: -32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 26px;
    line-height: 30px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s;
}
.slider-prev { left: 8px; }
.slider-next { right: 8px; }
.slider:hover .slider-arrow, .slider-arrow:focus-visible { opacity: 1; }
.slider-arrow:hover { background: rgba(0, 0, 0, .7); }
@media (hover: none) { .slider-arrow { opacity: .8; } }

.slider-dots {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
}
.slider-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #8b8b8b;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
    cursor: pointer;
}
.slider-dot:hover { background: #666; }
.slider-dot.is-active { background: #7cb82f; }
/* bigger touch targets without changing the look */
@media (pointer: coarse) {
    .slider-dots { gap: 4px; }
    .slider-dot { width: 22px; height: 22px; background: radial-gradient(circle, #8b8b8b 5px, transparent 5.5px); box-shadow: none; }
    .slider-dot.is-active { background: radial-gradient(circle, #7cb82f 5px, transparent 5.5px); }
}

@media (prefers-reduced-motion: reduce) {
    .slide, .slide.is-active { transition: none; }
}

/* ---- About -------------------------------------------------------------- */

.about { margin: 30px 0; }
.about h2 { margin: 0 0 5px; }
.about p { margin-bottom: 2.2em; }

.bios {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
}
.bio { display: flex; gap: 10px; align-items: flex-start; }
.bio-photo { flex: 0 0 auto; width: 177px; }
.bio-text { padding: 0 10px; }
.bio-text h3 { margin: 8px 0 15px; }
.bio-text p { margin-bottom: 1.4em; }
.bio-text ul { list-style: none; padding: 0; }
.bio-text li::before { content: "- "; }

/* ---- Athlete listing ---------------------------------------------------- */

.athlete-grid {
    list-style: none;
    margin: 0;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 45px 40px;
}
.athlete-card { text-align: center; }
.athlete-card a { display: inline-block; color: var(--text); }
.athlete-card img {
    display: block;
    width: 104px;
    height: 149px;
    margin: 0 auto 6px;
    object-fit: cover;
    border: 2px solid var(--photo-border);
    border-radius: 2px;
}
.athlete-card a:hover img, .athlete-card a:focus img { border-color: var(--green); }
.athlete-card strong { display: block; font-size: 13px; }

/* Athletes overview: one section per group */
.athletes-overview > .page-title { margin-bottom: 25px; }
.athlete-group + .athlete-group { margin-top: 50px; }
.athlete-group-title { margin-bottom: 20px; }
.athlete-group-title a { color: var(--text); }
.athlete-group-title a:hover, .athlete-group-title a:focus { color: var(--green); }

/* ---- Athlete profile ---------------------------------------------------- */

.athlete {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    column-gap: 35px;
    padding: 0 25px;
}
.athlete-photo .page-title { margin-top: 30px; margin-bottom: 10px; }
.athlete-photo img {
    display: block;
    width: 236px;
    border: 2px solid var(--photo-border);
    border-radius: 2px;
}
.athlete-info { padding-top: 70px; }
.athlete-info p { margin-bottom: 1.5em; }
.athlete-back { grid-column: 1 / -1; margin-top: 20px; }

/* ---- Contact ------------------------------------------------------------ */

.contact { text-align: center; padding-bottom: 30px; }
.contact .page-title { margin-bottom: 50px; }
.contact-card { margin-bottom: 55px; }
.contact-card h2 { margin-bottom: 25px; }
.contact-line {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: bold;
}
.contact-line img { vertical-align: middle; margin: -4px 5px 0 0; }

/* ---- Gallery + lightbox ------------------------------------------------- */

.gallery-grid {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 15px;
}
.gallery-item { display: block; }
.gallery-item img { display: block; width: 100%; border: 2px solid var(--photo-border); border-radius: 2px; }
.gallery-item:hover img, .gallery-item:focus img { border-color: var(--green); }

.lightbox {
    border: 0;
    padding: 0;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    background: transparent;
}
.lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.lightbox-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 60px 20px;
}
.lightbox figure { margin: 0; text-align: center; }
.lightbox img {
    max-width: 100%;
    max-height: calc(100vh - 140px);
    background: #fff;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 0 50px #222;
}
.lightbox figcaption { color: #fff; margin-top: 10px; font-size: 14px; }
.lightbox button {
    position: absolute;
    border: 0;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 30px;
    line-height: 40px;
    padding: 0;
}
.lightbox button:hover { background: rgba(255, 255, 255, .25); }
.lightbox-close { top: 10px; right: 10px; }
.lightbox-prev { left: 10px; top: 50%; margin-top: -22px; }
.lightbox-next { right: 10px; top: 50%; margin-top: -22px; }

/* ---- Footer ------------------------------------------------------------- */

.site-footer {
    flex-shrink: 0;
    padding: 20px 0 10px;
    border-top: 1px solid var(--muted);
    background: #fff;
    text-align: center;
}
.footer-columns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0 10px;
    margin-bottom: 20px;
}
.footer-columns.has-heading { grid-template-columns: auto; }
.footer-heading {
    margin: 0;
    padding-right: 10px;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.2;
    color: var(--footer-title);
    text-align: left;
}
.footer-col { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.footer-col li { margin: 2px 0; line-height: 1.2; }
.footer-title { margin-bottom: 5px !important; font-weight: bold; color: var(--footer-title); }
.site-footer a { color: var(--muted); font-size: 11px; }
.site-footer a:hover, .site-footer a:focus { color: var(--green); }
.copyright { margin: 10px 0 0; font-size: 10px; color: var(--muted); }

/* ---- Small screens ------------------------------------------------------ */

@media (max-width: 760px) {
    :root { --topbar-h: 48px; }

    body { background-attachment: scroll; background-size: 725px auto; padding-top: var(--topbar-h); }

    .topbar {
        background: var(--green-menu) url(../images/mainbk.png) repeat 0 200px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
    }
    .topbar-inner { display: flex; align-items: center; justify-content: space-between; }
    .topbar-brand {
        display: block;
        color: #fff;
        font-weight: bold;
        font-size: 18px;
        letter-spacing: 1px;
        text-shadow: #000 0 -1px 1px;
    }
    .topbar-brand:hover, .topbar-brand:focus { color: #fff; }

    .nav-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        margin-right: -6px;
        border: 0;
        background: transparent;
        color: #fff;
        font: bold 13px Arial, Helvetica, sans-serif;
        text-shadow: #000 0 -1px 1px;
        cursor: pointer;
    }
    .nav-toggle-bars { display: grid; gap: 4px; }
    .nav-toggle-bars span { display: block; width: 22px; height: 3px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--topbar-h));
        overflow-y: auto;
        background: #333;
        box-shadow: 0 6px 12px rgba(0, 0, 0, .4);
    }
    .site-nav.is-open { display: block; }
    /* without JavaScript the menu is simply always shown */
    .no-js .site-nav { display: block; position: static; }

    .nav-menu { display: block; padding: 0; background: none; border-radius: 0; box-shadow: none; }
    .nav-menu > .nav-item > a,
    .nav-menu > .nav-item:first-child > a,
    .nav-menu > .nav-item:last-child > a {
        min-width: 0;
        padding: 14px 20px;
        font-size: 15px;
        text-align: left;
        border-radius: 0;
        border-top: 1px solid rgba(255, 255, 255, .15);
    }
    .sub-menu {
        visibility: visible;
        opacity: 1;
        position: static;
        padding: 0 0 6px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .sub-menu li { margin: 0; }
    .sub-menu a { padding: 11px 20px 11px 36px; font-size: 15px; border-top: 1px solid #262626; }

    .logo { padding-top: 16px; padding-bottom: 4px; text-align: center; }
    .logo img { width: 100%; max-width: 360px; margin: 0 auto; }

    h1 { font-size: 22px; }
    .page-title { margin-top: 20px; }
    .home-intro { margin: 20px auto 25px; }

    .slider-frame { padding: 8px; }
    .slider-ribbon { width: 72px; height: 72px; }
    .slide-caption { position: static; font-size: 13px; }
    .slider-viewport { aspect-ratio: auto; }
    .slide { position: absolute; top: 0; left: 0; right: 0; bottom: auto; }
    .slide.is-active { position: relative; }
    .slide img { height: auto; aspect-ratio: 568 / 268; }

    .bios { grid-template-columns: 1fr; gap: 30px; }

    .athlete-grid { padding: 0; gap: 30px 10px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

    .athlete { display: block; padding: 0; }
    .athlete-photo { text-align: center; }
    .athlete-photo img { margin: 0 auto; max-width: 236px; width: 70%; }
    .athlete-info { padding-top: 25px; }

    .contact .page-title { margin-bottom: 30px; }
    .contact-card { margin-bottom: 35px; }

    .footer-columns, .footer-columns.has-heading { grid-auto-flow: row; grid-template-columns: 1fr; gap: 15px; }
    .footer-heading { text-align: center; padding: 0; margin-bottom: -5px; }
    .footer-col li { margin: 0; }
    .site-footer a { display: inline-block; padding: 4px 0; font-size: 13px; }
    .copyright { font-size: 11px; }
    .copyright a { font-size: 11px; padding: 0; }

    .lightbox-inner { padding: 60px 8px 20px; }
    .lightbox-prev, .lightbox-next { top: auto; bottom: 12px; margin-top: 0; }
}

@media (max-width: 420px) {
    .bio { flex-direction: column; align-items: center; text-align: center; }
    .bio-text { padding: 0; }
    .bio-text ul { text-align: left; }
}