/*
 * South Wales ONE - shared website styles
 * Header, navigation and site-wide design tokens.
 */

:root{
    --swo-bg:#040607;
    --swo-panel:#090d0f;
    --swo-panel-2:#0b1013;
    --swo-white:#f5f7f8;
    --swo-muted:#aab2b7;
    --swo-red:#ef233c;
    --swo-red-deep:#a50d22;
    --swo-cyan:#18d36b;
    --swo-cyan-deep:#007c8b;
    --swo-green:#18d36b;
    --swo-line:rgba(255,255,255,.15);
    --swo-page-pad:clamp(18px,2.4vw,46px);
    --swo-header-top:clamp(18px,3.1vh,42px);
    --swo-header-logo-width:clamp(205px,16.6vw,340px);
}

*{box-sizing:border-box}

/* ================================================================
   Shared header
================================================================ */

.swo-site-header{
    position:absolute;
    left:0;
    right:0;
    top:0;
    z-index:1000;
    min-height:clamp(108px,14vh,150px);
    display:flex;
    align-items:flex-start;
    gap:clamp(28px,4.5vw,88px);
    padding:var(--swo-header-top) var(--swo-page-pad) 0;
    pointer-events:none;

    /*
     * Canonical header background.
     * Every page now gets the exact same colour/tone behind the logo,
     * live indicator and menu rather than inheriting whatever gradient
     * happens to sit underneath it.
     */
    background:
        linear-gradient(
            to bottom,
            rgba(4,6,7,.98) 0%,
            rgba(4,6,7,.94) 54%,
            rgba(4,6,7,.64) 76%,
            rgba(4,6,7,0) 100%
        );
}

.swo-site-brand{
    display:block;
    width:var(--swo-header-logo-width);
    flex:0 0 auto;
    pointer-events:auto;
    text-decoration:none;
}

.swo-site-brand img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
}

.swo-site-live{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:clamp(15px,2.5vh,28px);
    color:#f4f4f4;
    font-size:clamp(11px,.88vw,16px);
    line-height:1;
    font-weight:800;
    letter-spacing:clamp(1.3px,.16vw,2.4px);
    white-space:nowrap;
}

.swo-site-live::before{
    content:"";
    width:clamp(9px,.7vw,13px);
    aspect-ratio:1;
    display:inline-block;
    flex:0 0 auto;
    border-radius:50%;
    background:var(--swo-red);
    box-shadow:0 0 18px rgba(239,35,60,.8);
    animation:swoHeaderLivePulse 1.3s ease-in-out infinite;
}

@keyframes swoHeaderLivePulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.5;transform:scale(.82)}
}

.swo-menu-button{
    position:relative;
    margin-left:auto;
    margin-top:clamp(3px,1.1vh,12px);
    width:clamp(50px,3.4vw,64px);
    height:clamp(50px,3.4vw,64px);
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid rgba(255,255,255,.20);
    border-radius:18px;
    background:
        radial-gradient(circle at 25% 15%,rgba(239,35,60,.18),transparent 48%),
        linear-gradient(145deg,rgba(14,18,20,.94),rgba(4,7,8,.96));
    color:#fff;
    cursor:pointer;
    pointer-events:auto;
    box-shadow:0 12px 34px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05);
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.swo-menu-button::after{
    content:"MENU";
    position:absolute;
    top:calc(100% + 7px);
    left:50%;
    transform:translateX(-50%);
    color:rgba(255,255,255,.50);
    font-size:8px;
    line-height:1;
    font-weight:900;
    letter-spacing:1.7px;
}

.swo-menu-lines{
    position:relative;
    width:23px;
    height:17px;
    display:block;
}

.swo-menu-lines span{
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    border-radius:999px;
    background:#fff;
    box-shadow:0 0 8px rgba(255,255,255,.12);
    transition:transform .22s ease,top .22s ease,opacity .18s ease;
}

.swo-menu-lines span:nth-child(1){top:0}
.swo-menu-lines span:nth-child(2){top:7px;background:var(--swo-red)}
.swo-menu-lines span:nth-child(3){top:14px}

