/* Site-specific overrides on top of the Roadster theme, kept out of the
   theme submodule so it stays clean for updates. */

/* Swap the theme's near-black dark background (nav, buttons, tag base state,
   social icons, footer) for a navy blue, so "dark UI element" reads as part
   of the blue/red branding instead of generic black. Distinct from the
   brighter highlightColor blue so hover states are still visible against it. */
:root {
  --color-menu-bg: #0d2647;
  --color-footer-bg: #0d2647;
}

html[data-theme="dark"] {
  --color-menu-bg: #0d2647;
  --color-footer-bg: #0d2647;
}

.logo__disclaimer {
  font-size: 0.75rem;
  font-style: italic;
  color: #888;
  margin-top: 0.35rem;
  line-height: 1.3;
  text-transform: none;
}

/* Theme's default logo layout relies on unconstrained inline-block sizing for
   the text block, which wraps the whole title/subtitle/disclaimer group below
   the avatar once the subtitle is long enough not to fit beside it. Force an
   explicit flex row so image and text always sit side by side, with the text
   column wrapping normally within its own space. */
.logo--mixed .logo__link {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.logo--mixed .logo__item {
  margin: 0;
}

.logo--mixed .logo__text {
  flex: 1;
  min-width: 0;
}

/* Sidebar social widget: theme's default is display:block + white-space:pre-line
   (inherited from .btn), which stretches the button full-width and forces the
   icon and label onto separate lines when there's only one social link. */
.widget-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

.widget-social__link span {
  display: none;
}

.widget-social__link-icon {
  margin: 0;
}

/* USL branding: red/white/blue accent on the bar under the nav menu (theme sets
   this as a plain solid highlightColor border-bottom on .menu; .divider is a
   red herring — it only renders when no menu is configured). */
.menu {
  border-image: linear-gradient(to right, #B22234 0%, #B22234 33%, #FFFFFF 33%, #FFFFFF 66%, #0A3161 66%, #0A3161 100%) 1;
}

/* Bolder red/white/blue stripe at the very top of the page, above the logo —
   the first thing visible on load. */
.header {
  border-top: 8px solid;
  border-image: linear-gradient(to right, #B22234 0%, #B22234 33%, #FFFFFF 33%, #FFFFFF 66%, #0A3161 66%, #0A3161 100%) 1;
}

/* Give tags a permanent red identity (not just on hover, which is how the
   theme's shared .btn class normally behaves) so red shows up as a real,
   always-visible color rather than only living in thin accent stripes. */
.widget-taglist__link,
.tags__item {
  background: #B22234;
  color: #fff;
}

.widget-taglist__link:hover,
.tags__item:hover {
  background: #8f1c29;
}

/* Pagination's current/hover page indicator switches to the same red, so the
   two accent colors (blue for links/headings, red for tags/pagination) read
   as a deliberate two-tone system rather than one color plus a stripe. */
.pagination__item:hover,
.pagination__item--current {
  background: #B22234;
}

/* About page contact buttons */
.contact-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.contact-buttons .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 4px;
  padding: 8px 12px;
  /* .content a (generic markdown link color) is more specific than the
     theme's own .btn color rule, so without this the button text/icon
     silently inherits highlightColor instead of the intended inverse-text
     white — invisible here since our accent blue is close to the button bg. */
  color: var(--color-inverse-text);
}

.contact-buttons .btn-icon-only {
  padding: 8px 10px;
}

.contact-buttons .btn-icon__svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}