/* css/poster-theme.css
   Pelvis Brothers movie-poster site theme.
   All page styling belongs here. No page-level <style> blocks needed.
*/

:root{
    --pelvis-blue:#00b8fc;
    --pelvis-blue-dark:#008fca;
    --poster-cream:#f4ead6;
    --poster-paper:#efe2c5;
    --poster-black:#050505;
    --poster-line:rgba(244,234,214,.62);
}

*{box-sizing:border-box}

html{
    min-height:100%;
    margin:0;
    background:#050505;
    overflow-x:hidden;
    overflow-y:auto;
}

body{
    min-height:100%;
    margin:0;
    overflow-x:hidden;
    overflow-y:auto;
    color:var(--poster-cream);
    background:
        radial-gradient(circle at 18% 18%, rgba(0,184,252,.22), transparent 20%),
        radial-gradient(circle at 82% 14%, rgba(0,184,252,.16), transparent 18%),
        linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 8px),
        #050505;
    font-family:Arial, Helvetica, sans-serif;
}

body:after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:radial-gradient(circle at center, transparent 0 45%, rgba(0,0,0,.82) 100%);
    z-index:-1;
}

body.no-scroll-home{
    height:100vh;
    overflow:hidden;
}

.home-header,
.site-header{
    min-height:clamp(82px, 15vh, 145px);
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(90deg, rgba(0,0,0,.94), rgba(239,226,197,.92) 20%, rgba(239,226,197,.96) 80%, rgba(0,0,0,.94));
    border-bottom:5px solid #000;
    position:relative;
    overflow:hidden;
    padding:8px 12px;
}

.home-header:before,
.home-header:after,
.site-header:before,
.site-header:after{
    content:"✦";
    position:absolute;
    color:var(--pelvis-blue);
    font-size:clamp(34px, 6vw, 64px);
    text-shadow:2px 2px 0 #000;
    top:50%;
    transform:translateY(-50%) rotate(-12deg);
}

.home-header:before,
.site-header:before{left:14%}

.home-header:after,
.site-header:after{
    right:14%;
    transform:translateY(-50%) rotate(12deg);
}

.band-banner{
    width:min(520px, 72vw);
    max-height:120px;
    object-fit:contain;
    position:relative;
    z-index:2;
    filter:drop-shadow(1px 2px 3px rgba(0,0,0,.35));
}

#nav-placeholder{
    background:var(--pelvis-blue);
    border-bottom:4px solid #000;
    box-shadow:0 5px 0 rgba(0,0,0,.35);
    position:relative;
    z-index:10;
}

#nav-placeholder nav,
#nav-placeholder ul{
    background:var(--pelvis-blue) !important;
}

#nav-placeholder a{
    color:#fff !important;
    text-shadow:1px 1px 0 #000;
    font-weight:900;
}

.poster-wrap{
    position:relative;
    z-index:1;
    width:min(1120px, 94vw);
    margin:0 auto 36px;
    padding:28px 0 22px;
}

.poster-stars{
    text-align:center;
    color:var(--pelvis-blue);
    font-size:34px;
    margin-bottom:4px;
    text-shadow:2px 2px 0 #000;
}

.poster-title{
    margin:8px 0 18px;
    text-align:center;
    font-family:Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
    font-size:clamp(3rem, 7vw, 6.2rem);
    line-height:.88;
    color:var(--poster-cream);
    text-transform:uppercase;
    letter-spacing:4px;
    text-shadow:5px 5px 0 #000, 0 0 26px rgba(0,184,252,.25);
}

.poster-panel,
.contact-card,
.review-card,
.config,
.pb-member,
.gallery-item,
.video-card,
.pbj-panel{
    background:linear-gradient(rgba(255,255,255,.025), rgba(255,255,255,0)), #070707;
    border:2px solid var(--poster-line);
    box-shadow:0 0 0 5px #000, 0 0 35px rgba(0,184,252,.12);
}

.poster-panel{
    padding:24px;
    overflow:hidden;
}

