:root{
    --wp4vw-bg:#020b12;
    --wp4vw-panel:rgba(2,20,29,.72);
    --wp4vw-panel-strong:rgba(2,19,28,.84);
    --wp4vw-panel-soft:rgba(4,31,41,.58);

    --wp4vw-line:rgba(78,213,239,.28);
    --wp4vw-line-soft:rgba(93,213,235,.16);

    --wp4vw-text:#f6fbfd;
    --wp4vw-muted:#a9bec8;

    --wp4vw-cyan:#4edaff;
    --wp4vw-teal:#43e1c0;
    --wp4vw-green:#5bea9a;
    --wp4vw-orange:#ffad42;
    --wp4vw-gold:#ffc76b;
    --wp4vw-red:#ff6f6f;

    --wp4vw-shadow:0 16px 40px rgba(0,0,0,.34);
}

*{
    box-sizing:border-box;
}

html{
    background:var(--wp4vw-bg);
}

body.wp4vw-theme{
    margin:0;
    min-height:100vh;
    color:var(--wp4vw-text);
    font-family:Arial,Helvetica,sans-serif;

    background:
        linear-gradient(
            rgba(0,7,12,.28),
            rgba(0,7,12,.50) 42%,
            rgba(0,7,12,.72) 100%
        ),
        url("/Images/puerto-rico-wallpaper.jpg")
        center center / cover fixed no-repeat;
}

body.wp4vw-theme a{
    color:inherit;
    text-decoration:none;
}

.wp4vw-shell{
    width:min(1500px,calc(100% - 28px));
    margin:0 auto;
}

.wp4vw-header{
    position:relative;
    z-index:30;

    background:rgba(1,14,22,.90);
    border-bottom:1px solid var(--wp4vw-line);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    box-shadow:0 7px 20px rgba(0,0,0,.28);
}

