/**
 * arthropoda-custom.css
 * Custom stylesheet for arthropoda.net (Drupal / Bootstrap 5 subtheme)
 *
 * Design directives: Clear · Elegant · Readable · Mobile-ready · Academic confidence
 * Palette: Deep slate navy + warm ivory + amber accent + botanical green
 * Typography: Playfair Display (headings) + Source Serif 4 (body) — scholarly pair
 */

/* ─────────────────────────────────────────────
   0. GOOGLE FONTS IMPORT
   ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400&family=JetBrains+Mono:wght@400;500&display=swap');


/* ─────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────── */
:root {
  /* Core palette */
  --color-navy:        #1a2b3c;
  --color-navy-deep:   #0f1b28;
  --color-navy-mid:    #2c4a63;
  --color-ivory:       #f8f5ef;
  --color-ivory-dark:  #ede9e1;
  --color-amber:       #b87333;   /* copper/amber — scientific instrument feel */
  --color-amber-light: #d4956a;
  --color-green:       #3d6b52;   /* botanical */
  --color-green-light: #5a8f70;
  --color-text:        #1e2d3d;
  --color-text-muted:  #5a6b7a;
  --color-border:      #d6cfc4;
  --color-white:       #ffffff;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Source Serif 4', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Sizing & spacing */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --shadow-card: 0 2px 12px rgba(26, 43, 60, 0.08), 0 1px 3px rgba(26, 43, 60, 0.05);
  --shadow-hover: 0 6px 24px rgba(26, 43, 60, 0.14), 0 2px 6px rgba(26, 43, 60, 0.08);
  --transition:  0.22s ease;

  /* Layout */
  --content-max:  1120px;
  --nav-height:   68px;
}


/* ─────────────────────────────────────────────
   2. GLOBAL RESET & BASE
   ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;        /* 17px — optimal for long reading */
  line-height: 1.72;
  color: var(--color-text);
  background-color: var(--color-ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-navy-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-amber);
  text-decoration-color: var(--color-amber);
}

::selection {
  background: var(--color-amber);
  color: var(--color-white);
}

/* Vertical line pattern for navbar depth */
/* Dot grid pattern for navbar depth */
.navbar,
header .navbar {
  background-image: 
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.06) 1px,
      transparent 1px
    );
  background-size: 20px 20px;
  background-position: 0 0;
  background-color: var(--color-navy-deep);
}

.orcid {
	height:25px;
	width:auto;
}

.border-under {
	border: 5px solid var(--color-border);
}

.leyenda-fotos a {
	font-size: 11px;
	font-family: Helvetica, Arial,"Sans Serif";
	text-decoration: none;
}

    .av-order-circle {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 5px solid var(--color-border);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color-ivory-dark);
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .av-order-circle img { width: 100%; height: 100%; object-fit: cover; }
    
    .av-order-circle {
  margin: 0 auto;
}

.av-sppcount-circle {
	width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 5px solid var(--color-border);
  overflow: hidden;
  background: var(--color-ivory-dark);
  transition: border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.av-order-count {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: #3a3a3a;
}

.av-order-spp {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: lowercase;
  color: #7a7a7a;
  margin-top: 2px;
}

/* ─────────────────────────────────────────────
   3. TYPOGRAPHY SCALE
   ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-navy);
  margin-top: 0;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.85rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.4rem,  3vw, 2.0rem);  }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
h4 { font-size: 1.15rem; font-weight: 600; }
h5 { font-size: 1.0rem;  font-weight: 600; }

p {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

em, i {
  font-style: italic;
  /* Italics for taxon names — let them breathe */
}

strong, b {
  font-weight: 600;
  color: var(--color-navy);
}

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

blockquote {
  border-left: 3px solid var(--color-amber);
  margin: 1.5rem 0;
  padding: 0.5rem 0 0.5rem 1.25rem;
  color: var(--color-text-muted);
  font-style: italic;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2.5rem 0;
}


/* ─────────────────────────────────────────────
   4. LAYOUT & CONTAINERS
   ───────────────────────────────────────────── */
