/*
 * components.css — OLLMH Child Theme
 * Reusable components: buttons, cards, tables, forms, breadcrumbs, social, tabs, slideshow, scroller, Turnstile, cookie consent, pagination.
 */

/* ============================================================
   Global custom tooltip — replaces native browser tooltips.
   Any element with [data-tooltip] or a [title] that JS promotes
   to [data-tooltip] gets this styled tooltip on hover.
   ============================================================ */
.ollmh-tooltip {
  position: fixed;
  background: var(--color-primary);
  color: var(--color-text-white);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 99999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.ollmh-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--color-primary);
}
.ollmh-tooltip.is-visible {
  opacity: 1;
}
/* When tooltip appears below the element (element is near top of viewport) */
.ollmh-tooltip.ollmh-tooltip-below {
  bottom: auto;
}
.ollmh-tooltip.ollmh-tooltip-below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--color-primary);
}

/* Buttons */

.btn {
  display: inline-block;
  padding: 0.55em 1.25em;
  font-family: var(--font-body);
  font-size: var(--fs-medium);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--color-nav-accent); outline-offset: 2px; }

.btn-primary {
  background: var(--gradient-primary-button);
  color: var(--color-text-white);
  border-color: var(--color-primary-button);
  box-shadow: var(--shadow-button);
}
.btn-primary:hover { filter: brightness(1.08); color: var(--color-text-white); }
.btn-primary:active { filter: brightness(0.95); }

.btn-secondary {
  background: var(--gradient-nav);
  color: var(--color-text-white);
  border-color: var(--color-nav-blue);
}
.btn-secondary:hover { background: var(--color-nav-hover); color: var(--color-text-white); }

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary); color: var(--color-text-white); }

.btn-lg { padding: 0.75em 1.75em; font-size: var(--fs-large); }
.btn-sm { padding: 0.35em 0.85em; font-size: var(--fs-small); }
.btn-block { display: block; width: 100%; }

/* Cards */
.card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--spacing-unit);
  margin: 0 0 var(--spacing-unit);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.card-title {
  margin: 0 0 0.5em;
  font-family: var(--font-heading);
  font-size: var(--fs-xlarge);
  font-weight: 700;
  color: var(--color-text-heading);
}
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: var(--color-nav-hover); }
.card-body { margin: 0; }
.card-body p:last-child { margin-bottom: 0; }
.card-footer {
  margin-top: var(--spacing-unit);
  padding-top: 0.75em;
  border-top: 1px solid var(--color-border-light);
  font-size: var(--fs-small);
}
.card-img { display: block; width: 100%; margin-bottom: 0.75em; border-radius: var(--border-radius); }

