html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background-color: #f5f5f7;
}

/* Bootstrap hides the toggler on desktop when using navbar-expand-*. We want the hamburger always visible on public pages. */
body:not(.admin-layout) .navbar.navbar-expand-sm .navbar-toggler {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Public drawer (hamburger) menu */
.public-drawer {
  width: min(88vw, 360px);
}

.public-drawer {
  /* Ensure hamburger menu items stay black even if global link styles override them */
  --bs-link-color: #000;
  --bs-link-hover-color: #000;
}

.public-drawer.offcanvas {
  /* Let the drawer size to its content (collapsed vs expanded language list) */
  height: auto;
  bottom: auto;
  top: var(--public-drawer-top, 56px);
  max-height: calc(100vh - var(--public-drawer-top, 56px) - 12px);
  overflow-y: auto;
}

.public-drawer.offcanvas.offcanvas-end {
  /* Align the drawer's right edge to the hamburger button's right edge (set by JS) */
  right: var(--public-drawer-right, 0px);
}

.public-drawer .offcanvas-header {
  padding-bottom: 0;
}

.public-drawer .offcanvas-body {
  padding-top: 0.5rem;
  /* Prevent the default flex-grow behavior from forcing extra height */
  flex-grow: 0;
  overflow: visible;
}

.public-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.public-drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.5rem;
  border: 0;
  background: transparent;
  color: #000 !important;
  font-weight: 500;
  text-decoration: none;
  border-radius: 10px;
}

.public-drawer-link:visited,
.public-drawer-link:active {
  color: #000 !important;
  text-decoration: none;
}

.public-drawer-link:hover,
.public-drawer-link:focus {
  background: rgba(0, 0, 0, 0.05);
  color: #000 !important;
  text-decoration: none;
}

.public-drawer-lang-toggle {
  cursor: pointer;
}

.public-drawer-lang-label {
  display: inline-flex;
  gap: 0.35rem;
  align-items: baseline;
}

.public-drawer-lang-arrow {
  font-size: 1rem;
  opacity: 0.7;
  transition: transform 200ms ease;
}

/* Rotate arrow when expanded */
.public-drawer-lang-toggle[aria-expanded="true"] .public-drawer-lang-arrow {
  transform: rotate(90deg);
}

.public-drawer-lang-list {
  margin-top: -0.25rem;
}

.public-drawer-lang-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1rem; /* indent under Language row */
}

.public-drawer-lang-item {
  display: block;
  padding: 0.5rem 0.5rem;
  border-radius: 10px;
  text-decoration: none;
  color: #000 !important;
}

.public-drawer-lang-item:hover,
.public-drawer-lang-item:focus {
  background: rgba(0, 0, 0, 0.05);
  color: #000 !important;
  text-decoration: none;
}

.public-drawer-lang-item.active {
  background: rgba(0, 0, 0, 0.08);
  font-weight: 600;
}

/* Header Navigation Tabs */
a.nav-tab-link {
  position: relative;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-weight: 600;
  text-decoration: none;
  color: #000 !important;
  transition: color 0.2s ease;
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
}

a.nav-tab-link:hover {
  color: #000 !important;
  text-decoration: none;
}

a.nav-tab-link.active {
  color: #000 !important;
}

.nav-tab-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #000;
}

/* Admin top menu (next to logo) */
a.admin-nav-link {
  position: relative;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-weight: 600;
  text-decoration: none;
  color: #000 !important;
  transition: color 0.2s ease;
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
}

a.admin-nav-link:hover {
  color: #000 !important;
  text-decoration: none;
}

a.admin-nav-link.active {
  color: #000 !important;
}

.admin-nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #000;
}

/* Article Container Spacing */
.article-container {
  background-color: #fff;
  padding: 2rem;
  margin-bottom: 1.5rem;
}

/* Article tag stack (category + feature) */
.article-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.badge-category {
  font-size: 1rem;
}

.badge-feature {
  background-color: #5e8a7c;
  color: #fff;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .article-container {
    padding: 2.5rem;
    margin-bottom: 2rem;
  }
}

/* Home page: slightly tighter overall spacing */
.home-index .article-container {
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

/* Home page: Recaps (compact recap card) */
.home-index .recaps-section .recaps-header {
  margin-bottom: 0.75rem;
}

.home-index .recaps-badge {
  display: inline-block;
  background: #000;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem; /* ~15px */
  padding: 0.375rem 0.75rem; /* ~6px 12px */
  border-radius: 0.5rem; /* ~8px */
  letter-spacing: 0.02em;
}

.home-index .recaps-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.home-index .recaps-item {
  margin-bottom: 1.125rem; /* 18px */
}

.home-index .recaps-item:last-child {
  margin-bottom: 0;
}

.home-index .recaps-link {
  display: block;
  color: inherit;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.5;
}

.home-index .recaps-link:hover {
  text-decoration: none;
}

.home-index .recaps-link:focus,
.home-index .recaps-link:focus-visible {
  text-decoration: none;
}

.home-index .recaps-time {
  font-weight: 700;
  text-transform: uppercase;
  margin-right: 0.25rem;
  white-space: nowrap;
}

.home-index .recaps-collapse {
  margin-top: 1.125rem; /* match recap item spacing so the 4th doesn't "stick" to the 3rd */
}

.home-index .recaps-view-more {
  text-align: center;
  margin-top: 1.25rem; /* 20px */
}

/* Recaps toggle button uses Bootstrap button styling (matches "View All Articles") */

/* Home page: Standalone articles shouldn't add extra bottom whitespace inside the card */
.home-index .article-container.is-standalone article {
  margin-bottom: 0 !important; /* overrides Bootstrap mb-* utilities */
}

@media (min-width: 768px) {
  .home-index .article-container {
    padding: 2rem;
    margin-bottom: 1.5rem;
  }
}

/* Content width wrapper - shared by header and articles */
/* Header inner width should align with article cards on Home/Category/Detail pages */
.content-wrapper {
  width: 100%;
  max-width: 900px; /* matches .article-container and .article-detail-wrapper on desktop */
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.75rem;  /* matches Bootstrap container gutter (1.5rem / 2) */
  padding-right: 0.75rem; /* matches Bootstrap container gutter (1.5rem / 2) */
}

@media (min-width: 992px) {
  .article-container {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  .article-detail-wrapper {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Admin pages: keep header/logo near the left edge */
  body.admin-layout .content-wrapper {
    max-width: 1320px;
    padding-left: 15px; /* change this number to taste (e.g., 0, 10, 24, 32) */
    padding-right: 15px;
  }
}

/* Secondary article image sizing */
.secondary-article {
  margin-bottom: 0;
}

.secondary-article-body {
  /* Equal top/bottom breathing room for title+meta */
  padding-block: 0.25rem;
  min-width: 0; /* prevents overflow in flex layout */
}

.secondary-article-meta {
  /* Keep meta from touching the bottom edge */
  padding-top: 0.25rem;
}

.secondary-article-media {
  /* Ensure the image block stays vertically centered in the row */
  align-self: center;
}

.secondary-article-image {
  width: 120px;
}

@media (min-width: 768px) {
  .secondary-article-image {
    width: 160px;
  }
}

@media (min-width: 992px) {
  .secondary-article-image {
    width: 180px;
  }
}

.secondary-article-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Article introduction text truncation - 2 lines max */
.article-intro {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-height: 3em; /* 2 lines * 1.5 line-height */
}