/* ================================================================
   GhanaTRVL — Custom Stylesheet
   Bootstrap 5 native. Zero Canvas / CNVS dependencies.

   Structure:
   01. Design Tokens (:root)
   02. Base Reset & Typography
   03. Colour-coding badge system
   04. Navbar & Topbar
   05. Mobile App Menu
   06. Social Share Sidebar
   07. Hero Section
   08. Marquee Strip
   09. Section Labels (eyebrow / sh2 / sdesc)
   10. Destination Cards (.dcard)
   11. Events Section
   12. Article Cards (.acard)
   13. Places to Stay Cards (.scard)
   14. Why Section
   15. Industry / Business Section
   16. Newsletter Band
   17. Community Section
   18. Footer
   19. Legal Pages
   20. Utility Helpers
   21. Klaro Cookie Consent

   Last updated: 2026-05
================================================================ */


/* ================================================================
   01. DESIGN TOKENS
================================================================ */
:root {
  /* Brand colours */
  --dv: #230F42;            /* Dark violet — primary dark */
  --mv: #592D8C;            /* Medium violet — primary */
  --ye: #F6EE27;            /* Yellow — primary accent */
  --gr: #C5DC64;            /* Green — secondary accent */
  --bk: #1E0E0D;            /* Near-black body text */
  --wh: #F4F6FA;            /* Off-white background */
  --wh2: #ECEAF4;           /* Tinted white — alternate bg */
  --mu: #6B5F7A;            /* Muted purple — secondary text */
  --rule: rgba(89,45,140,0.12); /* Subtle divider colour */

  /* Font stacks */
  --ff-h: 'Plus Jakarta Sans', sans-serif;  /* Headings & UI */
  --ff-b: 'Plus Jakarta Sans', sans-serif;  /* Body */
  --ff-s: 'Source Serif 4', Georgia, serif; /* Editorial / italic */

  /* Bootstrap overrides */
  --bs-body-font-family: var(--ff-b);
  --bs-body-bg: var(--wh);
  --bs-body-color: var(--bk);

  /* Background relief images */
  --bg-img-yellow:       url('https://core.ghanatrvl.com/images/backgrounds/ghanatrvl-background-relief-yellow.jpg');
  --bg-img-green:        url('https://core.ghanatrvl.com/images/backgrounds/ghanatrvl-background-relief-green.jpg');
  --bg-img-purple:       url('https://core.ghanatrvl.com/images/backgrounds/ghanatrvl-background-relief-purple.jpg');
  --bg-img-light-purple: url('https://core.ghanatrvl.com/images/backgrounds/ghanatrvl-background-relief-light-purple.jpg');
  --bg-img-white:        url('https://core.ghanatrvl.com/images/backgrounds/ghanatrvl-background-relief-white.jpg');
  --bg-img-dark-purple:  url('https://core.ghanatrvl.com/images/backgrounds/ghanatrvl-background-relief-dark-purple.jpg');
  --bg-img-white-green:  url('https://core.ghanatrvl.com/images/backgrounds/ghanatrvl-background-white-relief-green.jpg');
  --bg-card-green: #c5dc6470;

  /* Content type colour palette — HEX */
  --home:              #034872;
  --travel-insights:   #FF8600;
  --places-to-see:     #6f42c1;
  --work-travel:       #0FA3B1;
  --culture-and-people:#007bff;
  --food:              #e83e8c;
  --how-to:            #dc3545;
  --transportation:    #13a774;
  --destinations:      #034872;
  --travel-guides:     #FF8600;
  --bars:              #e83e8c;
  --restaurants:       #e83e8c;
  --events:            #007bff;
  --activities:        #0FA3B1;
  --transport:         #13a774;
  --hospitality:       #034872;
  --about-us:          #ffc107;

  /* Content type colour palette — RGB (for rgba() use) */
  --home-rgb:               3,72,114;
  --travel-insights-rgb:    255,134,0;
  --places-to-see-rgb:      111,66,193;
  --work-travel-rgb:        15,163,177;
  --culture-and-people-rgb: 0,123,255;
  --food-rgb:               232,62,140;
  --how-to-rgb:             220,53,69;
  --transportation-rgb:     19,167,116;
  --destinations-rgb:       3,72,114;
  --travel-guides-rgb:      255,134,0;
  --bars-rgb:               232,62,140;
  --restaurants-rgb:        232,62,140;
  --events-rgb:             0,123,255;
  --activities-rgb:         15,163,177;
  --transport-rgb:          19,167,116;
  --hospitality-rgb:        3,72,114;
  --about-us-rgb:           255,193,7;
}


/* ================================================================
   02. BASE RESET & TYPOGRAPHY
================================================================ */
html { scroll-behavior: smooth; }

body {
  font-family: var(--ff-b);
  background: var(--wh);
  color: var(--bk);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* Background relief utility classes */
.bg-img-purple       { background-image: var(--bg-img-purple); }
.bg-img-yellow       { background-image: var(--bg-img-yellow); }
.bg-img-green        { background-image: var(--bg-img-green); }
.bg-img-light-purple { background-image: var(--bg-img-light-purple); }
.bg-img-dark-purple  { background-image: var(--bg-img-dark-purple); }
.bg-img-white        { background-image: var(--bg-img-white); }
.bg-img-white-green  { background-image: var(--bg-img-white-green); }
.card-bg-green       { background-color: var(--bg-card-green) !important; }

/* Scroll offset for sticky navbar — applies to all anchor targets */
h1, h2, h3, h4, h5, h6 {
  scroll-margin-top: 90px;
}

/* ================================================================
   03. COLOUR-CODING BADGE SYSTEM
   Used on article/listing type labels
================================================================ */
.home            { color: var(--home);              background: rgba(var(--home-rgb), .1); }
.travel-insight  { color: var(--travel-insights);   background: rgba(var(--travel-insights-rgb), .1); }
.places-to-see   { color: var(--places-to-see);     background: rgba(var(--places-to-see-rgb), .1); }
.work-travel     { color: var(--work-travel);        background: rgba(var(--work-travel-rgb), .1); }
.culture-and-heritage { color: var(--culture-and-people); background: rgba(var(--culture-and-people-rgb), .1); }
.food            { color: var(--food);               background: rgba(var(--food-rgb), .1); }
.how-to          { color: var(--how-to);             background: rgba(var(--how-to-rgb), .1); }
.transportation  { color: var(--transportation);     background: rgba(var(--transportation-rgb), .1); }
.destinations    { color: var(--destinations);       background: rgba(var(--destinations-rgb), .1); }
.travel-guides   { color: var(--travel-guides);      background: rgba(var(--travel-guides-rgb), .1); }
.bars            { color: var(--bars);               background: rgba(var(--bars-rgb), .1); }
.restaurants     { color: var(--restaurants);        background: rgba(var(--restaurants-rgb), .1); }
.events          { color: var(--events);             background: rgba(var(--events-rgb), .1); }
.activities      { color: var(--activities);         background: rgba(var(--activities-rgb), .1); }
.transport       { color: var(--transport);          background: rgba(var(--transport-rgb), .1); }
.hospitality     { color: var(--hospitality);        background: rgba(var(--hospitality-rgb), .1); }
.about-us        { color: var(--about-us);           background: rgba(var(--about-us-rgb), .1); }


/* ================================================================
   04. NAVBAR & TOPBAR
   .gt-nav        — main sticky navbar
   .gt-topbar     — Ghana flag colour bar below nav
   .navbar-main   — alias used on the same <nav> element
   .navbar-brand  — logo wrapper
   .logo-default  — the logo <img>
   Dropdown menu classes used in __menu_main_body.php /
   __menu_main_col.php: .dropdown-menu.w-70,
   .dropdown-header-panel, .dropdown-section-title,
   .dropdown-item
================================================================ */

/* Sticky navbar */
.gt-nav {
  background: var(--wh) !important;
  min-height: 64px;
  box-shadow: 0 4px 20px rgba(35,15,66,.15);
  transition: min-height .3s, box-shadow .3s;
  position: sticky;
  top: 0;
  z-index: 1020;
}

/* Scrolled state — toggled by JS when user passes 60px */
.gt-nav.scrolled {
  min-height: 48px;
  box-shadow: 0 2px 12px rgba(35,15,66,.25);
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
.gt-nav.scrolled .nav-link  { padding: .35rem .7rem !important; }
.gt-nav.scrolled .btn-cta   { padding: 7px 15px; font-size: 10.5px; }

/* Logo */
.navbar-brand { display: inline-flex; align-items: center; }
.logo-default { max-height: 46px; width: auto; }

/* Nav links */
.gt-nav .nav-link,
.navbar-main .nav-link {
  font-family: var(--ff-h);
  font-size: clamp(10px, 0.8vw, 13px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dv) !important;
  border-bottom: 2px solid transparent;
  padding: .5rem .75rem;
  transition: color .2s, border-color .2s;
}
.gt-nav .nav-link:hover,
.gt-nav .nav-link.active,
.navbar-main .nav-link:hover,
.navbar-main .nav-link.active {
  color: var(--mv) !important;
  border-bottom-color: var(--mv);
}

/* Mega dropdown — full-width centred panel */
.navbar .dropdown-menu.w-70 {
  width: clamp(280px, 70vw, 1500px);
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: 0;
  border: none;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(35,15,66,.14);
  padding: 0;
  overflow: hidden;
}

/* Dark image-backed header panel inside dropdown */
.dropdown-header-panel {
  color: var(--wh);
  padding: 1.25rem 1.5rem;
}
.dropdown-header-panel h6 { color: var(--wh); font-size: 1rem; margin-bottom: .25rem; }
.dropdown-header-panel p  { color: rgba(244,246,250,.9); font-size: .8rem; margin: 0; }

/* Section title inside dropdown columns */
.dropdown-section-title {
  font-family: var(--ff-h);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mv);
  padding: .75rem 1rem .25rem;
}

/* Dropdown items */
.dropdown-item {
  font-family: var(--ff-b);
  font-size: .875rem;
  font-weight: 500;
  padding: .4rem 1rem;
  color: var(--bk);
  transition: background .15s, color .15s;
}
.dropdown-item:hover { background: rgba(89,45,140,.08); color: var(--mv); }

/* Ghana flag topbar — sits below the nav */
.gt-topbar {
  height: 6px;
  background: linear-gradient(90deg, #CF0921 0%, #CF0921 33%, var(--ye) 33%, var(--ye) 66%, #006B3F 66%, #006B3F 100%);
}

/* CTA button in nav */
.btn-cta {
  background: var(--ye);
  color: var(--dv);
  font-family: var(--ff-h);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: none;
  padding: 9px 18px;
  border-radius: 24px;
  text-decoration: none;
  transition: background .18s;
  white-space: nowrap;
}
.btn-cta:hover { background: var(--gr); color: var(--dv); }


/* ================================================================
   05. MOBILE APP MENU
   .app-menu, .app-menu-container, .app-menu-item,
   .app-menu-link, .app-menu-style-2
   Fixed bottom tab bar on small screens (d-lg-none)
================================================================ */
.app-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: var(--wh);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -4px 16px rgba(35,15,66,.1);
}

.app-menu-container {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: space-around;
}

.app-menu-item { flex: 1; }

.app-menu-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px 10px;
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mu);
  text-decoration: none;
  gap: 3px;
  transition: color .2s;
}
.app-menu-link i { font-size: 1.2rem; }
.app-menu-link:hover,
.app-menu-link.active { color: var(--mv); }


