/*
Theme Name: HimSoc
Theme URI: https://himsoc.ca
Author: HimSoc
Description: Official custom theme for the Himalayan Soccer Club of British Columbia.
Version: 3.0
License: GNU General Public License v2 or later
Text Domain: himsoc
*/

/* ══════════════════════════════════════════════
   DESIGN TOKENS — Style Guide
   Primary  : #004080  Navy Blue
   Secondary: #008080  Teal
   Accent   : #FFD700  Gold
   BG Accent: #F0F8FF  Alice Blue
   Text     : #333333
══════════════════════════════════════════════ */
:root {
  --primary:       #004080;
  --primary-dark:  #002d5c;
  --secondary:     #008080;
  --secondary-dark:#005f5f;
  --accent:        #FFD700;
  --accent-dark:   #e6c200;
  --bg:            #ffffff;
  --bg-light:      #F0F8FF;
  --bg-gray:       #f7f9fc;
  --text:          #333333;
  --text-muted:    #666666;
  --text-light:    #999999;
  --border:        #e0e8f0;
  --white:         #ffffff;
  --radius:        8px;
  --radius-lg:     14px;
  --radius-xl:     20px;
  --shadow:        0 2px 12px rgba(0,64,128,.08);
  --shadow-md:     0 4px 24px rgba(0,64,128,.13);
  --shadow-lg:     0 8px 40px rgba(0,64,128,.16);
  --nav-h:         72px;
  --max-w:         1160px;
  --font-h:        'Poppins', sans-serif;
  --font-b:        'Figtree', sans-serif;
  --tr:            all .22s ease;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-b);color:var(--text);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none;transition:var(--tr)}
a:hover{color:var(--secondary)}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
h1,h2,h3,h4,h5,h6{font-family:var(--font-h);line-height:1.25;font-weight:700}
p{margin-bottom:0}
button{cursor:pointer;font-family:var(--font-b)}