.container,
.container-fluid,
.container-lg,
.container-xl {
  max-width: var(--content-max);
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

main,
.layout-container,
#main-content {
  min-height: calc(100vh - var(--nav-height) - 120px);
  padding-block: 2.5rem;
}

.region-content {
  max-width: var(--content-max);
  margin-inline: auto;
}


/* ─────────────────────────────────────────────
   5. NAVIGATION
   ───────────────────────────────────────────── */
.navbar,
header .navbar {
  background-color: var(--color-navy-deep) !important;
  border-bottom: 3px solid var(--color-amber);
  padding-block: 0;
  min-height: var(--nav-height);
  box-shadow: 0 2px 16px rgba(15, 27, 40, 0.35);
}

.navbar-brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-ivory) !important;
  letter-spacing: 0.01em;
  padding-block: 0.75rem;
}

.navbar-brand img,
.navbar-brand svg {
  height: 40px;
  width: auto;
  margin-right: 0.6rem;
  filter: brightness(1.1);
}

.navbar-nav .nav-link {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(248, 245, 239, 0.82) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  text-decoration: none;
  transition: color var(--transition);
  position: relative;
}

.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.9rem;
  right: 0.9rem;
  height: 2px;
  background: var(--color-amber);
  transform: scaleX(0);
  transition: transform var(--transition);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--color-ivory) !important;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  transform: scaleX(1);
}

.navbar-toggler {
  border-color: rgba(248, 245, 239, 0.4);
  padding: 0.35rem 0.6rem;
}

.navbar-toggler-icon {
  filter: invert(1);
}

/* User account menu */
.navbar .user-account-menu .nav-link {
  font-size: 0.82rem;
  opacity: 0.7;
}


/* ─────────────────────────────────────────────
   6. HERO / PAGE HEADER
   ───────────────────────────────────────────── */
.view-header,
.page-header,
.hero-block {
  text-align: center;
}

.hero-block {
  position: relative;
  width: 100%;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
}
.hero-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
    rgba(15,27,40,0.82) 0%,
    rgba(15,27,40,0.58) 50%,
    rgba(61,107,82,0.65) 100%);
  z-index: 0;
}





/* Amber top rule — brand anchor */
.hero-overlay-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--color-amber);
  z-index: 2;
}

.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  max-width: 720px;
  width: 100%;
  margin-inline: auto;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-amber-light);
  display: block;
  margin-bottom: 1rem;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  font-weight: 700;
  color: var(--color-ivory);
  line-height: 1.15;
  margin: 0 0 0.5rem;
}

.hero-title em {
  color: var(--color-amber-light);
}

.hero-subtitle {
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  font-weight: 600;
  color: rgba(248,245,239,0.78);
  margin: 0.75rem 0 2rem;
  line-height: 1.65;
}



.hero-stat-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.hero-stat-number {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 700;
  color: var(--color-ivory);
  display: block;
  line-height: 1;
}

.hero-stat-label {
  font-size: 0.72rem;
  color: rgba(248,245,239,0.55);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  margin-top: 0.3rem;
}

.hero-stat-divider {
  width: 1px;
  height: 2.5rem;
  background: rgba(248,245,239,0.2);
}

.hero-search {
  display: flex;
  max-width: 440px;
  margin-inline: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.28);
}

.hero-search input[type="text"] {
  flex: 1;
  border: none;
  background: rgba(248,245,239,0.96);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.75rem 1.1rem;
  color: var(--color-text);
}

.hero-search button {
  background: var(--color-amber);
  color: var(--color-ivory);
  border: none;
  padding: 0.75rem 1.25rem;
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition);
}

.hero-search button:hover {
  background: #9a612a;
}

/* HERO Fix to break the container*/
.featured-top,
.featured-top__inner,
.featured-top .container,
.featured-top .row {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}




/* The big species count heading on the homepage */
.view-blk-inicio h1,
#block-views-block-blk-inicio-block-1 h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--color-navy);
  font-weight: 700;
}


