/* ==========================================================================
   PALPGL — Global Stylesheet
   Palette: Deep Blue / Green / White / Light Grey / Accent Gold
   Fonts: Poppins (UI) · Playfair Display (headings) · Inter (body)
   ========================================================================== */

/* ── Custom properties ──────────────────────────────────────────────────── */
:root {
  /* ── Palette drawn from the PALPGL logo arcs ── */
  --blue:          #0d47a8;   /* logo blue arc */
  --blue-dark:     #081e4a;   /* deepest navy */
  --blue-mid:      #1756c4;   /* brighter logo blue */
  --blue-light:    #dce8f8;
  --green:         #1aad45;   /* logo green arc */
  --green-light:   #22c950;
  --green-pale:    #e6f8ed;
  --gold:          #e8b800;   /* logo yellow arc */
  --gold-light:    #f5cc20;
  --gold-pale:     #fdf8da;
  --white:         #ffffff;
  --grey-50:       #f6f8fb;
  --grey-100:      #edf1f7;
  --grey-200:      #dce4ef;
  --grey-400:      #8fa3bc;
  --grey-600:      #4e5f72;
  --grey-800:      #192132;

  --font-heading:  'Playfair Display', Georgia, serif;
  --font-ui:       'Poppins', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;

  --radius-sm:     0.5rem;
  --radius-md:     0.875rem;
  --radius-lg:     1.25rem;
  --radius-xl:     1.75rem;

  --shadow-xs:     0 1px 4px rgba(11,42,74,.06);
  --shadow-sm:     0 4px 16px rgba(11,42,74,.10);
  --shadow-md:     0 12px 32px rgba(11,42,74,.14);
  --shadow-lg:     0 24px 56px rgba(11,42,74,.18);

  --topbar-h:      40px;
  --header-h:      72px;
  --transition:    0.25s ease;
}

/* ── Reset & base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--grey-800);
  background: #0b1a35; /* deep navy — visible on very wide viewports */
  overflow-x: hidden;
  font-size: 1rem;
  line-height: 1.7;
}

/* ── Site wrapper: full-width, no white box ─────────────────────────────── */
/* Backgrounds of each section extend edge-to-edge.                          */
/* Content is constrained by .container (70 % of standard Bootstrap width).  */
.site-wrapper {
  overflow-x: clip;
  position: relative;
}

/* ── Content container: ~70 % of viewport (≈ 960 px cap) ─────────────────── */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 980px !important;
}

h1, h2, h3, .display-font {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--blue);
  line-height: 1.25;
}

h4, h5, h6 { font-family: var(--font-ui); font-weight: 600; color: var(--blue); }

a { color: var(--blue); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--green); }

img { max-width: 100%; height: auto; }

.skip-link {
  position: absolute; left: -999px; top: auto; z-index: 9999;
}
.skip-link:focus {
  left: 1rem; top: 1rem; background: #fff; color: var(--blue);
  padding: .5rem 1.25rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}


/* ══════════════════════════════════════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════════════════════════════════════ */
.topbar {
  background: var(--blue-dark);
  height: var(--topbar-h);
  font-family: var(--font-ui);
  font-size: .78rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.topbar-left, .topbar-right {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.topbar-left a, .topbar-left span {
  color: rgba(255,255,255,.65);
  display: flex;
  align-items: center;
  gap: .35rem;
  transition: color var(--transition);
}
.topbar-left a:hover { color: var(--gold-light); }
.topbar-sep { color: rgba(255,255,255,.2); }

.topbar-social { display: flex; align-items: center; gap: .5rem; }
.topbar-social a {
  color: rgba(255,255,255,.55);
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  transition: all var(--transition);
}
.topbar-social a:hover { color: var(--gold-light); background: rgba(255,255,255,.08); }

.lang-switch { display: flex; align-items: center; gap: .35rem; font-size: .78rem; }
.lang-switch a { color: rgba(255,255,255,.6); font-weight: 500; padding: .1rem .3rem; border-radius: 3px; transition: all var(--transition); }
.lang-switch a.active { color: var(--gold-light); font-weight: 700; }
.lang-switch a:hover { color: var(--gold-light); }
.lang-switch span { color: rgba(255,255,255,.2); }


/* ══════════════════════════════════════════════════════════════════════════
   MAIN HEADER / NAVBAR
   ══════════════════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1050;
  background: #fff;
  box-shadow: 0 2px 16px rgba(13,71,168,.10);
  transition: all .35s ease;
  border-bottom: 3px solid var(--blue);
}
.site-header.scrolled {
  background: #fff;
  box-shadow: 0 4px 24px rgba(13,71,168,.14);
}

.navbar { padding: .7rem 0; font-family: var(--font-ui); }

/* Brand — no circle, just the logo */
.navbar-brand {
  display: flex; align-items: center;
  text-decoration: none;
}
.nav-logo-wrap {
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition);
}
.navbar-brand:hover .nav-logo-wrap { transform: scale(1.04); }
.nav-logo { height: 62px; width: auto; display: block; }

/* Nav links */
.navbar-nav .nav-link {
  color: var(--blue) !important;
  font-weight: 600;
  font-size: .88rem;
  padding: .45rem .65rem !important;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  position: relative;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--green) !important;
  background: rgba(26,173,69,.07);
}
.navbar-nav .nav-link.active:not(.dropdown-toggle)::after {
  content: '';
  position: absolute;
  bottom: -2px; left: .65rem; right: .65rem;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
}

