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

/* ==========================================================
   Digital Earth Africa — Consolidated PyData Sphinx Theme
   Single source of truth
   ========================================================== */

/* ==========================================================
   1. Design tokens
   ========================================================== */

:root {
  --de-navy: #082553;
  --de-blue: #0b55a0;
  --de-blue-dark: #003f73;
  --de-orange: #c84f00;
  --de-yellow: #ffb800;
  --de-green: #087f5b;
  --de-purple: #6f42c1;
  --de-red: #b42318;

  --de-text: #0d2347;
  --de-body: #334155;
  --de-muted: #52647e;
  --de-border: #d8e0ea;
  --de-page: #f7f9fc;
  --de-white: #ffffff;

  --de-font-family: "Inter", Arial, sans-serif;
  --de-font-size-body: 16px;
  --de-font-size-h1: 42px;
  --de-font-size-h2: 32px;
  --de-font-size-h3: 25px;
  --de-font-size-h4: 20px;
  --de-font-size-h5: 18px;
  --de-font-size-lead: 22px;
  --de-font-size-nav: 16px;
  --de-font-size-button: 15px;
  --de-font-size-meta: 13px;

  --de-radius: 10px;
  --de-radius-lg: 12px;
  --de-shadow: 0 3px 12px rgba(15, 35, 70, 0.06);
  --de-shadow-hover: 0 9px 22px rgba(15, 35, 70, 0.11);

  --pst-color-primary: var(--de-blue);
  --pst-color-link: var(--de-blue);
  --pst-header-height: 5rem;
}


/* ==========================================================
   2. Global typography
   ========================================================== */

html,
body {
  font-family: var(--de-font-family);
}

body,
.bd-article {
  color: var(--de-body);
  font-size: var(--de-font-size-body);
  font-weight: 400;
  line-height: 1.65;
}

.bd-article p,
.bd-article li,
.bd-article dd,
.bd-article dt,
.bd-article blockquote {
  color: var(--de-body);
  font-size: var(--de-font-size-body);
  line-height: 1.65;
}

.bd-article h1,
.bd-article h2,
.bd-article h3,
.bd-article h4,
.bd-article h5 {
  color: var(--de-text);
  font-family: var(--de-font-family);
}

.bd-article h1 {
  font-size: var(--de-font-size-h1);
  font-weight: 700;
  line-height: 1.15;
}

.bd-article h2 {
  font-size: var(--de-font-size-h2);
  font-weight: 600;
  line-height: 1.2;
}

.bd-article h3 {
  font-size: var(--de-font-size-h3);
  font-weight: 600;
  line-height: 1.25;
}

.bd-article h4 {
  font-size: var(--de-font-size-h4);
  font-weight: 600;
  line-height: 1.3;
}

.bd-article h5 {
  font-size: var(--de-font-size-h5);
  font-weight: 600;
  line-height: 1.3;
}

.bd-article .lead {
  color: var(--de-body) !important;
  font-size: var(--de-font-size-lead);
  font-weight: 400;
  line-height: 1.5;
}

button,
.btn,
.sd-btn,
.de-platform-more-button {
  font-family: var(--de-font-family);
  font-size: var(--de-font-size-button);
}

.meta,
.caption,
.lang-picker,
.deafrica-footer__copyright {
  font-family: var(--de-font-family);
  font-size: var(--de-font-size-meta);
}


/* ==========================================================
   3. Page layout
   ========================================================== */

.bd-page-width {
  max-width: 1560px;
}

.bd-container,
.bd-main {
  background: var(--de-page);
}

.bd-main .bd-content .bd-article-container {
  max-width: 980px;
}

.bd-article {
  margin-top: 1rem;
  padding: 2rem 2.4rem;
  background: var(--de-white);
  border: 1px solid var(--de-border);
  border-radius: var(--de-radius-lg);
  box-shadow: 0 3px 14px rgba(15, 35, 70, 0.04);
}


/* ==========================================================
   4. Links and keyboard focus
   ========================================================== */