/* Tables */
.ollmh-table,
table.ollmh-table {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  font-size: var(--fs-body);
}
.ollmh-table th,
.ollmh-table td {
  padding: 0.6em 0.8em;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.ollmh-table th {
  background: var(--color-primary);
  color: var(--color-text-white);
  font-family: var(--font-heading);
  font-weight: 700;
  border-bottom: none;
}
.ollmh-table tbody tr:nth-child(even) { background: var(--color-bg-light); }
.ollmh-table tbody tr:nth-child(odd) { background: var(--color-bg-white); }
.ollmh-table tbody tr:hover { background: var(--color-bg-dropdown); }
.ollmh-table tbody tr:last-child td { border-bottom: none; }

/* Forms */
.ollmh-form input[type="text"],
.ollmh-form input[type="email"],
.ollmh-form input[type="url"],
.ollmh-form input[type="password"],
.ollmh-form input[type="search"],
.ollmh-form input[type="number"],
.ollmh-form input[type="tel"],
.ollmh-form input[type="date"],
.ollmh-form select,
.ollmh-form textarea {
  width: 100%;
  padding: 0.5em 0.7em;
  font-family: var(--font-body);
  font-size: var(--fs-medium);
  color: var(--color-text-body);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ollmh-form textarea { min-height: 120px; resize: vertical; }
.ollmh-form input:focus,
.ollmh-form select:focus,
.ollmh-form textarea:focus {
  outline: none;
  border-color: var(--color-nav-accent);
  box-shadow: 0 0 0 3px rgba(2, 159, 235, 0.18);
}
.ollmh-form label { display: block; margin-bottom: 0.3em; font-weight: 700; font-size: var(--fs-small); }
.ollmh-form .form-row { margin-bottom: var(--spacing-unit); }
.ollmh-form .required { color: var(--color-inline-red); }
.ollmh-form .form-note { font-size: var(--fs-small); color: var(--color-text-muted); }

/* Breadcrumbs */
.ollmh-breadcrumbs {
  margin: 0 0 var(--spacing-unit);
  padding: 0.5em 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.ollmh-breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.ollmh-breadcrumbs li { display: flex; align-items: center; }
.ollmh-breadcrumbs li + li::before {
  content: "/";
  margin: 0 0.5em;
  color: var(--color-border-slider);
}
.ollmh-breadcrumbs a { color: var(--color-link); text-decoration: none; }
.ollmh-breadcrumbs a:hover { color: var(--color-nav-hover); text-decoration: underline; }
.ollmh-breadcrumbs .current { color: var(--color-text-body); font-weight: 700; }

/* Social links */
.social-links { display: flex; flex-wrap: wrap; gap: 0.5em; }
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-nav-blue);
  color: var(--color-text-white);
  font-size: var(--fs-medium);
  transition: background 0.15s ease;
}
.social-links a:hover { background: var(--color-nav-hover); color: var(--color-text-white); text-decoration: none; }
.social-links svg { width: 16px; height: 16px; fill: currentColor; }

/* Section headings on dark backgrounds */
.section-heading-dark {
  color: var(--color-accent-gold);
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0 0 0.5em;
}
.section-heading-dark a { color: var(--color-accent-gold); }
.section-heading-dark a:hover { color: var(--color-accent-yellow); text-decoration: none; }

/* Tabs */
.ollmh-tabs { margin: 0 0 var(--spacing-unit); }
.ollmh-tabs .tab-nav {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 -1px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-border-tab);
}
.ollmh-tabs .tab-nav li { margin: 0 0.15em 0 0; }
.ollmh-tabs .tab-nav a {
  display: block;
  padding: 0.55em 1.1em;
  font-size: var(--fs-tabs);
  color: var(--color-text-body);
  background: var(--color-bg-tab-alt);
  border: 1px solid var(--color-border-tab);
  border-bottom: none;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  text-decoration: none;
}
.ollmh-tabs .tab-nav a:hover { background: var(--color-bg-tab); color: var(--color-nav-hover); }
.ollmh-tabs .tab-nav .active a,
.ollmh-tabs .tab-nav li.active a {
  background: var(--color-bg-white);
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-bg-white);
  font-weight: 700;
}
.ollmh-tabs .tab-content {
  padding: var(--spacing-unit);
  border: 1px solid var(--color-border-tab);
  border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
  background: var(--color-bg-white);
}
.ollmh-tabs .tab-pane { display: none; }
.ollmh-tabs .tab-pane.active { display: block; }
.ollmh-tabs .tab-pane > *:first-child { margin-top: 0; }
.ollmh-tabs .tab-pane > *:last-child { margin-bottom: 0; }

/* Slideshow / pagination dots */
.ollmh-slideshow { position: relative; margin: 0 0 var(--spacing-unit); }
.ollmh-slideshow .slide-track { overflow: hidden; }
.ollmh-slideshow .slide { display: none; }
.ollmh-slideshow .slide.active { display: block; }
.ollmh-slideshow .slide img { width: 100%; display: block; }
.ollmh-slideshow .slide-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em;
  background: var(--shadow-overlay-dark);
  color: var(--color-text-white);
  font-size: var(--fs-medium);
}
.ollmh-slideshow .slide-dots {
  display: flex;
  justify-content: center;
  gap: 0.5em;
  margin: 0.75em 0 0;
  padding: 0;
  list-style: none;
}
.ollmh-slideshow .slide-dots button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  transition: background 0.15s ease;
}
.ollmh-slideshow .slide-dots .active button,
.ollmh-slideshow .slide-dots button.active { background: var(--color-accent-gold); }
.ollmh-slideshow .slide-dots button:hover { background: var(--color-nav-hover); }