/* ─────────────────────────────────────────────
   7. SEARCH BAR
   ───────────────────────────────────────────── */
.views-exposed-form .form-control,
.search-block-form input[type="search"],
.form-search {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.6rem 1rem;
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.views-exposed-form .form-control:focus,
.search-block-form input[type="search"]:focus {
  outline: none;
  border-color: var(--color-navy-mid);
  box-shadow: 0 0 0 3px rgba(44, 74, 99, 0.12);
}

.views-exposed-form .btn,
.form-submit {
  background-color: var(--color-navy);
  color: var(--color-ivory);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
}

.views-exposed-form .btn:hover,
.form-submit:hover {
  background-color: var(--color-amber);
  transform: translateY(-1px);
}






/* ─────────────────────────────────────────────
   10. BIBLIOGRAPHY SECTION
   ───────────────────────────────────────────── */
   
.av-bib-journal {
      font-size: 11px;
      padding: 3px 10px;
      border-radius: 10px;
      background: #f2f2f2;
      color: #555;
}
.av-bib-doi {
      font-size: 11px;
      padding: 3px 10px;
      border-radius: 10px;
      background: #e6f1fb;
      color: #185fa5;
      text-decoration: none;
}
.av-bib-doi:hover { text-decoration: underline; }
    
.view-bibliografia,
.bibliography-list {
  margin-top: 2rem;
}

.bibliography-list .views-row,
.bib-entry {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.bibliography-list .views-row:last-child {
  border-bottom: none;
}

/* Year badge */
.bib-year,
.views-field-field-year {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-white);
  background: var(--color-navy-mid);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  display: inline-block;
  margin-bottom: 0.4rem;
  letter-spacing: 0.05em;
}

.bib-authors,
.views-field-field-authors {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 0.2rem;
}

.bib-title,
.views-field-title a {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-navy);
  text-decoration: none;
  font-style: italic;
}

.bib-title:hover,
.views-field-title a:hover {
  color: var(--color-amber);
}

.bib-journal,
.views-field-field-journal {
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.bib-doi a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-green);
  text-decoration: none;
}

.bib-doi a:hover {
  color: var(--color-amber);
  text-decoration: underline;
}

/* Section heading with ruled line */
.view-header h2,
.section-heading {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.view-header h2::after,
.section-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* "Ver todas" link */
.view-footer a,
.more-link a {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-navy-mid);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--transition);
}

.view-footer a:hover,
.more-link a:hover {
  color: var(--color-amber);
}


/* ─────────────────────────────────────────────
   11. TAXONOMY / TAXON DETAIL PAGES
   ───────────────────────────────────────────── */
.taxon-name,
.page-title {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-navy);
}

.taxon-rank-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--color-ivory-dark);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.55rem;
  vertical-align: middle;
  margin-left: 0.5rem;
}

.taxon-authority {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-style: normal;
}

/* Breadcrumb */
.breadcrumb {
  font-size: 0.83rem;
  background: transparent;
  padding: 0;
  gap: 0.25rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-border);
  content: "›";
}

.breadcrumb-item a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-style: italic;
}

.breadcrumb-item a:hover {
  color: var(--color-amber);
}

.breadcrumb-item.active {
  color: var(--color-navy);
  font-style: italic;
}


/* ─────────────────────────────────────────────
   12. TABLES (occurrence data, bibliography)
   ───────────────────────────────────────────── */
.table {
  font-size: 0.9rem;
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  background: var(--color-navy);
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: none;
  padding: 0.7rem 1rem;
  white-space: nowrap;
}

.table thead th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.table thead th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }

.table tbody tr {
  transition: background-color var(--transition);
}

.table tbody tr:hover {
  background-color: rgba(44, 74, 99, 0.04);
}

.table td {
  border-color: var(--color-border);
  padding: 0.6rem 1rem;
  vertical-align: middle;
}

.table td em {
  color: var(--color-navy);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(26, 43, 60, 0.025);
}


/* ─────────────────────────────────────────────
   13. PAGER
   ───────────────────────────────────────────── */