/* ================================================================
   06. SOCIAL SHARE SIDEBAR
   .social-share-sidebar, .si-icon, .si-label
   Fixed right-edge expand-on-hover share buttons
   Colour classes set inline from DB: .bg-facebook etc
================================================================ */
.social-share-sidebar {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.social-share-sidebar a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  height: 38px;
  width: 38px;
  border-radius: 6px 0 0 6px;
  overflow: hidden;
  text-decoration: none;
  color: #F4F6FA;
  transition: width .28s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.social-share-sidebar a:hover { width: 148px; }
.social-share-sidebar a:hover .si-label { opacity: 1; transform: translateX(0); }

.si-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  order: 2;
}
.si-label {
  font-family: var(--ff-h);
  font-size: .8125rem;
  font-weight: 700;
  white-space: nowrap;
  padding-left: 12px;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .18s .06s ease, transform .18s .06s ease;
  order: 1;
  color: #F4F6FA;
}


/* ================================================================
   07. HERO SECTION
   .hero — full-height section with background image
   Overlay layers (stacked bottom→top):
     .h-scrim  — uniform dark coat
     .h-grad   — directional gradient
     .h-atm    — brand violet tints
     .h-patt   — subtle Kente-inspired grid
     .h-circle — rotating decorative ring
     .h-bar    — accent vertical line
   Content:
     .hero-inner, .h-eyebrow, .hero-h1, .hero-intro
     .aud-pills, .ap (.t / .b variants)
     .hsearch
     .h-event-box, .h-article-box (right-column cards)
     .h-statsbar, .hstat, .hstat-n, .hstat-l
================================================================ */

.hero {
  background-color: var(--dv);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Hero background image — replaces CSS background-image */
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

/* Layer 1 — base scrim */
.h-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.02); pointer-events: none; }

/* Layer 2 — directional gradient */
.h-grad {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,  rgba(10,4,22,.72) 0%, rgba(10,4,22,.35) 35%, rgba(10,4,22,.10) 100%),
    linear-gradient(to top,    rgba(10,4,22,.80) 0%, rgba(10,4,22,.20) 45%, transparent 85%);
  pointer-events: none;
}

/* Layer 3 — brand atmosphere */
.h-atm {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 80% 15%, rgba(89,45,140,.40) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 5%  85%, rgba(35,15,66,.55) 0%, transparent 55%);
  pointer-events: none;
}

/* Layer 4 — Kente-inspired grid texture */
.h-patt {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,   transparent 0, transparent 30px, rgba(246,238,39,.04) 30px, rgba(246,238,39,.04) 32px),
    repeating-linear-gradient(90deg,  transparent 0, transparent 60px, rgba(197,220,100,.02) 60px, rgba(197,220,100,.02) 62px);
  pointer-events: none;
}

/* Decorative rotating ring */
.h-circle {
  position: absolute; right: -80px; top: 30px;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 1px solid rgba(246,238,39,.1);
  animation: spin 60s linear infinite;
  pointer-events: none;
}
.h-circle::before {
  content: '';
  position: absolute; inset: 32px;
  border-radius: 50%;
  border: 1px solid rgba(197,220,100,.07);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Accent vertical bar */
.h-bar {
  position: absolute; top: 0; right: 220px;
  width: 3px; height: 100%;
  background: linear-gradient(to bottom, transparent, var(--ye) 30%, var(--gr) 70%, transparent);
  opacity: .22;
  pointer-events: none;
}

/* Hero content wrapper */
.hero-inner { position: relative; z-index: 10; padding-bottom: 0; }

/* Eyebrow label */
.h-eyebrow {
  font-family: var(--ff-h);
  font-size: 11px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ye);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
  animation: up .8s ease both;
}
.h-eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--ye); display: block; flex-shrink: 0; }

/* Main heading */
.hero-h1 {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  line-height: .94;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
  animation: up .8s .1s ease both;
}

/* Intro paragraph */
.hero-intro {
  font-family: var(--ff-s);
  font-size: 1.1rem; line-height: 1.7;
  color: rgba(255,255,255,.62);
  max-width: 520px; margin-bottom: 28px;
  animation: up .8s .2s ease both;
}
.hero-intro strong { font-style: normal; font-family: var(--ff-h); font-weight: 600; color: rgba(255,255,255,.85); }

/* Audience pills */
.aud-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; animation: up .8s .3s ease both; }

.ap {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 2px;
  font-family: var(--ff-h); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1.5px solid transparent;
  text-decoration: none; transition: all .2s;
}
.ap.t { background: var(--ye); color: var(--dv); border-color: var(--ye); }
.ap.t:hover { background: var(--gr); color: var(--dv); }
.ap.b { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.75); }
.ap.b:hover { background: rgba(89,45,140,.5); border-color: rgba(246,238,39,.4); color: var(--ye); }

