/* ===========================================================================
   site.css — overrides Bootstrap to match aphraoh.com.
   ===========================================================================

   Extracted only the rules needed for cards, hashtag chips, and pagination.
   Verbatim sources flagged with the section comments below.
   =========================================================================== */


/* ─── Typography defaults (aphraoh body styling) ─────────────────────────── */

/* The `LOT` font is aphraoh's display font, used for individual logo
 * letters with bright accent colours. Free for personal use, by Svetoslav
 * Simov / Fontfabric (2009). The .otf file lives in static/browse/fonts/. */
@font-face {
  font-family: 'LOT';
  src: url('fonts/LOT.otf') format('opentype');
  font-display: swap;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Oxygen-Sans, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
               "Helvetica Neue", Helvetica,
               "Hiragino Kaku Gothic Pro", Meiryo,
               Arial, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: rgb(33, 25, 34);
  font-size: 13px;
}

a              { text-decoration: none; }
a:hover:not(.active) { text-decoration: underline; }


/* ─── EAV logo (aphraoh-style, LOT font with accent colours) ──────────────── */

/* Aphraoh uses LOT font on selective letters with three accent colours:
 *   first  A → gold   #FFD700
 *   middle O → red    #EA4335
 *   second A → green  #34A853
 * Our EAV mirrors that pattern: E gold, A red, V green-and-rotated to
 * read as an upside-down A.
 */
