/* ============================================================
   BSV Search Spring — Drupal theme stylesheet
   Ported 1:1 from the approved HTML prototype, plus Drupal
   component styling (messages, tabs, pager, exposed filters,
   Form API, breadcrumb, cookie banner) at the bottom.
   Palette: navy / white / blue / restrained magenta;
   crimson #DC143C = logo + primary actions only.
   ============================================================ */

/* Reading serif for long-form body text (loaded from Google Fonts). */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  /* Brand */
  --crimson: #DC143C;
  --crimson-dark: #B01030;

  /* Institutional palette */
  --navy: #14263E;
  --navy-soft: #23374F;
  --blue: #175CB8;
  --blue-dark: #114A96;
  --blue-tint: #EAF2FB;
  --blue-border: #C9DCF2;

  --magenta: #A62360;            /* tips/value cues only */
  --magenta-tint: #FBEDF3;

  --green: #0E6B4F;              /* verification */
  --green-tint: #E4F4EC;

  /* Neutrals */
  --page: #F5F7FA;
  --card: #FFFFFF;
  --border: #DCE3EC;
  --border-strong: #C3CEDC;
  --text: #1E2C3D;
  --text-soft: #52627A;
  --text-faint: #7A889B;

  /* Typography */
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 3px rgba(20, 38, 62, .08);
  --shadow-lift: 0 4px 14px rgba(20, 38, 62, .12);

  --maxw: 1180px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--page);
}
img { max-width: 100%; height: auto; }
/* Never let layout rules resurrect elements hidden via the `hidden`
   attribute (e.g. Drupal contextual-link menus inside styled <ul>s). */
[hidden] { display: none !important; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); text-decoration: underline; }

