/* =========================================================
   Country 103 Child - Custom Styles (REPLACE ALL)
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --c103-brown-1:#2a1f16;
  --c103-brown-2:#17110c;
  --c103-gold:#c28b3c;
  --c103-black:#111;
  --c103-white:#fff;

  /* Hero image URL */
  --c103-hero-image: url("https://country103fm.ca/wp-content/uploads/2026/02/ChatGPT-Image-Feb-11-2026-02_13_12-PM.png");
}

/* ---------- Base Layout ---------- */
.c103-wrap{max-width:1100px;margin:0 auto;padding:18px}
@media (max-width:900px){ .c103-wrap{padding:14px} }

/* ---------- Header ---------- */
.c103-site-header{
  position:sticky;top:0;z-index:999;
  background:#221a12;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08)
}
.c103-header-inner{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;gap:16px;
  padding:14px 18px;
}
.c103-logo{color:#fff;text-decoration:none;display:flex;flex-direction:column;line-height:1.05}
.c103-logo-mark{font-weight:900;letter-spacing:.04em;text-transform:uppercase;font-size:14px;opacity:.9}
.c103-logo-num{font-weight:1000;font-size:34px}
.c103-logo-sub{font-size:12px;opacity:.8}

.c103-nav{margin-left:auto}
.c103-menu{list-style:none;display:flex;gap:14px;margin:0;padding:0;flex-wrap:wrap}
.c103-menu a{color:#fff;text-decoration:none;font-weight:800;font-size:13px;opacity:.9}
.c103-menu a:hover{opacity:1;text-decoration:underline}

.c103-header-cta{margin-left:auto}
.c103-listen-live{
  display:inline-flex;align-items:center;justify-content:center;
  background:#111;color:#fff;text-decoration:none;
  font-weight:1000;padding:10px 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
}
.c103-listen-live:hover{filter:brightness(1.06)}

@media (max-width:900px){
  .c103-header-inner{flex-wrap:wrap}
  .c103-nav{order:3;width:100%}
  .c103-menu{justify-content:flex-start}
}

/* ---------- Hero ---------- */
.c103-hero{
  position:relative;
  color:#fff;
  border-radius:22px;
  padding:24px;
  margin-bottom:18px;

  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.22)),
    var(--c103-hero-image);
  background-size:cover;
  background-position:center;

  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 42px rgba(0,0,0,.35);
  overflow:hidden;
}

/* Two-column hero: left is spacing only, right is cards */
.c103-hero-inner{
  display:flex;
  gap:18px;
  align-items:stretch;
  flex-wrap:wrap;
}
.c103-hero-left{
  flex:1;
  min-width:360px;
  opacity:0;
  pointer-events:none;
}

/* Right column — smaller */
.c103-hero-right{
  width:420px;
  min-width:260px;
  display:grid;
  gap:12px;
  margin-left:auto;
}

/* Buttons — centered + LOWER */
.c103-hero-actions{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:40px;                 /* move buttons down */
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  z-index:5;
}

/* Hero buttons styling */
.c103-hero-actions .c103-listen-live{
  background:#0f0f10;
  border:1px solid rgba(255,255,255,.25);
  padding:12px 16px;
  border-radius:14px;
  box-shadow:0 12px 26px rgba(0,0,0,.28);
}
.c103-hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.12);
  color:#fff;
  text-decoration:none;
  font-weight:1000;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:0 12px 26px rgba(0,0,0,.22);
}
.c103-hero-btn:hover{filter:brightness(1.06)}
.c103-hero-btn-outline{background:transparent}

/* Responsive hero */
@media (max-width:900px){
  .c103-hero-left{display:none}
  .c103-hero-right{width:100%}
  .c103-hero-actions{
    left:16px;
    right:16px;
    transform:none;
    bottom:16px;
  }
}