/* Dropdown toggle caret */
.navbar-nav .dropdown-toggle::after { margin-left: .35rem; vertical-align: .12em; }
/* Keep caret green when the dropdown parent is the active page */
.navbar-nav .dropdown-toggle.active::after { color: var(--green); border-top-color: var(--green); }

/* ── Dropdown menus ─────────────────────────────────────────────────────── */
.nav-dropdown {
  background: #fff;
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: .5rem;
  min-width: 280px;
  margin-top: .5rem !important;
  animation: dropIn .2s ease;
}
.nav-dropdown--wide { min-width: 320px; }

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dd-header {
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey-400);
  padding: .4rem .75rem .25rem;
  list-style: none;
}

.nav-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .65rem .75rem;
  border-radius: var(--radius-sm);
  color: var(--grey-800);
  transition: all var(--transition);
}
.nav-dropdown .dropdown-item:hover { background: var(--grey-50); color: var(--blue); }
.nav-dropdown .dropdown-item:hover .dd-icon { transform: scale(1.08); }

.dd-icon {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  color: #fff;
  transition: transform var(--transition);
}
.dd-icon.bg-green { background: linear-gradient(135deg, var(--green-light), var(--green)); }
.dd-icon.bg-blue  { background: linear-gradient(135deg, #1a6baf, var(--blue)); }
.dd-icon.bg-gold  { background: linear-gradient(135deg, var(--gold-light), var(--gold)); }

.dd-text { display: flex; flex-direction: column; line-height: 1.2; }
.dd-text b { font-size: .88rem; font-weight: 600; color: var(--blue); }
.dd-text small { font-size: .75rem; color: var(--grey-600); font-weight: 400; margin-top: .1rem; }

/* ── Mobile toggler ─────────────────────────────────────────────────────── */
.navbar-toggler {
  border: 1.5px solid var(--grey-300);
  border-radius: var(--radius-sm);
  padding: .35rem .55rem;
  color: var(--blue);
  font-size: 1.1rem;
  line-height: 1;
  background: transparent;
  transition: all var(--transition);
}
.navbar-toggler:hover { background: var(--grey-50); border-color: var(--blue); }
.navbar-toggler:focus { box-shadow: none; }

/* ── Icon-only nav button ───────────────────────────────────────────────── */
.nav-btn-icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--grey-200);
  background: transparent;
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  cursor: pointer;
  transition: all var(--transition);
}
.nav-btn-icon:hover { background: var(--grey-50); color: var(--green); border-color: var(--green); }

/* ── Slide-down search bar ──────────────────────────────────────────────── */
.nav-search-bar {
  background: var(--grey-50);
  border-top: 1px solid var(--grey-200);
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}
.nav-search-bar.open { max-height: 72px; }
.nav-search-bar[hidden] { display: block !important; max-height: 0; }

.nav-search-form {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 0;
  color: var(--grey-400);
}
.nav-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--grey-800);
  font-size: 1rem;
  font-family: var(--font-ui);
  outline: none;
}
.nav-search-input::placeholder { color: var(--grey-400); }
.nav-search-close {
  background: transparent; border: none;
  color: var(--grey-500); font-size: 1.1rem;
  cursor: pointer; padding: .25rem .5rem;
  transition: color var(--transition);
}
.nav-search-close:hover { color: var(--blue); }

/* ── Mobile nav ─────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  #mainNav { background: #fff; border-top: 1px solid var(--grey-100); padding: 1rem 0; }
  .navbar-nav .nav-link { padding: .6rem 1rem !important; border-radius: 0; }
  .navbar-nav .nav-link.active:not(.dropdown-toggle)::after { display: none; }
  .nav-dropdown { background: var(--grey-50); box-shadow: none; border-radius: 0; min-width: 100%; margin: 0 !important; animation: none; }
  .nav-dropdown .dropdown-item { color: var(--grey-700); }
  .nav-dropdown .dropdown-item:hover { background: var(--grey-100); color: var(--blue); }
  .dd-text b { color: var(--blue); }
  .dd-text small { color: var(--grey-500); }
  .dd-header { color: var(--grey-400); }
}


/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */
.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--blue-dark); border: none; font-weight: 600;
  font-family: var(--font-ui); font-size: .88rem;
  border-radius: 999px; padding: .65rem 1.6rem;
  box-shadow: 0 4px 14px rgba(201,162,39,.35);
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,162,39,.4); color: var(--blue-dark); }

