/* Home Page Main Stylesheet by Michael Odeleye - coffee cup catering site */

/* ── Google Fonts Import ── */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Barlow:ital,wght@0,300;0,400;0,600;1,700;1,800&display=swap');

/* CSS VARIABLES — Colors, Fonts, Spacing */
:root {
  --color-black:       #111111;
  --color-dark:        #1a1a1a;
  --color-dark-card:   #222222;
  --color-white:       #ffffff;
  --color-off-white:   #f5f5f5;
  --color-accent:      #c8a96e;       /* warm gold accent */
  --color-accent-dark: #a8893e;
  --color-text-muted:  #aaaaaa;
  --color-border:      rgba(255,255,255,0.25);
  --color-wm:          rgba(255,255,255,0.045); /* watermark text */

  --font-heading:  'Oswald', sans-serif;
  --font-body:     'Barlow', sans-serif;

  --nav-height: 90px;
  --max-width:  1200px;

  --transition: 0.3s ease;
}

/* RESET & BASE  */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* UTILITY CLASSES */

/* Container */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

/* Section padding */
.section-pad {
  padding: 80px 0;
}

/* WATERMARK BACKGROUND - Used on light/grey sections between dark sections */
.watermark-bg {
  position: relative;
  background-color: #f0eeeb;
  overflow: hidden;
}

/* Watermark text layer */
.watermark-bg::before {
  content:
    "COFFEE   CUP   CATERING        COFFEE   CUP   CATERING        COFFEE   CUP   CATERING\A"
    "CATERING   COFFEE   CUP        CATERING   COFFEE   CUP        CATERING   COFFEE   CUP\A"
    "CUP   CATERING   COFFEE        CUP   CATERING   COFFEE        CUP   CATERING   COFFEE\A"
    "COFFEE   CUP   CATERING        COFFEE   CUP   CATERING        COFFEE   CUP   CATERING\A"
    "CATERING   COFFEE   CUP        CATERING   COFFEE   CUP        CATERING   COFFEE   CUP\A"
    "CUP   CATERING   COFFEE        CUP   CATERING   COFFEE        CUP   CATERING   COFFEE\A"
    "COFFEE   CUP   CATERING        COFFEE   CUP   CATERING        COFFEE   CUP   CATERING\A"
    "CATERING   COFFEE   CUP        CATERING   COFFEE   CUP        CATERING   COFFEE   CUP\A"
    "CUP   CATERING   COFFEE        CUP   CATERING   COFFEE        CUP   CATERING   COFFEE\A"
    "COFFEE   CUP   CATERING        COFFEE   CUP   CATERING        COFFEE   CUP   CATERING\A"
    "CATERING   COFFEE   CUP        CATERING   COFFEE   CUP        CATERING   COFFEE   CUP\A"
    "CUP   CATERING   COFFEE        CUP   CATERING   COFFEE        CUP   CATERING   COFFEE";
  white-space: pre;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 4px;
  color: rgba(0,0,0,0.06);
  pointer-events: none;
  z-index: 0;
  line-height: 2.2;
}

/* Ensure children stack above watermark */
.watermark-bg > * {
  position: relative;
  z-index: 1;
}

/* HEADER / NAVIGATION */
.site-header {
  background-color: var(--color-black);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

/* Logo */
.logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-main {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-white);
}

.logo-sub {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: 2px;
}

/* Nav links */
.site-nav {
  display: flex;
  align-items: center;
  gap: 48px;
}

.site-nav a {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

/* Nav hover effect */
.site-nav a:hover,
.site-nav a.active {
  color: var(--color-white);
  border-bottom-color: var(--color-accent);
}

/* Search icon */
.nav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition);
}

.nav-search:hover {
  color: var(--color-white);
}

.nav-search span {
  font-size: 20px;
}

/* HERO SECTION */
.hero {
  background-color: var(--color-black);
  min-height: 380px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 60px 0;
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 40px;
}

.hero-content {
  flex: 1;
  max-width: 500px;
}

/* Hero headline */
.hero-title {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 800;
  font-size: 52px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 36px;
  letter-spacing: 1px;
}