.bd-article a:not(.btn):not(.sd-btn):not(.de-platform-more-button),
.bd-sidebar-secondary a {
  color: var(--de-blue);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.bd-article a:not(.btn):not(.sd-btn):not(.de-platform-more-button):hover,
.bd-article a:not(.btn):not(.sd-btn):not(.de-platform-more-button):focus,
.bd-sidebar-secondary a:hover,
.bd-sidebar-secondary a:focus {
  color: var(--de-orange);
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.sd-btn:focus-visible,
.nav-link:focus-visible,
.search-button-field:focus-visible,
.de-platform-more-button:focus-visible {
  outline: 3px solid #111827 !important;
  outline-offset: 3px;
}


/* ==========================================================
   5. Top navigation
   ========================================================== */

.bd-header {
  min-height: 78px;
  background: var(--de-white) !important;
  border-bottom: 1px solid var(--de-border);
  box-shadow: 0 2px 10px rgba(15, 35, 70, 0.05);
}

.navbar-brand {
  min-width: 200px;
  margin-right: 1.5rem;
}

.navbar-brand img {
  width: auto;
  max-width: 200px;
  max-height: 3.5rem;
}

html[data-theme="light"] .navbar-brand,
html[data-theme="auto"] .navbar-brand,
html[data-theme="light"] .bd-header button,
html[data-theme="auto"] .bd-header button {
  color: var(--de-text) !important;
}

.bd-header .navbar-nav > li > a,
.bd-header .navbar-nav > .nav-item > .nav-link {
  position: relative;
  padding: 0.75rem 0.9rem;
  color: var(--de-text) !important;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: var(--de-font-size-nav);
  font-weight: 700;
}

.bd-header .navbar-nav > li > a:hover,
.bd-header .navbar-nav > .nav-item > .nav-link:hover {
  color: var(--de-orange) !important;
  background: #fff7f0 !important;
  border-color: #f3c7a6 !important;
}

.bd-header .navbar-nav > li.current > a,
.bd-header .navbar-nav > li.active > a,
.bd-header .navbar-nav > li > a.current,
.bd-header .navbar-nav > li > a.active,
.bd-header .navbar-nav > li > a[aria-current="page"],
.bd-header .navbar-nav > .nav-item.current > .nav-link,
.bd-header .navbar-nav > .nav-item.active > .nav-link,
.bd-header .navbar-nav > .nav-item > .nav-link.current,
.bd-header .navbar-nav > .nav-item > .nav-link.active,
.bd-header .navbar-nav > .nav-item > .nav-link[aria-current="page"],
.bd-header .navbar-nav a.de-nav-active,
.bd-header .navbar-nav li.de-nav-active > a {
  color: var(--de-orange) !important;
  background: #fff4e8 !important;
  border-color: #d96a1c !important;
  border-bottom-width: 4px !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}

.search-button-field {
  min-width: 230px;
  border: 1px solid var(--de-border);
  border-radius: 8px;
}


/* ==========================================================
   6. Left sidebar
   ========================================================== */

.bd-sidebar-primary {
  width: 285px;
  margin: 1rem 0 1rem 1rem;
  padding: 0.85rem;
  background: var(--de-white);
  border: 1px solid #e2e8f0;
  border-radius: var(--de-radius-lg);
  box-shadow: 0 3px 12px rgba(15, 35, 70, 0.05);
}

.bd-sidebar-primary .nav-link,
.bd-sidebar-primary .reference.internal {
  display: block;
  padding: 0.5rem 0.7rem;
  color: #475569;
  border-left: 4px solid transparent;
  border-radius: 6px;
  text-decoration: none;
}

.bd-sidebar-primary .nav-link:hover,
.bd-sidebar-primary .reference.internal:hover {
  color: var(--de-blue);
  background: #f1f5f9;
}

.bd-sidebar-primary .nav-link.active,
.bd-sidebar-primary .reference.internal.current,
.bd-sidebar-primary a[aria-current="page"],
.bd-sidebar-primary li.current > a,
.bd-sidebar-primary li.active > a,
.bd-sidebar-primary li.toctree-l1.current > a,
.bd-sidebar-primary li.toctree-l2.current > a {
  color: var(--de-orange) !important;
  background: #fff4e8 !important;
  border-left: 5px solid var(--de-orange) !important;
  font-weight: 800 !important;
  text-decoration: none;
}

.bd-sidebar-primary li.current ul a:not(.current),
.bd-sidebar-primary li.active ul a:not(.active) {
  color: #475569;
  background: transparent;
  border-left-color: transparent;
  font-weight: 500;
}

.bd-sidebar-primary .sidebar-title {
  margin: 0 0 1rem;
  padding: 0.35rem 0 0.9rem;
  color: var(--de-text);
  border-bottom: 1px solid var(--de-border);
  font-size: 1.35rem;
  font-weight: 800;
}

.bd-sidebar-primary .caption {
  margin: 1rem 0 0.4rem;
  padding: 0 0.2rem;
}

.bd-sidebar-primary .caption-text {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.bd-sidebar-primary .bd-sidenav {
  margin: 0;
  padding: 0;
}

.bd-sidebar-primary .bd-sidenav > li {
  margin: 0.15rem 0;
  list-style: none;
}


/* ==========================================================
   7. Right sidebar
   ========================================================== */

.bd-sidebar-secondary {
  width: 235px;
  margin-top: 1rem;
  background: var(--de-white);
  border-left: 1px solid var(--de-border);
}

.bd-sidebar-secondary .onthispage {
  color: var(--de-text);
  font-weight: 800;
}


/* ==========================================================
   8. General Sphinx Design cards
   ========================================================== */

.de-alert-card {
  border: 1px solid #e6b98f;
  border-left: 6px solid var(--de-orange);
  border-radius: var(--de-radius-lg);
  background: linear-gradient(90deg, #fff8f1 0%, #ffffff 72%);
  box-shadow: none;
}

.de-alert-header {
  color: var(--de-text);
  background: transparent;
  border-bottom: 0;
  font-size: var(--de-font-size-h5);
  font-weight: 700;
}

.de-alert-header::before {
  margin-right: 0.35rem;
  content: "⚠";
}

.de-info-card {
  height: 100%;
  border: 1px solid var(--de-border);
  border-radius: var(--de-radius-lg);
  box-shadow: none;
}

.de-info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(15, 35, 70, 0.08);
}

.de-maintenance-card {
  border-top: 5px solid var(--de-blue);
}

.de-resolved-card {
  border-top: 5px solid var(--de-green);
}

.de-software-card {
  border-top: 5px solid var(--de-purple);
}

.de-info-panel {
  color: var(--de-text) !important;
  background: #f6f9fc !important;
  border: 1px solid #cfe4ff;
  border-left: 6px solid var(--de-blue);
  border-radius: var(--de-radius-lg);
}

.de-info-panel p {
  color: var(--de-text) !important;
  background: transparent !important;
}

.de-info-panel .admonition-title {
  color: var(--de-text) !important;
  background: var(--de-white) !important;
  border-bottom: 1px solid var(--de-border) !important;
  font-weight: 800;
}

.de-info-panel .admonition-title::before {
  margin-right: 0.35rem;
  color: var(--de-blue) !important;
  content: "ⓘ";
}


/* ==========================================================
   9. Homepage
   ========================================================== */

.de-status-heading-grid {
  align-items: stretch;
  margin: 1.25rem 0 1.75rem;
}

.de-overall-status {
  height: 100%;
  border: 1px solid var(--de-border);
  border-left: 5px solid var(--de-green);
  border-radius: var(--de-radius);
  background: #f7fbf9;
  box-shadow: none;
}

.de-home-intro-card {
  color: var(--de-text) !important;
  background: linear-gradient(90deg, #f7fbff 0%, #ffffff 72%) !important;
  border: 1px solid #cfe4ff;
  border-left: 6px solid var(--de-blue);
}

.de-home-intro-card .sd-card-header,
.de-home-intro-card .sd-card-title {
  color: var(--de-text) !important;
  background: transparent !important;
  border-bottom: 0;
}

.de-home-intro-card p {
  color: var(--de-body) !important;
}

.de-home-grid {
  margin: 1.25rem 0 2rem;
}

.de-home-card {
  display: flex;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
  color: var(--de-text) !important;
  background: var(--de-white) !important;
  border: 1px solid var(--de-border);
  border-radius: var(--de-radius-lg);
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.de-home-card:hover,
.de-home-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--de-shadow-hover);
}

.de-home-card .sd-card-img-top {
  display: block;
  width: 100%;
  height: 220px;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: #f1f5f9;
  border-bottom: 1px solid var(--de-border);
  transition: transform 0.3s ease;
}

.de-home-card:hover .sd-card-img-top {
  transform: scale(1.03);
}

.de-home-card .sd-card-body {
  flex: 1;
  padding: 1.25rem;
  color: var(--de-text) !important;
  background: var(--de-white) !important;
}

.de-home-card .sd-card-title {
  color: var(--de-text) !important;
  font-size: var(--de-font-size-h5);
  font-weight: 600;
  line-height: 1.3;
}

.de-home-card p {
  color: var(--de-body) !important;
}

.de-home-card .sd-card-footer {
  padding: 0.85rem 1.25rem;
  color: var(--de-blue) !important;
  background: var(--de-white) !important;
  border-top: 1px solid var(--de-border);
}

.de-home-card .sd-card-footer a {
  color: var(--de-blue) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.de-data-card {
  border-top: 5px solid var(--de-blue);
}

.de-platform-card {
  border-top: 5px double var(--de-green);
}

.de-access-card {
  border-top: 5px dashed var(--de-purple);
}

.de-status-card {
  border-top: 5px dotted #9a5a00;
}


/* ==========================================================
   10. Product catalogue
   ========================================================== */

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.product-list .product-item {
  display: flex;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
  color: var(--de-text);
  background: var(--de-white);
  border: 1px solid var(--de-border);
  border-radius: var(--de-radius);
  box-shadow: var(--de-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-list .product-item:hover,
.product-list .product-item:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--de-shadow-hover);
}

/* Consistent image region: images are restored, never selectively hidden. */
.product-list .product-item img,
.product-list .product-item picture,
.product-list .product-item .sd-card-img-top {
  display: block !important;
  width: 100%;
  height: 180px;
  min-height: 180px;
  margin: 0;
  padding: 0.75rem;
  object-fit: contain;
  object-position: center;
  background: #f8fafc;
  border-bottom: 1px solid var(--de-border);
}

.product-list .product-item p {
  margin: 0.65rem 1rem;
  color: var(--de-body) !important;
  font-size: var(--de-font-size-body);
  line-height: 1.55;
}

.product-list .product-item p:first-of-type,
.product-list .product-item .topic-title {
  color: var(--de-text) !important;
  font-size: var(--de-font-size-h5);
  font-weight: 600;
  line-height: 1.35;
}

.product-list .product-item p:first-child a,
.product-list .product-item .topic-title a,
.product-list .product-item > a:first-child {
  color: var(--de-blue);
}

.product-list .product-item p:last-child {
  margin-top: auto;
  margin-bottom: 1rem;
}

.product-list .product-item p:last-child a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.65rem 1rem;
  color: #ffffff !important;
  background: var(--de-blue);
  border: 2px solid var(--de-blue);
  border-radius: 6px;
  font-size: var(--de-font-size-button);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.product-list .product-item p:last-child a:hover,
.product-list .product-item p:last-child a:focus {
  color: #ffffff !important;
  background: var(--de-blue-dark);
  border-color: var(--de-blue-dark);
}


/* ==========================================================
   11. Platform cards / Direct Access
   ========================================================== */

.platform-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.platform-list .product-item {
  overflow: hidden;
  background: var(--de-white);
  border: 1px solid var(--de-border);
  border-radius: var(--de-radius);
}

.platform-list .product-item img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  object-fit: cover;
}

.platform .topic-title a {
  display: block;
  color: var(--de-blue);
  font-size: var(--de-font-size-h4);
  font-weight: 600;
}

.de-platform-horizontal-card {
  overflow: hidden;
  margin: 1rem 0 1.6rem;
  background: var(--de-white);
  border: 1px solid var(--de-border);
  border-left: 5px solid var(--de-blue);
  border-radius: var(--de-radius);
  box-shadow: var(--de-shadow);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.de-platform-horizontal-card > .sd-row {
  display: grid !important;
  grid-template-columns: minmax(220px, 32%) 1fr;
  align-items: stretch;
  margin: 0;
}

.de-platform-horizontal-media {
  display: flex;
  min-height: 230px;
  overflow: hidden;
  background: #eef3f8;
}

.de-platform-horizontal-media img {
  display: block;
  width: 100%;
  height: 230px;
  min-height: 230px;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: #eef3f8;
  transition: transform 0.35s ease;
}

.de-platform-horizontal-content {
  display: flex;
  min-height: 230px;
  padding: 1.4rem 1.6rem !important;
  flex-direction: column;
  justify-content: center;
  color: var(--de-text) !important;
  background: var(--de-white) !important;
}

.de-platform-horizontal-content > p:first-child {
  margin: 0 0 0.8rem;
}

.de-platform-horizontal-content > p:first-child a {
  color: var(--de-blue) !important;
  font-size: var(--de-font-size-h4);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.de-platform-horizontal-content p {
  margin: 0 0 1rem;
  color: var(--de-body) !important;
  font-size: var(--de-font-size-body);
  line-height: 1.6;
}

.de-platform-more-button,
.de-platform-horizontal-content > p:last-child a {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0.6rem 1rem !important;
  color: #ffffff !important;
  background: var(--de-blue) !important;
  border: 2px solid var(--de-blue) !important;
  border-radius: 6px !important;
  font-size: var(--de-font-size-button);
  font-weight: 600;
  text-decoration: none !important;
}

.de-platform-more-button:hover,
.de-platform-more-button:focus,
.de-platform-horizontal-content > p:last-child a:hover,
.de-platform-horizontal-content > p:last-child a:focus {
  color: #ffffff !important;
  background: var(--de-blue-dark) !important;
  border-color: var(--de-blue-dark) !important;
}

.de-platform-horizontal-card:hover,
.de-platform-horizontal-card:focus-within {
  transform: translateY(-4px);
  border-left-width: 7px;
  border-left-color: var(--de-orange);
  box-shadow: 0 14px 30px rgba(15, 35, 70, 0.15);
}

.de-platform-horizontal-card:hover .de-platform-horizontal-media img,
.de-platform-horizontal-card:focus-within .de-platform-horizontal-media img {
  transform: scale(1.025);
}


/* ==========================================================
   12. Service Status and Technical Alerts
   ========================================================== */

.de-service-banner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.5rem;
  padding: 0.95rem 1.1rem;
  color: var(--de-text);
  background: #fff8f1;
  border: 1px solid #e6b98f;
  border-left: 6px solid var(--de-orange);
  border-radius: var(--de-radius);
  box-shadow: var(--de-shadow);
}

.de-service-banner::before {
  display: inline-grid;
  place-items: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  color: #ffffff;
  background: var(--de-orange);
  border-radius: 50%;
  content: "!";
  font-weight: 800;
}

.de-service-banner p {
  margin: 0;
}

.de-service-banner a {
  margin-left: auto;
  padding: 0.5rem 0.8rem;
  color: #ffffff !important;
  background: var(--de-navy);
  border: 2px solid var(--de-navy);
  border-radius: 6px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  white-space: nowrap;
}

.de-service-banner a:hover,
.de-service-banner a:focus {
  background: #061a3a;
  border-color: #061a3a;
}

.status-summary {
  margin: 1.25rem 0;
  padding: 1.15rem 1.3rem;
  color: var(--de-text);
  background: var(--de-white);
  border: 1px solid var(--de-border);
  border-left-width: 6px;
  border-radius: var(--de-radius);
  box-shadow: var(--de-shadow);
}

.status-summary p:last-child,
.tech-alert p:last-child,
.status-card p:last-child,
.tech-alert-info p:last-child {
  margin-bottom: 0;
}

.status-operational {
  border-left-color: var(--de-green);
  background: #f7fbf9;
}

.status-operational::before {
  display: inline-block;
  margin-bottom: 0.55rem;
  color: #075f47;
  content: "✓ Operational";
  font-weight: 700;
}

.status-degraded {
  border-left-color: var(--de-orange);
  background: #fff8f1;
}

.status-degraded::before {
  display: inline-block;
  margin-bottom: 0.55rem;
  color: #8a3b00;
  content: "⚠ Degraded service";
  font-weight: 700;
}

.status-outage {
  border-left-color: var(--de-red);
  background: #fff7f6;
}

.status-outage::before {
  display: inline-block;
  margin-bottom: 0.55rem;
  color: #8f1d16;
  content: "✕ Service outage";
  font-weight: 700;
}

.tech-alert {
  position: relative;
  margin: 1.35rem 0;
  padding: 1.35rem 1.45rem 1.35rem 1.6rem;
  color: var(--de-text);
  background: var(--de-white);
  border: 1px solid var(--de-border);
  border-left-width: 7px;
  border-radius: var(--de-radius);
  box-shadow: var(--de-shadow);
}

.tech-alert > p:first-child {
  margin-bottom: 0.7rem;
  color: var(--de-navy);
  font-size: var(--de-font-size-h5);
  font-weight: 600;
}

.tech-alert-warning {
  border-left-color: var(--de-orange);
  background: linear-gradient(90deg, #fff8f1 0%, #ffffff 58%);
}

.tech-alert-warning::before {
  display: inline-block;
  margin-bottom: 0.55rem;
  color: #8a3b00;
  content: "⚠ Warning";
  font-weight: 700;
}

.tech-alert-critical {
  border-left-color: var(--de-red);
  background: linear-gradient(90deg, #fff7f6 0%, #ffffff 58%);
}

.tech-alert-critical::before {
  display: inline-block;
  margin-bottom: 0.55rem;
  color: #8f1d16;
  content: "✕ Critical";
  font-weight: 700;
}

.tech-alert-resolved {
  border-left-color: var(--de-green);
  background: linear-gradient(90deg, #f7fbf9 0%, #ffffff 58%);
}

.tech-alert-resolved::before {
  display: inline-block;
  margin-bottom: 0.55rem;
  color: #075f47;
  content: "✓ Resolved";
  font-weight: 700;
}

.tech-alert .field-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 0.8rem;
  margin: 0.8rem 0 1rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 7px;
}

.tech-alert .field-name {
  color: var(--de-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.tech-alert .field-body {
  color: var(--de-text);
}

.status-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 1.8rem;
}

.status-card {
  min-width: 0;
  padding: 1.15rem 1.2rem;
  color: var(--de-text);
  background: var(--de-white);
  border: 1px solid var(--de-border);
  border-top-width: 5px;
  border-radius: var(--de-radius);
  box-shadow: var(--de-shadow);
}

.status-card-maintenance,
.status-maintenance {
  border-top-color: var(--de-blue);
  border-left-color: var(--de-blue);
}

.status-card-maintenance::before,
.status-maintenance::before {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--de-blue);
  content: "Maintenance";
  font-weight: 700;
}

.status-card-resolved,
.status-resolved {
  border-top-color: var(--de-green);
  border-left-color: var(--de-green);
}

.status-card-resolved::before,
.status-resolved::before {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: #075f47;
  content: "✓ Resolved";
  font-weight: 700;
}

.status-card-software,
.status-software {
  border-top-color: var(--de-purple);
  border-left-color: var(--de-purple);
}

.status-card-software::before,
.status-software::before {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--de-purple);
  content: "Software";
  font-weight: 700;
}

.tech-alert-info {
  margin: 1.5rem 0;
  padding: 1.2rem 1.3rem;
  color: var(--de-text);
  background: #f6f9fc;
  border: 1px solid #cbdcf0;
  border-left: 6px solid var(--de-blue);
  border-radius: var(--de-radius);
}

.tech-alert-info::before {
  display: inline-block;
  margin-bottom: 0.45rem;
  color: var(--de-blue);
  content: "ⓘ Information";
  font-weight: 700;
}

.status-label {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.status-label-warning {
  color: #7a3300;
  background: #fff2e2;
  border: 1px solid #d89a62;
}

.status-label-resolved {
  color: #075f47;
  background: #eaf7f1;
  border: 1px solid #78bda5;
}

.tech-alert-home-card {
  border-top: 5px dotted #9a5a00;
}


/* ==========================================================
   13. Language selector
   ========================================================== */

.lang-picker,
.de-language-switcher {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  width: 100%;
  margin-bottom: 0.65rem;
  color: var(--de-muted);
  font-size: 0.82rem;
}

.lang-picker a,
.de-language-switcher a {
  color: var(--de-blue);
  font-weight: 700;
  text-decoration: none;
}

.lang-picker a:hover,
.lang-picker a:focus,
.de-language-switcher a:hover,
.de-language-switcher a:focus {
  color: var(--de-orange);
  text-decoration: underline;
}


/* ==========================================================
   14. Documentation index
   ========================================================== */

.bd-article .genindex-jumpbox {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 2rem;
  padding: 1rem;
  background: #172033 !important;
  border: 1px solid #334155 !important;
  border-radius: var(--de-radius);
}

.bd-article .genindex-jumpbox a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.15rem;
  min-height: 2.15rem;
  padding: 0.3rem 0.55rem;
  color: #ffffff !important;
  background: #172033 !important;
  border: 1px solid #475569 !important;
  border-radius: 6px;
  font-weight: 800;
  text-decoration: none !important;
}

.bd-article .genindex-jumpbox a:hover,
.bd-article .genindex-jumpbox a:focus {
  color: #ffffff !important;
  background: var(--de-blue) !important;
  border-color: #60a5fa !important;
}

.bd-article .genindex-jumpbox + h2,
.bd-article .genindex-jumpbox ~ h2 {
  margin-top: 2rem;
  padding: 0.6rem 0.85rem;
  color: var(--de-navy);
  background: #f6f9fc;
  border-left: 5px solid var(--de-blue);
  border-radius: 6px;
  font-size: 1.45rem;
}

.bd-article table.genindextable {
  width: 100%;
  margin: 0 0 2rem;
  border-collapse: separate;
  border-spacing: 1rem 0.75rem;
}

.bd-article table.genindextable td {
  width: 50%;
  padding: 1rem 1.1rem;
  vertical-align: top;
  background: #172033;
  border: 1px solid #334155;
  border-radius: var(--de-radius);
  box-shadow: 0 2px 8px rgba(15, 35, 70, 0.04);
}

.bd-article table.genindextable ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.bd-article table.genindextable > tbody > tr > td > ul > li {
  margin-bottom: 0.7rem;
  color: #ffffff;
  font-weight: 700;
}

.bd-article table.genindextable ul ul {
  margin-top: 0.35rem;
  padding-left: 1rem;
  border-left: 2px solid #475569;
}

.bd-article table.genindextable ul ul li {
  margin: 0.25rem 0;
  color: #ffffff;
  font-weight: 400;
}

.bd-article table.genindextable a,
.bd-article table.genindextable a:visited {
  color: #ffffff !important;
  text-decoration: none;
}

.bd-article table.genindextable a:hover,
.bd-article table.genindextable a:focus {
  color: var(--de-yellow) !important;
  text-decoration: underline;
}


/* ==========================================================
   15. Footer
   ========================================================== */

.bd-footer {
  margin-top: 1.5rem;
  padding: 0 !important;
  color: #ffffff !important;
  background: var(--de-navy) !important;
  border-top: 4px solid var(--de-orange);
}

.deafrica-footer {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  color: #ffffff !important;
}

.deafrica-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.deafrica-footer__brand strong {
  color: #ffffff !important;
  font-size: var(--de-font-size-h5);
  font-weight: 600;
}

.deafrica-footer__brand span,
.deafrica-footer__copyright {
  color: #cbd5e1 !important;
}

.deafrica-footer__brand span {
  font-size: 0.86rem;
}

.deafrica-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.deafrica-footer__links a {
  color: #8ec8ff !important;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.deafrica-footer__links a:hover,
.deafrica-footer__links a:focus {
  color: #ffd166 !important;
}

.deafrica-footer__copyright {
  font-size: 0.82rem;
  white-space: nowrap;
}

.bd-footer .footer-items,
.bd-footer .footer-items__start {
  width: 100%;
}


/* ==========================================================
   16. Tables and utility helpers
   ========================================================== */

.youtube_wrapper {
  margin-bottom: 3em;
}

.bd-article .toctree-wrapper > p.caption,
.fakeheading {
  color: var(--de-orange);
  font-size: var(--de-font-size-h4);
  font-weight: 600;
  line-height: 1.3;
}

.bd-article a[href^="http"]:not(.btn):not(.sd-btn) {
  padding-right: 14px;
  background: url("external.png") center right no-repeat;
}

.bd-article ul.xr-var-list li > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.bd-article ul.xr-dim-list li {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bd-article dl.xr-attrs dt,
.bd-article dl.xr-attrs dd {
  float: left !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 10px 0 0 !important;
  color: inherit !important;
  background: inherit !important;
  border-top: none !important;
  font-size: inherit !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.bd-article dl.xr-attrs dt {
  grid-column: 1 !important;
  font-weight: normal !important;
}

.bd-article dl.xr-attrs dd {
  grid-column: 2 !important;
}

img.float-left {
  float: left;
  margin: 0 1rem 1rem 0;
}

img.float-right {
  float: right;
  margin: 0 0 1rem 1rem;
}

div.centered-italic {
  font-size: 17px;
  font-style: italic;
  text-align: center;
}

p.empty-space {
  height: 200px;
  background: transparent;
  opacity: 0;
}

p.empty-space2 {
  margin-bottom: 2em;
}


/* ==========================================================
   17. Dark mode
   ========================================================== */

html[data-theme="dark"] .de-home-card,
html[data-theme="dark"] .de-home-card .sd-card-body,
html[data-theme="dark"] .de-home-card .sd-card-footer,
html[data-theme="dark"] .de-home-intro-card,
html[data-theme="dark"] .de-platform-horizontal-content,
html[data-theme="dark"] .status-summary,
html[data-theme="dark"] .tech-alert,
html[data-theme="dark"] .status-card,
html[data-theme="dark"] .tech-alert-info,
html[data-theme="dark"] .de-service-banner {
  color: #e5edf7 !important;
  background: #172033 !important;
  border-color: #475569;
}

html[data-theme="dark"] .de-home-card .sd-card-title,
html[data-theme="dark"] .de-home-card p,
html[data-theme="dark"] .de-home-intro-card .sd-card-title,
html[data-theme="dark"] .de-home-intro-card p,
html[data-theme="dark"] .de-platform-horizontal-content p,
html[data-theme="dark"] .tech-alert .field-body {
  color: #e5edf7 !important;
}

html[data-theme="dark"] .de-home-card .sd-card-footer a,
html[data-theme="dark"] .bd-article a:not(.btn):not(.sd-btn):not(.de-platform-more-button),
html[data-theme="dark"] .bd-sidebar-primary a,
html[data-theme="dark"] .bd-sidebar-secondary a {
  color: #8ec8ff !important;
}

html[data-theme="dark"] .bd-article a:hover,
html[data-theme="dark"] .bd-sidebar-primary a:hover,
html[data-theme="dark"] .bd-sidebar-secondary a:hover {
  color: #ffd166 !important;
}

html[data-theme="dark"] .tech-alert > p:first-child {
  color: #ffffff;
}

html[data-theme="dark"] .tech-alert .field-list {
  background: #111827;
  border-color: #475569;
}

html[data-theme="dark"] .bd-footer {
  background: #061a3a !important;
}

html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] .btn:focus-visible,
html[data-theme="dark"] .sd-btn:focus-visible,
html[data-theme="dark"] .nav-link:focus-visible {
  outline-color: #ffffff !important;
}


/* ==========================================================
   18. Accessibility preferences
   ========================================================== */

@media (prefers-contrast: more) {
  body,
  .bd-article {
    color: #111111;
  }

  .bd-article a:not(.btn):not(.sd-btn):not(.de-platform-more-button),
  .bd-sidebar-primary a,
  .bd-sidebar-secondary a {
    color: #004f91;
    text-decoration-thickness: 2px;
  }

  .de-home-card,
  .de-platform-horizontal-card,
  .bd-article,
  .bd-sidebar-primary,
  .bd-sidebar-secondary {
    border-width: 2px;
    border-color: #475569;
  }

  button,
  .btn,
  .sd-btn,
  .de-platform-more-button {
    border-width: 2px !important;
  }

  a:focus-visible,
  button:focus-visible,
  .btn:focus-visible,
  .sd-btn:focus-visible,
  .nav-link:focus-visible {
    outline-width: 4px !important;
  }
}

@media (forced-colors: active) {
  a,
  button,
  .btn,
  .sd-btn,
  .nav-link,
  .de-platform-more-button {
    forced-color-adjust: auto;
  }

  .de-home-card,
  .de-platform-horizontal-card,
  .bd-article,
  .bd-sidebar-primary,
  .bd-sidebar-secondary {
    border: 1px solid CanvasText;
  }

  a:focus-visible,
  button:focus-visible,
  .btn:focus-visible,
  .sd-btn:focus-visible,
  .nav-link:focus-visible {
    outline: 3px solid Highlight !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .de-home-card,
  .de-home-card .sd-card-img-top,
  .de-platform-horizontal-card,
  .de-platform-horizontal-media img,
  .de-platform-more-button,
  .product-list .product-item {
    transition: none;
  }

  .de-home-card:hover,
  .de-platform-horizontal-card:hover,
  .de-platform-horizontal-card:focus-within,
  .product-list .product-item:hover,
  .product-list .product-item:focus-within,
  .de-platform-horizontal-card:hover .de-platform-horizontal-media img {
    transform: none;
  }
}


/* ==========================================================
   19. Responsive behaviour
   ========================================================== */

@media screen and (min-width: 767px) {
  .bd-article table td,
  .bd-article table th {
    white-space: normal !important;
  }

  .bd-article .table-wrapper {
    overflow-x: visible !important;
  }
}

@media screen and (max-width: 959px) {
  .bd-sidebar-primary,
  .bd-sidebar-secondary {
    margin: 0;
    border-radius: 0;
  }

  .bd-article {
    margin-top: 0;
    padding: 1.25rem;
    border-radius: 0;
  }

  .navbar-brand {
    min-width: auto;
  }

  .navbar-brand img {
    max-width: 160px;
  }

  .platform-list,
  .product-list {
    grid-template-columns: 1fr;
  }

  .deafrica-footer {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem;
    text-align: center;
  }

  .deafrica-footer__links {
    justify-content: center;
  }

  .deafrica-footer__copyright {
    white-space: normal;
  }
}

@media screen and (max-width: 900px) {
  .de-platform-horizontal-card > .sd-row {
    grid-template-columns: 1fr;
  }

  .de-platform-horizontal-media,
  .de-platform-horizontal-media img {
    width: 100%;
    height: 220px;
    min-height: 220px;
  }

  .de-platform-horizontal-content {
    min-height: auto;
    padding: 1.2rem 1.25rem !important;
  }

  .status-card-grid {
    grid-template-columns: 1fr;
  }

  .de-service-banner {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .de-service-banner a {
    margin-left: 2.85rem;
  }
}

@media screen and (max-width: 767px) {
  .bd-article h1 {
    font-size: 34px;
  }

  .bd-article h2 {
    font-size: 28px;
  }

  .bd-article h3 {
    font-size: 23px;
  }

  .bd-article h4 {
    font-size: 19px;
  }

  .bd-article h5 {
    font-size: 17px;
  }

  .bd-article .lead {
    font-size: 19px;
  }
}

@media screen and (max-width: 760px) {
  .bd-article table.genindextable,
  .bd-article table.genindextable tbody,
  .bd-article table.genindextable tr,
  .bd-article table.genindextable td {
    display: block;
    width: 100%;
  }

  .bd-article table.genindextable {
    border-spacing: 0;
  }

  .bd-article table.genindextable td {
    margin-bottom: 1rem;
  }
}

@media screen and (max-width: 560px) {
  .product-list .product-item img,
  .product-list .product-item .sd-card-img-top {
    height: 160px;
    min-height: 160px;
  }

  .de-platform-horizontal-media,
  .de-platform-horizontal-media img {
    height: 190px;
    min-height: 190px;
  }

  .tech-alert .field-list {
    grid-template-columns: 1fr;
  }

  .de-service-banner a {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
}
/* ==========================================================
   20. Final interface refinement
   Language placement, homepage state, image sizing and CTA hierarchy
   ========================================================== */

/* Language switcher — keep English/French on the right */
.lang-picker,
.de-language-switcher {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  width: 100%;
  margin: 0 0 0.75rem auto;
  text-align: right;
}

.bd-header .lang-picker,
.bd-header .de-language-switcher,
.navbar .lang-picker,
.navbar .de-language-switcher {
  margin-left: auto;
  margin-right: 0;
}

/* Homepage Home-tab state */
.bd-header .navbar-nav a[aria-current="page"],
.bd-header .navbar-nav .current > a,
.bd-header .navbar-nav .active > a {
  color: var(--de-orange) !important;
  background: #fff4e8 !important;
  border-color: #d96a1c !important;
  border-bottom: 4px solid var(--de-orange) !important;
  font-weight: 800 !important;
}

/* Highlight Home on the homepage even if Sphinx does not add current/active */
body:has(.de-home-grid) .bd-header .navbar-nav a[href="./"],
body:has(.de-home-grid) .bd-header .navbar-nav a[href="index.html"],
body:has(.de-home-grid) .bd-header .navbar-nav a[href="/"],
body:has(.de-home-grid) .bd-header .navbar-nav a[href$="/index.html"] {
  color: var(--de-orange) !important;
  background: #fff4e8 !important;
  border-color: #d96a1c !important;
  border-bottom: 4px solid var(--de-orange) !important;
  font-weight: 800 !important;
}

/* Prevent oversized normal article images */
.bd-article img:not(.sd-card-img-top):not(.de-platform-horizontal-media img) {
  max-width: 100%;
  height: auto;
}

.bd-article > img,
.bd-article > p > img,
.bd-article figure > img {
  display: block;
  width: auto;
  max-width: min(100%, 720px);
  max-height: 420px;
  margin: 1rem auto;
  object-fit: contain;
  border-radius: 8px;
}

/* Homepage cards */
.de-home-grid {
  display: grid;
  gap: 1rem;
  align-items: stretch;
}

.de-home-card {
  min-width: 0;
}

.de-home-card .sd-card-img-top {
  width: 100%;
  height: 240px;
  min-height: 240px;
  object-fit: cover;
  object-position: center;
}

.de-home-card .sd-card-body {
  padding: 1rem 1.1rem;
}

.de-home-card .sd-card-footer {
  margin-top: auto;
  padding: 0.75rem 1.1rem;
}

/* Product catalogue */
.product-list {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
}

.product-list .product-item {
  min-width: 0;
}

.product-list .product-item img,
.product-list .product-item picture,
.product-list .product-item .sd-card-img-top {
  width: 100%;
  height: 160px;
  min-height: 160px;
  padding: 0.5rem;
  object-fit: contain;
  object-position: center;
}

.product-list .product-item p {
  margin: 0.55rem 1rem;
}

.product-list .product-item p:last-child {
  margin-top: auto;
  padding-top: 0.35rem;
}

/* Continental-service/product listings */
.bd-article section > img,
.bd-article section > p > img,
.bd-article .section > img,
.bd-article .section > p > img {
  width: auto;
  max-width: min(100%, 620px);
  max-height: 320px;
  margin: 0.6rem 0 0.8rem;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}

/* Platform / Direct Access cards */
.de-platform-horizontal-card > .sd-row {
  grid-template-columns: minmax(180px, 28%) 1fr;
}

.de-platform-horizontal-media {
  min-height: 185px;
}

.de-platform-horizontal-media img {
  height: 185px;
  min-height: 185px;
  object-fit: cover;
}

.de-platform-horizontal-content {
  min-height: 185px;
  padding: 1.1rem 1.35rem !important;
}

/* Primary CTA: View product details */
.product-list .product-item p:last-child a,
a.de-view-product-details,
.de-product-details-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.6rem 0.9rem;
  color: #ffffff !important;
  background: var(--de-blue) !important;
  border: 2px solid var(--de-blue) !important;
  border-radius: 6px;
  font-size: var(--de-font-size-button);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
}

.product-list .product-item p:last-child a:hover,
.product-list .product-item p:last-child a:focus,
a.de-view-product-details:hover,
a.de-view-product-details:focus,
.de-product-details-button:hover,
.de-product-details-button:focus {
  color: #ffffff !important;
  background: var(--de-blue-dark) !important;
  border-color: var(--de-blue-dark) !important;
}

/* Secondary CTA: View more / More */
.de-platform-more-button,
a.de-view-more,
.de-view-more-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 40px;
  padding: 0.5rem 0.8rem;
  color: var(--de-blue) !important;
  background: var(--de-white) !important;
  border: 2px solid var(--de-blue) !important;
  border-radius: 6px;
  font-size: var(--de-font-size-button);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
}

.de-platform-more-button:hover,
.de-platform-more-button:focus,
a.de-view-more:hover,
a.de-view-more:focus,
.de-view-more-button:hover,
.de-view-more-button:focus {
  color: #ffffff !important;
  background: var(--de-blue) !important;
}

/* Tertiary CTA: Explore */
.de-home-card .sd-card-footer a,
a.de-explore,
.de-explore-button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--de-blue) !important;
  background: transparent !important;
  border: 0 !important;
  font-weight: 700;
  text-decoration: underline !important;
  text-underline-offset: 0.18em;
}

.de-home-card .sd-card-footer a:hover,
.de-home-card .sd-card-footer a:focus,
a.de-explore:hover,
a.de-explore:focus,
.de-explore-button:hover,
.de-explore-button:focus {
  color: var(--de-orange) !important;
}

.bd-article section,
.bd-article .section {
  scroll-margin-top: 6rem;
}

.bd-article section + section,
.bd-article .section + .section {
  margin-top: 2rem;
}

.bd-article h2 {
  margin-top: 2rem;
}

.bd-article h3 {
  margin-top: 1.5rem;
}

@media screen and (max-width: 1100px) {
  .de-home-card .sd-card-img-top {
    height: 210px;
    min-height: 210px;
  }
}

@media screen and (max-width: 900px) {
  .de-platform-horizontal-card > .sd-row {
    grid-template-columns: 1fr;
  }

  .de-platform-horizontal-media,
  .de-platform-horizontal-media img {
    height: 195px;
    min-height: 195px;
  }

  .bd-article section > img,
  .bd-article section > p > img,
  .bd-article .section > img,
  .bd-article .section > p > img {
    max-width: 100%;
    max-height: 290px;
  }
}

@media screen and (max-width: 767px) {
  .de-home-grid {
    grid-template-columns: 1fr;
  }

  .de-home-card .sd-card-img-top {
    height: 190px;
    min-height: 190px;
  }

  .product-list {
    grid-template-columns: 1fr;
  }

  .product-list .product-item img,
  .product-list .product-item .sd-card-img-top {
    height: 145px;
    min-height: 145px;
  }

  .lang-picker,
  .de-language-switcher {
    justify-content: flex-end;
    text-align: right;
  }
}

@media screen and (max-width: 560px) {
  .bd-article > img,
  .bd-article > p > img,
  .bd-article figure > img {
    max-height: 250px;
  }

  .de-platform-horizontal-media,
  .de-platform-horizontal-media img {
    height: 165px;
    min-height: 165px;
  }
}
/* ==========================================================
   21. Footer presentation refinement
   ========================================================== */

/*
   Present the PyData footer as a clear DE Africa information band:
   brand/tagline -> useful links -> copyright.
*/

.bd-footer {
  margin-top: 2.5rem;
  padding: 0 !important;
  color: #ffffff !important;
  background: var(--de-navy) !important;
  border-top: 4px solid var(--de-orange);
}

.bd-footer .footer-items {
  display: grid;
  grid-template-columns: minmax(300px, 1.5fr) minmax(260px, auto) auto;
  align-items: center;
  column-gap: 2rem;
  row-gap: 0.75rem;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 1.35rem 2rem !important;
  color: #ffffff !important;
}

/*
   PyData may place all footer content in footer-items__start.
   Turn that container into a tidy wrapping row rather than one
   long unstructured sentence.
*/
.bd-footer .footer-items__start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  width: 100%;
  color: #ffffff !important;
}

.bd-footer .footer-items__center,
.bd-footer .footer-items__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Brand */
.bd-footer strong,
.bd-footer b {
  color: #ffffff !important;
  font-size: 1rem;
  font-weight: 700;
}

/* General footer text */
.bd-footer p,
.bd-footer span,
.bd-footer div {
  color: #dbe7f5;
  line-height: 1.5;
}

/* Links */
.bd-footer a,
.bd-footer a:visited {
  color: #8ec8ff !important;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.bd-footer a:hover,
.bd-footer a:focus {
  color: #ffd166 !important;
  text-decoration-thickness: 2px;
}

/*
   Visually separate consecutive footer links when the template
   renders them inline without spacing.
*/
.bd-footer a + a {
  margin-left: 0.85rem;
}

/* Copyright */
.bd-footer .deafrica-footer__copyright,
.bd-footer .copyright,
.bd-footer [class*="copyright"] {
  color: #cbd5e1 !important;
  font-size: 0.82rem;
  white-space: nowrap;
}

/* Custom DE Africa footer, if used */
.deafrica-footer {
  display: grid;
  grid-template-columns: minmax(300px, 1.5fr) minmax(260px, auto) auto;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 1.35rem 2rem;
  color: #ffffff !important;
  background: var(--de-navy);
}

.deafrica-footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
}

.deafrica-footer__brand strong {
  color: #ffffff !important;
  font-size: 1rem;
  font-weight: 700;
}

.deafrica-footer__brand span {
  color: #dbe7f5 !important;
  font-size: 0.9rem;
}

.deafrica-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem 1rem;
}

.deafrica-footer__links a {
  color: #8ec8ff !important;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.deafrica-footer__copyright {
  justify-self: end;
  color: #cbd5e1 !important;
  font-size: 0.82rem;
  white-space: nowrap;
}


/* Tablet */
@media screen and (max-width: 1000px) {
  .bd-footer .footer-items,
  .deafrica-footer {
    grid-template-columns: 1fr 1fr;
  }

  .bd-footer .footer-items__end,
  .deafrica-footer__copyright {
    grid-column: 1 / -1;
    justify-self: start;
  }
}


/* Mobile */
@media screen and (max-width: 700px) {
  .bd-footer .footer-items,
  .deafrica-footer {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 1.2rem 1.25rem !important;
    text-align: left;
  }

  .bd-footer .footer-items__start,
  .bd-footer .footer-items__center,
  .bd-footer .footer-items__end,
  .deafrica-footer__brand,
  .deafrica-footer__links {
    justify-content: flex-start;
  }

  .deafrica-footer__copyright {
    justify-self: start;
    white-space: normal;
  }

  .bd-footer a + a {
    margin-left: 0;
  }
}
/* ==========================================================
   22. Homepage layout and navigation correction
   ========================================================== */


/* ----------------------------------------------------------
   A. Reset top-navigation state
   Prevent several tabs appearing active simultaneously
   ---------------------------------------------------------- */

.bd-header .navbar-nav > li > a,
.bd-header .navbar-nav > .nav-item > .nav-link {
  color: var(--de-text) !important;
  background: transparent !important;
  border-color: transparent !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

/* Hover only */
.bd-header .navbar-nav > li > a:hover,
.bd-header .navbar-nav > .nav-item > .nav-link:hover {
  color: var(--de-orange) !important;
  background: #fff7f0 !important;
  border-color: #f3c7a6 !important;
}

/*
   Use only the actual link-level active markers.
   Do not style a link merely because an ancestor <li> has "current".
*/
.bd-header .navbar-nav > li > a[aria-current="page"],
.bd-header .navbar-nav > .nav-item > .nav-link[aria-current="page"],
.bd-header .navbar-nav a.de-nav-active {
  color: var(--de-orange) !important;
  background: #fff4e8 !important;
  border-color: #d96a1c !important;
  border-bottom: 4px solid var(--de-orange) !important;
  font-weight: 800 !important;
}


/* Homepage fallback: highlight Home and only Home */
body:has(.de-home-grid) .bd-header .navbar-nav > li > a,
body:has(.de-home-grid) .bd-header .navbar-nav > .nav-item > .nav-link {
  color: var(--de-text) !important;
  background: transparent !important;
  border-color: transparent !important;
  border-bottom: 1px solid transparent !important;
  font-weight: 700 !important;
}

body:has(.de-home-grid) .bd-header .navbar-nav a[href="./"],
body:has(.de-home-grid) .bd-header .navbar-nav a[href="index.html"],
body:has(.de-home-grid) .bd-header .navbar-nav a[href="/"],
body:has(.de-home-grid) .bd-header .navbar-nav a[href$="/index.html"] {
  color: var(--de-orange) !important;
  background: #fff4e8 !important;
  border-color: #d96a1c !important;
  border-bottom: 4px solid var(--de-orange) !important;
  font-weight: 800 !important;
}


/* ----------------------------------------------------------
   B. Documentation Sections grid
   ---------------------------------------------------------- */

.de-home-grid {
  width: 100%;
  margin: 1.25rem 0 2rem;
}

/*
   Sphinx Design often inserts .sd-row/.sd-col wrappers.
   Control those wrappers directly so Bootstrap column widths
   do not squeeze cards into narrow strips.
*/
.de-home-grid > .sd-row,
.de-home-grid .sd-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
  width: 100% !important;
  margin: 0 !important;
}

.de-home-grid .sd-col,
.de-home-grid [class*="sd-col"] {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
}


/* Card sizing */
.de-home-grid .de-home-card {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
  background: var(--de-white) !important;
  border: 1px solid var(--de-border);
  border-radius: 12px;
  box-shadow: var(--de-shadow);
}


/* Keep all four homepage images the same size */
.de-home-grid .de-home-card .sd-card-img-top {
  display: block;
  width: 100%;
  height: 220px;
  min-height: 220px;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: #0d2b38;
  border-bottom: 1px solid var(--de-border);
}


/* Card body */
.de-home-grid .de-home-card .sd-card-body {
  display: flex;
  flex: 1 1 auto;
  padding: 1rem 1.1rem;
  flex-direction: column;
}

.de-home-grid .de-home-card .sd-card-title {
  margin-bottom: 0.55rem;
  color: var(--de-text) !important;
  font-size: var(--de-font-size-h5);
  font-weight: 700;
  line-height: 1.3;
}

.de-home-grid .de-home-card p {
  margin-bottom: 0;
  color: var(--de-body) !important;
  line-height: 1.55;
}


/* Footer/action area stays aligned */
.de-home-grid .de-home-card .sd-card-footer {
  margin-top: auto;
  padding: 0.75rem 1.1rem;
  background: var(--de-white) !important;
  border-top: 1px solid var(--de-border);
}


/* Homepage Explore links = tertiary action */
.de-home-grid .de-home-card .sd-card-footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: auto;
  padding: 0;
  color: var(--de-blue) !important;
  background: transparent !important;
  border: 0 !important;
  font-size: var(--de-font-size-button);
  font-weight: 700;
  text-decoration: underline !important;
  text-underline-offset: 0.18em;
}

.de-home-grid .de-home-card .sd-card-footer a:hover,
.de-home-grid .de-home-card .sd-card-footer a:focus {
  color: var(--de-orange) !important;
  background: transparent !important;
}


/* ----------------------------------------------------------
   C. Homepage article width
   Give the card grid room to breathe
   ---------------------------------------------------------- */

body:has(.de-home-grid) .bd-main .bd-content .bd-article-container {
  max-width: 1180px;
}

body:has(.de-home-grid) .bd-article {
  overflow: visible;
}


/* ----------------------------------------------------------
   D. Responsive homepage
   ---------------------------------------------------------- */

@media screen and (max-width: 980px) {
  .de-home-grid > .sd-row,
  .de-home-grid .sd-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .de-home-grid .de-home-card .sd-card-img-top {
    height: 190px;
    min-height: 190px;
  }
}

@media screen and (max-width: 700px) {
  .de-home-grid > .sd-row,
  .de-home-grid .sd-row {
    grid-template-columns: 1fr !important;
  }

  .de-home-grid .de-home-card .sd-card-img-top {
    height: 190px;
    min-height: 190px;
  }
}
/* ==========================================================
   23. Data section product-card standardization
   ========================================================== */

/*
   Standardise all Data-section product listings to the same
   compact card format:
   image -> title -> description -> View product details
*/


/* ----------------------------------------------------------
   Data/product grid
   ---------------------------------------------------------- */

.bd-article .product-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  align-items: stretch;
  width: 100%;
  margin: 1rem 0 2rem;
}


/* ----------------------------------------------------------
   Product card
   ---------------------------------------------------------- */

.bd-article .product-list .product-item {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
  background: var(--de-white);
  border: 1px solid var(--de-border);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(15, 35, 70, 0.06);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.bd-article .product-list .product-item:hover,
.bd-article .product-list .product-item:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(15, 35, 70, 0.10);
}


/* ----------------------------------------------------------
   Equal image sizing
   ---------------------------------------------------------- */

.bd-article .product-list .product-item img,
.bd-article .product-list .product-item picture,
.bd-article .product-list .product-item .sd-card-img-top {
  display: block !important;
  width: 100%;
  height: 150px;
  min-height: 150px;
  margin: 0;
  padding: 0.35rem;
  object-fit: cover;
  object-position: center;
  background: #f8fafc;
  border-bottom: 1px solid var(--de-border);
}


/* ----------------------------------------------------------
   Product text
   ---------------------------------------------------------- */

.bd-article .product-list .product-item p {
  margin: 0.45rem 0.65rem;
  color: var(--de-body) !important;
  font-size: 14px;
  line-height: 1.45;
}


/* Product title */
.bd-article .product-list .product-item p:first-of-type,
.bd-article .product-list .product-item .topic-title {
  margin-top: 0.6rem;
  margin-bottom: 0.35rem;
  color: var(--de-text) !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.bd-article .product-list .product-item p:first-of-type a,
.bd-article .product-list .product-item .topic-title a,
.bd-article .product-list .product-item > a:first-child {
  color: var(--de-blue) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}


/* Description */
.bd-article .product-list .product-item p:not(:first-of-type):not(:last-child) {
  flex-grow: 1;
}


/* ----------------------------------------------------------
   View product details button
   ---------------------------------------------------------- */

.bd-article .product-list .product-item p:last-child {
  margin-top: auto;
  margin-bottom: 0.65rem;
  padding-top: 0.25rem;
}

.bd-article .product-list .product-item p:last-child a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0.5rem 0.7rem;
  color: #ffffff !important;
  background: var(--de-blue) !important;
  border: 2px solid var(--de-blue) !important;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  white-space: nowrap;
}

.bd-article .product-list .product-item p:last-child a:hover,
.bd-article .product-list .product-item p:last-child a:focus {
  color: #ffffff !important;
  background: var(--de-blue-dark) !important;
  border-color: var(--de-blue-dark) !important;
}


/* ----------------------------------------------------------
   Section headings and spacing
   ---------------------------------------------------------- */

.bd-article .product-list + h2,
.bd-article .product-list + h3 {
  margin-top: 2.25rem;
}

.bd-article h2 + .product-list,
.bd-article h3 + .product-list {
  margin-top: 0.75rem;
}


/* ----------------------------------------------------------
   Prevent isolated images from becoming oversized on Data pages
   ---------------------------------------------------------- */

.bd-article .product-list + img,
.bd-article h2 + img,
.bd-article h3 + img {
  max-width: 100%;
  height: auto;
}


/* ----------------------------------------------------------
   Responsive Data grid
   ---------------------------------------------------------- */

@media screen and (max-width: 1050px) {
  .bd-article .product-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .bd-article .product-list .product-item img,
  .bd-article .product-list .product-item .sd-card-img-top {
    height: 160px;
    min-height: 160px;
  }
}

@media screen and (max-width: 700px) {
  .bd-article .product-list {
    grid-template-columns: 1fr !important;
  }

  .bd-article .product-list .product-item img,
  .bd-article .product-list .product-item .sd-card-img-top {
    height: 190px;
    min-height: 190px;
  }
}
/* ==========================================================
   24. Cross-section consistency fixes
   Data cards, Platforms, Direct Access, Tech Alerts, Homepage
   ========================================================== */


/* ----------------------------------------------------------
   1. DATA SECTION — identical image size and card shape
   ---------------------------------------------------------- */

/*
   All product images must occupy the same fixed media box.
   object-fit: cover keeps the card geometry identical regardless
   of source image aspect ratio.
*/
.bd-article .product-list .product-item {
  display: flex;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  background: var(--de-white);
  border: 1px solid var(--de-border);
  border-radius: 8px;
}

.bd-article .product-list .product-item img,
.bd-article .product-list .product-item picture,
.bd-article .product-list .product-item .sd-card-img-top {
  display: block !important;
  width: 100% !important;
  height: 150px !important;
  min-height: 150px !important;
  max-height: 150px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #f8fafc;
  border-bottom: 1px solid var(--de-border);
}

/*
   Prevent portrait/tall source images from stretching the card.
*/
.bd-article .product-list .product-item picture img {
  width: 100% !important;
  height: 150px !important;
  min-height: 150px !important;
  max-height: 150px !important;
  object-fit: cover !important;
}

/* Equal body proportions */
.bd-article .product-list .product-item p {
  margin: 0.45rem 0.65rem;
}

.bd-article .product-list .product-item p:not(:first-of-type):not(:last-child) {
  flex: 1 1 auto;
}

/* Keep action aligned */
.bd-article .product-list .product-item p:last-child {
  margin-top: auto;
  margin-bottom: 0.65rem;
}


/* ----------------------------------------------------------
   2. PLATFORMS — fix broken horizontal card rendering
   ---------------------------------------------------------- */

/*
   Make platform cards use a reliable two-column grid.
   This avoids tiny/cropped images caused by inherited Bootstrap
   column sizing.
*/
.de-platform-horizontal-card {
  width: 100%;
  overflow: hidden;
}

.de-platform-horizontal-card > .sd-row {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  width: 100% !important;
  margin: 0 !important;
}

.de-platform-horizontal-card .sd-col,
.de-platform-horizontal-card [class*="sd-col"] {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
}

.de-platform-horizontal-media {
  display: flex;
  width: 220px;
  min-height: 180px;
  overflow: hidden;
  background: #eef3f8;
}

.de-platform-horizontal-media img {
  display: block;
  width: 220px !important;
  height: 180px !important;
  min-width: 220px;
  min-height: 180px !important;
  max-height: 180px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.de-platform-horizontal-content {
  display: flex;
  min-height: 180px;
  padding: 1rem 1.25rem !important;
  flex-direction: column;
  justify-content: flex-start;
}

.de-platform-horizontal-content > p:first-child {
  margin: 0 0 0.65rem;
}

.de-platform-horizontal-content p {
  margin: 0 0 0.8rem;
}


/* ----------------------------------------------------------
   3. DIRECT ACCESS — More button bottom-right
   ---------------------------------------------------------- */

.de-platform-horizontal-content {
  position: relative;
}

.de-platform-horizontal-content > p:last-child {
  margin-top: auto;
  margin-bottom: 0;
  text-align: right;
}

/*
   More = clearly highlighted blue button.
*/
.de-platform-horizontal-content > p:last-child a,
.de-platform-more-button,
a.de-view-more,
.de-view-more-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  min-height: 40px;
  padding: 0.55rem 0.9rem !important;
  color: #ffffff !important;
  background: var(--de-blue) !important;
  border: 2px solid var(--de-blue) !important;
  border-radius: 5px !important;
  font-size: var(--de-font-size-button);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
}

.de-platform-horizontal-content > p:last-child a:hover,
.de-platform-horizontal-content > p:last-child a:focus,
.de-platform-more-button:hover,
.de-platform-more-button:focus,
a.de-view-more:hover,
a.de-view-more:focus,
.de-view-more-button:hover,
.de-view-more-button:focus {
  color: #ffffff !important;
  background: var(--de-blue-dark) !important;
  border-color: var(--de-blue-dark) !important;
}


/* ----------------------------------------------------------
   4. TECH ALERT — move content away from borders
   ---------------------------------------------------------- */

.tech-alert,
.status-summary,
.status-card,
.tech-alert-info {
  box-sizing: border-box;
}

/* Stronger inner spacing */
.tech-alert {
  padding: 1.4rem 1.6rem 1.4rem 1.8rem !important;
}

.tech-alert > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.tech-alert > p:first-child {
  margin-top: 0 !important;
  padding-left: 0.1rem;
}

.tech-alert .field-list {
  margin: 0.9rem 0 1.1rem !important;
  padding: 0.9rem 1.1rem !important;
}

.status-summary,
.status-card,
.tech-alert-info {
  padding: 1.2rem 1.4rem !important;
}

/* Give labelled status content breathing room */
.status-card::before,
.status-summary::before,
.tech-alert::before,
.tech-alert-info::before {
  margin-right: 0.35rem;
}


/* ----------------------------------------------------------
   5. NAVIGATION — Home active state on homepage
   ---------------------------------------------------------- */

/*
   Reset inherited li.current styling so only the actual active link
   is highlighted.
*/
.bd-header .navbar-nav li.current > a:not([aria-current="page"]):not(.de-nav-active),
.bd-header .navbar-nav li.active > a:not([aria-current="page"]):not(.de-nav-active) {
  color: var(--de-text) !important;
  background: transparent !important;
  border-color: transparent !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
}

/*
   Standard selected navigation state.
*/
.bd-header .navbar-nav a[aria-current="page"],
.bd-header .navbar-nav a.de-nav-active {
  color: var(--de-orange) !important;
  background: #fff4e8 !important;
  border: 1px solid #d96a1c !important;
  border-bottom: 4px solid var(--de-orange) !important;
  border-radius: 8px;
  font-weight: 800 !important;
}

/*
   Homepage fallback.
   The homepage contains .de-home-grid, so this targets the Home link
   even if the Sphinx-generated markup omits aria-current.
*/
body:has(.de-home-grid) .bd-header .navbar-nav a[href="./"],
body:has(.de-home-grid) .bd-header .navbar-nav a[href="index.html"],
body:has(.de-home-grid) .bd-header .navbar-nav a[href="./index.html"],
body:has(.de-home-grid) .bd-header .navbar-nav a[href="/"],
body:has(.de-home-grid) .bd-header .navbar-nav a[href$="/index.html"] {
  color: var(--de-orange) !important;
  background: #fff4e8 !important;
  border: 1px solid #d96a1c !important;
  border-bottom: 4px solid var(--de-orange) !important;
  border-radius: 8px;
  font-weight: 800 !important;
}


/* ----------------------------------------------------------
   6. HOMEPAGE DOCUMENTATION SECTIONS — fill available width
   ---------------------------------------------------------- */

body:has(.de-home-grid) .bd-main .bd-content .bd-article-container {
  max-width: 1180px !important;
}

.de-home-grid {
  width: 100% !important;
  max-width: none !important;
  margin: 1rem 0 2rem;
}

.de-home-grid > .sd-row,
.de-home-grid .sd-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.2rem !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.de-home-grid .sd-col,
.de-home-grid [class*="sd-col"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
}

.de-home-grid .de-home-card {
  width: 100% !important;
  max-width: none !important;
  height: 100%;
}

.de-home-grid .de-home-card .sd-card-img-top {
  width: 100% !important;
  height: 230px !important;
  min-height: 230px !important;
  max-height: 230px !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Keep all bodies aligned */
.de-home-grid .de-home-card .sd-card-body {
  min-height: 125px;
}


/* ----------------------------------------------------------
   7. HOMEPAGE footer actions — light blue
   ---------------------------------------------------------- */

/*
   Explore and View Current Status get the same light-blue treatment.
*/
.de-home-grid .de-home-card .sd-card-footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 38px;
  padding: 0.5rem 0.75rem !important;
  color: var(--de-blue) !important;
  background: #eaf4ff !important;
  border: 1px solid #9cc7ee !important;
  border-radius: 5px;
  font-size: var(--de-font-size-button);
  font-weight: 700;
  text-decoration: none !important;
}

.de-home-grid .de-home-card .sd-card-footer a:hover,
.de-home-grid .de-home-card .sd-card-footer a:focus {
  color: #ffffff !important;
  background: var(--de-blue) !important;
  border-color: var(--de-blue) !important;
}


/* ----------------------------------------------------------
   8. Responsive consistency
   ---------------------------------------------------------- */

@media screen and (max-width: 1050px) {
  .bd-article .product-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .de-platform-horizontal-card > .sd-row {
    grid-template-columns: 190px minmax(0, 1fr) !important;
  }

  .de-platform-horizontal-media,
  .de-platform-horizontal-media img {
    width: 190px !important;
    min-width: 190px;
  }
}

@media screen and (max-width: 760px) {
  .bd-article .product-list {
    grid-template-columns: 1fr !important;
  }

  .de-platform-horizontal-card > .sd-row {
    grid-template-columns: 1fr !important;
  }

  .de-platform-horizontal-media,
  .de-platform-horizontal-media img {
    width: 100% !important;
    height: 190px !important;
    min-width: 0;
    min-height: 190px !important;
    max-height: 190px !important;
  }

  .de-home-grid > .sd-row,
  .de-home-grid .sd-row {
    grid-template-columns: 1fr !important;
  }

  .de-home-grid .de-home-card .sd-card-img-top {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
  }
}
/* ==========================================================
   25. Direct Access visual refinement
   Match Platforms styling and add more visual energy
   ========================================================== */


/* ----------------------------------------------------------
   Direct Access page intro
   ---------------------------------------------------------- */

.bd-article:has(.de-platform-horizontal-card) > h1,
.bd-article:has(.de-platform-horizontal-card) > h2 {
  color: var(--de-text);
}

.bd-article:has(.de-platform-horizontal-card) > p:first-of-type {
  max-width: 900px;
  color: var(--de-body) !important;
  font-size: 16px;
  line-height: 1.65;
}


/* ----------------------------------------------------------
   Direct Access section headings
   ---------------------------------------------------------- */

.bd-article:has(.de-platform-horizontal-card) h2 {
  margin-top: 1.9rem;
  margin-bottom: 0.75rem;
  color: var(--de-text);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.bd-article:has(.de-platform-horizontal-card) h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.65rem;
  color: var(--de-text);
  font-size: 21px;
  font-weight: 700;
}


/* ----------------------------------------------------------
   Main Direct Access cards
   ---------------------------------------------------------- */

.de-platform-horizontal-card {
  position: relative;
  overflow: hidden;
  margin: 0.8rem 0 1.6rem;
  background: var(--de-white);
  border: 1px solid var(--de-border);
  border-left: 5px solid var(--de-blue);
  border-radius: 12px;
  box-shadow:
    0 4px 12px rgba(15, 35, 70, 0.08),
    0 1px 3px rgba(15, 35, 70, 0.04);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}


/* Soft branded highlight */
.de-platform-horizontal-card::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(
      120deg,
      rgba(11, 85, 160, 0.035),
      transparent 46%
    );
}


/* ----------------------------------------------------------
   Card layout
   ---------------------------------------------------------- */

.de-platform-horizontal-card > .sd-row {
  display: grid !important;
  grid-template-columns: minmax(230px, 34%) 1fr !important;
  align-items: stretch;
  width: 100% !important;
  margin: 0 !important;
}

.de-platform-horizontal-card .sd-col,
.de-platform-horizontal-card [class*="sd-col"] {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
}


/* ----------------------------------------------------------
   Image/media panel
   ---------------------------------------------------------- */

.de-platform-horizontal-media {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 220px;
  overflow: hidden;
  background:
    linear-gradient(135deg, #0c2d3b, #123846);
}

.de-platform-horizontal-media img {
  display: block;
  width: 100% !important;
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #0d2b38;
  transition:
    transform 0.35s ease,
    filter 0.35s ease;
  filter: saturate(0.98) contrast(1.03);
}


/* ----------------------------------------------------------
   Content panel
   ---------------------------------------------------------- */

.de-platform-horizontal-content {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 220px;
  padding: 1.3rem 1.5rem !important;
  flex-direction: column;
  justify-content: flex-start;
  color: var(--de-text) !important;
  background:
    linear-gradient(90deg, #ffffff 0%, #fbfdff 100%) !important;
}


/* Title */
.de-platform-horizontal-content > p:first-child {
  margin: 0 0 0.75rem;
}

.de-platform-horizontal-content > p:first-child a {
  color: var(--de-blue) !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}


/* Description */
.de-platform-horizontal-content p {
  margin: 0 0 0.9rem;
  color: var(--de-body) !important;
  font-size: 15px;
  line-height: 1.6;
}


/* ----------------------------------------------------------
   More button: bottom-right, blue and clearly interactive
   ---------------------------------------------------------- */

.de-platform-horizontal-content > p:last-child {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  text-align: right;
}

.de-platform-horizontal-content > p:last-child a,
.de-platform-more-button,
a.de-view-more,
.de-view-more-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.6rem 1rem !important;
  color: #ffffff !important;
  background: var(--de-blue) !important;
  border: 2px solid var(--de-blue) !important;
  border-radius: 6px !important;
  box-shadow: 0 3px 8px rgba(11, 85, 160, 0.18);
  font-size: var(--de-font-size-button);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.de-platform-horizontal-content > p:last-child a::after,
.de-platform-more-button::after,
a.de-view-more::after,
.de-view-more-button::after {
  margin-left: 0.4rem;
  content: "→";
}


/* ----------------------------------------------------------
   Hover/focus interaction
   ---------------------------------------------------------- */

.de-platform-horizontal-card:hover,
.de-platform-horizontal-card:focus-within {
  transform: translateY(-4px);
  border-left-color: var(--de-orange);
  box-shadow:
    0 14px 30px rgba(15, 35, 70, 0.14),
    0 4px 10px rgba(15, 35, 70, 0.08);
}

.de-platform-horizontal-card:hover .de-platform-horizontal-media img,
.de-platform-horizontal-card:focus-within .de-platform-horizontal-media img {
  transform: scale(1.025);
  filter: saturate(1.05) contrast(1.04);
}

.de-platform-horizontal-content > p:last-child a:hover,
.de-platform-horizontal-content > p:last-child a:focus,
.de-platform-more-button:hover,
.de-platform-more-button:focus,
a.de-view-more:hover,
a.de-view-more:focus,
.de-view-more-button:hover,
.de-view-more-button:focus {
  transform: translateY(-1px);
  color: #ffffff !important;
  background: var(--de-blue-dark) !important;
  border-color: var(--de-blue-dark) !important;
  box-shadow: 0 6px 14px rgba(11, 85, 160, 0.28);
}


/* ----------------------------------------------------------
   Slight visual distinction between Direct Access methods
   ---------------------------------------------------------- */

.de-platform-horizontal-card:nth-of-type(2n) {
  border-left-color: var(--de-green);
}

.de-platform-horizontal-card:nth-of-type(3n) {
  border-left-color: var(--de-purple);
}

.de-platform-horizontal-card:hover,
.de-platform-horizontal-card:focus-within {
  border-left-color: var(--de-orange);
}


/* ----------------------------------------------------------
   Feedback/help text
   ---------------------------------------------------------- */

.bd-article:has(.de-platform-horizontal-card) p:last-of-type {
  color: var(--de-muted) !important;
}


/* ----------------------------------------------------------
   Responsive Direct Access cards
   ---------------------------------------------------------- */

@media screen and (max-width: 900px) {
  .de-platform-horizontal-card > .sd-row {
    grid-template-columns: 1fr !important;
  }

  .de-platform-horizontal-media,
  .de-platform-horizontal-media img {
    width: 100% !important;
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
  }

  .de-platform-horizontal-content {
    min-height: 190px;
    padding: 1.15rem 1.25rem !important;
  }
}

@media screen and (max-width: 560px) {
  .de-platform-horizontal-media,
  .de-platform-horizontal-media img {
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
  }

  .de-platform-horizontal-content {
    min-height: 175px;
  }

  .de-platform-horizontal-content > p:last-child {
    text-align: left;
  }
}
/* ==========================================================
   26. Platform CTA placement refinement
   Place MORE directly below the description text
   ========================================================== */

.de-platform-horizontal-content {
  justify-content: flex-start;
}

/*
   Keep the final paragraph/button in the normal content flow
   so it appears directly below the description.
*/
.de-platform-horizontal-content > p:last-child {
  margin-top: 0.35rem !important;
  margin-bottom: 0 !important;
  text-align: left !important;
}

/* Align the action with the text column */
.de-platform-horizontal-content > p:last-child a,
.de-platform-more-button,
a.de-view-more,
.de-view-more-button {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep a little breathing room between text and button */
.de-platform-horizontal-content p + p:last-child {
  padding-top: 0.2rem;
}

@media screen and (max-width: 560px) {
  .de-platform-horizontal-content > p:last-child {
    text-align: left !important;
  }
}
/* ==========================================================
   27. Direct Access = Platform card behaviour
   ========================================================== */

/*
   Direct Access pages may use either:
   - .de-platform-horizontal-card
   - .platform-list .product-item

   Both are given the same visual treatment so the Direct Access
   section behaves like the Platforms section.
*/


/* ----------------------------------------------------------
   Shared card shell
   ---------------------------------------------------------- */

.de-platform-horizontal-card,
.platform-list .product-item {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0.8rem 0 1.5rem;
  background: var(--de-white);
  border: 1px solid var(--de-border);
  border-left: 5px solid var(--de-blue);
  border-radius: 12px;
  box-shadow:
    0 4px 12px rgba(15, 35, 70, 0.08),
    0 1px 3px rgba(15, 35, 70, 0.04);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}


/* ----------------------------------------------------------
   Shared hover behaviour
   ---------------------------------------------------------- */

.de-platform-horizontal-card:hover,
.de-platform-horizontal-card:focus-within,
.platform-list .product-item:hover,
.platform-list .product-item:focus-within {
  transform: translateY(-4px);
  border-left-color: var(--de-orange);
  box-shadow:
    0 14px 30px rgba(15, 35, 70, 0.14),
    0 4px 10px rgba(15, 35, 70, 0.08);
}


/* ----------------------------------------------------------
   Direct Access cards using .platform-list
   ---------------------------------------------------------- */

.platform-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
}

.platform-list .product-item {
  display: grid;
  grid-template-columns: minmax(220px, 34%) 1fr;
  min-height: 220px;
  padding: 0;
}


/* Image */
.platform-list .product-item img {
  display: block;
  width: 100% !important;
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #0d2b38;
  border-right: 1px solid var(--de-border);
  transition:
    transform 0.35s ease,
    filter 0.35s ease;
  filter: saturate(0.98) contrast(1.03);
}

.platform-list .product-item:hover img,
.platform-list .product-item:focus-within img {
  transform: scale(1.025);
  filter: saturate(1.05) contrast(1.04);
}


/* Content */
.platform-list .product-item > *:not(img):not(picture) {
  min-width: 0;
}

.platform-list .product-item p {
  margin: 0;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  color: var(--de-body) !important;
  font-size: 15px;
  line-height: 1.6;
}


/* Title */
.platform-list .product-item p:first-of-type {
  padding-top: 1.25rem;
  padding-bottom: 0.7rem;
  color: var(--de-text) !important;
}

.platform-list .product-item p:first-of-type a,
.platform-list .product-item .topic-title a {
  color: var(--de-blue) !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}


/* Description */
.platform-list .product-item p:not(:first-of-type):not(:last-child) {
  padding-bottom: 0.8rem;
}


/* MORE button directly below description */
.platform-list .product-item p:last-child {
  align-self: start;
  margin-top: 0.25rem;
  padding-bottom: 1.25rem;
}

.platform-list .product-item p:last-child a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.6rem 1rem !important;
  color: #ffffff !important;
  background: var(--de-blue) !important;
  border: 2px solid var(--de-blue) !important;
  border-radius: 6px !important;
  box-shadow: 0 3px 8px rgba(11, 85, 160, 0.18);
  font-size: var(--de-font-size-button);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
}

.platform-list .product-item p:last-child a::after {
  margin-left: 0.4rem;
  content: "→";
}

.platform-list .product-item p:last-child a:hover,
.platform-list .product-item p:last-child a:focus {
  color: #ffffff !important;
  background: var(--de-blue-dark) !important;
  border-color: var(--de-blue-dark) !important;
  box-shadow: 0 6px 14px rgba(11, 85, 160, 0.28);
}


/* ----------------------------------------------------------
   Existing horizontal platform cards
   Keep MORE directly beneath the description
   ---------------------------------------------------------- */

.de-platform-horizontal-content {
  justify-content: flex-start;
}

.de-platform-horizontal-content > p:last-child {
  margin-top: 0.35rem !important;
  margin-bottom: 0 !important;
  text-align: left !important;
}

.de-platform-horizontal-content > p:last-child a,
.de-platform-more-button {
  align-self: flex-start !important;
}


/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media screen and (max-width: 900px) {
  .platform-list .product-item {
    grid-template-columns: 1fr;
  }

  .platform-list .product-item img {
    width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    border-right: 0;
    border-bottom: 1px solid var(--de-border);
  }
}

@media screen and (max-width: 560px) {
  .platform-list .product-item img {
    height: 175px !important;
    min-height: 175px !important;
    max-height: 175px !important;
  }
}
/* ==========================================================
   28. Homepage button-ref integration
   Supports button-ref directives in index.rst
   ========================================================== */

/*
   Homepage action buttons created with:

   .. button-ref:: ...
      :class: de-home-action

   Tech Alert can additionally use:
      :class: de-home-action de-status-action
*/


/* ----------------------------------------------------------
   Base homepage action button
   ---------------------------------------------------------- */

.de-home-grid .de-home-action,
.de-home-grid a.de-home-action,
.de-home-grid .sd-btn.de-home-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;

  min-height: 40px;
  padding: 0.55rem 0.85rem;

  color: var(--de-blue) !important;
  background: #eaf4ff !important;

  border: 1px solid #9cc7ee !important;
  border-radius: 6px !important;

  box-shadow: none;

  font-family: var(--de-font-family);
  font-size: var(--de-font-size-button);
  font-weight: 700;
  line-height: 1.2;

  text-decoration: none !important;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}


/* Hover/focus */
.de-home-grid .de-home-action:hover,
.de-home-grid .de-home-action:focus,
.de-home-grid a.de-home-action:hover,
.de-home-grid a.de-home-action:focus,
.de-home-grid .sd-btn.de-home-action:hover,
.de-home-grid .sd-btn.de-home-action:focus {
  color: #ffffff !important;
  background: var(--de-blue) !important;
  border-color: var(--de-blue) !important;

  transform: translateY(-1px);

  box-shadow: 0 4px 10px rgba(11, 85, 160, 0.18);
}


/* ----------------------------------------------------------
   Tech Alert homepage action
   ---------------------------------------------------------- */

.de-home-grid .de-status-action,
.de-home-grid a.de-status-action,
.de-home-grid .sd-btn.de-status-action {
  color: #8a3b00 !important;
  background: #fff4e8 !important;
  border-color: #e6b98f !important;
}

.de-home-grid .de-status-action:hover,
.de-home-grid .de-status-action:focus,
.de-home-grid a.de-status-action:hover,
.de-home-grid a.de-status-action:focus,
.de-home-grid .sd-btn.de-status-action:hover,
.de-home-grid .sd-btn.de-status-action:focus {
  color: #ffffff !important;
  background: var(--de-orange) !important;
  border-color: var(--de-orange) !important;
}


/* ----------------------------------------------------------
   Card footer layout for button-ref actions
   ---------------------------------------------------------- */

.de-home-grid .de-home-card .sd-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  margin-top: auto;
  padding: 0.8rem 1.1rem;

  background: var(--de-white) !important;
  border-top: 1px solid var(--de-border);
}


