/* Fix footer for tablet: stack contact and quick links, separate headings */
@media (max-width: 991.98px) {
  .footer-flex {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2rem !important;
  }
  .footer-flex > .flex-fill {
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
  }
  .footer-flex > .flex-fill:not(:last-child) {
    border-bottom: 1px solid #3a2a1c;
    padding-bottom: 1.2rem;
    margin-bottom: 1.2rem;
  }
  .footer-flex h5 {
    display: block;
    width: 100%;
    margin-bottom: 0.7rem !important;
    text-align: left;
  }
  .footer-flex ul {
    margin-bottom: 0;
  }
}
/* Hero section custom button hover effects */
.hero-section .btn-lg {
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, border 0.2s;
  box-shadow: 0 2px 8px rgba(75,40,28,0.08);
}
.hero-section .btn-lg.me-3 {
  background: var(--coffee-accent) !important;
  color: #fff !important;
  border: none !important;
}
.hero-section .btn-lg.me-3:hover, .hero-section .btn-lg.me-3:focus {
  background: #d95e00 !important;
  color: #fff !important;
  box-shadow: 0 6px 24px rgba(249,117,11,0.18);
}
.hero-section .btn-lg:last-child {
  background: #5a4a3c !important;
  color: #fff !important;
  border: none !important;
}
.hero-section .btn-lg:last-child:hover, .hero-section .btn-lg:last-child:focus {
  background: #fff !important;
  color: #5a4a3c !important;
  border: 2px solid var(--coffee-accent) !important;
  box-shadow: 0 6px 24px rgba(90,74,60,0.13);
}
/* Animated underline for product name on hover */
.card-title {
  position: relative;
  display: inline-block;
}
.card-title::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 3px;
  background: var(--coffee-accent);
  border-radius: 2px;
  transition: width 0.3s cubic-bezier(0.4,0,0.2,1);
}
.card:hover .card-title::after {
  width: 100%;
}
/* Glympher font-face (assumes font file in assets/fonts/Glympher.woff2) */
.navbar-nav.gap-3 .nav-link {
  margin-right: 0 !important;
}
/* Hero Section Video and Overlay */
.hero-section {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 1;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(75,40,28,0.55);
  z-index: 2;
}
.hero-section .container {
  z-index: 3;
  position: relative;
}
/* Bootstrap override and custom styles for One Step Coffee */
:root {
  --coffee-primary: #4b281c;
  --coffee-accent: #f9750b;
  --coffee-secondary: #f5f5f5; /* light gray */
}

body {
  background-color: var(--coffee-secondary);
  font-family: 'Inter', Arial, sans-serif;
}


.navbar {
  background-color: #1a0803 !important;
}


.navbar-brand, .navbar-nav .nav-link {
  color: #fff !important;
  position: relative;
  transition: color 0.2s;
}


.navbar-nav .nav-link.active {
  color: #fff !important;
}

.navbar-nav .nav-link::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: var(--coffee-accent);
  transition: width 0.3s cubic-bezier(0.4,0,0.2,1);
  position: absolute;
  left: 0;
  bottom: 0.2em;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--coffee-accent) !important;
  background: none !important;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link:focus::after {
  width: 100%;
}


/* Custom orange button with light gray background and orange hover */
.btn-primary {
  background-color: #f5f5f5;
  color: #a89b8e;
  border: 2px solid #a89b8e;
  transition: background 0.2s, color 0.2s, border 0.2s;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--coffee-accent);
  color: #fff;
  border-color: var(--coffee-accent);
}

.btn-success {
  background-color: var(--coffee-primary);
  border-color: var(--coffee-accent);
}

.btn-success:hover {
  background-color: var(--coffee-accent);
  color: var(--coffee-primary);
}

.card {
  border: none;
  box-shadow: 0 2px 8px rgba(75,40,28,0.08);
  background-color: #fff;
}

.card-title {
  color: var(--coffee-primary);
}

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

footer {
  background-color: var(--coffee-primary) !important;
  color: #fff;
  width: 100%;
  margin-top: 0;
  position: relative;
}

/* Responsive Footer Layout */
.footer-flex {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 768px) {
  .footer-flex {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2.5rem;
  }
}

@media (max-width: 991.98px) {
  footer .flex-fill {
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .footer-flex {
    gap: 1.5rem;
  }
}

@media (max-width: 575.98px) {
  footer {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .footer-flex {
    gap: 1rem;
  }
  .footer-quick-link {
    font-size: 1rem;
  }
  footer h5 {
    font-size: 1.08rem !important;
  }
}

header.bg-light {
  background-color: var(--coffee-secondary) !important;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
  color: var(--coffee-primary);
  font-family: 'Playfair Display', serif !important;
  letter-spacing: 0.5px;
}

/* Ensure hero-section h1 (banner) uses Playfair Display font */
.hero-section h1 {
  font-family: 'Playfair Display', serif !important;
}
p, .card-text, .accordion-body, label, input, textarea, .lead, .btn, li, ul, ol, .form-control {
  font-family: 'Inter', Arial, sans-serif !important;
}

a {
  color: var(--coffee-accent);
}

a:hover {
  color: var(--coffee-primary);
}

.form-control:focus {
  border-color: var(--coffee-accent);
  box-shadow: 0 0 0 0.2rem rgba(249,117,11,0.25);
}