/* ==========================================================
   SOVEREIGN THEME — merged + color-scheme update
   ----------------------------------------------------------
   - Keeps your original class structure
   - Updates the color system to Sovereign palette
   - Adds navbar/hero/card/badge overrides from the second CSS
   - Uses variables so all existing sections auto-adopt the new scheme
   ========================================================== */

/* ---------------------------
   Fonts (unchanged)
---------------------------- */
:root {
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Nunito Sans", sans-serif;
  --nav-font: "Raleway", sans-serif;
}

/* ---------------------------
   Sovereign palette
---------------------------- */
:root {
  /* Sovereign core */
  --sv-bg-900: #0e141b; /* deep navy */
  --sv-bg-800: #0e141b; /* deep navy (secondary) */
  --sv-text-100: #bcbcbd; /* light gray text */
  --sv-accent: #972128; /* red accent */
  --sv-accent-600: #972128;
  --sv-card-800: #171e27; /* card bg */
  --sv-muted-300: #9aa3ad;

  /* Compatibility map -> drives your whole site */
  --background-color: var(--sv-bg-900);
  --default-color: var(--sv-text-100);
  --heading-color: #e4e8ef;
  --accent-color: var(--sv-accent);
  --surface-color: var(--sv-card-800);
  --contrast-color: #ffffff;

  /* Nav-specific colors */
  --nav-color: rgba(255, 255, 255, 0.85);
  --nav-hover-color: var(--sv-accent);
  --nav-mobile-background-color: #1a222c;
  --nav-dropdown-background-color: #1a222c;
  --nav-dropdown-color: rgba(255, 255, 255, 0.85);
  --nav-dropdown-hover-color: var(--sv-accent);

  /* Header offset vars */
  --header-offset: 128px;
}

@media (max-width: 991.98px) {
  :root {
    --header-offset: 92px;
  }
}

/* ---------------------------
   Global base + dark theme bg
---------------------------- */
html[data-bs-theme="dark"] body {
  background: radial-gradient(
        1200px 600px at 50% -10%,
        #972128 15%,
        var(--sv-bg-900) 45%
      )
      no-repeat,
    var(--sv-bg-900);
  color: var(--sv-text-100);
}

body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}
a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/* ---------------------------
   Header / Nav (keeps your structure)
---------------------------- */
.header {
  --background-color: rgba(255, 255, 255, 0);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .header-container {
  background: linear-gradient(
    180deg,
    rgba(10, 13, 18, 0.95),
    rgba(10, 13, 18, 0.6)
  );
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 50px;
  padding: 5px 25px 5px 30px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}
.header .logo h1 {
  font-size: 20px;
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--heading-color);
}

/* Desktop nav */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }
  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }
  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .navmenu li:hover > a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  }
  .navmenu .dropdown:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }
  .navmenu .dropdown ul a {
    color: var(--nav-dropdown-color);
    font-weight: 600;
  }
  .navmenu .dropdown ul a:hover {
    color: var(--nav-dropdown-hover-color);
  }
}

/* Mobile nav */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    margin-right: 10px;
    cursor: pointer;
  }
  .navmenu {
    padding: 0;
    z-index: 9997;
  }
  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background: var(--nav-mobile-background-color);
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  }
  .navmenu a {
    color: var(--nav-dropdown-color);
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 600;
  }
  .navmenu a:hover,
  .navmenu .active {
    color: var(--nav-dropdown-hover-color);
  }
  .mobile-nav-active .navmenu {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 28, 0.8);
  }
  .mobile-nav-active .navmenu > ul {
    display: block;
  }
}

/* ---------------------------
   Global sections
---------------------------- */
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 90px;
  overflow: clip;
}
@media (max-width: 1199px) {
  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/* ==========================================================
   Section Titles — Updated for Sovereign Theme
   ----------------------------------------------------------
   - Keeps your original spacing, font sizes, and colors
   - Replaces single :after line with left & right lines
   - Uses accent color from theme variables
   ========================================================== */

.section-title {
  padding-bottom: 60px;
  position: relative;
  text-align: center;
}

/* Subheading (small top text if used) */
.section-title h2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  position: relative;
  display: inline-block;
}

