/*
Theme Name: Sunset Boulevard
Theme URI: https://example.com/sunset-boulevard
Author: Sunset Studio
Description: Retro Hollywood glamour theme with twilight purple, neon pink, and amber sunset gradients. Built for sports & cricket betting magazines.
Version: 1.0.0
License: GPL v2 or later
Text Domain: sunset-boulevard
*/

:root{
    --sb-twilight:#1f1235;
    --sb-twilight-deep:#150a25;
    --sb-twilight-soft:#2d1a4a;
    --sb-pink:#ec4899;
    --sb-pink-soft:#f472b6;
    --sb-amber:#f59e0b;
    --sb-amber-soft:#fbbf24;
    --sb-light-pink:#fce7f3;
    --sb-cream:#fff7ed;
    --sb-ink:#0d0518;
    --sb-line:rgba(252,231,243,0.16);
    --sb-glow:0 0 30px rgba(236,72,153,0.45);
    --sb-shadow:0 24px 60px -20px rgba(15,5,30,0.7);
    --sb-display:'Abril Fatface', Georgia, serif;
    --sb-body:'Lato', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:var(--sb-body);
    font-weight:400;
    color:var(--sb-light-pink);
    background:var(--sb-twilight);
    background-image:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(236,72,153,0.18), transparent 70%),
        radial-gradient(ellipse 60% 40% at 90% 30%, rgba(245,158,11,0.12), transparent 60%),
        linear-gradient(180deg, var(--sb-twilight-deep) 0%, var(--sb-twilight) 60%, var(--sb-twilight-deep) 100%);
    background-attachment:fixed;
    line-height:1.7;
    overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--sb-pink-soft);text-decoration:none;transition:color .25s ease}
a:hover{color:var(--sb-amber-soft)}

h1,h2,h3,h4{font-family:var(--sb-display);font-weight:400;letter-spacing:.5px;color:var(--sb-cream);line-height:1.15;margin:0 0 .6em}
h1{font-size:clamp(2.6rem,5.6vw,5rem)}
h2{font-size:clamp(2rem,3.6vw,3rem)}
h3{font-size:clamp(1.4rem,2.2vw,1.85rem)}
p{margin:0 0 1.1em}
.sb-wrap{max-width:1240px;margin:0 auto;padding:0 28px}

/* HEADER */
.sb-top{
    position:sticky;top:0;z-index:60;
    background:linear-gradient(180deg, rgba(31,18,53,.88) 0%, rgba(31,18,53,.74) 100%);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--sb-line);
}
.sb-top-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:24px}
.sb-logo{display:flex;align-items:center;gap:14px;text-decoration:none}
.sb-logo-mark{
    width:46px;height:46px;border-radius:50%;
    background:conic-gradient(from 220deg, var(--sb-pink), var(--sb-amber), var(--sb-pink));
    display:grid;place-items:center;
    box-shadow:var(--sb-glow);
    position:relative;
}
.sb-logo-mark::after{
    content:"";position:absolute;inset:5px;border-radius:50%;
    background:var(--sb-twilight);
}
.sb-logo-mark span{position:relative;font-family:var(--sb-display);color:var(--sb-amber-soft);font-size:1.3rem}
.sb-logo-text{display:flex;flex-direction:column;line-height:1}
.sb-logo-name{font-family:var(--sb-display);font-size:1.55rem;color:var(--sb-cream);letter-spacing:1px}
.sb-logo-tag{font-size:.66rem;letter-spacing:4px;text-transform:uppercase;color:var(--sb-pink);margin-top:4px}

.sb-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sb-nav a{
    padding:10px 16px;
    color:var(--sb-light-pink);
    font-size:.92rem;
    font-weight:700;
    letter-spacing:.4px;
    border-radius:24px;
    position:relative;
}
.sb-nav a:not(.sb-cta):hover{color:var(--sb-amber-soft);background:rgba(236,72,153,.08)}
.sb-cta{
    background:linear-gradient(135deg,var(--sb-pink) 0%,var(--sb-amber) 100%);
    color:var(--sb-twilight)!important;
    padding:11px 24px!important;
    border-radius:30px!important;
    box-shadow:0 10px 28px -10px var(--sb-pink), 0 0 0 1px rgba(252,231,243,.18) inset;
    text-transform:uppercase;
    font-weight:900;
    letter-spacing:1.2px;
    margin-left:8px;
}
.sb-cta:hover{transform:translateY(-2px);filter:brightness(1.08)}