/* News scroller */
.ollmh-news-scroller {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--spacing-unit);
  margin: 0 0 var(--spacing-unit);
}
.ollmh-news-scroller .scroller-title {
  margin: 0 0 0.5em;
  font-family: var(--font-heading);
  font-size: var(--fs-xlarge);
  color: var(--color-primary);
}
.ollmh-news-scroller .scroller-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.ollmh-news-scroller .scroller-list li {
  padding: 0.5em 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--fs-body);
}
.ollmh-news-scroller .scroller-list li:last-child { border-bottom: none; }
.ollmh-news-scroller .scroller-date {
  display: block;
  font-size: var(--fs-tiny);
  color: var(--color-text-muted);
}
.ollmh-news-scroller .scroller-list a { color: var(--color-link); text-decoration: none; }
.ollmh-news-scroller .scroller-list a:hover { color: var(--color-nav-hover); text-decoration: underline; }

/* Turnstile container */
.ollmh-turnstile,
.cf-turnstile {
  display: flex;
  justify-content: flex-start;
  margin: var(--spacing-unit) 0;
  min-height: 65px;
}
.ollmh-turnstile iframe { border: 0; border-radius: var(--border-radius); }

/* Cookie consent banner (BEM — matches cookie-consent.js output) */
.ollmh-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99990;
  background: var(--color-bg-white);
  border-top: 3px solid var(--color-accent-gold);
  box-shadow: 0 -4px 24px rgba(0, 26, 85, 0.12);
  font-family: var(--font-body);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  /* The banner is fixed, so it paints over the page and swallows clicks on
   * anything beneath it. With the preferences panel always expanded it grows
   * beyond half the viewport on small screens — cap it so the majority of the
   * viewport stays interactive, and scroll the banner's own content instead. */
  max-height: 40vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ollmh-cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ollmh-cookie-banner__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 20px 24px;
}
.ollmh-cookie-banner__main h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--color-primary-heading);
}
.ollmh-cookie-banner__main p {
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
  color: var(--color-text-muted);
}
.ollmh-cookie-banner__link {
  color: var(--color-primary-button);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ollmh-cookie-banner__actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.ollmh-cookie-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  line-height: 1;
}
.ollmh-cookie-btn--accept {
  background: var(--gradient-primary-button);
  color: var(--color-text-white);
}
.ollmh-cookie-btn--accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 100, 205, 0.3);
}
.ollmh-cookie-btn--decline {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.ollmh-cookie-btn--decline:hover {
  background: var(--color-bg-light);
}
.ollmh-cookie-btn--save {
  background: var(--gradient-primary-button);
  color: var(--color-text-white);
  margin-top: 8px;
}
.ollmh-cookie-btn--save:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 100, 205, 0.3);
}

/* Granular preferences panel — always visible (uniform view) */
.ollmh-cookie-preferences {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}
.ollmh-cookie-category {
  margin-bottom: 16px;
}
.ollmh-cookie-category label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.ollmh-cookie-category input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary-button);
  flex-shrink: 0;
}
.ollmh-cookie-cat-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary-heading);
}
.ollmh-cookie-cat-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 4px 0 0 28px;
  line-height: 1.5;
}
.ollmh-cookie-preferences-actions {
  margin-top: 16px;
}