.btn-green {
  background: var(--green); color: #fff; border: none;
  font-family: var(--font-ui); font-weight: 600; font-size: .88rem;
  border-radius: 999px; padding: .65rem 1.6rem;
  box-shadow: 0 4px 14px rgba(27,138,74,.25);
  transition: all var(--transition);
}
.btn-green:hover { background: var(--green-light); color: #fff; transform: translateY(-2px); }

.btn-outline-hero {
  border: 1.5px solid rgba(255,255,255,.5); color: #fff;
  border-radius: 999px; font-weight: 500; font-family: var(--font-ui);
  font-size: .88rem; padding: .6rem 1.5rem;
  transition: all var(--transition);
}
.btn-outline-hero:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.btn-outline-sidebar {
  border: 1.5px solid var(--green); color: var(--green);
  border-radius: 999px; font-weight: 600; font-family: var(--font-ui);
  font-size: .8rem; padding: .4rem 1rem;
  transition: all var(--transition);
}
.btn-outline-sidebar:hover { background: var(--green); color: #fff; }


/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative; min-height: 45vh; display: flex; align-items: center;
  background: linear-gradient(160deg, var(--blue-dark) 0%, var(--blue) 55%, var(--blue-mid) 100%);
  color: #fff; overflow: hidden;
}
.hero-slide-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
}
.hero-slide-bg.active { opacity: 1; }
.hero::before {
  display: none;
}
.hero .container { position: relative; z-index: 2; padding-top: 1.5rem; padding-bottom: 1.75rem; }
/* Per-slide text panels — crossfade in sync with backgrounds */
.hero-slide-content {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  opacity: 0; transition: opacity 1.2s ease;
  pointer-events: none;
}
.hero-slide-content.active {
  opacity: 1; pointer-events: auto;
}
.hero-slide-content .col-lg-9 { padding-left: calc(var(--bs-gutter-x) * .5); }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-light); font-weight: 700; margin-bottom: 1.25rem;
  font-family: var(--font-ui);
}
.hero h1 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; margin-bottom: .75rem; }
.hero-sub { color: rgba(255,255,255,.78); font-size: .95rem; max-width: 580px; line-height: 1.55; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
/* Hero arrows */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px); color: #fff; width: 2.6rem; height: 2.6rem;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--transition), transform var(--transition);
  font-size: .9rem;
}
.hero-arrow:hover { background: rgba(255,255,255,.3); transform: translateY(-50%) scale(1.08); }
.hero-arrow-prev { left: 1.25rem; }
.hero-arrow-next { right: 1.25rem; }

/* Hero dot indicators */
.hero-dots {
  position: absolute; bottom: 3.5rem; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; gap: .5rem;
}
.hero-dot {
  width: .6rem; height: .6rem; border-radius: 50%;
  background: rgba(255,255,255,.35); border: none; cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  padding: 0;
}
.hero-dot.active { background: #fff; transform: scale(1.3); }

.hero-scroll-cue {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.5); font-size: 1.2rem; animation: bounce 2.5s infinite;
}
@keyframes bounce {
  0%,100% { transform: translate(-50%,0); }
  50%      { transform: translate(-50%,10px); }
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px); border-radius: 999px;
  padding: .35rem .9rem; font-size: .75rem; color: rgba(255,255,255,.85);
  font-family: var(--font-ui); margin-bottom: 1.5rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   STATISTICS
   ══════════════════════════════════════════════════════════════════════════ */
.stats-section {
  background: #fff;
  border-top: 1px solid var(--grey-200);
  border-bottom: 1px solid var(--grey-200);
  padding: 3.5rem 0;
}
.stat-card { text-align: center; padding: 1rem; }
.stat-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-pale); color: var(--green);
  font-size: 1.2rem; margin: 0 auto 1rem;
}
.stat-value {
  font-family: var(--font-heading); font-size: 2.6rem;
  color: var(--blue); font-weight: 700; line-height: 1;
}
.stat-suffix { font-size: 1.5rem; color: var(--gold); }
.stat-label { color: var(--grey-600); font-weight: 500; font-size: .88rem; margin-top: .35rem; font-family: var(--font-ui); }


/* ══════════════════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════════════════ */
.section { padding: 5.5rem 0; background: #fff; color: var(--grey-800); }
.section-light { background: var(--grey-50); }
.section-blue  { background: var(--blue); color: #fff; }
.section-blue h1, .section-blue h2, .section-blue h3,
.section-blue h4, .section-blue h5, .section-blue h6 { color: #fff; }
.section-dark  { background: var(--blue-dark); color: #fff; }
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark h4, .section-dark h5, .section-dark h6,
.section-dark p, .section-dark li, .section-dark .article-body { color: #fff; }

.section-eyebrow {
  color: var(--green); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  font-size: .78rem; font-family: var(--font-ui);
  display: block; margin-bottom: .5rem;
}
.section-title { margin-top: .35rem; }
.section-sub {
  color: var(--grey-600); max-width: 600px;
  font-size: 1.05rem; line-height: 1.75;
}
.section-divider {
  width: 52px; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--green));
  border-radius: 2px; margin: 1rem 0 1.5rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════════════════════════════ */
.breadcrumb-bar {
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  padding: .9rem 0;
}
.breadcrumb { margin: 0; font-size: .85rem; font-family: var(--font-ui); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--grey-400); }
.breadcrumb-item a { color: var(--green); }
.breadcrumb-item.active { color: var(--grey-600); }


/* ══════════════════════════════════════════════════════════════════════════
   PAGE WITH SIDEBAR LAYOUT
   ══════════════════════════════════════════════════════════════════════════ */
.page-with-sidebar { padding: 3rem 0 5rem; }
.page-with-sidebar .main-col {}


/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════════════════ */
.sidebar { display: flex; flex-direction: column; gap: 1.25rem; }

.sidebar-widget {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md);
  padding: 1.35rem;
  box-shadow: var(--shadow-xs);
}

/* About widget */
.sidebar-logo { display: block; margin-bottom: .85rem; }
.sidebar-about-text {
  font-size: .85rem; color: var(--grey-600); line-height: 1.7;
  margin-bottom: 1rem;
}

/* Widget header */
.sidebar-widget-header {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--grey-200);
}
.sidebar-widget-icon {
  width: 30px; height: 30px; min-width: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--green-light), var(--green));
  color: #fff; font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-widget-icon.bg-gold-icon { background: linear-gradient(135deg, var(--gold-light), var(--gold)); }