.poster-footer-art{
    position:relative;
    z-index:1;
    margin:28px auto 0;
    height:70px;
    overflow:hidden;
    border-top:4px solid var(--pelvis-blue);
}

.poster-footer-art:before{
    content:"";
    position:absolute;
    left:-5%;
    right:-5%;
    bottom:-52px;
    height:110px;
    background:var(--pelvis-blue);
    transform:rotate(-2deg);
    box-shadow:0 -5px 0 #000;
}

.poster-footer-art:after{
    content:"★   ROCKABILLY • ROCK & ROLL   ★";
    position:absolute;
    inset:22px 0 auto;
    text-align:center;
    color:#000;
    font-size:1.25rem;
    font-weight:900;
    letter-spacing:2px;
}

footer,
.site-footer{
    position:relative;
    z-index:1;
    text-align:center;
    color:#000;
    background:var(--pelvis-blue);
    padding:12px;
    font-family:Arial, sans-serif;
    font-weight:700;
}

/* Home */
.home-stage{
    min-height:0;
    display:grid;
    grid-template-columns:minmax(280px, 42%) 1fr;
    gap:clamp(14px, 2vw, 28px);
    align-items:center;
    width:min(1180px, 96vw);
    margin:0 auto;
    padding:clamp(12px, 2vh, 22px) 0;
}

.home-copy{
    align-self:center;
    padding:clamp(14px, 2.4vw, 28px);
    background:rgba(0,0,0,.72);
    border:2px solid rgba(244,234,214,.62);
    box-shadow:0 0 0 5px #000, 0 0 32px rgba(0,184,252,.18);
}

.home-stars{
    color:var(--pelvis-blue);
    text-align:center;
    font-size:clamp(22px, 3vw, 34px);
    text-shadow:2px 2px 0 #000;
    margin-bottom:4px;
}

.home-title{
    margin:0;
    color:var(--poster-cream);
    text-align:center;
    text-transform:uppercase;
    font-family:Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
    font-size:clamp(2.3rem, 6vw, 5.4rem);
    line-height:.9;
    letter-spacing:3px;
    text-shadow:5px 5px 0 #000, 0 0 24px rgba(0,184,252,.28);
}

.home-tagline{
    margin:12px 0 0;
    color:var(--pelvis-blue);
    text-align:center;
    text-transform:uppercase;
    font-size:clamp(1rem, 1.9vw, 1.45rem);
    font-weight:900;
    letter-spacing:2px;
    text-shadow:2px 2px 0 #000;
}

.home-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:18px;
}

.home-button,
.poster-button,
.review-submit,
.facebook-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
    padding:14px 22px;
    background:var(--pelvis-blue);
    color:#fff !important;
    border:2px solid #000;
    box-shadow:4px 4px 0 #000;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:900;
    letter-spacing:1px;
    cursor:pointer;
}

.home-button:hover,
.poster-button:hover,
.review-submit:hover,
.facebook-button:hover{
    background:#000;
    color:var(--pelvis-blue) !important;
    border-color:var(--pelvis-blue);
}

.photo-card{
    min-height:0;
    height:100%;
    max-height:calc(100vh - 245px);
    padding:10px;
    background:#050505;
    border:2px solid rgba(244,234,214,.62);
    box-shadow:0 0 0 5px #000, 0 0 34px rgba(0,184,252,.22);
    transform:rotate(-1deg);
}

.photo-card img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center 38%;
    border:3px solid #000;
}

.home-footer{
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--pelvis-blue);
    color:#000;
    border-top:4px solid #000;
    font-size:.9rem;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
}

/* Shared section titles */
.list-title,
.section-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:22px 0 18px;
    color:var(--poster-cream);
    font-family:Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
    font-size:clamp(1.6rem,4vw,2.4rem);
    text-transform:uppercase;
    text-shadow:3px 3px 0 #000;
}

.list-title:before,
.list-title:after,
.section-title:before,
.section-title:after{
    content:"";
    height:2px;
    flex:1;
    background:linear-gradient(90deg, transparent, var(--pelvis-blue), transparent);
}