/* HERO */
.sb-hero{
    position:relative;
    padding:110px 0 130px;
    overflow:hidden;
    isolation:isolate;
}
.sb-hero::before{
    content:"";position:absolute;inset:auto 0 0 0;height:60%;
    background:
        radial-gradient(ellipse 90% 100% at 50% 100%, var(--sb-amber) 0%, var(--sb-pink) 35%, transparent 75%);
    opacity:.25;z-index:-1;
    filter:blur(20px);
}
.sb-hero::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background-image:
        repeating-linear-gradient(180deg, transparent 0 28px, rgba(252,231,243,.04) 28px 29px);
    pointer-events:none;
}
.sb-hero-grid{display:grid;grid-template-columns:1.15fr .9fr;gap:60px;align-items:center}
.sb-eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    padding:7px 16px;
    border-radius:30px;
    background:rgba(252,231,243,.06);
    border:1px solid var(--sb-pink);
    color:var(--sb-pink-soft);
    font-size:.72rem;letter-spacing:3px;text-transform:uppercase;font-weight:900;
    margin-bottom:24px;
}
.sb-eyebrow .sb-dot{width:6px;height:6px;border-radius:50%;background:var(--sb-amber);box-shadow:0 0 10px var(--sb-amber)}
.sb-hero h1{margin-bottom:22px}
.sb-hero h1 em{
    font-style:normal;
    background:linear-gradient(135deg,var(--sb-pink) 0%,var(--sb-amber) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sb-hero p{font-size:1.15rem;color:var(--sb-light-pink);max-width:560px;margin-bottom:34px}
.sb-hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.sb-btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:15px 30px;border-radius:30px;
    font-family:var(--sb-body);font-weight:900;font-size:.95rem;
    letter-spacing:1.2px;text-transform:uppercase;
    transition:all .25s ease;
}
.sb-btn-primary{
    background:linear-gradient(135deg,var(--sb-pink) 0%,var(--sb-amber) 100%);
    color:var(--sb-twilight);
    box-shadow:0 18px 40px -14px var(--sb-pink);
}
.sb-btn-primary:hover{transform:translateY(-3px);color:var(--sb-twilight)}
.sb-btn-ghost{
    background:transparent;color:var(--sb-cream);
    border:1px solid var(--sb-pink);
}
.sb-btn-ghost:hover{background:rgba(236,72,153,.12);color:var(--sb-amber-soft)}

.sb-hero-card{
    background:linear-gradient(160deg, rgba(45,26,74,.92) 0%, rgba(31,18,53,.82) 100%);
    border:1px solid var(--sb-line);
    border-radius:24px;
    padding:30px;
    position:relative;
    box-shadow:var(--sb-shadow);
}
.sb-hero-card::before{
    content:"";position:absolute;inset:-1px;border-radius:24px;
    background:linear-gradient(135deg,var(--sb-pink) 0%,transparent 50%,var(--sb-amber) 100%);
    z-index:-1;
    filter:blur(2px);opacity:.5;
}
.sb-hero-card h3{color:var(--sb-amber-soft);text-align:center;margin-bottom:18px;font-size:1.5rem}
.sb-feature{display:flex;align-items:center;gap:16px;padding:14px 0;border-top:1px dashed var(--sb-line)}
.sb-feature:first-of-type{border-top:none}
.sb-feature-icon{
    width:44px;height:44px;flex-shrink:0;
    border-radius:50%;
    background:rgba(236,72,153,.15);
    border:1px solid var(--sb-pink);
    display:grid;place-items:center;
    color:var(--sb-pink-soft);
    font-family:var(--sb-display);font-size:1.1rem;
}
.sb-feature-text strong{display:block;color:var(--sb-cream);font-weight:900;letter-spacing:.5px;margin-bottom:2px}
.sb-feature-text span{color:var(--sb-light-pink);opacity:.75;font-size:.88rem}

/* SECTIONS */
.sb-section{padding:90px 0;position:relative}
.sb-section-head{text-align:center;max-width:680px;margin:0 auto 60px}
.sb-section-eyebrow{
    display:inline-block;
    color:var(--sb-amber);
    letter-spacing:5px;
    text-transform:uppercase;
    font-size:.72rem;font-weight:900;
    margin-bottom:14px;
}
.sb-section-head h2{margin-bottom:14px}
.sb-section-head p{color:var(--sb-light-pink);opacity:.78}

.sb-content-layout{display:grid;grid-template-columns:1fr 320px;gap:50px}

/* POST CARDS */
.sb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.sb-grid.sb-grid-2{grid-template-columns:repeat(2,1fr)}
.sb-card{
    background:linear-gradient(160deg, rgba(45,26,74,.7) 0%, rgba(31,18,53,.5) 100%);
    border:1px solid var(--sb-line);
    border-radius:18px;
    overflow:hidden;
    transition:all .35s ease;
    position:relative;
    display:flex;flex-direction:column;
}
.sb-card:hover{
    transform:translateY(-6px);
    border-color:var(--sb-pink);
    box-shadow:0 24px 50px -20px rgba(236,72,153,.5);
}
.sb-card-thumb{
    position:relative;height:200px;overflow:hidden;
    background:linear-gradient(135deg,var(--sb-twilight-soft),var(--sb-twilight));
}
.sb-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.sb-card:hover .sb-card-thumb img{transform:scale(1.07)}
.sb-card-thumb-empty{
    width:100%;height:100%;
    background:
        radial-gradient(circle at 30% 60%, var(--sb-pink) 0%, transparent 60%),
        radial-gradient(circle at 80% 30%, var(--sb-amber) 0%, transparent 55%),
        linear-gradient(135deg,var(--sb-twilight-soft),var(--sb-twilight));
    display:grid;place-items:center;
    font-family:var(--sb-display);font-size:3rem;color:var(--sb-cream);opacity:.7;
}
.sb-card-cat{
    position:absolute;top:14px;left:14px;
    padding:5px 12px;border-radius:20px;
    background:linear-gradient(135deg,var(--sb-pink),var(--sb-amber));
    color:var(--sb-twilight);font-size:.7rem;font-weight:900;
    letter-spacing:1.2px;text-transform:uppercase;
}
.sb-card-body{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column}
.sb-card-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:.78rem;color:var(--sb-pink-soft);text-transform:uppercase;letter-spacing:1px}
.sb-card h3{margin:0 0 12px}
.sb-card h3 a{color:var(--sb-cream)}
.sb-card h3 a:hover{color:var(--sb-amber-soft)}
.sb-card-excerpt{color:var(--sb-light-pink);opacity:.78;font-size:.95rem;flex:1;margin-bottom:16px}
.sb-card-more{
    align-self:flex-start;color:var(--sb-pink);font-weight:900;letter-spacing:1.5px;
    font-size:.78rem;text-transform:uppercase;
    border-bottom:1px solid var(--sb-pink);padding-bottom:2px;
}
.sb-card-more:hover{color:var(--sb-amber-soft);border-color:var(--sb-amber-soft)}

