/*
  Global stylesheet for the Teff Cake Company website.

  This file defines a warm, artisanal colour palette and modern
  typography to showcase our healthy teff‑based bakes. It includes
  responsive layouts for the hero banner, cake gallery, story preview
  and contact form. The styles are designed to feel inviting and
  professional on both desktop and mobile screens.
*/

:root {
  --bg-color: #fffaf5; /* soft off‑white background */
  --primary-color: #a86b2e; /* caramel for buttons and highlights */
  --secondary-color: #5b3a1f; /* dark caramel for headings and accents */
  --text-color: #3a2f28; /* deep brown for body copy */
  --paper-bg: #fff7e8; /* parchment style panel background */
  --border-color: #e8d9c8; /* subtle border colour */
  --btn-gradient-start: #a86b2e;
  --btn-gradient-end: #5b3a1f;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
}

/* --- Header and navigation --- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--border-color);
}

nav {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 86px;
}

nav .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-color);
}

nav .brand img {
  height: 81px;
  width: auto;
  border-radius: 37px;
}

nav .brand span {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
}

nav .links a {
  margin-left: 24px;
  text-decoration: none;
  color: var(--text-color);
  font-weight: 600;
  position: relative;
}

nav .links a::after {
  content: "";
  display: block;
  width: 0%;
  height: 2px;
  background: var(--primary-color);
  transition: width .3s ease;
  position: absolute;
  bottom: -4px;
  left: 0;
}

nav .links a:hover::after {
  width: 100%;
}

/* --- Hero section --- */
.hero {
  position: relative;
  background: url('../images/hero-bg.png') center/cover no-repeat;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  min-height: 70vh;
}

.hero.small {
  min-height: 40vh;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.5));
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: auto;
  padding: 60px 20px;
}

.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 6vw, 3.5rem);
  margin-bottom: 16px;
  line-height: 1.2;
}

.hero p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto 28px;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 10px;
  background: linear-gradient(to bottom, var(--btn-gradient-start), var(--btn-gradient-end));
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(168,107,46,.4);
  transition: transform .15s ease;
  margin-top: 10px;
}

.btn:hover {
  transform: translateY(-2px);
}

/* --- Sections --- */
section {
  padding: 40px 20px;
}

section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  margin-bottom: 8px;
  text-align: center;
  color: var(--secondary-color);
}

section .sub {
  text-align: center;
  margin-bottom: 40px;
  color: #6b5a4f;
  margin-top: 5px;
}

section .sub-highlight {
  text-align: center;
  margin-bottom: 5px;
  color: #6b5a4f;
}

section .sub-highlight p {
  margin-top: 5px;
}

/* --- Cake gallery --- */
.cakes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.card {
  background: var(--paper-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  transition: transform .2s ease;
}

.card:hover {
  transform: translateY(-4px);
}

.card img {
  width: 100%;
  height: 340px;
  object-fit: contain;
  display: block;
  margin-top: 25px;
  border-radius: 16px;
}

.card .caption {
  padding: 16px;
  font-weight: 600;
  color: var(--secondary-color);
}

/* --- About preview / Philosophy section --- */
.about-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

#about-preview {
  padding-top: 5px;
}