.swo-menu-button:hover{
    transform:translateY(-2px);
    border-color:rgba(239,35,60,.55);
    box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 28px rgba(239,35,60,.10),inset 0 1px 0 rgba(255,255,255,.06);
}

.swo-menu-button:focus-visible{
    outline:3px solid var(--swo-cyan);
    outline-offset:4px;
}

body.swo-menu-open{overflow:hidden !important}

body.swo-menu-open .swo-menu-lines span:nth-child(1){
    top:7px;
    transform:rotate(45deg);
}

body.swo-menu-open .swo-menu-lines span:nth-child(2){opacity:0}

body.swo-menu-open .swo-menu-lines span:nth-child(3){
    top:7px;
    transform:rotate(-45deg);
}

/* Homepage has the On Air card in the upper-right, so keep the menu
   immediately to the left of that card rather than on top of it. */
body.swo-home-page .swo-menu-button{
    margin-left:auto;
    margin-right:clamp(375px,31vw,640px);
}

/* ================================================================
   Menu drawer
================================================================ */

.swo-menu-backdrop{
    position:fixed;
    inset:0;
    z-index:1190;
    background:rgba(0,0,0,.68);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease,visibility .25s ease;
}

.swo-menu-drawer{
    position:fixed;
    top:0;
    right:0;
    z-index:1200;
    width:min(470px,92vw);
    height:100dvh;
    padding:clamp(28px,4vh,52px) clamp(25px,3vw,42px) clamp(28px,4vh,48px);
    display:flex;
    flex-direction:column;
    overflow:auto;
    border-left:1px solid rgba(255,255,255,.14);
    background:
        radial-gradient(circle at 100% 0%,rgba(0,216,231,.11),transparent 30%),
        radial-gradient(circle at 0% 35%,rgba(239,35,60,.13),transparent 32%),
        linear-gradient(155deg,rgba(10,14,16,.995),rgba(3,6,7,.995));
    box-shadow:-28px 0 70px rgba(0,0,0,.48);
    transform:translateX(102%);
    visibility:hidden;
    transition:transform .28s ease,visibility .28s ease;
}

body.swo-menu-open .swo-menu-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

body.swo-menu-open .swo-menu-drawer{
    transform:translateX(0);
    visibility:visible;
}

.swo-menu-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-bottom:24px;
    border-bottom:1px solid rgba(255,255,255,.12);
}

.swo-menu-head img{
    width:min(210px,55vw);
    height:auto;
    display:block;
}

.swo-menu-close{
    width:43px;
    height:43px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.15);
    border-radius:14px;
    background:rgba(255,255,255,.035);
    color:#fff;
    font:900 24px/1 Arial,sans-serif;
    cursor:pointer;
}

.swo-menu-kicker{
    margin-top:clamp(30px,5vh,52px);
    color:var(--swo-red);
    font-size:10px;
    font-weight:900;
    letter-spacing:2.2px;
    text-transform:uppercase;
}

.swo-menu-nav{
    display:flex;
    flex-direction:column;
    margin-top:10px;
}

.swo-menu-link{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:clamp(16px,2.4vh,23px) 2px;
    border-bottom:1px solid rgba(255,255,255,.09);
    color:#fff;
    text-decoration:none;
    font-size:clamp(25px,2.2vw,37px);
    line-height:.95;
    font-weight:1000;
    letter-spacing:-1px;
    text-transform:uppercase;
    transition:color .18s ease,padding-left .18s ease;
}

.swo-menu-link span:last-child{
    color:rgba(255,255,255,.34);
    font-size:18px;
    font-weight:400;
}

.swo-menu-link:hover,
.swo-menu-link[aria-current="page"]{
    color:var(--swo-cyan);
    padding-left:9px;
}

.swo-menu-link[aria-current="page"]::before{
    content:"";
    position:absolute;
    left:-14px;
    top:50%;
    width:5px;
    height:34px;
    border-radius:8px;
    background:var(--swo-red);
    transform:translateY(-50%);
    box-shadow:0 0 16px rgba(239,35,60,.45);
}

.swo-menu-live{
    margin-top:auto;
    padding-top:28px;
}

