/* ============================================================
   KULUD ACADEMY — interactive home page
   Ported from academy.pharmamediacompany.com, recoloured to the
   Kulud Green now live on this site.

   The category colours (clinical blue, excellence gold, leadership
   purple, women's health pink) are KEPT as-is. They are semantic —
   they tell one course band from another at a glance — and they are
   what gives the reference design its richness. Flattening them all
   to green would lose the thing you pointed at.

   Scoped to .ka-home so nothing here can leak into the LMS pages
   that manara.css styles.
   ============================================================ */

/*   #00725C     -> #00843D   x3  brand teal -> Kulud Green */
/*   #005244     -> #00632E   x1  primary dark */
/*   #003A31     -> #004A22   x1  primary deeper */
/*   #E6F4F0     -> #E8F4EE   x2  primary light tint */
/*   #B3DDD4     -> #A8DCC0   x1  primary mid */
/*   #00A87A     -> #34C77B   x3  accent */
/*   #008F67     -> #00843D   x1  accent hover */
/*   0, 114, 92  -> 0, 132, 61 x1  shadow rgba */
/*   0,114,92    -> 0,132,61  x1  shadow rgba compact */

/* ══════ variables.css ══════ */
/* ============================================================
   KULUD ACADEMY — Design Tokens & CSS Variables
   PharmaMedia | academy.pharmamediacompany.com
   Later converts to: academy.kulud-pharmacy.com
   ============================================================ */

:root {

  /* ── Brand Colors ── */
  --ka-primary:         #00843D;
  --ka-primary-dark:    #00632E;
  --ka-primary-deeper:  #004A22;
  --ka-primary-light:   #E8F4EE;
  --ka-primary-mid:     #A8DCC0;
  --ka-accent:          #34C77B;
  --ka-accent-hover:    #00843D;

  /* ── Category Colors ── */
  --ka-clinical:        #185FA5;
  --ka-clinical-light:  #E6F1FB;
  --ka-supplement:      #00843D;
  --ka-supplement-light:#E8F4EE;
  --ka-excellence:      #BA7517;
  --ka-excellence-light:#FFF3DC;
  --ka-leadership:      #7F77DD;
  --ka-leadership-light:#EEEDFE;
  --ka-womens:          #D4537E;
  --ka-womens-light:    #FBEAF0;

  /* ── Neutral Palette ── */
  --ka-text:            #1A1A2A;
  --ka-text-secondary:  #3D3D4E;
  --ka-muted:           #6B7280;
  --ka-border:          #E5E7EB;
  --ka-border-light:    #F0F2F4;
  --ka-bg:              #F8F9FB;
  --ka-bg-card:         #FFFFFF;
  --ka-white:           #FFFFFF;

  /* ── Status Colors ── */
  --ka-success:         #16A34A;
  --ka-warning:         #D97706;
  --ka-error:           #DC2626;
  --ka-info:            #2563EB;

  /* ── Typography ── */
  --font-heading: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'Fira Code', 'Courier New', monospace;

  /* ── Font Sizes ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  28px;
  --text-3xl:  34px;
  --text-4xl:  42px;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:  0 8px 30px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.06);
  --shadow-hover: 0 8px 28px rgba(0, 132, 61, .14);

  /* ── Layout ── */
  --max-width:        1200px;
  --content-width:    780px;
  --sidebar-width:    300px;
  --header-height:    64px;
  --subnav-height:    44px;

  /* ── Transitions ── */
  --transition-fast:   .12s ease;
  --transition-base:   .18s ease;
  --transition-slow:   .28s ease;

  /* ── Z-Index Stack ── */
  --z-base:    1;
  --z-dropdown:10;
  --z-sticky:  50;
  --z-overlay: 100;
  --z-modal:   200;
}