/*
   Prevent older generic footer-link rules from overriding
   button-ref styling.
*/
.de-home-grid .de-home-card .sd-card-footer .de-home-action {
  padding: 0.55rem 0.85rem !important;

  color: var(--de-blue) !important;
  background: #eaf4ff !important;

  border: 1px solid #9cc7ee !important;

  text-decoration: none !important;
}

.de-home-grid .de-home-card .sd-card-footer .de-home-action:hover,
.de-home-grid .de-home-card .sd-card-footer .de-home-action:focus {
  color: #ffffff !important;
  background: var(--de-blue) !important;
  border-color: var(--de-blue) !important;
}


/* Tech Alert footer override */
.de-home-grid .de-home-card .sd-card-footer .de-status-action {
  color: #8a3b00 !important;
  background: #fff4e8 !important;
  border-color: #e6b98f !important;
}

.de-home-grid .de-home-card .sd-card-footer .de-status-action:hover,
.de-home-grid .de-home-card .sd-card-footer .de-status-action:focus {
  color: #ffffff !important;
  background: var(--de-orange) !important;
  border-color: var(--de-orange) !important;
}


/* ----------------------------------------------------------
   Homepage card consistency
   ---------------------------------------------------------- */

.de-home-grid .de-home-card {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.de-home-grid .de-home-card .sd-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}


