/* Discover Malindi theme layer
   Loaded last. Re-tones the shared visitlamu components to an Indian Ocean blue
   palette with Bricolage Grotesque headings; the orange CTA colour is kept. */

:root {
  --k-primary: #0e4a73;        /* deep channel blue */
  --k-primary-dark: #08324f;
  --k-accent: #c45c26;         /* CTA orange, unchanged */
  --k-accent-dark: #a3491c;
  --k-ink: #2b2d42;            /* slate ink from the client palette */
  --k-muted: #565d73;
  --k-line: #d6dde4;
  --k-surface: #edf2f4;        /* cool off-white from the client palette */
  --k-white: #ffffff;
  --w-sand: #edf2f4;
  --k-footer: #2b2d42;
  --dm-reef: #1d7fb8;          /* lighter blue for highlights */
  --dm-radius: 12px;
  --dm-radius-sm: 8px;
}

/* ---------- Type ---------- */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .k-page-head h1,
html body .k-card__title,
html body .k-footer__heading,
html body .vl-section-head h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
html body .k-page-head h1,
html body .vl-hero h1 { font-weight: 700; }

/* ---------- Header ---------- */
.w-topbar {
  background: var(--k-white);
  border-bottom: 3px solid var(--k-primary);
}
.w-topbar__brand {
  color: var(--k-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
  gap: 0;
  align-items: baseline;
}
.w-topbar__brand::after {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.18em;
  border-radius: 50%;
  background: var(--k-accent);
  vertical-align: baseline;
}
.k-nav__link {
  border-radius: 999px;
}
.k-nav__item.is-active .k-nav__link,
.k-nav__link:hover {
  background: var(--k-surface);
  color: var(--k-primary);
}
.k-nav__item.is-active .k-nav__link {
  background: var(--k-primary);
  color: var(--k-white);
}

/* ---------- Buttons and forms ---------- */
.k-btn { border-radius: var(--dm-radius-sm); }
.form-control,
.form-select,
.w-form .form-control,
.w-form .form-select {
  border-radius: var(--dm-radius-sm);
  border-color: var(--k-line);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--dm-reef);
  box-shadow: 0 0 0 3px rgba(29, 127, 184, 0.18);
}

