/*===========================
    HANN Design System Override
    Primary:   #626DBA
    Secondary: #D3372B
    Tertiary:  #000000
    Neutral:   #626DBA
    Headline:  Manrope
    Body/Label: Inter
===========================*/

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap");

/* ── CSS variables ─────────────────────────── */
:root {
  --color-primary:      #626DBA;
  --color-primary-dark: #1e2a6e;
  --color-secondary:    #D3372B;
  --color-heading:      #0d1b4e;
  --color-text:         #4a4a6a;
  --color-white:        #ffffff;
  --color-bg-light:     #f0f1f8;
}

/* ── Typography ────────────────────────────── */
body {
  font-family: "Inter", sans-serif;
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Manrope", sans-serif;
  color: var(--color-heading);
}

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

/* ── Buttons ───────────────────────────────── */
.main-btn {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white) !important;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  border-radius: 6px;
  letter-spacing: 0.3px;
  transition: background-color 0.2s, border-color 0.2s;
}
.main-btn:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white) !important;
}

/* ── Navigation ────────────────────────────── */
.header_area .header_navbar {
  background-color: var(--color-white);
  box-shadow: 0 2px 12px rgba(98, 109, 186, 0.10);
}

.header_navbar .navbar-nav .nav-item a {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  color: var(--color-heading);
}
.header_navbar .navbar-nav .nav-item a:hover,
.header_navbar .navbar-nav .nav-item.active a {
  color: var(--color-primary);
}

.sticky .header_navbar {
  background-color: var(--color-white) !important;
  box-shadow: 0 4px 16px rgba(98, 109, 186, 0.14);
}

/* ── Section title decoration ──────────────── */
.section_title .title {
  font-family: "Manrope", sans-serif;
  color: var(--color-heading);
  font-weight: 800;
}

/* Replace the decorative line with the brand colors */
.section_title .line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}
.section_title .line::before,
.section_title .line::after {
  content: "";
  display: block;
  height: 3px;
  border-radius: 2px;
}
.section_title .line::before {
  width: 40px;
  background-color: var(--color-primary);
}
.section_title .line::after {
  width: 14px;
  background-color: var(--color-secondary);
}
.section_title .line span.box {
  display: none; /* replaced by ::after */
}

/* ── Hero slider ───────────────────────────── */
.slider_content .slider_title {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: var(--color-white);
}

/* ── Coffee cards ──────────────────────────── */
.single_coffee .coffee_content .coffee_title {
  font-family: "Manrope", sans-serif;
  color: var(--color-heading);
  font-weight: 700;
}

/* ── Counter section ───────────────────────── */
.counter_area .single_counter .count {
  color: var(--color-white);
  font-family: "Manrope", sans-serif;
  font-weight: 800;
}
.counter_area .single_counter p {
  color: rgba(255, 255, 255, 0.85);
  font-family: "Inter", sans-serif;
}

/* ── Testimonials ──────────────────────────── */
.single_customer .author_name {
  font-family: "Manrope", sans-serif;
  color: var(--color-heading);
  font-weight: 700;
}
.single_customer .sub_title {
  color: var(--color-primary);
  font-family: "Inter", sans-serif;
  font-weight: 500;
}
.single_customer .star li i {
  color: var(--color-secondary);
}

/* ── Reviews slider – navigatiepijltjes ─────── */
.customer_area .slick-prev,
.customer_area .slick-next {
  display: none !important;
}
.customer_area .prev,
.customer_area .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 38px;
  height: 38px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  transition: background-color 0.2s;
}
.customer_area .prev:hover,
.customer_area .next:hover {
  background-color: var(--color-secondary);
}
.customer_area .prev { left: -20px; }
.customer_area .next { right: -20px; }

/* ── Wie zit erachter – sectie achtergrond ─── */
#wie {
  background-color: #f4f5fb;
  border-top: 3px solid var(--color-primary);
}

/* ── Wie zit erachter – profielfoto ────────── */
.wie-profile-image img {
  width: 100%;
  max-width: 220px;
  border-radius: 50%;
  border: 4px solid var(--color-primary);
  box-shadow: 0 8px 24px rgba(98, 109, 186, 0.20);
}

/* ── About image – capped at half natural height ── */
.about_image img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  object-position: center top;
  border-radius: 8px;
}

/* ── About section ─────────────────────────── */
.about_content .about_title {
  font-family: "Manrope", sans-serif;
  color: var(--color-heading);
  font-weight: 800;
}

