/* _static/custom.css */

/* --------------------------------------------------------------------
   1️⃣  Flexbox container – puts the logo left and the rest right
   -------------------------------------------------------------------- */
.custom-footer {
    display: flex;                /* line‑up children horizontally */
    align-items: center;          /* vertical centering */
    justify-content: flex-end;    /* push the footer block to the right (ragged-right) */
    gap: 0.4rem;                  /* small gap between logo and footer text */
    padding: 1rem 0;              /* keep the same vertical spacing the theme uses */
    /* Constrain footer to the main content width and center it so the
       cluster appears at the right edge of the text block rather than
       the browser window. Adjust `max-width` if your theme uses a
       different content width. */
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: nowrap;            /* ensure logo and text stay on one line */
}

/* --------------------------------------------------------------------
   2️⃣  Logo size – change the width to whatever you need
   -------------------------------------------------------------------- */
.footer-logo {
    width: 140px;                 /* fixed width you want */
    height: auto;                 /* keep aspect ratio */
    margin-right: 0.25rem;        /* much smaller gap to the footer text */
    display: block;               /* ensure the image renders as a block inside the footer */
    visibility: visible;
    opacity: 1;
}

.footer-logo-wrapper {
    display: flex;
    align-items: center;
    flex: 0 0 auto;               /* don't let the logo wrapper stretch */
}

.footer-original {
    flex: 0 1 auto;               /* allow footer text to size itself */
}

/* Right-align the original footer text so the cluster reads ragged-right */
.footer-original {
    text-align: right;
}

/* Optional: make the footer stick to the bottom of the viewport.
   To use it, add the `sticky-footer` class to the <footer> element in
   `_templates/layout.html` (e.g. <footer class="custom-footer sticky-footer">)
*/
.sticky-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000; /* sit on top of other content if necessary */
    background: inherit; /* keep theme background */
}

/* --------------------------------------------------------------------
   3️⃣  Optional: make the logo shrink on very small screens
   -------------------------------------------------------------------- */
@media (max-width: 600px) {
    .footer-logo {
        width: 100px;
    }
    .custom-footer {
        justify-content: center; /* center on small screens for better layout */
    }
    .footer-original {
        text-align: center;
    }
}

/* --------------------------------------------------------------------
   4️⃣  Fallback for very old browsers that don’t understand flexbox.
   -------------------------------------------------------------------- */
@supports not (display: flex) {
    .custom-footer {
        overflow: hidden;        /* clearfix */
    }
    .footer-logo {
        float: left;
        margin-right: 0.25rem;
    }
    .footer-original {
        overflow: hidden;        /* push text beside the floated logo */
    }
}

/* Furo: Increase main content width for desktop */
@media (min-width: 900px) {
  .main-content {
    max-width: 1400px;
    min-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Responsive Sphinx-Design grid for landing page */
.sd-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;        /* Reduce spacing between grid cards */
    max-width: 1400px;
    min-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 900px) {
    .sd-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        max-width: 1400px;
        min-width: 900px;
    }
}

/* Responsive override for Sphinx-Design grid: stack on mobile, 3 columns on desktop */
@media (max-width: 899px) {
  .sd-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 900px) {
  .sd-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Limit icon/image width in grid cards and center them */
.sd-card img {
  width: 205px;
  max-width: 205px;
  min-width: 205px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
}

/* Set consistent width and centering for grid cards */
.sd-card {
  max-width: 240px;
  min-width: 240px;
  margin-left: auto;
  margin-right: auto;
}

/* For multi-column grids, allow cards to fill available space but not exceed max-width */
@media (min-width: 900px) {
  .sd-grid {
    justify-items: center;
  }
}

/* Consistent logo row styling for multiple logos per card */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .1rem;
  margin: .1rem 0;
}
.logo-img {
  width: 180px;
  height: auto;
  display: block;
}