/* ---------- Variables & Reset ---------- */
:root{
  --bg-red: #e53935;     /* page background (mockup red) */
  --mid-brown: #7f5f40;      /* image blocks */
  --pastel-red: #bd6961;     /* single large containers */
  --pink-dark: #E19C94;   /* outer containers */
  --purple: #b388ff;     /* inner cards */
  --max-width: 1100px;
  --sidebar-width: 260px;
  --gap: 18px;
  --pad: 14px;
  --text: #111;
  --pink-light: #EBC7B5;  /* inner scroll boxes */
}

body {
      cursor: url('images/cursor.png'), auto;
}

body {
  font-family: 'Charm', cursive; /* for paragraphs */
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Emilys Candy', cursive; /* for headers */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color: var(--text);
  background: url("images/background.jpeg") repeat;
  padding:24px; /* space around the wrapper so red is visible */
  -webkit-font-smoothing:antialiased;
}

/* helper */
.visually-hidden {
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Site wrapper */
.site-wrapper{
  max-width:var(--max-width);
  margin:0 auto;
  display:block;
  gap:var(--gap);
}

/* HEADER / HERO */
.site-header{
  display:flex;
  gap:var(--gap);
  align-items:center;
  margin-bottom:var(--gap);
}

/* small decorative icon */
.brand img{ width:96px; height:auto; display:block; }

/* hero box (mid-brown) */
.hero{
  background:var(--mid-brown);
  flex:1;
  min-height:170px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--pad);
  border-radius:6px;
}

/* hero text */
.hero__title{
  margin:0;
  font-size: clamp(1.4rem, 2.2vw, 2.6rem);
  text-align:center;
}

/* NAV (pastel-red bar) */
.site-nav{
  background:var(--pastel-red);
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-radius:4px;
  flex-wrap:wrap;
  margin-bottom:var(--gap);
}
.site-nav .nav__list{ list-style:none; display:flex; gap:12px; padding:0; margin:0;}
.site-nav a{ text-decoration:none; color:var(--text); font-weight:600;}
.nav__right{ display:flex; gap:12px; align-items:center;}
.nav__search input{ padding:6px; border:1px solid rgba(0,0,0,0.15); border-radius:4px;}
.nav__search button{ padding:6px 8px;}

/* MAIN GRID */
.content-grid {
  display: grid;
  grid-template-columns: 250px 1fr 250px; /* left - center - right */
  gap: 1rem;
  margin: 1rem 0;
}

.center-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.main-column {
  background: white; /* temp so it stands out */
  padding: 1rem;
  border: 2px solid black; /* optional for testing */
}

/* site-buttons box */
.site-buttons {
  background: var(--pastel-red);
  padding: 1rem;
  text-align: center;
}

.site-buttons img {
  margin: 0.25rem;
}

/* Left + Right sidebars (outer pink) */
.sidebar {
  background: var(--pink-dark);
  padding: var(--pad);
  border-radius: 6px;
}

/* Inner boxes inside sidebars (lighter pink, scrollable) */
.sidebox {
  background: var(--pink-light);
  padding: 12px;
  margin-bottom: var(--gap);
  border-radius: 6px;
  min-height: 120px;   /* slightly taller */
  max-height: 220px;   /* sets the scrollable limit */
  overflow-y: auto;    /* allows vertical scroll if content exceeds max-height */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* Center stack containers (all dark pink) */
.center-stack > section {
  background: var(--pink-dark);
  padding: 1rem;
  border-radius: 6px;
}

.content-grid {
  display: grid;
  grid-template-columns: 250px 1fr 250px; /* left - center - right */
  gap: 1rem;
  margin: 1rem 0;
}

/* pastel-red intro box */
.box.intro{
  background:var(--pastel-red);
  padding:18px;
  border-radius:6px;
  margin-bottom:var(--gap);
}

/* mid-brown image slider placeholder */
.image-slider{
  background:var(--mid-brown);
  min-height:180px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-bottom:var(--gap);
}
.image-slider img{ max-width:100%; height:auto; display:block; }

/* two small scrollboxes inside a blue container look (we'll not nest full blue container for now) */
.two-cols{ display:grid; grid-template-columns: 1fr 1fr; gap:var(--gap); margin-bottom:var(--gap); }
.scrollbox{
  background:var(--purple);
  padding:12px;
  border-radius:6px;
  max-height:170px;
  overflow:auto;
}

/* CTA row (pastel-red) */
.cta-row{
  background:var(--pastel-red);
  padding:12px;
  border-radius:6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.btn{
  display:inline-block;
  background:#111;
  color:white;
  padding:8px 14px;
  border-radius:6px;
  text-decoration:none;
}

/* lyric scroller (pastel-red band) */
.lyric-scroller{
  background:var(--pastel-red);
  overflow:hidden;
  padding:8px 0;
  margin-bottom:var(--gap);
  border-radius:4px;
}
.marquee{ display:flex; gap:40px; align-items:center; white-space:nowrap; transform:translateX(0); animation:marquee 14s linear infinite; margin:0; padding:0 6px;}
.marquee span{ display:inline-block; padding-right:30px;}

/* promo row */
.promo-row{
  display:grid;
  grid-template-columns: 1fr 140px;
  gap:var(--gap);
  margin-bottom:var(--gap);
}
.promo__image{ background:var(--mid-brown); padding:20px; border-radius:6px; display:flex; align-items:center; justify-content:center; }
.promo__small-decor img{ width:120px; height:auto; display:block; }

/* footer */
.site-footer{ text-align:center; padding:12px; color:white; background:#222; border-radius:6px; }

/* simple small-screen responsiveness */
@media (max-width:1000px){
  .content-grid{
    grid-template-columns: 1fr;
  }
  .two-cols{ grid-template-columns: 1fr; }
  .promo-row{ grid-template-columns: 1fr; }
  .brand img{ width:72px; }
}

/* marquee animation ensures reduced motion safety */
@media (prefers-reduced-motion: reduce){
  .marquee { animation: none; }
}
@keyframes marquee{
  from{ transform: translateX(0%); }
  to{ transform: translateX(-50%); }
}

.image-slider {
  background: var(--dark-pink);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  max-width: 100%;
  height: 220px; /* adjust as needed */
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-slider img {
  max-width: 100%;
  height: auto;
  display: none;
}

.image-slider img.active {
  display: block;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.7);
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 50%;
}

.slider-btn.prev { left: 10px; }
.slider-btn.next { right: 10px; }