.sidebar-widget-icon.bg-blue-icon { background: linear-gradient(135deg, #1a6baf, var(--blue)); }
.sidebar-widget-title {
  font-size: .82rem; font-weight: 700; color: var(--blue);
  text-transform: uppercase; letter-spacing: .07em;
  margin: 0; font-family: var(--font-ui);
}

/* News list */
.sidebar-news-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.sidebar-news-item a {
  display: flex; align-items: flex-start; gap: .6rem;
  text-decoration: none; color: inherit;
  transition: all var(--transition);
}
.sidebar-news-item a:hover { color: var(--green); }
.sidebar-news-thumb {
  width: 52px; height: 48px; min-width: 52px;
  border-radius: var(--radius-sm); object-fit: cover;
  background: var(--grey-100);
}
.sidebar-news-thumb--placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--grey-400); font-size: .9rem;
}
.sidebar-news-body { display: flex; flex-direction: column; gap: .15rem; }
.sidebar-news-title { font-size: .82rem; font-weight: 600; color: var(--grey-800); line-height: 1.45; }
.sidebar-news-item a:hover .sidebar-news-title { color: var(--green); }
.sidebar-news-date { font-size: .72rem; color: var(--grey-400); font-family: var(--font-ui); }

/* Country list */
.sidebar-country-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.sidebar-country-list a {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .65rem; border-radius: var(--radius-sm);
  color: var(--grey-800); font-size: .88rem; font-weight: 500;
  transition: all var(--transition);
}
.sidebar-country-list a:hover { background: var(--grey-50); color: var(--green); }
.country-flag { font-size: 1.2rem; line-height: 1; }
.country-name { flex: 1; }
.country-badge {
  font-size: .7rem; background: var(--blue-light); color: var(--blue);
  padding: .15rem .5rem; border-radius: 999px; font-family: var(--font-ui); font-weight: 600;
}

/* Document list */
.sidebar-doc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.sidebar-doc-list a {
  display: flex; align-items: center; gap: .6rem;
  font-size: .82rem; color: var(--grey-800);
  padding: .4rem .5rem; border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.sidebar-doc-list a:hover { color: var(--green); background: var(--grey-50); }
.sidebar-doc-icon { color: #e74c3c; font-size: .9rem; min-width: 16px; }

/* Contact widget */
.sidebar-contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.sidebar-contact-list li {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .84rem; color: var(--grey-600);
}
.sidebar-contact-list i {
  color: var(--green); font-size: .85rem; margin-top: .15rem; min-width: 14px;
}
.sidebar-contact-list a { color: var(--grey-600); transition: color var(--transition); }
.sidebar-contact-list a:hover { color: var(--green); }
.sidebar-social { display: flex; gap: .5rem; }
.sidebar-social a {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--grey-100); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; transition: all var(--transition);
}
.sidebar-social a:hover { background: var(--blue); color: #fff; }

/* View-all link */
.sidebar-view-all {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 600; color: var(--green);
  margin-top: .85rem; padding-top: .75rem;
  border-top: 1px solid var(--grey-200);
  font-family: var(--font-ui);
  transition: gap var(--transition), color var(--transition);
}
.sidebar-view-all:hover { color: var(--blue); gap: .65rem; }


/* ══════════════════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════════════════ */
.card-soft {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
  overflow: hidden;
}
.card-soft:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.card-glass {
  background: rgba(255,255,255,.65); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.5); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--green-light), var(--green));
  color: #fff; font-size: 1.25rem;
  box-shadow: 0 4px 12px rgba(27,138,74,.25);
}
.card-icon--blue { background: linear-gradient(135deg, #1a6baf, var(--blue)); box-shadow: 0 4px 12px rgba(11,42,74,.25); }
.card-icon--gold { background: linear-gradient(135deg, var(--gold-light), var(--gold)); box-shadow: 0 4px 12px rgba(201,162,39,.25); }

/* News / article cards */
.news-card-img { height: 200px; object-fit: cover; width: 100%; display: block; }
.news-card-body { padding: 1.35rem; }
.news-card-meta { font-size: .78rem; color: var(--grey-400); font-family: var(--font-ui); margin-bottom: .5rem; }
.news-card-title { font-size: 1rem; font-weight: 700; color: var(--blue); line-height: 1.4; margin-bottom: .5rem; }
.news-card-excerpt { font-size: .85rem; color: var(--grey-600); line-height: 1.65; }
a.card-soft:hover .news-card-title { color: var(--green); }

/* Project cards */
.project-card-img { height: 190px; object-fit: cover; width: 100%; display: block; }
.project-status-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600; font-family: var(--font-ui);
  padding: .25rem .7rem; border-radius: 999px;
  background: var(--green-pale); color: var(--green);
}
.project-status-badge.planned   { background: var(--gold-pale); color: var(--gold); }
.project-status-badge.completed { background: var(--blue-light); color: var(--blue); }


/* ══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* White content wrapper — fixes dark-on-dark background */
.about-content-wrap {
  background: var(--white);
  border-top: 4px solid var(--green);
}

/* Intro block */
.about-lead-text {
  font-size: 1.08rem;
  color: var(--grey-600);
  line-height: 1.85;
  max-width: 640px;
}

/* Section sub-heading */
.mvv-section-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--blue);
  font-weight: 700;
}

