/*
 * Kifaru Roasters — site theme
 * Built on Bootstrap 5.3. This file only sets brand tokens and a few
 * components Bootstrap does not ship. Prefer Bootstrap utility classes
 * in the HTML before adding new rules here.
 */

/* ------------------------------------------------------------------
   1. Brand tokens
------------------------------------------------------------------- */
:root {
  --kf-espresso: #2b1d16;   /* darkest brown: headings, dark sections */
  --kf-roast: #4a3226;      /* body text on light backgrounds */
  --kf-caramel: #a0561f;    /* primary brand / buttons (AA on white) */
  --kf-caramel-dark: #7f4317;
  --kf-crema: #e2b77a;      /* highlight on dark backgrounds */
  --kf-leaf: #3e6b3a;       /* secondary accent: farming, Arabica */
  --kf-cream: #f8f3ec;      /* light section background */
  --kf-sand: #efe5d8;
  --kf-radius: 1rem;

  --kf-font-heading: "Playfair Display", Georgia, serif;
  --kf-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Map brand onto Bootstrap variables */
  --bs-primary: var(--kf-caramel);
  --bs-primary-rgb: 160, 86, 31;
  --bs-success: var(--kf-leaf);
  --bs-success-rgb: 62, 107, 58;
  --bs-dark-rgb: 43, 29, 22;
  --bs-body-font-family: var(--kf-font-body);
  --bs-body-color: var(--kf-roast);
  --bs-body-bg: #fff;
  --bs-emphasis-color: var(--kf-espresso);
  --bs-secondary-color: rgba(74, 50, 38, .75);
  --bs-link-color: var(--kf-caramel);
  --bs-link-color-rgb: 160, 86, 31;
  --bs-link-hover-color: var(--kf-caramel-dark);
  --bs-link-hover-color-rgb: 127, 67, 23;
  --bs-border-color: #e7dccd;
  --bs-border-radius-lg: var(--kf-radius);
  --bs-border-radius-xl: 1.25rem;
}

html { scroll-padding-top: 5rem; }
body { -webkit-font-smoothing: antialiased; line-height: 1.7; }
main { overflow-x: clip; } /* keeps slide-in animations from causing sideways scroll */

h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--kf-font-heading);
  color: var(--kf-espresso);
  font-weight: 600;
  line-height: 1.2;
}
h5, h6, .h5, .h6 { color: var(--kf-espresso); font-weight: 600; }
.lead { font-weight: 400; }