/* Keep text and buttons aligned across all four cards */
.de-home-grid .de-home-card .sd-card-body > :last-child {
  margin-bottom: 0;
}


/* ----------------------------------------------------------
   Homepage active navigation
   ---------------------------------------------------------- */

/*
   active-navbar.js sets:
   .de-nav-active
   aria-current="page"

   These rules ensure Home is visibly selected when page-id=home.
*/
.bd-header .navbar-nav a.de-nav-active,
.bd-header .navbar-nav a[aria-current="page"] {
  color: var(--de-orange) !important;
  background: #fff4e8 !important;

  border: 1px solid #d96a1c !important;
  border-bottom: 4px solid var(--de-orange) !important;
  border-radius: 8px;

  box-shadow: none !important;

  font-weight: 800 !important;
}


/* Clear non-active links */
.bd-header .navbar-nav a:not(.de-nav-active):not([aria-current="page"]) {
  box-shadow: none !important;
}


/* ----------------------------------------------------------
   Homepage grid arrangement
   ---------------------------------------------------------- */

.de-home-grid > .sd-row,
.de-home-grid .sd-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: 1.2rem !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
}


/* Remove Bootstrap/Sphinx column restrictions */
.de-home-grid .sd-col,
.de-home-grid [class*="sd-col"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  flex: none !important;
}