/* Hero buttons row */
.hero-buttons {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* Hero media */
.hero-media {
  flex-shrink: 0;
  width: 420px;
  height: 280px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Images */
.img-placeholder {
  background-color: #2a2a2a;
  border: 2px dashed rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}

/* BUTTONS */

/* Primary outlined button (ORDER NOW style) */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-white);
  border: 2px solid var(--color-white);
  padding: 12px 28px;
  background: transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

/* Outlined button hover */
.btn-outline:hover {
  background-color: var(--color-white);
  color: var(--color-black);
  transform: translateY(-2px);
}

/* Filled dark button (COFFEE INFO style) */
.btn-filled {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: #333333;
  border: 2px solid #333333;
  padding: 12px 28px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

/* Filled button hover */
.btn-filled:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-black);
  transform: translateY(-2px);
}

/* Gold accent button (MEET US, MENUS style) */
.btn-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: var(--color-black);
  border: none;
  padding: 10px 24px;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

/* Tag button hover */
.btn-tag:hover {
  background-color: var(--color-accent);
  color: var(--color-black);
  transform: translateX(4px);
}

/* Arrow navigation buttons */
.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--color-black);
  color: var(--color-white);
  border: none;
  font-size: 18px;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

/* Arrow button hover */
.btn-arrow:hover {
  background-color: var(--color-accent);
  color: var(--color-black);
  transform: scale(1.1);
}

/* Arrow buttons on light sections */
.btn-arrow-dark {
  background-color: var(--color-dark);
}

.btn-arrow-dark:hover {
  background-color: var(--color-accent);
}

/* HOME — INFO / MEET US SECTION */
.info-section {
  padding: 80px 0;
}

.info-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Right info block (text side) */
.info-text-block {
  background-color: rgba(255,255,255,0.92);
  color: var(--color-black);
  padding: 40px;
}

.info-text-block .btn-tag {
  margin-bottom: 20px;
}

.info-text-block p {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}

/* Info image */
.info-img-placeholder {
  width: 100%;
  height: 320px;
}

/* HOME — MENUS SECTION (reversed layout) */
.menus-section {
  padding: 0 0 80px 0;
}

.menus-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.menus-img-wrap {
  position: relative;
}

.menus-img- {
  width: 100%;
  height: 300px;
}

.menus-btn-overlay {
  position: absolute;
  bottom: 20px;
  right: -20px;
}

/* HOME — BEST SELLERS SECTION */
.best-sellers {
  background-color: var(--color-dark);
  padding: 80px 0;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-white);
  margin-bottom: 50px;
}

/* Product cards grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}

/* Individual product card */
.product-card {
  background-color: var(--color-dark-card);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}

/* Product card hover effect */
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}

.product-card:hover .product-name {
  background-color: var(--color-accent);
  color: var(--color-black);
}

/* Product image */
.product-img {
  width: 100%;
  height: 200px;
}

/* Product name bar */
.product-name {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 14px 16px;
  background-color: #2a2a2a;
  color: var(--color-white);
  transition: background var(--transition), color var(--transition);
}

/* Product order button */
.product-order {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.product-order .btn-outline {
  width: 100%;
  justify-content: center;
  font-size: 12px;
  padding: 10px 20px;
}

/* Arrow navigation row */
.slider-arrows {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

/* HOME — CUSTOMER REVIEWS SECTION */
.reviews-section {
  background-color: var(--color-dark);
  padding: 80px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.reviewer-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #888;
  margin: 0 auto 24px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
}

/* Review carousel wrapper */
.review-carousel {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

/* Review box */
.review-box {
  flex: 1;
  background-color: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 36px 40px;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-box p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
}

/* Review arrow buttons */
.review-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition);
}

.review-arrow:hover {
  background-color: var(--color-accent);
  color: var(--color-black);
  transform: scale(1.1);
}

/* FOOTER */
.site-footer {
  background-color: #0d0d0d;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 50px 0 30px;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.footer-brand .logo-main {
  font-size: 18px;
}

.footer-brand .logo-sub {
  font-size: 10px;
}

.footer-brand p {
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-text-muted);
  max-width: 260px;
  line-height: 1.7;
}

.footer-nav h4 {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}

.footer-nav ul li {
  margin-bottom: 10px;
}

.footer-nav ul li a {
  font-size: 14px;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.footer-nav ul li a:hover {
  color: var(--color-white);
}

.footer-bottom {
  max-width: var(--max-width);
  margin: 40px auto 0;
  padding: 20px 40px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 1px;
}

/* MENU PAGE — Section titles (italic style) */
.menu-section-title {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 700;
  font-size: 42px;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-white);
  letter-spacing: 4px;
  margin-bottom: 40px;
}

/* Menu category section */
.menu-category {
  padding: 60px 0;
}

.menu-category:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}