/* =========================================================
   Q Lancashire - Website Styles (clean & organised)
   ========================================================= */

/* ----------------------------------
   0) Base / Reset / Variables
   ------------------------------ */
:root{
  --bg: #0a0a0a;	
  --fg: #ffffff;
  --muted: rgba(255,255,255,0.75);

  --brand-accent: #c62828;
  --brand-accent-2: #e53935;

  --card: rgba(255,255,255,0.04);
  --card-strong: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --primary: #4fd8ff;

  --header-h: 80px;   /* keep in sync with header padding/line-height */
  		/* --footer-h: 72px;    sticky footer height */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body{
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  padding-bottom: var(--footer-h);
}

section[id] {
  scroll-margin-top: var(--header-h);
}


/* Simple layout helpers reused across pages */
.container{ max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.row{ display: flex; gap: 1rem; align-items: center; }
.grid{ display: grid; gap: 1rem; }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.text-center{ text-align: center; }
.text-muted{ color: var(--muted); }
.subtle{ color: var(--muted); font-size: .9rem; }
.divider{ height: 1px; background: var(--border); margin: .75rem 0; }
.mb-4{ margin-bottom: 1rem; }
.mb-6{ margin-bottom: 1.5rem; }
.mb-8{ margin-bottom: 2rem; }
.mb-16{ margin-bottom: 4rem; }
.py-20{ padding: 5rem 0; }

/* ------------------------------
   1) Header / Primary Nav
   ------------------------------ */
header{
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(10,10,10,0.85);
  backdrop-filter: saturate(140%) blur(6px);
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.brand{ display: flex; align-items: center; gap: .8rem; }
.brand img{ height: 60px; display: block; border-radius: .5rem; }
.tagline{ font-size: .9rem; color: var(--muted); font-style: italic; letter-spacing: .02em; }

.primary-nav a{
  margin-left: 1rem;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}
.primary-nav a:hover{ color: var(--brand-accent); }

/* ------------------------------
   2) Mobile Menu (Hamburger + Drawer)
   ------------------------------ */
.hamburger{
  width: 44px; height: 44px; padding: 10px;
  display: grid; place-content: center; gap: 4px;
  background: transparent; border: 0; cursor: pointer;
}
.hamburger span{ display: block; width: 22px; height: 2px; background: #fff; }

.menu-overlay{
  position: fixed; inset: 0; z-index: 1090;
  background: rgba(0,0,0,.35);
  opacity: 0; transition: opacity .35s ease;
}
.menu-overlay.show{ opacity: 1; }
[hidden]{ display: none !important; }

.drawer{
  position: fixed; right: 0; top: 75px; bottom: 70px;
  width: min(80vw, 320px);
  background: #111A22; color: #fff; z-index: 11000;
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.22,.93,.37,1.01);
  box-shadow: -12px 0 24px rgba(0,0,0,.35);
  padding: 1rem; display: flex; flex-direction: column;
}
.drawer.open{ transform: translateX(0); }

.drawer-header{
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.drawer-logo{ max-width: 50px; height: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }

.drawer-nav{ display: flex; flex-direction: column; padding: .25rem 0; }
.drawer-nav a{
  display: block; padding: .9rem 1rem;
  color: #fff; text-decoration: none; letter-spacing: .2px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.drawer-nav a:last-child{ border-bottom: 0; }
.drawer-nav a:hover{ background: rgba(255,255,255,.06); }
.drawer-nav a:active{ background: rgba(255,255,255,.1); }

/* Desktop breakpoint for nav/drawer */
@media (min-width: 900px){
  .primary-nav{ display: flex; gap: 1rem; }
  .hamburger, .drawer, .menu-overlay{ display: none !important; }
}
@media (max-width: 899.98px){
  .primary-nav{ display: none; }
}

/* ------------------------------
   3) Hero
   ------------------------------ */
.hero{
  position: relative;
  background: url('../Images/Banner5.webp') center/cover no-repeat;
  min-height: 50vh;
  padding: 2rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 1rem; margin: 1rem;
}

.presenter{ display: flex; align-items: center; gap: 1rem; }

/* Presenter spbnhecifics */
#presenter-name-main{
	color: white;
  font-size: clamp(1.1rem, 1.2vw + .8rem, 1.5rem);
  margin: .1rem 0;
}


.display-county{
  color: gray;
  font-size: 0.9rem;
}

@media (min-width: 1200px){
	.display-county{
		color: rgba(255,255,255,0.65);
		font-size: 1rem;
		font-weight: 600;
		letter-spacing: .04em;
		text-shadow: 0 2px 6px rgba(0,0,0,.7);
	}
	
	#presenter-timeslot{
    	color: rgba(255,255,255,0.7);
    	font-size: 0.95rem;
	    text-shadow: 0 2px 6px rgba(0,0,0,0.7);
  }
	
  .hero::before{
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
      to right,
      rgba(0,0,0,0.65) 0%,
      rgba(0,0,0,0.35) 40%,
      rgba(0,0,0,0.1) 70%,
      transparent 100%
    );

    z-index: 1;
  }

  .presenter{
    position: relative;
    z-index: 2;
  }

  #presenter-name-main{
    text-shadow: 0 2px 10px rgba(0,0,0,0.9);
  }

}










#presenter-name-footer{
		 color: rgba(255,255,255,0.6);
		font-size: 0.7rem;
}