/* SIDEBAR */
.sb-side{display:flex;flex-direction:column;gap:24px}
.sb-widget{
    background:linear-gradient(160deg, rgba(45,26,74,.65) 0%, rgba(31,18,53,.45) 100%);
    border:1px solid var(--sb-line);
    border-radius:18px;
    padding:26px;
}
.sb-widget-title{
    font-family:var(--sb-display);font-size:1.4rem;color:var(--sb-amber-soft);
    margin:0 0 18px;
    padding-bottom:14px;
    border-bottom:1px dashed var(--sb-pink);
    position:relative;
}
.sb-widget-title::after{
    content:"★";position:absolute;right:0;top:0;color:var(--sb-pink);font-size:.85rem;
}
.sb-widget ul{list-style:none;padding:0;margin:0}
.sb-widget li{padding:11px 0;border-bottom:1px dotted var(--sb-line)}
.sb-widget li:last-child{border-bottom:none}
.sb-widget li a{color:var(--sb-light-pink);font-weight:700}
.sb-widget li a:hover{color:var(--sb-amber-soft)}

.sb-promo{
    background:linear-gradient(135deg,var(--sb-pink) 0%,var(--sb-amber) 100%);
    color:var(--sb-twilight);
    text-align:center;
    border:none;
}
.sb-promo .sb-widget-title{color:var(--sb-twilight);border-color:rgba(31,18,53,.4)}
.sb-promo .sb-widget-title::after{color:var(--sb-twilight)}
.sb-promo p{color:var(--sb-twilight-deep);font-weight:700;margin-bottom:18px}
.sb-promo .sb-btn{background:var(--sb-twilight);color:var(--sb-amber-soft);border:none}
.sb-promo .sb-btn:hover{background:var(--sb-twilight-deep);color:var(--sb-amber-soft)}