/* Hero search bar */
.hsearch {
  display: flex; max-width: 500px;
  border: 2px solid rgba(246,238,39,.3); border-radius: 2px;
  overflow: hidden; transition: border-color .2s;
  animation: up .8s .4s ease both;
}
.hsearch:focus-within { border-color: var(--ye); }
.hsearch input {
  flex: 1; background: rgba(255,255,255,.08); border: none;
  padding: 13px 16px; font-family: var(--ff-b); font-size: 14px;
  color: #fff; outline: none;
}
.hsearch input::placeholder { color: rgba(255,255,255,.35); }
.hsearch button {
  background: var(--ye); border: none; padding: 0 20px;
  font-family: var(--ff-h); font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--dv); cursor: pointer; transition: background .18s;
}
.hsearch button:hover { background: var(--gr); }

/* Right-column: event box */
.h-event-box {
  background: rgba(89,45,140,.35);
  border: 1px solid rgba(246,238,39,.15);
  border-radius: 4px; padding: 18px 20px;
  max-width: 300px; width: 100%;
}
.h-event-img       { max-height: 75px; }
.h-event-eyebrow   { font-family: var(--ff-h); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ye); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.h-event-title     { font-family: var(--ff-h); font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 6px; }
.h-event-subtitle  { font-size: 13px; color: rgba(255,255,255,.45); font-weight: 300; }

/* Right-column: article box */
.h-article-box      { background: rgba(35,15,66,.65); border: 1px solid rgba(197,220,100,.15); border-radius: 4px; padding: 16px 20px; max-width: 270px; width: 100%; }
.h-article-img      { max-height: 60px; }
.h-article-eyebrow  { font-family: var(--ff-h); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gr); margin-bottom: 7px; }
.h-article-title    { font-family: var(--ff-h); font-size: .9rem; font-weight: 700; color: #fff; line-height: 1.3; }
.h-article-subtitle { font-size: 12px; color: rgba(255,255,255,.38); margin-top: 4px; font-weight: 300; }

/* Shared small button used in hero boxes */
.h-button { font-size: 11px; padding: 6px 14px; }

/* Stats bar below hero */
.h-statsbar {
  position: relative; z-index: 10;
  background: rgba(35,15,66,.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(246,238,39,.15);
}
.hstat { padding: 18px 20px; border-right: 1px solid rgba(246,238,39,.1); }
.hstat:last-child { border-right: none; }
.hstat-n { font-family: var(--ff-h); font-size: 1.9rem; font-weight: 800; color: var(--ye); line-height: 1; letter-spacing: -.02em; }
.hstat-l { font-family: var(--ff-b); font-size: 11px; font-weight: 500; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .07em; line-height: 1.4; }
.hstat-l strong { display: block; color: rgba(255,255,255,.8); font-family: var(--ff-h); font-size: 12px; font-weight: 700; margin-bottom: 1px; }

/* Shared animation keyframe */
@keyframes up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }


/* ================================================================
   08. MARQUEE STRIP
   .mstrip, .mtrack
================================================================ */
.mstrip { background: var(--ye); overflow: hidden; white-space: nowrap; padding: 13px 0; }
.mtrack {
  display: inline-flex; gap: 44px;
  animation: mq 80s linear infinite;
  padding-right: 44px;
}
.mtrack span { font-family: var(--ff-s); font-size: 13px; color: var(--dv); white-space: nowrap; }
.mtrack .st  { font-family: var(--ff-b); font-style: normal; font-size: .7rem; color: var(--mv); align-self: center; }
@keyframes mq { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }


/* ================================================================
   09. SECTION LABELS
   .eyebrow / .eyebrow-mv (same intent, dark section variant)
   .eyebrow-ye (light section variant — yellow text)
   .sh2 — section heading
   .sdesc — section description
================================================================ */
.eyebrow,
.eyebrow-mv {
  font-family: var(--ff-h);
  font-size: 0.9rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--mv);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.eyebrow::before,
.eyebrow-mv::before { content: ''; width: 20px; height: 2px; background: var(--ye); display: block; flex-shrink: 0; }

.eyebrow-ye {
  font-family: var(--ff-h);
  font-size: 0.9rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ye);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.eyebrow-ye::before { content: ''; width: 20px; height: 2px; background: var(--ye); display: block; flex-shrink: 0; }

.sh2 {
  font-family: var(--ff-h);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700; color: var(--dv);
  line-height: 1.05; letter-spacing: -.015em;
  text-transform: uppercase;
}
.sh2 em { font-style: italic; color: var(--mv); text-transform: none; }

.sdesc { font-family: var(--ff-b); font-size: 14px; color: var(--mu); line-height: 1.6; font-weight: 300; }


/* ================================================================
   10. BUTTONS
   .btn-p — primary (yellow fill)
   .btn-o — outline (dark purple border)
   .btn-g — ghost (semi-transparent, for dark backgrounds)
================================================================ */
.btn-p {
  background: var(--ye); color: var(--dv); border: none;
  padding: 11px 22px; font-family: var(--ff-h); font-size: 12px;
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 24px; text-decoration: none; display: inline-block;
  transition: background .18s, transform .2s;
}
.btn-p:hover { background: var(--gr); color: var(--dv); transform: translateY(-2px); }

.btn-o {
  background: transparent; color: var(--dv);
  border: 2px solid var(--dv); padding: 9px 20px;
  font-family: var(--ff-h); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: 24px; text-decoration: none; display: inline-block;
  transition: all .18s;
}
.btn-o:hover { background: var(--dv); color: var(--ye); }

.btn-g {
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75);
  border: 1.5px solid rgba(255,255,255,.18); padding: 8px 18px;
  font-family: var(--ff-h); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: 24px; text-decoration: none; display: inline-block;
  transition: all .18s;
}
.btn-g:hover { background: rgba(89,45,140,.5); border-color: rgba(246,238,39,.4); color: var(--ye); }

/* List a TSP button — used in .site-header context */
.btn-list-tsp {
  font-family: var(--ff-h); font-weight: 700; font-size: 0.8rem;
  background: var(--ye); color: var(--dv);
  border: none; border-radius: 4px; padding: .45rem 1.1rem;
  text-decoration: none; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; transition: background .15s, transform .1s;
}
.btn-list-tsp:hover { background: #fffb6e; color: var(--dv); transform: translateY(-1px); }

/* Button size modifier — large */
.btn-p.btn--lg,
.btn-o.btn--lg,
.btn-g.btn--lg {
  font-size: 14px;
  padding: 16px 40px;
  letter-spacing: .12em;
}

/* ================================================================
   11. DESTINATION CARDS (.dcard)
   Used in __home_section_regions.php
================================================================ */
.dcard {
  position: relative; border-radius: 4px; overflow: hidden;
  cursor: pointer; display: block; text-decoration: none;
  transition: transform .3s;
}
.dcard:hover { transform: translateY(-5px); }
.dcard::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ye), var(--gr));
  z-index: 3;
}