#presenter-timeslot{
	color:rgba(255,255,255,.55);
	font-size:0.9rem;
}

/*
@media (max-width: 430px){
	.presenter-name{
		 color: rgba(255,255,255,0.6);
		font-size: 0.7rem;
	}
}

*/






/* ------------------------------
   4) Now Playing Card + Artwork Crossfade
   ------------------------------ */
.now-playing-card{
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(0,0,0,0.7);
  border-radius: .5rem; overflow: hidden;
  width: 240px;
  border: 1px solid var(--brand-accent);
}
.now-playing-card .info{ padding: .5rem; }
.now-playing-card h3{ font-size: 1rem; margin-bottom: .3rem; }
.now-playing-card .info p{ font-size: .7rem; color: gray; }

/* Crossfade container */
.now-playing-card .artwork{
  position: relative;
  width: 100%;
  height: 190px;          /* visual height box */
  overflow: hidden;
}
/* Two stacked imgs; swap .is-front to crossfade */
.now-playing-card .artwork img.art{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /*object-fit: cover;*/
  object-fit:contain;
  opacity: 0;
  transition: opacity .35s ease;
  backface-visibility: hidden;
  will-change: opacity;
}
.now-playing-card .artwork img.art.is-front{ opacity: 1; }

/* ------------------------------
   5) Carousel (Music Played)
   ------------------------------ */
.carousel-head{
  display: flex; align-items: end; justify-content: space-between;
  margin: 1rem;
}
.iconbtn{
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand-accent); color: #fff; border: 0; cursor: pointer;
}
.iconbtn:hover{ background: var(--brand-accent-2); }

.carousel{
  display: flex; overflow-x: auto; gap: 1rem; margin: 1rem;
  padding-bottom: 1rem; scroll-snap-type: x mandatory;
}
.carousel::-webkit-scrollbar{ display: none; }
.card{
  background: #111;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: .5rem;
  min-width: 200px; flex: 0 0 220px; scroll-snap-align: start;
}
.card img{ width: 100%; border-bottom: 1px solid rgba(255,255,255,0.1); }
.card .caption{ padding: .5rem; font-size: .9rem; }

/* ------------------------------
   6) Buttons
   ------------------------------ */
.btn{
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--border);
  background: var(--card-strong); color: var(--fg);
  padding: .55rem .9rem; border-radius: .6rem; cursor: pointer;
  transition: .2s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.08); }
.btn.accent{ background: var(--brand-accent); border-color: transparent; }

/* Player circle button */
.play-btn{
  background: var(--brand-accent); color: white; border: none;
  border-radius: 50%; width: 64px; height: 64px; font-size: 1.5rem; cursor: pointer;
}
.play-btn:hover{ background: var(--brand-accent-2); }

/* ------------------------------
   7) Footer (sticky)
   ------------------------------ */
footer{
  position: sticky; bottom: 0;
  background: rgba(10,10,10,0.9);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: .5rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
}
footer .track-info{ display: flex; align-items: center; gap: .5rem; }
footer img{ width: 40px; height: 40px; object-fit: cover; border-radius: .3rem; }

footer .play-btn{
  width: 42px;
  height: 42px;
  font-size: 1.1rem;
}



/* ------------------------------
   8) Sections (Traffic + Quizzes share components)
   ------------------------------ */

/* Reusable hero gradient (works in any section) */
.hero-gradient{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(79,216,255,0.08), transparent),
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%),
    linear-gradient(180deg, rgba(198,40,40,.08), transparent 60%);
}

/* Reusable icon block (Option A) */
.icon-hero{
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
}
.icon{
  display: inline-flex; width: 28px; height: 28px; color: #fff;
}
.icon svg{
  width: 100%; height: 100%; display: block;
  stroke: currentColor;
}

/* Traffic Section specific container (kept light) */
#latest-traffic{
  padding: 2rem 0;
  scroll-margin-top: var(--header-h);
}

/* Traffic cards reuse .card plus this title chip look */
.title{ display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; }

/* ------------------------------
   9) Reveal-on-scroll (fade-in)
   ------------------------------ */