h1, h2, h3, h4 { color: var(--navy); line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); }
h3 { font-size: 1.15rem; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff; padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ============================================================
   HEADER — navy masthead + clean white nav
   ============================================================ */
.masthead { background: var(--navy); color: #fff; }
.masthead-inner {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; max-width: var(--maxw); margin: 0 auto;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.brand:hover { color: #fff; text-decoration: none; }
/* Logo lockup (red lens + white wordmark) — image contains the site name. */
.brand-img { height: 48px; width: auto; display: block; }
.brand-name { font-size: 1.45rem; font-weight: 700; letter-spacing: .04em; color: #fff; }

.masthead-actions { margin-left: auto; }
.masthead-actions ul:not(.contextual-links) {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.masthead-actions ul:not(.contextual-links) li { margin: 0; }
.masthead-actions a { color: #fff; font-size: .92rem; display: inline-block; }
.masthead-actions a:hover { color: #fff; text-decoration: underline; }
/* Account-menu links promoted to buttons by destination (works with the
   existing menu items — no menu changes needed). */
.masthead-actions a[href*="submit-content"] {
  background: var(--crimson); color: #fff; border-radius: var(--radius-sm);
  padding: 8.5px 16px; font-weight: 700;
}
.masthead-actions a[href*="submit-content"]:hover { background: var(--crimson-dark); text-decoration: none; }
.masthead-actions a[href$="/user/register"] {
  border: 1.5px solid rgba(255,255,255,.75); border-radius: var(--radius-sm);
  padding: 7px 14px; font-weight: 600;
}
.masthead-actions a[href$="/user/register"]:hover { background: rgba(255,255,255,.12); text-decoration: none; }

/* Main nav — white strip, sticky, horizontal scroll on mobile (no JS).
   Offsets itself below the Drupal admin toolbar when present. */
.main-nav {
  background: var(--card);
  border-bottom: 2px solid var(--border);
  position: sticky; top: var(--drupal-displace-offset-top, 0px); z-index: 50;
}
.main-nav ul.main-nav-list, .main-nav ul.menu {
  display: flex; gap: 2px; list-style: none; margin: 0 auto; padding: 0 12px;
  max-width: var(--maxw);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.main-nav-list li, .main-nav ul.menu li { margin: 0; }
.main-nav-list a, .main-nav ul.menu > li > a {
  display: block; padding: 12px 11px; white-space: nowrap;
  color: var(--navy); font-weight: 600; font-size: .9rem;
  border-bottom: 3px solid transparent;
}
.main-nav-list a:hover, .main-nav ul.menu > li > a:hover { color: var(--blue); text-decoration: none; border-bottom-color: var(--blue-border); }
.main-nav-list a[aria-current="page"], .main-nav-list a.is-active,
.main-nav ul.menu > li > a.is-active { color: var(--navy); border-bottom-color: var(--crimson); }
/* Forum listing (/forum): make forum/sub-forum TITLES more prominent (1.3rem).
   Only the title links in the content table are enlarged — descriptions, the
   Topics/Posts counts and the Last-post text keep their size. Added 2026-07-07. */
#block-bsvsearch-spring-content table td:first-child a[href^="/forum/"] {
  font-size: 1.3rem;
}
#block-bsvsearch-spring-content table td:not(:first-child) a[href^="/forum/"] {
  color: var(--crimson);
}

/* ============================================================
   PAGE HEAD / PLAIN-LANGUAGE INTRO
   ============================================================ */
.page-head { padding: 30px 0 6px; }
.page-head h1 { margin-bottom: .25em; }
.lede { font-size: 1.06rem; color: var(--text-soft); max-width: 62rem; margin: 0 0 10px; }

.explainer {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--blue-tint); border: 1px solid var(--blue-border);
  border-radius: var(--radius); padding: 12px 16px; margin: 14px 0 4px;
  font-size: .95rem; color: var(--navy-soft);
}
.explainer .i {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue); color: #fff; font-weight: 700; font-size: .85rem;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}

/* ============================================================
   LAYOUT — content + sidebar
   ============================================================ */
.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 26px; padding: 18px 0 40px; align-items: start;
}
.layout--full { grid-template-columns: 1fr; }
.layout-content { min-width: 0; }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}

.results-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; font-size: .93rem; color: var(--text-soft);
}
.results-bar strong { color: var(--navy); }

/* ============================================================
   LISTING CARDS — consistent horizontal rows
   ============================================================ */
.cards { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }

.card {
  display: grid; grid-template-columns: 150px minmax(0,1fr) 200px;
  gap: 18px; align-items: stretch;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; transition: box-shadow .15s ease, border-color .15s ease;
}
.card:hover { box-shadow: var(--shadow-lift); border-color: var(--border-strong); }

.card-media {
  width: 150px; height: 116px; border-radius: var(--radius-sm);
  background: var(--blue-tint); border: 1px solid var(--blue-border);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: var(--blue); font-weight: 700; font-size: .95rem; text-align: center;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media .glyph { font-size: 2rem; line-height: 1; display: block; }
.card-media--audio { background: #EEF0FC; border-color: #D4D9F5; color: #4A45A8; }
.card-media--text  { background: #F6F2E9; border-color: #E7DCC4; color: #6B4A14; }

.card-body { min-width: 0; }
.card-title { font-size: 1.18rem; margin: 0 0 4px; }
.card-title a { color: var(--navy); }
.card-title a:hover { color: var(--blue); }
.card-desc {
  color: var(--text-soft); font-size: .95rem; margin: 4px 0 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }

/* Chips & badges */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .8rem; font-weight: 600; line-height: 1;
  padding: 5px 10px; border-radius: 999px;
  background: #EEF1F6; color: var(--navy-soft); border: 1px solid var(--border);
}
.chip--type { background: var(--blue-tint); color: var(--blue-dark); border-color: var(--blue-border); }
.chip--verified { background: var(--green-tint); color: var(--green); border-color: #BFE3D0; }
.chip--tips { background: var(--magenta-tint); color: var(--magenta); border-color: #F0CBDD; }
.chip--cleared { background: var(--green-tint); color: var(--green); border-color: #BFE3D0; }
.chip a { color: inherit; }

.card-aside {
  display: flex; flex-direction: column; gap: 8px; justify-content: center;
  border-left: 1px solid var(--border); padding-left: 18px;
  font-size: .85rem; color: var(--text-soft);
}
.card-aside .addr { font-family: var(--mono); font-size: .8rem; color: var(--navy-soft); word-break: break-all; }
.card-aside .hint { font-size: .78rem; color: var(--text-faint); }

.btn {
  display: inline-block; text-align: center; font-weight: 700; font-size: .95rem;
  border-radius: var(--radius-sm); padding: 9px 18px; border: none; cursor: pointer;
  background: var(--crimson); color: #fff;
}
.btn:hover { background: var(--crimson-dark); color: #fff; text-decoration: none; }
.btn--outline { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); }
.btn--outline:hover { background: var(--blue-tint); color: var(--blue-dark); }
.btn--tip { background: var(--magenta); }
.btn--tip:hover { background: #8C1C50; }
.btn--sm { padding: 6px 12px; font-size: .85rem; }

@media (max-width: 760px) {
  .card { grid-template-columns: 96px minmax(0,1fr); gap: 12px; padding: 12px; }
  .card-media { width: 96px; height: 84px; }
  .card-aside {
    grid-column: 1 / -1; border-left: none; padding-left: 0;
    border-top: 1px solid var(--border); padding-top: 10px;
    flex-direction: row; align-items: center; flex-wrap: wrap;
  }
}

/* ============================================================
   DETAIL PAGE / PANELS
   ============================================================ */
.theater {
  background: var(--navy); border-radius: var(--radius); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 280px; color: #fff; box-shadow: var(--shadow);
}
.theater img { width: 100%; height: auto; display: block; }

.panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; margin-bottom: 16px;
}
.panel h2 {
  font-size: .85rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint); margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.kv { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 8px 14px; font-size: .93rem; }
.kv dt { color: var(--text-soft); font-weight: 600; }
.kv dd { margin: 0; min-width: 0; }
.addr-line {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .82rem; word-break: break-all;
  background: #F2F5F9; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 10px;
}
.copy-btn {
  flex: none; font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 5px;
  background: #fff; color: var(--navy-soft); padding: 3px 8px;
  display: none;
}
.js .copy-btn { display: inline-block; }
.copy-btn:hover { border-color: var(--blue); color: var(--blue); }

.trust-strip { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 2px; }

/* ============================================================
   FOOTER — navy
   ============================================================ */
.site-footer { background: var(--navy); color: #C6D2E2; margin-top: 30px; font-size: .92rem; }
.site-footer-columns {
  padding-top: 34px; padding-bottom: 26px;
  column-count: 4; column-gap: 30px;   /* 4 balanced columns; the menu links flow across them */
}
.site-footer-columns > * { margin: 0; }  /* no extra gap between the merged link blocks */
@media (max-width: 900px) { .site-footer-columns { column-count: 2; } }
@media (max-width: 560px) { .site-footer-columns { column-count: 1; } }
.site-footer h2, .site-footer h3 {
  color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 7px; break-inside: avoid; }
.site-footer a { color: #C6D2E2; }
.site-footer a:hover { color: #fff; }

/* ---------- "Cool & fresh (tech)" colour accents — teal secondary ----------
   Livens up the flat navy/crimson scheme: a cyan-teal secondary accent, a colourful
   gradient line under the masthead, fresh teal top-edges on cards + filter panels, and a
   slightly cooler page tint. Navy + crimson stay as the brand frame. */
:root { --teal: #12B3C7; --teal-dark: #0E93A3; --teal-tint: #E4F7FA; }
body { background: #EDF2F9; }
.masthead {
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--teal), var(--blue) 55%, var(--crimson)) 1;
}
.mqz-index-row, article.js-comment, .views-exposed-form { border-top: 3px solid var(--teal) !important; }
.main-nav a:hover, .mqz-index-col > .views-field-title a:hover { color: var(--teal-dark); }

/* ---------- Serif reading font for long-form body text (Source Serif 4) ----------
   Article / forum-post / listing-description bodies + comment bodies read in a serif for a
   warmer, editorial feel — the classic serif-body + sans-headings pairing. Everything else
   (headings, labels, nav, buttons, prices, the footer tagline) stays in the sans --font. */
:root { --serif: "Source Serif 4", Georgia, "Times New Roman", serif; }
.field--name-body, .field--name-comment-body {
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.7;
}
.field--name-body h1, .field--name-body h2, .field--name-body h3,
.field--name-body h4, .field--name-body h5, .field--name-body h6 { font-family: var(--font); }
.footer-bottom .field--name-body { font-family: var(--font); font-size: .9rem; line-height: normal; }

/* ---------- Heading colour hierarchy (Idea 1: tonal navy) ----------
   H1 stays the deepest navy (from the base rule); H2 and H3 step to progressively lighter
   blues so heading levels read as a clear hierarchy. Cool and on-brand - no new hues, and
   footer (white) / .panel (faint) headings keep their own colours by higher specificity. */
h2 { color: #274B79; }
h3 { color: #3D6396; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  max-width: var(--maxw); margin: 0 auto;
  padding: 18px 20px; text-align: center; font-size: .9rem; color: #8FA1B8;
}

/* ============================================================
   MOBILE SPACING
   ============================================================ */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding: 0 14px; }
  .masthead-inner { padding: 10px 14px; gap: 10px; }
  .brand-img { height: 36px; }
  .page-head { padding-top: 20px; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 8px; }
}

/* ============================================================
   ============================================================
   DRUPAL COMPONENTS (everything below maps core/module markup
   onto the design system above)
   ============================================================
   ============================================================ */

/* ---------- Page title block ---------- */
.page-title, .block-page-title-block h1 { margin-top: 26px; }

/* ---------- Status messages ---------- */
.messages {
  border-radius: var(--radius); padding: 14px 18px; margin: 18px 0;
  border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow);
  font-size: .95rem;
}
.messages--status  { border-color: #BFE3D0; background: var(--green-tint); color: var(--green); }
.messages--warning { border-color: #EAD9A8; background: #FBF4DE; color: #6B5310; }
.messages--error   { border-color: #F0C4CE; background: #FCEDF0; color: #94203C; }
.messages a { font-weight: 700; color: inherit; text-decoration: underline; }
.messages__list { margin: 0; padding-left: 1.2em; }

/* ---------- Local tasks (View / Edit tabs) ---------- */
ul.tabs, ul.primary, nav.tabs ul {
  display: flex; flex-wrap: wrap; gap: 4px; list-style: none;
  margin: 18px 0 0; padding: 0; border-bottom: 2px solid var(--border);
}
ul.tabs a, ul.primary a {
  display: block; padding: 9px 16px; font-size: .9rem; font-weight: 600;
  color: var(--text-soft); border: 1px solid transparent; border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
ul.tabs a:hover, ul.primary a:hover { color: var(--blue); text-decoration: none; background: var(--blue-tint); }
ul.tabs a.is-active, ul.primary a.is-active {
  color: var(--navy); background: var(--card); border-color: var(--border);
  margin-bottom: -2px; border-bottom: 2px solid var(--card);
}
/* a11y helper for the tabs' hidden heading (standalone theme, no base) */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
/* Inline action-link lists (comment Reply/Edit/Delete, node links, Add new comment).
   Standalone theme (base:false) has no base CSS for .links.inline, so without this
   they render as a bulleted vertical list. */
ul.links, ul.links.inline {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center;
}
ul.links li, ul.links.inline li { margin: 0; }
ul.links a { color: var(--blue); font-size: .9rem; }
ul.links a:hover { color: var(--blue-dark); text-decoration: none; }

/* Action-link lists (e.g. "Add new Forum topic" on /forum): standalone theme renders
   ul.action-links as a bulleted list (stray bullet before the button); strip bullets. */
ul.action-links { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
ul.action-links li { margin: 0; list-style: none; }

/* "Submitted by NAME on DATE" bylines (forum topics + comments) -> small muted metadata. */
article > footer { font-size: .85rem; color: var(--text-soft); }
article > footer a { color: var(--blue); }

/* Comments (forum topics + any commented node) -> grouped cards. */
article.js-comment {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 20px; margin: 0 0 16px;
}
/* Comment action links (Delete/Edit/Reply) + "Add new comment" -> small outlined buttons. */
.js-comment .links.inline a,
.forum-page .links.inline a {
  display: inline-block; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 3px 12px; background: var(--card); color: var(--blue); font-size: .82rem; text-decoration: none;
}
.js-comment .links.inline a:hover,
.forum-page .links.inline a:hover { background: var(--blue-tint); border-color: var(--blue); }

/* Collapsible boxes (Comments / Post Details / Questions) at the end of a node: 2em above. */
.layout__region > details.js-form-wrapper { margin-top: 2em; }

/* Checkbox / radio option labels beside the control (were dropping to the line below). */
.form-item.form-type-checkbox label.option,
.form-item.form-type-radio label.option { display: inline; margin-left: 6px; font-weight: 400; }

/* ---------- Base-CSS shims: standalone (base:false) theme lacks core's base ---------- */
/* Reveal visually-hidden focusable elements (e.g. the skip-to-content link) on focus. */
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  position: static !important; width: auto; height: auto;
  overflow: visible; clip: auto; clip-path: none; white-space: normal; margin: 0;
}
.hidden { display: none; }
.invisible { visibility: hidden; }
/* Core search renders a classless <ol> for results → decimal numbers + 40px indent.
   Scope strictly to the search page (#search-form) and the results list (li>h3). */
body:has(#search-form) ol:has(> li > h3) { list-style: none; margin: 8px 0 0; padding: 0; }
body:has(#search-form) ol:has(> li > h3) > li { margin: 0 0 22px; }

/* ---------- Top-tipped "Leaderboard" view ----------
   Make each entry's title a prominent header and separate entries clearly. */
.row-tipped-content { margin-bottom: 2em; padding-bottom: 1.5em; border-bottom: 1px solid var(--border); }
.row-tipped-content:last-child { border-bottom: none; margin-bottom: 0; }
.row-tipped-content .views-field-title { font-size: 1.3rem; font-weight: 700; line-height: 1.25; color: var(--navy); margin: 0 0 12px; }
/* Blog / KB post-title link colour: dark teal, crimson on hover. Higher
   specificity than the shared ".views-field a" (blue-dark) rule so it wins.
   Added 2026-07-07. */
.mqz-index-col:not(:has(> .views-field-field-main-image)) > .views-field-title a {
  color: #0a6c79;
}
.mqz-index-col:not(:has(> .views-field-field-main-image)) > .views-field-title a:hover {
  color: var(--crimson);
}
.row-tipped-content .views-field-title a { color: var(--navy); font-weight: 700; }
.row-tipped-content .views-field-title a:hover { color: var(--blue); }

/* ---------- Field-group horizontal tabs (node detail sidebar) ----------
   Keep the folder-style tabs on one row (the 300px sidebar was too narrow for the
   big default padding/font), and make field labels visibly distinct from their values.
   The fields render as classless <div>label</div><div>value</div> pairs, so the label
   is the first div of each pair inside a pane. */
.horizontal-tabs-list { white-space: nowrap; }
.horizontal-tabs-list a { padding: 9px 10px !important; font-size: .8rem !important; }
.horizontal-tabs-pane > div { margin-bottom: 10px; }
.horizontal-tabs-pane > div > div:first-child {
  font-size: .72rem !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft) !important; margin-top: 4px;
}

/* ---------- Listing "call to action" link → crimson button (matches masthead Submit).
   Every listing view (properties, vehicles, publications…) ends with a
   .call-to-action wrapper holding an "+ Include your … here" link. ---------- */
.call-to-action { margin-top: 6px; }
.call-to-action a {
  display: inline-block; background: var(--crimson); color: #fff !important;
  border-radius: var(--radius-sm); padding: 8.5px 16px; font-weight: 700; text-decoration: none;
}
.call-to-action a:hover { background: var(--crimson-dark); color: #fff !important; text-decoration: none; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: .85rem; color: var(--text-faint); padding: 14px 0 0; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.breadcrumb li:not(:first-child)::before { content: "›"; margin: 0 6px; color: var(--text-faint); }
.breadcrumb a { color: var(--text-soft); }

/* ---------- Pager (core markup: nav.pager > ul.pager__items) ---------- */
.pager__items {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  list-style: none; margin: 26px 0 8px; padding: 0;
}
.pager__item a, .pager__item.is-active .pager__link, .pager__item span {
  display: inline-block; min-width: 40px; text-align: center; padding: 8px 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--navy); font-weight: 600; font-size: .92rem;
}
.pager__item a:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.pager__item.is-active a,
.pager__item.is-active span {
  background: var(--navy); border-color: var(--navy); color: #fff;
}

/* ---------- Form API ---------- */
.form-item { margin: 0 0 16px; }
.form-item label, .fieldset-legend {
  display: block; font-size: .85rem; font-weight: 700;
  color: var(--navy-soft); margin-bottom: 5px;
}
.form-item .description, .form-item__description {
  font-size: .78rem; color: var(--text-faint); margin-top: 4px;
}
input.form-text, input.form-email, input.form-tel, input.form-url,
input.form-search, input.form-number, input.form-date, input.form-file,
input[type="password"].form-text, select.form-select, textarea.form-textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--text);
  background: #fff; border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 9px 12px;
}
input.form-text:focus, input.form-email:focus, input.form-search:focus,
select.form-select:focus, textarea.form-textarea:focus {
  outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue);
}
input.form-checkbox, input.form-radio { accent-color: var(--blue); width: 1.05em; height: 1.05em; }

/* Buttons (Form API + link buttons) */
input.form-submit, button.form-submit, .button {
  display: inline-block; text-align: center; font-weight: 700; font-size: .95rem;
  border-radius: var(--radius-sm); padding: 9px 18px; cursor: pointer;
  background: var(--crimson); color: #fff; border: none;
}
input.form-submit:hover, button.form-submit:hover, .button:hover {
  background: var(--crimson-dark); color: #fff; text-decoration: none;
}
.button--danger { background: var(--magenta); }
.button--small { padding: 6px 12px; font-size: .85rem; }
/* Secondary buttons (e.g. Preview, Reset) */
.button:not(.button--primary):not(.form-submit):not(.button--danger)[value="Preview"],
input.form-submit[value="Reset"], input.form-submit[id*="reset"] {
  background: transparent; color: var(--blue); border: 1.5px solid var(--blue);
}

/* Fieldsets & details */
fieldset, details.form-wrapper {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); padding: 14px 18px; margin: 0 0 16px;
}
details.form-wrapper > summary { font-weight: 700; color: var(--navy); cursor: pointer; }

/* Account forms as centred cards */
.user-login-form, .user-pass, .user-register-form {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 28px; max-width: 520px; margin: 26px 0;
}

/* ---------- Views: exposed filters as a polished panel ---------- */
.views-exposed-form {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px 18px;
}
.views-exposed-form .form-item { margin-bottom: 14px; }
.views-exposed-form .form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.views-exposed-form .form-actions .form-submit { flex: 1; }
/* Sidebar block titles above filters */
.layout-sidebar h2.block-title, .layout-sidebar .block > h2 {
  font-size: 1rem; margin: 0 0 10px;
}

/* Views rows fall back to card look even without custom row templates */
.layout-content .views-row {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 14px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.layout-content .views-row:hover { box-shadow: var(--shadow-lift); border-color: var(--border-strong); }

/* ---------- Nodes / fields (default templates) ----------
   With field.html.twig now emitting real .field__label / .field__item classes, this one
   set of rules styles EVERY field label site-wide (replaces the old per-section hacks). */
.field__label { font-weight: 700; color: var(--navy-soft); font-size: .9rem; }
.field--label-above { margin-bottom: 11px; }
.field--label-above > .field__label { margin: 0 0 2px; }
.field--label-inline .field__label { display: inline; margin-right: 6px; }
.node__submitted { font-size: .85rem; color: var(--text-faint); }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; background: var(--card); font-size: .95rem; }
th, td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; }
th { background: #EEF1F6; color: var(--navy); font-size: .85rem; }
tr:hover td { background: #FAFBFD; }

/* Listing view description (the intro line under the page title, e.g. "All types of
   vehicles you can buy in BSVs"): tighten the gap above it (closer to the title) and
   add clear breathing room below it before the first card. */
.views-element-container header {
  margin-top: -6px;
  margin-bottom: 22px;
}

/* ---------- Listing views (directory, items, vehicles, publications,
   properties…) — the site's views render rows as .mqz-index-row/.mqz-index-col
   with .views-field children; turn them into horizontal cards. ---------- */
.mqz-index-row {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 14px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.mqz-index-row:hover { box-shadow: var(--shadow-lift); border-color: var(--border-strong); }
.mqz-index-col {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: 6px 18px; align-items: start;
}
.mqz-index-col > .views-field-field-main-image { grid-row: 1 / span 6; }
.mqz-index-col > .views-field-field-main-image img {
  width: 150px; height: 116px; object-fit: contain;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.mqz-index-col > .views-field-title { font-size: 1.18rem; font-weight: 700; }
.mqz-index-col > .views-field-title a { color: var(--navy); }
.mqz-index-col > .views-field-title a:hover { color: var(--blue); }
.mqz-index-col > .views-field-body {
  color: var(--text-soft); font-size: .95rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Secondary field lines (country, type, price, etc.) as quiet meta rows */
.mqz-index-col > .views-field { font-size: .9rem; color: var(--text-soft); }
.mqz-index-col > .views-field a { color: var(--blue-dark); }

/* Imageless listing rows (Blog / Knowledge Base): shared grid squashed the title into the
   narrow 150px image column. With no image, stack full-width: title, then date/source as a
   small metadata sub-row, then teaser. :not(:has()) keeps image rows as cards. */
.mqz-index-col:not(:has(> .views-field-field-main-image)) { display: block; }
.mqz-index-col:not(:has(> .views-field-field-main-image)) > .views-field-created {
  font-size: .85rem; color: var(--text-soft); margin: 2px 0 8px;
}

/* Enlarge ONLY the post title on imageless listings (Blog / Knowledge Base).
   Higher specificity than the shared ".views-field { .9rem }" meta rule,
   so it wins without touching the date/source or teaser text. Added 2026-07-07. */
.mqz-index-col:not(:has(> .views-field-field-main-image)) > .views-field-title,
.mqz-index-col:not(:has(> .views-field-field-main-image)) > .views-field-title a {
  font-size: 1.3rem;
}
@media (max-width: 760px) {
  .mqz-index-col { grid-template-columns: 96px minmax(0, 1fr); }
  .mqz-index-col > .views-field-field-main-image img { width: 96px; height: 84px; }
}

/* ---------- Harmonise bsvsearch_ordinals module output ---------- */
.ordinal-field .field__label { font-size: .85rem; }
/* Ordinal node "Inscribed Data" fields render as classless <div>label</div><div>value</div>
   pairs inside .ordinal-field. Make the label visibly distinct from its value. */
.ordinal-field { margin-bottom: 11px; }
.ordinal-field > div:first-child {
  font-size: .72rem !important; font-weight: 700 !important; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-soft) !important; margin-bottom: 2px;
}
/* Cards produced by the ordinals directory keep their module layout but
   pick up Spring borders/radius. */
[class*="ordinal-card"], .ordinal-directory-card {
  border-radius: var(--radius) !important;
  border-color: var(--border) !important;
}
/* NOTE: no box-shadow here — the broad [class*="ordinal-card"] selector matches the
   sub-elements (thumb, body, title, meta, badges) too, so a shadow here painted a stray
   shadow behind each one. The card's shadow comes from its .mqz-index-row container. */
/* The ordinals view packs the whole .ordinal-card into ONE field, so the
   generic 2-col .mqz-index-col grid crushes it into the 150px image column
   (leaving the 2nd column empty). For rows that contain an ordinal card,
   drop the grid and let the module's own compact horizontal card fill the row. */
.mqz-index-col:has(.ordinal-card) { display: block; }
.mqz-index-col:has(.ordinal-card) > .views-field { width: 100%; }
.mqz-index-col:has(.ordinal-card) .ordinal-card { width: 100%; }
/* The title link also carries the .ordinal-card-thumb class (which is 180px wide for the
   image thumb), so long titles were boxed to 180px and wrapped early. Let the title fill
   the card body instead. */
.ordinal-card-body .ordinal-card-title { width: auto; max-width: 100%; }
/* Non-image ordinal placeholders — richer gradient backgrounds per media type
   (were flat light colours). Image cards use a real <img>, so they're unaffected. */
.ordinal-thumb-badge {
  color: #fff !important; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.4);
  background: radial-gradient(120% 100% at 20% 0%, rgba(255,255,255,.25), transparent 60%),
              linear-gradient(135deg, #3a4d70, #1e2c3d) !important;
}
.ordinal-thumb-badge--audio {
  background: radial-gradient(120% 100% at 20% 0%, rgba(255,255,255,.28), transparent 60%),
              linear-gradient(135deg, #2f7ff0, #7a34c9) !important;
}
.ordinal-thumb-badge--text, .ordinal-thumb-badge--document, .ordinal-thumb-badge--pdf {
  background: radial-gradient(120% 100% at 20% 0%, rgba(255,255,255,.28), transparent 60%),
              linear-gradient(135deg, #e2a24d, #b25e22) !important;
}
.ordinal-thumb-badge--video {
  background: radial-gradient(120% 100% at 20% 0%, rgba(255,255,255,.3), transparent 60%),
              linear-gradient(135deg, #ee5a6f, #b01d38) !important;
}

/* ---------- Detail-page layout: single full-width column ----------
   Property / vehicle / item / publication (etc.) node displays place their tabbed detail
   field-group in the narrow "first" side region of the threecol-25-50-25 layout, cramping
   the tabs onto two rows. Where that happens, put the content regions in the wide column
   and keep only the meta region (third) as the narrow sidebar, so the tabs stretch across
   one row like the Ordinal page. Scoped with :has() so the Ordinal display is untouched. */
.layout--threecol-25-50-25 { grid-template-columns: 1fr; }
.layout--threecol-25-50-25 > .layout__region { grid-column: 1; }

/* Rent/lease pricing: pull "per month" up close under the price. */
.field--name-field-pay-frequency { margin-top: -16px; color: var(--text-soft); }

/* ---------- Web3site node: field labels + pointer table ----------
   Node fields render as classless <div>label</div><div>value</div> pairs inside a
   Layout Builder top region. Make the labels prominent and space the field groups. */
.layout__region--top > div { margin-bottom: 1.25em; }
.layout__region--top > div > div:first-child {
  font-weight: 700; color: var(--navy); font-size: 1.05rem; margin-bottom: 5px;
}
/* Pointer table - Path | FULL TXID (full value shown for auditing). */
.web3-pointer-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.web3-pointer-table th {
  text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-soft); border-bottom: 2px solid var(--border); padding: 6px 14px; white-space: nowrap;
}
.web3-pointer-table td { padding: 8px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.web3-pointer-table .web3-pointer-path { white-space: nowrap; }
.web3-pointer-table .web3-pointer-txid code {
  font-family: var(--mono); font-size: .82rem; color: var(--text);
  word-break: break-all; background: #EEF2F8; padding: 2px 6px; border-radius: 4px;
}
@media (max-width: 700px) { .web3-pointer-table .web3-pointer-path { white-space: normal; } }

/* ---------- Node preview bar ("Back to content editing" + View mode) ----------
   Core sets .node-preview-container to position:fixed, so on this standalone theme it
   floated over the masthead/logo (and overlapped it when narrow). Put it back in normal
   flow as a light bar ABOVE the masthead, and turn the backlink into a crimson button
   like Submit. flex-wrap so the button + view-mode select wrap instead of overlapping. */
.node-preview-container {
  position: static !important;
  background: var(--page); border-bottom: 2px solid var(--border); padding: 10px 16px;
}
.node-preview-container .node-preview-form-select {
  display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; margin: 0;
}
.node-preview-container .node-preview-backlink {
  display: inline-block; order: -1;
  background: var(--crimson); color: #fff !important;
  border-radius: var(--radius-sm); padding: 8.5px 16px; font-weight: 700; text-decoration: none;
}
.node-preview-container .node-preview-backlink:hover { background: var(--crimson-dark); color: #fff !important; }

/* ---------- EU cookie banner: small NAVY corner card (distinct notification) ---------- */
.eu-cookie-compliance-banner, #sliding-popup {
  background: transparent !important; box-shadow: none !important;
}
#sliding-popup .popup-content {
  max-width: 400px; margin: 0 0 16px 16px; padding: 16px 18px;
  background: var(--navy) !important; border: 1px solid #0D1A2C;
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
  font-size: .85rem;
}
#sliding-popup .popup-content,
#sliding-popup #popup-text,
#sliding-popup .eu-cookie-compliance-message,
#sliding-popup .eu-cookie-compliance-message * { color: #fff !important; }
#sliding-popup .eu-cookie-compliance-message { font-weight: 400; }
#sliding-popup .eu-cookie-compliance-message h2 { font-size: .98rem; margin: 0 0 4px; }
#sliding-popup .eu-cookie-compliance-message a { color: var(--blue-tint) !important; text-decoration: underline; }
#sliding-popup #popup-buttons,
#sliding-popup .eu-cookie-compliance-buttons { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
#sliding-popup .agree-button, #sliding-popup .decline-button, #sliding-popup .find-more-button {
  font-size: .85rem; padding: 7px 14px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent;
}
#sliding-popup .agree-button { background: var(--crimson) !important; color: #fff !important; border-color: var(--crimson) !important; font-weight: 600; }
#sliding-popup .agree-button:hover { background: var(--crimson-dark) !important; }
#sliding-popup .decline-button { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.6) !important; }
#sliding-popup .decline-button:hover { background: rgba(255,255,255,.12) !important; }
#sliding-popup .find-more-button { background: transparent !important; color: var(--blue-tint) !important; text-decoration: underline; padding-left: 0; }

/* ---------- Contextual links & admin affordances stay usable ---------- */
.contextual .trigger { border-radius: var(--radius-sm); }