/* ===========================
   The Chilled Beans — Retro Coffee Shop Theme
   A 1970s neighbourhood café: warm paper, espresso ink, burnt orange,
   mustard and avocado, striped awnings and chunky offset type.
   Fonts (load in each page's <head>):
   https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,900&family=Pacifico&family=Work+Sans:wght@400;500;600;700&display=swap
   =========================== */

:root {
  /* Palette */
  --espresso: #3b2218;
  --mocha: #6b3e26;
  --caramel: #cf6f2c;
  --mustard: #e6a93a;
  --avocado: #8a8d3c;
  --teal: #2f6f6a;
  --cherry: #b5412d;
  --cream: #f4e6c9;
  --foam: #fcf5e6;

  /* Older names used by tierlist.css and the pages */
  --coffee-dark: var(--espresso);
  --coffee-medium: var(--mocha);
  --coffee-light: #d9b48a;
  --coffee-cream: var(--cream);
  --coffee-accent: var(--mustard);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-script: "Pacifico", "Brush Script MT", cursive;
  --font-body: "Work Sans", "Segoe UI", system-ui, sans-serif;

  --shadow-hard: 5px 5px 0 var(--espresso);

  /* Faint paper grain */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .13 0 0 0 0 .09 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Body */
body {
  background-color: var(--cream);
  background-image: var(--paper-grain);
  color: var(--espresso);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5,
.display-5 {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--espresso);
  letter-spacing: -0.01em;
}

a {
  color: var(--caramel);
}

a:hover {
  color: var(--cherry);
}

::selection {
  background: var(--mustard);
  color: var(--espresso);
}

/* ===========================
   Navbar + Awning
   =========================== */
.navbar {
  background-color: var(--espresso) !important;
  padding-block: 10px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-script);
  font-size: 1.7rem;
  color: var(--cream) !important;
}

.navbar-brand svg {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.nav-link {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cream) !important;
  border-bottom: 3px solid transparent;
}

.nav-link:hover {
  color: var(--mustard) !important;
}

.nav-link.active {
  color: var(--mustard) !important;
  border-bottom-color: var(--mustard);
}

.navbar-toggler {
  border-color: var(--cream);
}

/* Striped café awning with a scalloped edge */
.awning {
  height: 34px;
  background: repeating-linear-gradient(90deg, var(--cherry) 0 44px, var(--foam) 44px 88px);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 14px) no-repeat,
    radial-gradient(circle at 22px 0, #000 21.5px, transparent 22.5px) bottom left / 44px 14px repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 14px) no-repeat,
    radial-gradient(circle at 22px 0, #000 21.5px, transparent 22.5px) bottom left / 44px 14px repeat-x;
  filter: drop-shadow(0 3px 0 rgba(59, 34, 24, 0.25));
}

/* ===========================
   Hero / Page Header
   =========================== */
header.hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 56px;
  text-align: center;
  border-bottom: 4px solid var(--espresso);
  background:
    radial-gradient(ellipse at 50% 120%, transparent 30%, var(--cream) 72%),
    repeating-conic-gradient(from 0deg at 50% 120%, rgba(230, 169, 58, 0.55) 0 5deg, transparent 5deg 10deg),
    var(--cream);
}

.hero-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 16px;
  border: 2px solid var(--espresso);
  border-radius: 999px;
  background: var(--mustard);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  box-shadow: 3px 3px 0 var(--espresso);
}

header.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  line-height: 1.15;
  color: var(--caramel);
  /* stacked retro offset */
  text-shadow: 3px 3px 0 var(--mustard), 6px 6px 0 var(--espresso);
  margin-bottom: 14px;
}

/* a lighter offset on phones so wrapped lines don't crowd each other */
@media (max-width: 576px) {
  header.hero h1 {
    text-shadow: 2px 2px 0 var(--mustard), 4px 4px 0 var(--espresso);
  }
}

header.hero .lead {
  max-width: 640px;
  margin: 0 auto;
  color: var(--mocha) !important;
  font-weight: 500;
}

/* Section heading with a script kicker, e.g. "Now Brewing / Movie Tier List" */
.section-title {
  text-align: center;
  margin-bottom: 8px;
}

.section-title .kicker {
  display: block;
  font-family: var(--font-script);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--caramel);
  transform: rotate(-3deg);
}

/* ===========================
   Cards (menu boards)
   =========================== */