/* Equal homepage images */
.de-home-grid .de-home-card .sd-card-img-top {
  display: block;

  width: 100% !important;

  height: 230px !important;
  min-height: 230px !important;
  max-height: 230px !important;

  padding: 0;

  object-fit: cover !important;
  object-position: center !important;

  background: #0d2b38;
}


/* Equal body height */
.de-home-grid .de-home-card .sd-card-body {
  min-height: 125px;
}


/* ----------------------------------------------------------
   Mobile homepage layout
   ---------------------------------------------------------- */

@media screen and (max-width: 760px) {

  .de-home-grid > .sd-row,
  .de-home-grid .sd-row {
    grid-template-columns: 1fr !important;
  }

  .de-home-grid .de-home-card .sd-card-img-top {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
  }

  .de-home-grid .de-home-action,
  .de-home-grid .de-status-action {
    width: 100%;
  }

  .de-home-grid .de-home-card .sd-card-footer {
    align-items: stretch;
  }
}
/* ==========================================================
   29. Force light theme
   ========================================================== */

/*
   Force the site to use the light visual system even when the
   browser, OS, or PyData Sphinx Theme prefers dark mode.
*/

/* Light page surfaces */
html,
html[data-theme="light"],
html[data-theme="auto"],
html[data-theme="dark"],
body {
  color-scheme: light !important;
  background: var(--de-page) !important;
}