.fade-in{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease-out, transform .8s ease-out;
  will-change: opacity, transform;
}
.fade-in.show{
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------
   10) Responsive
   ------------------------------ */
@media (max-width: 900px){
  .grid.cols-3{ grid-template-columns: 1fr; }
  .row{ flex-direction: column; align-items: stretch; }
}

/* ------------------------------
   11) Now Playing – larger on wide screens
   ------------------------------ */
/*
@media (min-width: 1200px){
  .now-playing-card{ width: 300px; }
  .now-playing-card .artwork{ height: 230px; }
}
*/

@media (min-width: 1200px){
  .now-playing-card{
    top: 2.0rem;

    /* POSITION — move left but still visually balanced */
    left: 55%;
    right: auto;

    /* BIGGER */
    width: 480px;

    /* make it feel more premium */
    border-radius: 12px;
  }

  .now-playing-card .artwork{
    height: 340px;
  }

  .now-playing-card .info{
    padding: 1rem;
  }

  .now-playing-card h3{
    font-size: 1.4rem;
  }

  .now-playing-card .info p{
    font-size: .9rem;
  }
}

/* --- Quizzes section styling --- */
#recent-quizes { padding-bottom: 2rem; }

/* container heading already visible; make the list content pop */
#quizzesList { display: grid; gap: 1rem; }

/* reuse the same “card” look the traffic page uses */
.quiz-card {
  background: #111;                           /* visible on dark bg */
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: .9rem;
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  color: #f5f7fb;
}

.quiz-card .title {
  display:flex; align-items:center; gap:.6rem;
  font-weight:700; font-size:1.05rem;
}

.quiz-card .subtle { color: rgba(245,247,251,0.75); font-size:.9rem; }

.quiz-card .btn {
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color:#fff;
  padding:.55rem .9rem; border-radius:.6rem; cursor:pointer;
  transition:.2s ease;
}
.quiz-card .btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.1); }
.quiz-card .btn.accent { background:#c62828; border-color: transparent; }




/* Tabs */
.sched-tabs{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap }
.sched-tab{
  appearance:none; border:1px solid rgba(255,255,255,.12); color:#fff;
  background:rgba(255,255,255,.06); padding:.45rem .8rem; border-radius:.6rem;
  cursor:pointer; transition:.2s ease; position:relative;
}
.sched-tab:hover{ transform: translateY(-1px); background: rgba(255,255,255,.1) }
.sched-tab.is-active{ background:#c62828; border-color:#c62828 }
.sched-tab .sched-tag{
  position:absolute; top:-9px; right:-9px; font-size:.7rem; background:#2a9d8f;
  padding:.1rem .35rem; border-radius:.4rem;
}

/* Items (no images) */
.sched-item{ padding:1rem; display:block }
.sched-time{
  display:inline-block; font-weight:700; font-size:.85rem;
  padding:.15rem .45rem; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12); border-radius:.4rem;
  margin-bottom:.35rem;
}
.sched-title{ margin:.1rem 0 .3rem 0; font-size:1.05rem }
.live-badge{
  display:inline-block; margin-top:.35rem; padding:.25rem .5rem; border-radius:.5rem;
  background:#c62828; color:#fff; font-weight:700; font-size:.85rem;
}



/* ===== Schedule (no inline JS styles) ===== */

/*
#schedule { color: #fff; }

#schedule .tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0 0 1rem 0;
}

#schedule .tab-btn {
  border: 1px solid rgba(255,255,255,.12);
  background: #111A22;
  color: #fff;
  padding: .45rem .75rem;
  border-radius: .5rem;
  cursor: pointer;
}
#schedule .tab-btn[aria-pressed="true"] {
  background: #c62828;
  border-color: #c62828;
}

#schedule .list {
  display: grid;
  gap: .8rem;
  padding: .5rem 0 2rem;
}

#schedule .card {
  background: #111;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .9rem;
  padding: 1rem;
}

#schedule .sched-time {
  display: inline-block;
  font-weight: 700;
  font-size: .85rem;
  padding: .15rem .45rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .4rem;
  margin-bottom: .35rem;
}

#schedule .sched-title {
  margin: .1rem 0 .15rem 0;
  font-size: 1.05rem;
  font-weight: 700;
}

#schedule .text-muted { color: rgba(245,247,251,0.75); }

#schedule .live-badge {
  display: inline-block;
  margin-left: .5rem;
  font-size: .8rem;
  padding: .15rem .45rem;
  border-radius: .4rem;
  color: #fff;
  background: #e53935;
  border: 1px solid rgba(255,255,255,.12);
}

#schedule .tab-btn{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: #111A22;
  color: #fff;
  padding: .45rem .75rem;
  border-radius: .5rem;
  cursor: pointer;
  font: inherit;
}
#schedule .tab-btn[aria-pressed="true"]{
  background: #c62828;
  border-color: #c62828;
}



#onair-schedule { color:#fff; }

#onair-schedule .tabs {
  display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 1rem 0;
}
#onair-schedule .tab-btn {
  border:1px solid rgba(255,255,255,.12);
  background:#111A22; color:#fff;
  padding:.45rem .75rem; border-radius:.5rem; cursor:pointer;
}
#onair-schedule .tab-btn[aria-pressed="true"] {
  background:#c62828; border-color:#c62828;
}
#onair-schedule .list {
  display:grid; gap:.8rem; padding:.5rem 0 2rem;
}
#onair-schedule .card {
  background:#111; border:1px solid rgba(255,255,255,.12);
  border-radius:.9rem; padding:1rem;
}
#onair-schedule .sched-time {
  display:inline-block; font-weight:700;
  padding:.15rem .45rem; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12); border-radius:.4rem;
  margin-bottom:.35rem;
}
#onair-schedule .sched-title { margin:.1rem 0 .3rem 0; font-size:1.05rem; }
#onair-schedule .live-badge {
  display:inline-block; margin-top:.35rem; padding:.25rem .5rem; border-radius:.5rem;
  background:#c62828; color:#fff; font-weight:700; font-size:.85rem;
}
*/




/* ===== Schedule (ON-AIR) ===== */
#onair-schedule { color:#fff; }

#onair-schedule .tabs{
  display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 1rem 0;
}

