/*
 * LONAP theme for Alice-LG
 * ------------------------
 * Selectors verified against alice-lg 6.x DOM + alice-theme-example.
 * Brand colours from the official LONAP 2022 logo:
 *   cyan  #27B9D3
 *   black #231F20
 *
 * Assumes a DARK sidebar with the white wordmark.
 * For a white header instead, see the note at the bottom.
 */

:root {
  --lonap-cyan:   #27B9D3;
  --lonap-cyan-d: #1f9cb1;   /* darker cyan for hover */
  --lonap-black:  #231F20;
  --sidebar-bg:   #272634;   /* existing dark sidebar */
  --sidebar-head: #272634;   /* logo strip — matches sidebar for a seamless look */
}

/* ============ Sidebar ============ */
.page-sidebar {
  background: var(--sidebar-bg);
  color: #f0f0f0;
}

/* Logo strip */
.page-sidebar .sidebar-header {
  background: var(--sidebar-head);
}

/* Swap the default cloud for the LONAP wordmark.
   The logo is a <span> inside .logo > a, styled via background-image. */
.page-sidebar .sidebar-header .logo a span {
  background-image: url('/theme/lonap-logo-white.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  display: inline-block;
  width: 150px;
  height: 44px;
  color: transparent;      /* hide any default text/glyph */
  text-indent: -9999px;    /* push any leftover text off-canvas */
  overflow: hidden;
}

/* Kill the original cloud mark if it's a separate img / svg / background */
.page-sidebar .sidebar-header .logo a img,
.page-sidebar .sidebar-header .logo a svg,
.page-sidebar .sidebar-header .logo a span::before,
.page-sidebar .sidebar-header .logo a span::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Hide the header title block entirely — the logo already reads "LONAP" */
.page-sidebar .sidebar-header .title {
  display: none;
}

/* "route servers" heading */
.routeservers-list h2 {
  color: #8a8a9a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Route-server links */
.routeservers-list a {
  color: var(--lonap-cyan);
}
.routeservers-list a:hover {
  color: #ffffff;
}

/* ============ Main content ============ */

/* Headings, "SEARCH ON ALL ROUTE SERVERS", "DID YOU KNOW?" */
.page-content h1,
.page-content h2,
.page-content h3 {
  color: var(--lonap-black);
}
.page-content .search-header,
.page-content .did-you-know {
  color: var(--lonap-cyan);
}

/* Search input focus glow */
.page-content input[type="text"]:focus {
  border-color: var(--lonap-cyan);
  box-shadow: 0 0 0 2px rgba(39, 185, 211, 0.25);
  outline: none;
}

/* Primary / search buttons */
.page-content .btn-primary,
.page-content button[type="submit"] {
  background-color: var(--lonap-cyan);
  border-color: var(--lonap-cyan);
  color: #ffffff;
}
.page-content .btn-primary:hover,
.page-content button[type="submit"]:hover {
  background-color: var(--lonap-cyan-d);
  border-color: var(--lonap-cyan-d);
}

/* Links in the body */
.page-content a {
  color: var(--lonap-cyan);
}
.page-content a:hover {
  color: var(--lonap-cyan-d);
}

/* Active tabs / pills (results views) */
.nav-tabs > li.active > a,
.nav-pills > li.active > a {
  background-color: var(--lonap-cyan);
  border-color: var(--lonap-cyan);
  color: #ffffff;
}

/*
 * ---- Alternative: WHITE header (matches lonap.net) ----
 * Replace the sidebar-header + logo rules with:
 *
 *   .page-sidebar .sidebar-header { background: #ffffff; }
 *   .page-sidebar .sidebar-header .logo a span {
 *     background-image: url('/theme/lonap-logo.svg');   // black wordmark
 *     ...
 *   }
 *
 * and set the .title text colour to #231F20 so it stays readable.
 */