/* Mission / Vision / Values horizontal accent cards */
.mvv-section { display: flex; flex-direction: column; gap: .85rem; }

.mvv-card {
  display: flex;
  align-items: flex-start;
  gap: 1.35rem;
  padding: 1.6rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--grey-200);
  border-left: 5px solid var(--green);
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition);
}
.mvv-card:hover {
  transform: translateX(5px);
  box-shadow: var(--shadow-sm);
}
.mvv-card--blue { border-left-color: var(--blue-mid); }
.mvv-card--gold { border-left-color: var(--gold); }

.mvv-icon {
  width: 58px; height: 58px; min-width: 58px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  background: linear-gradient(135deg, var(--green-light), var(--green));
  box-shadow: 0 4px 14px rgba(26,173,69,.28);
  flex-shrink: 0;
}
.mvv-card--blue .mvv-icon {
  background: linear-gradient(135deg, var(--blue-mid), var(--blue));
  box-shadow: 0 4px 14px rgba(13,71,168,.28);
}
.mvv-card--gold .mvv-icon {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 4px 14px rgba(232,184,0,.28);
}

.mvv-body h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: .45rem;
  font-family: var(--font-ui);
}
.mvv-body p {
  font-size: .92rem;
  color: var(--grey-600);
  line-height: 1.75;
  margin: 0;
}

/* ── Partners centered grid (homepage) ──────────────────────────────────── */
.partners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem;
}
.partners-grid .partner-logo {
  flex: 0 0 auto;
  width: 140px;
}

/* ── Real flag images (flagcdn.com) ─────────────────────────────────────── */
.country-flag-img {
  width: 36px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
  display: inline-block;
  vertical-align: middle;
  object-fit: cover;
}
/* Medium — member-countries cards */
.country-flag-img { width: 42px; }
/* Large — about page cards */
.country-flag-img--lg {
  width: 72px;
  border-radius: 6px;
  box-shadow: 0 3px 12px rgba(0,0,0,.3);
}
/* Hero — country detail page header */
.country-flag-img--hero {
  width: 80px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}


/* Country accent cards */
.country-accent-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.25rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: #fff;
  gap: .6rem;
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: var(--shadow-sm);
}
.country-accent-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  color: #fff;
}
.country-flag-lg { font-size: 3rem; line-height: 1; display: block; }
.country-accent-card strong {
  font-size: 1.05rem;
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: .02em;
}
.country-accent-card small {
  font-size: .78rem;
  color: var(--gold-light);
  font-family: var(--font-ui);
}
.cc-badge {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  font-size: .72rem;
  padding: .22rem .75rem;
  border-radius: 999px;
  font-family: var(--font-ui);
  margin-top: .2rem;
}

/* About page — inner pages use white bg too */
.page-with-sidebar { background: var(--white); }