.sb-odds{display:flex;flex-direction:column;gap:10px}
.sb-odds-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:11px 14px;
    background:rgba(252,231,243,.04);
    border:1px solid var(--sb-line);
    border-radius:10px;
    font-size:.88rem;
}
.sb-odds-row span:first-child{color:var(--sb-light-pink);font-weight:700}
.sb-odds-row span:last-child{
    color:var(--sb-amber-soft);font-weight:900;
    background:rgba(245,158,11,.12);padding:3px 10px;border-radius:6px;
}

/* BREADCRUMB */
.sb-breadcrumb{padding:24px 0 0;font-size:.85rem;color:var(--sb-light-pink);opacity:.7}
.sb-breadcrumb a{color:var(--sb-pink-soft)}
.sb-breadcrumb a:hover{color:var(--sb-amber-soft)}
.sb-breadcrumb .sep{margin:0 10px;color:var(--sb-pink)}

/* ARTICLE */
.sb-article{
    background:linear-gradient(160deg, rgba(45,26,74,.55) 0%, rgba(31,18,53,.4) 100%);
    border:1px solid var(--sb-line);
    border-radius:20px;
    padding:48px;
    margin-bottom:36px;
}
.sb-article-head{margin-bottom:32px;padding-bottom:24px;border-bottom:1px dashed var(--sb-pink)}
.sb-article-head h1{margin-bottom:16px}
.sb-article-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:.82rem;color:var(--sb-pink-soft);text-transform:uppercase;letter-spacing:1.5px}
.sb-article-thumb{margin:0 -48px 32px}
.sb-article-thumb img{width:100%;height:auto;display:block}
.sb-article-body{font-size:1.05rem;line-height:1.85;color:var(--sb-light-pink)}
.sb-article-body h2,.sb-article-body h3{margin-top:1.5em;color:var(--sb-cream)}
.sb-article-body a{color:var(--sb-amber-soft);text-decoration:underline;text-decoration-color:var(--sb-pink)}
.sb-article-body blockquote{
    border-left:4px solid var(--sb-pink);
    padding:18px 24px;margin:1.5em 0;
    background:rgba(236,72,153,.08);
    font-style:italic;font-size:1.1rem;color:var(--sb-cream);
    border-radius:0 12px 12px 0;
}
.sb-article-body code{background:var(--sb-twilight-deep);padding:2px 8px;border-radius:4px;color:var(--sb-amber-soft);font-size:.92em}

/* PAGINATION */
.sb-pagination{display:flex;justify-content:center;gap:8px;margin-top:50px;flex-wrap:wrap}
.sb-pagination a,.sb-pagination span{
    padding:10px 16px;border-radius:50%;
    background:rgba(252,231,243,.04);
    border:1px solid var(--sb-line);
    color:var(--sb-light-pink);font-weight:900;
    min-width:42px;text-align:center;
    font-family:var(--sb-display);
}
.sb-pagination a:hover{background:linear-gradient(135deg,var(--sb-pink),var(--sb-amber));color:var(--sb-twilight);border-color:transparent}
.sb-pagination .current{background:linear-gradient(135deg,var(--sb-pink),var(--sb-amber));color:var(--sb-twilight);border-color:transparent}

