/* =========================================================
   Buckaffe – website stylesheet
   ---------------------------------------------------------
   FONT: Roc Grotesk via Adobe Fonts.
   Replace XXXXXXX below with the ID of your own Adobe Fonts
   web project (see the instructions you received).
   This line must stay the very first line of the file.
   ========================================================= */
@import url("https://use.typekit.net/XXXXXXX.css");

/* =========================================================
   COLOURS – your company colours.
   Change a value here and it changes on every page.
   ========================================================= */
:root {
  /* Brand colours */
  --brown: #5b4029;        /* headings, text, welcome area */
  --gold: #c0974f;         /* thin lines, highlights, icons */
  --green: #45594a;        /* buttons, dark band section */
  --sand: #e1ded3;         /* page background */

  /* Lighter / darker shades of the brand colours */
  --surface: #f1efe8;      /* cards (slightly lighter than background) */
  --sand-dark: #d5d1c3;    /* every second section */
  --line: #c9c3b2;         /* thin borders */
  --brown-dark: #2e2015;   /* footer */
  --text: #4a3422;         /* normal text (a bit darker than brand brown for easier reading) */
  --muted: #6f604f;        /* lighter text */

  --radius: 6px;
  --max-width: 1140px;
  --font: "roc-grotesk", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--sand);
}

img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }
a { color: var(--green); text-underline-offset: 3px; }
a:hover { color: var(--brown); }

h1, h2, h3 {
  font-family: var(--font);
  color: var(--brown);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.25rem; font-weight: 600; }
p  { margin: 0 0 1em; }

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }

/* Small label above headings, with a gold line */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--green); font-weight: 600; margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--gold); }

/* ---------- Header & menu ---------- */
.site-header {
  background: var(--sand);
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: 80px; padding-top: 6px; padding-bottom: 6px; }
.logo {
  color: var(--brown);
  font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em;
  text-decoration: none;
  display: flex; align-items: center; gap: 10px;
}
.logo:hover { color: var(--brown); }
.logo-cup { font-size: 1.5rem; }
.logo-img { height: 44px; width: auto; border-radius: 0; }   /* your logo size in the header */
.site-footer .logo-img { height: 90px; }                       /* logo size in the footer */

.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.main-nav a {
  display: block; padding: 10px 14px;
  color: var(--brown); text-decoration: none;
  font-weight: 500; font-size: .92rem;
  letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: var(--green); }
.main-nav a.active { border-bottom-color: var(--gold); }

.nav-toggle {
  display: none; background: none;
  border: 1px solid var(--brown); border-radius: var(--radius);
  color: var(--brown); font-size: 1.3rem; padding: 2px 12px; cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .main-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--sand); display: none; border-bottom: 1px solid var(--line); }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; padding: 8px 24px 18px; gap: 0; }
  .main-nav a { border-bottom: 1px solid var(--line); }
  .main-nav a.active { border-bottom-color: var(--gold); }
}