.about-preview .text {
  flex: 1 1 350px;
  background: var(--paper-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}

.about-preview .text p {
  margin-bottom: 16px;
}

.about-preview .about-link {
  margin-top: 16px;
  display: inline-block;
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: underline;
}

/* --- Story article on about page --- */
.story {
  max-width: 800px;
  margin: 0 auto;
  background: var(--paper-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 40px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}

.story p {
  margin-bottom: 18px;
}

/* --- Contact form --- */
.contact-form {
  max-width: 700px;
  margin: 0 auto;
  background: var(--paper-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}

.contact-tel {
  max-width: 700px;
  margin: 0 auto;
  margin-bottom: 8px;
  background: var(--paper-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}

.contact-tel a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
}

.contact-email {
  max-width: 700px;
  margin: 0 auto;
  margin-bottom: 8px;
  background: var(--paper-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 4px;
  padding-left: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}

.contact-form .field-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.contact-form label {
  flex: 1 1 250px;
  display: flex;
  flex-direction: column;
  font-weight: 600;
  color: var(--secondary-color);
}

.contact-form input,
.contact-form textarea {
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #d9c8b4;
  font: inherit;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

/* --- Footer --- */
footer {
  background: var(--secondary-color);
  color: #f5eee7;
  padding: 30px 20px;
  text-align: center;
}

footer .footer-inner {
  max-width: 1100px;
  margin: 0 auto;
}

footer a {
  color: var(--primary-color);
  text-decoration: none;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .about-preview {
    flex-direction: column;
  }
  nav {
    position: relative;
  }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: auto;
    z-index: 100;
  }
  .nav-toggle .bar {
    display: block;
    width: 28px;
    height: 4px;
    background: var(--secondary-color);
    border-radius: 2px;
    transition: all 0.3s;
  }
  nav .links {
    display: none;
    position: absolute;
    top: 70px;
    right: 20px;
    background: #fffaf5;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    flex-direction: column;
    min-width: 160px;
    padding: 16px 0;
    z-index: 99;
  }
  nav .links.open {
    display: flex;
  }
  nav .links a {
    margin: 0;
    padding: 12px 24px;
    font-size: 1.1rem;
    color: var(--secondary-color);
    border: none;
    background: none;
    text-align: left;
  }
  .nav-toggle {
    /* show hamburger on mobile */
  }
}

/* Hide nav-toggle on desktop */
@media (min-width: 769px) {
  .nav-toggle {
    display: none;
  }
  nav .links {
    display: flex !important;
    position: static;
    flex-direction: row;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: unset;
  }
  nav .links a {
    padding: 0;
    margin-left: 24px;
    font-size: 1rem;
  }
}

.reference {
  font-size: 14px;
  background-color: #eee;
}

.ref-link {
  text-decoration: none;
  color: var(--primary-color);
}

.subText {
  font-size: 14px;
}
.row {
  margin-top: 20px;
}

.price {
  font-family: 'Inter', sans-serif;
  font-weight: 600;   /* semi-bold for emphasis */

}

.small {
    margin-bottom: 1px;
    padding-bottom: 0px;
    padding-top: 0px;
    margin-top: 0px;
}

.text-grid {
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Per-card ingredients toggle */
.card .ing {
  margin-top: 0.5rem;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 0.25rem 0.5rem;
  background: #fff;
}

.card .ing > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.6rem 0.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card .ing > summary::-webkit-details-marker { display: none; }

/* Chevron indicator */
.card .ing > summary::before {
  content: "▸";
  display: inline-block;
  transform: translateY(-1px);
  transition: transform 0.2s ease;
  margin-right: 0.25rem;
  opacity: 0.7;
}
.card .ing[open] > summary::before { transform: rotate(90deg) translateY(-1px); }

/* Ingredient list */
.card .ing ul {
  margin: 0 0 0.6rem 1.25rem;
  padding: 0 0 0.5rem 0;
}
.card .ing li { margin: 0.15rem 0; }

/* Keep spacing tidy on small cards */
.cakes-grid .card .caption { margin-bottom: 0.25rem; }

/* ===========================
   Where to Find Us — Events
   =========================== */

/* A gentle paper panel background for the page body (optional) */
.events-page {
  background:
    radial-gradient(1100px 500px at 10% -10%, rgba(168,107,46,.06), transparent 60%),
    var(--bg-color);
}

/* Page header (optional section title helper) */
.events-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 16px;
  padding: 0 20px;
}
.events-header .kicker {
  color: #6b5a4f;
  font-weight: 600;
  margin-bottom: 8px;
}
.events-header h1 {
  font-family: 'Playfair Display', serif;
  color: var(--secondary-color);
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.2;
  margin: 0 0 10px;
}

/* ----- Controls / Filters row ----- */
.events-controls {
  max-width: 1100px;
  margin: 0 auto 12px;
  padding: 0 20px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
.events-controls .field {
  display: grid;
  gap: 6px;
}
.events-controls label {
  font-weight: 600;
  color: var(--secondary-color);
  font-size: 0.95rem;
}
.events-controls input[type="search"],
.events-controls select {
  appearance: none;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--text-color);
  font: inherit;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.events-controls input[type="search"]::placeholder {
  color: #9d8776;
}
.events-controls input[type="search"]:focus,
.events-controls select:focus {
  border-color: #d9c8b4;
  box-shadow: 0 0 0 3px rgba(168,107,46,.18);
}

@media (min-width: 760px) {
  .events-controls {
    grid-template-columns: 1.2fr .9fr .9fr .7fr;
    align-items: end;
  }
}

/* ----- Results / empty state ----- */
.events-results {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 20px 48px;
}
.events-empty {
  margin: 16px 0 8px;
  padding: 18px;
  border-radius: 12px;
  background: var(--paper-bg);
  border: 1px dashed var(--border-color);
  color: #6b5a4f;
  text-align: center;
}

/* ----- Grid of event cards ----- */
.event-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .event-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px) {
  .event-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.events-page {
  margin-top: 35px;
}
/* ----- Individual event card (separate from .card used by gallery) ----- */
.event-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 220px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}

/* Top band with the date and a small status badge */
.event-card .dateband {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #fff3e2, #fff);
  border-bottom: 1px solid var(--border-color);
  font-weight: 700;
  color: var(--secondary-color);
}
.event-card .datechip {
  background: #00000008;
  border: 1px solid #00000010;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .2px;
  font-weight: 700;
  white-space: nowrap;
}
.event-card .badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff4ec;
  border: 1px solid #ffd8c2;
  color: #8b4c22;
  font-weight: 700;
  font-size: .8rem;
}

/* Main content */
.event-card .content {
  padding: 14px;
  display: grid;
  gap: 8px;
}
.event-card .title {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--secondary-color);
}
.event-card .where {
  color: #6b5a4f;
}
.event-card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .95rem;
  color: #6b5a4f;
}

/* Actions row */
.event-card .actions {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px dashed var(--border-color);
  flex-wrap: wrap;
}

/* Button variants that match your palette (reuses .btn) */
.btn.secondary {
  background: #fff;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  box-shadow: none;
}
.btn.secondary:hover {
  transform: translateY(-2px);
}
.btn.ghost {
  background: transparent;
  color: var(--primary-color);
  border: 1px solid transparent;
  box-shadow: none;
}
.btn.ghost:hover {
  background: #fff7e8;
  transform: translateY(-2px);
}

/* Utility: visually hidden text for a11y */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Optional: small helper to align a compact note under the grid */
.events-note {
  max-width: 1100px;
  margin: 12px auto 0;
  padding: 0 20px;
  color: #6b5a4f;
  font-size: 0.95rem;
}

/* Slightly tighter section spacing on this page */
.events-section {
  padding-top: 24px;
  padding-bottom: 36px;
}