/* ══════ base.css ══════ */
/* ============================================================
   KULUD ACADEMY — Reset & Base Styles
   ============================================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ka-text);
  background: var(--ka-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.3;
  color: var(--ka-text);
}

/* ── Utility Classes ── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Category Tags ── */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  width: fit-content;
}
.tag--supplement  { background: var(--ka-supplement-light); color: var(--ka-supplement); }
.tag--clinical    { background: var(--ka-clinical-light);   color: var(--ka-clinical); }
.tag--excellence  { background: var(--ka-excellence-light); color: var(--ka-excellence); }
.tag--leadership  { background: var(--ka-leadership-light); color: var(--ka-leadership); }
.tag--womens      { background: var(--ka-womens-light);     color: var(--ka-womens); }
.tag--new         { background: #FEF9C3; color: #854D0E; }

/* ── Section Header ── */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
}
.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ka-text);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.section-title::before {
  content: '';
  width: 4px;
  height: 22px;
  background: var(--ka-primary);
  border-radius: 2px;
  flex-shrink: 0;
}
.see-all {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ka-primary);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition-fast);
}
.see-all:hover { gap: 8px; text-decoration: underline; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}
.btn--primary {
  background: var(--ka-primary);
  color: var(--ka-white);
  padding: 10px 24px;
  font-size: var(--text-sm);
}
.btn--primary:hover { background: var(--ka-primary-dark); transform: translateY(-1px); }
.btn--outline {
  background: transparent;
  color: var(--ka-primary);
  border: 1.5px solid var(--ka-primary);
  padding: 9px 22px;
  font-size: var(--text-sm);
}
.btn--outline:hover { background: var(--ka-primary-light); }
.btn--white {
  background: var(--ka-white);
  color: var(--ka-primary-dark);
  padding: 11px 24px;
  font-size: var(--text-sm);
}
.btn--white:hover { opacity: .92; }
.btn--sm { padding: 7px 16px; font-size: var(--text-xs); }
.btn--icon { padding: 10px; border-radius: var(--radius-md); }

/* ── Divider ── */
hr.divider {
  border: none;
  border-top: 1px solid var(--ka-border);
  margin: var(--space-12) 0;
}


/* ══════ header-footer.css ══════ */
/* ============================================================
   KULUD ACADEMY — Header, Navigation & Footer
   ============================================================ */

/* ── ANNOUNCEMENT BAR ── */
.announcement-bar {
  background: var(--ka-primary-deeper);
  padding: 7px 0;
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(255,255,255,.7);
  letter-spacing: .3px;
}
.announcement-bar strong {
  color: #6ECFB3;
  font-weight: 700;
}
.announcement-bar a {
  color: rgba(255,255,255,.85);
  text-decoration: underline;
  margin-left: 8px;
}

/* ── HEADER ── */
.site-header {
  background: var(--ka-white);
  border-bottom: 2px solid var(--ka-border);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--header-height);
}

/* ── LOGO ── */
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-mark {
  width: 38px;
  height: 38px;
  background: var(--ka-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-base);
}
.site-logo:hover .logo-mark { background: var(--ka-primary-dark); }
.logo-mark svg { fill: white; width: 20px; height: 20px; }
.logo-text-wrap { display: flex; flex-direction: column; line-height: 1.15; }
.logo-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--ka-primary-dark);
}
.logo-sub {
  font-size: 10px;
  color: var(--ka-muted);
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* ── PRIMARY NAVIGATION ── */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.nav-item {
  position: relative;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ka-text-secondary);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.nav-link svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.nav-link:hover,
.nav-link.active {
  background: var(--ka-primary-light);
  color: var(--ka-primary);
}
.nav-item:hover .nav-link svg,
.nav-link.active svg { transform: rotate(180deg); }

/* ── MEGA DROPDOWN ── */
.mega-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: -20px;
  width: 580px;
  background: var(--ka-white);
  border: 1px solid var(--ka-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  z-index: var(--z-dropdown);
}
.nav-item:hover .mega-dropdown { display: grid; }
.dropdown-col-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ka-muted);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--ka-border);
}
.dropdown-link {
  display: block;
  padding: 6px 8px;
  font-size: var(--text-sm);
  color: var(--ka-text-secondary);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  margin-bottom: 2px;
}
.dropdown-link:hover {
  background: var(--ka-primary-light);
  color: var(--ka-primary);
  padding-left: 12px;
}