/* Gradient fallbacks shown while/if image fails to load */
.dg-a { background: linear-gradient(145deg,#0A0618 0%,#1A0A3A 40%,#3A1878 70%,#592D8C 100%); }
.dg-b { background: linear-gradient(145deg,#080D18 0%,#142038 40%,#203858 70%,#346890 100%); }
.dg-c { background: linear-gradient(145deg,#180A08 0%,#401808 40%,#783028 70%,#A05840 100%); }
.dg-d { background: linear-gradient(145deg,#0A1408 0%,#183018 40%,#285028 70%,#407840 100%); }
.dg-e { background: linear-gradient(145deg,#181008 0%,#403020 40%,#786040 70%,#B09060 100%); }
.dg-f { background: linear-gradient(145deg,#081018 0%,#1A2848 40%,#305880 70%,#50A0B8 100%); }

/* .dim wraps the <img> — acts as the gradient fallback container */
.dim { transition: transform .5s ease; }
.dcard:hover .dim { transform: scale(1.06); }

/* Real destination photo */
.dcard .dest-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .5s ease; display: block;
}
.dcard:hover .dest-photo { transform: scale(1.06); }

/* Overlay gradient — dark at bottom, clear at top */
.dov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,6,30,.92) 0%, rgba(14,6,30,.15) 55%, transparent 80%);
}

/* Text body at bottom of card */
.dbody { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 16px 16px; z-index: 2; }
.dreg  { font-family: var(--ff-h); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gr); margin-bottom: 3px; }
.dname { font-family: var(--ff-h); font-size: 1.1rem; font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -.01em; }
.dcard.lg .dname { font-size: 1.55rem; }


/* ================================================================
   12. EVENTS SECTION
   .eitem, .ebox, .eday, .emon, .etitle, .eloc, .etag, .eimg
   .evt-box (submit CTA panel)
================================================================ */
.eitem {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit; transition: all .15s;
}
.eitem:first-child { border-top: 1px solid var(--rule); }
.eitem:hover { background: rgba(89,45,140,.04); margin: 0 -8px; padding: 14px 8px; }

.ebox  { flex-shrink: 0; width: 50px; text-align: center; background: var(--dv); border-radius: 4px; padding: 8px 4px; }
.eday  { font-family: var(--ff-h); font-size: 1.4rem; font-weight: 800; color: var(--ye); line-height: 1; letter-spacing: -.02em; }
.emon  { font-family: var(--ff-h); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.eimg  { height: 100px; width: max-content; max-width: none !important; }
.etitle{ font-family: var(--ff-h); font-size: .92rem; font-weight: 700; color: var(--dv); margin-bottom: 2px; line-height: 1.2; }
.eloc  { font-size: 12px; color: var(--mu); font-weight: 300; }
.etag  { font-family: var(--ff-h); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mv); background: rgba(89,45,140,.1); padding: 2px 7px; border-radius: 2px; display: inline-block; margin-top: 3px; }

.evt-box {
  background: var(--dv); border-radius: 4px; padding: 26px 28px;
  height: 100%; position: relative; overflow: hidden;
}
.evt-box::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 30%, rgba(89,45,140,.5) 0%, transparent 60%);
}


/* ================================================================
   13. ARTICLE CARDS (.acard)
   Used in __home_section_articles.php / __home_section_what_to_do.php
================================================================ */
.acard {
  background: #fff; border: 1px solid var(--rule); border-radius: 4px;
  overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform .3s, box-shadow .3s; height: 100%;
}
.acard::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, var(--ye), var(--gr)); flex-shrink: 0; }
.acard:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(35,15,66,.12); }
.acard:hover .art-photo { transform: scale(1.05); }

.acimg {
  height: 200px; overflow: hidden; position: relative;
  transition: transform .5s ease;
  background-position: center; background-repeat: no-repeat; background-size: cover;
}
/* .aci is the gradient/emoji fallback inside .acimg */
.aci {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: rgba(255,255,255,.12);
  transition: transform .5s ease;
}

/* Real article photo */
.acard .art-photo {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; transition: transform .5s ease;
}

.acbody  { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; }
.accat   { font-family: var(--ff-h); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; display: inline-block; margin-bottom: 8px; }
.actitle { font-family: var(--ff-h); font-size: 1rem; font-weight: 700; color: var(--dv); line-height: 1.2; letter-spacing: -.01em; margin-bottom: 6px; }
.acdesc  { font-size: 13px; color: var(--mu); line-height: 1.6; font-weight: 300; flex: 1; margin-bottom: 12px; }
.acmeta  { font-size: 11px; color: var(--mu); display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--rule); }
.md      { width: 2.5px; height: 2.5px; border-radius: 50%; background: var(--mu); }


/* ================================================================
   14. PLACES TO STAY CARDS (.scard)
   Used in __home_section_places_to_stay.php
================================================================ */
.scard {
  background: var(--dv); border-radius: 4px; overflow: hidden;
  position: relative; cursor: pointer; transition: transform .3s;
  display: block; text-decoration: none;
}
.scard:hover { transform: translateY(-4px); }
.scard:hover .stay-photo { transform: scale(1.05); }

.scimg {
  height: 190px; position: relative; transition: transform .5s ease;
  background-position: center; background-repeat: no-repeat; background-size: cover;
}
.scov   { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,6,30,.9) 0%, rgba(14,6,30,.2) 55%, transparent 80%); }
.sprice { position: absolute; top: 12px; right: 12px; background: var(--ye); color: var(--dv); font-family: var(--ff-h); font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 2px; }

/* Real stay photo */
.scard .stay-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; transition: transform .5s ease;
}

.scbody { padding: 14px 16px; }
.scname { font-family: var(--ff-h); font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #fff; line-height: 1.2; margin-bottom: 3px; }
.scloc  { font-size: 12px; color: rgba(255,255,255,.45); font-weight: 300; }
.sctags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.st     { font-family: var(--ff-h); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; }
.st-y   { background: var(--ye); color: var(--dv); }
.st-g   { background: var(--gr); color: #1A3A00; }
.st-m   { background: rgba(89,45,140,.5); color: rgba(255,255,255,.8); }


/* ================================================================
   15. WHY SECTION
   .why-band, .wcard, .wi, .why-h2, .why-p
================================================================ */
.why-band { background: var(--dv); position: relative; overflow: hidden; }
.why-band::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 80% at 85% 30%, rgba(89,45,140,.5) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 10% 70%, rgba(246,238,39,.04) 0%, transparent 45%);
}
.why-band::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ye), var(--gr), var(--mv)); }

.wcard {
  background: rgba(89,45,140,.18); border: 1px solid rgba(246,238,39,.08);
  border-radius: 4px; padding: 24px 20px;
  position: relative; transition: background .2s, transform .25s; height: 100%;
}
.wcard:hover { background: rgba(89,45,140,.35); transform: translateY(-4px); }
.wcard::before { content: ''; position: absolute; top: 0; left: 20px; width: 28px; height: 3px; background: var(--ye); }
.wi { font-size: 1.8rem; margin: 12px 0; display: block; }
.wcard h4 { font-family: var(--ff-h); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: 8px; }
.wcard p  { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.45); font-weight: 300; margin: 0; }
.why-h2   { font-family: var(--ff-h); font-size: clamp(1.9rem,4vw,2.8rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; color: #fff; line-height: .96; margin-bottom: 8px; }
.why-p    { font-family: var(--ff-s); font-size: 1rem; color: rgba(255,255,255,.45); max-width: 400px; }


/* ================================================================
   16. INDUSTRY / BUSINESS SECTION
   .ind-band, .bcard, .bicon, .blink, .ind-h1, .ind-h2
================================================================ */
.ind-band { background: var(--wh2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.bcard {
  background: #fff; border: 1px solid var(--rule); border-radius: 4px;
  padding: 22px 20px; height: 100%; position: relative;
  transition: transform .25s, box-shadow .25s;
}
.bcard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--mv); border-radius: 4px 4px 0 0; }
.bcard:hover   { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(35,15,66,.1); }
.bicon { width: 42px; height: 42px; border-radius: 4px; background: var(--dv); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 12px; }
.bcard h4 { font-family: var(--ff-h); font-size: 14px; font-weight: 700; color: var(--dv); margin-bottom: 7px; letter-spacing: -.01em; }
.bcard p  { font-size: 13.5px; color: var(--mu); line-height: 1.6; font-weight: 300; margin-bottom: 12px; }
.blink    { font-family: var(--ff-h); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mv); text-decoration: none; transition: color .18s; }
.blink:hover { color: var(--dv); }
.blink::after { content: ' →'; }
.ind-h1 { font-family: var(--ff-h); font-size: 1.7rem; font-weight: 800; color: var(--ye); line-height: 1; letter-spacing: -.02em; }
.ind-h2 { font-size: 11px; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; font-weight: 500; }


/* ================================================================
   17. NEWSLETTER BAND
   .nl-band, .nl-form, .nl-i, .nl-b
================================================================ */
.nl-band { background: var(--mv); position: relative; overflow: hidden; }
.nl-band::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  transparent 0, transparent 24px, rgba(246,238,39,.04) 24px, rgba(246,238,39,.04) 26px),
    repeating-linear-gradient(90deg, transparent 0, transparent 24px, rgba(197,220,100,.03) 24px, rgba(197,220,100,.03) 26px);
}
.nl-form { display: flex; border: 2px solid rgba(246,238,39,.3); border-radius: 2px; overflow: hidden; max-width: 420px; transition: border-color .2s; }
.nl-form:focus-within { border-color: var(--ye); }
.nl-i { flex: 1; background: rgba(255,255,255,.08); border: none; padding: 12px 16px; font-family: var(--ff-b); font-size: 14px; color: #fff; outline: none; }
.nl-i::placeholder { color: rgba(255,255,255,.35); }
.nl-b { background: var(--ye); border: none; padding: 0 20px; font-family: var(--ff-h); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dv); cursor: pointer; transition: background .18s; }
.nl-b:hover { background: var(--gr); }