/* Core layout */
html[data-theme="dark"] .bd-container,
html[data-theme="dark"] .bd-main,
html[data-theme="dark"] .bd-content,
html[data-theme="dark"] .bd-article {
  color: var(--de-body) !important;
  background: var(--de-page) !important;
}

/* Main article */
html[data-theme="dark"] .bd-article {
  background: var(--de-white) !important;
  border-color: var(--de-border) !important;
}

/* Header */
html[data-theme="dark"] .bd-header {
  color: var(--de-text) !important;
  background: var(--de-white) !important;
  border-bottom-color: var(--de-border) !important;
}

html[data-theme="dark"] .bd-header .navbar-nav a,
html[data-theme="dark"] .navbar-brand,
html[data-theme="dark"] .bd-header button {
  color: var(--de-text) !important;
}


/* Sidebars */
html[data-theme="dark"] .bd-sidebar-primary,
html[data-theme="dark"] .bd-sidebar-secondary {
  color: var(--de-text) !important;
  background: var(--de-white) !important;
  border-color: var(--de-border) !important;
}

html[data-theme="dark"] .bd-sidebar-primary .nav-link,
html[data-theme="dark"] .bd-sidebar-primary .reference.internal {
  color: #475569 !important;
}


/* Headings and article text */
html[data-theme="dark"] .bd-article h1,
html[data-theme="dark"] .bd-article h2,
html[data-theme="dark"] .bd-article h3,
html[data-theme="dark"] .bd-article h4,
html[data-theme="dark"] .bd-article h5,
html[data-theme="dark"] .bd-article p,
html[data-theme="dark"] .bd-article li,
html[data-theme="dark"] .bd-article dd,
html[data-theme="dark"] .bd-article dt {
  color: var(--de-text) !important;
}