/* ---------- Grid below hero ---------- */
.c103-grid{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.c103-col-main{flex:1;min-width:280px}
.c103-col-side{width:360px;min-width:260px}
@media (max-width:900px){
  .c103-col-side{width:100%}
}

/* ---------- Cards ---------- */
.c103-card{
  background:#fff;border-radius:18px;padding:16px;margin-bottom:14px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 26px rgba(0,0,0,.07)
}
.c103-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.c103-h2{margin:0 0 10px 0;font-size:18px}
.c103-muted{opacity:.78}
.c103-link{font-weight:1000;text-decoration:none}
.c103-link:hover{text-decoration:underline}

/* ---------- On Air Card (GLASS) ---------- */
.c103-onair-card{
  padding:12px;
  border-radius:16px;

  /* glass effect so microphone shows through */
  background:rgba(255,255,255,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.c103-onair-head{display:flex;gap:10px;align-items:flex-start}
.c103-live-dot{
  width:10px;height:10px;border-radius:999px;background:#cc1b1b;margin-top:6px;
  box-shadow:0 0 0 0 rgba(204,27,27,.45);
  animation:c103pulse 1.6s infinite;
}
@keyframes c103pulse{
  0%{box-shadow:0 0 0 0 rgba(204,27,27,.45)}
  70%{box-shadow:0 0 0 10px rgba(204,27,27,0)}
  100%{box-shadow:0 0 0 0 rgba(204,27,27,0)}
}
.c103-onair-label{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.75;font-weight:1000
}
.c103-nowplaying{font-weight:1000;font-size:14px}

.c103-onair-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0 0}
.c103-pill{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:1000;font-size:12px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.08);
  padding:7px 10px;border-radius:999px;
  text-decoration:none;color:#111
}
.c103-pill:hover{filter:brightness(1.03)}
.c103-mini-links{
  margin-top:8px;display:flex;gap:10px;align-items:center;
  font-size:12px;opacity:.9
}
.c103-mini-links a{color:#111;text-decoration:none;font-weight:1000}
.c103-mini-links a:hover{text-decoration:underline}

/* ---------- Meet the Team (smaller) ---------- */
.c103-host-card{padding:12px;border-radius:16px}
.c103-host-row{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.c103-host-avatar{
  width:40px;height:40px;border-radius:999px;
  background:linear-gradient(180deg,var(--c103-gold),#7a5522);
  box-shadow:0 10px 18px rgba(0,0,0,.18)
}
.c103-host-title{font-weight:1000;font-size:14px}
.c103-host-sub{opacity:.8;font-size:12px}

/* Make room for bottom player bar */
body{padding-bottom:92px}
@media (max-width:700px){ body{padding-bottom:84px} }
/* =========================================================
   HERO: fill rounded edges + replace Meet Team with buttons
   ========================================================= */

/* Make hero image fill the rounded container properly */
.c103-hero{
  padding:0 !important;            /* remove inner gaps */
}
.c103-hero-inner{
  padding:24px !important;         /* keep spacing for cards */
}
.c103-hero{
  background-size:cover !important;
  background-position:center !important;
}

/* Tighten right column */
.c103-hero-right{
  width:420px !important;
  gap:12px !important;
}

/* On Air card stays glassy */
.c103-onair-card{
  background:rgba(255,255,255,.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.18) !important;
}

/* New quick button block (replaces Meet the Team) */
.c103-hero-quick{
  padding:12px !important;
  border-radius:16px !important;
  display:flex !important;
  gap:10px !important;
  justify-content:flex-start !important;
  align-items:center !important;
  flex-wrap:wrap !important;
}

/* Button styles */
.c103-quick-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  font-weight:1000;
  font-size:13px;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.10);
  background:#f4efe6;
  color:#111;
}
.c103-quick-btn:hover{filter:brightness(1.04)}

.c103-quick-btn-primary{
  background:#0f0f10;
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 12px 26px rgba(0,0,0,.20);
}

.c103-quick-btn-outline{
  background:transparent;
  border:1px solid rgba(0,0,0,.15);
}

/* Mobile: stack nicer */
@media (max-width:900px){
  .c103-hero-inner{padding:16px !important}
  .c103-hero-right{width:100% !important}
  .c103-hero-quick{justify-content:stretch !important}
  .c103-quick-btn{flex:1 1 auto}
}
/* =========================================================
   HERO IMAGE: move down + zoom + fill rounded corners
   ========================================================= */

.c103-hero{
  background-size: 112% auto !important;   /* zoom a bit */
  background-position: center 62% !important; /* move image DOWN */
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

/* If you still see “gaps” on the sides, force cover instead */
@media (min-width: 901px){
  .c103-hero{
    background-size: cover !important;
    background-position: center 62% !important;
  }
}
/* mini links centered under the 2 pills */
.c103-mini-links-grid{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 10px !important;
  text-align:center !important;
}
.c103-mini-links-grid a{
  display:block !important;
  font-weight: 1000 !important;
}
.c103-mini-links-grid span{display:none !important;} /* hides the bullet if any remains */
/* Listen Live button turns red while playing */
.c103-quick-btn-primary.is-playing{
  background:#c40000 !important;
  border-color: rgba(255,255,255,.18) !important;
}
/* Hide the OLD mini player bar (top-left OFF AIR) */
.c103-mini-player,
.c103-top-player,
.c103-float-player,
.c103-onair-mini,
.c103-playerbar--mini,
.c103-playerbar.mini,
.playerbar-mini,
#c103-mini-player,
#c103-top-player{
  display:none !important;
}
/* Hide the old/top player bar */
.c103-playerbar:not(#c103-playerbar){
  display:none !important;
}
#stream1{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}
/* ================================
   COUNTRY 103 – Player Bar Layout Fix
   ================================ */

#c103-playerbar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:9999;

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

  padding:12px 24px;
  background:#111;
  color:#fff;

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

/* Left side */
#c103-playerbar .c103-pb-left{
  display:flex;
  align-items:center;
  gap:18px;
  flex:1;
  min-width:0;
}

/* Station block */
#c103-playerbar .c103-pb-station{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  white-space:nowrap;
}

/* Meta (LIVE + Track) */
#c103-playerbar .c103-pb-meta{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

#c103-playerbar .c103-pb-track{
  font-size:14px;
  opacity:.9;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:420px;
}

/* Right side */
#c103-playerbar .c103-pb-right{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
  white-space:nowrap;
}

/* Buttons */
#c103-playerbar button{
  background:#222;
  color:#fff;
  border:none;
  border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
  font-size:14px;
  transition:.2s ease;
}

#c103-playerbar button:hover{
  background:#333;
}

/* Red state when playing */
#c103-playerbar [data-pb-play].is-playing,
#c103-playerbar [data-pb-pause].is-playing{
  background:#c62828;
}

/* Volume slider */
#c103-playerbar input[type="range"]{
  width:100px;
}

/* Prevent wrapping on desktop */
@media (min-width: 768px){
  #c103-playerbar{
    flex-wrap:nowrap;
  }
}

/* Stack nicely on mobile */
@media (max-width: 767px){
  #c103-playerbar{
    flex-direction:column;
    gap:10px;
  }

  #c103-playerbar .c103-pb-track{
    max-width:100%;
  }
}
body{
  padding-bottom:90px;
}