/* About */
.about-intro{
    max-width:820px;
    margin:0 auto 26px;
    text-align:center;
    font-size:1.12rem;
    line-height:1.55;
}

.configs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin:24px 0 32px;
}

.config{
    padding:22px 18px;
    text-align:center;
    box-shadow:4px 4px 0 #000;
}

.config i{
    color:var(--pelvis-blue);
    font-size:2rem;
    margin-bottom:10px;
    text-shadow:2px 2px 0 #000;
}

.config h3,
.pb-text h3{
    margin:8px 0;
    color:#fff;
    font-family:Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
    font-size:1.7rem;
    letter-spacing:1px;
    text-transform:uppercase;
}

.config p,
.pb-text p,
.contact-note{
    color:var(--poster-cream);
    font-size:1rem;
    line-height:1.45;
}

.pb-members{
    display:grid;
    gap:18px;
}

.pb-member{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:18px;
    align-items:center;
    padding:16px;
    box-shadow:4px 4px 0 #000;
}

.pb-member img{
    width:120px;
    height:120px;
    object-fit:cover;
    border:3px solid var(--pelvis-blue);
    box-shadow:4px 4px 0 #000;
}

.pb-icons{
    color:var(--pelvis-blue);
    margin-right:10px;
}

/* Contact */
.contact-card{
    padding:34px;
    text-align:center;
    overflow:hidden;
}

.contact-kicker{
    color:var(--pelvis-blue);
    font-size:clamp(1.05rem, 2vw, 1.45rem);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:2px;
    text-shadow:2px 2px 0 #000;
    margin-bottom:22px;
}

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin:26px auto;
}

.contact-box{
    min-height:150px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:22px;
    background:#050505;
    border:2px solid rgba(244,234,214,.55);
    box-shadow:4px 4px 0 #000;
    text-decoration:none;
}

.contact-box:hover{
    border-color:var(--pelvis-blue);
    box-shadow:4px 4px 0 #000, 0 0 25px rgba(0,184,252,.25);
}

.contact-label{
    color:var(--pelvis-blue);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:10px;
}

.contact-value{
    color:#fff;
    font-family:Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
    font-size:clamp(1.4rem, 3vw, 2.15rem);
    letter-spacing:1px;
    text-shadow:3px 3px 0 #000;
    word-break:break-word;
}

.facebook-card{
    max-width:420px;
    margin:24px auto 0;
}

.facebook-button img{
    width:34px;
    height:34px;
    object-fit:contain;
}

.contact-note{
    max-width:700px;
    margin:28px auto 0;
}

/* Reviews */
.review-form{
    display:grid;
    gap:14px;
    max-width:820px;
    margin:0 auto;
}

.review-form input,
.review-form textarea{
    width:100%;
    padding:14px 16px;
    border:2px solid rgba(244,234,214,.55);
    background:#050505;
    color:#fff;
    font-size:1rem;
    box-shadow:3px 3px 0 #000;
}

.review-form textarea{
    min-height:140px;
    resize:vertical;
}

.review-submit{
    justify-self:center;
    min-width:220px;
}

.review-list{
    display:grid;
    gap:16px;
}

.review-card{
    position:relative;
    padding:20px;
    overflow:hidden;
    box-shadow:4px 4px 0 #000;
}

.review-card:before{
    content:"“";
    position:absolute;
    top:-18px;
    left:12px;
    color:rgba(0,184,252,.25);
    font-size:7rem;
    font-family:Georgia, serif;
    line-height:1;
}

.review-card strong{
    position:relative;
    z-index:1;
    display:block;
    color:var(--poster-cream);
    font-size:1.12rem;
    line-height:1.45;
    margin-bottom:12px;
}

.review-meta{
    color:var(--pelvis-blue);
    font-size:.95rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.5px;
}

/* Tour */
.view-toggle{
    display:flex;
    justify-content:center;
    margin:22px auto 24px;
    width:min(620px,96%);
    border:2px solid var(--pelvis-blue);
    box-shadow:5px 5px 0 #000;
    background:#000;
}