/* Links */
html[data-theme="dark"] .bd-article a:not(.btn):not(.sd-btn):not(.de-platform-more-button),
html[data-theme="dark"] .bd-sidebar-primary a,
html[data-theme="dark"] .bd-sidebar-secondary a {
  color: var(--de-blue) !important;
}

html[data-theme="dark"] .bd-article a:hover,
html[data-theme="dark"] .bd-sidebar-primary a:hover,
html[data-theme="dark"] .bd-sidebar-secondary a:hover {
  color: var(--de-orange) !important;
}


/* Homepage cards */
html[data-theme="dark"] .de-home-card,
html[data-theme="dark"] .de-home-card .sd-card-body,
html[data-theme="dark"] .de-home-card .sd-card-footer,
html[data-theme="dark"] .de-home-intro-card {
  color: var(--de-text) !important;
  background: var(--de-white) !important;
  border-color: var(--de-border) !important;
}

html[data-theme="dark"] .de-home-card .sd-card-title,
html[data-theme="dark"] .de-home-card p,
html[data-theme="dark"] .de-home-intro-card .sd-card-title,
html[data-theme="dark"] .de-home-intro-card p {
  color: var(--de-body) !important;
}


/* Platform / Direct Access cards */
html[data-theme="dark"] .de-platform-horizontal-card,
html[data-theme="dark"] .de-platform-horizontal-content,
html[data-theme="dark"] .platform-list .product-item {
  color: var(--de-text) !important;
  background: var(--de-white) !important;
  border-color: var(--de-border) !important;
}

html[data-theme="dark"] .de-platform-horizontal-content p,
html[data-theme="dark"] .platform-list .product-item p {
  color: var(--de-body) !important;
}


/* Product cards */
html[data-theme="dark"] .product-list .product-item {
  color: var(--de-text) !important;
  background: var(--de-white) !important;
  border-color: var(--de-border) !important;
}


/* Status / alert components */
html[data-theme="dark"] .status-summary,
html[data-theme="dark"] .tech-alert,
html[data-theme="dark"] .status-card,
html[data-theme="dark"] .tech-alert-info,
html[data-theme="dark"] .de-service-banner {
  color: var(--de-text) !important;
  background: var(--de-white) !important;
  border-color: var(--de-border) !important;
}

html[data-theme="dark"] .tech-alert > p:first-child,
html[data-theme="dark"] .tech-alert .field-body {
  color: var(--de-text) !important;
}

html[data-theme="dark"] .tech-alert .field-list {
  background: #f8fafc !important;
  border-color: var(--de-border) !important;
}


/* Footer stays branded navy */
html[data-theme="dark"] .bd-footer {
  color: #ffffff !important;
  background: var(--de-navy) !important;
}


/* Search and forms */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .search-button-field {
  color: var(--de-text) !important;
  background: var(--de-white) !important;
  border-color: var(--de-border) !important;
}


/* PyData theme colour tokens */
html[data-theme="dark"] {
  --pst-color-background: var(--de-white) !important;
  --pst-color-on-background: var(--de-text) !important;
  --pst-color-surface: var(--de-white) !important;
  --pst-color-on-surface: var(--de-text) !important;
  --pst-color-text-base: var(--de-text) !important;
  --pst-color-text-muted: var(--de-muted) !important;
  --pst-color-border: var(--de-border) !important;
}


/* Optional: hide theme switch control completely */
.theme-switch-button,
button.theme-switch-button,
.bd-header button[aria-label*="theme" i],
.bd-header button[title*="theme" i] {
  display: none !important;
}
/* ==========================================================
   30. Final Direct Access + Homepage width correction
   ========================================================== */


/* ----------------------------------------------------------
   A. DIRECT ACCESS
   Support direct-child card markup:

   .de-platform-horizontal-card
      .de-platform-horizontal-media
      .de-platform-horizontal-content
   ---------------------------------------------------------- */

.de-platform-horizontal-card {
  display: grid !important;
  grid-template-columns: minmax(240px, 34%) minmax(0, 1fr) !important;
  align-items: stretch !important;

  width: 100% !important;
  min-height: 220px;

  margin: 0.8rem 0 1.6rem !important;

  overflow: hidden;

  background: var(--de-white) !important;
  border: 1px solid var(--de-border) !important;
  border-left: 5px solid var(--de-blue) !important;
  border-radius: 12px !important;

  box-shadow:
    0 4px 12px rgba(15, 35, 70, 0.08),
    0 1px 3px rgba(15, 35, 70, 0.04);

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}


/*
   If a Sphinx Design row exists, let it span both columns
   and keep the older supported layout working.
*/
.de-platform-horizontal-card > .sd-row {
  grid-column: 1 / -1;

  display: grid !important;
  grid-template-columns: minmax(240px, 34%) minmax(0, 1fr) !important;

  width: 100% !important;
  margin: 0 !important;
}


/* Media direct child */
.de-platform-horizontal-card > .de-platform-horizontal-media {
  grid-column: 1;

  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 220px !important;

  overflow: hidden;

  background:
    linear-gradient(135deg, #0c2d3b, #123846) !important;
}


/* Image fills the entire left panel */
.de-platform-horizontal-card > .de-platform-horizontal-media img,
.de-platform-horizontal-card .de-platform-horizontal-media img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 220px !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
  object-position: center !important;

  background: #0d2b38;

  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}


/* Content direct child */
.de-platform-horizontal-card > .de-platform-horizontal-content {
  grid-column: 2;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;

  min-width: 0 !important;
  min-height: 220px !important;

  padding: 1.35rem 1.5rem !important;

  color: var(--de-text) !important;

  background:
    linear-gradient(90deg, #ffffff 0%, #fbfdff 100%) !important;
}


/* Title */
.de-platform-horizontal-content > p:first-child {
  margin: 0 0 0.75rem !important;
}

.de-platform-horizontal-content > p:first-child a {
  color: var(--de-blue) !important;

  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;

  text-decoration: underline !important;
  text-underline-offset: 0.15em;
}


/* Body text */
.de-platform-horizontal-content p {
  margin: 0 0 0.85rem !important;

  color: var(--de-body) !important;

  font-size: 15px !important;
  line-height: 1.6 !important;
}


/*
   MORE button directly beneath the description,
   aligned to the left of the content column.
*/
.de-platform-horizontal-content > p:last-child {
  margin-top: 0.25rem !important;
  margin-bottom: 0 !important;

  padding: 0 !important;

  text-align: left !important;
}

.de-platform-horizontal-content > p:last-child a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  align-self: flex-start !important;

  min-height: 42px;

  padding: 0.6rem 1rem !important;

  color: #ffffff !important;
  background: var(--de-blue) !important;

  border: 2px solid var(--de-blue) !important;
  border-radius: 6px !important;

  box-shadow: 0 3px 8px rgba(11, 85, 160, 0.18);

  font-size: var(--de-font-size-button) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;

  text-decoration: none !important;
}

.de-platform-horizontal-content > p:last-child a::after {
  margin-left: 0.4rem;
  content: "→";
}


/* Hover behaviour identical to Platforms */
.de-platform-horizontal-card:hover,
.de-platform-horizontal-card:focus-within {
  transform: translateY(-4px);

  border-left-color: var(--de-orange) !important;

  box-shadow:
    0 14px 30px rgba(15, 35, 70, 0.14),
    0 4px 10px rgba(15, 35, 70, 0.08);
}

.de-platform-horizontal-card:hover
  .de-platform-horizontal-media img,
.de-platform-horizontal-card:focus-within
  .de-platform-horizontal-media img {
  transform: scale(1.025);
  filter: saturate(1.05) contrast(1.04);
}

.de-platform-horizontal-content > p:last-child a:hover,
.de-platform-horizontal-content > p:last-child a:focus {
  color: #ffffff !important;
  background: var(--de-blue-dark) !important;
  border-color: var(--de-blue-dark) !important;

  box-shadow: 0 6px 14px rgba(11, 85, 160, 0.28);
}


/* ----------------------------------------------------------
   B. HOMEPAGE
   Documentation Sections fill the available homepage width
   ---------------------------------------------------------- */

/*
   Remove PyData's narrow article constraint specifically
   on the homepage.
*/
body:has(.de-home-grid) .bd-main,
body:has(.de-home-grid) .bd-content,
body:has(.de-home-grid) .bd-article-container,
body:has(.de-home-grid) .bd-article {
  width: 100% !important;
  max-width: none !important;
}


/*
   Give the homepage content a wide but readable frame.
*/
body:has(.de-home-grid) .bd-article {
  padding-left: clamp(1rem, 2vw, 2rem) !important;
  padding-right: clamp(1rem, 2vw, 2rem) !important;
}


/*
   Documentation section takes the full article width.
*/
.de-home-grid {
  width: 100% !important;
  max-width: none !important;

  margin: 1rem 0 2rem !important;
}


/*
   Four cards across on large desktop screens.
*/
.de-home-grid > .sd-row,
.de-home-grid .sd-row {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap: 1.25rem !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
}


/*
   Neutralize Bootstrap / Sphinx Design column widths.
*/
.de-home-grid .sd-col,
.de-home-grid [class*="sd-col"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  flex: none !important;
}


/* Equal card geometry */
.de-home-grid .de-home-card {
  display: flex !important;

  width: 100% !important;
  max-width: none !important;
  height: 100% !important;

  flex-direction: column !important;

  overflow: hidden;

  border-radius: 10px !important;
}


/* Consistent image box across all four cards */
.de-home-grid .de-home-card .sd-card-img-top {
  display: block !important;

  width: 100% !important;

  height: 210px !important;
  min-height: 210px !important;
  max-height: 210px !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
  object-position: center !important;
}


/* Equal card body */
.de-home-grid .de-home-card .sd-card-body {
  display: flex !important;

  min-height: 150px !important;

  flex: 1 1 auto !important;
  flex-direction: column !important;

  padding: 1rem 1.05rem !important;
}


/* Footer stays aligned across all cards */
.de-home-grid .de-home-card .sd-card-footer {
  display: flex !important;

  align-items: center !important;
  justify-content: flex-start !important;

  min-height: 62px;

  margin-top: auto !important;

  padding: 0.75rem 1rem !important;

  background: #f8fbff !important;

  border-top: 1px solid var(--de-border) !important;
}


/* Homepage buttons */
.de-home-grid .de-home-action {
  display: inline-flex !important;

  align-items: center;
  justify-content: center;

  min-height: 40px;

  padding: 0.55rem 0.85rem !important;

  color: var(--de-blue) !important;
  background: #eaf4ff !important;

  border: 1px solid #9cc7ee !important;
  border-radius: 6px !important;

  font-weight: 700 !important;

  text-decoration: none !important;
}


/* Tech Alert action */
.de-home-grid .de-status-action {
  color: #8a3b00 !important;
  background: #fff4e8 !important;
  border-color: #e6b98f !important;
}


/* ----------------------------------------------------------
   C. Responsive behaviour
   ---------------------------------------------------------- */

