/*
  Mereka brand overrides (runtime CSS entrypoint).

  This file is loaded via `*/templates/head-extra.html` for both LMS + Studio.

  Important:
  - This file is our deterministic "brand signal carrier" in production.
  - Keep it self-contained (no build step required at runtime).
  - Use the same CSS in `lms/static/css/mereka-overrides.css` to avoid drift.
*/

:root {
  --mereka-branding-rev: "2026-02-25-wcag-aa";

  /* BEGIN GENERATED — DO NOT EDIT (run generate-tokens-from-canonical.sh) */

  /* Typography */
  --mereka-font-body: "Poppins", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mereka-font-heading: "Lato", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Palette (source: assets/branding/tokens.css) */
  --mereka-color-ink-900: #000000;
  --mereka-color-ink-700: #4A494A;
  --mereka-color-ink-500: #6B6B6B;
  --mereka-color-ink-300: #AFADB2;
  --mereka-color-teal: #237072;
  --mereka-color-magenta: #ab3b78;
  --mereka-color-magenta-dark: #8a2f60;
  --mereka-color-blue: #295cad;
  --mereka-color-sky: #94d1e4;
  --mereka-color-surface-primary: #FBFAFB;
  --mereka-color-surface-secondary: #F5F5F5;
  --mereka-color-border: #DDDDDE;
  --mereka-color-border-strong: #7B7B7C;

  /* Semantics */
  --mereka-color-info: var(--mereka-color-blue);
  --mereka-color-info-soft: var(--mereka-color-sky);
  --mereka-color-success: #2c6e49;
  --mereka-color-warning: #9e7000;
  --mereka-color-danger: #8c002f;
  --mereka-color-danger-soft: #cd89ae;

  /* Effects */
  --mereka-shadow-card: 0 20px 60px rgba(26, 22, 35, 0.08);
  --mereka-gradient-primary: linear-gradient(
    135deg,
    var(--mereka-color-teal) 0%,
    var(--mereka-color-blue) 100%
  );

  /* Paragon bridge (MFEs) - canonical v22 token names only */
  --pgn-body-bg: var(--mereka-color-surface-primary);
  --pgn-body-color: var(--mereka-color-ink-900);
  --pgn-link-color: var(--mereka-color-info);
  --pgn-link-hover-color: var(--mereka-color-teal);
  --pgn-border-color: var(--mereka-color-border);
  --pgn-form-control-border-color: #ddddde;
  --pgn-border-color-translucent: rgba(26, 22, 35, 0.12);
  --pgn-btn-border-radius: 999px;
  --pgn-spacing-spacer-base: 1rem;
  --pgn-typography-font-size-xs: 0.75rem;
  --pgn-color-white: #ffffff;
  --pgn-color-black: #000000;
  --pgn-color-gray-base: var(--mereka-color-ink-900);
  --pgn-color-gray-500: #6b7280;
  --pgn-color-gray-700: #374151;
  --pgn-color-light-200: #e5e7eb;
  --pgn-color-light-500: #6b7280;
  --pgn-color-dark-200: #111827;
  --pgn-color-primary-base: var(--mereka-color-magenta);
  --pgn-color-secondary-base: var(--mereka-color-teal);
  --pgn-color-success-base: var(--mereka-color-success);
  --pgn-color-primary-400: var(--mereka-color-magenta);
  --pgn-color-primary-500: var(--mereka-color-magenta);
  --pgn-color-primary-700: var(--mereka-color-danger);
  --pgn-color-info-base: var(--mereka-color-info);
  --pgn-color-warning-base: var(--mereka-color-warning);
  --pgn-color-danger-base: var(--mereka-color-danger);
  --pgn-color-info-200: var(--mereka-color-info-soft);
  --pgn-color-info-300: var(--mereka-color-info-soft);
  --pgn-color-info-500: var(--mereka-color-info);
  --pgn-color-info-700: var(--mereka-color-info);
  --pgn-color-brand-base: var(--mereka-color-magenta);
  --pgn-color-brand-700: var(--mereka-color-danger);
  --pgn-color-accent-a: var(--mereka-color-sky);
  --pgn-color-accent-b: var(--mereka-color-info);
  --pgn-color-red: var(--mereka-color-danger);
  --pgn-typography-font-family-sans-serif: var(--mereka-font-body);
  --pgn-typography-font-family-base: var(--mereka-font-body);
  --pgn-typography-headings-font-family: var(--mereka-font-heading);
  --pgn-typography-font-size-sm: 0.875rem;
  --pgn-typography-font-size-base: 1rem;
  --pgn-typography-font-size-lg: 1.125rem;
  --pgn-typography-line-height-sm: 1.5;
  --pgn-typography-line-height-base: 1.5;
  --pgn-typography-line-height-lg: 1.5;
  --pgn-spacing-1: 0.25rem;
  --pgn-spacing-2: 0.5rem;
  --pgn-spacing-3: 1rem;
  --pgn-spacing-4: 1.5rem;
  --pgn-spacing-5: 3rem;
  --pgn-spacing-6: 4.5rem;
  --pgn-spacing-spacer-0: 0;
  --pgn-spacing-spacer-1: 0.25rem;
  --pgn-spacing-spacer-2: 0.5rem;
  --pgn-spacing-spacer-3: 1rem;
  --pgn-spacing-spacer-4: 1.5rem;
  --pgn-spacing-spacer-5: 3rem;
  --pgn-spacing-spacer-6: 4.5rem;
  --pgn-size-border-radius-sm: 0.25rem;
  --pgn-size-border-radius-base: 0.375rem;
  --pgn-size-border-radius-lg: 0.425rem;
  --pgn-elevation-1: var(--shadow-sm);
  --pgn-elevation-2: var(--shadow-md);
  --pgn-elevation-3: var(--shadow-lg);
  --pgn-elevation-4: var(--shadow-xl);
  --pgn-color-primary-100: var(--pgn-color-primary-base);
  --pgn-color-primary-200: var(--pgn-color-primary-base);
  --pgn-color-primary-300: var(--pgn-color-primary-base);
  --pgn-color-primary-400: var(--pgn-color-primary-base);
  --pgn-color-primary-500: var(--pgn-color-primary-base);
  --pgn-zindex-dropdown: 1000;
  --pgn-zindex-modal: 1050;
  --pgn-zindex-popover: 1060;
  --pgn-zindex-tooltip: 1070;
  --pgn-transition-base: all 0.2s ease-in-out 0s normal;
  --pgn-transition-fade: opacity 0.15s linear 0s normal;
  --pgn-elevation-box-shadow-level-2: var(--shadow-md);

  /*
    Design-system aliases
    Source of truth: `assets/branding/tokens.css` (synced from bbbi-mereka-brand-assets).
    We alias the most-used tokens so external apps can speak the same language.
  */
  --color-black: var(--mereka-color-ink-900);
  --color-white: #ffffff;
  --color-teal: var(--mereka-color-teal);
  --color-magenta: var(--mereka-color-magenta);
  --color-blue: var(--mereka-color-blue);
  --color-burgundy: var(--mereka-color-danger);
  --color-pink: var(--mereka-color-danger-soft);
  --color-sky: var(--mereka-color-sky);
  --color-gold: var(--mereka-color-warning);
  --color-forest: var(--mereka-color-success);

  --color-success: var(--mereka-color-success);
  --color-success-light: #8fbec2;
  --color-warning: var(--mereka-color-warning);
  --color-warning-dark: #e18437;
  --color-error: var(--mereka-color-danger);
  --color-error-light: var(--mereka-color-danger-soft);
  --color-info: var(--mereka-color-info);
  --color-info-light: var(--mereka-color-info-soft);

  --font-heading: "Lato", sans-serif;
  --font-body: "Poppins", sans-serif;

  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* END GENERATED */
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/mereka/fonts/Poppins-Regular.9212f6f9860f.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/mereka/fonts/Poppins-SemiBold.72993dddf88a.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/mereka/fonts/Poppins-Bold.25b0e113ca7c.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/mereka/fonts/Lato-Regular.b4d2c4c39853.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/mereka/fonts/Lato-Bold.1efbd38aa76d.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/mereka/fonts/Lato-Italic.b9db990a7e02.woff2") format("woff2");
}

html,
body:not(.courseware) {
  font-family: var(--mereka-font-body);
  background-color: var(--mereka-color-surface-primary);
  color: var(--mereka-color-ink-900);
}

body:not(.courseware) h1,
body:not(.courseware) h2,
body:not(.courseware) h3,
body:not(.courseware) h4,
body:not(.courseware) h5,
body:not(.courseware) h6,
body:not(.courseware) .hd-1,
body:not(.courseware) .hd-2,
body:not(.courseware) .hd-3,
body:not(.courseware) .hd-4 {
  font-family: var(--mereka-font-heading);
  font-weight: 600;
}

body:not(.courseware) a {
  color: var(--mereka-color-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

body:not(.courseware) a:hover,
body:not(.courseware) a:focus {
  color: var(--mereka-color-teal);
}

body:not(.courseware) .btn-primary,
body:not(.courseware) .btn-brand,
body:not(.courseware) button.btn.btn-primary {
  background-color: var(--mereka-color-magenta);
  border-color: var(--mereka-color-magenta);
  border-radius: 999px;
}

body:not(.courseware) .btn-outline-primary {
  border-radius: 999px;
}

body:not(.courseware) .btn-primary:hover,
body:not(.courseware) .btn-primary:focus,
body:not(.courseware) .btn-brand:hover,
body:not(.courseware) .btn-brand:focus,
body:not(.courseware) button.btn.btn-primary:hover,
body:not(.courseware) button.btn.btn-primary:focus {
  background-color: var(--mereka-color-magenta-dark);
  border-color: var(--mereka-color-magenta-dark);
}

.header-global,
.nav-global {
  border-top: 4px solid var(--mereka-color-teal);
}

/* -------------------------- */
/* Deep branding (LMS surfaces) */
/* -------------------------- */

/* Course discovery (/courses) */
.find-courses {
  background: var(--mereka-color-surface-primary);
}

.find-courses .courses-container {
  background: transparent;
}

.find-courses #discovery-form.wrapper-search-context {
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(26, 22, 35, 0.08);
  box-shadow: var(--mereka-shadow-card);
  padding: 1.25rem 1.25rem 1rem;
  margin-bottom: 1.5rem;
}

.find-courses #discovery-form .wrapper-search-input {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
}

.find-courses #discovery-input.discovery-input {
  flex: 1 1 260px;
  border-radius: 999px;
  border: 1px solid rgba(26, 22, 35, 0.14);
  background: rgba(251, 250, 251, 0.92);
  padding: 0.85rem 1.1rem;
  font-size: 1rem;
}

.find-courses #discovery-input.discovery-input:focus {
  outline: none;
  border-color: rgba(45, 137, 139, 0.65);
  box-shadow: 0 0 0 4px rgba(45, 137, 139, 0.15);
  background: #fff;
}

.find-courses button.discovery-submit,
.find-courses .discovery-submit.button {
  border-radius: 999px;
  border: 0;
  color: #fff;
  font-weight: 700;
  padding: 0.85rem 1.25rem;
  background: var(--mereka-gradient-primary);
  box-shadow: 0 12px 25px rgba(171, 59, 120, 0.25);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.find-courses button.discovery-submit:hover,
.find-courses button.discovery-submit:focus,
.find-courses .discovery-submit.button:hover,
.find-courses .discovery-submit.button:focus {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(45, 137, 139, 0.25);
}

.find-courses .search-facets {
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(26, 22, 35, 0.08);
  box-shadow: var(--mereka-shadow-card);
  padding: 1.25rem;
}

.find-courses .search-facets h2,
.find-courses .search-facets h3 {
  font-family: var(--mereka-font-heading);
  font-weight: 700;
}

.find-courses .search-facets a,
.find-courses .search-facets button {
  border-radius: 999px;
}

.find-courses #filter-bar,
.find-courses .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
}

.find-courses #filter-bar.filters {
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(26, 22, 35, 0.08);
  box-shadow: var(--mereka-shadow-card);
  padding: 1rem 1.25rem;
}

.find-courses #filter-bar .filters-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.find-courses #filter-bar .facet-list,
.find-courses .search-facets .facet-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.find-courses #filter-bar li,
.find-courses .filter-bar li {
  list-style: none;
}

.find-courses #filter-bar a,
.find-courses .filter-bar a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(26, 22, 35, 0.12);
  background: rgba(251, 250, 251, 0.92);
  color: var(--mereka-color-ink-900);
  text-decoration: none;
  font-weight: 600;
}

.find-courses #filter-bar a:hover,
.find-courses #filter-bar a:focus,
.find-courses .filter-bar a:hover,
.find-courses .filter-bar a:focus {
  border-color: rgba(45, 137, 139, 0.35);
  box-shadow: 0 0 0 4px rgba(45, 137, 139, 0.12);
}

.find-courses .discovery-button,
.find-courses .facet-option {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(26, 22, 35, 0.12);
  background: rgba(251, 250, 251, 0.92);
  color: var(--mereka-color-ink-900);
  font-weight: 600;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.find-courses .discovery-button:hover,
.find-courses .discovery-button:focus,
.find-courses .facet-option:hover,
.find-courses .facet-option:focus {
  border-color: rgba(45, 137, 139, 0.35);
  box-shadow: 0 0 0 4px rgba(45, 137, 139, 0.12);
}

.find-courses .facet-option.selected {
  background: var(--mereka-gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 25px rgba(45, 137, 139, 0.18);
}

.find-courses .facet-option .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(26, 22, 35, 0.08);
  color: var(--mereka-color-ink-700);
  font-size: 0.85em;
}

.find-courses .facet-option.selected .count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.find-courses #clear-all-filters.clear-filters {
  margin-left: auto;
  border-radius: 999px;
  border: 1px solid rgba(26, 22, 35, 0.12);
  background: #fff;
  color: var(--mereka-color-ink-900);
  font-weight: 700;
}

.find-courses #clear-all-filters.clear-filters:hover,
.find-courses #clear-all-filters.clear-filters:focus {
  border-color: rgba(45, 137, 139, 0.35);
  box-shadow: 0 0 0 4px rgba(45, 137, 139, 0.12);
}

.find-courses .search-facets .header-search-facets,
.find-courses .search-facets .header-facet {
  font-family: var(--mereka-font-heading);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.find-courses .search-facets .header-facet {
  margin: 1rem 0 0.75rem;
}

.find-courses .search-facets .toggle {
  margin-top: 0.75rem;
}

.find-courses .courses-listing {
  margin-top: 1.25rem;
}

/* Course about (/courses/<id>/about) */
.course-info,
.course-about {
  background: var(--mereka-color-surface-primary);
}

.course-info .container,
.course-about .container,
.course-about .main-container,
.course-info .main-container {
  padding-top: 1.5rem;
}

.course-info header,
.course-about header,
.course-info .intro-inner-wrapper,
.course-about .intro-inner-wrapper {
  background: #fff;
  border-radius: 28px;
  border: 1px solid rgba(26, 22, 35, 0.08);
  box-shadow: var(--mereka-shadow-card);
  overflow: hidden;
}

.course-info .intro-inner-wrapper,
.course-about .intro-inner-wrapper {
  padding: 2rem;
  position: relative;
}

.course-info .intro-inner-wrapper::before,
.course-about .intro-inner-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 10%, rgba(45, 137, 139, 0.14), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(171, 59, 120, 0.12), transparent 60%),
    radial-gradient(circle at 90% 80%, rgba(41, 92, 173, 0.12), transparent 55%);
  pointer-events: none;
}

.course-info .intro-inner-wrapper > *,
.course-about .intro-inner-wrapper > * {
  position: relative;
}

.course-info .intro-inner-wrapper h1,
.course-about .intro-inner-wrapper h1,
.course-info .intro-inner-wrapper .course-title,
.course-about .intro-inner-wrapper .course-title {
  font-family: var(--mereka-font-heading);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--mereka-color-ink-900);
}

.course-about .course-sidebar,
.course-info .course-sidebar,
.course-about .course-sidebar-primary,
.course-info .course-sidebar-primary {
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(26, 22, 35, 0.08);
  box-shadow: var(--mereka-shadow-card);
  padding: 1.25rem;
}

.course-about .register,
.course-about .enroll-btn,
.course-about .enroll-btn button,
.course-about .enroll-btn a,
.course-info .register,
.course-info .enroll-btn,
.course-info .enroll-btn button,
.course-info .enroll-btn a {
  border-radius: 999px;
  background: var(--mereka-gradient-primary);
  color: #fff;
  font-weight: 800;
  border: 0;
  padding: 0.85rem 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 12px 25px rgba(45, 137, 139, 0.18);
}

.course-about .register:hover,
.course-about .register:focus,
.course-info .register:hover,
.course-info .register:focus {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(45, 137, 139, 0.25);
}

.course-about .course-summary,
.course-info .course-summary,
.course-about .course-description,
.course-info .course-description {
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(26, 22, 35, 0.08);
  box-shadow: var(--mereka-shadow-card);
  padding: 1.5rem;
}

.course-about .course-summary h2,
.course-about .course-description h2,
.course-info .course-summary h2,
.course-info .course-description h2 {
  font-family: var(--mereka-font-heading);
  font-weight: 800;
}

.course-about .course-staff,
.course-info .course-staff {
  margin-top: 1.5rem;
}

.courses-listing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  padding: 0;
}

.courses-listing li,
.courses-listing-item,
.dashboard .listing-courses li {
  list-style: none;
  display: flex;
  min-width: 0;
}

.course {
  background: #fff;
  border-radius: 28px;
  border: 1px solid rgba(26, 22, 35, 0.08);
  box-shadow: var(--mereka-shadow-card);
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.courses-listing li > .course,
.courses-listing-item > .course,
.dashboard .listing-courses li .course {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
}

.course:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(26, 22, 35, 0.12);
}

/* Course catalog / discovery cards — use aspect-ratio for flexible sizing
   instead of hardcoded pixel heights that squash content (ADR-024 branding). */
.course .course-image,
.dashboard .course .course-image {
  background: linear-gradient(135deg, rgba(45, 137, 139, 0.22), rgba(41, 92, 173, 0.25));
}

.course .course-image .cover-image,
.dashboard .course .course-image .cover-image {
  aspect-ratio: 16 / 9;
  background: inherit;
}

.course .course-image img,
.dashboard .course .course-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.course .course-info {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.course .course-code {
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--mereka-color-ink-500);
  text-transform: uppercase;
}

.course .course-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course .course-organization {
  color: var(--mereka-color-ink-500);
  font-size: 0.95rem;
  margin-bottom: 1rem;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #fff;
  background: var(--mereka-gradient-primary);
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 25px rgba(171, 59, 120, 0.25);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.learn-more:hover,
.learn-more:focus {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(45, 137, 139, 0.25);
}

/* Learner dashboard cards */
.dashboard .listing-courses {
  /* The upstream dashboard uses floats + fixed widths in some variants.
     Force a modern layout baseline first, then apply our desired grid/list styles. */
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 1.5rem !important;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dashboard .listing-courses li {
  float: none !important;
  width: auto !important;
  /* Fallback spacing in case a downstream override disables CSS grid `gap`. */
  margin: 0 0 1.5rem 0 !important;
  display: flex;
  min-width: 0;
}

@supports (display: grid) {
  .dashboard .listing-courses li {
    margin: 0 !important;
  }
}

.dashboard .listing-courses li .course {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.dashboard .my-courses .course-item,
.dashboard .listing-courses .course-item {
  margin: 0;
  width: 100%;
}

.dashboard .my-courses .course-item .course,
.dashboard .listing-courses .course-item .course {
  display: flex;
  align-items: stretch;
  min-height: 200px;
  border-radius: 28px;
  border: 1px solid rgba(26, 22, 35, 0.08);
  box-shadow: var(--mereka-shadow-card);
  overflow: hidden;
  background: #fff;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* Dashboard "My Courses" cards: force a real two-column cover layout.
   Upstream styles assume a vertical card (cover on top) and hardcode heights,
   which makes the cover image collapse to a narrow strip when the card is a row. */
.dashboard .my-courses .course-item .course .course-image,
.dashboard .listing-courses .course-item .course .course-image,
.dashboard .my-courses .course-item .course .wrapper-course-image {
  /* Some LMS variants skip `.my-courses` in markup; keep the fix scoped to the dashboard listing. */
  flex: 0 0 clamp(220px, 34%, 360px) !important;
  width: clamp(220px, 34%, 360px) !important;
  min-width: 220px !important;
  max-width: 360px !important;
  margin: 0;
  min-height: 0;
}

.dashboard .my-courses .course-item .course .course-image,
.dashboard .listing-courses .course-item .course .course-image,
.dashboard .my-courses .course-item .course .course-image .cover-image,
.dashboard .listing-courses .course-item .course .course-image .cover-image,
.dashboard .my-courses .course-item .course .course-image img,
.dashboard .listing-courses .course-item .course .course-image img,
.dashboard .my-courses .course-item .course .wrapper-course-image a,
.dashboard .my-courses .course-item .course .wrapper-course-image img {
  height: 100%;
}

.dashboard .my-courses .course-item .course .course-image img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.dashboard .listing-courses .course-item .course .course-image img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.dashboard .my-courses .course-item .course:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(26, 22, 35, 0.12);
}

.dashboard .my-courses .course-item .details {
  /* Older LMS markup wraps image+details in a .details section that defaults to block,
     which squashes the cover image down to its intrinsic width. Force a two-column layout. */
  display: flex !important;
  align-items: stretch;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}

.dashboard .listing-courses .course-item .details {
  display: flex !important;
  align-items: stretch;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}

.dashboard .my-courses .course-item .wrapper-course-image a,
.dashboard .listing-courses .course-item .wrapper-course-image a,
.dashboard .my-courses .course-item .course-image,
.dashboard .listing-courses .course-item .course-image,
.dashboard .my-courses .course-item .course-image .cover-image {
  display: block;
  height: 100%;
}

.dashboard .my-courses .course-item .wrapper-course-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.dashboard .listing-courses .course-item .wrapper-course-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.dashboard .my-courses .course-item .wrapper-course-details {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  padding: 1.25rem 1.5rem;
}

.dashboard .listing-courses .course-item .wrapper-course-details {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  padding: 1.25rem 1.5rem;
}

.dashboard .course .wrapper-course-details {
  padding: 1.25rem 1.5rem 0;
}

.dashboard .course .course-title {
  color: var(--mereka-color-ink-900);
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dashboard .course .info-university {
  color: var(--mereka-color-ink-500);
  font-size: 0.95rem;
  margin-bottom: 1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.dashboard .course .enter-course {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--mereka-gradient-primary);
  color: #fff;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  box-shadow: 0 12px 25px rgba(171, 59, 120, 0.25);
  text-decoration: none;
  margin-bottom: 1.5rem;
}

.dashboard .course .enter-course:hover,
.dashboard .course .enter-course:focus {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(45, 137, 139, 0.25);
}

@media (max-width: 992px) {
  .dashboard .my-courses .course-item .course,
  .dashboard .listing-courses .course-item .course {
    flex-direction: column;
    min-height: 0;
  }

  .dashboard .my-courses .course-item .wrapper-course-image,
  .dashboard .listing-courses .course-item .wrapper-course-image {
    flex: 0 0 auto;
    max-width: none;
  }

  .dashboard .my-courses .course-item .course-image,
  .dashboard .listing-courses .course-item .course-image,
  .dashboard .my-courses .course-item .course-image .cover-image,
  .dashboard .listing-courses .course-item .course-image .cover-image,
  .dashboard .my-courses .course-item .wrapper-course-image img {
    height: 200px;
  }

  .dashboard .listing-courses .course-item .wrapper-course-image img {
    height: 200px;
  }
}

/* Dashboard notices, certificates, and utility components */
.dashboard .notice,
.dashboard .notice-incontext,
.dashboard .wrapper-msg {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(26, 22, 35, 0.10);
  box-shadow: var(--mereka-shadow-card);
}

.dashboard .notice .notice-title,
.dashboard .notice-incontext .notice-title,
.dashboard .certificates h2,
.dashboard .messages h2 {
  font-family: var(--mereka-font-heading);
  color: var(--mereka-color-ink-900);
}

.dashboard .notice a,
.dashboard .notice-incontext a,
.dashboard .messages a {
  color: var(--mereka-color-blue);
}

.dashboard .notice a:hover,
.dashboard .notice a:focus,
.dashboard .notice-incontext a:hover,
.dashboard .notice-incontext a:focus,
.dashboard .messages a:hover,
.dashboard .messages a:focus {
  color: var(--mereka-color-teal);
}

.dashboard .profile-sidebar,
.dashboard .sidebar {
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(26, 22, 35, 0.08);
  box-shadow: var(--mereka-shadow-card);
}

/* Courseware chrome */
.courseware {
  background: var(--mereka-color-surface-primary);
}

.courseware .course-content,
.courseware .course-outline,
.courseware .course-index {
  background: #fff;
  border-radius: 24px;
  box-shadow: var(--mereka-shadow-card);
  padding: 1.5rem;
}

.courseware .unit-title,
.courseware .sequence-nav-title {
  font-family: var(--mereka-font-heading);
  color: var(--mereka-color-ink-900);
}

.courseware .sequence-nav {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(26, 22, 35, 0.08);
  box-shadow: var(--mereka-shadow-card);
}

.courseware .sequence-nav-button {
  border-radius: 999px;
}

.courseware .sequence-nav-button:hover,
.courseware .sequence-nav-button:focus {
  background: rgba(45, 137, 139, 0.12);
  color: var(--mereka-color-ink-900);
}

.courseware .xblock {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(26, 22, 35, 0.08);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.courseware .xblock h1,
.courseware .xblock h2,
.courseware .xblock h3,
.courseware .xblock h4,
.courseware .xblock h5,
.courseware .xblock h6,
.courseware .xblock .hd {
  font-family: var(--mereka-font-heading);
  color: var(--mereka-color-ink-900);
  letter-spacing: -0.01em;
}

.courseware .xblock p,
.courseware .xblock li,
.courseware .xblock label,
.courseware .xblock .problem,
.courseware .xblock .discussion-module,
.courseware .xblock .video,
.courseware .xblock .callout {
  color: var(--mereka-color-ink-900);
}

.courseware .xblock a {
  color: var(--mereka-color-blue);
}

.courseware .xblock a:hover,
.courseware .xblock a:focus {
  color: var(--mereka-color-teal);
}

.courseware .xblock .problem button,
.courseware .xblock .problem .submit,
.courseware .xblock .problem .action {
  border-radius: 999px;
}

/* --------------------------- */
/* Studio polish (CMS surfaces) */
/* --------------------------- */

/* Studio uses `.wrapper-content` containers (LMS typically does not). */
.wrapper-content {
  background: var(--mereka-color-surface-primary);
}

.wrapper-content .content-primary,
.wrapper-content .content-secondary,
.wrapper-content .content {
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(26, 22, 35, 0.08);
  box-shadow: var(--mereka-shadow-card);
}

.wrapper-content .page-header,
.wrapper-content .page-header-main {
  border-bottom: 1px solid rgba(26, 22, 35, 0.08);
}

.wrapper-content .page-header h1,
.wrapper-content .page-header h2 {
  font-family: var(--mereka-font-heading);
  font-weight: 700;
}

/* Authoring forms */
.wrapper-content input[type="text"],
.wrapper-content input[type="email"],
.wrapper-content input[type="password"],
.wrapper-content input[type="url"],
.wrapper-content input[type="search"],
.wrapper-content textarea,
.wrapper-content select {
  border-radius: 16px;
  border: 1px solid rgba(26, 22, 35, 0.14);
  background: #fff;
  padding: 0.75rem 1rem;
}

.wrapper-content input[type="text"]:focus,
.wrapper-content input[type="email"]:focus,
.wrapper-content input[type="password"]:focus,
.wrapper-content input[type="url"]:focus,
.wrapper-content input[type="search"]:focus,
.wrapper-content textarea:focus,
.wrapper-content select:focus {
  outline: none;
  border-color: rgba(45, 137, 139, 0.65);
  box-shadow: 0 0 0 4px rgba(45, 137, 139, 0.15);
}

/* Studio action buttons (names vary by page; keep the scope narrow). */
.wrapper-content .action-primary,
.wrapper-content a.action-primary,
.wrapper-content button.action-primary {
  border-radius: 999px;
  background-color: var(--mereka-color-magenta);
  border: 1px solid var(--mereka-color-magenta);
  color: #fff;
  font-weight: 700;
}

.wrapper-content .action-primary:hover,
.wrapper-content .action-primary:focus {
  background-color: var(--mereka-color-magenta-dark);
  border-color: var(--mereka-color-magenta-dark);
  color: #fff;
}

.wrapper-content .action-secondary,
.wrapper-content a.action-secondary,
.wrapper-content button.action-secondary {
  border-radius: 999px;
  border: 1px solid rgba(26, 22, 35, 0.18);
  background: #fff;
  color: var(--mereka-color-ink-900);
  font-weight: 600;
}

.wrapper-content .action-secondary:hover,
.wrapper-content .action-secondary:focus {
  border-color: rgba(45, 137, 139, 0.35);
  box-shadow: 0 0 0 4px rgba(45, 137, 139, 0.12);
}

/* Studio create-course/create-library flows + authoring panels */
.wrapper-mast .mast.has-actions .nav-actions .button,
.view-dashboard .content .notice-incontext.has-actions .list-actions .action-create-course,
.view-dashboard .content .notice-incontext.has-actions .list-actions .action-create-library,
.view-dashboard .content .notice-incontext.list-notices .notice-item.has-actions .list-actions .action-create-course,
.view-dashboard .content .notice-incontext.list-notices .notice-item.has-actions .list-actions .action-create-library,
.view-outline .content-primary .no-content .button,
.view-static-pages .content-primary .add-pages .button,
.view-container .content-primary .no-container-content .button,
.view-textbooks .content-primary .no-textbook-content .button,
.view-group-configurations .content-primary .no-content .button,
.view-certificates .content-primary .no-content .button {
  border-radius: 999px;
  border: 0;
  background: var(--mereka-gradient-primary);
  color: #fff;
  font-weight: 800;
  text-transform: none;
  box-shadow: 0 12px 25px rgba(45, 137, 139, 0.18);
}

.wrapper-mast .mast.has-actions .nav-actions .button:hover,
.wrapper-mast .mast.has-actions .nav-actions .button:focus,
.view-dashboard .content .notice-incontext.has-actions .list-actions .action-create-course:hover,
.view-dashboard .content .notice-incontext.has-actions .list-actions .action-create-library:hover,
.view-dashboard .content .notice-incontext.list-notices .notice-item.has-actions .list-actions .action-create-course:hover,
.view-dashboard .content .notice-incontext.list-notices .notice-item.has-actions .list-actions .action-create-library:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(45, 137, 139, 0.25);
}

.view-outline .outline-complex .outline-section,
.view-outline .outline-complex .outline-subsection,
.view-outline .outline-complex .outline-unit,
.view-container .wrapper-xblock,
.view-container .xblock-render,
.view-container .xblock-render .xblock {
  border-radius: 24px;
  border: 1px solid rgba(26, 22, 35, 0.08);
  box-shadow: var(--mereka-shadow-card);
}

.view-outline .outline-complex .outline-section:hover,
.view-outline .outline-complex .outline-subsection:hover,
.view-outline .outline-complex .outline-unit:hover {
  box-shadow: 0 26px 70px rgba(26, 22, 35, 0.12);
}

.view-outline .outline-complex .outline-item .outline-item-title,
.view-outline .outline-complex .outline-item .item-title,
.view-outline .outline-complex .outline-item .title,
.view-outline .outline-complex .outline-section .section-name,
.view-outline .outline-complex .outline-subsection .subsection-name,
.view-outline .outline-complex .outline-unit .unit-name {
  font-family: var(--mereka-font-heading);
  font-weight: 700;
  color: var(--mereka-color-ink-900);
}

.view-outline .outline-complex .outline-item .actions-list .action,
.view-outline .outline-complex .outline-item .actions-list a,
.view-outline .outline-complex .outline-item .actions-list button,
.view-outline .outline-complex .outline-item .action-button {
  border-radius: 999px;
  border: 1px solid rgba(26, 22, 35, 0.12);
  background: #fff;
  color: var(--mereka-color-ink-900);
}

.view-outline .outline-complex .outline-item .actions-list .action:hover,
.view-outline .outline-complex .outline-item .actions-list a:hover,
.view-outline .outline-complex .outline-item .actions-list button:hover,
.view-outline .outline-complex .outline-item .action-button:hover,
.view-outline .outline-complex .outline-item .actions-list .action:focus,
.view-outline .outline-complex .outline-item .actions-list a:focus,
.view-outline .outline-complex .outline-item .actions-list button:focus,
.view-outline .outline-complex .outline-item .action-button:focus {
  border-color: rgba(45, 137, 139, 0.35);
  box-shadow: 0 0 0 4px rgba(45, 137, 139, 0.12);
}

.view-outline .outline-complex .add-xblock-component .button,
.view-outline .outline-complex .add-xblock-component button,
.view-outline .outline-complex .add-xblock-component a {
  border-radius: 999px;
  border: 0;
  background: var(--mereka-gradient-primary);
  color: #fff;
  font-weight: 700;
}

/* Studio modals used by course/library creation flows */
.modal,
.modal-window,
.wrapper-modal-window {
  border-radius: 20px;
}

.modal .modal-content,
.modal-window .inner-wrapper,
.wrapper-modal-window .inner-wrapper {
  border-radius: 20px;
  border: 1px solid rgba(26, 22, 35, 0.12);
  box-shadow: 0 30px 90px rgba(26, 22, 35, 0.18);
}

/* ---------------------------- */
/* Shared primitives (LMS/CMS)  */
/* ---------------------------- */

/* Bootstrap/legacy alert blocks */
.alert {
  border-radius: 16px;
  border: 1px solid rgba(26, 22, 35, 0.10);
}

.alert-info {
  background: rgba(148, 209, 228, 0.22);
  border-color: rgba(148, 209, 228, 0.55);
}

.alert-success {
  background: rgba(44, 110, 73, 0.12);
  border-color: rgba(44, 110, 73, 0.35);
}

.alert-warning {
  background: rgba(153, 107, 0, 0.14);
  border-color: rgba(153, 107, 0, 0.55);
}

.alert-danger,
.alert-error {
  background: rgba(140, 0, 47, 0.08);
  border-color: rgba(140, 0, 47, 0.22);
}

/* Tabs (course about, some dashboards, Studio pages) */
.nav-tabs > li > a,
.nav-tabs .nav-link {
  border-radius: 999px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-tabs .nav-link.active {
  background: var(--mereka-gradient-primary);
  color: #fff;
  border-color: transparent;
}

/* Pagination */
.pagination > li > a,
.pagination > li > span {
  border-radius: 999px;
  border: 1px solid rgba(26, 22, 35, 0.10);
  margin: 0 0.15rem;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background: var(--mereka-gradient-primary);
  border-color: transparent;
}

/* Tables */
.table,
table {
  border-color: rgba(26, 22, 35, 0.10);
}

.table thead th,
table thead th {
  border-bottom: 1px solid rgba(26, 22, 35, 0.12);
  font-family: var(--mereka-font-heading);
  font-weight: 700;
}

/* Footer v2 — dark background, 5-zone layout */
.mereka-footer--v2 {
  background: #1A1623;
  color: #fff;
  margin-top: 4rem;
  font-family: var(--mereka-font-body);
}

.mereka-footer--v2 a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.15s;
}
.mereka-footer--v2 a:hover,
.mereka-footer--v2 a:focus {
  color: #fff;
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Zone 1: Social Row */
.footer-social {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 1.5rem 0;
}
.footer-social .footer-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-logo-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #fff !important;
}
.footer-logo-img {
  height: 2rem;
  width: auto;
  filter: invert(1);
}
.footer-brand-name {
  font-size: 1.25rem;
  font-weight: 500;
}
.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.footer-social-link {
  color: #fff !important;
  transition: opacity 0.15s, transform 0.15s;
}
.footer-social-link:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

/* Zone 2: Nav Strip */
.footer-nav {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 1rem 0;
}
.footer-nav .footer-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.footer-nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  font-size: 0.875rem;
}
.footer-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid #fff;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff !important;
  transition: background 0.15s;
}
.footer-whatsapp-btn:hover {
  background: rgba(255,255,255,0.1);
}

/* Zone 3: 4-Column Body */
.footer-body {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 3rem 0;
}
.footer-columns {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr;
  gap: 2rem 3rem;
}
.footer-column-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.footer-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-column li {
  margin-bottom: 1rem;
}
.footer-column a {
  font-size: 0.875rem;
}
.footer-column--wide .footer-marketplace-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.footer-sub-heading {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.footer-app-label {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.8);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.footer-app-badges {
  display: flex;
  gap: 0.5rem;
}
.footer-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 0.5rem;
  font-size: 0.75rem;
  color: #fff !important;
  text-decoration: none;
}
.footer-badge:hover {
  border-color: #fff;
}
.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  padding: 0.75rem 2rem;
  border: 1px solid #fff;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff !important;
  white-space: nowrap;
}
.footer-cta-btn:hover {
  background: rgba(255,255,255,0.1);
}

/* Zone 4: Legal Bottom */
.footer-legal {
  padding: 1.5rem 0;
}
.footer-legal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.875rem;
}
.footer-copyright {
  color: rgba(255,255,255,0.6);
}
.footer-legal a {
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
}
.footer-legal a:hover {
  color: #fff;
}

/* Responsive */
@media (max-width: 992px) {
  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .footer-columns {
    grid-template-columns: 1fr;
  }
  .footer-social .footer-container {
    flex-direction: column;
    gap: 1rem;
  }
  .footer-nav .footer-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-legal-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Legacy .mereka-footer without --v2 modifier: keep old white-bg styles */
.mereka-footer:not(.mereka-footer--v2) {
  background: #fff;
  border-top: 1px solid rgba(26, 22, 35, 0.08);
  padding: 3rem 0 2rem;
  margin-top: 4rem;
}

.mereka-footer:not(.mereka-footer--v2) .footer-primary {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
  align-items: start;
}

@media (max-width: 992px) {
  .mereka-footer:not(.mereka-footer--v2) .footer-primary {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mereka-footer:not(.mereka-footer--v2) .footer-brand img {
  width: 120px;
  height: auto;
  margin-bottom: 1rem;
  opacity: 0.9;
}

/* Compatibility rule for branding health check: logo cap on legacy selectors. */
.mereka-footer .footer-brand img {
  max-width: 120px;
  width: 120px;
}

.mereka-footer:not(.mereka-footer--v2) .footer-brand p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--mereka-color-ink-500);
  margin-bottom: 1rem;
}

.mereka-footer:not(.mereka-footer--v2) .footer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.mereka-footer:not(.mereka-footer--v2) .footer-tags span {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(26, 22, 35, 0.08);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mereka-footer:not(.mereka-footer--v2) h6 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mereka-color-ink-500);
  margin-bottom: 0.75rem;
}

.mereka-footer:not(.mereka-footer--v2) ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.mereka-footer:not(.mereka-footer--v2) a {
  color: var(--mereka-color-ink-700);
}

.mereka-footer:not(.mereka-footer--v2) a:hover,
.mereka-footer:not(.mereka-footer--v2) a:focus {
  color: var(--mereka-color-teal);
}

.mereka-footer:not(.mereka-footer--v2) .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: var(--mereka-color-ink-500);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid rgba(26, 22, 35, 0.06);
}

@media (max-width: 768px) {
  .mereka-footer:not(.mereka-footer--v2) {
    padding: 2rem 0 1.5rem;
  }

  .mereka-footer:not(.mereka-footer--v2) .footer-primary {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .mereka-footer:not(.mereka-footer--v2) .footer-brand img {
    width: 100px;
  }

  .mereka-footer:not(.mereka-footer--v2) .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}