/* COMMENTS */
.sb-comments{margin-top:40px;padding:36px;background:rgba(252,231,243,.03);border:1px solid var(--sb-line);border-radius:20px}
.sb-comments-title{margin-bottom:24px}
.sb-comment{padding:18px 0;border-bottom:1px dotted var(--sb-line)}
.sb-comment:last-child{border-bottom:none}
.sb-comment-meta{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.sb-comment-author{font-weight:900;color:var(--sb-amber-soft);font-family:var(--sb-display);font-size:1.15rem}
.sb-comment-date{font-size:.8rem;color:var(--sb-pink-soft);letter-spacing:1px;text-transform:uppercase}
.sb-comment-body{color:var(--sb-light-pink)}
.sb-comment-respond{margin-top:30px}
.sb-comment-respond input,.sb-comment-respond textarea{
    width:100%;padding:13px 16px;border-radius:10px;
    background:var(--sb-twilight-deep);
    border:1px solid var(--sb-line);
    color:var(--sb-cream);font-family:var(--sb-body);
    margin-bottom:14px;
}
.sb-comment-respond input:focus,.sb-comment-respond textarea:focus{outline:none;border-color:var(--sb-pink);box-shadow:0 0 0 3px rgba(236,72,153,.18)}
.sb-comment-respond textarea{min-height:130px;resize:vertical}
.sb-comment-respond .submit{
    background:linear-gradient(135deg,var(--sb-pink),var(--sb-amber));
    color:var(--sb-twilight);
    padding:13px 30px;border:none;border-radius:30px;
    font-weight:900;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;
    font-family:var(--sb-body);
}

/* RELATED */
.sb-related{margin-top:60px}
.sb-related h2{margin-bottom:30px;text-align:center}

/* 404 */
.sb-404{text-align:center;padding:120px 0}
.sb-404-num{
    font-family:var(--sb-display);
    font-size:clamp(7rem,18vw,16rem);
    background:linear-gradient(135deg,var(--sb-pink) 0%,var(--sb-amber) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    line-height:1;margin:0 0 18px;
    text-shadow:0 0 60px rgba(236,72,153,.4);
}
.sb-404 h1{margin-bottom:20px}
.sb-404 p{max-width:520px;margin:0 auto 32px;color:var(--sb-light-pink)}

/* FOOTER */
.sb-footer{
    margin-top:90px;
    background:var(--sb-twilight-deep);
    border-top:1px solid var(--sb-line);
    position:relative;
}
.sb-footer::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,transparent,var(--sb-pink),var(--sb-amber),var(--sb-pink),transparent);
}
.sb-foot-grid{
    display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
    padding:70px 0 50px;
}
.sb-foot-col h4{
    color:var(--sb-amber-soft);
    font-size:.85rem;letter-spacing:3px;text-transform:uppercase;
    font-family:var(--sb-body);font-weight:900;
    margin:0 0 18px;
    padding-bottom:12px;
    border-bottom:1px dashed var(--sb-pink);
}
.sb-foot-col p{color:var(--sb-light-pink);opacity:.72;font-size:.92rem}
.sb-foot-col ul{list-style:none;padding:0;margin:0}
.sb-foot-col li{padding:7px 0}
.sb-foot-col li a{color:var(--sb-light-pink);font-weight:700;font-size:.9rem}
.sb-foot-col li a:hover{color:var(--sb-amber-soft)}
.sb-foot-brand{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.sb-foot-bar{
    border-top:1px solid var(--sb-line);
    padding:22px 0;
    display:flex;justify-content:space-between;align-items:center;
    font-size:.82rem;color:var(--sb-light-pink);opacity:.6;flex-wrap:wrap;gap:14px;
}

/* RESPONSIVE */
@media (max-width:980px){
    .sb-hero-grid{grid-template-columns:1fr;gap:40px}
    .sb-content-layout{grid-template-columns:1fr}
    .sb-grid{grid-template-columns:repeat(2,1fr)}
    .sb-foot-grid{grid-template-columns:1fr 1fr;gap:30px}
    .sb-article{padding:32px 24px}
    .sb-article-thumb{margin:0 -24px 24px}
}
@media (max-width:640px){
    .sb-top-inner{flex-direction:column;gap:14px}
    .sb-nav{justify-content:center}
    .sb-grid{grid-template-columns:1fr}
    .sb-foot-grid{grid-template-columns:1fr}
    .sb-section{padding:60px 0}
    .sb-hero{padding:70px 0 80px}
}

/* WP DEFAULTS */
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.aligncenter{display:block;margin:0 auto 1em}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:.85rem;color:var(--sb-pink-soft);text-align:center;padding:.5em}
.screen-reader-text{position:absolute;left:-9999px}