/* ── HEADER ACTIONS ── */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.search-form {
  display: flex;
  align-items: center;
  background: var(--ka-bg);
  border: 1px solid var(--ka-border);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  gap: var(--space-2);
  width: 190px;
  transition: all var(--transition-base);
}
.search-form:focus-within {
  border-color: var(--ka-primary);
  background: var(--ka-white);
  width: 220px;
}
.search-form svg {
  width: 14px;
  height: 14px;
  stroke: var(--ka-muted);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}
.search-form input {
  background: none;
  border: none;
  outline: none;
  font-size: var(--text-sm);
  color: var(--ka-text);
  width: 100%;
}
.search-form input::placeholder { color: var(--ka-muted); }

/* ── MOBILE HAMBURGER ── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.hamburger:hover { background: var(--ka-bg); }
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ka-text);
  border-radius: 1px;
  transition: all var(--transition-base);
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── SECONDARY NAV ── */
.secondary-nav {
  background: var(--ka-bg);
  border-bottom: 1px solid var(--ka-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.secondary-nav::-webkit-scrollbar { display: none; }
.secondary-nav-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--subnav-height);
  padding: 0 var(--space-5);
  max-width: var(--max-width);
  margin: 0 auto;
}
.snav-pill {
  padding: 5px 15px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ka-muted);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: all var(--transition-fast);
  background: none;
  border: none;
  cursor: pointer;
}
.snav-pill:hover { color: var(--ka-primary); background: var(--ka-primary-light); }
.snav-pill.active { background: var(--ka-primary); color: var(--ka-white); }

/* ── TRENDING BAR ── */
.trending-bar {
  background: var(--ka-primary-light);
  border-bottom: 1px solid var(--ka-primary-mid);
}
.trending-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 40px;
  overflow-x: auto;
  scrollbar-width: none;
}
.trending-bar-inner::-webkit-scrollbar { display: none; }
.trending-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ka-primary);
  flex-shrink: 0;
  padding-right: var(--space-3);
  border-right: 1px solid var(--ka-primary-mid);
}
.trending-item {
  font-size: var(--text-sm);
  color: var(--ka-primary-dark);
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast);
  cursor: pointer;
}
.trending-item:hover { background: rgba(0,132,61,.12); }

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.site-footer {
  background: var(--ka-text);
  color: rgba(255,255,255,.65);
  padding: var(--space-12) 0 var(--space-6);
  margin-top: var(--space-16);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-10);
}
.footer-brand .footer-logo {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--ka-white);
  margin-bottom: var(--space-3);
}
.footer-brand p {
  font-size: var(--text-sm);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}
.footer-social { display: flex; gap: var(--space-2); }
.social-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  transition: all var(--transition-base);
  cursor: pointer;
}
.social-icon:hover { background: var(--ka-primary); color: var(--ka-white); }
.footer-col h5 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--ka-white);
  margin-bottom: var(--space-4);
}
.footer-col a {
  display: block;
  font-size: var(--text-sm);
  color: rgba(255,255,255,.55);
  margin-bottom: var(--space-2);
  transition: color var(--transition-fast);
}
.footer-col a:hover { color: var(--ka-accent); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: rgba(255,255,255,.35);
}
.footer-badges { display: flex; gap: var(--space-2); }
.footer-badge {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255,255,255,.45);
}

/* ── RESPONSIVE HEADER ── */
@media (max-width: 1024px) {
  .primary-nav { display: none; }
  .hamburger  { display: flex; }
  .search-form { width: 160px; }
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .footer-bottom { flex-direction: column; gap: var(--space-3); text-align: center; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .header-actions .btn--outline { display: none; }
}


/* ══════ components.css ══════ */
/* ============================================================
   KULUD ACADEMY — Homepage Component Styles
   ============================================================ */

/* ══════════════════════════════════════════════
   HERO SECTION
══════════════════════════════════════════════ */
.hero {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-8);
  padding: var(--space-8) 0 var(--space-12);
  border-bottom: 1px solid var(--ka-border);
  margin-bottom: var(--space-12);
}