/* ---------- Hero: deep water band ---------- */
.vl-hero {
  background: linear-gradient(135deg, #22263d 0%, var(--k-primary) 55%, var(--dm-reef) 100%);
  color: var(--k-white);
  padding: 3.25rem 0 3rem;
}
.vl-hero h1 { color: var(--k-white); font-weight: 700; }
.vl-hero__list li { color: rgba(255, 255, 255, 0.92); }
.vl-hero__list li::before { background: var(--k-accent); }
.vl-hero .k-btn--outline {
  color: var(--k-white);
  border-color: rgba(255, 255, 255, 0.75);
  background: transparent;
}
.vl-hero .k-btn--outline:hover,
.vl-hero .k-btn--outline:focus {
  background: var(--k-white);
  color: var(--k-primary);
  border-color: var(--k-white);
}
.vl-hero__media,
.vl-hero__media img {
  border-radius: var(--dm-radius);
  overflow: hidden;
}
.vl-hero__media { box-shadow: 0 18px 40px rgba(3, 20, 34, 0.35); }

/* ---------- Page heads ---------- */
.k-page-head {
  background: linear-gradient(180deg, var(--k-surface) 0%, var(--k-white) 100%);
  border-bottom: 1px solid var(--k-line);
}
.k-crumbs a { color: var(--k-primary); }

/* ---------- Sections ---------- */
.k-section--surface { background: var(--k-surface); }
.vl-proof { background: var(--k-primary-dark); }
.vl-proof__list li::before { background: var(--k-accent); }

/* ---------- Cards ---------- */
.k-card,
.vl-card {
  border-radius: var(--dm-radius);
  border-color: var(--k-line);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(12, 31, 44, 0.05);
}
.vl-card:hover {
  box-shadow: 0 10px 26px rgba(14, 74, 115, 0.14);
  transform: translateY(-2px);
}
.k-card__media img { transition: transform 0.35s ease; }
.vl-card:hover .k-card__media img { transform: scale(1.03); }
.vl-card .k-card__price,
.vl-show__price { color: var(--k-primary); }
.vl-card__save { color: var(--dm-reef); }

/* ---------- Detail pages ---------- */
.vl-show__media img,
.vl-show__thumb { border-radius: var(--dm-radius); }
.vl-book {
  background: var(--k-white);
  border: 1px solid var(--k-line);
  border-top: 4px solid var(--k-primary);
  border-radius: var(--dm-radius);
  box-shadow: 0 8px 24px rgba(14, 74, 115, 0.08);
}

/* ---------- Guides strip ---------- */
.dm-guide {
  border-radius: var(--dm-radius);
  border-left: 4px solid var(--dm-reef);
}

/* ---------- Footer ---------- */
.k-footer { background: var(--k-footer); }
.k-footer a:hover,
.k-footer a:focus { color: #9fd3f2; }

@media (prefers-reduced-motion: reduce) {
  .vl-card,
  .k-card__media img { transition: none; }
  .vl-card:hover,
  .vl-card:hover .k-card__media img { transform: none; }
}

/* ---------- Reading size ----------
   Source Sans 3 runs smaller than Lato at the same px, so the scale is lifted:
   rem-based UI text (buttons, card meta, nav) grows with the root size. */
html { font-size: 17.5px; }
html body { font-size: 19px; line-height: 1.6; }
html body .k-nav__link { font-size: 1rem; }
html body .k-card__meta,
html body .vl-book__note,
html body .k-crumbs { font-size: 0.95rem; }
html body .k-btn { font-size: 0.92rem; }
html body .k-card__title { font-size: 1.15rem; line-height: 1.3; }
html body .vl-hero__list li { font-size: 1rem; }
html body .vl-hero h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
html body .k-footer { font-size: 1rem; }

@media (max-width: 767.98px) {
  html { font-size: 16.5px; }
  html body { font-size: 18px; }
  html body .vl-hero h1 { font-size: 1.6rem; line-height: 1.2; }
  html body .vl-section-head h2 { font-size: 1.5rem; }
}

@media (max-width: 991.98px) {
  html body .w-topbar__book { font-size: 0.85rem; padding: 9px 14px; }
}
@media (max-width: 575.98px) {
  .dm-call-num { display: none; }
  .dm-call-word { display: inline; }
  html body .w-topbar__book { font-size: 0.95rem; padding: 9px 16px; }
  html body .w-topbar__brand { font-size: 1.3rem; }
}

/* Header fit: keep the menu on one line on laptop widths */
@media (min-width: 992px) {
  html body .w-topbar .k-nav__link { font-size: 16px; padding: 0.42rem 10px; white-space: nowrap; }
}
@media (max-width: 1399.98px) {
  .dm-call-word { display: none; }
  html body .w-topbar__book { padding-left: 18px; padding-right: 18px; }
}

/* Mobile menu button: always visible, even before the icon font loads */
html body .w-topbar__toggle {
  color: var(--k-primary);
  border: 1.5px solid var(--k-line);
  border-radius: var(--dm-radius-sm);
  background: var(--k-white);
  align-items: center;
  gap: 6px;
}
@media (max-width: 575.98px) {
  html body .w-topbar__toggle-label {
    display: inline;
    font-size: 0.9rem;
    font-weight: 600;
  }
}

@media (max-width: 575.98px) {
  .dm-call-word { display: inline; }
  .dm-call-num { display: none; }
}

/* Related items under detail pages */
.dm-related__lead { margin: -0.5rem 0 1.25rem; color: var(--k-muted); }

/* Hero: keep the buttons on the first screen without scrolling */
html body .vl-hero { padding: 2.25rem 0 2.5rem; }
html body .vl-hero h1 { margin-bottom: 0.9rem; }
html body .vl-hero__list { margin-bottom: 1.25rem; }
html body .vl-hero__list li { margin-bottom: 0.35rem; line-height: 1.45; }
@media (max-width: 767.98px) {
  html body .vl-hero { padding: 1.25rem 0 2rem; }
  html body .vl-hero__list li { font-size: 0.95rem; }
}