.view-toggle a{
    flex:1;
    display:block;
    text-align:center;
    padding:15px 12px;
    text-decoration:none;
    color:var(--poster-cream);
    font-size:clamp(1.05rem,2.6vw,1.55rem);
    text-transform:uppercase;
    font-weight:900;
    border-right:2px solid var(--pelvis-blue);
}

.view-toggle a:last-child{border-right:0}

.view-toggle a.active,
.view-toggle a:hover{
    background:var(--pelvis-blue);
    color:#fff;
    text-shadow:2px 2px 0 #000;
}

.calendar-nav{
    display:grid;
    grid-template-columns:140px 1fr 140px;
    align-items:center;
    gap:16px;
    margin:14px auto 18px;
}

.calendar-nav a{
    text-align:center;
    color:var(--poster-cream);
    text-decoration:none;
    text-transform:uppercase;
    padding:12px 16px;
    border:2px solid rgba(244,234,214,.65);
    border-radius:6px;
    background:#050505;
    box-shadow:3px 3px 0 #000;
    font-weight:900;
}

.calendar-title{
    margin:0;
    text-align:center;
    color:var(--pelvis-blue);
    font-family:Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif;
    font-size:clamp(2rem,5vw,3.2rem);
    text-transform:uppercase;
    text-shadow:3px 3px 0 #000;
    letter-spacing:3px;
}

.calendar-title:before,
.calendar-title:after{content:" ✦ "}

.tour-calendar{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

.tour-calendar th{
    background:var(--pelvis-blue);
    color:#fff;
    padding:11px 5px;
    border:1px solid rgba(244,234,214,.65);
    font-size:1.05rem;
    text-transform:uppercase;
    text-shadow:2px 2px 0 #000;
}

.tour-calendar td{
    height:124px;
    vertical-align:top;
    padding:9px;
    border:1px solid rgba(244,234,214,.65);
    background:rgba(0,0,0,.88);
}

.empty-day{
    opacity:.35;
    background:rgba(255,255,255,.04)!important;
}

.day-number{
    color:var(--poster-cream);
    font-size:1.2rem;
    font-weight:900;
    margin-bottom:5px;
    text-shadow:2px 2px 0 #000;
}

.calendar-event{
    margin-top:5px;
    padding:7px;
    border:2px solid var(--pelvis-blue);
    background:#080808;
    box-shadow:2px 2px 0 #000;
    font-weight:700;
    line-height:1.25;
}

.calendar-event .event-time,
.calendar-event .event-place{
    color:var(--pelvis-blue);
    font-size:.78rem;
    font-weight:900;
}

.calendar-event strong{
    color:#fff;
    display:block;
    font-size:.92rem;
}

.poster-list{
    width:100%;
    border-collapse:collapse;
    background:rgba(0,0,0,.86);
}

.poster-list th{display:none}

.poster-list td{
    border:1px solid rgba(244,234,214,.45);
    padding:10px 14px;
    color:#fff;
    font-size:1.02rem;
}

.poster-list tr:hover td{background:rgba(0,184,252,.12)}

.poster-list .date-cell{
    color:var(--pelvis-blue);
    font-weight:900;
    text-transform:uppercase;
    white-space:nowrap;
    width:170px;
}

.poster-list .time-cell{
    width:150px;
    color:var(--poster-cream);
    font-weight:800;
    white-space:nowrap;
}

.poster-list .venue-cell{
    color:var(--pelvis-blue);
    font-weight:900;
    font-size:1.1rem;
}

.poster-list .phone-cell{white-space:nowrap}

/* Photos / Videos */
.gallery,
.video-grid,
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:20px;
}

.gallery-item,
.video-card,
.card{
    padding:10px;
    cursor:pointer;
}

.gallery-item img,
.thumb{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    display:block;
    border:3px solid #000;
}

.gallery-item span,
.title{
    display:block;
    color:var(--poster-cream);
    font-weight:900;
    padding:8px 2px 0;
}