/* Featured Article */
.hero-featured { display: flex; flex-direction: column; gap: var(--space-4); }
.hero-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: var(--ka-primary-dark);
}
.hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.hero-thumb:hover img { transform: scale(1.03); }
.hero-thumb-badges {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero-thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #004a3a 0%, #00843D 60%, #34C77B 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-thumb-placeholder svg {
  width: 100px;
  height: 100px;
  fill: rgba(255,255,255,.12);
}

.hero-tag-wrap { display: flex; align-items: center; gap: var(--space-2); }
.hero-category {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ka-primary);
}
.hero-dot { color: var(--ka-border); }
.hero-date { font-size: var(--text-xs); color: var(--ka-muted); }

.hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ka-text);
}
.hero-title a:hover { color: var(--ka-primary); }

.hero-excerpt {
  font-size: var(--text-md);
  color: var(--ka-muted);
  line-height: 1.7;
}
.hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ka-muted);
}
.author-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ka-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.hero-meta .sep { color: var(--ka-border); }
.hero-actions { display: flex; gap: var(--space-3); align-items: center; }
.hero-stats {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--ka-border);
}
.hero-stat { display: flex; flex-direction: column; gap: 2px; }
.hero-stat-val { font-size: var(--text-md); font-weight: 700; color: var(--ka-text); }
.hero-stat-label { font-size: var(--text-xs); color: var(--ka-muted); text-transform: uppercase; letter-spacing: .4px; }