.swo-menu-live a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:54px;
    border:1px solid rgba(239,35,60,.45);
    border-radius:16px;
    background:linear-gradient(135deg,rgba(239,35,60,.22),rgba(239,35,60,.08));
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:1000;
    letter-spacing:1.2px;
    text-transform:uppercase;
    box-shadow:0 0 28px rgba(239,35,60,.08);
}

.swo-menu-live-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--swo-red);
    box-shadow:0 0 14px rgba(239,35,60,.75);
}

@media (max-width:1180px){
    body.swo-home-page .swo-menu-button{
        margin-right:clamp(330px,35vw,430px);
    }
}

@media (max-width:900px){
    .swo-site-header{gap:24px}
    .swo-site-live{display:none}
    body.swo-home-page .swo-menu-button{margin-right:0}
}

@media (max-width:767.98px){
    :root{
        --swo-page-pad:16px;
        --swo-header-top:16px;
        --swo-header-logo-width:min(68vw,270px);
    }

    .swo-site-header{
        position:relative;
        min-height:84px;
        padding:16px var(--swo-page-pad) 14px;
        align-items:flex-start;
        background:
            linear-gradient(
                to bottom,
                rgba(4,6,7,.99) 0%,
                rgba(4,6,7,.96) 74%,
                rgba(4,6,7,.86) 100%
            );
    }

    .swo-menu-button{
        width:48px;
        height:48px;
        margin-top:0;
        border-radius:15px;
    }

    .swo-menu-button::after{display:none}
    .swo-menu-lines{width:21px}
}


/* ================================================================
   Shared typography & page design system
================================================================ */