/* ================================================================
   18. COMMUNITY SECTION
   .comm-quote, .cite
================================================================ */
.comm-quote { font-family: var(--ff-s); font-size: 1.05rem; line-height: 1.65; color: var(--dv); margin-bottom: 14px; border: none; padding: 0; }
.cite       { font-family: var(--ff-h); font-size: 12px; font-weight: 700; color: var(--mu); letter-spacing: .06em; font-style: normal; }


/* ================================================================
   19. FOOTER
   Structure: <footer id="footer" class="dark">
     #footer — outer wrapper, dark background
     .footer-widgets-wrap — inner padded content area
     .col-mb-50 — row spacing utility (Canvas replacement)
     .widget — column content block
     .footer-logo — logo image
     .footer-text — intro blurb + hashtag
     .footer-icons — social icon row
     .footer-links — nav link columns (Travellers / Businesses / etc.)
     .title-font — column heading style
     .social-icon.si-small + .h-bg-* — social icon buttons
     #copyrights — bottom bar
     .copyright-links — legal links in bottom bar
================================================================ */

/* ── Outer footer wrapper ── */
#footer {
  background-color: var(--dv);
  border-top: 4px solid rgba(246,238,39,.2);
  color: rgba(255,255,255,.75);
  position: relative;
}

/* ── Inner content padding ── */
#footer .footer-widgets-wrap {
  padding: 4rem 0 2.5rem;
}

/* ── Dark theme text & link colours (class="dark" on <footer>) ── */
#footer .footer-widgets-wrap,
.dark#footer .footer-widgets-wrap {
  color: rgba(255,255,255,.7);
}
#footer .footer-widgets-wrap a,
.dark#footer .footer-widgets-wrap a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color .15s;
}
#footer .footer-widgets-wrap a:hover,
.dark#footer .footer-widgets-wrap a:hover {
  color: var(--ye);
}

/* ── col-mb spacing utility — Bootstrap-native replacement for Canvas col-mb-* ── */
[class*=col-mb-] { margin-bottom: 0; } /* reset Canvas negative margin trick */
[class*=col-mb-] > .col,
[class*=col-mb-] > [class*=col-] { padding-bottom: var(--col-mb, 50px); }
.col-mb-30 { --col-mb: 30px; }
.col-mb-50 { --col-mb: 50px; }
.col-mb-80 { --col-mb: 80px; }

/* ── Widget blocks ── */
.widget {
  position: relative;
  margin-top: 0;
}
.widget p { line-height: 1.7; }
.widget:first-child { margin-top: 0; }

/* ── Logo ── */
.footer-logo {
  display: block;
  height: 48px;
  width: auto;
  margin-bottom: 16px;
}

/* ── Intro text block ── */
.footer-text {
  font-family: var(--ff-b);
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255,255,255,.6);
  padding: 0;
}

/* ── Social icons row ── */
.footer-icons {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Social icon base ──
   Two <i> tags stack vertically inside a fixed-height overflow:hidden
   container. At rest: first icon visible. On hover: both shift up by
   one icon-height, hiding the first and revealing the second (which
   carries the brand colour background via .h-bg-* on the <a>).
── */
.social-icon {
  --si-size: 2rem;
  --si-fs: .875rem;
  position: relative;
  display: inline-flex;
  flex-direction: column;       /* stack icons vertically */
  align-items: center;
  width: var(--si-size);
  height: var(--si-size);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.75);
  text-decoration: none;
  overflow: hidden;             /* clips the second icon until hover */
  transition: border-color .2s, color .2s;
  flex-shrink: 0;
}
.social-icon.si-small {
  --si-size: 2rem;
  --si-fs: .875rem;
}

/* Each icon fills exactly one slot height */
.social-icon i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--si-size);
  height: var(--si-size);
  font-size: var(--si-fs);
  flex-shrink: 0;
  transition: margin-top .28s ease;
}

/* On hover: shift both icons up by one slot — first hides, second appears */
.social-icon:hover i:first-child {
  margin-top: calc(var(--si-size) * -1);
}