/* Hero Sidebar */
.hero-sidebar { display: flex; flex-direction: column; }
.sidebar-heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--ka-muted);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--ka-primary);
  margin-bottom: var(--space-1);
}
.sidebar-article {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--ka-border-light);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.sidebar-article:last-child { border-bottom: none; }
.sidebar-article:hover { background: var(--ka-bg); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: var(--radius-md); }
.sidebar-thumb {
  width: 80px;
  height: 62px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--ka-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.sidebar-info .tag { margin-bottom: 5px; font-size: 10px; }
.sidebar-title { font-size: var(--text-sm); font-weight: 600; color: var(--ka-text); line-height: 1.4; }
.sidebar-meta { font-size: var(--text-xs); color: var(--ka-muted); margin-top: 5px; }

/* ══════════════════════════════════════════════
   COURSE CARDS GRID
══════════════════════════════════════════════ */
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-12);
}
.course-card {
  background: var(--ka-white);
  border: 1px solid var(--ka-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
/* The filter hides cards with the `hidden` ATTRIBUTE, which relies on the
   browser's `[hidden] { display: none }`. That rule lives in the UA stylesheet,
   and an author `display` declaration always beats it — so the `display: flex`
   directly above silently kept every filtered-out card on screen and the pills
   looked dead. Specificity (0,2,0) beats the base rule on its own; no
   !important, because nothing else on the page styles `.course-card`. */
.course-card[hidden] { display: none; }
.course-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.course-card__thumb {
  width: 100%;
  height: 165px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.course-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.course-card:hover .course-card__thumb img { transform: scale(1.05); }
.thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
}
.thumb-placeholder.teal   { background: linear-gradient(135deg, #004a3a, #34C77B); }
.thumb-placeholder.navy   { background: linear-gradient(135deg, #0c2d4a, #185fa5); }
.thumb-placeholder.amber  { background: linear-gradient(135deg, #4a2a00, #ba7517); }
.thumb-placeholder.coral  { background: linear-gradient(135deg, #5a1a08, #d85a30); }
.thumb-placeholder.purple { background: linear-gradient(135deg, #261e5a, #7f77dd); }
.thumb-placeholder.rose   { background: linear-gradient(135deg, #4a1528, #d4537e); }

.course-card__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: rgba(0,0,0,.45);
  color: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}
.course-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.course-card__tag { margin-bottom: var(--space-3); }
.course-card__title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ka-text);
  margin-bottom: var(--space-2);
  flex: 1;
}
.course-card__excerpt {
  font-size: var(--text-sm);
  color: var(--ka-muted);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--ka-border-light);
}
.course-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--ka-muted);
}
.course-meta span { display: flex; align-items: center; gap: 4px; }
.course-meta svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.course-level {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--ka-bg);
  color: var(--ka-muted);
}
.course-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: #F59E0B;
}
.course-rating span { color: var(--ka-muted); font-weight: 400; }

/* ══════════════════════════════════════════════
   CATEGORY BAND
══════════════════════════════════════════════ */
.category-band {
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-12);
}
.category-band.supplement { background: var(--ka-primary-light); }
.category-band.excellence { background: var(--ka-excellence-light); border: 1px solid #F0D0A8; }
.category-band.clinical   { background: var(--ka-clinical-light); }
.category-band.leadership { background: var(--ka-leadership-light); }

.category-band__inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-8);
  align-items: start;
}
.cat-label { display: flex; flex-direction: column; gap: var(--space-3); }
.cat-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.cat-icon.supplement { background: var(--ka-primary); }
.cat-icon.excellence { background: var(--ka-excellence); }
.cat-icon.clinical   { background: var(--ka-clinical); }
.cat-icon.leadership { background: var(--ka-leadership); }

.cat-name { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; }
.cat-desc { font-size: var(--text-sm); color: var(--ka-muted); line-height: 1.7; }
.cat-cta  { font-size: var(--text-sm); font-weight: 600; display: flex; align-items: center; gap: 4px; transition: gap var(--transition-fast); cursor: pointer; }
.cat-cta:hover { gap: 8px; }
.cat-cta.supplement { color: var(--ka-primary); }
.cat-cta.excellence { color: var(--ka-excellence); }
.cat-cta.clinical   { color: var(--ka-clinical); }

.cat-articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.cat-card {
  background: var(--ka-white);
  border: 1px solid var(--ka-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.cat-card:hover {
  border-color: var(--ka-primary);
  transform: translateY(-1px);
}
.cat-card.excellence:hover { border-color: var(--ka-excellence); }
.cat-card.clinical:hover   { border-color: var(--ka-clinical); }
.cat-card .tag { margin-bottom: var(--space-2); }
.cat-card h4 { font-size: var(--text-sm); font-weight: 600; color: var(--ka-text); line-height: 1.45; }
.cat-card-meta {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: 11px;
  color: var(--ka-muted);
}

/* ══════════════════════════════════════════════
   EXPERT INSTRUCTORS
══════════════════════════════════════════════ */
.experts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}
.expert-card {
  background: var(--ka-white);
  border: 1px solid var(--ka-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  cursor: pointer;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.expert-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.expert-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ka-primary);
  color: var(--ka-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  margin: 0 auto var(--space-3);
}
.expert-name { font-size: var(--text-base); font-weight: 600; color: var(--ka-text); }
.expert-role { font-size: var(--text-xs); color: var(--ka-muted); margin-top: 3px; line-height: 1.4; }
.expert-count { font-size: var(--text-sm); font-weight: 600; color: var(--ka-primary); margin-top: var(--space-3); }

/* ══════════════════════════════════════════════
   NEWSLETTER
══════════════════════════════════════════════ */
.newsletter-section {
  background: linear-gradient(135deg, var(--ka-primary-dark) 0%, var(--ka-primary) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-12);
}
.nl-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ka-white);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}
.nl-desc { font-size: var(--text-sm); color: rgba(255,255,255,.75); line-height: 1.8; }
.nl-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.nl-badge {
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.85);
  font-size: 11px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}
.nl-form { display: flex; flex-direction: column; gap: var(--space-3); }
.nl-form input {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-md);
  padding: 11px 16px;
  font-size: var(--text-sm);
  color: var(--ka-white);
  outline: none;
  transition: all var(--transition-base);
}
.nl-form input::placeholder { color: rgba(255,255,255,.45); }
.nl-form input:focus { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.55); }
.nl-submit {
  background: var(--ka-white);
  color: var(--ka-primary-dark);
  border: none;
  border-radius: var(--radius-md);
  padding: 12px;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.nl-submit:hover { opacity: .9; }
.nl-privacy { font-size: 11px; color: rgba(255,255,255,.4); text-align: center; }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; }
  .hero-sidebar { display: none; }
  .course-grid { grid-template-columns: repeat(2, 1fr); }
  .category-band__inner { grid-template-columns: 1fr; }
  .cat-articles { grid-template-columns: repeat(2, 1fr); }
  .experts-grid { grid-template-columns: repeat(2, 1fr); }
  .newsletter-section { grid-template-columns: 1fr; padding: var(--space-8); }
}
@media (max-width: 640px) {
  .course-grid { grid-template-columns: 1fr; }
  .cat-articles { grid-template-columns: 1fr; }
  .hero-title { font-size: var(--text-xl); }
  .newsletter-section { padding: var(--space-6); }
}