.card {
  background-color: var(--foam);
  border: 3px solid var(--espresso);
  border-radius: 14px;
  box-shadow: var(--shadow-hard) !important;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* equal heights across a row, but only when the card is alone in its column
   (stacked cards, like on About, keep their natural height) */
.row > [class*="col"] > .card:only-child {
  height: 100%;
}

.card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--espresso) !important;
}

.card-body {
  padding: 22px;
}

.card-title {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--espresso);
}

/* dotted rule like a printed menu */
.card-title::after {
  content: "";
  display: block;
  width: 48px;
  margin-top: 8px;
  border-bottom: 3px dotted var(--caramel);
}

.card-text {
  color: var(--mocha);
}

.card-img-top {
  border-bottom: 3px solid var(--espresso);
}

/* Photo spot for members/gallery until real photos are added */
.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(45deg, rgba(207, 111, 44, 0.12) 0 12px, transparent 12px 24px),
    var(--cream);
  border-bottom: 3px solid var(--espresso);
  color: var(--mocha);
  font-family: var(--font-script);
  font-size: 1.15rem;
}

.photo-placeholder svg {
  width: 44px;
  height: 44px;
  opacity: 0.7;
}

/* ===========================
   Buttons (chunky, pressable)
   =========================== */
.btn {
  border-radius: 999px;
  font-weight: 700;
  border-width: 2px;
}

.btn-primary {
  --bs-btn-color: var(--foam);
  --bs-btn-bg: var(--caramel);
  --bs-btn-border-color: var(--espresso);
  --bs-btn-hover-color: var(--foam);
  --bs-btn-hover-bg: var(--cherry);
  --bs-btn-hover-border-color: var(--espresso);
  --bs-btn-active-color: var(--foam);
  --bs-btn-active-bg: var(--cherry);
  --bs-btn-active-border-color: var(--espresso);
  --bs-btn-disabled-color: var(--foam);
  --bs-btn-disabled-bg: var(--caramel);
  --bs-btn-disabled-border-color: var(--espresso);
  box-shadow: 3px 3px 0 var(--espresso);
}

.btn-primary:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

/* ===========================
   More Buttons & Inputs
   =========================== */
.btn-secondary {
  --bs-btn-color: var(--espresso);
  --bs-btn-bg: var(--foam);
  --bs-btn-border-color: var(--espresso);
  --bs-btn-hover-color: var(--espresso);
  --bs-btn-hover-bg: var(--mustard);
  --bs-btn-hover-border-color: var(--espresso);
  --bs-btn-active-color: var(--espresso);
  --bs-btn-active-bg: var(--mustard);
  --bs-btn-active-border-color: var(--espresso);
  box-shadow: 3px 3px 0 var(--espresso);
}

.btn-danger {
  --bs-btn-bg: var(--cherry);
  --bs-btn-border-color: var(--espresso);
  --bs-btn-hover-bg: #8e2f1f;
  --bs-btn-hover-border-color: var(--espresso);
  --bs-btn-active-bg: #8e2f1f;
  --bs-btn-active-border-color: var(--espresso);
  box-shadow: 3px 3px 0 var(--espresso);
}

.btn-secondary:active,
.btn-danger:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

.btn-outline-secondary {
  --bs-btn-color: var(--mocha);
  --bs-btn-border-color: var(--mocha);
  --bs-btn-hover-bg: var(--cream);
  --bs-btn-hover-color: var(--espresso);
  --bs-btn-hover-border-color: var(--espresso);
}

.form-control,
.form-select {
  border: 2px solid var(--espresso);
  background-color: var(--foam);
  color: var(--espresso);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--espresso);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(230, 169, 58, 0.6);
}

.form-control.is-invalid {
  border-color: var(--cherry);
}

.form-check-input,
input[type="checkbox"] {
  accent-color: var(--caramel);
}

/* ===========================
   Footer with 70s stripes
   =========================== */
footer {
  position: relative;
  margin-top: 64px;
  padding-top: 40px !important;
  background-color: var(--espresso) !important;
  color: var(--cream) !important;
}

footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 18px;
  background: linear-gradient(var(--mustard) 0 33%, var(--caramel) 33% 66%, var(--cherry) 66%);
}

footer .footer-brand {
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: var(--mustard);
  margin-bottom: 2px;
}

footer p {
  font-size: 0.9rem;
}

/* Coffee Bean Divider */
.bean-divider {
  width: 100%;
  text-align: center;
  margin: 30px 0;
  color: var(--mocha);
  font-size: 1.2rem;
}

.bean-divider::after {
  content: "☕ • • •";
  letter-spacing: 8px;
}