#onair-schedule .tab-btn{
  appearance:none; -webkit-appearance:none;
  border:1px solid rgba(255,255,255,0.12);
  background:#111A22; color:#fff;
  padding:.45rem .75rem; border-radius:.5rem; cursor:pointer; font:inherit;
}
#onair-schedule .tab-btn[aria-pressed="true"]{
  background:#c62828; border-color:#c62828;
}

#onair-schedule .list{
  display:grid; gap:.8rem; padding:.5rem 0 2rem;
}

#onair-schedule .card{
  background:#111;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:.9rem;
  padding:1rem;
  color:#f5f7fb;                 /* ensure text is visible */
}

#onair-schedule .sched-time{
  display:inline-block; font-weight:700; font-size:.9rem;
  padding:.15rem .45rem;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:.4rem; margin-bottom:.35rem;
}

#onair-schedule .sched-title{
  margin:.2rem 0 .15rem 0; font-size:1.05rem; font-weight:700;
}

#onair-schedule .text-muted{ color:rgba(245,247,251,0.75); }

#onair-schedule .live-badge{
  display:inline-block; margin-left:.5rem;
  font-size:.8rem; padding:.15rem .45rem; border-radius:.4rem;
  color:#fff; background:#e53935;
  border:1px solid rgba(255,255,255,0.12);
}

/* Day tabs for schedule */
.tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.tab {
  background:#1a1a1a; color:#fff; border:1px solid rgba(255,255,255,.15);
  padding:.5rem .8rem; border-radius:.6rem; cursor:pointer;
}
.tab.active { background:#c62828; border-color:#c62828; }








/* Tabs on one line, no scrolling */
#scheduleTabs .tabs{
  display: flex;
  flex-wrap: nowrap;              /* keep on one line */
  justify-content: space-between; /* spread evenly */
  gap: .25rem;                    /* tiny gap between tabs */
  margin-bottom: .75rem;
}

/* Tab buttons auto-fit across the row */
#scheduleTabs .tab-btn{
  flex: 1 1 0;        /* equal widths, can shrink */
  min-width: 0;       /* allow tighter fit on small screens */
  text-align: center;
  white-space: nowrap;

  padding: .35rem .25rem;
  font-size: .9rem;
  line-height: 1.1;
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,.15);
  background: #1a1a1a;
  color: #fff;
  cursor: pointer;
}

/* Active state */
#scheduleTabs .tab-btn[aria-pressed="true"]{
  background: #c62828;
  border-color: #c62828;
}

/* Extra-tight on very small devices */
@media (max-width: 400px){
  #scheduleTabs .tabs{ gap: .2rem; }
  #scheduleTabs .tab-btn{
    padding: .3rem .2rem;
    font-size: .8rem;
  }
}


/* Same height for every carousel image */
.carousel .card img{
  width: 100%;
  height: 150px;          /* pick a height */
  object-fit: cover;      /* crop to fill the box */
  display: block;         /* removes inline-gap */
}

/* Optional: scale the height with screen size */
@media (min-width: 700px){
  .carousel .card img{ height: 150px; }
}
@media (min-width: 1100px){
  .carousel .card img{ height: 150px; }
}