/* ===== Base ===== */
:root{
  --cranberry:#8B1E3F;
  --navy:#191B48;
  --gold:#E3C16F;
  --ink:#1B2235;
  --paper:#FAF9F6;
  --white:#FFFFFF;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{ margin:0 0 .5rem; line-height:1.2; }
h1,h2{ font-family:'Playfair Display', serif; }

/* ===== Containers & Sections ===== */
.container{ max-width:1100px; margin:0 auto; padding:0 20px; }
.section{ padding:2.5rem 0; }
.intro{ text-align:center; }

/* ===== Hero (full-screen Canva cover) ===== */
.hero{
  min-height:100vh;
  background:url('images/holiday-cover.png') center center / cover no-repeat fixed;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  color:var(--white);
}
.hero::after{
  /* subtle vignette edges for depth */
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%);
}
.overlay{
  position:relative; z-index:1;
  background:rgba(0,0,0,.45);
  padding:1.5rem 2rem; border-radius:12px;
  backdrop-filter:saturate(120%) blur(2px);
}
.hero-title{ font-size: clamp(2rem, 4vw, 3rem); margin-bottom:.35rem; }
.hero-subtitle{ font-size: clamp(1rem, 2.2vw, 1.25rem); margin-bottom:1rem; }

/* ===== Buttons ===== */
.button{
  display:inline-block; text-decoration:none;
  background:var(--navy); color:var(--white);
  padding:.8rem 1.2rem; border-radius:10px; font-weight:700;
  transition:transform .08s ease, filter .15s ease;
}
.button:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.button:active{ transform:translateY(0); }
.button-light{ background:var(--gold); color:#2b2b2b; }
.button-small{ padding:.55rem .9rem; font-weight:600; font-size:.95rem; }

/* ===== Category Nav ===== */
.category-nav{
  display:flex; gap:.75rem; flex-wrap:wrap;
  justify-content:center; padding:1rem 0 0;
}
.category-nav a{
  color:var(--navy); text-decoration:none; font-weight:700;
  padding:.4rem .75rem; border-radius:999px; background:#fff;
  border:1px solid rgba(0,0,0,.08);
}
.category-nav a:hover{ background:#f1f1f4; }

/* ===== Cards ===== */
.category-heading{
  margin:2rem 0 .75rem;
  font-size:1.35rem; color:var(--navy);
  border-left:6px solid var(--gold); padding-left:.5rem;
}

.card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:18px;
}
.business-card{
  background:#fff; border-radius:16px; padding:1rem 1rem 1.2rem;
  box-shadow:0 14px 32px rgba(0,0,0,.08);
  display:flex; flex-direction:column; gap:.6rem;
}
.business-card img{ width:100%; border-radius:12px; }
.business-card h4{ margin:.25rem 0 0; font-size:1.1rem; }
.business-card p{ margin:0 0 .3rem; }

/* ===== Footer ===== */
footer{ background:var(--navy); color:var(--white); }
.footer-inner{
  display:flex; gap:1rem; align-items:center; justify-content:space-between;
  padding:1rem 0;
}
.to-top{ color:var(--white); text-decoration:none; opacity:.9; }
.to-top:hover{ text-decoration:underline; }

/* ===== Responsive tweaks ===== */
@media (max-width: 640px){
  .overlay{ padding:1rem 1.25rem; }
}
.hero-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}