/* ========== Pizza Island Extended Theme ========== */

/* Sections & backgrounds */
.halftone{
  background:
    radial-gradient(circle at 0 0, rgba(0,0,0,.08) 2px, transparent 3px) 0 0/12px 12px,
    linear-gradient(var(--pi-cream), var(--pi-cream));
}

/* Grids & cards */
.pi-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)) }
.pi-card{
  background:#fff; border:3px solid var(--pi-ink); border-radius:18px; padding:1rem 1.1rem;
  box-shadow:6px 6px 0 0 var(--pi-ink-80);
  transition: transform .12s ease, box-shadow .12s ease;
  background-image: radial-gradient(circle at 12px 12px, rgba(0,0,0,.03) 2px, transparent 0) 0 0/14px 14px;
}
.pi-card:hover{ transform:translate(-2px,-2px); box-shadow:10px 10px 0 0 var(--pi-ink) }
.stars{ color:#ffb703; font-size:1.05rem; text-shadow:1px 1px 0 var(--pi-ink-80) }
.pi-meta{ font-size:.92rem; opacity:.9 }

/* ===== Footer (improved) ===== */

/* Wrapper */
.pi-footer{
  background:var(--pi-offblack);
  color:var(--pi-text);
  border-top:1px solid var(--pi-dark-border);
  margin-top:2rem;
}
.pi-footer__container{ max-width:var(--container); margin:0 auto; padding:1.25rem 1rem }

/* Top bar */
.pi-footer__top{
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between;
  margin-bottom:1rem;
}
.pi-footer__logo{ color:#fff; text-decoration:none; font-weight:700; font-size:1.25rem }
.pi-footer__tagline{ color:var(--pi-text-muted); font-size:.95rem; margin-top:.25rem }
.pi-footer__cta{
  display:inline-block; background:#fff; color:var(--pi-offblack); border-radius:8px; padding:.6rem .9rem;
  text-decoration:none; font-weight:600; border:2px solid #fff;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
  box-shadow:4px 4px 0 0 rgba(255,255,255,.15);
}
.pi-footer__cta:hover{
  transform:translate(-2px,-2px); box-shadow:8px 8px 0 0 rgba(255,255,255,.15);
  background:var(--pi-yellow); color:var(--pi-ink); border-color:var(--pi-ink);
}

/* Columns (switch to FLEX for consistent horizontal alignment & equal heights) */
.pi-footer__cols{
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:stretch; /* ensures all cards line up visually */
}
.pi-footer__col{
  flex:1 1 280px;        /* 3-ish columns on wide screens, stack on small */
  min-width:0;           /* prevent overflow */
  display:flex; flex-direction:column; justify-content:flex-start;
  background:var(--pi-dark-1); border:1px solid var(--pi-dark-border);
  border-radius:8px; padding:1rem;
}
.pi-footer__list a {margin:0}

@media (min-width: 1080px){
  .pi-footer__col{ flex-basis: calc(33.333% - .667rem); }
}

/* Headings & lists */
.pi-footer__heading{ margin:.25rem 0 .5rem; color:#fff; font-size:1rem }
.pi-footer__list{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem }
.pi-footer__socials{ list-style:none; margin:0 0 .75rem 0; padding:0; display:flex; gap:.6rem; flex-wrap:wrap }

/* Links */
.pi-footer__link,
.pi-footer__link:link,
.pi-footer__link:visited{ color:var(--pi-text); text-decoration:none }
.pi-footer__link:hover{ color:#fff; text-decoration:none }
.pi-footer__link--muted{ color:var(--pi-text-muted) }
.pi-footer__link--muted:hover{ color:var(--pi-text) }

/* Bottom bar */
.pi-footer__bottom{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:space-between;
  margin-top:1rem; padding-top:.75rem; border-top:1px solid var(--pi-dark-border);
  color:var(--pi-text-muted); font-size:.9rem;
}
.pi-footer__bottom-links{ display:flex; align-items:center; gap:.5rem }

/* Utility */
@media (prefers-reduced-motion: reduce){
  .pi-footer__cta, .pi-card, .pi-chip, .pi-btn{ transition:none !important; animation:none !important }
}

/* Home: About/Story section */
.pi-about { margin: 2rem 0; }
.pi-about__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .pi-about__grid { grid-template-columns: repeat(3, 1fr); }
}

.pi-bubble {
  background: #fff;
  border: 2px solid #eee;         /* a tad thicker for a cartoony outline */
  border-radius: 16px;            /* chunky corners */
  padding: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.pi-bubble--hero {
  border-width: 3px;
  border-radius: 20px;
  padding: 1.25rem;
  margin-bottom: .75rem;
}

.pi-bubble__eyebrow {
  display: inline-block;
  font-size: .9rem;
  color: #555;
  margin-bottom: .25rem;
}
.pi-bubble__title {
  margin: .1rem 0 .4rem;
}
.pi-bubble__lead {
  font-size: 1.05rem;
  color: #333;
}

.pi-bubble__subtitle {
  margin: .15rem 0 .35rem;
}

.pi-badge {
  display: inline-block;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: .85rem;
  color: #555;
  margin-bottom: .35rem;
}

.pi-bubble__cta { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.pi-chiplink {
  display: inline-block;
  padding: .35rem .65rem;
  border-radius: 999px;
  border: 1px solid #e6e6e6;
  background: #f9f9f9;
  text-decoration: none;
  color: #222;
  font-size: .95rem;
}
.pi-chiplink:hover { background: #f3f3f3; border-color: #dcdcdc; }

/* Anchor target for "Browse by town" */
#browse { scroll-margin-top: 80px; }