/* ---------- Big welcome area (home page) ---------- */
.hero {
  background: linear-gradient(135deg, #5b4029 0%, #3d2b1b 100%);
  /* To use a photo instead, replace the line above with:
     background: linear-gradient(rgba(46,32,21,.6), rgba(46,32,21,.6)), url("../images/hero.jpg") center / cover no-repeat; */
  color: var(--sand);
  padding: 140px 0 130px;
  text-align: center;
}
.hero h1 { color: #fff; max-width: 780px; margin: 0 auto .4em; }
.hero p { font-size: 1.2rem; color: var(--sand); max-width: 580px; margin: 0 auto 2.2em; }
.hero .eyebrow { color: var(--gold); }

/* Page title area on sub pages */
.page-banner { background: var(--sand-dark); padding: 80px 0 64px; text-align: center; border-bottom: 1px solid var(--line); }
.page-banner p { color: var(--muted); font-size: 1.15rem; margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 14px 30px; border-radius: var(--radius);
  font-family: var(--font); font-weight: 600; font-size: .9rem;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  background: var(--green); color: #fff; border: 1px solid var(--green);
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--brown); border-color: var(--brown); color: #fff; }
.btn-light { background: transparent; border-color: var(--sand); color: var(--sand); margin-left: 10px; }
.btn-light:hover { background: var(--sand); color: var(--brown); border-color: var(--sand); }
.btn-dark { background: var(--brown); border-color: var(--brown); }
.btn-dark:hover { background: var(--green); border-color: var(--green); }
.hero .btn { background: var(--gold); border-color: var(--gold); color: var(--brown-dark); }
.hero .btn:hover { background: var(--sand); border-color: var(--sand); color: var(--brown); }
.hero .btn-light { background: transparent; border-color: var(--sand); color: var(--sand); }
.hero .btn-light:hover { background: var(--sand); color: var(--brown); }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-alt { background: var(--sand-dark); }
.section-dark { background: var(--green); color: var(--sand); }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .btn { background: var(--gold); border-color: var(--gold); color: var(--brown-dark); }
.section-dark .btn:hover { background: var(--sand); border-color: var(--sand); color: var(--brown); }
.intro { max-width: 640px; color: var(--muted); margin: 0 auto 48px; }

.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 64px; align-items: center; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(46,32,21,.08); }
.card p:last-child { margin-bottom: 0; }
.card .emoji { font-size: 1.9rem; margin-bottom: 12px; }

/* Brown placeholder boxes (where photos will go) */
.photo {
  border-radius: var(--radius);
  min-height: 300px;
  display: grid; place-items: center;
  color: rgba(255,255,255,.85);
  font-size: .95rem; text-align: center; padding: 20px;
  background: linear-gradient(135deg, #7a5a3e, #5b4029);
}
.photo.small { min-height: 200px; }
.photo.alt1 { background: linear-gradient(135deg, #c0974f, #8a6a30); }
.photo.alt2 { background: linear-gradient(135deg, #5d7462, #45594a); }
.photo.alt3 { background: linear-gradient(135deg, #7a5a3e, #5b4029); }

/* ---------- Menu page ---------- */
.menu-category { margin-bottom: 64px; }
.menu-category h2 { border-bottom: 2px solid var(--gold); padding-bottom: 12px; margin-bottom: 20px; }
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; }
.menu-item .name { font-weight: 600; color: var(--brown); }
.menu-item .dots { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.menu-item .price { font-weight: 700; color: var(--green); white-space: nowrap; }
.menu-desc { color: var(--muted); font-size: .93rem; margin: -6px 0 6px; }
.tag { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; background: var(--green); color: #fff; margin-left: 8px; vertical-align: middle; }
.menu-note { font-size: .9rem; color: var(--muted); }

/* ---------- Opening hours ---------- */
.hours { width: 100%; border-collapse: collapse; }
.hours td { padding: 10px 0; border-bottom: 1px solid var(--line); }
.hours td:last-child { text-align: right; font-weight: 600; }

/* ---------- Gallery ---------- */
.gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
.gallery img { width: 100%; height: auto; }

/* ---------- Two photos side by side (Our Story) ---------- */
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.photo-pair img { width: 100%; height: auto; }
.story-text { max-width: none; margin-bottom: 40px; }

/* ---------- Review quote ---------- */
.quote { font-size: 1.4rem; font-weight: 500; color: var(--brown); line-height: 1.5; }
.quote-author { color: var(--muted); font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 12px; }

/* ---------- Legal pages ---------- */
.legal { max-width: 780px; }
.legal h2 { font-size: 1.35rem; margin-top: 1.6em; }
.notice { background: var(--surface); border-left: 3px solid var(--gold); padding: 14px 18px; border-radius: var(--radius); margin-bottom: 30px; font-size: .95rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--brown-dark); color: var(--sand); padding: 64px 0 28px; font-size: .95rem; }
.site-footer h3 { color: #fff; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.site-footer a { color: var(--gold); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 6px; }
.footer-bottom { border-top: 1px solid rgba(225,222,211,.15); margin-top: 40px; padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .88rem; }

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  .section { padding: 64px 0; }
  .hero { padding: 96px 0 88px; }
  .btn-light { margin: 12px 0 0; }
  .photo-pair { grid-template-columns: 1fr; }
}

/* Home page cards: 3 per row */
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Tablets: 2 per row, phones: 1 per row */
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .grid-3 { grid-template-columns: 1fr; }
}