/* Floating "Cookie Settings" reopen button (bottom-left) */
.ollmh-cookie-reopen {
  position: fixed;
  bottom: 48px;
  left: 24px;
  z-index: 99989;
  width: 48px;
  height: 48px;
  border-radius: 50% 50% 0 0;
  border: none;
  background: linear-gradient(#049CDB, #0064CD);
  color: var(--color-text-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 100, 205, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ollmh-cookie-reopen:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(0, 100, 205, 0.4);
}
@media (max-width: 768px) {
  .ollmh-cookie-banner__inner { padding: 16px; }
  .ollmh-cookie-banner__actions { gap: 8px; width: 100%; }
  .ollmh-cookie-btn { flex: 1; text-align: center; padding: 9px 14px; font-size: 0.8rem; }
  .ollmh-cookie-reopen {
    bottom: 42px;
    left: 16px;
    width: 42px;
    height: 42px;
  }
}

/* Pagination */
.ollmh-pagination,
.pagination {
  margin: var(--spacing-unit) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
  list-style: none;
  padding: 0;
}
.ollmh-pagination li,
.pagination .page-numbers { display: inline-flex; }
.ollmh-pagination a,
.ollmh-pagination span,
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.6em;
  font-size: var(--fs-body);
  color: var(--color-link);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.ollmh-pagination a:hover,
.pagination .page-numbers:hover { background: var(--color-bg-dropdown); color: var(--color-nav-hover); }
.ollmh-pagination .current,
.pagination .page-numbers.current {
  background: var(--gradient-primary-button);
  color: var(--color-text-white);
  border-color: var(--color-primary-button);
  font-weight: 700;
}
.ollmh-pagination .dots,
.pagination .page-numbers.dots { border: none; background: transparent; }

/* ========================================
   SITE HEADER — clean modern navigation
   Inspired by WardWatch 2027, adapted for OLLMH brand.
   ======================================== */

/* Top utility bar — visible only at the absolute top of the page.
   When the user scrolls, JS adds .is-hidden and the bar slides up
   and collapses. When they scroll back to the top, it reappears. */
.ollmh-topbar {
  background: var(--color-primary);
  color: var(--color-text-white);
  border-bottom: 1px solid var(--color-primary-dark);
  max-height: 40px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0s;
}
.ollmh-topbar.is-hidden {
  max-height: 0;
  opacity: 0;
  border-bottom: none;
}
.ollmh-topbar-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ollmh-topbar-left,
.ollmh-topbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.ollmh-topbar-link {
  font-size: var(--fs-small);
  color: var(--color-text-footer);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.15s ease;
  white-space: nowrap;
}
.ollmh-topbar-link:hover {
  color: #fff;
  text-decoration: underline;
}
.ollmh-topbar-link i { font-size: 0.8em; }
.ollmh-topbar-emergency { color: #fca5a5; }
.ollmh-topbar-emergency:hover { color: #fff; }
.ollmh-topbar-staff {
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.15s ease, color 0.15s ease;
}
.ollmh-topbar-staff:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  text-decoration: none;
}
@media (max-width: 768px) {
  .ollmh-topbar-inner { flex-direction: column; gap: 4px; padding: 4px 12px; }
  .ollmh-topbar-left, .ollmh-topbar-right { gap: 0.75rem; }
  .ollmh-topbar-link { font-size: 0.75rem; }
}
@media (max-width: 480px) {
  .ollmh-topbar-link span { display: none; }
}

/* Site header — fixed to the top via JS when scrolling on desktop.
   At the top of the page it's in normal flow (with the topbar above).
   When the user scrolls past the topbar, JS adds .is-fixed which
   switches to position: fixed; top: 0; left: 0; right: 0; and adds
   padding-top to body to compensate for the header being out of flow. */
.ollmh-site-header {
  position: relative;
  z-index: 1000;
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border-light);
  box-shadow: 0 2px 8px rgba(0, 26, 85, 0.06);
  transition: box-shadow 0.3s ease;
}
.ollmh-site-header.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 4px 16px rgba(0, 26, 85, 0.12);
  animation: ollmh-header-slide 0.3s ease;
}
@keyframes ollmh-header-slide {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.ollmh-header-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Logo */
.ollmh-logo a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-primary-heading);
  text-decoration: none;
  transition: transform 0.3s ease;
}
.ollmh-logo a:hover { transform: scale(1.03); text-decoration: none; }
.ollmh-logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.ollmh-logo-icon img {
  width: 42px;
  height: 42px;
  display: block;
  object-fit: contain;
  transition: transform 0.5s ease;
}
.ollmh-logo a:hover .ollmh-logo-icon img { transform: scale(1.08); }
.ollmh-logo-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  max-width: 280px;
}
.ollmh-logo-text {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary-heading);
  letter-spacing: -0.5px;
  line-height: 1.1;
  transition: color 0.2s ease;
}
.ollmh-logo a:hover .ollmh-logo-text { color: var(--color-primary-button); }
.ollmh-tagline {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin: 2px 0 0;
}

/* Main navigation */
.ollmh-main-nav { display: flex; align-items: center; flex-shrink: 1; min-width: 0; }
.ollmh-nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
  align-items: center;
  flex-wrap: nowrap;
}