/* ── Bureau / governance ─────────────────────────────────────────────────── */
.bureau-section-heading {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.35rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--grey-200);
}
.bureau-section-heading .page-header-eyebrow { margin-bottom: .25rem; color: var(--green); }
.bureau-section-heading h2 {
  color: var(--blue); font-size: clamp(1.25rem, 2vw, 1.65rem); margin: 0;
}
.bureau-section-icon {
  width: 52px; height: 52px; min-width: 52px; border-radius: 14px;
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.bureau-section-icon--green { background: linear-gradient(135deg, var(--green-light), var(--green)); }
.bureau-section-icon--blue { background: linear-gradient(135deg, var(--blue-mid), var(--blue)); }
.bureau-section-icon--gold { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--blue-dark); }
.bureau-card {
  height: 100%; display: flex; gap: 1rem; padding: 1.15rem; background: #fff;
  border: 1px solid var(--grey-200); border-top: 3px solid var(--green);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition);
}
.bureau-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.bureau-card--blue { border-top-color: var(--blue-mid); }
.bureau-card--gold { border-top-color: var(--gold); }
.bureau-card-photo {
  width: 86px; height: 98px; min-width: 86px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(145deg, var(--blue-dark), var(--blue));
  color: var(--gold-light); display: flex; align-items: center; justify-content: center;
  font: 700 2rem var(--font-heading);
}
.bureau-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.bureau-card-body { min-width: 0; }
.bureau-role {
  color: var(--green); font: 700 .7rem var(--font-ui); letter-spacing: .08em;
  text-transform: uppercase; margin: .1rem 0 .3rem;
}
.bureau-card--blue .bureau-role { color: var(--blue); }
.bureau-card--gold .bureau-role { color: var(--gold); }
.bureau-card h3 { color: var(--blue); font-size: 1.02rem; line-height: 1.3; margin: 0 0 .35rem; }
.bureau-affiliation { color: var(--grey-600); font-size: .86rem; line-height: 1.55; margin: 0; }
.bureau-contact { border-top: 1px solid var(--grey-100); margin-top: .75rem; padding-top: .65rem; display: grid; gap: .35rem; }
.bureau-contact div { display: flex; gap: .5rem; color: var(--grey-600); font-size: .78rem; line-height: 1.45; }
.bureau-contact i { color: var(--green); width: 14px; margin-top: .15rem; }
.bureau-card--blue .bureau-contact i { color: var(--blue); }
.bureau-card--gold .bureau-contact i { color: var(--gold); }
@media (max-width: 575.98px) {
  .bureau-card { padding: .9rem; }
  .bureau-card-photo { width: 70px; height: 82px; min-width: 70px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE HEADERS (inner pages)
   ══════════════════════════════════════════════════════════════════════════ */
.page-header {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 60%, var(--blue-mid) 100%);
  color: #fff; padding: 3.5rem 0 3rem; position: relative; overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(201,162,39,.15), transparent 55%);
}
.page-header .container { position: relative; z-index: 1; }
.page-header h1 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin-bottom: .5rem; }
.page-header .lead { color: rgba(255,255,255,.75); font-size: 1rem; max-width: 560px; }
.page-header-eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-light); font-family: var(--font-ui);
  margin-bottom: .85rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   TIMELINE
   ══════════════════════════════════════════════════════════════════════════ */
.timeline { position: relative; padding-left: 2.5rem; }
.timeline::before {
  content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(var(--gold), var(--green));
  border-radius: 2px;
}
.timeline-item { position: relative; margin-bottom: 2.5rem; }
.timeline-item::before {
  content: ''; position: absolute; left: -2.5rem; top: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgba(201,162,39,.3);
}
.timeline-year {
  font-family: var(--font-heading); font-weight: 700;
  color: var(--blue); font-size: 1.35rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   MAP / REGION
   ══════════════════════════════════════════════════════════════════════════ */
.region-map { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.region-map img { width: 100%; display: block; }
.map-pin {
  position: absolute; width: 14px; height: 14px;
  background: var(--gold); border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 6px rgba(201,162,39,.25);
  cursor: pointer; transform: translate(-50%, -50%);
}


/* ══════════════════════════════════════════════════════════════════════════
   GALLERY
   ══════════════════════════════════════════════════════════════════════════ */
.masonry { column-count: 3; column-gap: 1rem; }
.masonry-item {
  margin-bottom: 1rem; border-radius: var(--radius-md);
  overflow: hidden; break-inside: avoid; position: relative;
}
.masonry-item img { width: 100%; display: block; transition: transform .4s ease; }
.masonry-item:hover img { transform: scale(1.06); }
@media (max-width: 992px) { .masonry { column-count: 2; } }
@media (max-width: 576px) { .masonry { column-count: 1; } }


/* ══════════════════════════════════════════════════════════════════════════
   DOCUMENTS
   ══════════════════════════════════════════════════════════════════════════ */
.doc-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.25rem; background: #fff;
  border: 1px solid var(--grey-200); border-radius: var(--radius-md);
  transition: all var(--transition);
}
.doc-card:hover { border-color: var(--green); box-shadow: var(--shadow-sm); }
.doc-icon {
  width: 46px; height: 46px; border-radius: 12px; min-width: 46px;
  background: var(--grey-50); display: flex; align-items: center;
  justify-content: center; color: #e74c3c; font-size: 1.25rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE DETAIL
   ══════════════════════════════════════════════════════════════════════════ */
.article-body { font-size: 1.05rem; line-height: 1.9; color: var(--grey-800); }
.article-body img { border-radius: var(--radius-md); max-width: 100%; }
.article-body h2, .article-body h3 { margin-top: 2rem; }
.article-body p { margin-bottom: 1.35rem; }
.article-hero { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.badge-category {
  background: var(--green); color: #fff; border-radius: 999px;
  padding: .3rem .85rem; font-size: .75rem; font-family: var(--font-ui); font-weight: 600;
}
.badge-tag {
  background: var(--grey-100); color: var(--blue); border-radius: 999px;
  padding: .25rem .75rem; font-size: .75rem; font-family: var(--font-ui);
}


/* ══════════════════════════════════════════════════════════════════════════
   PARTNERS CAROUSEL
   ══════════════════════════════════════════════════════════════════════════ */
.partner-logo {
  display: flex; align-items: center; justify-content: center;
  height: 90px; border: 1px solid var(--grey-200); border-radius: var(--radius-md);
  background: #fff; padding: 1rem;
  filter: grayscale(20%); opacity: .8; transition: all var(--transition);
}
.partner-logo:hover { opacity: 1; filter: none; box-shadow: var(--shadow-sm); }
.partner-logo img { max-height: 56px; max-width: 100%; object-fit: contain; }


/* ══════════════════════════════════════════════════════════════════════════
   CTA BANNER
   ══════════════════════════════════════════════════════════════════════════ */
.cta-banner {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--green) 100%);
  color: #fff; border-radius: var(--radius-xl); padding: 1.5rem 2.5rem;
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 90% 50%, rgba(201,162,39,.2), transparent 55%);
}
.cta-banner > * { position: relative; z-index: 1; }