.wp4vw-header-inner{
    min-height:70px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.wp4vw-brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.wp4vw-brand-logo{
    width:56px;
    height:56px;
    object-fit:contain;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    filter:drop-shadow(0 5px 7px rgba(0,0,0,.55));
}

.wp4vw-brand-title{
    font-size:1rem;
    font-weight:900;
    letter-spacing:.09em;
}

.wp4vw-brand-title .call{
    color:var(--wp4vw-cyan);
}

.wp4vw-brand-sub{
    margin-top:4px;
    color:var(--wp4vw-muted);
    font-size:.64rem;
    letter-spacing:.10em;
}

.wp4vw-nav{
    display:flex;
    align-items:center;
    gap:3px;
    overflow-x:auto;
    scrollbar-width:none;
}

.wp4vw-nav::-webkit-scrollbar{
    display:none;
}

.wp4vw-nav a{
    flex:0 0 auto;
    padding:10px 12px;

    border-radius:8px;

    font-size:.67rem;
    font-weight:900;
    letter-spacing:.05em;

    transition:.16s;
}

.wp4vw-nav a:hover{
    background:rgba(255,255,255,.05);
    color:var(--wp4vw-orange);
}

.wp4vw-panel{
    border:1px solid var(--wp4vw-line);
    border-radius:12px;

    background:var(--wp4vw-panel);

    backdrop-filter:blur(12px) saturate(120%);
    -webkit-backdrop-filter:blur(12px) saturate(120%);

    box-shadow:var(--wp4vw-shadow);
}

.wp4vw-panel-head{
    min-height:48px;

    padding:11px 15px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    border-bottom:1px solid var(--wp4vw-line-soft);

    background:rgba(0,13,20,.32);
}

.wp4vw-panel-head h2,
.wp4vw-panel-head h3{
    margin:0;
    font-size:.80rem;
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.wp4vw-panel-body{
    padding:15px;
}

.wp4vw-card{
    border:1px solid var(--wp4vw-line);
    border-radius:10px;

    background:rgba(0,20,29,.43);
}

.wp4vw-logo-clean{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    object-fit:contain !important;
}

.wp4vw-footer{
    margin-top:24px;

    background:rgba(1,11,18,.86);
    border-top:1px solid rgba(255,255,255,.07);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.wp4vw-footer-inner{
    min-height:78px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    color:#c9d5da;

    font-size:.66rem;
    letter-spacing:.08em;
}

.wp4vw-footer-tag{
    color:var(--wp4vw-orange);
    font-weight:900;
}

.wp4vw-accent{
    color:var(--wp4vw-orange);
}

.wp4vw-live{
    color:var(--wp4vw-green);
}

.wp4vw-muted{
    color:var(--wp4vw-muted);
}

@media(max-width:900px){
    .wp4vw-header-inner{
        align-items:flex-start;
        flex-direction:column;
        padding:10px 0;
    }

    .wp4vw-nav{
        width:100%;
    }
}

@media(max-width:700px){
    body.wp4vw-theme{
        background-attachment:scroll;
    }

    .wp4vw-shell{
        width:calc(100% - 16px);
    }

    .wp4vw-footer-inner{
        flex-direction:column;
        justify-content:center;
        text-align:center;
        padding:15px 0;
    }
}

/* =========================================
   WP4VW LANGUAGE SELECTOR
   ========================================= */

.wp4vw-language-toggle{
    display:flex;
    align-items:center;
    gap:3px;

    padding:4px;

    border:1px solid var(--wp4vw-line);
    border-radius:9px;

    background:rgba(0,18,27,.65);
}

.wp4vw-language-toggle button{
    appearance:none;
    border:0;

    padding:7px 9px;

    border-radius:6px;

    background:transparent;
    color:var(--wp4vw-muted);

    font-size:.64rem;
    font-weight:900;
    letter-spacing:.06em;

    cursor:pointer;
}

.wp4vw-language-toggle button:hover{
    color:var(--wp4vw-orange);
}

.wp4vw-language-toggle button.active{
    background:rgba(78,218,255,.15);
    color:var(--wp4vw-cyan);
    box-shadow:inset 0 0 0 1px rgba(78,218,255,.25);
}

/* =========================================
   ABOUT PAGE
   ========================================= */

.wp4vw-about{
    padding:34px 0 14px;
}

.wp4vw-about-hero{
    padding:30px;

    display:grid;
    grid-template-columns:minmax(180px,280px) 1fr;
    gap:30px;
    align-items:center;
}

.wp4vw-about-logo{
    width:100%;
    max-height:235px;
    object-fit:contain;

    filter:drop-shadow(0 14px 18px rgba(0,0,0,.5));
}

.wp4vw-about-kicker{
    color:var(--wp4vw-orange);

    font-size:.72rem;
    font-weight:900;
    letter-spacing:.14em;
}

.wp4vw-about-title{
    margin:7px 0 4px;

    font-size:clamp(2rem,5vw,4.4rem);
    line-height:.95;
    letter-spacing:.02em;
}

.wp4vw-about-subtitle{
    color:var(--wp4vw-cyan);

    font-weight:800;
    letter-spacing:.05em;
}

.wp4vw-about-grid{
    margin-top:18px;

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.wp4vw-about-card{
    padding:22px;
}

.wp4vw-about-card h2{
    margin:0 0 11px;

    color:var(--wp4vw-orange);

    font-size:.80rem;
    letter-spacing:.08em;
}

.wp4vw-about-card p{
    margin:0;

    color:#dbe7eb;
    line-height:1.72;
}

.wp4vw-about-station{
    margin-top:18px;
    padding:20px;

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
}

.wp4vw-about-chip{
    padding:9px 13px;

    border:1px solid rgba(78,218,255,.22);
    border-radius:999px;

    background:rgba(0,23,33,.58);

    color:#dff9ff;

    font-size:.70rem;
    font-weight:800;
}

@media(max-width:800px){
    .wp4vw-about-hero{
        grid-template-columns:1fr;
        text-align:center;
    }

    .wp4vw-about-logo{
        max-width:220px;
        margin:0 auto;
    }

    .wp4vw-about-grid{
        grid-template-columns:1fr;
    }

    .wp4vw-language-toggle{
        margin-bottom:8px;
    }
}

/* =========================================
   WP4VW FIXED / STICKY TOP BAR
   ========================================= */

.wp4vw-header{
    position:sticky;
    top:0;
    z-index:9999;

    width:100%;

    background:rgba(1,14,22,.94);

    backdrop-filter:blur(16px) saturate(125%);
    -webkit-backdrop-filter:blur(16px) saturate(125%);

    border-bottom:1px solid rgba(78,213,239,.30);

    box-shadow:
        0 8px 24px rgba(0,0,0,.34),
        0 1px 0 rgba(255,255,255,.03);
}

/* Keep anchor jumps from hiding underneath header */
html{
    scroll-padding-top:90px;
}

/* Smooth page scrolling */
html{
    scroll-behavior:smooth;
}

/* Prevent content or panels from overlapping header */
.wp4vw-theme main,
.wp4vw-theme .wp4vw-shell{
    position:relative;
}

/* Mobile/tablet behavior */
@media(max-width:900px){

    .wp4vw-header{
        position:sticky;
        top:0;
    }

    .wp4vw-header-inner{
        max-height:150px;
        overflow:visible;
    }

    .wp4vw-nav{
        overflow-x:auto;
        overflow-y:hidden;
        white-space:nowrap;

        -webkit-overflow-scrolling:touch;
    }

    html{
        scroll-padding-top:150px;
    }
}

/* =========================================
   WP4VW FROZEN TOP BAR
   ========================================= */

.wp4vw-header{
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    background: rgba(1,14,22,.95);
    backdrop-filter: blur(16px) saturate(125%);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    border-bottom: 1px solid rgba(78,213,239,.30);
    box-shadow: 0 8px 24px rgba(0,0,0,.34);
}

/* Keep anchored sections from hiding behind header */
html{
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

/* Main page continues scrolling normally */
.wp4vw-theme main,
.wp4vw-theme .wp4vw-shell{
    position: relative;
}

/* Mobile */
@media (max-width: 900px){
    .wp4vw-header{
        position: sticky;
        top: 0;
    }

    .wp4vw-nav{
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    html{
        scroll-padding-top: 145px;
    }
}


/* =========================================
   WP4VW LANDING LOGO NORMALIZATION
   ========================================= */

.landing-card img,
.portal-card img,
.home-card img,
.card-logo img{
    display:block;
    margin:0 auto;
    object-fit:contain;
}

/* Match visual weight across all landing cards */
.landing-logo,
.portal-logo,
.card-logo{
    height:150px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 16px;
    box-sizing:border-box;
}

.landing-logo img,
.portal-logo img,
.card-logo img{
    max-width:220px;
    width:auto;
    height:auto;
    max-height:138px;
}

/* WP4VW logo */
img[src*="wp4vw-landing"],
img[src*="wp4vw-theme-logo"],
img[src*="WP4VW"]{
    max-height:138px !important;
    max-width:235px !important;
}

/* Shack D'Cibuco logo */
img[src*="shack-dcibuco"],
img[src*="Shack"],
img[src*="DCibuco"]{
    max-height:138px !important;
    max-width:235px !important;
}

/* Zoom logo - round, crisp, consistent */
img[src*="zoom"],
img[alt*="Zoom"],
img[alt*="ZOOM"]{
    width:138px !important;
    height:138px !important;
    max-width:138px !important;
    max-height:138px !important;
    object-fit:cover !important;
    border-radius:50%;
    background:#fff;
    padding:3px;
    box-sizing:border-box;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.22),
        0 8px 24px rgba(0,0,0,.30);
}

/* Keep cards aligned */
.landing-card,
.portal-card,
.home-card{
    display:flex;
    flex-direction:column;
}

.landing-card .content,
.portal-card .content,
.home-card .content{
    flex:1;
}

@media (max-width:900px){
    .landing-logo,
    .portal-logo,
    .card-logo{
        height:130px;
    }

    .landing-logo img,
    .portal-logo img,
    .card-logo img{
        max-height:118px;
    }

    img[src*="zoom"],
    img[alt*="Zoom"],
    img[alt*="ZOOM"]{
        width:118px !important;
        height:118px !important;
        max-width:118px !important;
        max-height:118px !important;
    }
}
