/* -------------------------------------------------------
   Design tokens + Color Module Styles
   Festival Travel — premium Caribbean travel brand
   ------------------------------------------------------- */

/* Google Fonts: DM Sans — clean, warm, modern */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ── Design tokens ─────────────────────────────────────── */
:root {
  --ft-orange:      #E06000;
  --ft-orange-dk:   #B84E00;
  --ft-gold:        #C08B10;

  --ft-dark:        #0D1422;
  --ft-dark-mid:    #1C2A40;
  --ft-cream:       #F7F3EC;
  --ft-sand:        #EDE7DC;
  --ft-white:       #FDFAF6;

  --ft-text:        #1A2132;
  --ft-text-mid:    #3D4B62;
  --ft-text-muted:  #6B7A95;
}

/* ── Global typography ─────────────────────────────────── */
body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  color: #1A2132;
  /* Dark navy matches footer exactly — gaps between content sections appear seamless */
  background: #0D1422;
}

/* #page is transparent so the dark body background fills any gaps.
   Only #main-wrapper (the actual content area) gets the warm cream. */
#page {
  background: transparent;
}

#main-wrapper {
  background: #FDFAF6;
}

.region-primary-menu .menu-item a.is-active,
.region-primary-menu .menu-item--active-trail a {
  background: transparent;
  color: #f5b400;
}

.tabs ul.primary li a.is-active {
  background-color: #fff;
}

.tabs ul.primary li.is-active a {
  background-color: #fff;
  border-bottom-color: #fff;
}

/* ── Navigation ─────────────────────────────────────────── */
#navbar-top {
  background-color: #060d18;
}

#navbar-main {
  background-color: #0D1422;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Links ──────────────────────────────────────────────── */
a,
.link {
  color: #C05000;
}

a:hover,
a:focus,
.link:hover,
.link:focus {
  color: #E06000;
}

.nav-item .dropdown-item a.active {
  color: white;
}

.nav-link {
  color: rgba(255, 255, 255, 0.82);
}

.nav-link:hover,
.nav-link:focus {
  color: #fff;
}

a:active,
.link:active {
  color: #E06000;
}

/* ── Pagination ─────────────────────────────────────────── */
.page-item.active .page-link {
  background-color: #E06000;
  border-color: #E06000;
}

.page-link,
.page-link:hover {
  color: #C05000;
}

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar .block {
  background-color: #F7F3EC;
  border-color: #EDE7DC;
}

/* ── Bootstrap button overrides ─────────────────────────── */
.btn-primary {
  background-color: #E06000;
  border-color: #E06000;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #B84E00;
  border-color: #B84E00;
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  background: #0D1422;
}

/* ── Header branding / nav text ─────────────────────────── */
.region-header,
.region-header a,
.region-header li a.is-active,
.region-header .site-branding__text,
.region-header .site-branding,
.region-header .site-branding__text a,
.region-header .site-branding a,
.region-secondary-menu .menu-item a,
.region-secondary-menu .menu-item a.is-active {
  color: #fffeff;
}

/* ── Navbar brand name (white on dark header) ───────────── */
.site-branding__name,
.navbar-brand .site-title {
  color: #fff;
}

/* ── Color Form ─────────────────────────────────────────── */
[dir="rtl"] .color-form .color-palette {
  margin-left: 0;
  margin-right: 20px;
}

[dir="rtl"] .color-form .form-item label {
  float: right;
}

[dir="rtl"] .color-form .color-palette .lock {
  right: -20px;
  left: 0;
}