/* -------------------------------------------------
   GLOBAL RESET & BASE
   ------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 100%; }               /* 1rem = 16px */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: tahoma, sans-serif;
    font-size: 1rem;                    /* base size */
    line-height: 1.5;
    background: #070F21 url("img/CarmenLine.png") center top / 100% auto no-repeat;
    color: #333;
    overflow-x: hidden;
}

/* -------------------------------------------------
   LAYOUT CONTAINERS
   ------------------------------------------------- */
#bigDiv       { width: 100%; min-width: 0; }
#headerDiv    { width: 100%; }
#menuDiv      { padding: 0.5rem 1rem; }
#mainDiv      { 
    margin: 1rem auto;
    padding: 1rem;
    max-width: 90%;                 /* never wider than screen */
    background: #fff;
    border-radius: 12px;
}
#footer       { 
    padding: 1rem;
    color: #fdfae7;
    font-size: .9rem;
    text-align: center;
    width: 100%;
}

/* -------------------------------------------------
   MENU (responsive horizontal → vertical)
   ------------------------------------------------- */
#menuDiv {
    padding: 1rem 1rem 0.5rem;
    /*background: rgba(7,15,33,.9);          /* optional dark bar */
}
#menuDiv ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}
#menuDiv li { 
    font-size: 1.8rem;              /* much smaller than 270% */
    line-height: 1.2;
}
#menuDiv li a {
    display: block;
    color: #EDEDED;
    text-decoration: none;
    padding: .75rem 1.5rem;
    border-radius: 8px;
    transition: background .25s, color .25s;
}
#menuDiv li a:hover {
    background: rgba(255,193,69,.25);
    color: #FFC145;
}
#menuDiv li a.selected { 
    background: transparent !important;
    color: #FFC145;
}

/* Mobile – still big but stacked */
@media (max-width: 480px) {
    #menuDiv li { font-size: 1.5rem; }
    #menuDiv li a { padding: 0.6rem 1rem; }
}

/* -------------------------------------------------
   TYPOGRAPHY
   ------------------------------------------------- */
h1, h2, h3 { margin-top: 0; }
p    { margin: 0.75rem 0; }

/* -------------------------------------------------
   IMAGES & MEDIA
   ------------------------------------------------- */
img, iframe, video {
    max-width: 100%;
    height: auto;
    display: block;
}
/* ---- RESPONSIVE IFRAMES (full height inside container) ---- */
.iframe-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;          /* 16:9 ratio – change if needed */
    height: 0;
    overflow: hidden;
}
.iframe-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.bioPhoto { border-radius: 8px; }

.mailer {
    position: fixed;
    right: 1rem;
    top: 1rem;
    z-index: 10;
    width: 40px;
}

/* -------------------------------------------------
   AUDIO PLAYER – RESPONSIVE SCALING (NO SCROLLBARS)
   ------------------------------------------------- */
.audioPlayerWrapper {
    width: 100%;
    max-width: 640px;           /* original size */
    margin: 1.5rem auto;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    transform-origin: top center;
}

.audioPlayer {
    width: 640px;
    height: 420px;
    border: none;
    display: block;
}

/* -------------------------------------------------
   TABLE (events page)
   ------------------------------------------------- */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: .95rem;
}
th, td {
    border: 1px solid #ddd;
    padding: .5rem;
    text-align: left;
}
th { background: #f4f4f4; }

/* -------------------------------------------------
   MEDIA QUERIES
   ------------------------------------------------- */

@media (max-width: 768px) {
    .audioPlayerWrapper {
        transform: scale(0.9);        /* start shrinking */
    }
}
@media (max-width: 640px) {
    .audioPlayerWrapper {
        transform: scale(0.85);
    }
}
/* Small phones */
@media (max-width: 480px) {
    #menuDiv ul { flex-direction: column; align-items: center; }
    #menuDiv li { font-size: 1rem; }
    table { font-size: .85rem; }
    th, td { padding: .35rem; }
    .audioPlayerWrapper {
        transform: scale(0.75);
    }
}

/* Tablets 
@media (min-width: 481px) and (max-width: 768px) {
    #mainDiv { max-width: 85%; }
}*/

/* Desktops – keep original nice spacing */
@media (min-width: 769px) {
    #mainDiv { max-width: 800px; }
    #menuDiv { font-size: 1.4rem; }
}