/* Accent lines on both sides */
.section-title h2::before,
.section-title h2::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 80px;
  height: 2px;
  background: var(--accent-color);
  transform: translateY(-50%);
}

.section-title h2::before {
  left: -100px; /* spacing between text and line */
}

.section-title h2::after {
  right: -100px;
}

/* Main title below (the larger one) */
.section-title div {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
  font-family: var(--heading-font);
  margin-top: 10px;
}

/* Responsive tweaks */
@media (max-width: 576px) {
  .section-title h2::before,
  .section-title h2::after {
    width: 40px;
    left: -55px;
    right: -55px;
  }

  .section-title div {
    font-size: 22px;
  }
}

/* ---------------------------
   HERO (merged)
---------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 6rem 0 4rem;
  background: linear-gradient(
      180deg,
      rgba(15, 20, 28, 0.4),
      rgba(15, 20, 28, 0.9)
    ),
    url("../img/hero-texture.png");
  background-size: cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.02) 0px,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 10px
  );
  z-index: 1;
}
.hero .container,
.hero .container-fluid {
  position: relative;
  z-index: 2;
}
.hero .slash {
  height: 4px;
  width: 140px;
  background: var(--sv-accent);
  display: inline-block;
  transform: translateY(-8px);
}
.hero h1 {
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.hero .content-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 3rem;
}
@media (max-width: 991px) {
  .hero .content-col {
    padding-right: 15px;
    margin-bottom: 3rem;
  }
}

/* ---------------------------
   Buttons / Badges
---------------------------- */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sv-accent);
  --bs-btn-border-color: var(--sv-accent);
  --bs-btn-hover-bg: var(--sv-accent-600);
  --bs-btn-hover-border-color: var(--sv-accent-600);
  --bs-btn-active-bg: var(--sv-accent-600);
  --bs-btn-active-border-color: var(--sv-accent-600);
}

.btn-outline-primary {
  --bs-btn-color: var(--sv-accent);
  --bs-btn-border-color: var(--sv-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sv-accent);
  --bs-btn-hover-border-color: var(--sv-accent);
}

.btn-accent {
  --bs-btn-bg: var(--sv-accent);
  --bs-btn-border-color: var(--sv-accent);
  --bs-btn-hover-bg: var(--sv-accent-600);
  --bs-btn-hover-border-color: var(--sv-accent-600);
  --bs-btn-color: #fff;
}

.badge-accent {
  background-color: var(--sv-accent);
}

/* ---------------------------
   Cards, footer, muted links
---------------------------- */
.card.bg-dark {
  background-color: var(--sv-card-800) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #0b1016;
  color: var(--default-color);
}

.link-muted {
  color: var(--sv-muted-300);
}
.link-muted:hover {
  color: #fff;
}

/* ---------------------------
   Scroll top, preloader, etc.
   (These continue to use your original selectors,
   now driven by updated variables.)
---------------------------- */

/* PHP Email Form Messages */
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #fff;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}
.php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}
.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}
.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}
@keyframes php-email-form-loading {
  to {
    transform: rotate(360deg);
  }
}

/* Section/Component rules from your original CSS (Steps, About, Services, Portfolio, Team, Pricing, FAQ, Contact, Portfolio Details, Service Details, etc.) remain valid.
   They will automatically pick up the new colors through the variables above. If you need any of those blocks tweaked in tone or contrast, ping me which block and I’ll adjust. */

/* ---------------------------
   Utility: inner-page offset
---------------------------- */
body.inner-page {
  padding-top: var(--header-offset);
}
html {
  scroll-padding-top: var(--header-offset);
}

/* ==========================================================
   SOVEREIGN: Full-width + Centered Navbar Overrides
   (Place at the END of your CSS)
   ========================================================== */

/* Full-width bar that spans edge-to-edge */
.header {
  padding: 0;
  height: 72px;
  display: flex;
  align-items: center;
  background: linear-gradient(
    180deg,
    rgba(10, 13, 18, 0.95),
    rgba(10, 13, 18, 0.6)
  );
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
  width: 100%;
  left: 0;
  right: 0;
  position: fixed; /* if you want sticky nav */
  top: 0;
  z-index: 999;
}