/* ── LAYOUT ── */
.wrap       {max-width:var(--max-w);margin:0 auto;padding:0 24px}
.sec        {padding:72px 0}
.sec-sm     {padding:48px 0}
.sec-xs     {padding:32px 0}
.tc         {text-align:center}
.bg-light   {background:var(--bg-light)}
.bg-gray    {background:var(--bg-gray)}
.bg-teal    {background:var(--secondary)}
.bg-navy    {background:var(--primary)}
.bg-dark    {background:#0d2137}

/* ── GRID ── */
.g2  {display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.g3  {display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.g4  {display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.g2s {display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}

/* ── TYPOGRAPHY ── */
.eyebrow{font-family:var(--font-b);font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--secondary);display:block;margin-bottom:10px}
.eyebrow-w{color:rgba(255,255,255,.8)}
.sec-title{font-size:clamp(26px,3.5vw,38px);font-weight:700;margin-bottom:12px;line-height:1.2}
.sec-title span{color:var(--accent)}
.sec-title.white{color:#fff}
.divider{width:48px;height:4px;background:linear-gradient(90deg,var(--accent),var(--secondary));border-radius:2px;margin:14px 0 24px}
.divider.c{margin-left:auto;margin-right:auto}
.lead{font-size:17px;color:var(--text-muted);line-height:1.8;margin-bottom:28px}
.lead.w{color:rgba(255,255,255,.82)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-h);font-weight:600;font-size:14px;padding:12px 28px;border-radius:50px;border:2px solid transparent;transition:var(--tr);white-space:nowrap;text-decoration:none}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-accent{background:var(--accent);color:var(--primary);border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--primary);transform:translateY(-2px)}
.btn-teal{background:var(--secondary);color:#fff;border-color:var(--secondary)}
.btn-teal:hover{background:var(--secondary-dark);border-color:var(--secondary-dark);color:#fff;transform:translateY(-2px)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.btn-outline:hover{background:#fff;color:var(--primary);border-color:#fff;text-decoration:none}
.btn-outline-dark{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline-dark:hover{background:var(--primary);color:#fff}
.btn-sm{padding:9px 20px;font-size:13px}
.btn-lg{padding:15px 38px;font-size:16px}
.btn-block{width:100%;justify-content:center}

/* ── HEADER ── */
#site-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--border);height:var(--nav-h);display:flex;align-items:center;box-shadow:var(--shadow)}
.hdr-inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--font-h);font-size:1.35rem;font-weight:700;color:var(--primary)}
.logo:hover{color:var(--secondary);text-decoration:none}
.logo-icon{width:44px;height:44px;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;flex-shrink:0}
.logo-text em{font-style:normal;color:var(--accent)}
nav#main-nav ul{display:flex;gap:2px;align-items:center}
nav#main-nav ul li a{display:block;padding:8px 13px;color:var(--text);font-weight:500;font-size:13.5px;font-family:var(--font-h);border-radius:6px;transition:var(--tr)}
nav#main-nav ul li a:hover,
nav#main-nav ul li.current-menu-item a{color:var(--secondary);background:var(--bg-light)}
.hdr-cta{margin-left:14px}
.hamburger{display:none;background:none;border:none;padding:8px;flex-direction:column;gap:5px}
.hamburger span{display:block;width:23px;height:2px;background:var(--primary);border-radius:2px;transition:var(--tr)}

/* ── PAGE HERO (inner pages) ── */
.page-hero{background:linear-gradient(135deg,var(--secondary) 0%,var(--secondary-dark) 60%,#004d4d 100%);color:#fff;padding:64px 0 56px;position:relative;overflow:hidden;text-align:center}
.page-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.04'%3E%3Cpath d='M20 20v-8h-2v8h-8v2h8v8h2v-8h8v-2h-8z'/%3E%3C/g%3E%3C/svg%3E")}
.page-hero .wrap{position:relative;z-index:1}
.breadcrumb{font-size:13px;opacity:.65;margin-bottom:10px}
.breadcrumb a{color:rgba(255,255,255,.8)}
.breadcrumb a:hover{color:var(--accent)}
.page-hero h1{color:#fff;font-size:clamp(28px,4vw,44px);margin-bottom:12px}
.page-hero p{font-size:17px;opacity:.82;max-width:540px;margin:0 auto}

/* ── SECTION CTA BANNER (teal) ── */
.cta-banner{background:var(--secondary);padding:64px 0;text-align:center;color:#fff}
.cta-banner h2{color:#fff;font-size:clamp(24px,3vw,36px);margin-bottom:12px}
.cta-banner p{color:rgba(255,255,255,.82);max-width:520px;margin:0 auto 30px;font-size:16px}

/* ── STAT BOXES ── */
.stat-box{background:#fff;border-radius:var(--radius-lg);border:1px solid var(--border);padding:28px 20px;text-align:center}
.stat-num{font-family:var(--font-h);font-size:44px;font-weight:700;color:var(--primary);line-height:1;display:block}
.stat-num sup{font-size:22px;vertical-align:top;margin-top:8px}
.stat-label{font-size:13px;color:var(--text-muted);font-weight:500;display:block;margin-top:6px;text-transform:uppercase;letter-spacing:.5px}

/* ── FEATURE BOXES (icon) ── */
.feat-box{padding:28px 22px;background:#fff;border-radius:var(--radius-lg);border:1px solid var(--border);transition:var(--tr)}
.feat-box:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.feat-icon{width:56px;height:56px;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:16px}
.feat-box h3{font-size:17px;margin-bottom:8px}
.feat-box p{font-size:14px;color:var(--text-muted)}

/* ── CARDS (team/player) ── */
.card{background:#fff;border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden;transition:var(--tr)}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.card-img{background:linear-gradient(135deg,var(--primary),var(--secondary));height:220px;display:flex;align-items:center;justify-content:center;font-size:4rem;color:rgba(255,255,255,.25);position:relative;overflow:hidden}
.card-img .num{position:absolute;top:10px;right:14px;font-family:var(--font-h);font-size:44px;font-weight:700;color:rgba(255,255,255,.12)}
.card-body{padding:20px}
.card-body h3{font-size:18px;margin-bottom:4px}
.card-pos{font-size:12px;font-weight:600;color:var(--secondary);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;display:block}
.card-body p{font-size:13px;color:var(--text-muted)}
.card-stats{display:flex;gap:0;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.card-stat{flex:1;text-align:center;border-right:1px solid var(--border)}
.card-stat:last-child{border-right:none}
.card-stat .n{font-size:20px;font-weight:700;color:var(--primary);font-family:var(--font-h)}
.card-stat .l{font-size:11px;color:var(--text-muted);text-transform:uppercase}

/* ── TESTIMONIAL ── */
.testi{background:#fff;border-radius:var(--radius-lg);border:1px solid var(--border);padding:28px;position:relative}
.testi::before{content:'"';font-family:Georgia,serif;font-size:72px;line-height:1;color:var(--accent);opacity:.45;position:absolute;top:14px;left:22px}
.testi-text{font-size:14px;color:var(--text-muted);line-height:1.8;padding-top:28px;margin-bottom:18px}
.testi-author{display:flex;align-items:center;gap:12px}
.testi-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex-shrink:0}
.testi-name{font-weight:600;font-size:14px}
.testi-role{font-size:12px;color:var(--text-muted)}
.stars{color:var(--accent);font-size:13px;margin-bottom:4px}

/* ── TIMELINE ── */
.timeline{padding-left:28px;position:relative}
.timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--border)}
.tl-item{position:relative;margin-bottom:32px}
.tl-dot{position:absolute;left:-28px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--secondary);border:3px solid var(--accent)}
.tl-year{font-size:12px;font-weight:700;color:var(--secondary);letter-spacing:1px;text-transform:uppercase;margin-bottom:2px}
.tl-item h4{font-size:16px;margin-bottom:4px}
.tl-item p{font-size:13px;color:var(--text-muted)}

/* ── TABLE ── */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{background:var(--primary);color:#fff;padding:13px 16px;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--border)}
.tbl tr:nth-child(even) td{background:var(--bg-light)}
.tbl tr:hover td{background:#e8f4f4}
.win{color:#15803d;font-weight:700}.loss{color:#dc2626;font-weight:700}.draw{color:var(--secondary);font-weight:700}

/* ── EVENT CARD ── */
.ev-card{background:#fff;border-radius:var(--radius-lg);border:1px solid var(--border);display:flex;overflow:hidden;transition:var(--tr)}
.ev-card:hover{box-shadow:var(--shadow-md)}
.ev-date{min-width:76px;background:var(--secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 10px;color:#fff}
.ev-day{font-family:var(--font-h);font-size:32px;font-weight:700;line-height:1}
.ev-mon{font-size:11px;text-transform:uppercase;letter-spacing:1px;opacity:.8}
.ev-body{padding:18px 20px;flex:1}
.ev-body h3{font-size:15px;margin-bottom:6px}
.ev-meta{font-size:12px;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:10px}
.ev-meta span{display:flex;align-items:center;gap:4px}

/* ── GALLERY ── */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.gal-item{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--bg-light);cursor:pointer;position:relative}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gal-item:hover img{transform:scale(1.05)}
.gal-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:var(--primary);opacity:.5;font-size:2rem}
.gal-ov{position:absolute;inset:0;background:rgba(0,64,128,.55);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.8rem;opacity:0;transition:opacity .25s}
.gal-item:hover .gal-ov{opacity:1}

/* ── BADGE / PILL ── */
.badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;padding:4px 12px;border-radius:50px}
.badge-accent{background:var(--accent);color:var(--primary)}
.badge-teal{background:rgba(0,128,128,.12);color:var(--secondary)}
.badge-navy{background:rgba(0,64,128,.1);color:var(--primary)}

/* ── PRICING ── */
.price-card{background:#fff;border:2px solid var(--border);border-radius:var(--radius-lg);padding:36px 28px;text-align:center;transition:var(--tr)}
.price-card.feat{border-color:var(--secondary);box-shadow:var(--shadow-md);transform:scale(1.03)}
.price-card h3{font-size:20px;margin-bottom:8px}
.price-big{font-family:var(--font-h);font-size:52px;font-weight:700;color:var(--primary);line-height:1;margin:12px 0 4px}
.price-big sup{font-size:24px;vertical-align:top;margin-top:10px}
.price-period{font-size:13px;color:var(--text-muted);margin-bottom:22px}
.price-feats{text-align:left;margin:18px 0}
.price-feats li{padding:8px 0;border-bottom:1px solid var(--border);font-size:14px;display:flex;align-items:center;gap:8px}
.price-feats li::before{content:'✓';color:var(--secondary);font-weight:700;flex-shrink:0}

/* ── NEWSLETTER ── */
.nl-form{display:flex;max-width:460px;border-radius:50px;overflow:hidden;box-shadow:var(--shadow-lg)}
.nl-form input{flex:1;padding:14px 22px;border:none;font-family:var(--font-b);font-size:14px;outline:none}
.nl-form button{padding:14px 26px;background:var(--accent);color:var(--primary);border:none;font-family:var(--font-h);font-weight:700;font-size:14px;white-space:nowrap;transition:var(--tr)}
.nl-form button:hover{background:var(--accent-dark)}
.nl-form.centered{margin:0 auto}

/* ── SPONSOR LOGO ── */
.spon-logo{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;text-align:center;transition:var(--tr)}
.spon-logo:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.spon-ph{height:70px;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:1.3rem;font-weight:700;color:var(--primary);background:var(--bg-light);border-radius:var(--radius);margin-bottom:14px}
.spon-logo h4{font-size:15px;margin-bottom:4px}
.spon-logo p{font-size:13px;color:var(--text-muted)}

/* ── CONTACT CARD (dark) ── */
.contact-card{background:var(--primary);border-radius:var(--radius-lg);padding:40px;color:#fff;height:100%}
.contact-card h3{color:#fff;margin-bottom:8px}
.contact-card .sub{opacity:.75;font-size:14px;margin-bottom:28px}
.c-item{display:flex;gap:14px;margin-bottom:20px}
.c-ico{width:42px;height:42px;background:rgba(255,255,255,.12);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.c-item h5{font-size:11px;text-transform:uppercase;letter-spacing:1px;opacity:.6;margin-bottom:2px;font-weight:500}
.c-item p{font-size:14px;color:rgba(255,255,255,.9);margin:0}
.c-item a{color:rgba(255,255,255,.82)}
.c-item a:hover{color:var(--accent)}

/* ── FORM ── */
.fg{margin-bottom:18px}
.fg label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--text)}
.fc{width:100%;padding:12px 15px;border:1.5px solid var(--border);border-radius:var(--radius);font-family:var(--font-b);font-size:14px;color:var(--text);background:#fff;transition:var(--tr)}
.fc:focus{outline:none;border-color:var(--secondary);box-shadow:0 0 0 3px rgba(0,128,128,.1)}
textarea.fc{height:130px;resize:vertical}
select.fc{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}

/* ── ALERTS ── */
.alert{padding:14px 18px;border-radius:var(--radius);margin-bottom:18px;font-size:14px;font-weight:500}
.alert-ok{background:#d1fae5;color:#065f46;border:1px solid #a7f3d0}
.alert-err{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}

/* ── SOCIAL ICONS ── */
.socials{display:flex;gap:10px}
.soc-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8);font-weight:700;font-size:13px;transition:var(--tr);text-decoration:none}
.soc-btn:hover{background:var(--accent);color:var(--primary);border-color:var(--accent);text-decoration:none}

/* ── FOOTER ── */
#site-footer{background:#0d2137;color:rgba(255,255,255,.72);padding:64px 0 0}
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:48px}
.ft-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-h);font-size:1.2rem;font-weight:700;color:#fff;margin-bottom:14px}
.ft-logo .logo-icon{width:34px;height:34px;font-size:.9rem}
.ft-about{font-size:13.5px;line-height:1.75;opacity:.68;margin-bottom:18px}
.ft-col h4{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:18px}
.ft-col ul li{margin-bottom:9px}
.ft-col ul li a{font-size:13.5px;color:rgba(255,255,255,.65);transition:var(--tr)}
.ft-col ul li a:hover{color:var(--accent)}
.ft-ci{display:flex;gap:10px;margin-bottom:14px;font-size:13.5px;color:rgba(255,255,255,.65)}
.ft-ci-ico{width:30px;height:30px;background:rgba(255,215,0,.12);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.ft-bottom{border-top:1px solid rgba(255,255,255,.08);padding:18px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;opacity:.45}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media(max-width:1100px){
  .ft-grid{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .g2,.g2s{grid-template-columns:1fr}
  .g3{grid-template-columns:1fr 1fr}
}

  .ft-grid{grid-template-columns:1fr}
  .nl-form{flex-direction:column;border-radius:var(--radius)}
  .nl-form input,.nl-form button{border-radius:var(--radius)}
  .ev-card{flex-direction:column}
  .ev-date{flex-direction:row;gap:6px;padding:10px 16px;min-width:auto}
  .sec{padding:52px 0}
}
@media(max-width:540px){
  .wrap{padding:0 16px}
  .g4{grid-template-columns:1fr}
  .sec{padding:40px 0}
  .sec-title{font-size:24px}
  .price-card.feat{transform:none}
  .card-stats{flex-direction:column;gap:8px}
  .card-stat{border-right:none;border-bottom:1px solid var(--border)}
  .card-stat:last-child{border-bottom:none}
}

/* ════════════════════════════════════
   MOBILE-FIRST ENHANCEMENTS
════════════════════════════════════ */


}

/* Bottom Quick Nav */
#hs-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);z-index:990;padding:8px 0;box-shadow:0 -2px 12px rgba(0,0,0,.08);transition:transform .2s ease;}
@media(max-width:640px){#hs-bottom-nav{display:flex;}}
.hs-bnav-items{display:flex;width:100%;max-width:480px;margin:0 auto;}
.hs-bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;color:var(--text-muted);font-size:11px;font-weight:500;text-decoration:none;border-radius:6px;transition:color .15s;}
.hs-bnav-item:hover,.hs-bnav-item.active{color:var(--secondary);}
.hs-bnav-icon{font-size:1.3rem;line-height:1;}

/* Responsive tables */
@media(max-width:640px){
  .tbl-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border);}
  .tbl{min-width:580px;}
  .tbl th,.tbl td{padding:10px 12px;font-size:12px;}
}

/* Touch-friendly buttons */
@media(max-width:768px){
  .btn{min-height:44px;padding:11px 22px;}
  .btn-sm{min-height:38px;}
}

/* ════════════════════════════════════
   DARK MODE
════════════════════════════════════ */
:root.dark{
  --bg:#0d1117;--bg-light:#161b22;--bg-gray:#161b22;
  --text:#e6edf3;--text-muted:#8b949e;--text-light:#6e7681;
  --border:#30363d;--white:#0d1117;
}
.dark body{background:var(--bg);color:var(--text);}
.dark #site-header{background:#161b22;border-color:#30363d;}
.dark .logo{color:#e6edf3;}
.dark nav#main-nav{background:#161b22;}
.dark nav#main-nav ul li a{color:#c9d1d9;}
.dark nav#main-nav ul li a:hover{background:#21262d;color:#58a6ff;}
.dark .card,.dark .testi,.dark .feat-box,.dark .stat-box,.dark .ev-card,.dark .price-card,.dark .spon-logo{background:#161b22;border-color:#30363d;}
.dark .card-body h3 a,.dark .testi-name,.dark .card-body h3{color:#e6edf3;}
.dark .fg label,.dark .section-title{color:#e6edf3;}
.dark .fc{background:#21262d;border-color:#30363d;color:#e6edf3;}
.dark .fc:focus{border-color:var(--secondary);}
.dark .bg-light,.dark .bg-gray{background:#161b22;}
.dark #hs-bottom-nav{background:#161b22;border-color:#30363d;}
.dark .hs-bnav-item{color:#8b949e;}
.dark .tbl td{border-color:#30363d;}
.dark .tbl tr:nth-child(even) td{background:#21262d;}
.dark .price-card.feat{border-color:var(--secondary);}

/* Dark mode toggle button */
#hs-dark-toggle{background:none;border:1px solid var(--border);border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:var(--tr);flex-shrink:0;}
#hs-dark-toggle:hover{background:var(--bg-light);}

/* ════════════════════════════════════
   LIVE BADGE + PULSE
════════════════════════════════════ */
.hs-status-badge{color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:50px;text-transform:uppercase;}
.hs-status-badge[data-status="Upcoming"]{background:#004080;}
.hs-status-badge[data-status="Live"]{background:#dc2626;}
.hs-status-badge[data-status="Completed"]{background:#15803d;}
.hs-status-badge[data-status="Postponed"]{background:#854d0e;}
.hs-pulse{animation:pulse 1.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.hs-match-card.live{animation:borderPulse 2s ease-in-out infinite;}
@keyframes borderPulse{0%,100%{border-color:#dc2626;}50%{border-color:#ff6b6b;}}

/* ════════════════════════════════════
   FILTER BARS
════════════════════════════════════ */
.hs-filter-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:16px 20px;background:var(--bg-light);border-radius:var(--radius-lg);border:1px solid var(--border);margin-bottom:28px;}
.hs-filter-bar label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);}
.hs-filter-bar select{padding:8px 12px;border:1.5px solid var(--border);border-radius:50px;font-family:var(--font-b);font-size:13px;background:var(--bg);color:var(--text);cursor:pointer;min-width:130px;}
.hs-filter-bar select:focus{outline:none;border-color:var(--secondary);}
.hs-result-count{font-size:13px;color:var(--text-muted);margin-left:auto;}

/* ════════════════════════════════════
   LIGHTBOX
════════════════════════════════════ */
.hs-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;}
.hs-lightbox.open{opacity:1;}
.hs-lb-overlay{position:absolute;inset:0;background:rgba(0,0,0,.88);}
.hs-lb-inner{position:relative;z-index:1;max-width:90vw;max-height:90vh;text-align:center;}
.hs-lb-inner img{max-width:90vw;max-height:80vh;object-fit:contain;border-radius:var(--radius-md);box-shadow:0 20px 60px rgba(0,0,0,.5);}
.hs-lb-close{position:absolute;top:-40px;right:0;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:1.2rem;width:34px;height:34px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.hs-lb-close:hover{background:rgba(255,255,255,.3);}
.hs-lb-caption{color:rgba(255,255,255,.75);font-size:13px;margin-top:10px;}

/* ════════════════════════════════════
   GALLERY CATEGORY FILTERS
════════════════════════════════════ */
.hs-gal-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;}
.hs-gal-cat-btn{padding:8px 18px;border:1.5px solid var(--border);border-radius:50px;background:var(--bg);color:var(--text-muted);font-size:13px;font-weight:500;cursor:pointer;transition:var(--tr);}
.hs-gal-cat-btn:hover,.hs-gal-cat-btn.active{background:var(--secondary);color:#fff;border-color:var(--secondary);}

/* Gallery masonry effect */
.gal-grid{columns:3 200px;column-gap:14px;}
.gal-item{break-inside:avoid;margin-bottom:14px;aspect-ratio:unset;}
.gal-item img{width:100%;display:block;border-radius:var(--radius);}
@media(max-width:640px){.gal-grid{columns:2 160px;}}
@media(max-width:380px){.gal-grid{columns:1;}}

/* ════════════════════════════════════
   SPONSOR CARDS
════════════════════════════════════ */
.hs-sponsor-section{padding:40px 0;}
.hs-sponsor-carousel{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;}
.hs-sponsor-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;text-align:center;background:#fff;transition:var(--tr);min-width:140px;}
.dark .hs-sponsor-card{background:#161b22;border-color:#30363d;}
.hs-sponsor-card:hover{box-shadow:var(--shadow-md);border-color:var(--accent);}
.hs-sponsor-ph{height:60px;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:1.2rem;font-weight:700;color:var(--primary);background:var(--bg-light);border-radius:var(--radius);margin-bottom:10px;}
.hs-sponsor-card img{max-height:60px;object-fit:contain;margin:0 auto 10px;}
.hs-sponsor-info strong{font-size:13px;display:block;margin-bottom:4px;}
.hs-sponsor-info p{font-size:12px;color:var(--text-muted);margin:0;}

/* ════════════════════════════════════
   PAGER
════════════════════════════════════ */
.hs-pager{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:28px;flex-wrap:wrap;}

/* ════════════════════════════════════
   SIDEBAR WIDGET
════════════════════════════════════ */
.hs-sidebar-widget{background:var(--bg-light);border-radius:var(--radius-lg);border:1px solid var(--border);padding:22px;margin-bottom:20px;}
.hs-sidebar-title{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--secondary);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--accent);}

/* ════════════════════════════════════
   SCORE COLORS
════════════════════════════════════ */
.hs-score.win{color:var(--secondary);}
.hs-score.loss{color:#dc2626;}
.hs-score.draw{color:var(--primary);}

/* ════════════════════════════════════
   SOCIAL EMBED SECTION
════════════════════════════════════ */
.hs-social-embed{background:var(--bg-light);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;min-height:200px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;text-align:center;color:var(--text-muted);}
.hs-social-embed iframe{width:100%;border:none;border-radius:var(--radius);}

/* ════════════════════════════════════
   GALLERY SYSTEM
════════════════════════════════════ */

/* ── TOP BAR ── */
.hs-gal-topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:24px;}
.hs-gal-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.hs-gal-cat-btn{padding:8px 16px;border:1.5px solid var(--border);border-radius:50px;background:var(--bg);color:var(--text-muted);font-size:13px;font-weight:500;cursor:pointer;transition:var(--tr);display:inline-flex;align-items:center;gap:6px;font-family:var(--font-b);}
.hs-gal-cat-btn:hover{border-color:var(--secondary);color:var(--secondary);}
.hs-gal-cat-btn.active{background:var(--secondary);color:#fff;border-color:var(--secondary);}
.hs-cat-count{background:rgba(255,255,255,.3);border-radius:50px;padding:1px 7px;font-size:11px;font-weight:600;}
.hs-gal-cat-btn:not(.active) .hs-cat-count{background:var(--bg-light);color:var(--text-muted);}
.hs-gal-view-toggle{display:flex;gap:4px;background:var(--bg-light);border-radius:50px;padding:4px;border:1px solid var(--border);}
.hs-view-btn{padding:6px 14px;border-radius:50px;border:none;background:transparent;font-size:12px;font-weight:600;cursor:pointer;color:var(--text-muted);transition:var(--tr);font-family:var(--font-b);}
.hs-view-btn.active{background:#fff;color:var(--primary);box-shadow:var(--shadow);}

/* ── ALBUM GRID ── */
.hs-albums-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;min-height:100px;transition:opacity .2s;}
.hs-albums-grid.loading{opacity:.4;pointer-events:none;}

/* ── ALBUM CARD ── */
.hs-album-card{border-radius:var(--radius-xl);overflow:hidden;background:#fff;border:1px solid var(--border);cursor:pointer;transition:var(--tr);}
.hs-album-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px);}
.hs-album-thumb{position:relative;height:200px;overflow:hidden;background:var(--bg-light);}
.hs-album-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.hs-album-card:hover .hs-album-thumb img{transform:scale(1.06);}
.hs-album-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3.5rem;background:linear-gradient(135deg,rgba(0,64,128,.08),rgba(0,128,128,.12));color:var(--primary);opacity:.4;}
.hs-album-ov{position:absolute;inset:0;background:rgba(0,64,128,.6);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s;}
.hs-album-card:hover .hs-album-ov{opacity:1;}
.hs-album-view-btn{color:#fff;font-family:var(--font-h);font-weight:600;font-size:15px;background:rgba(255,255,255,.15);padding:10px 22px;border-radius:50px;border:2px solid rgba(255,255,255,.4);}
.hs-album-feat-badge{position:absolute;top:10px;left:10px;background:var(--accent);color:var(--primary);font-size:11px;font-weight:700;padding:3px 10px;border-radius:50px;letter-spacing:.5px;}
.hs-album-info{padding:18px 20px;}
.hs-album-title{font-size:16px;font-weight:700;margin-bottom:8px;color:var(--text);line-height:1.3;}
.hs-album-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--text-muted);}
.hs-album-meta span{display:flex;align-items:center;gap:3px;}

/* ── EMPTY STATE ── */
.hs-gal-empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text-muted);}
.hs-gal-empty span{font-size:3.5rem;display:block;margin-bottom:14px;}
.hs-gal-empty p{font-size:15px;}

/* ── PHOTOS GRID (masonry inside album) ── */
.gal-grid{columns:4 200px;column-gap:12px;}
.gal-item{break-inside:avoid;margin-bottom:12px;border-radius:var(--radius);overflow:hidden;cursor:pointer;position:relative;display:block;}
.gal-item img{width:100%;display:block;border-radius:var(--radius);transition:transform .3s;}
.gal-item:hover img{transform:scale(1.03);}
.gal-ov{position:absolute;inset:0;background:rgba(0,64,128,.55);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.8rem;opacity:0;transition:opacity .2s;border-radius:var(--radius);}
.gal-item:hover .gal-ov{opacity:1;}
@media(max-width:900px){.gal-grid{columns:3 160px;}}
@media(max-width:640px){.gal-grid{columns:2 140px;}}
@media(max-width:380px){.gal-grid{columns:1;}}

/* ── PAGER ── */
.hs-pager{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:36px;flex-wrap:wrap;}
.hs-pager-btn{padding:9px 20px;border:1.5px solid var(--border);border-radius:50px;background:var(--bg);font-size:13px;font-weight:600;cursor:pointer;transition:var(--tr);font-family:var(--font-h);color:var(--text);}
.hs-pager-btn:hover{background:var(--secondary);color:#fff;border-color:var(--secondary);}
.hs-pager-info{font-size:13px;color:var(--text-muted);padding:0 4px;}

/* ── LIGHTBOX ── */
.hs-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;pointer-events:none;}
.hs-lightbox.open{opacity:1;pointer-events:all;}
.hs-lb-bg{position:absolute;inset:0;background:rgba(0,0,0,.92);}
.hs-lb-wrap{position:relative;z-index:1;max-width:92vw;max-height:92vh;display:flex;flex-direction:column;align-items:center;}
.hs-lb-img-wrap{position:relative;}
.hs-lb-img-wrap img{max-width:88vw;max-height:78vh;object-fit:contain;border-radius:var(--radius);display:block;box-shadow:0 20px 60px rgba(0,0,0,.6);}
.hs-lb-close{position:absolute;top:-46px;right:0;width:38px;height:38px;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:1.1rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.hs-lb-close:hover{background:rgba(255,255,255,.3);}
.hs-lb-prev,.hs-lb-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:1.3rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;z-index:2;}
.hs-lb-prev{left:-56px;}
.hs-lb-next{right:-56px;}
.hs-lb-prev:hover,.hs-lb-next:hover{background:rgba(255,255,255,.28);}
.hs-lb-caption{color:rgba(255,255,255,.82);font-size:13px;margin-top:12px;text-align:center;max-width:600px;}
.hs-lb-counter{color:rgba(255,255,255,.5);font-size:12px;margin-top:5px;}
@media(max-width:640px){
  .hs-lb-prev{left:-8px;top:auto;bottom:-50px;transform:none;}
  .hs-lb-next{right:-8px;top:auto;bottom:-50px;transform:none;}
}

/* Dark mode gallery */
.dark .hs-album-card{background:#161b22;border-color:#30363d;}
.dark .hs-album-title{color:#e6edf3;}
.dark .hs-gal-cat-btn{background:#161b22;border-color:#30363d;color:#8b949e;}
.dark .hs-gal-view-toggle{background:#161b22;border-color:#30363d;}
.dark .hs-view-btn.active{background:#21262d;color:#e6edf3;}
.dark .hs-pager-btn{background:#161b22;border-color:#30363d;color:#c9d1d9;}

/* ════════════════════════════════════
   NEWS PAGE
════════════════════════════════════ */
.hs-news-search-hero{display:flex;max-width:440px;border-radius:50px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.2);margin:0 auto;}
.hs-news-search-hero input{flex:1;padding:13px 20px;border:none;font-family:var(--font-b);font-size:15px;outline:none;}
.hs-news-search-hero button{padding:13px 20px;background:var(--accent);color:var(--primary);border:none;font-size:1.1rem;cursor:pointer;}
.hs-news-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px;}
.hs-news-cat-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1.5px solid var(--border);border-radius:50px;color:var(--text-muted);font-size:13px;font-weight:500;transition:var(--tr);text-decoration:none;}
.hs-news-cat-btn:hover{border-color:var(--secondary);color:var(--secondary);}
.hs-news-cat-btn.active{background:var(--secondary);color:#fff;border-color:var(--secondary);}

/* Featured post */
.hs-featured-post{display:block;border-radius:var(--radius-xl);overflow:hidden;margin-bottom:8px;text-decoration:none;}
.hs-featured-post-img{position:relative;height:420px;}
@media(max-width:768px){.hs-featured-post-img{height:280px;}}
.hs-featured-post-img img{width:100%;height:100%;object-fit:cover;display:block;}
.hs-featured-post-ph{width:100%;height:100%;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;font-size:5rem;color:rgba(255,255,255,.2);}
.hs-featured-post-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.2) 60%,transparent 100%);}
.hs-featured-post-body{position:absolute;bottom:0;left:0;right:0;padding:32px;}
.hs-featured-post-title{color:#fff;font-size:clamp(20px,3vw,28px);margin-bottom:10px;line-height:1.3;}
.hs-featured-post-exc{color:rgba(255,255,255,.8);font-size:15px;line-height:1.65;max-width:680px;}
.hs-feat-badge{background:var(--accent);color:var(--primary);font-size:11px;font-weight:700;padding:4px 12px;border-radius:50px;letter-spacing:.5px;}
.hs-read-more-btn{background:rgba(255,255,255,.15);color:#fff;padding:6px 14px;border-radius:50px;font-size:12px;font-weight:600;}

/* News layout */
.hs-news-layout{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start;}
@media(max-width:960px){.hs-news-layout{grid-template-columns:1fr;}}

/* Post grid */
.hs-news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;}
.hs-post-card{background:#fff;border-radius:var(--radius-xl);border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column;transition:var(--tr);}
.hs-post-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);}
.hs-post-card-img-wrap{position:relative;height:200px;overflow:hidden;display:block;}
.hs-post-card-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.hs-post-card:hover .hs-post-card-img-wrap img{transform:scale(1.05);}
.hs-post-card-ph{width:100%;height:100%;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;font-size:3rem;color:rgba(255,255,255,.2);}
.hs-post-cat-badge{position:absolute;bottom:10px;left:10px;background:var(--secondary);color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:50px;letter-spacing:.5px;text-decoration:none;}
.hs-post-card-body{padding:18px 20px;flex:1;}
.hs-post-sub{font-size:11px;font-weight:600;color:var(--secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;}
.hs-post-title{font-size:17px;margin-bottom:8px;line-height:1.35;}
.hs-post-title a{color:var(--text);text-decoration:none;}
.hs-post-title a:hover{color:var(--secondary);}
.hs-post-exc{font-size:13px;color:var(--text-muted);line-height:1.65;}
.hs-post-meta-row{display:flex;gap:14px;font-size:12px;color:var(--text-muted);margin-top:10px;flex-wrap:wrap;}
.hs-post-match-link{font-size:12px;font-weight:600;color:var(--secondary);margin-top:8px;}
.hs-post-card-footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.hs-post-read-more{font-size:13px;font-weight:600;color:var(--secondary);text-decoration:none;}
.hs-post-read-more:hover{color:var(--secondary-dark);}
.hs-post-read-time{font-size:11px;color:var(--text-muted);}

/* Pagination */
.hs-news-pager{display:flex;gap:8px;justify-content:center;margin-top:36px;flex-wrap:wrap;}
.hs-pager-num{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--border);border-radius:var(--radius);font-size:14px;font-weight:600;color:var(--text);text-decoration:none;transition:var(--tr);}
.hs-pager-num:hover,.hs-pager-num.active{background:var(--secondary);color:#fff;border-color:var(--secondary);}

/* No posts */
.hs-no-posts{background:var(--bg-light);border-radius:var(--radius-xl);padding:60px;text-align:center;color:var(--text-muted);}
.hs-no-posts span{font-size:3.5rem;display:block;margin-bottom:14px;}
.hs-no-posts h3{font-size:20px;margin-bottom:8px;}
.hs-no-posts p{font-size:15px;}

/* Sidebar */
.hs-news-sidebar{position:sticky;top:calc(var(--nav-h)+20px);display:flex;flex-direction:column;gap:18px;}
.hs-sidebar-w{background:#fff;border-radius:var(--radius-lg);border:1px solid var(--border);padding:22px;}
.hs-sidebar-h{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--secondary);margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--accent);}
.hs-sidebar-cat{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:14px;color:var(--text);text-decoration:none;transition:var(--tr);}
.hs-sidebar-cat:last-child{border-bottom:none;}
.hs-sidebar-cat:hover,.hs-sidebar-cat.active{color:var(--secondary);}
.hs-sidebar-cat-count{background:var(--bg-light);color:var(--text-muted);font-size:11px;font-weight:600;padding:2px 8px;border-radius:50px;}
.hs-sidebar-cat.active .hs-sidebar-cat-count{background:var(--secondary);color:#fff;}
.hs-sidebar-post{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.hs-sidebar-post:last-child{border-bottom:none;margin-bottom:0;}
.hs-sidebar-post-title{font-size:13px;font-weight:600;color:var(--text);display:block;margin-bottom:3px;text-decoration:none;line-height:1.4;}
.hs-sidebar-post-title:hover{color:var(--secondary);}
.hs-sidebar-post-date{font-size:11px;color:var(--text-muted);}

/* Contact form */
.hs-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:640px){.hs-form-row{grid-template-columns:1fr;}}
.req{color:var(--secondary);}

/* Dark mode news */
.dark .hs-post-card,.dark .hs-sidebar-w{background:#161b22;border-color:#30363d;}
.dark .hs-post-title a,.dark .hs-sidebar-post-title{color:#e6edf3;}
.dark .hs-news-cat-btn,.dark .hs-sidebar-cat{color:#8b949e;}
.dark .hs-no-posts{background:#161b22;}

/* ════════════════════════════════════════════
   COMPLETE RESPONSIVE SYSTEM — clean rewrite
════════════════════════════════════════════ */

/* ── HEADER BASE (desktop) ── */
#site-header { position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid var(--border); height:var(--nav-h); display:flex; align-items:center; box-shadow:var(--shadow); }
.hdr-inner   { display:flex; align-items:center; justify-content:space-between; width:100%; gap:12px; }
.hdr-right   { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.hamburger   { display:none; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; justify-content:center; gap:5px; flex-shrink:0; z-index:1002; position:relative; }
.hamburger span { display:block; width:24px; height:2px; background:var(--primary); border-radius:2px; transition:all .25s ease; }
nav#main-nav { display:flex; align-items:center; }
nav#main-nav ul { display:flex; gap:2px; align-items:center; list-style:none; margin:0; padding:0; }
nav#main-nav ul li a { display:block; padding:8px 12px; color:var(--text); font-weight:500; font-size:13.5px; font-family:var(--font-h); border-radius:6px; transition:var(--tr); text-decoration:none; white-space:nowrap; }
nav#main-nav ul li a:hover,
nav#main-nav ul li.current-menu-item > a { color:var(--secondary); background:var(--bg-light); }
.hdr-cta { flex-shrink:0; }

/* ── TABLET (collapse long nav) ── */
@media (max-width:1080px) {
  nav#main-nav ul li a { padding:7px 9px; font-size:13px; }
}

/* ── MOBILE (≤ 768px) ── */
@media (max-width:768px) {
  /* Show hamburger */
  .hamburger { display:flex; }
  /* Hide desktop CTA button in header */
  .hdr-cta   { display:none; }

  /* Nav panel — slide in from RIGHT */
  nav#main-nav {
    display:block;
    position:fixed;
    top:0; right:0; bottom:0;
    width:min(280px, 85vw);
    background:#fff;
    z-index:1001;
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1), visibility .28s;
    visibility:hidden;
    padding:80px 20px 40px;
    overflow-y:auto;
    box-shadow:-4px 0 24px rgba(0,0,0,.18);
    border-left:1px solid var(--border);
  }
  nav#main-nav.open {
    transform:translateX(0);
    visibility:visible;
  }
  nav#main-nav ul {
    flex-direction:column;
    gap:4px;
  }
  nav#main-nav ul li a {
    padding:13px 16px;
    font-size:15px;
    border-radius:8px;
    display:block;
  }

  /* Hamburger → X animation */
  .hamburger.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .hamburger.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
  .hamburger.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  /* Overlay backdrop */
  .nav-overlay {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    z-index:1000;
    backdrop-filter:blur(2px);
  }
  .nav-overlay.show { display:block; }

  /* Page hero padding */
  .page-hero { padding:48px 0 40px; }

  /* Grids */
  .g2, .g3, .g4, .g2s { grid-template-columns:1fr !important; }

  /* Footer */
  .ft-grid { grid-template-columns:1fr; gap:28px; }

  /* Bottom nav */
  #hs-bottom-nav { display:flex; }

  /* Tables */
  .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tbl { min-width:560px; }
}

/* ── SMALL MOBILE (≤ 480px) ── */
@media (max-width:480px) {
  .wrap { padding:0 16px; }
  .sec  { padding:44px 0; }
  h1    { font-size:clamp(24px,7vw,36px) !important; }
  .sec-title { font-size:clamp(22px,6vw,32px); }
  .btn-lg { padding:13px 26px; font-size:15px; }
  .hs-news-grid { grid-template-columns:1fr; }
  .price-card.feat { transform:none; }
  .hs-albums-grid { grid-template-columns:1fr; }
  .gal-grid { columns:2 140px; }
  .nl-form  { flex-direction:column; border-radius:var(--radius); }
  .nl-form input, .nl-form button { border-radius:var(--radius); }
  nav#main-nav { padding-top:72px; }
}

/* ── DARK MODE header ── */
.dark #site-header           { background:#161b22; border-color:#30363d; }
.dark nav#main-nav            { background:#161b22; border-color:#30363d; }
.dark nav#main-nav ul li a    { color:#c9d1d9; }
.dark nav#main-nav ul li a:hover { background:#21262d; color:#e6edf3; }
.dark .hamburger span         { background:#e6edf3; }

/* ── BOTTOM QUICK NAV ── */
#hs-bottom-nav {
  display:none;
  position:fixed; bottom:0; left:0; right:0;
  background:#fff; border-top:1px solid var(--border);
  z-index:990; padding:6px 0 8px;
  box-shadow:0 -2px 12px rgba(0,0,0,.08);
  transition:transform .2s ease;
  /* Leave room above bottom nav for page content */
}
.hs-bnav-items { display:flex; width:100%; max-width:500px; margin:0 auto; }
.hs-bnav-item  {
  flex:1; display:flex; flex-direction:column; align-items:center;
  gap:2px; padding:5px 4px;
  color:var(--text-muted); font-size:10px; font-weight:500;
  text-decoration:none; border-radius:6px; transition:color .15s;
}
.hs-bnav-item:hover { color:var(--secondary); text-decoration:none; }
.hs-bnav-icon { font-size:1.2rem; line-height:1; }
.dark #hs-bottom-nav { background:#161b22; border-color:#30363d; }

/* ── BODY SCROLL LOCK when nav open ── */
body.nav-open { overflow:hidden; }

/* ── SAFE AREA for bottom nav (mobile) ── */
@media (max-width:768px) {
  body { padding-bottom:62px; }
  #hs-bottom-nav { padding-bottom:calc(6px + env(safe-area-inset-bottom)); }
}
/* ════════════════════════════════════════════
   LOGO — image + text
════════════════════════════════════════════ */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo:hover { text-decoration: none; }

.logo-img-wrap {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.logo-icon-fallback {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
}
.logo-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
/* ── LOGO NAME — Navy Blue as requested ── */
.logo-name {
  font-family: var(--font-h);
  font-size: 13px;
  font-weight: 700;
  color: #004080;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  line-height: 1.3;
}
.logo-sub {
  font-family: var(--font-b);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
/* Dark mode — keep logo text readable */
.dark .logo-name      { color: #e6edf3; }
.dark .logo-sub       { color: #8b949e; }
.dark .logo-img-wrap  { border-color: #30363d; }

/* Tablet: hide sub text */
@media (max-width: 900px) {
  .logo-sub  { display: none; }
  .logo-name { font-size: 13px; }
}
/* Small phones: hide all text, just logo circle */
@media (max-width: 480px) {
  .logo-text-wrap      { display: none; }
  .logo-img-wrap,
  .logo-icon-fallback  { width: 40px; height: 40px; }
}

/* ════════════════════════════════════════════
   HERO SLIDESHOW
════════════════════════════════════════════ */
.hs-hero-slider {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--nav-h));
  min-height: 580px;
  overflow: hidden;
  background: #001a2e;
}

/* Each slide — fills the full slider */
.hs-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .9s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* TEXT AT BOTTOM — doesn't cover the photo */
}
.hs-slide.active {
  opacity: 1;
}

/* Gradient only at bottom so text is readable */
.hs-slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 45%,
    rgba(0,0,0,0.55) 75%,
    rgba(0,0,0,0.78) 100%
  ) !important;
}

/* Text content at the bottom of the slide */
.hs-slide-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 0 24px 120px; /* pushes text above the stats bar */
  width: 100%;
}
.hs-slide-content h1 {
  color: #fff;
  font-size: clamp(28px, 4vw, 52px);
  margin-bottom: 14px;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.hs-slide-sub {
  font-size: clamp(15px, 2vw, 18px);
  opacity: .9;
  max-width: 560px;
  margin: 0 auto 28px;
  line-height: 1.7;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.hs-slide-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Nav arrows */
.hs-slide-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 50%;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
  transition: background .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hs-slide-nav:hover { background: rgba(255,255,255,.3); }
.hs-slide-prev { left: 20px; }
.hs-slide-next { right: 20px; }

/* Dots */
.hs-slide-dots {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
}
.hs-slide-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: 2px solid rgba(255,255,255,.6);
  cursor: pointer;
  transition: background .25s, transform .25s;
  padding: 0;
}
.hs-slide-dot.active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.3);
}

/* Stats bar — pinned to bottom */
.hs-hero-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 12px 0;
}
.hs-hero-stat {
  text-align: center;
  padding: 0 28px;
  border-right: 1px solid rgba(255,255,255,.15);
}
.hs-hero-stat:last-child { border-right: none; }
.hs-hero-stat-num {
  display: block;
  font-family: var(--font-h);
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.hs-hero-stat-label {
  font-size: 10px;
  opacity: .65;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
}

@media (max-width: 768px) {
  .hs-hero-slider   { min-height: 75vh; }
  .hs-slide-content { padding: 0 16px 90px; }
  .hs-slide-nav     { width: 38px; height: 38px; font-size: 1.4rem; }
  .hs-slide-prev    { left: 8px; }
  .hs-slide-next    { right: 8px; }
  .hs-hero-stat     { padding: 0 14px; }
  .hs-hero-stat-num { font-size: 20px; }
}
@media (max-width: 480px) {
  .hs-hero-stat     { padding: 0 8px; }
  .hs-hero-stat-num { font-size: 17px; }
  .hs-hero-stat-label { font-size: 9px; }
  .hs-slide-content h1 { font-size: 24px; }
}

/* ════════════════════════════════════════════
   POPUP ANNOUNCEMENT
════════════════════════════════════════════ */
.hs-popup-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  backdrop-filter: blur(3px);
}
body.popup-open .hs-popup-bg {
  opacity: 1;
  pointer-events: all;
}

.hs-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  z-index: 9001;
  width: fit-content;
  max-width: 90vw;
  max-height: 90vh;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 70px rgba(0,0,0,.5);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
body.popup-open .hs-popup {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%);
}

.hs-popup-inner {
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.hs-popup-img {
  flex-shrink: 0;
  line-height: 0;
  background: #000;
}
.hs-popup-img img {
  display: block;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 85vh;
}

.hs-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  background: rgba(0,0,0,.65);
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  transform: none;
}
.hs-popup-close:hover {
  background: rgba(220,38,38,.85);
}

.hs-popup-body {
  padding: 24px 28px 28px;
  background: #fff;
}

/* Keep popup white in dark mode so image shows */
.dark .hs-popup      { background: #fff; }
.dark .hs-popup-body { background: #fff; }

/* ════════════════════════════════════════════
   NOTICE BAR
════════════════════════════════════════════ */
.hs-notice-bar {
  padding: 0;
  position: relative;
  z-index: 100;
}
.hs-notice-bar + .hs-notice-bar {
  border-top: 1px solid rgba(255,255,255,.15);
}