/* === Brand palette === */
:root{
  --brand: #1EA6B8;      /* AAI teal */
  --brand-dark: #178392;
  --brand-verydark: #0f6570;
  --brand-light: #e7f6f8;

  /* Header branding knobs */
  --aai-w: 120px;  /* width of AAI wordmark (bigger left box) */
  --rp-icon: 48px; /* size of RepliMap icon */
  --header-pad-x: 16px; /* side padding in header */
  --header-pad-y: 14px; /* top padding in header */
  --row-gap: 12px;      /* vertical gap between AAI row and RepliMap row */
}

/* Top bar */
.wy-nav-top { background: var(--brand) !important; }

/* Content links */
.rst-content a, .rst-content a:visited { color: var(--brand); }
.rst-content a:hover, .rst-content a:focus { color: var(--brand-dark); text-decoration: underline; }

/* Sidebar highlights */
.wy-menu-vertical a:hover { background: var(--brand-light); }
.wy-menu-vertical a.current,
.wy-menu-vertical a.current:hover { background: var(--brand); color: #fff; }

/* Buttons */
a.btn, a.btn:visited { border-color: var(--brand); color: var(--brand); }
a.btn:hover, a.btn:focus { background: var(--brand); color:#fff; border-color: var(--brand-dark); }

/* Breadcrumbs + footer links */
.wy-breadcrumbs a { color: var(--brand); }
.wy-breadcrumbs a:hover { color: var(--brand-dark); }
.rst-footer a { color: var(--brand); }
.rst-footer a:hover { color: var(--brand-dark); }

/* ===== Header branding layout =====
   AAI wordmark: top-left (bigger)
   RepliMap icon: centered below
   "RepliMap" text: right next to the icon
====================================================== */
.wy-side-nav-search{
  position: relative;
  background: var(--brand) !important;

  /* AAI wordmark (top-left) as background image */
  background-image: url("/assets/aai_logo.png") !important;
  background-repeat: no-repeat !important;
  background-position:
    left var(--header-pad-x) top var(--header-pad-y) !important;
  background-size: var(--aai-w) auto !important;

  /* space above search input for both rows */
  padding-top: calc(
    var(--header-pad-y)
    + var(--row-gap)
    + var(--rp-icon)
    + 24px
  ) !important; /* 24px ≈ text height + breathing room */
}

/* hide default home+title so it doesn't overlap our branding */
.wy-side-nav-search > a { display: none !important; }

/* RepliMap icon — centered horizontally, on second row */
.wy-side-nav-search::before{
  content: "";
  position: absolute;
  top: calc(var(--header-pad-y) + var(--row-gap) + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: var(--rp-icon);
  height: var(--rp-icon);
  background-image: url("/assets/replimap_logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* RepliMap label — placed immediately to the right of the icon */
.wy-side-nav-search::after{
  content: "RepliMap";
  position: absolute;
  top: calc(var(--header-pad-y) + var(--row-gap) + 12px + (var(--rp-icon) - 20px)/2);
  left: calc(50% + var(--rp-icon)/2 + 8px); /* 8px gap from icon */
  color: #fff;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
  pointer-events: none;
}

/* Search focus ring */
.wy-side-nav-search input[type="text"]:focus {
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 2px var(--brand-light);
  outline: none;
}

/* Keep links in header white */
.wy-side-nav-search a { color:#fff; }
.wy-side-nav-search a:hover { color:#fff; opacity:.9; }

/* ===== Responsive tweaks ===== */
@media (max-width: 768px){
  :root{
    --aai-w: 100px;
    --rp-icon: 40px;
    --header-pad-x: 12px;
    --header-pad-y: 12px;
    --row-gap: 10px;
  }
}

/* --- RepliMap icon+label nudge (down & left) --- */
:root{
  --rp-shift-down: 5px;   /* increase to move further DOWN */
  --rp-shift-left: 54px;   /* increase to move further LEFT */
}

/* icon */
.wy-side-nav-search::before{
  top: calc(var(--header-pad-y) + var(--row-gap) + 12px + var(--rp-shift-down)) !important;
  left: calc(50% - var(--rp-shift-left)) !important;
}

/* label */
.wy-side-nav-search::after{
  top: calc(var(--header-pad-y) + var(--row-gap) + 12px + var(--rp-shift-down) + (var(--rp-icon) - 20px)/2) !important;
  left: calc(50% - var(--rp-shift-left) + var(--rp-icon)/2 + 8px) !important;
}

/* ==== Left sidebar section headers (caption) ==== */
.wy-menu-vertical .caption,
.wy-menu-vertical .caption-text{
  color: var(--brand) !important;   /* make headers use AAI teal */
  font-weight: 700;                  /* bolder */
  letter-spacing: .02em;             /* optional: slight tracking */
}

/* optional: tidy the divider line above each caption */
.wy-menu-vertical .caption{
  border-top: 1px solid rgba(255,255,255,.06);
  margin: 12px 0 6px;
  padding-top: 10px;
}

/* keep hover/active states consistent for links below captions */
.wy-menu-vertical a:hover { background: var(--brand-light); }
.wy-menu-vertical a.current,
.wy-menu-vertical a.current:hover { background: var(--brand); color: #fff; }

/* Nudge AAI logo further top-left without changing globals */
.wy-side-nav-search{
  background-position:
    left calc(var(--header-pad-x) - 12px)
    top  calc(var(--header-pad-y) - 12px) !important;
}