/* ══════ pages/home.css ══════ */
/* ============================================================
   KULUD ACADEMY — Home Page Layout
   ============================================================ */

.page-home main { padding-top: 0; }

/* ── MAIN LAYOUT WITH SIDEBAR ── */
.content-with-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}
.main-content { min-width: 0; }

/* ── STICKY SIDEBAR ── */
.sidebar { display: flex; flex-direction: column; gap: var(--space-6); }
.sidebar-widget {
  background: var(--ka-white);
  border: 1px solid var(--ka-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.widget-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ka-muted);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--ka-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.widget-title svg {
  width: 14px;
  height: 14px;
  stroke: var(--ka-primary);
  fill: none;
  stroke-width: 2;
}

/* Course Finder Widget */
.course-finder select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--ka-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--ka-text);
  background: var(--ka-bg);
  outline: none;
  margin-bottom: var(--space-2);
  cursor: pointer;
}
.course-finder select:focus { border-color: var(--ka-primary); }
.course-finder .btn { width: 100%; margin-top: var(--space-2); justify-content: center; border-radius: var(--radius-md); }

/* CPD Progress Widget */
.cpd-bar-wrap { margin-bottom: var(--space-3); }
.cpd-label { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--ka-muted); margin-bottom: 5px; }
.cpd-bar { height: 6px; background: var(--ka-bg); border-radius: 3px; overflow: hidden; }
.cpd-fill { height: 100%; background: var(--ka-primary); border-radius: 3px; }
.cpd-total { font-size: var(--text-sm); color: var(--ka-muted); text-align: center; margin-top: var(--space-3); }
.cpd-total strong { color: var(--ka-primary); font-size: var(--text-md); }

/* Quick Links Widget */
.quick-links { display: flex; flex-direction: column; gap: 6px; }
.quick-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--ka-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.quick-link-item:hover { background: var(--ka-primary-light); color: var(--ka-primary); }
.quick-link-item svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; opacity: .5; }

@media (max-width: 1024px) {
  .content-with-sidebar { grid-template-columns: 1fr; }
  .sidebar { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   Additions for the WordPress template.
   Everything below is scoped under .ka-home so it cannot leak into
   the LMS pages that manara.css owns.
   ══════════════════════════════════════════════════════════════ */

.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ka-home { background: var(--ka-bg); }

/* ── Hero ── */
.ka-hero {
  padding: var(--space-16) 0 var(--space-12);
  background: linear-gradient(135deg, var(--ka-primary-deeper), var(--ka-primary) 70%, #0a9b4d);
  color: #fff;
}
.ka-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, var(--text-4xl));
  line-height: 1.18; color: #fff; margin: 0 0 var(--space-4);
}
.ka-eyebrow {
  display: inline-block; margin-bottom: var(--space-3);
  padding: 5px 13px;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,.16);
  border-radius: var(--radius-pill);
}
.ka-hero__lead {
  max-width: 62ch; margin: 0 0 var(--space-8);
  font-size: var(--text-md); line-height: 1.65;
  color: rgba(255,255,255,.88);
}