html,
body{
    margin:0;
    width:100%;
    min-width:320px;
    min-height:100%;
    background:#000;
    color:var(--swo-white);
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

body{
    overflow-x:hidden;
}

/* Shared aliases retained for older page CSS while we migrate pages. */
:root{
    --bg:var(--swo-bg);
    --panel:var(--swo-panel);
    --panel-2:var(--swo-panel-2);
    --white:var(--swo-white);
    --muted:var(--swo-muted);
    --red:var(--swo-red);
    --red-deep:var(--swo-red-deep);
    --cyan:var(--swo-cyan);
    --cyan-deep:var(--swo-cyan-deep);
    --green:var(--swo-green);
    --line:var(--swo-line);
    --page-pad:var(--swo-page-pad);

    /*
     * Homepage layout compatibility.
     * The full-screen home page positions Now Playing above this footer height.
     * This must remain globally available unless a page deliberately overrides it.
     */
    --footer-h:clamp(48px,5.8vh,68px);
}

.swo-red{color:var(--swo-red) !important}
.swo-cyan{color:var(--swo-cyan) !important}
.swo-green{color:var(--swo-green) !important}
.swo-muted{color:var(--swo-muted) !important}

.swo-page-shell{
    width:100%;
    max-width:none;
    margin:0;
    padding:clamp(142px,17vh,190px) var(--swo-page-pad) clamp(34px,4vw,66px);
}

.swo-page-eyebrow{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 18px;
    color:#e9edef;
    font-size:clamp(10px,.72vw,13px);
    line-height:1.15;
    font-weight:900;
    letter-spacing:2.3px;
    text-transform:uppercase;
}

.swo-page-eyebrow .swo-accent,
.swo-page-eyebrow strong{
    color:var(--swo-red);
}

.swo-page-title{
    margin:0;
    color:#fff;
    font-size:clamp(52px,7vw,136px);
    line-height:.78;
    font-weight:1000;
    letter-spacing:clamp(-7px,-.4vw,-2px);
    text-transform:uppercase;
    text-shadow:0 6px 22px rgba(0,0,0,.55);
}

.swo-page-title > span{
    display:block;
}

.swo-page-intro{
    max-width:1180px;
    margin-top:clamp(26px,3vh,40px);
    color:#c4cbd0;
    font-size:clamp(15px,1vw,19px);
    line-height:1.65;
}

.swo-page-intro p{
    margin:0 0 12px;
}

.swo-page-intro strong{
    color:#fff;
    font-weight:850;
}

.swo-section-kicker{
    color:var(--swo-red);
    font-size:10px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:2.1px;
    text-transform:uppercase;
}

.swo-section-title{
    margin:7px 0 0;
    color:#fff;
    font-size:clamp(28px,2.6vw,48px);
    line-height:1;
    font-weight:1000;
    letter-spacing:-1px;
    text-transform:uppercase;
}

.swo-card-kicker{
    color:var(--swo-red);
    font-size:11px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:2px;
    text-transform:uppercase;
}

.swo-card-title{
    margin:10px 0 0;
    color:#fff;
    font-size:clamp(26px,2vw,38px);
    line-height:.95;
    font-weight:1000;
    letter-spacing:-.4px;
    text-transform:uppercase;
}

.swo-body-copy{
    color:var(--swo-muted);
    font-size:14px;
    line-height:1.55;
}

.swo-microcopy{
    color:rgba(255,255,255,.45);
    font-size:10px;
    line-height:1.4;
    font-weight:850;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

@media (min-width:768px) and (max-height:800px){
    .swo-page-shell{
        padding-top:clamp(118px,17vh,145px);
    }

    .swo-page-title{
        font-size:clamp(48px,6.2vw,100px);
    }

    .swo-page-intro{
        margin-top:20px;
        font-size:14px;
        line-height:1.5;
    }
}

@media (max-width:767.98px){
    .swo-page-shell{
        padding:20px 14px 34px;
    }

    .swo-page-title{
        font-size:clamp(44px,15vw,78px);
        line-height:.82;
        letter-spacing:-3px;
    }

    .swo-page-intro{
        margin-top:22px;
        font-size:15px;
        line-height:1.55;
    }
}

@media (max-width:420px){
    .swo-page-title{
        font-size:clamp(40px,14vw,58px);
    }

    .swo-card-title{
        font-size:26px;
    }
}

/* ================================================================
   Shared Listen Live card
   Used on Home, Requests, Schedule and future pages.
================================================================ */

.listen-live-wrap{
    width:clamp(355px,28.5vw,590px);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(8px,1vh,12px);
}

.listen-live-button{
    position:relative;
    width:100%;
    min-height:clamp(112px,10vw,155px);
    display:grid;
    grid-template-columns:clamp(50px,4vw,72px) minmax(150px,1fr) 16px;
    align-items:center;
    gap:clamp(10px,.8vw,14px);
    padding:clamp(16px,1.25vw,23px);
    overflow:hidden;
    text-decoration:none;
    color:#fff;
    border:1px solid rgba(255,255,255,.24);
    border-radius:clamp(20px,1.5vw,28px);
    background:
        radial-gradient(circle at 15% 20%,rgba(239,35,60,.32),transparent 38%),
        radial-gradient(circle at 90% 90%,rgba(0,216,231,.18),transparent 42%),
        linear-gradient(135deg,rgba(16,20,23,.98),rgba(4,7,9,.98));
    box-shadow:
        0 20px 55px rgba(0,0,0,.48),
        0 0 38px rgba(239,35,60,.10),
        inset 0 1px 0 rgba(255,255,255,.08);
    isolation:isolate;
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.listen-live-button::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.08) 45%,transparent 68%);
    transform:translateX(-110%);
    transition:transform .65s ease;
}

.listen-live-button::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:linear-gradient(90deg,var(--swo-red),#ff6a7b 40%,var(--swo-cyan));
    box-shadow:0 0 16px rgba(239,35,60,.45);
}