/* ══════════════════════════════════════════════════════════════════════════
   FILTER TABS
   ══════════════════════════════════════════════════════════════════════════ */
.filter-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-tab {
  padding: .4rem 1rem; border-radius: 999px; font-size: .82rem;
  font-weight: 600; font-family: var(--font-ui); cursor: pointer;
  border: 1.5px solid var(--grey-200); background: #fff; color: var(--grey-600);
  transition: all var(--transition);
}
.filter-tab:hover, .filter-tab.active {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
a.filter-tab { text-decoration: none; }
a.filter-tab.active--green { background: var(--green); border-color: var(--green); color: #fff; }


/* ══════════════════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════════════════ */
.pagination .page-link {
  color: var(--blue); border-radius: var(--radius-sm) !important;
  border-color: var(--grey-200); font-family: var(--font-ui); font-weight: 500;
  transition: all var(--transition);
}
.pagination .page-item.active .page-link { background: var(--green); border-color: var(--green); }
.pagination .page-link:hover { background: var(--grey-50); color: var(--green); }


/* ══════════════════════════════════════════════════════════════════════════
   FOOTER  — white background
   ══════════════════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--white);
  color: var(--grey-600);
  font-family: var(--font-ui);
  border-top: 4px solid var(--blue);
  box-shadow: 0 -2px 24px rgba(13,71,168,.07);
}

.footer-brand img { margin-bottom: .85rem; display: block; }
.footer-tagline {
  color: var(--grey-600); font-size: .88rem; line-height: 1.65; margin-bottom: 1.25rem;
}

/* Social icons */
.footer-social { display: flex; gap: .6rem; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--grey-100); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; transition: all var(--transition);
  border: 1px solid var(--grey-200);
}
.footer-social a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* Column headings */
.footer-heading {
  color: var(--blue); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: 1.1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--green);
  display: inline-block;
}

/* Links */
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.footer-links a {
  color: var(--blue); font-size: .88rem;
  display: flex; align-items: center; gap: .4rem;
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--green); }
.footer-links a::before { content: '›'; color: var(--green); font-weight: 700; }

/* Divider & bottom bar */
.footer-divider { border-color: var(--grey-200); }
.footer-bottom {
  font-size: .82rem; color: rgba(255,255,255,.7);
  background: var(--blue-dark);
  padding-top: .85rem; padding-bottom: .85rem;
  border-top: none;
}
.footer-bottom a { color: rgba(255,255,255,.75); transition: color var(--transition); }
.footer-bottom a:hover { color: var(--gold-light); }

/* Newsletter form */
.newsletter-form { display: flex; gap: 0; }
.newsletter-form input {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border: 1px solid var(--grey-200); background: var(--grey-50);
  color: var(--grey-800); font-size: .85rem; padding: .55rem .9rem; flex: 1;
}
.newsletter-form input::placeholder { color: var(--grey-400); }
.newsletter-form input:focus { outline: none; background: #fff; border-color: var(--green); }
.newsletter-form button {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--gold); border: none; color: var(--blue-dark);
  font-weight: 700; font-size: .82rem; padding: .55rem 1.1rem;
  cursor: pointer; transition: background var(--transition);
}
.newsletter-form button:hover { background: var(--gold-light); }

/* Contact info inside footer */
.footer-contact-list { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-direction: column; gap: .45rem; }
.footer-contact-list li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--grey-600); }
.footer-contact-list i { color: var(--green); font-size: .8rem; width: 14px; }
.footer-contact-list a { color: var(--grey-600); transition: color var(--transition); }
.footer-contact-list a:hover { color: var(--green); }

.footer-article-link { color: var(--grey-600); font-size: .88rem; }
.footer-article-link:hover { color: var(--green); }


/* ══════════════════════════════════════════════════════════════════════════
   SEARCH RESULTS
   ══════════════════════════════════════════════════════════════════════════ */