/* Search — the one control the whole page is built around */
.ka-search { position: relative; display: flex; gap: var(--space-3); max-width: 720px; }
.ka-search svg {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; pointer-events: none;
  fill: none; stroke: var(--ka-primary); stroke-width: 2; stroke-linecap: round;
}
.ka-search input[type="search"] {
  flex: 1; min-width: 0;
  padding: 17px 22px 17px 54px;
  font: inherit; font-size: var(--text-base); color: var(--ka-text);
  background: #fff; border: 2px solid transparent;
  border-radius: var(--radius-pill); outline: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.ka-search input[type="search"]:focus {
  border-color: var(--ka-accent);
  box-shadow: 0 0 0 4px rgba(0,132,61,.18);
}
.ka-search .btn { border-radius: var(--radius-pill); padding-inline: var(--space-8); }

.ka-hero__stats { display: flex; gap: var(--space-10); margin-top: var(--space-8); flex-wrap: wrap; }
.ka-hero__stats .hero-stat { display: flex; flex-direction: column; }
.ka-hero__stats strong { font-size: var(--text-2xl); font-weight: 700; line-height: 1; color: #fff; }
.ka-hero__stats span { font-size: var(--text-sm); color: rgba(255,255,255,.75); margin-top: 4px; }

/* ── Sections ── */
.ka-section { padding: var(--space-16) 0; }
.ka-section--tint { background: var(--ka-white); }
.ka-section .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.ka-result-count { font-size: var(--text-sm); color: var(--ka-muted); margin: 0; }

/* ── Category pills ── */
.ka-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0 var(--space-8); }
.ka-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  font: inherit; font-size: var(--text-sm); font-weight: 600;
  color: var(--ka-text-secondary);
  background: var(--ka-white);
  border: 1px solid var(--ka-border); border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base),
              border-color var(--transition-base);
}
.ka-pill:hover { border-color: var(--ka-primary); color: var(--ka-primary); }
.ka-pill.is-active { background: var(--ka-primary); border-color: var(--ka-primary); color: #fff; }
.ka-pill__n {
  min-width: 20px; padding: 1px 6px;
  font-size: var(--text-xs); font-weight: 700; text-align: center;
  background: var(--ka-border-light); color: var(--ka-muted);
  border-radius: var(--radius-pill);
}
.ka-pill.is-active .ka-pill__n { background: rgba(255,255,255,.22); color: #fff; }

/* ── Empty / no-match states ──
   A filter that matches nothing must SAY so. A silently empty grid reads as
   "the page is broken", not "no results". */
.ka-noresults, .ka-empty {
  padding: var(--space-12);
  text-align: center; color: var(--ka-muted); font-size: var(--text-base);
  background: var(--ka-white);
  border: 1px dashed var(--ka-border); border-radius: var(--radius-xl);
}
.ka-more { margin-top: var(--space-10); text-align: center; }

/* ── Reveal ── */
.ka-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.ka-reveal.is-in { opacity: 1; transform: none; }

.ka-editor-content { max-width: var(--content-width); margin-inline: auto; }

/* Real thumbnails must fill the same box as the placeholder tiles. */
.ka-home .course-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ka-home .course-card__title a { color: inherit; text-decoration: none; }
.ka-home .course-card__title a:hover { color: var(--ka-primary); }

@media (prefers-reduced-motion: reduce) {
  .ka-reveal { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 782px) {
  .ka-hero { padding: var(--space-12) 0 var(--space-10); }
  .ka-search { flex-direction: column; }
  .ka-search .btn { width: 100%; }
  .ka-hero__stats { gap: var(--space-6); }
}

/* ── Template navigation ──────────────────────────────────────
   Renders the site's real "primary" menu. Deliberately NOT reusing
   Eduma's .width-navigation markup, which the site's custom CSS hides
   on the home page. */
.ka-nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--ka-white);
  border-bottom: 1px solid var(--ka-border);
}
.ka-nav__inner { display: flex; align-items: center; gap: var(--space-4); min-height: var(--subnav-height); }

.ka-nav__menu { display: flex; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.ka-nav__menu li { position: relative; }
.ka-nav__menu a {
  display: block; padding: 12px 14px;
  font-size: var(--text-sm); font-weight: 600; line-height: 1.2;
  color: var(--ka-text-secondary); text-decoration: none;
  border-radius: var(--radius-md);
  transition: color var(--transition-base), background var(--transition-base);
}
.ka-nav__menu a:hover,
.ka-nav__menu .current-menu-item > a { color: var(--ka-primary); background: var(--ka-primary-light); }

/* Second level — opens on hover AND on keyboard focus, which hover alone
   never does. */
.ka-nav__menu .sub-menu {
  position: absolute; left: 0; top: 100%; z-index: var(--z-dropdown);
  min-width: 230px; margin: 0; padding: var(--space-2); list-style: none;
  background: var(--ka-white);
  border: 1px solid var(--ka-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}
.ka-nav__menu li:hover > .sub-menu,
.ka-nav__menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.ka-nav__menu .sub-menu a { white-space: nowrap; }

.ka-nav__cta {
  margin-left: auto; flex-shrink: 0;
  padding: 9px 18px;
  font-size: var(--text-sm); font-weight: 600; text-decoration: none;
  color: #fff; background: var(--ka-primary);
  border-radius: var(--radius-pill);
  transition: background var(--transition-base);
}
.ka-nav__cta:hover { background: var(--ka-primary-dark); color: #fff; }

.ka-nav__toggle { display: none; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
.ka-nav__toggle span[aria-hidden] { display: block; width: 20px; height: 2px; background: var(--ka-text); border-radius: 2px; transition: transform var(--transition-base), opacity var(--transition-fast); }
.ka-nav__toggle[aria-expanded="true"] span:nth-of-type(1) { transform: translateY(7px) rotate(45deg); }
.ka-nav__toggle[aria-expanded="true"] span:nth-of-type(2) { opacity: 0; }
.ka-nav__toggle[aria-expanded="true"] span:nth-of-type(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .ka-nav__toggle { display: flex; }
  .ka-nav__inner { flex-wrap: wrap; }
  /* Collapsed by default on small screens; the toggle reveals it. */
  .ka-nav__menu { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: var(--space-3); }
  .ka-nav__menu.is-open { display: flex; }
  .ka-nav__menu a { padding: 13px 6px; border-bottom: 1px solid var(--ka-border-light); border-radius: 0; }
  .ka-nav__menu .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding-left: var(--space-4);
  }
  .ka-nav__cta { margin-left: 0; }
}

/* ── Brand inside the nav bar ─────────────────────────────────
   Eduma's own header row is hidden on this template (rule below) so the
   logo and menu can share one line. Scoped to .ka-home-template — the
   body class this theme adds — so it cannot reach any other page. */
.ka-home-template .thim-nav-wrapper { display: none !important; }

.ka-nav__brand { display: flex; align-items: center; flex-shrink: 0; margin-right: var(--space-6); text-decoration: none; }
.ka-nav__brand img {
  display: block; width: auto; height: 52px;   /* fixed height = no layout shift as it loads */
  max-width: 220px; object-fit: contain;
}
.ka-nav__brandtext { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--ka-primary); }

/* The bar is taller now that it carries the logo. */
.ka-nav__inner { min-height: 72px; padding-block: var(--space-2); }

/* Keep everything on ONE line: the menu takes the free space and the
   items shrink rather than wrapping to a second row. */
.ka-nav__menu { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ka-nav__menu::-webkit-scrollbar { display: none; }
.ka-nav__menu > li { flex: 0 0 auto; }
.ka-nav__menu a { white-space: nowrap; padding-inline: 11px; }

@media (max-width: 1180px) {
  .ka-nav__menu a { font-size: var(--text-xs); padding-inline: 9px; }
  .ka-nav__brand img { height: 44px; }
}
@media (max-width: 860px) {
  /* Below the breakpoint the menu collapses behind the toggle, so the
     single-line rules must be undone or it scrolls sideways instead. */
  .ka-nav__menu { flex-wrap: wrap; overflow: visible; }
  .ka-nav__inner { min-height: 0; }
  .ka-nav__brand { margin-right: auto; }
  .ka-nav__brand img { height: 40px; }
}