.listen-live-icon{
    width:clamp(54px,4.3vw,78px);
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(145deg,#ff304a,#c90f29);
    box-shadow:
        0 0 0 7px rgba(239,35,60,.10),
        0 0 30px rgba(239,35,60,.42),
        inset 0 1px 0 rgba(255,255,255,.28);
}

.listen-live-triangle{
    width:0;
    height:0;
    margin-left:7%;
    border-top:clamp(9px,.7vw,13px) solid transparent;
    border-bottom:clamp(9px,.7vw,13px) solid transparent;
    border-left:clamp(15px,1.15vw,21px) solid #fff;
}

.listen-live-copy{
    min-width:0;
    max-width:100%;
    display:flex;
    flex-direction:column;
    line-height:1;
    overflow:visible;
}

.listen-live-kicker{
    margin-bottom:clamp(5px,.45vw,8px);
    color:#d8dde0;
    font-size:clamp(8px,.55vw,11px);
    font-weight:900;
    letter-spacing:clamp(1.2px,.12vw,2.2px);
    white-space:nowrap;
}

.listen-live-title{
    color:#fff;
    font-size:clamp(19px,1.35vw,30px);
    font-weight:1000;
    letter-spacing:-.9px;
    white-space:nowrap;
    overflow:visible;
    text-overflow:unset;
    text-shadow:0 3px 14px rgba(0,0,0,.5);
}

.listen-live-sub{
    margin-top:clamp(5px,.45vw,8px);
    color:var(--swo-cyan);
    font-size:clamp(9px,.62vw,12px);
    font-weight:900;
    letter-spacing:clamp(.8px,.1vw,1.7px);
    white-space:nowrap;
}

.listen-live-arrow{
    align-self:start;
    color:rgba(255,255,255,.58);
    font-size:clamp(15px,1vw,20px);
    line-height:1;
    transition:color .22s ease,transform .22s ease;
}

.listen-live-pulse{
    position:absolute;
    left:clamp(15px,1.15vw,22px);
    top:clamp(13px,1vw,19px);
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--swo-red);
    animation:swoListenPulse 1.6s ease-out infinite;
}

.listen-live-note{
    margin-top:clamp(9px,.8vw,13px);
    color:rgba(255,255,255,.68);
    font-size:clamp(9px,.58vw,11px);
    font-weight:900;
    letter-spacing:clamp(1.1px,.11vw,1.8px);
    text-align:center;
    white-space:nowrap;
}

.listen-live-note span{
    color:var(--swo-red);
    padding:0 5px;
}

@keyframes swoListenPulse{
    0%{box-shadow:0 0 0 0 rgba(239,35,60,.55)}
    70%{box-shadow:0 0 0 9px rgba(239,35,60,0)}
    100%{box-shadow:0 0 0 0 rgba(239,35,60,0)}
}

@media (hover:hover) and (pointer:fine){
    .listen-live-button:hover{
        color:#fff;
        transform:translateY(-3px) scale(1.012);
        border-color:rgba(239,35,60,.62);
        box-shadow:
            0 25px 65px rgba(0,0,0,.55),
            0 0 44px rgba(239,35,60,.18),
            inset 0 1px 0 rgba(255,255,255,.10);
    }

    .listen-live-button:hover::before{
        transform:translateX(110%);
    }

    .listen-live-button:hover .listen-live-arrow{
        color:#fff;
        transform:translate(2px,-2px);
    }
}

.listen-live-button:focus-visible{
    outline:3px solid var(--swo-cyan);
    outline-offset:5px;
}

@media (min-width:1181px) and (max-width:1450px){
    .listen-live-button{
        gap:14px;
        padding-left:18px;
        padding-right:18px;
    }

    .listen-live-title{
        font-size:clamp(23px,2vw,31px);
    }
}

@media (min-width:768px) and (max-width:1180px){
    .listen-live-button{
        padding:14px 16px;
        gap:12px;
    }

    .listen-live-icon{
        width:54px;
    }

    .listen-live-title{
        font-size:clamp(20px,2.15vw,28px);
    }

    .listen-live-kicker{
        font-size:8px;
        letter-spacing:1.2px;
    }

    .listen-live-sub{
        font-size:9px;
    }
}

@media (max-width:767.98px){
    .listen-live-wrap{
        width:min(100%,420px);
    }

    .listen-live-button{
        min-height:118px;
        padding:18px;
        gap:14px;
    }

    .listen-live-icon{
        width:62px;
    }

    .listen-live-title{
        font-size:28px;
    }

    .listen-live-kicker{
        font-size:9px;
    }

    .listen-live-sub{
        font-size:10px;
    }

    .listen-live-note{
        font-size:10px;
        margin-top:10px;
    }

    .show-wave-bars {
display: none !important;
}

    .show-wave {
display: none !important;
}

.show-side .wave-qr-wrap.listen-live-wrap {
	padding-bottom: 10px !important;
}
}