.search-result-item {
  padding: 1.25rem; border-radius: var(--radius-md);
  border: 1px solid var(--grey-200); background: #fff;
  transition: all var(--transition);
}
.search-result-item:hover { border-color: var(--green); box-shadow: var(--shadow-sm); }
.search-result-type {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--green); font-family: var(--font-ui);
}


/* ══════════════════════════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════════════════════════ */
.text-gold   { color: var(--gold) !important; }
.text-green  { color: var(--green) !important; }
.text-blue   { color: var(--blue) !important; }
.bg-blue     { background: var(--blue) !important; }
.bg-gold     { background: var(--gold) !important; }
.bg-green    { background: var(--green) !important; }
.bg-pale-blue  { background: var(--blue-light) !important; }
.bg-pale-green { background: var(--green-pale) !important; }
.rounded-xl  { border-radius: var(--radius-xl) !important; }
.rounded-lg  { border-radius: var(--radius-lg) !important; }
.shadow-soft { box-shadow: var(--shadow-md) !important; }
.font-ui     { font-family: var(--font-ui) !important; }

/* Highlight accessibility */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ── Compact news cards (homepage strip) ────────────────────────────────── */
.news-compact-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--grey-100);
  background: #fff;
  transition: box-shadow var(--transition), transform var(--transition);
}
.news-compact-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.news-compact-img { height: 150px; overflow: hidden; }
.news-compact-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.news-compact-card:hover .news-compact-img img { transform: scale(1.04); }
.news-compact-body { padding: .85rem 1rem .95rem; }
.news-compact-date { font-size: .72rem; color: var(--grey-400); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.news-compact-title { font-size: .93rem; font-weight: 600; color: var(--grey-800); margin: .3rem 0 0; line-height: 1.4; }
.news-compact-card:hover .news-compact-title { color: var(--blue); }

.btn-outline-blue {
  color: var(--blue); border: 1.5px solid var(--blue);
  background: transparent; border-radius: 999px;
  padding: .3rem .9rem; font-size: .82rem; font-weight: 600;
  text-decoration: none; transition: background var(--transition), color var(--transition);
}
.btn-outline-blue:hover { background: var(--blue); color: #fff; }

/* ── Contact page ───────────────────────────────────────────────────────── */
.contact-page-body {
  background: #fff;
  padding: 2.5rem 0 0;
}

/* Icon bubbles shared */
.bg-blue-icon  { background: linear-gradient(135deg, #1a6baf, var(--blue)); }
.bg-green-icon { background: linear-gradient(135deg, #17a84a, var(--green)); }
.bg-gold-icon  { background: linear-gradient(135deg, var(--gold-light), var(--gold)); }

/* Contact strip — inline icon + text items */
.contact-strip {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 0;
}
.contact-strip-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem 1.5rem .5rem 0;
}
.contact-strip-item:first-child { padding-left: 0; }
.contact-strip-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #fff;
}
.contact-strip-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey-400);
  margin-bottom: .15rem;
}
.contact-strip-value {
  font-size: .95rem;
  color: var(--grey-700);
  line-height: 1.45;
}
.contact-strip-value a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition);
}
.contact-strip-value a:hover { color: var(--green); }
.contact-strip-divider {
  width: 1px; align-self: stretch;
  background: var(--grey-150, #e8ecf0);
  margin: 0 1rem;
  flex-shrink: 0;
}

/* Horizontal rule between strip and map */
.contact-hr {
  height: 1px;
  background: var(--grey-150, #e8ecf0);
  margin: 1.75rem 0 1.5rem;
}

/* Map */
.contact-map-wrap {
  height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--grey-100);
}

/* Section label (hours, social) */
.contact-section-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: .85rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--grey-100);
  display: flex; align-items: center;
}

/* Hours list */
.contact-hours-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
}
.contact-hours-list li {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .88rem; color: var(--grey-700);
  padding: .4rem 0;
  border-bottom: 1px solid var(--grey-100);
}
.contact-hours-list li:last-child { border-bottom: none; }
.contact-hours-list .hours-time { font-weight: 600; color: var(--blue); }
.contact-hours-list .closed .hours-time { color: var(--grey-400); font-weight: 400; }
.contact-hours-list .closed span:first-child { color: var(--grey-400); }

/* Social */
.contact-social-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.contact-social-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--grey-600);
  font-size: .85rem;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.contact-social-btn:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

@media (max-width: 767.98px) {
  .contact-strip { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .contact-strip-item { padding: 0; }
  .contact-strip-divider { width: 100%; height: 1px; align-self: auto; margin: 0; }
}

@media (prefers-contrast: more) {
  .site-header { background: #000; }
  .btn-gold { background: #ffcc00; color: #000; }
  .topbar { background: #000; }
}

/* ── Responsive tweaks ──────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .hero { min-height: 42vh; }
  .section { padding: 3.5rem 0; }
  .cta-banner { padding: 1.25rem 1.25rem; }
  .page-with-sidebar { padding: 2rem 0 3.5rem; }
  .sidebar { margin-top: 2.5rem; }
}
@media (max-width: 575.98px) {
  .hero h1 { font-size: 1.9rem; }
  .hero-cta .btn { width: 100%; text-align: center; }
}