/* ── Social icons ──────────────────────────── */
.social li a {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  transition: background-color 0.2s;
}
.social li a:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}
.social li a i {
  color: var(--color-white);
  line-height: 36px;
}

/* ── Contact form ──────────────────────────── */
.single_form input,
.single_form textarea {
  border: 1.5px solid #d0d3e8;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  color: var(--color-heading);
  transition: border-color 0.2s;
}
.single_form input:focus,
.single_form textarea:focus {
  border-color: var(--color-primary);
}

/* ── Footer ────────────────────────────────── */
.footer_area {
  background-color: var(--color-heading);
}

.footer_title {
  font-family: "Manrope", sans-serif;
  color: var(--color-white);
  font-weight: 700;
  margin-bottom: 18px;
}

.footer_about p,
.footer_link ul li,
.footer_link ul li a {
  color: rgba(255, 255, 255, 0.70);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.7;
}

.footer_link ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer_link ul li {
  margin-bottom: 8px;
}

.footer_link ul li a:hover {
  color: var(--color-white);
  text-decoration: none;
}

.mb-40 {
  margin-bottom: 40px;
}

.footer_subscribe .subscribe_title .title {
  color: var(--color-white);
  font-family: "Manrope", sans-serif;
}
.footer_subscribe .subscribe_title p {
  color: rgba(255, 255, 255, 0.70);
}

.subscribe_form form input {
  background: rgba(255, 255, 255, 0.10);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  border-radius: 6px 0 0 6px;
}
.subscribe_form form button {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  border-radius: 0 6px 6px 0;
  color: var(--color-white);
}
.subscribe_form form button:hover {
  background-color: #b02d22;
}

.footer_copyright .copyright p,
.footer_copyright .copyright a {
  color: rgba(255, 255, 255, 0.50);
  font-family: "Inter", sans-serif;
}

/* ── Kalender sectie ───────────────────────── */

/* Donkere overlay zodat alle tekst goed leesbaar is */
#menu.coffee_menu {
  position: relative;
}
#menu.coffee_menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 50, 0.78);
  z-index: 0;
}
#menu.coffee_menu .container {
  position: relative;
  z-index: 1;
}

/* Alle tekst binnen kalender wit */
#menu .title,
#menu .coffee_name,
#menu p,
#menu h4,
#menu h5 {
  color: #ffffff !important;
}



/* Sub-titels */
.kalender-sub-title {
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  border-bottom: 2px solid rgba(255,255,255,0.3);
  padding-bottom: 8px;
  margin-bottom: 0;
}
.kalender-sub-title--past {
  color: rgba(255,255,255,0.70);
  font-size: 17px;
}

/* Komend event – groot badge */
.kalender-badge {
  min-width: 72px;
  background-color: var(--color-primary);
  border-radius: 8px;
  text-align: center;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.kalender-badge .kalender-month {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-transform: capitalize;
}
.kalender-badge .kalender-year {
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
}

.kalender-upcoming {
  background: rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 16px 20px;
}
.kalender-upcoming .coffee_name {
  color: #ffffff;
  font-size: 22px;
  margin-bottom: 0;
}

/* Verleden events – compact badge */
.kalender-past-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kalender-past-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.07);
  border-radius: 7px;
  padding: 8px 14px;
}
.kalender-past-badge {
  min-width: 54px;
  background-color: rgba(255,255,255,0.15);
  border-radius: 6px;
  text-align: center;
  padding: 5px 7px;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.kalender-past-badge .kalender-month {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  text-transform: capitalize;
}
.kalender-past-badge .kalender-year {
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}
.kalender-past-name {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
}
.kalender-past-name em {
  font-size: 12px;
  color: rgba(255,255,255,0.50);
}

/* ── Contact form feedback messages ────────── */
.form-message {
  width: 100%;
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  display: none;
}
.form-message.success {
  display: block;
  background-color: #e8f5e9;
  color: #2e7d32;
  border: 1.5px solid #a5d6a7;
}
.form-message.error {
  display: block;
  background-color: #fdecea;
  color: #c62828;
  border: 1.5px solid #ef9a9a;
}

/* ── Back to top ───────────────────────────── */
.back-to-top {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 6px;
}
.back-to-top:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* ── Preloader ─────────────────────────────── */
.preloader {
  background-color: var(--color-white);
}