/* Second icon always white (sits on brand colour background) */
.social-icon i:last-child { color: #fff; }

.social-icon:hover {
  border-color: transparent;
  color: #fff;
}

/* ── Social brand colours — all platforms used in footer & share sidebar ── */
.bg-facebook,    .h-bg-facebook:hover    { background-color: #3b5998 !important; }
.bg-linkedin,    .h-bg-linkedin:hover    { background-color: #0e76a8 !important; }
.bg-whatsapp,    .h-bg-whatsapp:hover    { background-color: #25d366 !important; }
.bg-twitter,     .h-bg-twitter:hover     { background-color: #00acee !important; }
.bg-x-twitter,   .h-bg-x-twitter:hover   { background-color: #010101 !important; }
.bg-instagram,   .h-bg-instagram:hover   { background-color: #e1306c !important; }
.bg-youtube,     .h-bg-youtube:hover     { background-color: #ff0000 !important; }
.bg-tiktok,      .h-bg-tiktok:hover      { background-color: #010101 !important; }
.bg-pinterest,   .h-bg-pinterest:hover   { background-color: #c8232c !important; }
.bg-rss,         .h-bg-rss:hover         { background-color: #ee802f !important; }
.bg-email3,      .h-bg-email3:hover      { background-color: #6567a5 !important; }

/* ── Footer link columns ── */
.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
  font-size: .875rem;
}
/* Chevron bullet using FontAwesome Light (fa-light fa-chevron-right) */
.footer-links li::before {
  content: "\f054";
  font-family: "Font Awesome 6 Pro";
  font-weight: 300;
  font-size: .6rem;
  color: var(--ye);
  flex-shrink: 0;
  opacity: .8;
}
.footer-links li a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .15s;
  font-weight: 300;
}
.footer-links li a:hover { color: var(--ye); }

/* ── Column headings (Travellers / Businesses / etc.) ── */
.title-font {
  font-family: var(--ff-h);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.9);
}

/* ── Colour utility used on the #GhanaTRVL hashtag line ── */
.color-yellow { color: var(--ye) !important; }

/* ── Copyrights bar ── */
#copyrights {
  padding: 1.25rem 0;
  background-color: rgba(0,0,0,.25);
  font-size: .8rem;
  color: rgba(255,255,255,.35);
  line-height: 1.6;
}

.copyright-links {
  margin-top: .35rem;
  color: rgba(255,255,255,.35);
}
.copyright-links a {
  display: inline-block;
  margin: 0 .35rem;
  color: rgba(255,255,255,.35);
  border-bottom: 1px dotted rgba(255,255,255,.2);
  text-decoration: none;
  font-size: .8rem;
  transition: color .15s;
}
.copyright-links a:hover { color: var(--ye); border-bottom-color: var(--ye); }
.copyright-links a:first-child { margin-left: 0; }


/* ================================================================
   20. LEGAL PAGES
   Used in _legal_body.php
   .legal-hero, .breadcrumb-bar, .legal-doc-nav,
   .legal-body, .legal-layout, .legal-sidebar, .legal-content,
   .toc-label, .toc-list, .sidebar-divider, .sidebar-contact-note,
   .content-lead, .section-rule, .legal-highlight, .contact-card,
   .meta-pill
================================================================ */

/* Hero band */
.legal-hero { background: var(--dv); padding: 2.5rem 0 2rem; border-bottom: 3px solid var(--ye); }
.legal-hero h1 { font-family: var(--ff-h); font-weight: 800; font-size: clamp(1.75rem,3vw,2.5rem); color: #fff; letter-spacing: -.025em; margin-bottom: .5rem; line-height: 1.15; }
.legal-hero .subtitle { font-family: var(--ff-s); font-style: italic; font-size: 1rem; color: rgba(255,255,255,.65); margin-bottom: 0; }
.legal-hero .meta-pill { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: .3rem .85rem; font-family: var(--ff-h); font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.6); margin-top: 1rem; }
.legal-hero .meta-pill i { font-size: .7rem; }

/* Breadcrumb bar */
.breadcrumb-bar { display: flex; align-items: center; gap: .4rem; margin-bottom: 1rem; }
.breadcrumb-bar a, .breadcrumb-bar span { font-family: var(--ff-h); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.5); text-decoration: none; }
.breadcrumb-bar a:hover { color: var(--ye); }
.breadcrumb-bar .sep { color: rgba(255,255,255,.3); font-size: .7rem; }
.breadcrumb-bar .current { color: var(--ye); }

/* Doc type nav tabs */
.legal-doc-nav { background: var(--mv); border-bottom: 1px solid rgba(255,255,255,.1); }
.legal-doc-nav .nav-link {
  font-family: var(--ff-h); font-weight: 700; font-size: .78rem !important;
  text-transform: uppercase; letter-spacing: .05em;
  color: rgba(255,255,255,.6) !important;
  padding: .75rem 1.1rem; border-bottom: 3px solid transparent;
  border-radius: 0; text-decoration: none; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.legal-doc-nav .nav-link:hover  { color: rgba(255,255,255,.9) !important; border-bottom-color: rgba(255,255,255,.3); }
.legal-doc-nav .nav-link.active { color: var(--ye) !important; border-bottom-color: var(--ye); }

/* Page body */
.legal-body { background: var(--wh); min-height: 60vh; }

/* Sidebar + content grid */
.legal-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 0; align-items: start; }
@media (max-width: 991.98px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-sidebar { display: none; }
}

/* Sidebar */
.legal-sidebar {
  position: sticky; top: 58px;
  padding: 2.5rem 0; border-right: 1px solid var(--rule);
  background: #fff; min-height: calc(100vh - 58px);
}
.toc-label { font-family: var(--ff-h); font-weight: 800; font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mu); padding: 0 1.5rem; margin-bottom: .75rem; }
.toc-list  { list-style: none; padding: 0; margin: 0 0 2rem; }
.toc-list li a {
  display: block; font-family: var(--ff-b); font-weight: 400; font-size: .8125rem;
  color: var(--mu); text-decoration: none; padding: .35rem 1.5rem;
  border-left: 3px solid transparent;
  transition: color .15s, border-color .15s, background .15s; line-height: 1.4;
}
.toc-list li a:hover { color: var(--mv); background: var(--wh); border-left-color: var(--rule); }
.toc-list li a.active { color: var(--dv); font-weight: 500; border-left-color: var(--ye); background: #fafbff; }
.sidebar-divider      { height: 1px; background: var(--rule); margin: 1rem 1.5rem 1.5rem; }
.sidebar-contact-note { padding: 0 1.5rem; }
.sidebar-contact-note p { font-size: .75rem; color: var(--mu); line-height: 1.5; margin-bottom: .5rem; }
.sidebar-contact-note a { font-size: .75rem; font-weight: 600; color: var(--mv); text-decoration: none; }
.sidebar-contact-note a:hover { text-decoration: underline; }

/* Main content */
.legal-content { padding: 3rem 3.5rem 4rem 3rem; max-width: 780px; }
@media (max-width: 1199.98px) { .legal-content { padding: 2.5rem 2rem 3rem; } }

.content-lead { font-family: var(--ff-s); font-style: italic; font-size: 1.0625rem; color: #3d3050; line-height: 1.7; border-left: 4px solid var(--ye); padding: 1rem 1.25rem; background: #fffef0; border-radius: 0 6px 6px 0; margin-bottom: 2.5rem; }

.legal-content h2 { font-family: var(--ff-h); font-weight: 800; font-size: clamp(1.1rem,4vw,1.5rem) !important; color: var(--dv); margin-top: 2.5rem; margin-bottom: .75rem; letter-spacing: -.01em; scroll-margin-top: 80px; }
.legal-content h3 { font-family: var(--ff-h); font-weight: 700; font-size: clamp(1.1rem,4vw,1.3rem) !important; color: var(--mv); margin-top: 1.5rem; margin-bottom: .5rem; scroll-margin-top: 80px; }
.legal-content p, .legal-content ul, .legal-content ol { font-family: var(--ff-b); font-weight: 300; font-size: clamp(.9rem,3vw,1.1rem) !important; color: #2a1f3d; line-height: 1.8; margin-bottom: 1rem; }
.legal-content ul, .legal-content ol { padding-left: 1.5rem; }
.legal-content ul li, .legal-content ol li { margin-bottom: .35rem; }
.legal-content a { color: var(--mv); font-weight: 500; text-underline-offset: 3px; }
.legal-content a:hover { color: var(--dv); }

.section-rule { border: none; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

.legal-highlight { background: #f0ecff; border: 1px solid #d6cef7; border-radius: 8px; padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: .875rem; color: var(--dv); line-height: 1.6; }
.legal-highlight strong { font-weight: 700; display: block; margin-bottom: .25rem; }

.contact-card { background: var(--dv); border-radius: 10px; padding: 1.5rem 2rem; margin-top: 3rem; }
.contact-card h3 { font-family: var(--ff-h); font-weight: 800; font-size: 1rem; color: var(--ye); margin-bottom: .5rem; }
.contact-card p  { font-size: .875rem; color: rgba(255,255,255,.75); margin-bottom: .35rem; }
.contact-card a  { color: var(--gr); font-weight: 500; text-decoration: none; }
.contact-card a:hover { color: var(--wh); }


/* ================================================================
   21. UTILITY HELPERS
================================================================ */

/* Inline article / doc links */
.a-link       { color: var(--mv) !important; font-weight: 700 !important; }
.a-link:hover { color: #fff !important; font-weight: 700 !important; background-color: var(--gr) !important; }
.a-link:not(.btn-link):not(.text-decoration-underline):not(.more-link) { text-decoration: underline !important; }

/* Text colour shortcuts */
.white        { color: #fff !important; }
.color-purple { color: var(--mv) !important; }
.color-dark   { color: var(--dv) !important; }
.color-orange { color: #ffa604 !important; }
.cancelled    { color: red !important; }

/* Text transform */
.caps { text-transform: uppercase; }

/* Bootstrap fs extension */
.fs-7  { font-size: .9rem !important; }
.fs-8  { font-size: .8rem !important; }
.fs-9  { font-size: .7rem !important; }
.fs-10 { font-size: .6rem !important; }

/* Legacy f-* sizes (used in older partials) */
.f-12  { font-size: 12px; line-height: 16px; display: inline-block; }
.f-15  { font-size: 15px; line-height: 20px; display: inline-block; }
.f-16  { font-size: 16px; line-height: 25px; display: inline-block; }
.f-18  { font-size: 18px; line-height: 26px; display: inline-block; }
.f-24  { font-size: 24px; line-height: 28px; display: inline-block; }

/* Opacity helpers */
.opacity-9 { opacity: .9 !important; }
.opacity-8 { opacity: .8 !important; }
.opacity-7 { opacity: .7 !important; }
.opacity-6 { opacity: .6 !important; }
.opacity-5 { opacity: .5 !important; }

/* Image helpers */
.img-rounded { border-radius: 6px; }
.h-200       { max-height: 200px; height: 100%; }
.w-200       { max-width: 200px; width: 100%; }
.w-150       { max-width: 150px; width: 100%; }
.w-100-std   { width: 100%; }

/* Drop shadow for card-like links */
.drop-shadow { text-decoration: none !important; box-shadow: -11px -11px 25px rgba(255,255,255,.35), 11px 13px 25px rgba(165,181,208,.6); }

/* Modal width override */
.modal { --bs-modal-width: 800px !important; }

/* Back-to-top button */
#gotoTop { position: fixed; bottom: 30px; right: 14px; z-index: 1000; cursor: pointer; font-size: 1.25rem; color: var(--dv); background: var(--ye); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: opacity .2s, transform .2s; }
#gotoTop:hover { transform: translateY(-3px); }


/* ================================================================
   22. KLARO COOKIE CONSENT
   Bootstrap 5 / GhanaTRVL brand-aligned overrides.
   All colours reference :root tokens.
   Load klaro-no-css.js (not klaro.js) to prevent Klaro's
   bundled styles from conflicting.
================================================================ */

/* Base typography */
.klaro, .klaro button { font-family: var(--ff-b); font-size: 14px; }
.klaro.cm-as-context-notice { height: 100%; padding: 12px; }

/* Service toggle list */
.klaro .cookie-modal .cm-switch-container,
.klaro .context-notice .cm-switch-container,
.klaro .cookie-notice .cm-switch-container {
  border-bottom: 1px solid var(--rule);
  display: block; position: relative;
  padding: 10px 10px 10px 66px;
  line-height: 20px; vertical-align: middle; min-height: 40px;
}
.klaro .cookie-modal .cm-switch-container:last-child,
.klaro .context-notice .cm-switch-container:last-child,
.klaro .cookie-notice .cm-switch-container:last-child  { border-bottom: 0; }
.klaro .cookie-modal .cm-switch-container:first-child,
.klaro .context-notice .cm-switch-container:first-child,
.klaro .cookie-notice .cm-switch-container:first-child  { margin-top: 0; }
.klaro .cookie-modal .cm-switch-container p,
.klaro .context-notice .cm-switch-container p,
.klaro .cookie-notice .cm-switch-container p            { margin-top: 0; }

.klaro .cookie-modal .cm-switch,
.klaro .context-notice .cm-switch,
.klaro .cookie-notice .cm-switch { position: relative; display: inline-block; width: 50px; height: 30px; }

/* Toggle on — brand green */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider { background-color: var(--gr); }

.klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.half-checked:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.half-checked:checked + .cm-list-label .slider { background-color: var(--gr); opacity: .6; }
.klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider::before,
.klaro .context-notice .cm-list-input.half-checked:checked + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input.half-checked:checked + .cm-list-label .slider::before { transform: translateX(10px); }

/* Required — muted purple */
.klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.only-required + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.only-required + .cm-list-label .slider { background-color: var(--mu); opacity: .8; }
.klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider::before,
.klaro .context-notice .cm-list-input.only-required + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input.only-required + .cm-list-label .slider::before { transform: translateX(10px); }

.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider { background-color: var(--mu); opacity: .8; cursor: not-allowed; }

/* Slider track & knob */
.klaro .cookie-modal .cm-list-input,
.klaro .context-notice .cm-list-input,
.klaro .cookie-notice .cm-list-input { position: absolute; top: 0; left: 0; opacity: 0; width: 50px; height: 30px; }

.klaro .cookie-modal .cm-list-label .slider,
.klaro .context-notice .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider {
  background-color: var(--wh2); position: absolute; cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0; transition: .4s; width: 50px; display: inline-block;
  box-shadow: 0 4px 6px 0 rgba(0,0,0,.2), 5px 5px 10px 0 rgba(0,0,0,.19);
}
.klaro .cookie-modal .cm-list-label .slider::before,
.klaro .context-notice .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-label .slider::before {
  background-color: var(--wh); position: absolute; content: "";
  height: 20px; width: 20px; left: 5px; bottom: 5px; transition: .4s;
}
.klaro .cookie-modal .cm-list-label .slider.round,
.klaro .context-notice .cm-list-label .slider.round,
.klaro .cookie-notice .cm-list-label .slider.round { border-radius: 30px; }
.klaro .cookie-modal .cm-list-label .slider.round::before,
.klaro .context-notice .cm-list-label .slider.round::before,
.klaro .cookie-notice .cm-list-label .slider.round::before { border-radius: 50%; }

.klaro .cookie-modal .cm-list-label input:focus + .slider,
.klaro .context-notice .cm-list-label input:focus + .slider,
.klaro .cookie-notice .cm-list-label input:focus + .slider { box-shadow: 0 0 0 2px var(--ye); }

.klaro .cookie-modal .cm-list-label input:checked + .slider::before,
.klaro .context-notice .cm-list-label input:checked + .slider::before,
.klaro .cookie-notice .cm-list-label input:checked + .slider::before { transform: translateX(20px); }
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider::before { transform: translateX(20px); }

/* Service list text */
.klaro .cookie-modal .cm-list-title,
.klaro .context-notice .cm-list-title,
.klaro .cookie-notice .cm-list-title { font-size: .9em; font-weight: 600; }
.klaro .cookie-modal .cm-list-description,
.klaro .context-notice .cm-list-description,
.klaro .cookie-notice .cm-list-description { color: var(--mu); font-size: .9em; padding-top: 4px; }
.klaro .cookie-modal .cm-list-label .cm-switch,
.klaro .context-notice .cm-list-label .cm-switch,
.klaro .cookie-notice .cm-list-label .cm-switch { position: absolute; left: 0; }
.klaro .cookie-modal .cm-link,
.klaro .context-notice .cm-link,
.klaro .cookie-notice .cm-link { margin-right: .5em; vertical-align: middle; }

/* Links */
.klaro .cookie-modal a, .klaro .context-notice a, .klaro .cookie-notice a { color: var(--ye); text-decoration: none; }
.klaro .cookie-modal a:hover, .klaro .context-notice a:hover, .klaro .cookie-notice a:hover { color: var(--gr); }

/* Body text (on dark bg) */
.klaro .cookie-modal p, .klaro .cookie-modal strong,
.klaro .cookie-modal h1, .klaro .cookie-modal h2,
.klaro .cookie-modal ul, .klaro .cookie-modal li,
.klaro .context-notice p, .klaro .context-notice strong,
.klaro .context-notice h1, .klaro .context-notice h2,
.klaro .context-notice ul, .klaro .context-notice li,
.klaro .cookie-notice p, .klaro .cookie-notice strong,
.klaro .cookie-notice h1, .klaro .cookie-notice h2,
.klaro .cookie-notice ul, .klaro .cookie-notice li { color: var(--wh); }

.klaro .cookie-modal p, .klaro .cookie-modal h1, .klaro .cookie-modal h2,
.klaro .cookie-modal ul, .klaro .cookie-modal li,
.klaro .context-notice p, .klaro .context-notice h1, .klaro .context-notice h2,
.klaro .context-notice ul, .klaro .context-notice li,
.klaro .cookie-notice p, .klaro .cookie-notice h1, .klaro .cookie-notice h2,
.klaro .cookie-notice ul, .klaro .cookie-notice li { display: block; text-align: left; margin: 0; padding: 0; margin-top: .7em; }

.klaro .cookie-modal h1, .klaro .cookie-modal h2, .klaro .cookie-modal h3,
.klaro .cookie-modal h4, .klaro .cookie-modal h5, .klaro .cookie-modal h6,
.klaro .context-notice h1, .klaro .context-notice h2, .klaro .context-notice h3,
.klaro .context-notice h4, .klaro .context-notice h5, .klaro .context-notice h6,
.klaro .cookie-notice h1, .klaro .cookie-notice h2, .klaro .cookie-notice h3,
.klaro .cookie-notice h4, .klaro .cookie-notice h5, .klaro .cookie-notice h6 { font-family: var(--ff-h); }

/* Buttons */
.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn,
.klaro .cookie-notice .cm-btn {
  font-family: var(--ff-h); font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--wh); background-color: var(--mv);
  border-radius: 24px; border: none; padding: 8px 16px; margin-right: .5em;
  cursor: pointer; transition: background .18s, transform .2s;
}
.klaro .cookie-modal .cm-btn:hover,
.klaro .context-notice .cm-btn:hover,
.klaro .cookie-notice .cm-btn:hover { background-color: var(--dv); transform: translateY(-1px); }
.klaro .cookie-modal .cm-btn:disabled,
.klaro .context-notice .cm-btn:disabled,
.klaro .cookie-notice .cm-btn:disabled { opacity: .5; }

/* Accept all — yellow */
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .context-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success { background-color: var(--ye); color: var(--dv); }
.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .context-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success:hover { background-color: var(--gr); color: var(--dv); }

/* Save my choices — green */
.klaro .cookie-modal .cm-btn.cm-btn-success-var,
.klaro .context-notice .cm-btn.cm-btn-success-var,
.klaro .cookie-notice .cm-btn.cm-btn-success-var { background-color: var(--gr); color: var(--dv); }

/* Manage preferences — medium purple */
.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .context-notice .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-info { background-color: var(--mv); color: var(--wh); }

/* Close — subtle outline */
.klaro .cookie-modal .cm-btn.cm-btn-close,
.klaro .context-notice .cm-btn.cm-btn-close,
.klaro .cookie-notice .cm-btn.cm-btn-close { background-color: transparent; color: var(--wh); border: 1.5px solid rgba(244,246,250,.35); }
.klaro .cookie-modal .cm-btn.cm-btn-close:hover,
.klaro .context-notice .cm-btn.cm-btn-close:hover,
.klaro .cookie-notice .cm-btn.cm-btn-close:hover { background-color: rgba(244,246,250,.1); }

/* Context notice (inline embed) */
.klaro .context-notice {
  border-radius: 4px; border: 1px solid var(--rule); background-color: var(--wh2);
  display: flex; flex-direction: column; flex-wrap: wrap;
  align-items: center; justify-content: center; padding: 12px; height: 100%;
}
.klaro .context-notice.cm-dark { background-color: var(--dv); border-color: var(--mv); }
.klaro .context-notice.cm-dark p { color: var(--wh); }
.klaro .context-notice.cm-dark p a { color: var(--ye); }
.klaro .context-notice p { color: var(--bk); flex-grow: 0; text-align: center; padding-top: 0; margin-top: 0; }
.klaro .context-notice p a { color: var(--mv); }
.klaro .context-notice p.cm-buttons { margin-top: 12px; }
.klaro .context-notice p.ccn-description-empty-store { margin-top: 24px; font-size: 14px; }

/* Cookie modal overlay */
.klaro .cookie-modal { width: 100%; height: 100%; position: fixed; overflow: hidden; left: 0; top: 0; z-index: 1000; }
.klaro .cookie-modal.cm-embedded { position: relative; height: inherit; width: inherit; left: inherit; right: inherit; z-index: 0; }
.klaro .cookie-modal.cm-embedded .cm-modal.cm-klaro { position: relative; transform: none; }
.klaro .cookie-modal .cm-bg { background: rgba(35,15,66,.65); height: 100%; width: 100%; position: fixed; top: 0; left: 0; }

/* Modal panel */
.klaro .cookie-modal .cm-modal.cm-klaro {
  background-color: var(--dv); color: var(--wh);
  z-index: 1001; box-shadow: 0 4px 6px 0 rgba(0,0,0,.3), 5px 5px 10px 0 rgba(0,0,0,.2);
  width: 100%; max-height: 98%; top: 50%; transform: translateY(-50%);
  position: fixed; overflow: auto;
}
@media (min-width: 660px) {
  .klaro .cookie-modal .cm-modal.cm-klaro { border-radius: 8px; position: relative; margin: 0 auto; max-width: 640px; height: auto; width: auto; }
}

.klaro .cookie-modal .cm-modal .hide { border: none; background: none; cursor: pointer; position: absolute; top: 20px; right: 20px; z-index: 1; }
.klaro .cookie-modal .cm-modal .hide svg { stroke: var(--wh); }
.klaro .cookie-modal .cm-modal .cm-footer { border-top: 1px solid var(--mv); padding: 1em; }
.klaro .cookie-modal .cm-modal .cm-footer-buttons { display: flex; flex-flow: row; justify-content: space-between; }
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by { font-size: .8em; padding-top: 4px; text-align: right; padding-right: 8px; }
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a { color: var(--mu); }
.klaro .cookie-modal .cm-modal .cm-header { border-bottom: 1px solid var(--mv); padding: 1em; padding-right: 24px; }
.klaro .cookie-modal .cm-modal .cm-header h1 { margin: 0; font-size: 1.4em !important; font-family: var(--ff-h); display: block; }
.klaro .cookie-modal .cm-modal .cm-header h1.title { padding-right: 20px; }
.klaro .cookie-modal .cm-modal .cm-body { padding: 1em; }
.klaro .cookie-modal .cm-modal .cm-body ul { display: block; }
.klaro .cookie-modal .cm-modal .cm-body span { display: inline-block; width: auto; }
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes { padding: 0; margin: 0; }
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-caret,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-caret { color: var(--mu); }
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-content,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-content { margin-left: -40px; display: none; }
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-content.expanded,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-content.expanded { margin-top: 10px; display: block; }
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose { position: relative; line-height: 20px; vertical-align: middle; padding-left: 60px; min-height: 40px; }
.klaro .cookie-modal .cm-modal .cm-body ul li:first-child { margin-top: 0; }
.klaro .cookie-modal .cm-modal .cm-body ul li p { margin-top: 0; }
.klaro .cookie-modal .cm-modal .cm-body ul li p.purposes { color: var(--mu); font-size: .8em; }
.klaro .cookie-modal .cm-modal .cm-body ul li.cm-toggle-all { border-top: 1px solid var(--mv); padding-top: 1em; }
.klaro .cookie-modal .cm-modal .cm-body ul li span.cm-list-title { font-weight: 600; }
.klaro .cookie-modal .cm-modal .cm-body ul li span.cm-opt-out,
.klaro .cookie-modal .cm-modal .cm-body ul li span.cm-required { color: var(--mu); padding-left: .2em; font-size: .8em; }

/* Cookie banner (bottom popup) */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  background-color: var(--dv); z-index: 999;
  position: fixed; width: 100%; bottom: 0; right: 0;
}
@media (min-width: 1024px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    border-radius: 8px; position: fixed; right: 20px; left: auto;
    bottom: 20px; top: auto; max-width: 420px;
    box-shadow: 0 4px 24px 0 rgba(35,15,66,.5);
  }
}
@media (max-width: 1023px) { .klaro .cookie-notice:not(.cookie-modal-notice) { border-radius: 0; } }
.klaro .cookie-notice:not(.cookie-modal-notice).cn-embedded { position: relative; height: inherit; width: inherit; left: inherit; right: inherit; bottom: inherit; z-index: 0; }
.klaro .cookie-notice:not(.cookie-modal-notice).cn-embedded .cn-body { padding-top: .5em; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body { margin-bottom: 0; margin-right: 0; bottom: 0; padding: 1em; padding-top: 0; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p { margin-bottom: .5em; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p.cn-changes { text-decoration: underline; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more { display: inline-block; flex-grow: 1; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons { display: inline-block; margin-top: -.5em; }
@media (max-width: 384px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons { width: 100%; }
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn { width: calc(50% - .5em); }
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn { margin-top: .5em; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok { margin-top: -.5em; display: flex; flex-flow: row; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok div { margin-top: .5em; }

/* Cookie modal-notice (full modal variant) */
.klaro .cookie-modal-notice {
  background-color: var(--dv); color: var(--wh); z-index: 1001;
  box-shadow: 0 4px 6px 0 rgba(0,0,0,.3), 5px 5px 10px 0 rgba(0,0,0,.2);
  width: 100%; max-height: 98%; top: 50%; transform: translateY(-50%);
  position: fixed; overflow: auto; padding: 1em; padding-top: .2em;
}
@media (min-width: 400px) {
  .klaro .cookie-modal-notice { border-radius: 8px; position: relative; margin: 0 auto; max-width: 420px; height: auto; width: auto; }
}
.klaro .cookie-modal-notice .cn-ok { display: flex; flex-flow: row; justify-content: space-between; align-items: center; margin-top: 1em; }
.klaro .cookie-notice-hidden { display: none !important; }