@media screen and (max-width: 1200px) {

  .de-home-grid > .sd-row,
  .de-home-grid .sd-row {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

}


@media screen and (max-width: 900px) {

  .de-platform-horizontal-card,
  .de-platform-horizontal-card > .sd-row {
    grid-template-columns: 1fr !important;
  }

  .de-platform-horizontal-card >
    .de-platform-horizontal-media {
    grid-column: 1 !important;

    height: 210px !important;
    min-height: 210px !important;
  }

  .de-platform-horizontal-card >
    .de-platform-horizontal-content {
    grid-column: 1 !important;

    min-height: 0 !important;
  }

  .de-platform-horizontal-media img {
    height: 210px !important;
    min-height: 210px !important;
  }

}


@media screen and (max-width: 700px) {

  .de-home-grid > .sd-row,
  .de-home-grid .sd-row {
    grid-template-columns: 1fr !important;
  }

  .de-home-grid .de-home-card .sd-card-img-top {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
  }

}
/* ==========================================================
   31. Platform card spacing refinement
   Add breathing room between image, text and CTA
   ========================================================== */

/* Slight internal gap between image and content */
.de-platform-horizontal-card {
  column-gap: 0.9rem !important;
  padding: 0.75rem !important;
}

/* Inset image panel so it does not touch the outer card border */
.de-platform-horizontal-card > .de-platform-horizontal-media,
.de-platform-horizontal-card .de-platform-horizontal-media {
  min-height: 190px !important;

  overflow: hidden;

  border-radius: 8px !important;
}

/* Keep image fully contained inside the inset media area */
.de-platform-horizontal-card > .de-platform-horizontal-media img,
.de-platform-horizontal-card .de-platform-horizontal-media img {
  min-height: 190px !important;
  border-radius: 8px !important;
}

/* More breathing room before the text */
.de-platform-horizontal-card > .de-platform-horizontal-content,
.de-platform-horizontal-card .de-platform-horizontal-content {
  min-height: 190px !important;

  padding:
    0.4rem
    1.25rem
    0.45rem
    0.5rem !important;
}

/* Title spacing */
.de-platform-horizontal-content > p:first-child {
  margin-bottom: 0.9rem !important;
}

/* Description spacing */
.de-platform-horizontal-content p:not(:first-child):not(:last-child) {
  margin-bottom: 1rem !important;
}

/* More space before the MORE button */
.de-platform-horizontal-content > p:last-child {
  margin-top: 0.65rem !important;
  margin-bottom: 0 !important;
}

/* Keep button comfortably separated from text */
.de-platform-horizontal-content > p:last-child a {
  margin-top: 0.15rem !important;
}


/* Responsive spacing */
@media screen and (max-width: 900px) {

  .de-platform-horizontal-card {
    row-gap: 0.9rem !important;
    column-gap: 0 !important;
  }

  .de-platform-horizontal-card >
    .de-platform-horizontal-content {
    padding:
      0.25rem
      0.5rem
      0.65rem
      0.5rem !important;
  }

}
/* ==========================================================
   32. Homepage 2x2 full-width card grid
   ========================================================== */

/*
   Force Documentation Sections into a balanced 2 x 2 layout
   that fills the full available homepage content width.
*/

body:has(.de-home-grid) .bd-main,
body:has(.de-home-grid) .bd-content,
body:has(.de-home-grid) .bd-article-container,
body:has(.de-home-grid) .bd-article {
  width: 100% !important;
  max-width: none !important;
}

body:has(.de-home-grid) .bd-article {
  padding-left: clamp(1rem, 2vw, 2rem) !important;
  padding-right: clamp(1rem, 2vw, 2rem) !important;
}


/* Main grid container */
.de-home-grid {
  width: 100% !important;
  max-width: none !important;

  margin: 1rem 0 2rem !important;
}


/* Exactly 2 columns on desktop */
.de-home-grid > .sd-row,
.de-home-grid .sd-row {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 1.5rem !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
}


/* Remove Sphinx Design / Bootstrap width restrictions */
.de-home-grid .sd-col,
.de-home-grid [class*="sd-col"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  flex: none !important;
}


/* Cards fill every grid cell */
.de-home-grid .de-home-card {
  display: flex !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  height: 100% !important;
  min-height: 100% !important;

  flex-direction: column !important;

  overflow: hidden;

  background: var(--de-white) !important;

  border: 1px solid var(--de-border) !important;
  border-radius: 10px !important;

  box-shadow:
    0 3px 10px rgba(15, 35, 70, 0.08),
    0 1px 3px rgba(15, 35, 70, 0.04);
}


/* Equal full-width image area */
.de-home-grid .de-home-card .sd-card-img-top {
  display: block !important;

  width: 100% !important;

  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
  object-position: center !important;

  background: #0d2b38;
}


/* Card content fills remaining height */
.de-home-grid .de-home-card .sd-card-body {
  display: flex !important;

  flex: 1 1 auto !important;
  flex-direction: column !important;

  width: 100% !important;

  min-height: 155px !important;

  padding: 1.1rem 1.2rem !important;
}


/* Strong readable title */
.de-home-grid .de-home-card .sd-card-title {
  margin-bottom: 0.65rem !important;

  color: var(--de-text) !important;

  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}


/* Description fills available body area */
.de-home-grid .de-home-card .sd-card-body p {
  margin-bottom: 0 !important;

  color: var(--de-body) !important;

  font-size: 15px !important;
  line-height: 1.55 !important;
}


/* Footer spans full card width */
.de-home-grid .de-home-card .sd-card-footer {
  display: flex !important;

  align-items: center !important;
  justify-content: flex-start !important;

  width: 100% !important;

  min-height: 64px !important;

  margin-top: auto !important;

  padding: 0.8rem 1.2rem !important;

  background: #f8fbff !important;

  border-top: 1px solid var(--de-border) !important;
}


/* Action buttons stay compact */
.de-home-grid .de-home-action {
  width: auto !important;

  min-width: 110px;

  justify-content: center;
}


/* Hover */
.de-home-grid .de-home-card:hover,
.de-home-grid .de-home-card:focus-within {
  transform: translateY(-3px);

  box-shadow:
    0 12px 26px rgba(15, 35, 70, 0.13),
    0 4px 9px rgba(15, 35, 70, 0.07);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}


/* Tablet: keep 2 columns */
@media screen and (max-width: 1000px) {

  .de-home-grid > .sd-row,
  .de-home-grid .sd-row {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 1rem !important;
  }

  .de-home-grid .de-home-card .sd-card-img-top {
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
  }

}


/* Mobile: 1 column */
@media screen and (max-width: 700px) {

  .de-home-grid > .sd-row,
  .de-home-grid .sd-row {
    grid-template-columns: 1fr !important;
  }

  .de-home-grid .de-home-card .sd-card-img-top {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
  }

}
/* ==========================================================
   33. Homepage full content-width correction
   Remove PyData's reserved right sidebar space on homepage
   ========================================================== */


/*
   The homepage Documentation Sections should use the whole page
   content area. PyData normally reserves a right-hand column for
   the secondary/table-of-contents sidebar; hide that column only
   on the homepage.
*/
body:has(.de-home-grid) .bd-sidebar-secondary {
  display: none !important;
}


/* Allow the central content region to consume all remaining width */
body:has(.de-home-grid) .bd-main,
body:has(.de-home-grid) .bd-main .bd-content,
body:has(.de-home-grid) .bd-content {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  flex: 1 1 100% !important;
}


/*
   Remove PyData's normal article max-width.
*/
body:has(.de-home-grid) .bd-article-container,
body:has(.de-home-grid) .bd-article {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  flex: 1 1 100% !important;
}


/*
   Ensure the internal PyData container itself does not constrain
   the homepage to a narrow reading column.
*/
body:has(.de-home-grid) .bd-container,
body:has(.de-home-grid) .bd-container__inner {
  width: 100% !important;
  max-width: none !important;
}


/*
   Preserve a comfortable edge margin instead of a narrow
   documentation reading width.
*/
body:has(.de-home-grid) .bd-article {
  box-sizing: border-box;

  padding-left: clamp(1.25rem, 2.5vw, 2.5rem) !important;
  padding-right: clamp(1.25rem, 2.5vw, 2.5rem) !important;
}


/* Documentation section itself spans the full article */
body:has(.de-home-grid) .de-home-grid {
  width: 100% !important;
  max-width: none !important;

  box-sizing: border-box;
}


/*
   Keep the requested 2 x 2 arrangement while allowing both
   columns to expand equally across the newly available space.
*/
body:has(.de-home-grid) .de-home-grid > .sd-row,
body:has(.de-home-grid) .de-home-grid .sd-row {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 1.5rem !important;

  width: 100% !important;
  max-width: none !important;
}


/* Every Sphinx grid column fills its grid cell */
body:has(.de-home-grid) .de-home-grid .sd-col,
body:has(.de-home-grid) .de-home-grid [class*="sd-col"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  flex: none !important;
}


/* Cards completely fill each half of the grid */
body:has(.de-home-grid) .de-home-card {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
}


/*
   At smaller widths collapse to one column.
*/
@media screen and (max-width: 700px) {

  body:has(.de-home-grid) .de-home-grid > .sd-row,
  body:has(.de-home-grid) .de-home-grid .sd-row {
    grid-template-columns: 1fr !important;
  }

}


/* ==========================================================
   31. DE Africa typography and header brand alignment
   Inter for interface/content; Roboto Mono for technical text.
   ========================================================== */

:root {
  --de-font-family: "Inter", Arial, sans-serif;
  --de-font-family-mono: "Roboto Mono", "SFMono-Regular", Consolas,
    "Liberation Mono", Menlo, monospace;
}

/* Use Inter consistently across the documentation interface. */
html,
body,
.bd-header,
.bd-header .navbar-nav,
.bd-header .navbar-nav a,
.navbar-brand,
.bd-sidebar-primary,
.bd-sidebar-secondary,
.bd-article,
.bd-article h1,
.bd-article h2,
.bd-article h3,
.bd-article h4,
.bd-article h5,
.bd-article h6,
.bd-article p,
.bd-article li,
.bd-article dt,
.bd-article dd,
.bd-article blockquote,
button,
.btn,
.sd-btn,
input,
select,
textarea,
.search-button-field,
.caption,
.meta,
.lang-picker,
.de-language-switcher,
.deafrica-footer {
  font-family: var(--de-font-family) !important;
}

/* Retain Roboto Mono for code and other technical content. */
code,
pre,
kbd,
samp,
tt,
.literal,
.highlight,
.highlight pre,
.highlight code,
.bd-article code,
.bd-article pre,
.bd-article .literal,
.bd-article .highlight,
.bd-article .highlight pre,
.bd-article .highlight code,
div[class*="highlight-"] pre,
.docutils.literal,
.sig,
.sig-name,
.sig-prename,
.sig-param,
.property,
.viewcode-link {
  font-family: var(--de-font-family-mono) !important;
}

/* Keep inline technical content compact and readable. */
.bd-article code,
.bd-article .literal {
  font-size: 0.92em;
}

.bd-article pre,
.bd-article .highlight pre {
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Make the Digital Earth Africa identity unmistakable in the header. */
.bd-header {
  min-height: 88px;
}

.bd-header .navbar-brand,
.navbar-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 230px;
  margin-right: 1.75rem;
  padding: 0.45rem 0;
}

.bd-header .navbar-brand img,
.navbar-brand img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 230px !important;
  max-height: 64px !important;
  object-fit: contain;
  object-position: left center;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Prevent theme/filter rules from muting or inverting the official logo. */
html[data-theme="light"] .navbar-brand img,
html[data-theme="auto"] .navbar-brand img,
html[data-theme="dark"] .navbar-brand img {
  filter: none !important;
}

@media screen and (max-width: 959px) {
  .bd-header {
    min-height: 76px;
  }

  .bd-header .navbar-brand,
  .navbar-brand {
    min-width: auto;
    margin-right: 0.75rem;
  }

  .bd-header .navbar-brand img,
  .navbar-brand img {
    max-width: 180px !important;
    max-height: 52px !important;
  }
}

@media screen and (max-width: 560px) {
  .bd-header .navbar-brand img,
  .navbar-brand img {
    max-width: 160px !important;
    max-height: 48px !important;
  }
}


/* ==========================================================
   32. DE Africa website-aligned footer + header logo cleanup
   ========================================================== */

/* Header safeguard: only one DE Africa brand should render in the
   navbar start region. The root fix is to use one logo source in conf.py. */
.bd-header .navbar-header-items__start > .navbar-brand ~ .navbar-brand,
.bd-header .navbar-brand img + img,
.bd-header .navbar-brand picture + picture {
  display: none !important;
}

/* Footer shell: dark DE Africa brand field with orange accent. */
.bd-footer {
  margin-top: 2rem;
  padding: 0 !important;
  color: #ffffff !important;
  background: var(--de-navy) !important;
  border-top: 4px solid var(--de-orange);
}

.deafrica-footer {
  display: grid;
  grid-template-columns: minmax(300px, 1.35fr) minmax(170px, 0.7fr) minmax(170px, 0.7fr);
  gap: 2.5rem 3rem;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 2.75rem 2.5rem 1.4rem;
  color: #ffffff !important;
  font-family: var(--de-font-family) !important;
}

.deafrica-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

.deafrica-footer__logo-link,
.deafrica-footer__programme-link {
  display: inline-flex;
  align-items: center;
}

.deafrica-footer__logo {
  display: block;
  width: auto;
  max-width: 230px;
  max-height: 72px;
  object-fit: contain;
  filter: none !important;
}

.deafrica-footer__brand p {
  max-width: 440px;
  margin: 0;
  color: #d6e0ec !important;
  font-size: 0.95rem;
  line-height: 1.6;
}

.deafrica-footer__website-link {
  display: inline-flex;
  align-items: center;
  margin-top: 0.2rem;
  color: #ffffff !important;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.deafrica-footer__website-link:hover,
.deafrica-footer__website-link:focus {
  color: var(--de-yellow) !important;
}

.deafrica-footer__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.62rem;
}

.deafrica-footer__column strong {
  margin-bottom: 0.25rem;
  color: #ffffff !important;
  font-size: 1rem;
  font-weight: 700;
}

.deafrica-footer__column a {
  color: #dbeafe !important;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.deafrica-footer__column a:hover,
.deafrica-footer__column a:focus {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* The DE Africa main site identifies the programme as a programme of icipe.
   Keep this as a separate institutional-branding row so DE Africa remains
   the primary documentation identity. */
.deafrica-footer__programme {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.deafrica-footer__programme-label {
  color: #cbd5e1 !important;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.deafrica-footer__programme-logo {
  display: block;
  width: auto;
  max-width: 155px;
  max-height: 58px;
  object-fit: contain;
  filter: none !important;
}

.deafrica-footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.2rem;
  color: #cbd5e1 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.82rem;
}

.deafrica-footer__bottom a {
  color: #dbeafe !important;
  font-weight: 600;
  text-decoration: none;
}

.deafrica-footer__bottom a:hover,
.deafrica-footer__bottom a:focus {
  color: #ffffff !important;
  text-decoration: underline;
}

@media screen and (max-width: 900px) {
  .deafrica-footer {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 2.4rem 1.5rem 1.4rem;
    text-align: left;
  }

  .deafrica-footer__brand,
  .deafrica-footer__programme,
  .deafrica-footer__bottom {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 600px) {
  .deafrica-footer {
    grid-template-columns: 1fr;
    gap: 1.65rem;
    padding: 2rem 1.25rem 1.25rem;
  }

  .deafrica-footer__brand,
  .deafrica-footer__programme,
  .deafrica-footer__bottom {
    grid-column: 1;
  }

  .deafrica-footer__programme,
  .deafrica-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .deafrica-footer__programme-label {
    white-space: normal;
  }

  .deafrica-footer__logo {
    max-width: 195px;
  }

  .deafrica-footer__programme-logo {
    max-width: 135px;
  }
}