/* Audio */
.pbj-wrap{max-width:1200px;margin:0 auto}
.pbj-jukebox{display:grid;grid-template-columns:380px 1fr;gap:16px}
.pbj-panel{overflow:hidden}
.pbj-head,.pbj-now{padding:16px}
.pbj-list{max-height:62vh;overflow:auto}
.pbj-row{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid rgba(244,234,214,.22);cursor:pointer;background:#050505}
.pbj-row:hover,.pbj-row.pbj-active{background:rgba(0,184,252,.18)}
.pbj-title{color:#fff;font-weight:900}
.pbj-meta,.pbj-nowSub,.pbj-tip,.pbj-count{color:var(--poster-cream);opacity:.8}
.pbj-btn,.pbj-pill{border:2px solid #000;background:var(--pelvis-blue);color:#fff!important;padding:10px 12px;box-shadow:3px 3px 0 #000;cursor:pointer;font-weight:900}
.pbj-btn.pbj-primary{background:#000;color:var(--pelvis-blue)!important;border-color:var(--pelvis-blue)}

@media (max-width:820px){
    body.no-scroll-home{height:auto;overflow-y:auto}
    .home-stage{grid-template-columns:1fr;gap:10px}
    .photo-card{max-height:44vh;transform:none}
    .home-actions{grid-template-columns:1fr 1fr}
    .home-footer{display:none}
    .configs,.contact-grid,.pbj-jukebox{grid-template-columns:1fr}
}

@media (max-width:760px){
    .poster-panel{padding:16px}
    .calendar-nav{grid-template-columns:1fr 1fr}
    .calendar-title{grid-column:1/-1;grid-row:1}
    .calendar-nav a{grid-row:2}
    .tour-calendar,.tour-calendar tbody,.tour-calendar tr,.tour-calendar td{display:block;width:100%}
    .tour-calendar thead{display:none}
    .tour-calendar td{min-height:82px;height:auto}
    .empty-day{display:none!important}
    .poster-list,.poster-list tbody,.poster-list tr,.poster-list td{display:block;width:100%}
    .poster-list tr{margin-bottom:12px;border:2px solid rgba(244,234,214,.45);box-shadow:4px 4px 0 #000}
    .poster-list td{border:0;padding:7px 12px}
    .poster-list .date-cell{background:var(--pelvis-blue);color:#fff;text-shadow:2px 2px 0 #000}
    .pb-member{grid-template-columns:1fr;text-align:center}
    .pb-member img{margin:0 auto}
    .section-title:before,.section-title:after,.list-title:before,.list-title:after{display:none}
}

@media (max-width:560px){
    .home-header:before,.home-header:after,.site-header:before,.site-header:after{display:none}
    .band-banner{width:88vw}
    .home-title{font-size:2.45rem}
    .home-actions{grid-template-columns:1fr}
}


/* =========================================================
   NAVIGATION FIX
   Handles navigation.inc when it outputs plain links instead
   of a full styled nav/ul structure.
   ========================================================= */

#nav-placeholder{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:0;
    min-height:52px;
    padding:0 12px;
}

#nav-placeholder nav{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    width:100%;
}

#nav-placeholder ul{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:0;
    margin:0;
    padding:0;
    list-style:none;
}

#nav-placeholder li{
    margin:0;
    padding:0;
}

#nav-placeholder a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 18px;
    color:#fff !important;
    text-decoration:none;
    font-family:Arial, Helvetica, sans-serif;
    font-size:1rem;
    font-weight:900;
    text-shadow:1px 1px 0 #000;
}

#nav-placeholder a:hover,
#nav-placeholder a.active{
    background:#333;
    color:#fff !important;
}

@media (max-width:700px){
    #nav-placeholder{
        justify-content:flex-start;
        overflow-x:auto;
        flex-wrap:nowrap;
    }

    #nav-placeholder nav,
    #nav-placeholder ul{
        justify-content:flex-start;
        flex-wrap:nowrap;
    }

    #nav-placeholder a{
        white-space:nowrap;
        padding:0 14px;
    }
}