/* Top-level items */
.ollmh-nav-item { position: relative; }
.ollmh-nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 13px;
  color: var(--color-text-menu);
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 8px;
  position: relative;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.ollmh-nav-item > a::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-primary-button);
  border-radius: 2px;
  transition: width 0.25s ease, left 0.25s ease;
}
.ollmh-nav-item > a:not(.ollmh-nav-btn):hover {
  color: var(--color-primary-button);
  background: rgba(0, 100, 205, 0.08);
  text-decoration: none;
}
.ollmh-nav-item > a:not(.ollmh-nav-btn):hover::after {
  width: 60%;
  left: 20%;
}
.ollmh-nav-item.current > a {
  color: var(--color-primary-button);
  background: rgba(0, 100, 205, 0.1);
  font-weight: 600;
}
.ollmh-nav-item.current > a::after { width: 60%; left: 20%; }

/* §3.4.4 Desktop active ancestor — when a dropdown child is active, show the
   parent as active too (blue tint + underline) so hovering reveals context. */
.ollmh-nav-item.current-ancestor > a {
  color: var(--color-primary-button);
  font-weight: 600;
}
.ollmh-nav-item.current-ancestor > a::after { width: 60%; left: 20%; }
/* Active child inside a dropdown panel */
.ollmh-dropdown li.current > a {
  color: var(--color-primary-button);
  font-weight: 600;
  background: var(--color-bg-dropdown);
}

/* Caret indicator for dropdown parents */
.ollmh-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.6;
  transition: transform 0.2s ease;
}
.ollmh-nav-item.has-dropdown:hover > a .ollmh-caret { transform: rotate(180deg); }

/* Dropdown panels */
.ollmh-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  list-style: none;
  margin: 6px 0 0;
  padding: 8px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 26, 85, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1001;
}
/* Desktop: dropdown shows on hover only. The .open class is a mobile-only
   (tap-to-expand) state and must NOT keep the dropdown visible on desktop. */
.ollmh-nav-item.has-dropdown:hover > .ollmh-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ollmh-dropdown li { margin: 0; }
.ollmh-dropdown a {
  display: block;
  padding: 8px 12px;
  color: var(--color-text-menu);
  font-size: 0.8125rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.ollmh-dropdown a:hover {
  background: var(--color-bg-dropdown);
  color: var(--color-primary-button);
  text-decoration: none;
}

/* CTA button in nav */
.ollmh-nav-cta { margin-left: 8px; flex-shrink: 0; }
.ollmh-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  background: var(--gradient-primary-button);
  color: var(--color-text-white) !important;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 50px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 100, 205, 0.25);
  border: 2px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.ollmh-nav-btn::after { display: none; }
.ollmh-nav-btn:hover {
  color: var(--color-text-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 100, 205, 0.4);
  text-decoration: none;
}

/* Search in header */
.ollmh-header-search { position: relative; flex-shrink: 0; }
.ollmh-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-primary-heading);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ollmh-search-toggle:hover,
.ollmh-search-toggle[aria-expanded="true"] {
  background: var(--color-primary);
  color: var(--color-text-white);
  border-color: var(--color-primary);
}
.ollmh-search-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  padding: 14px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 26, 85, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1001;
}
.ollmh-search-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ollmh-search-panel .search-form { display: flex; gap: 6px; }
.ollmh-search-panel .search-field {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.875rem;
}
.ollmh-search-panel .search-submit {
  padding: 8px 14px;
  font-size: 0.8125rem;
  border-radius: 6px;
}

/* Mobile menu toggle (hidden on desktop, shown via responsive.css <= 992px) */
.ollmh-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ollmh-nav-toggle:hover {
  background: rgba(0, 100, 205, 0.08);
  border-color: var(--color-border-light);
}
.ollmh-hamburger {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-primary-heading);
  position: relative;
  transition: background 0.2s ease;
}
.ollmh-hamburger::before,
.ollmh-hamburger::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: var(--color-primary-heading);
  transition: transform 0.2s ease;
}
.ollmh-hamburger::before { top: -7px; }
.ollmh-hamburger::after { top: 7px; }
.ollmh-nav-toggle[aria-expanded="true"] .ollmh-hamburger { background: transparent; }
.ollmh-nav-toggle[aria-expanded="true"] .ollmh-hamburger::before { transform: translateY(7px) rotate(45deg); }
.ollmh-nav-toggle[aria-expanded="true"] .ollmh-hamburger::after { transform: translateY(-7px) rotate(-45deg); }