/* Inner container spans full width and removes capsule shape */
.header .header-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 40px;
  background: transparent;
  border-radius: 0;
  border: 0;
  box-shadow: none;

  /* Centering core layout */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  position: relative;
}

/* Keep logo aligned left edge */
.header .logo {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
}
.header .logo img {
  max-height: 34px;
  height: auto;
}

/* Center navigation links */
.navmenu {
  flex: 1;
  display: flex;
  justify-content: center;
}
.navmenu ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.navmenu a {
  padding: 18px 12px;
  text-align: center;
  font-weight: 700;
  font-family: var(--nav-font);
  text-transform: uppercase;
  color: var(--nav-color);
  transition: color 0.3s;
}
.navmenu a:hover,
.navmenu .active {
  color: var(--nav-hover-color);
}

/* Mobile nav adjustments */
.mobile-nav-toggle {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nav-color);
  font-size: 28px;
  cursor: pointer;
}

/* Ensure dropdown works if using it later */
.navmenu .dropdown ul {
  margin: 0;
  padding: 10px 0;
  background: var(--nav-dropdown-background-color);
  display: block;
  position: absolute;
  visibility: hidden;
  left: 50%;
  transform: translateX(-50%);
  top: 130%;
  opacity: 0;
  transition: 0.3s;
  border-radius: 4px;
  z-index: 99;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
.navmenu .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

/* Mobile nav open state */
@media (max-width: 1199px) {
  .header .header-container {
    justify-content: space-between;
    padding: 0 16px;
  }
  .header .logo {
    position: relative;
    left: 0;
    top: auto;
    transform: none;
  }
  .mobile-nav-toggle {
    right: 16px;
  }
  .navmenu {
    justify-content: flex-start;
  }
  .navmenu ul {
    flex-direction: column;
    gap: 10px;
  }
}

/* Adjust scroll offset for fixed header */
:root {
  --header-offset: 72px;
}
@media (max-width: 991.98px) {
  :root {
    --header-offset: 64px;
  }
}

/* === Sovereign Top Image Banner === */
.top-banner {
  position: relative;
  width: 100%;
  height: 260px; /* adjust for smaller/larger look */
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background-color: #0e141b;
  margin-top: var(--header-offset); /* sits right below fixed header */
  z-index: 1;
}

.top-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* keeps proportions while filling */
  object-position: center;
  display: block;
  filter: brightness(0.95); /* optional slight dim for contrast */
}

/* Mobile scaling */
@media (max-width: 768px) {
  .top-banner {
    height: 180px;
  }
}

/* Reduce hero top padding since banner is now above it */
.hero {
  padding-top: 3rem; /* was 6rem */
  padding-bottom: 3rem;
  min-height: auto; /* let content dictate height */
}

/* Reduce general section spacing on homepage only */
body.home section {
  padding-top: 3rem; /* default 60px → ~48px */
  padding-bottom: 3rem;
}

/* Tighter spacing between hero and next section */
.hero + section {
  margin-top: 0 !important;
}

/* Optional: smaller gap under h2 titles */
.section-title {
  padding-bottom: 40px;
}

/* ==========================
   TEXT PRIMARY OVERRIDE
   (Sovereign Light Gray)
=========================== */
.text-primary {
  color: #bcbcbd !important;
}