.pager__items {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 1.5rem 0;
  list-style: none;
  margin: 0;
}

.pager__item a,
.pager__item.is-active span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text-muted);
  background: var(--color-white);
  transition: all var(--transition);
}

.pager__item a:hover {
  background: var(--color-navy);
  color: var(--color-ivory);
  border-color: var(--color-navy);
}

.pager__item.is-active span {
  background: var(--color-navy);
  color: var(--color-ivory);
  border-color: var(--color-navy);
  font-weight: 600;
}


/* ─────────────────────────────────────────────
   14. FOOTER
   ───────────────────────────────────────────── */
footer,
.site-footer {
  background: var(--color-navy-deep);
  color: rgba(248, 245, 239, 0.65);
  font-size: 0.85rem;
  padding-block: 2rem;
  margin-top: 4rem;
  border-top: 3px solid var(--color-amber);
}

footer a,
.site-footer a {
  color: rgba(248, 245, 239, 0.75);
  text-decoration: none;
  transition: color var(--transition);
}

footer a:hover,
.site-footer a:hover {
  color: var(--color-amber);
}

footer p,
.site-footer p {
  margin-bottom: 0.5rem;
}


/* ─────────────────────────────────────────────
   15. UTILITIES & MISC
   ───────────────────────────────────────────── */

/* Drupal messages */
.messages {
  border-radius: var(--radius-md);
  border-left: 4px solid;
  font-size: 0.9rem;
}
.messages--status  { border-color: var(--color-green); background: #f0f7f3; }
.messages--warning { border-color: var(--color-amber); background: #fdf6ef; }
.messages--error   { border-color: #c0392b;           background: #fdf2f2; }

/* Drupal tabs (local tasks) */
.tabs--primary .tab a {
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  transition: all var(--transition);
}

.tabs--primary .tab.is-active a,
.tabs--primary .tab a:hover {
  background: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-border);
}

/* Skip link */
.visually-hidden-focusable:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 9999;
  background: var(--color-amber);
  color: var(--color-white);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}


/* ─────────────────────────────────────────────
   16. RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: var(--color-navy-deep);
    padding: 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  .navbar-nav .nav-link::after {
    display: none;
  }

  .navbar-nav .nav-link {
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
}

@media (max-width: 767.98px) {
  body {
    font-size: 1rem;
  }

  main,
  .layout-container {
    padding-block: 1.5rem;
  }

  .taxon-rank-badge {
    display: block;
    margin: 0.4rem 0 0;
  }

  .table-responsive {
    font-size: 0.82rem;
  }

  .pager__items {
    gap: 0.2rem;
  }
}

@media (max-width: 575.98px) {
  .card-header {
    font-size: 0.9rem;
    padding: 0.6rem 0.85rem;
  }

  .list-group-item {
    font-size: 0.9rem;
    padding: 0.55rem 0.85rem;
  }

	.av-sppcount-circle {
		width: 80px;
	  height: 80px;
	  border-radius: 50%;
	  border: 5px solid var(--color-border);
	  overflow: hidden;
	  background: var(--color-ivory-dark);
	  transition: border-color 0.15s, box-shadow 0.15s;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	}	

	.av-order-count {
	  font-size: 1.6rem;
	  font-weight: 600;
	  line-height: 1;
	  color: #3a3a3a;
	}
	
	
}


/* ─────────────────────────────────────────────
   17. PRINT
   ───────────────────────────────────────────── */
@media print {
  :root { --color-ivory: #fff; }

  .navbar,
  footer,
  .pager__items,
  .tabs--primary { display: none !important; }

  body {
    font-size: 11pt;
    color: #000;
    background: #fff;
  }

  h1, h2, h3 {
    color: #000;
    page-break-after: avoid;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #555;
  }
}



@media (max-width: 575.98px) {
  .hero-stat-divider { display: none; }
  .hero-stat-row { gap: 1.25rem; }
  .hero-search { flex-direction: column; border-radius: var(--radius-md); }
  .hero-search button { border-radius: 0; }
}