.eav-logo {
  font-family: 'LOT', serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
}
.eav-logo:hover { text-decoration: none; }
.eav-logo .e    { color: #FFD700; }
.eav-logo .a    { color: #EA4335; }
.eav-logo .v {
  /* Render an "A" rotated 180° instead of a literal V — aphraoh's signature
   * trick: looks like an upside-down A in the same display font. */
  color: #34A853;
  display: inline-block;
  transform: rotate(180deg);
  /* rotate visually drops the glyph slightly; nudge it back up. */
  transform-origin: center 55%;
}


/* ─── Sidebar + toggle (adapted from aphraoh's NiceAdmin template) ────────── */

/*
 * Aphraoh's pattern:
 *  - .sidebar is fixed-position on the left, default state SHOWN.
 *  - body.toggle-sidebar HIDES the sidebar (slides it off-screen left)
 *    and removes the #main left margin.
 *  - Mobile (≤ 768px) inverts the default: sidebar starts hidden,
 *    body.toggle-sidebar reveals it as an overlay.
 *  - Sidebar content uses Bootstrap collapse accordion via data-bs-target +
 *    data-bs-parent (only one section open at a time).
 *
 * Adaptations from aphraoh's verbatim:
 *  - Sidebar `top` is 47px in aphraoh; our header is also slim, same value
 *    works.
 *
 * IMPORTANT — rule ordering matters here. The .sidebar base rule defining
 * `left: 5px` MUST appear BEFORE the @media rules that override it; otherwise
 * the un-mediaqueried base rule wins on equal specificity.
 */

#main {
  margin-top: 47px;
  padding: 10px 10px;
  transition: all 0.3s;
}

.sidebar {
  position: fixed;
  top: 47px;
  left: 5px;
  bottom: 0;
  width: 211px;
  z-index: 996;
  transition: all 0.3s;
  padding-top: 2px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #aab7cf transparent;
  box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
  /* Aphraoh verbatim — translucent white wrapper. */
  background-color: rgba(255, 255, 255, 0.87);
}

.sidebar::-webkit-scrollbar       { width: 5px; height: 8px; background-color: #fff; }
.sidebar::-webkit-scrollbar-thumb { background-color: #aab7cf; }

@media (min-width: 769px) {
  /* Desktop default: sidebar SHOWN, main offset to clear it. */
  #main, #footer { margin-left: 216px; }
}

@media (min-width: 769px) {
  /* Desktop with body.toggle-sidebar: sidebar HIDDEN off-screen left,
     main reclaims the space. */
  body.toggle-sidebar #main,
  body.toggle-sidebar #footer { margin-left: 0; }
  body.toggle-sidebar .sidebar { left: -216px; }
}

@media (max-width: 768px) {
  /* Mobile default: sidebar HIDDEN. body.toggle-sidebar REVEALS it as an
     overlay (full-width strip rather than fixed 211px column). */
  .sidebar { left: -216px; }
  body.toggle-sidebar .sidebar {
    left: 5px;
    width: unset;
    right: 5px;
  }
}

.sidebar-nav         { padding: 0; margin: 0; list-style: none; }
.sidebar-nav li      { padding: 0; margin: 0; list-style: none; }

/* Aphraoh verbatim — dark teal pill background on each section header. */
.sidebar-nav .nav-item {
  margin-bottom: 2px;
  border-radius: 5px;
  background-color: rgba(14, 45, 50, 0.87);
}

/* ── Listing class: slate roof theme ───────────────────────────────────────── */
body.cls-listing {
  --theme-bg:     rgba(55, 65, 75, 0.87);
  --theme-bg-dim: rgba(55, 65, 75, 0.6);
}
body.cls-listing .sidebar-nav .nav-item           { background-color: rgba(55, 65, 75, 0.87); }
body.cls-listing .sidebar-nav .nav-link:hover     { background-color: rgba(55, 65, 75, 0.87); }
body.cls-listing .dropdown-menu.breadcrumb-submenu { background: rgba(55, 65, 75, 0.87); }

/* Soft hairline separator above each expanded sub-list — aphraoh's
 * inset-shadow trick on a dark pill: top border + inner highlight to
 * carve a subtle groove. */
.sidebar-nav li.nav-item ul {
  border-top: 1px solid #101010;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.sidebar-nav .breadcrumb-submenu > li {
  /* Outer padding/margin around the chip group — keeps the chips from
   * touching the dark teal pill edge. The flex layout + gap come from
   * the .chip-row class on the <li> itself (single source of truth in
   * site.css). Only the sidebar-specific outer spacing lives here. */
  margin: 2px 1px 5px 1px;
  padding: 4px 6px;
}

/* Section label — white text on the dark teal pill. */
.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: white;
  transition: 0.3s;
  padding: 10px 15px;
  border-radius: 4px;
  text-decoration: none;
}

.sidebar-nav .nav-link i.section-icon {
  font-size: 16px;
  color: #4154f1;       /* active blue */
  margin-right: 8px;
}

.sidebar-nav .nav-link.collapsed       { color: white; }
.sidebar-nav .nav-link.collapsed i.section-icon { color: #899bbd; }  /* muted blue-grey on dark */

/* Gold variant for the contextual continent-detail section. Visually
 * marks this section as "temporary/contextual" — appears only when a
 * continent or country is filtered, and stands out from the regular
 * sidebar sections so users notice the dynamic addition.
 * Overrides both the open AND collapsed colour because the section
 * is open by default and stays gold regardless of state. */
.sidebar-nav .nav-link i.section-icon--gold,
.sidebar-nav .nav-link.collapsed i.section-icon--gold,
.sidebar-nav .nav-link:hover i.section-icon--gold {
  color: #FFD700;
}

/* Tilt modifier — rotates the icon 23.5° clockwise. Used on the World
 * section's globe icon to match Earth's axial tilt (North Pole leaning
 * right). Reusable on any other icon where a tilt reads as meaningful. */
.sidebar-nav .nav-link i.section-icon--tilt {
  transform: rotate(23.5deg);
}

/* Hover keeps the dark teal pill (aphraoh keeps the same colour on
 * hover — affordance comes from the icon flipping to blue, below).
 * Using !important the way aphraoh does to win against Bootstrap's
 * link hover rules. */
.sidebar-nav .nav-link:hover {
  background-color: rgba(14, 45, 50, 0.87);
  text-decoration: none;
}
.sidebar-nav .nav-link:hover i.section-icon { color: #4154f1; }

.sidebar-nav .nav-link .bi-chevron-down {
  margin-right: 0;
  transition: transform 0.2s ease-in-out;
  font-size: 12px;
}
.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
}

/* Toggle button — aphraoh sized this 30px in the navbar. */
.toggle-sidebar-btn {
  font-size: 24px;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0 4px;
  line-height: 1;
}
.toggle-sidebar-btn:hover { color: #4154f1; }

/* Sidebar chips inherit pill styling from .hashtag-nav. The earlier
 * "white text on dark teal" rule is gone with the dark-teal background. */


/* ─── Page nav rows (category tabs + active chips below top navbar) ────────── */

.page-nav-tabs {
  list-style: none;
  padding: 1px 0;
  margin-bottom: 2px;
  gap: 0;
}
.page-nav-tabs > li + li::before {
  content: " | ";
  color: #ccc;
}
.page-nav-tabs > li + .chip-toggle::before {
  content: " | ";
  color: #ccc;
}
.page-nav-link {
  display: inline;
  padding: 0 0 2px 0;
  text-decoration: none;
  color: var(--bs-nav-link-color, #0d6efd);
}
.page-nav-link.active {
  border-bottom: 3px solid #3c8dbc;
}
/* chip-toggle inside nav tabs — plain text, no chip box */
.page-nav-tabs .chip-toggle {
  background-color: transparent;
  border-radius: 0;
  padding: 0 0 2px 0;
  min-height: unset;
  color: var(--bs-nav-link-color, #0d6efd);
}
.page-nav-tabs .chip-toggle:hover,
.page-nav-tabs .chip-toggle:focus {
  background-color: transparent;
}
.page-nav-chips {
  padding: 4px 0 6px;
}


/* ─── Image aspect-ratio helper ──────────────────────────────────────────── */


/* ─── Card structure (overrides Bootstrap) ───────────────────────────────── */

.card                 { border: none; }
.card-title           { line-height: 18px; }
.card-subtitle        { line-height: 18px; }
.card-text            { color: #5a5a5a; line-height: 18px; }
.card-attribution     { color: #006621; text-transform: lowercase; }

/* Single clickable body block: name + description wrapped in one <a>.
 * Default is muted grey so the card reads as quiet prose; hover flips
 * to aphraoh teal + underline.
 *
 * The :has() rules extend the hover-trigger zone to the card's image
 * link — hovering the carousel slide or gradient-tile lights up the
 * body. We target the SPECIFIC <a> inside .image (the entity link),
 * not .image itself, because .image also contains the carousel arrows
 * and dots which navigate within the carousel, not to the entity, and
 * those must NOT fire the body styling. Since the arrows are siblings
 * of .eav-carousel (children of .image), :has(.eav-carousel-slide:hover)
 * correctly only matches when the slide proper is hovered.
 *
 * Specificity for `.image:has(...) ~ .card-body .card-body-link` is
 * (0,5,0) — well above Bootstrap's `a:hover:not(.active)` at (0,2,0).
 * The direct `.card-body-link:hover` is (0,2,0), defined after line 33
 * so it wins on cascade order. */
.card-body-link {
  text-decoration: none;
  color: #6A6A6A;
}
.image:has(.eav-carousel-slide:hover) ~ .card-body .card-body-link,
.image:has(.gradient-tile:hover)      ~ .card-body .card-body-link,
.card-body-link:hover,
.card-body-link:focus {
  text-decoration: underline;
  color: rgba(14, 45, 50, 0.87);
}
.card-body-link .card-body-name { font-size: 12.5px; font-weight: 600; color: #222222; }
.card-body-link .card-body-desc { font-size: 12px; color: #6A6A6A; }

/* Multi-line ellipsis truncation. aphraoh uses 4 lines for description text
   inside cards. */
.truncate-overflow {
  --max-lines: 4;
  max-height: calc(18px * var(--max-lines));
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: var(--max-lines);
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.truncate-overflow2 {
  --max-lines: 2;
  max-height: calc(18px * var(--max-lines));
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: var(--max-lines);
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}


/* ─── Card columns layout (Pinterest-style multi-column) ─────────────────── */

/* aphraoh uses CSS multi-column layout, not flex/grid. Cards are inline-block
   children of a .card-columns container that sets column-count responsively. */
.card-columns {
  -moz-column-count:    1;  -moz-column-gap:    1.0rem;
  -webkit-column-count: 1;  -webkit-column-gap: 1.0rem;
  column-count:         1;  column-gap:         1.0rem;
}
.card-columns .card {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.70rem;
}

@media screen and (min-width: 481px) { .card-columns { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } }
@media screen and (min-width: 769px) { .card-columns { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } }
@media screen and (min-width: 992px) { .card-columns { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; } }


/* ─── Image aspect-ratio helper ──────────────────────────────────────────── */

/* The .image wrapper holds a relatively-positioned box; its .has-ratio
   children are absolute-positioned to fill it. The `.is-16by9` modifier
   sets the box's aspect ratio via padding-top trick. */
.image {
  display: block;
  position: relative;
  border-radius: 3px;
  /* Clip children (img, carousel, gradient-tile) to the rounded shape.
     Without this, images/slides extend past the rounded corners during
     carousel scroll and momentarily look square at the edges. */
  overflow: hidden;
}
.image img {
  display: block;
  height: auto;
  width: 100%;
}

.image.is-1by1   { padding-top: 100%; }
.image.is-4by3   { padding-top: 75%; }
.image.is-3by2   { padding-top: 66.6666%; }
.image.is-16by9  { height: unset; padding-top: 56.25%; }

/* The image positioning rule. Aphraoh's CSS uses a broad descendant
   selector here, but that breaks when we nest a carousel inside .image.is-16by9
   because every <img> in every slide gets `position: absolute; inset: 0`
   and they all pile on top of each other. We scope to *direct* children
   instead — only the top-level img/.has-ratio inside the .image wrapper
   gets absolute-fill positioning. Slides inside a carousel are sized via
   their own flex rules below. */
.image.is-1by1   > img, .image.is-1by1   > .has-ratio,
.image.is-4by3   > img, .image.is-4by3   > .has-ratio,
.image.is-3by2   > img, .image.is-3by2   > .has-ratio,
.image.is-16by9  > img, .image.is-16by9  > .has-ratio {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}


/* ─── Hashtag chips (.hashtag-nav — square tag styling) ──────────────────── */

/* Soft-square chip — packed tight for density. Used on both cards and
 * sidebar. The leading "#" span (hardcoded in template markup as
 * <span class="text-muted">#</span>) is hidden — the chip shape is the
 * affordance. Radius 3px, line-height: 1 collapses leading so the visible
 * glyph box (cap-top to descender-bottom) equals the line-box. With
 * symmetric vertical padding the text sits truly centred in the chip.
 *
 * Spacing between chips is owned by the PARENT via `gap` (.chip-row
 * inside cards, .sidebar-nav .breadcrumb-submenu > li inside sidebar).
 * The chip itself carries no margin so trailing-chip / line-height
 * artefacts can't break the uniform "bathroom tile" gap. */
.hashtag-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 1;
  min-height: 22px;
  padding: 4px 5px;
  background: #f0f1f2;
  color: #555;
  text-decoration: none;
  border-radius: 3px;
}
button.hashtag-nav {
  border: none;
  cursor: pointer;
  font: inherit;
}
.hashtag-nav:hover,
.hashtag-nav:focus {
  background: #e6e7e8;
  color: #333;
  text-decoration: none;
}

/* Active chip — light-cyan square. The × icon sits flush-right via the
 * tighter right padding. Clicking the chip toggles the filter off. */
.hashtag-nav-active {
  background: #d8eef9;
  color: #0a557d;
  padding: 4px 4px 4px 6px;
  white-space: nowrap;
}
.hashtag-nav-active:hover,
.hashtag-nav-active:focus {
  background: #c8e5f5;
  color: #0a557d;
}
.hashtag-nav.hashtag-nav-price {
  cursor: default;
  background: #e6e7e8;
  color: #333;
}

/* × deselect marker — Bootstrap Icons <i class="bi bi-x-square-fill">.
 * Sized via font-size so the SVG's internal geometry (which centers the
 * × within a rounded square at design-time) renders at scale. Reddens on
 * hover of the active chip to signal "click here to remove this filter". */
.tag-unselect {
  font-size: 14px;
  color: #aaa;
  line-height: 1;
  transition: color 120ms ease;
}
.hashtag-nav-active:hover .tag-unselect,
.hashtag-nav-active:focus .tag-unselect {
  color: #d9534f;
  opacity: 1;
}


/* All breadcrumb-submenu chip contexts — sidebar panels and listing dropdown.
 * Single rule covers both; .breadcrumb-submenu is shared by all ULs. */
.breadcrumb-submenu .hashtag-nav {
  background: transparent;
  color: #fff;
  padding: 0;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  border-radius: 0;
  gap: 0;
}
.breadcrumb-submenu .hashtag-nav .text-muted {
  color: #6c757d !important;
}
.breadcrumb-submenu .hashtag-nav:hover,
.breadcrumb-submenu .hashtag-nav:focus {
  background: transparent;
  color: #fff;
  text-decoration: underline;
}
.breadcrumb-submenu .hashtag-nav.hashtag-nav-active {
  background: #d8eef9;
  color: #0a557d;
  padding: 2px 4px 3px 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
  border-radius: 3px;
}

/* Publisher chip — favicon image followed by the publisher domain text.
 * Used in the list view's Creator column and in the meta row of the
 * grid card / entity detail. The favicon URL comes from the favicons
 * context dict (built per-page in the view from a single batched
 * stmt_uri query); if the publisher has no stored favicon, the template
 * falls back to https://<host>/favicon.ico. <img onerror> hides the
 * broken-image marker when neither URL resolves, leaving just the text. */
.publisher-chip { display: inline-flex; align-items: center; line-height: 1; }
.publisher-icon {
  height: 16px;
  width: 16px;
  margin-right: 5px;
  flex: 0 0 auto;
  display: block;
}

/* Card meta text — "165K views · 1 month ago" rendered as one muted-grey
 * span next to the publisher chip. Plain text, no pill, no link. The filter
 * outputs "N views" / "1 view" with thousands/millions abbreviated K/M/B
 * YouTube-style; the date filter renders relative ("5m ago") until 3
 * months old then falls back to absolute "2025-04-11 ...". */
.card-meta-text {
  font-size: 11px;
  color: #6c757d;
  line-height: 1.3;
}

/* ─── Listing stats row ───────────────────────────────────────────────────
   Only the .stat and .stat-sep classes are kept — listing-stats wrapper
   and price-pill classes are no longer used (price is now a plain chip). */

/* Legacy badge-pill family — kept for the class-cloud bar at top.
   (We now use .hashtag-nav for in-card chips.) */
.badge-pill {
  border-radius: 0.5rem;
  margin-right:  0.20rem !important;
  margin-bottom: 0.05rem !important;
  padding-top:    0.4em;
  padding-bottom: 0.4em;
  font-size: 0.8em;
}
.badge-filter {
  color: #0d6efd;
  font-weight: 600;
  padding-left:  0;
  padding-right: 0.2em;
}
.badge-filter-active {
  color: #0d6efd;
  background-color: #ecf0f5;
  font-weight: 600;
  padding-left: 0.3em;
}


/* ─── Pagination (verbatim aphraoh rule + Bootstrap 5 overrides) ──────────── */

.page-link {
  color: #337ab7;
  border-radius:  0.25rem;
  margin-right:   4px;
  margin-bottom:  2px;
  background-color: #ecf0f5;
  border-color:     #ecf0f5;
}

/* Bootstrap 5 zeros the border-radius on .page-item:not(:first-child) .page-link
   and vice-versa to merge buttons into a continuous pill bar. We undo that so
   each chip stays individually rounded — matches aphraoh's separated-button
   look. */
.pagination .page-item .page-link,
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child  .page-link {
  border-radius: 0.25rem;
}

/* Active page — leave to Bootstrap defaults. Bootstrap renders an .active
   page-item with white text on the primary blue (`#0d6efd`), giving a
   clear visual cue for the current page. We tried to re-style this to
   match aphraoh's "looks like a normal button" approach but the cascade
   kept fighting us; pragmatic call is to use stock Bootstrap. */

/* Disabled (Prev when on page 1, Next when on last page). */
.pagination .page-item.disabled .page-link {
  pointer-events: none;
  cursor: default;
  color: #adb5bd;
  background-color: #f8f9fa;
  border-color:     #f8f9fa;
}

/* Summary line below the pagination ("Showing 1-24 of 31,333 items."). */
.summary {
  margin-top: 0.5rem;
  font-size: 12px;
  color: #6c757d;
}


/* ─── Carousel (our addition — not in aphraoh, kept from prior iteration) ── */

/* Image carousel that lives inside .image.is-16by9. Pure CSS scroll-snap
   with a small bit of vanilla JS in base.html for arrow + dot wiring.
   The carousel itself receives its absolute fill positioning from the
   `.image.is-16by9 .has-ratio` rule above (we add `class="has-ratio"` in
   the template). */
.eav-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.eav-carousel::-webkit-scrollbar { display: none; }
.eav-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  display: block;
}
.eav-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.eav-carousel-prev,
.eav-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 3;
  color: #222;
  padding: 0;
  cursor: pointer;
}
.eav-carousel-prev { left:  0.5rem; right: auto; }
.eav-carousel-next { right: 0.5rem; left:  auto; }
.eav-carousel-prev:disabled,
.eav-carousel-next:disabled { opacity: 0 !important; cursor: default; }
.card:hover .eav-carousel-prev,
.card:hover .eav-carousel-next { opacity: 1; }

/* Subtle bottom gradient — airbnb-style. Ensures the dot indicators stay
   visible against light-coloured photos. Confined to the bottom strip;
   doesn't tint the image as a whole. pointer-events:none so it doesn't
   intercept clicks on the slide beneath. */
.image.is-16by9::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)    0%,
    rgba(0, 0, 0, 0.30) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.eav-carousel-dots {
  position: absolute;
  bottom: 0.55rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  z-index: 2;
  pointer-events: none;
}
.eav-carousel-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  border: 0;
  /* Inactive: semi-transparent white with subtle drop shadow so it stays
     visible even on the brightest images. */
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.eav-carousel-dot.active {
  /* Same size as inactive — airbnb-style — just brighter. No stretching. */
  background: rgba(255, 255, 255, 1);
}


/* ─── Gradient placeholder (used when entity has no images) ──────────────── */

.gradient-tile {
  background-image: var(--tile-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  text-decoration: none;
}
.gradient-tile span {
  color: white;
  font-weight: 600;
  text-align: center;
  word-break: break-word;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  font-size: 0.95rem;
}


/* ─── Header (aphraoh-pattern fixed navbar) ──────────────────────────────
 *
 * The new header is a wholesale port of aphraoh.com's <nav> block. The
 * dark-teal pill colour is set inline on the .container wrapper (matches
 * aphraoh verbatim) so this CSS only carries the structural / utility
 * classes the markup leans on.
 *
 * Sidebar `top: 47px` is calibrated against this navbar's rendered
 * height: input-group-sm + 0.45rem top/bottom margins ≈ 47px. If the
 * navbar's internal padding ever changes, update the sidebar's top
 * offset to match.
 */
.eav-header {
  /* Bootstrap's .fixed-top class on the <nav> handles position/top/right/left
   * and z-index. We only need to ensure no leftover white background or
   * border-bottom from the previous header design overrides aphraoh's
   * dark-teal pill. */
  background: transparent;
  border-bottom: 0;
  padding: 0.1rem 0;
}

/* Global container width override — aphraoh verbatim. Bootstrap's default
 * caps .container at responsive breakpoints (1320px on xxl), which makes
 * the header pill stop short of the viewport edges on wide screens.
 * Aphraoh overrides this globally so every container variant spans 100%.
 * The header relies on this for full-width rendering; rest of the page
 * was already coping via Bootstrap's other layout classes. */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 100%;
}

/* Navbar pill inset — aphraoh verbatim (`nav.navbar .container, ...`).
 * After the max-width: 100% rule above, .container would otherwise be
 * edge-to-edge; this 99% width gives the small left/right gap that
 * makes header and footer look like pills floating inside the viewport
 * rather than spanning bezel-to-bezel. Applies to BOTH header and footer
 * via the same `nav.navbar .container` selector — single rule, two
 * elements styled. The other selectors in this group come straight from
 * aphraoh's site.css; they cover other widgets that share the inset
 * treatment (breadcrumb submenus, summary blocks, pagination). */
nav.navbar .container,
.breadcrumb-submenu,
.summary,
ul.pagination {
  width: 99%;
}

/* ── breadcrumb-submenu list layout — verbatim from aphraoh site.css ───────── */
.breadcrumb-submenu {
  list-style: none;
  padding: 1px 5px;
}
ul.breadcrumb-submenu {
  margin-bottom: 0.6rem;
}
ul.breadcrumb-submenu.nav {
  padding-left: 0;
  padding-right: 0;
}
.breadcrumb-submenu > li {
  display: inline-block;
}
.breadcrumb-submenu > li + li::before {
  padding: 0 5px;
  color: #ccc;
  content: " | ";
}
.breadcrumb-submenu > li + li.noseparators::before {
  padding: 0 3px;
  content: "";
}
.breadcrumb-submenu > .active {
  color: #777;
}
.breadcrumb-submenu > li.active > a,
.breadcrumb-submenu > li > a.active {
  border-bottom: 3px solid #3c8dbc;
}
.breadcrumb-submenu > li > a {
  display: inline;
  padding: 0;
  padding-bottom: 2px;
}

/* Listing property breadcrumb dropdown — strip Bootstrap card styling
   and apply the same dark pill background as the sidebar nav items */
.dropdown-menu.breadcrumb-submenu {
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-width: 200px;
  max-width: 700px;
  padding: 4px 6px;
  background: rgba(14, 45, 50, 0.87);
  color: #fff;
}

/* navbar-expand-xl-ext — aphraoh's custom breakpoint variant. Below 10000px
 * (effectively always at normal viewports) the navbar collapses; above 10000px
 * it expands. In practice this means the navbar is always in collapsed mode
 * unless the viewport is impossibly wide — i.e. the right-side burger is
 * always shown. Verbatim from aphraoh's site.css. */
@media (max-width: 9999.98px) {
  .navbar-expand-xl-ext > .container,
  .navbar-expand-xl-ext > .container-fluid,
  .navbar-expand-xl-ext > .container-sm,
  .navbar-expand-xl-ext > .container-md,
  .navbar-expand-xl-ext > .container-lg,
  .navbar-expand-xl-ext > .container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}

/* Topic-icon row spacing — aphraoh's three helper classes wired to the
 * markup's <a class="outer-container">…<div class="icon-container">. */
.outer-container {
  margin: 0 auto;
}
a.outer-container:hover {
  text-decoration: none;
}
.icon-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
}

/* Aphraoh's navbar separator — verbatim. The .navbar-collapse class
 * draws a 1px dark top border and a 1px inset highlight just inside it,
 * which together produce the faint groove between the brand row and the
 * icon row in the footer (and any expanded dropdown in the header).
 * `.my-divider` is the same look as a standalone element; included here
 * because aphraoh's CSS uses the same selector group. */
.navbar-collapse,
.my-divider {
  border-top: 1px solid #101010;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* main-container — the flex row inside the expanded burger dropdown.
 * Holds the topic-icon tiles + their h2 labels. */
.main-container {
  display: flex;
  flex-wrap: wrap;
  font-family: fa5-proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 0.5rem;
}

/* Burger-dropdown topic labels — small, centred, white. */
.main-container h2 {
  color: white;
  text-align: center;
  margin: 0;
  padding: 0;
  font-weight: 300;
  font-size: 0.7rem;
}

/* Search input-group items — aphraoh's transparent-when-empty trick.
 * The input has a translucent dark background until the user types or
 * focuses it; the trailing buttons (clear × and submit search) match. */
.search-group-item {
  background-color: rgba(0, 0, 0, 0.4);
}
input[type="search"]:focus,
input[type="search"]:focus ~ .search-group-item,
input[type="search"]:not(:placeholder-shown),
input[type="search"]:not(:placeholder-shown) ~ .search-group-item {
  background-color: #fff;
  color: #666;
}
input[type="search"]:placeholder-shown + .search-group-item {
  /* When the search is empty, hide the clear-× button (no value to clear). */
  display: none;
}

/* hidden-xs — aphraoh's "hide at narrow viewports" utility. The
 * less-essential header icons use this; they remain accessible via the
 * burger dropdown. */
@media (max-width: 768px) {
  .hidden-xs {
    display: none !important;
  }
}


/* ─── Class tag-cloud (header bar above grid) ─────────────────────────────── */

.eav-class-cloud {
  padding: 0.5rem 0 0.75rem 0;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 1rem;
  line-height: 1.7;
}


/* ─── List view ───────────────────────────────────────────────────────────── */

.eav-list-table { font-size: 0.9rem; }


/* ─── Misc ────────────────────────────────────────────────────────────────── */

a.uri-link {
  font-family: SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace;
}


/* ─── Pagination active page (the one that finally won) ──────────────────── */
/* Bootstrap 5 styles `.active > .page-link` directly. Targeting the same
   selector with our colours wins because site.css loads after bootstrap.css. */
.active > .page-link {
  color: #ecf0f5;
  background-color: #337ab7;
  border-color: #337ab7;
}

/* ─── Chip row clamping ──────────────────────────────────────────────
   The chip-row is a plain wrapper around the inline .hashtag-nav chips.
   It does NOT change the layout model — chips still use their own
   margin-based wrapping (see .hashtag-nav rules above). The wrapper
   exists only so JS can:
     (a) find the chip list per card via document.querySelectorAll(.chip-row)
     (b) read the per-card line limit from data-max-lines
     (c) toggle a single class to expand/collapse without touching chips. */

.chip-row {
  /* Bathroom-tile layout: chips lay out in a wrapping flex row with a
   * uniform 4px gap in BOTH directions. Used everywhere chips appear
   * (cards, sidebar dropdowns, and the active-filter strip in
   * _list_header.html). Same class, same gap, no per-context variation
   * — the only thing callers may add is a Bootstrap alignment utility
   * (e.g. justify-content-end on the top-strip). */
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.chip-row .chip-hidden {
  display: none;
}

.chip-row.chip-row--expanded .chip-hidden {
  display: inline-flex;   /* matches .hashtag-nav default display */
}

/* The toggle is rendered as <a class="hashtag-nav chip-toggle"> so it
   inherits chip styling from .hashtag-nav. The collapsed state shows a
   three-dots SVG as background-image (same pattern as Firefox's
   chrome://global/skin/icons/more.svg). The SVG is recoloured via the
   embedded fill attribute to match chip text colour. When expanded, JS
   inserts a chevron + "less" label and removes the .chip-toggle class
   styling effect by populating textContent (background-image still set
   but hidden behind text). */

.chip-toggle {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23555'><circle cx='3' cy='8' r='1.5'/><circle cx='8' cy='8' r='1.5'/><circle cx='13' cy='8' r='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  min-width: 22px;
}

.chip-toggle:hover,
.chip-toggle:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'><circle cx='3' cy='8' r='1.5'/><circle cx='8' cy='8' r='1.5'/><circle cx='13' cy='8' r='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}

/* When expanded, the toggle shows text ("less") + a chevron, so suppress
   the dots background. */
.chip-row.chip-row--expanded .chip-toggle {
  background-image: none;
}