/* ==========================================================================
   PUBLIC CIRCUIT — shared site styles
   Used by: home, tour, contact (and any future pages)
   ========================================================================== */

body{margin:0;background:#bfbfbf;font:14px helvetica;color:#222}

#wrap{max-width:960px;margin:20px auto;background:#d6d6d6;padding:20px}

/* HEADER / NAV */

header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dotted #888;padding-bottom:12px;margin-bottom:20px}

nav {display: flex; gap: 35px}

nav a{color:white;text-decoration:none;margin-right:20px;letter-spacing: 2px}

nav a:hover{color:#FFAACC;text-decoration:underline;background:#eee}

/* POPUP (listen modal, triggered from nav) */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: none;
    z-index: 1000;
}

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 330px;
    background: #d5d5d5;
    border: 1px solid #777;
    display: none;   /* <-- keep this */
    z-index: 1001;
    padding: 5px;
}

#popup-frame {
    display: block;
    width: 100%;
    height: 0;
    border: 1px solid #777;
}

/* FOOTER */

.footer {
    border-top: 1px dotted #888;
    padding-top: 20px;
    text-align: center;
}

.footer a{
    display: inline-block;
    text-decoration: none;
}

.footer img {
    display: block;
}

.socials {
    margin-bottom: 15px;
}

.socials img {
    width: 30px;
    height: 30px;
    border: none;
    margin: 0 10px;
}

.copyright {
    color: #555;
    font-size: 11px;
    letter-spacing: 1px;
}