/* SBD Tiles – MINI (header) | inverted hover + Dosis */
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;500;600;700&display=swap');

/* =========================
   SBD Tiles – MINI (header)
   Isolated mini styling; no globals; safe overrides.
   ========================= */

:root{
  --sbd-mini-green: #3AAA35;    /* firm color for icons & labels */
}

/* Wrapper in header */
.sbd-tiles-in-header{
  display:flex;
  gap:14px;
  align-items:center;
}

/* Mini tile (wider by ~30%) */
.sbd-tile--mini{
  width: 143px;                 /* 110px * 1.3 */
  padding:8px 6px;
  text-decoration:none;
  color:var(--sbd-mini-green);
  background:transparent;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition: color .18s ease, box-shadow .18s ease;
}

/* icon above label */
.sbd-tile-mini__icon svg{
  width:34px; height:34px;
  display:block;
  margin-bottom:6px;
  fill:var(--sbd-mini-green);
}

/* Label */
.sbd-tile-mini__label{ color:var(--sbd-mini-green); }
.sbd-tile--mini, .sbd-tile--mini *{ text-decoration:none !important; }

/* hover: no background change, keep green */
.sbd-tile--mini:hover,
.sbd-tile--mini.active{
  background:transparent;
  color:var(--sbd-mini-green);
}
.sbd-tile--mini:hover .sbd-tile-mini__icon svg,
.sbd-tile--mini.active .sbd-tile-mini__icon svg{
  fill:var(--sbd-mini-green);
}

/* Helpers originally in main CSS */
.sbd-logged-only { display:none; }
body.logged-in .sbd-logged-only { display:inline-flex; }
body.home .sbd-tiles-in-header { display:none !important; }

/* Mini-link variant (text-only) */
.sbd-mini-link{
  text-decoration:none;
  white-space:nowrap;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
}
.sbd-mini-link .sbd-tile-mini__label{
  text-decoration:none;
  white-space:nowrap;
  font-size:.9rem;
  line-height:1.2;
  text-align:center;
  color:var(--sbd-mini-green);
}



/* === Overrides: Dosis + inverted hover === */
:root{ --sbd-mini-green:#3AAA35; }

/* Dosis everywhere on mini tiles */
.sbd-tile--mini,
.sbd-tile--mini *,
.sbd-mini-link,
.sbd-mini-link * {
  font-family: "Dosis", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Wider mini tile remains */
.sbd-tile--mini{
  width:143px;
  color:var(--sbd-mini-green) !important;
  background:transparent !important;
  text-decoration:none !important;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.sbd-tile--mini, .sbd-tile--mini * { text-decoration:none !important; }

/* Base icon/label in green */
.sbd-tile-mini__icon svg{ fill:var(--sbd-mini-green) !important; }
.sbd-tile-mini__label{ color:var(--sbd-mini-green) !important; }

/* Inverted hover: green background, white icon + text */
.sbd-tile--mini:hover,
.sbd-tile--mini:focus-visible,
.sbd-tile--mini.active{
  background: var(--sbd-mini-green) !important;
  color:#fff !important;
  outline: none;
}
.sbd-tile--mini:hover .sbd-tile-mini__icon svg,
.sbd-tile--mini:focus-visible .sbd-tile-mini__icon svg,
.sbd-tile--mini.active .sbd-tile-mini__icon svg{
  fill:#fff !important;
}

/* Optional: better focus ring for accessibility on keyboard nav */
.sbd-tile--mini:focus-visible{
  box-shadow: 0 0 0 3px rgba(58,170,53,0.4);
  border-radius:8px;
}


/* Ensure text turns white on hover as well (not only icons) */
.sbd-tile--mini:hover .sbd-tile-mini__label,
.sbd-tile--mini:focus-visible .sbd-tile-mini__label,
.sbd-tile--mini.active .sbd-tile-mini__label,
.sbd-tile--mini:hover a,
.sbd-tile--mini:focus-visible a,
.sbd-tile--mini.active a {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* As a safety net: make any direct text inside the tile white on hover */
.sbd-tile--mini:hover,
.sbd-tile--mini:hover * {
  color: #ffffff !important;
}