/* ------------------------------------------------------------------
   2. Buttons — one shape everywhere: pill, medium weight
------------------------------------------------------------------- */
.btn {
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: .7rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 50rem;
  --bs-btn-font-size: .95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-lg { --bs-btn-padding-x: 2rem; --bs-btn-padding-y: .85rem; --bs-btn-font-size: 1rem; --bs-btn-border-radius: 50rem; }
.btn-sm { --bs-btn-padding-x: 1rem; --bs-btn-padding-y: .4rem; --bs-btn-font-size: .85rem; --bs-btn-border-radius: 50rem; }

.btn-primary {
  --bs-btn-bg: var(--kf-caramel);
  --bs-btn-border-color: var(--kf-caramel);
  --bs-btn-hover-bg: var(--kf-caramel-dark);
  --bs-btn-hover-border-color: var(--kf-caramel-dark);
  --bs-btn-active-bg: var(--kf-caramel-dark);
  --bs-btn-active-border-color: var(--kf-caramel-dark);
  --bs-btn-disabled-bg: var(--kf-caramel);
  --bs-btn-disabled-border-color: var(--kf-caramel);
  --bs-btn-focus-shadow-rgb: 160, 86, 31;
}
.btn-outline-primary {
  --bs-btn-color: var(--kf-caramel);
  --bs-btn-border-color: var(--kf-caramel);
  --bs-btn-hover-bg: var(--kf-caramel);
  --bs-btn-hover-border-color: var(--kf-caramel);
  --bs-btn-active-bg: var(--kf-caramel-dark);
  --bs-btn-active-border-color: var(--kf-caramel-dark);
  --bs-btn-focus-shadow-rgb: 160, 86, 31;
}
.btn-outline-light { --bs-btn-hover-color: var(--kf-espresso); }

.link-arrow {
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.link-arrow i { transition: transform .2s ease; }
.link-arrow:hover i { transform: translateX(4px); }

.form-control, .form-select { border-radius: .75rem; padding: .75rem 1rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--kf-caramel);
  box-shadow: 0 0 0 .25rem rgba(160, 86, 31, .15);
}

/* ------------------------------------------------------------------
   3. Navigation
------------------------------------------------------------------- */
.navbar-kf {
  --bs-navbar-padding-y: 1rem;
  --bs-navbar-color: rgba(255, 255, 255, .85);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: var(--kf-crema);
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, .35);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  transition: background-color .3s ease, padding .3s ease, box-shadow .3s ease;
}
.navbar-kf .navbar-brand { font-family: var(--kf-font-heading); font-weight: 700; font-size: 1.35rem; }
.navbar-kf .navbar-brand img { width: 42px; height: 42px; }
.navbar-kf .nav-link { font-weight: 500; font-size: .95rem; padding-inline: .9rem !important; }
.navbar-kf.is-scrolled, .navbar-kf.is-open {
  --bs-navbar-padding-y: .55rem;
  background-color: rgba(43, 29, 22, .97);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
@media (max-width: 991.98px) {
  .navbar-kf .navbar-collapse { padding-block: 1rem; }
  .navbar-kf .nav-link { padding-block: .6rem; }
}

/* ------------------------------------------------------------------
   4. Hero and page headers
------------------------------------------------------------------- */
.hero, .page-hero, .cta-banner {
  position: relative;
  isolation: isolate;
  color: #fff;
  background-color: var(--kf-espresso);
  background-size: cover;
  background-position: center;
}
/* Dark gradient overlay keeps text readable on any photo */
.hero::before, .page-hero::before, .cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(25, 15, 10, .9) 0%, rgba(25, 15, 10, .65) 50%, rgba(25, 15, 10, .3) 100%);
}
.hero { min-height: 100vh; min-height: 100svh; padding: 8rem 0 6rem; }
.page-hero { padding: 10rem 0 5rem; }
.hero h1, .page-hero h1, .cta-banner h2 { color: #fff; }
.hero .lead, .page-hero .lead { color: rgba(255, 255, 255, .85); }
@media (max-width: 767.98px) {
  .hero::before, .page-hero::before { background: rgba(25, 15, 10, .72); }
}

.page-hero .breadcrumb { --bs-breadcrumb-divider-color: rgba(255, 255, 255, .6); --bs-breadcrumb-item-active-color: var(--kf-crema); margin: 0; }
.page-hero .breadcrumb a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.page-hero .breadcrumb a:hover { color: #fff; }

.eyebrow {
  display: inline-block;
  font-family: var(--kf-font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kf-caramel);
  margin-bottom: .75rem;
}
.bg-espresso .eyebrow, .hero .eyebrow, .page-hero .eyebrow, .cta-banner .eyebrow { color: var(--kf-crema); }

/* ------------------------------------------------------------------
   5. Sections and surfaces
------------------------------------------------------------------- */
.section { padding: 5.5rem 0; }
@media (max-width: 767.98px) { .section { padding: 4rem 0; } }
.section-header { max-width: 720px; margin: 0 auto 3rem; text-align: center; }

.bg-cream { background-color: var(--kf-cream); }
.bg-sand { background-color: var(--kf-sand); }
.bg-espresso { background-color: var(--kf-espresso); color: rgba(255, 255, 255, .82); }
.bg-espresso h1, .bg-espresso h2, .bg-espresso h3, .bg-espresso h4, .bg-espresso h5 { color: #fff; }
.text-crema { color: var(--kf-crema) !important; }
.text-leaf { color: var(--kf-leaf) !important; }

.card {
  --bs-card-border-width: 0;
  --bs-card-border-radius: var(--kf-radius);
  --bs-card-inner-border-radius: var(--kf-radius);
  box-shadow: 0 .25rem 1.25rem rgba(43, 29, 22, .07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 1rem 2.5rem rgba(43, 29, 22, .12); }
.bg-espresso .card { background-color: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .8); box-shadow: none; border: 1px solid rgba(255, 255, 255, .1); }
.bg-espresso .card h3, .bg-espresso .card h4 { color: #fff; }

.img-cover { width: 100%; height: 100%; object-fit: cover; }
.photo { border-radius: var(--kf-radius); overflow: hidden; box-shadow: 0 1rem 2.5rem rgba(43, 29, 22, .15); }
.card .ratio img { object-fit: cover; }
.photo iframe { width: 100%; height: 100%; }

.icon-badge {
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .9rem;
  font-size: 1.4rem;
  color: var(--kf-caramel);
  background-color: rgba(160, 86, 31, .1);
}
.icon-badge.is-leaf { color: var(--kf-leaf); background-color: rgba(62, 107, 58, .1); }
.bg-espresso .icon-badge { color: var(--kf-crema); background-color: rgba(226, 183, 122, .12); }

.step-num {
  font-family: var(--kf-font-heading);
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  background: var(--kf-caramel);
  border-radius: 50rem;
  padding: .2rem .75rem;
}

/* Floating label on images */
.photo-wrap { position: relative; }
.photo-badge {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #fff;
  border-radius: .9rem;
  padding: .75rem 1rem;
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
}
.photo-badge strong { display: block; color: var(--kf-espresso); line-height: 1.2; }
.photo-badge small { color: var(--bs-secondary-color); }

/* Stats */
.stats-bar { margin-top: -4rem; position: relative; z-index: 2; }
.stat-value { font-family: var(--kf-font-heading); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.5rem); color: var(--kf-caramel); line-height: 1.1; }
.stat-label { font-size: .9rem; color: var(--bs-secondary-color); }

/* Check lists */
.list-check { list-style: none; padding-left: 0; }
.list-check li { position: relative; padding-left: 1.9rem; margin-bottom: .6rem; }
.list-check li::before {
  content: "\F26A"; /* bi-check-circle-fill */
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: .05rem;
  color: var(--kf-leaf);
}
.bg-espresso .list-check li::before { color: var(--kf-crema); }

/* Fact list inside coffee cards */
.fact-list { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; }
.fact-list dt { font-weight: 600; color: var(--kf-espresso); }
.fact-list dd { margin: 0; }

/* Testimonials */
.quote-card .bi-quote { font-size: 2.5rem; line-height: 1; color: var(--kf-crema); }
.avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  background: var(--kf-caramel);
  flex-shrink: 0;
}

/* CTA banner with photo */
.cta-banner { border-radius: 1.5rem; overflow: hidden; }
.cta-banner::before { background: linear-gradient(90deg, rgba(25, 15, 10, .92) 0%, rgba(25, 15, 10, .8) 60%, rgba(25, 15, 10, .6) 100%); }
.cta-banner.text-center::before { background: rgba(25, 15, 10, .8); }

/* Tables */
.table-kf { --bs-table-bg: #fff; border-radius: var(--kf-radius); overflow: hidden; box-shadow: 0 .25rem 1.25rem rgba(43, 29, 22, .07); }
.table-kf thead th { background: var(--kf-espresso); color: #fff; font-weight: 600; border: 0; padding: 1rem; }
.table-kf td, .table-kf th[scope="row"] { padding: .9rem 1rem; vertical-align: top; }

/* Accordion */
.accordion { --bs-accordion-active-bg: var(--kf-cream); --bs-accordion-active-color: var(--kf-espresso); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(160, 86, 31, .15); --bs-accordion-border-radius: var(--kf-radius); --bs-accordion-inner-border-radius: var(--kf-radius); }
.accordion-button { font-weight: 600; }

/* Quick nav pills */
.nav-pills-kf { gap: .5rem; }

/* ------------------------------------------------------------------
   6. Footer
------------------------------------------------------------------- */
.site-footer { background: #1f1510; color: rgba(255, 255, 255, .7); font-size: .95rem; }
.site-footer h2 { font-family: var(--kf-font-body); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.site-footer a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.site-footer a:hover { color: var(--kf-crema); }
.site-footer .footer-brand { font-family: var(--kf-font-heading); font-size: 1.4rem; font-weight: 700; color: #fff; }
.site-footer li { margin-bottom: .45rem; }
.site-footer .border-top { border-color: rgba(255, 255, 255, .1) !important; }

/* Back to top */
.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1030;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--kf-caramel);
  color: #fff;
  font-size: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top:hover { color: #fff; background: var(--kf-caramel-dark); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}