/* Optional: match hover/focus links that use text-primary */
a.text-primary:hover,
a.text-primary:focus {
  color: color-mix(in srgb, #972128, 15%) !important;
}

/* ==========================
   Footer Accent Headings
=========================== */
.footer .fw-bold.text-uppercase {
  color: var(--sv-accent);
}

/* Copyright line */
.footer .border-top {
  border-color: rgba(255, 255, 255, 0.08) !important; /* subtle divider */
}
.footer .pt-3 {
  color: var(--sv-accent);
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* ==========================
   Team Logos for Matches
=========================== */

.team-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  padding: 3px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, filter 0.2s ease;
}

/* Optional hover effect (color pop) */
.team-logo:hover {
  transform: scale(1.05);
  filter: brightness(1.15);
}

@media (max-width: 576px) {
  .team-logo {
    width: 22px;
    height: 22px;
  }
  .match-title h5 {
    font-size: 0.9rem;
  }
}

/* ==========================
   Stacked Match Layout
=========================== */

.match-stack {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

/* Team column */
.match-stack .team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.team-logo-lg {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  padding: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.team-logo-lg:hover {
  transform: scale(1.04);
  filter: brightness(1.08);
}

.team-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Center VS divider */
.vs-divider {
  display: grid;
  place-items: center;
  min-width: 56px;
  padding: 0.25rem 0.5rem;
  color: var(--sv-muted-300, #9aa3ad);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
}

.vs-divider span {
  z-index: 1;
}

.vs-divider::before,
.vs-divider::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 38px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
}

.vs-divider::before {
  top: -46px;
}

.vs-divider::after {
  bottom: -46px;
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .match-stack {
    gap: 0.75rem;
  }

  .team-logo-lg {
    width: 52px;
    height: 52px;
    padding: 5px;
  }

  .team-name {
    font-size: 0.95rem;
  }

  .vs-divider {
    min-width: 44px;
  }

  .vs-divider::before,
  .vs-divider::after {
    height: 28px;
    top: -34px;
    bottom: -34px;
  }
}

/* ==========================
   End Team Logos + Match Layout
=========================== */

/* ==========================
   Team Roster Layout
=========================== */
.team-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--sv-muted-300, #9aa3ad);
  font-size: 0.9rem;
}
.team-stats .stat strong {
  color: #e6e9ef;
  font-weight: 700;
}
.team-stats .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.form .f {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-left: 4px;
}
.f-win {
  background: #1f8f40;
} /* green */
.f-loss {
  background: #b43a3a;
} /* red */

a.link-muted:hover {
  color: #fff;
}

/* ==========================
   Footer CSS
=========================== */

.footer {
  background: linear-gradient(180deg, #0e141b, #0b1016);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--sv-muted-300);
}

.footer-link {
  color: var(--sv-muted-300);
  text-decoration: none;
  display: block;
  padding: 4px 0;
  transition: color 0.2s ease;
}
.footer-link:hover {
  color: var(--sv-accent);
}

/* Social icons */
.social-link {
  color: var(--sv-muted-300);
  font-size: 1.4rem;
  transition: all 0.25s ease;
}
.social-link:hover {
  color: var(--sv-accent);
  transform: scale(1.1);
  text-shadow: 0 0 8px rgba(151, 33, 40, 0.6);
}

/* Footer text adjustments */
.footer .fw-bold {
  letter-spacing: 0.05em;
}
.footer p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--sv-muted-300);
}

/* ==========================
   Teams Page CSS
=========================== */

.team-crest {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
.team-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sv-muted-300);
  font-size: 0.9rem;
}
.team-stats .stat strong {
  color: #e6e9ef;
}
.team-stats .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
.roster-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.roster-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.roster-list li:first-child {
  border-top: 0;
}
.rank-ico {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.team-tile {
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: 0.2s ease;
}
.team-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ==========================
   News Article Page CSS
=========================== */

/* Match your white-outline / dark-box style */
.outline-panel {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.75rem;
  text-decoration: none; /* remove underline when panel is an <a> */
  transition: border-color 0.25s ease, background-color 0.25s ease,
    box-shadow 0.25s ease, transform 0.1s ease-out;
}
.outline-panel:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.25);
}
.outline-panel:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: 2px;
}

/* Clickable variant (for related-post tiles) */
.outline-panel--clickable {
  position: relative; /* for .stretched-link */
  cursor: pointer;
}
.outline-panel--clickable:active {
  transform: translateY(1px);
}

/* Typography inside panels */
.outline-panel .lead {
  color: var(--bs-primary-color);
}
.outline-panel h5,
.outline-panel h4,
.outline-panel h3,
.outline-panel h2 {
  color: #fff;
}
.outline-panel p {
  color: rgba(255, 255, 255, 0.65);
}

/* Media & spacing inside panels */
.outline-panel img,
.outline-panel figure {
  max-width: 100%;
  border-radius: 0.75rem;
}
.outline-panel h2,
.outline-panel h3 {
  margin-top: 2rem;
}

/* Optional: lighter hover helper (use on demand) */
.hover-outline:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.25);
}

/* Thin reading progress line (JS-controlled) */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 1040;
  background: var(--bs-primary);
}