/* ============================================================
   dadamachines brand stylesheet
   Lelo typeface · brand colors · landing-page components
   ============================================================ */

/* --- @font-face: Lelo ------------------------------------ */
@font-face {
  font-family: 'Lelo';
  src: url('assets/fonts/Lelo-Bold.eot');
  src: url('assets/fonts/Lelo-Bold.eot?#iefix') format('embedded-opentype'),
       url('assets/fonts/Lelo-Bold.woff')        format('woff'),
       url('assets/fonts/Lelo-Bold.ttf')         format('truetype');
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Lelo';
  src: url('assets/fonts/Lelo-Regular.eot');
  src: url('assets/fonts/Lelo-Regular.eot?#iefix') format('embedded-opentype'),
       url('assets/fonts/Lelo-Regular.woff')        format('woff'),
       url('assets/fonts/Lelo-Regular.ttf')         format('truetype');
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
}

/* --- Furo CSS variable overrides -------------------------
   Furo sets --font-stack on `body`, so we must override on
   `body` (not :root) to win specificity.
   --------------------------------------------------------- */
body {
  /* Typography — Lelo as primary, system fonts as fallback */
  --font-stack:           'Lelo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-stack--headings: 'Lelo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-stack--monospace: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;

  /* Brand palette — dadamachines blue */
  --dada-accent:          #0000ee;
  --dada-bg-warm:         #faf9f7;
  --dada-border:          #e5e5e5;
  --dada-text-secondary:  #6b6b6b;

  /* Furo link colours — all links use brand blue */
  --color-brand-primary:     var(--dada-accent);
  --color-brand-content:     var(--dada-accent);
  --color-link:              var(--dada-accent);
  --color-link--hover:       var(--dada-accent);
  --color-link--visited:     var(--dada-accent);
  --color-link--visited--hover: var(--dada-accent);
  --color-link-underline:        transparent;
  --color-link-underline--hover: var(--dada-accent);
  --color-link-underline--visited: transparent;
  --color-link-underline--visited--hover: var(--dada-accent);
  --color-brand-visited:     var(--dada-accent);

  /* Sidebar — same background as main content */
  --color-sidebar-background:        var(--color-background-primary);
  --color-sidebar-background-border: var(--color-background-border);

  letter-spacing: -0.01em;
}

/* Dark-mode overrides */
@media not print {
  @media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) {
      --dada-accent:         #5c7cfa;
      --dada-bg-warm:        #1a1c1e;
      --dada-border:         #303335;
      --dada-text-secondary: #9ca0a5;
    }
  }
  body[data-theme="dark"] {
    --dada-accent:         #5c7cfa;
    --dada-bg-warm:        #1a1c1e;
    --dada-border:         #303335;
    --dada-text-secondary: #9ca0a5;
  }
}

/* --- Global typography ----------------------------------- */
h1, h2, h3, h4, h5, h6,
.sidebar-brand-text,
.toctree-l1 > a {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Reset left margin/padding on headings inside landing page raw HTML */
.dada-section h2,
.dada-section h3,
.dada-section h4,
.dada-feature h4,
.dada-step h4,
.dada-card h3,
.dada-cta h3,
.dada-cta-wide h3,
.dada-newsletter h2,
.dada-hero-headline {
  margin-left: 0;
  padding-left: 0;
}

/* Slightly tighter body text */
.content p,
.content li {
  line-height: 1.7;
}

/* Sidebar brand — logo left, title right, inline */
.sidebar-brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.6em;
  /* balance vertical space: equal padding above and below so the brand
     sits centred between the viewport top and the search form */
  padding-top: var(--sidebar-item-spacing-vertical) !important;
  padding-bottom: var(--sidebar-item-spacing-vertical) !important;
  margin-top: var(--sidebar-item-spacing-vertical);
}

.sidebar-logo-container {
  flex-shrink: 0;
  /* cancel the per-child margin Furo adds in column layout */
  margin: 0 !important;
}

.sidebar-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

/* Sidebar brand name */
.sidebar-brand-text {
  font-family: var(--font-stack--headings);
  font-weight: 700;
  font-size: 1.15em !important;
  letter-spacing: -0.03em;
}


/* ============================================================
   Mobile Responsive — Sidebar Brand
   ============================================================ */

/* On mobile screens, hide the text and show only the logo */
@media (max-width: 44em) {
  .sidebar-brand {
    justify-content: center;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  .sidebar-brand-text {
    display: none;
  }

  .sidebar-logo {
    width: 36px;
    height: 36px;
  }
}


/* ============================================================
   Content tables (Sphinx list-table / docutils)
   ============================================================ */

/* Remove Furo's default box borders and zebra-striping */
table.docutils {
  border: none;
  border-collapse: collapse;
  width: 100%;
}

table.docutils col {
  width: auto !important;   /* let content size naturally */
}

/* Header row — 2px bottom border, matching our section dividers */
table.docutils thead th {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-foreground-primary);
  padding: 0.6em 0.8em 0.6em 0;
  font-weight: 700;
  text-align: left;
  vertical-align: bottom;
  color: var(--color-foreground-primary);
}

/* Body rows — subtle 1px divider, no vertical borders */
table.docutils tbody td {
  border: none;
  border-bottom: 1px solid var(--color-background-border);
  padding: 0.55em 0.8em 0.55em 0;
  vertical-align: top;
}

/* Last row needs no bottom border */
table.docutils tbody tr:last-child td {
  border-bottom: none;
}

/* Bold first-column labels (specs pattern) */
table.docutils tbody td:first-child {
  font-weight: 700;
  white-space: nowrap;
}

/* Remove Furo's zebra-stripe backgrounds */
table.docutils tbody tr.row-odd,
table.docutils tbody tr.row-even {
  background: transparent;
}

/* Hover for discoverability */
table.docutils tbody tr:hover {
  background: var(--color-background-secondary);
}

/* Kill Furo's table-wrapper border */
.table-wrapper {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow-x: auto;
}


/* ============================================================
   Landing page components  (used on index.rst)
   ============================================================ */

/* --- Hero ------------------------------------------------ */
.dada-hero {
  text-align: left;
  padding: 1em 0 0.5em;
}

.dada-hero img {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  margin-bottom: 1.5em;
}

.dada-hero-headline {
  font-weight: 700;
  font-size: 2em;
  line-height: 1.4;
  letter-spacing: -0.03em;
  margin: 0 0 0.6em;
  text-align: center;
  color: var(--color-foreground-primary);
}

.dada-hero-sub {
  font-size: 1.15em;
  line-height: 1.65;
  color: var(--dada-text-secondary);
  max-width: 44em;
  margin: 0 0 2em;
}

/* --- Section dividers ------------------------------------ */
.dada-section {
  margin: 3em 0 2em;
}

.dada-section-label {
  font-weight: 700;
  font-size: 0.75em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dada-accent);
  margin-bottom: 0.6em;
  padding-left: 0;
}

.dada-section-title {
  font-weight: 700;
  font-size: 1.6em;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  padding-left: 0;
  color: var(--color-foreground-primary);
}

.dada-section-body {
  font-size: 1.05em;
  line-height: 1.7;
  color: var(--dada-text-secondary);
  max-width: 44em;
}

.dada-section-body strong {
  color: var(--color-foreground-primary);
}

/* --- Override Furo's thin hr.docutils (used as section dividers in interviews) */
hr.docutils {
  background-color: var(--color-foreground-primary);
  height: 2px;
  border: 0;
  margin: 2rem 0;
  padding: 0;
}

/* --- Feature grid (Why section) — 2 columns -------------- */
.dada-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4em;
  margin: 2em 0 0;
}

@media (max-width: 640px) {
  .dada-features {
    grid-template-columns: 1fr;
  }
}

.dada-feature {
  padding: 1.4em 1.5em;
  border: none;
  background: var(--color-background-secondary, var(--dada-bg-warm));
}

/* --- Feature icon (SVG) ---------------------------------- */
.dada-feature-icon {
  color: var(--dada-accent);
  margin-bottom: 0.6em;
  line-height: 1;
}

.dada-feature-icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

.dada-feature h4 {
  font-size: 1em;
  margin: 0 0 0.35em;
  font-weight: 700;
}

.dada-feature p {
  font-size: 0.92em;
  line-height: 1.55;
  color: var(--dada-text-secondary);
  margin: 0;
}

.dada-feature p a {
  color: var(--dada-accent);
  text-decoration: none;
}

.dada-feature p a:hover {
  text-decoration: underline;
}

/* --- How-it-works steps — 2 columns ---------------------- */
.dada-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4em;
  margin: 2em 0 0;
  counter-reset: step;
}

@media (max-width: 640px) {
  .dada-steps {
    grid-template-columns: 1fr;
  }
}

.dada-step {
  position: relative;
  padding: 1.6em 1.5em 1.4em;
  border: none;
  background: var(--color-background-secondary, var(--dada-bg-warm));
  counter-increment: step;
}

.dada-step::before {
  content: counter(step);
  position: absolute;
  top: -0.6em;
  left: 1.2em;
  background: var(--dada-accent);
  color: #fff;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  font-weight: 700;
}

.dada-step h4 {
  font-size: 1em;
  margin: 0.4em 0 0.35em;
  font-weight: 700;
}

.dada-step p {
  font-size: 0.92em;
  line-height: 1.55;
  color: var(--dada-text-secondary);
  margin: 0;
}

/* --- Persona cards (What section) — 2 columns ------------ */
.dada-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5em;
  margin: 2em 0 0;
}

@media (max-width: 640px) {
  .dada-cards {
    grid-template-columns: 1fr;
  }
}

.dada-card {
  border: none;
  padding: 1.8em 1.6em;
  background: var(--color-background-secondary, var(--dada-bg-warm));
  transition: transform 0.15s;
}

.dada-card:hover {
  transform: translateY(-2px);
}

.dada-card-icon {
  color: var(--dada-accent);
  margin-bottom: 0.6em;
  line-height: 1;
}

.dada-card-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

.dada-card h3 {
  font-weight: 700;
  font-size: 1.15em;
  margin: 0 0 0.4em;
  letter-spacing: -0.02em;
}

.dada-card p {
  font-size: 0.95em;
  line-height: 1.6;
  color: var(--dada-text-secondary);
  margin: 0 0 0.8em;
}

.dada-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dada-card li {
  margin-bottom: 0.2em;
  line-height: 1.25;
}

.dada-card li a {
  font-size: 0.92em;
  line-height: 1.25;
  text-decoration: none;
  color: var(--dada-accent);
}

.dada-card li a:hover {
  text-decoration: underline;
  color: var(--dada-accent);
}

.dada-card li a::before {
  content: '→ ';
  color: var(--dada-accent);
  font-weight: 700;
}

/* --- Specs highlight strip — even 4-column grid ---------- */
.dada-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
  margin: 2em 0 0;
}

@media (max-width: 640px) {
  .dada-specs {
    grid-template-columns: repeat(2, 1fr);
  }
}

.dada-spec {
  text-align: center;
  padding: 1em 0.8em;
  border: none;
  background: var(--color-background-secondary, var(--dada-bg-warm));
}

.dada-spec-value {
  font-weight: 700;
  font-size: 1.35em;
  letter-spacing: -0.02em;
  color: var(--color-foreground-primary);
}

.dada-spec-label {
  font-size: 0.78em;
  color: var(--dada-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.2em;
}

/* --- Footer links bar ------------------------------------ */
.dada-footer-links {
  text-align: center;
  margin: 2em 0 1em;
  padding-top: 1.5em;
  border-top: 2px solid var(--color-foreground-primary);
  font-size: 0.92em;
  color: var(--dada-text-secondary);
}

.dada-footer-links a {
  color: var(--color-foreground-primary);
  text-decoration: none;
}

.dada-footer-links a:hover {
  text-decoration: underline;
  color: var(--color-foreground-primary);
}

/* --- CTA grid (Get Involved section) --------------------- */
.dada-ctas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2em;
  margin: 2em 0 1.5em;
}

@media (max-width: 900px) {
  .dada-ctas {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .dada-ctas {
    grid-template-columns: 1fr;
  }
}

.dada-cta {
  padding: 1.4em 1.3em;
  border: none;
  background: var(--color-background-secondary, var(--dada-bg-warm));
}

.dada-cta h3 {
  font-weight: 700;
  font-size: 1.1em;
  margin: 0 0 0.4em;
  letter-spacing: -0.02em;
}

.dada-cta p {
  font-size: 0.95em;
  line-height: 1.6;
  color: var(--dada-text-secondary);
  margin: 0 0 1em;
}

.dada-cta-link {
  display: inline-block;
  font-weight: 700;
  font-size: 0.95em;
  color: var(--dada-accent) !important;
  text-decoration: none;
  transition: opacity 0.15s;
}

.dada-cta-link:hover {
  text-decoration: underline;
  opacity: 1;
}

/* Secondary links row (below main CTA grid) */
.dada-secondary-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1.5em;
  margin: 0.5em 0 2em;
}

.dada-secondary-links a {
  color: var(--dada-text-secondary, #6b7280);
  text-decoration: none;
}

.dada-secondary-links a:hover {
  color: var(--dada-accent);
  text-decoration: underline;
}

/* Pill-style secondary links */
.dada-pill {
  display: inline-block;
  padding: 0.45em 1.1em;
  border: 1.5px solid var(--color-foreground-border, #d1d5db);
  border-radius: 999px;
  color: var(--color-foreground-primary) !important;
  font-size: 1em;
  font-weight: 500;
  text-decoration: none !important;
  transition: border-color 0.15s, background 0.15s;
}

.dada-pill:hover {
  border-color: var(--dada-accent, #2563EB);
  background: var(--color-background-secondary, #f9fafb);
}

/* Full-width CTA banner (custom hardware) */
.dada-cta-wide {
  margin: 0;
  padding: 2em 1.8em;
  border: 2px solid var(--color-foreground-primary);
  border-radius: 0;
  background: var(--color-background-secondary, var(--dada-bg-warm));
}

.dada-cta-wide h3 {
  font-weight: 700;
  font-size: 1.15em;
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
}

.dada-cta-wide p {
  font-size: 0.95em;
  line-height: 1.6;
  color: var(--dada-text-secondary);
  margin: 0 0 1em;
}

.dada-cta-wide p a {
  color: var(--dada-accent);
  text-decoration: none;
}

.dada-cta-wide p a:hover {
  text-decoration: underline;
}

/* --- Newsletter signup (Keila form — website-exact layout) --- */
.dada-newsletter {
  text-align: center;
  margin: 3em 0 1em;
  padding: 2.5em 1.5em;
  border-top: 2px solid var(--color-foreground-primary);
}

.dada-newsletter h2 {
  font-weight: 700;
  font-size: 1.4em;
  letter-spacing: -0.02em;
  margin: 0 0 0.3em;
}

.dada-newsletter > p {
  font-size: 1em;
  color: var(--dada-text-secondary);
  margin: 0 0 1.5em;
}

/* Website-matching form structure */
.newsletter-form-wrapper {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}

.newsletter-form-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.newsletter-input-control {
  flex: 1 1 100%;
  min-width: 0;
}

.newsletter-button-control {
  flex: 1 1 100%;
}

.newsletter-input {
  border: 2px solid var(--color-foreground-primary);
  border-radius: 0;
  width: 100%;
  height: 3.25rem;
  padding: 0 1rem;
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-background-primary, #fff);
  color: var(--color-foreground-primary, #111);
  outline: none;
  box-sizing: border-box;
}

.newsletter-input:focus {
  border-color: var(--dada-accent);
}

.newsletter-input::placeholder {
  color: var(--dada-text-secondary);
}

.newsletter-button {
  white-space: nowrap;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.newsletter-captcha {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

@media (min-width: 769px) {
  .newsletter-form-group {
    gap: 0;
  }

  .newsletter-input-control {
    flex: 1 1 auto;
  }

  .newsletter-button-control {
    flex: 0 0 auto;
    width: auto;
  }
}

/* --- Explore-link button (matches dadamachines.com exactly) -- */
.explore-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem 1.25rem;
  border: 3px solid #111;
  background: transparent;
  border-radius: 0;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .1s;
  color: #111;
}

.explore-link:hover {
  transform: translateY(-1px);
  background: #111;
  color: #fff;
  border-color: #111;
}

/* .is-dark.is-reversed: filled black → outline on hover */
.explore-link.is-dark.is-reversed {
  background: #111 !important;
  color: #fff !important;
  border: 3px solid #111 !important;
}

.explore-link.is-dark.is-reversed:hover {
  background: transparent !important;
  color: #111 !important;
  border: 3px solid #111 !important;
  transform: translateY(-1px);
}

/* size variant */
.explore-link.is-large {
  font-size: 1.25rem;
  padding: .55rem 1.5rem;
}

/* --- Hardware page buttons --------------------------------------- */
/* Nav jump-link bar (at top of each hardware detail page) */
.hw-nav-btn {
  display: inline-block;
  padding: 0.6em 1.5em;
  border: 2px solid var(--color-foreground-primary);
  border-radius: 0;
  text-decoration: none !important;
  font-weight: 700;
  color: var(--color-foreground-primary) !important;
  transition: background 0.12s, color 0.12s;
}

.hw-nav-btn:hover {
  background: var(--color-foreground-primary);
  color: var(--color-background-primary) !important;
}

/* CTA variant — Buy/Contact in the nav bar, stands out with accent fill */
.hw-nav-btn.hw-cta {
  background: var(--dada-accent);
  color: #fff !important;
  border-color: var(--dada-accent);
}

.hw-nav-btn.hw-cta:hover {
  background: transparent;
  color: var(--dada-accent) !important;
}

/* Page-footer CTA buttons */
.hw-btn-primary {
  display: inline-block;
  padding: 0.6em 1.5em;
  background: var(--dada-accent);
  color: #fff !important;
  border: 2px solid var(--dada-accent);
  border-radius: 0;
  text-decoration: none !important;
  font-weight: 700;
  transition: background 0.12s, color 0.12s;
}

.hw-btn-primary:hover {
  background: transparent;
  color: var(--dada-accent) !important;
}

.hw-btn-secondary {
  display: inline-block;
  padding: 0.6em 1.5em;
  background: transparent;
  color: var(--color-foreground-primary) !important;
  border: 2px solid var(--color-foreground-primary);
  border-radius: 0;
  text-decoration: none !important;
  font-weight: 700;
  transition: background 0.12s, color 0.12s;
}

.hw-btn-secondary:hover {
  background: var(--color-foreground-primary);
  color: var(--color-background-primary) !important;
}

/* Mobile: stack all hardware buttons full-width */
@media (max-width: 640px) {
  .hw-nav-btn,
  .hw-btn-primary,
  .hw-btn-secondary {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* ----------------------------------------------------------------- */

/* --- Interview cards (Interviews landing page) ----------- */
.interview-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5em;
  margin: 2em 0 0;
}

@media (max-width: 640px) {
  .interview-cards {
    grid-template-columns: 1fr;
  }
}

.interview-card {
  display: block;
  border: none;
  overflow: hidden;
  background: var(--color-background-secondary);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s;
}

.interview-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.interview-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-background-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.interview-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.interview-card-placeholder {
  font-size: 2rem;
  font-weight: 700;
  color: var(--dada-text-secondary);
  letter-spacing: 0.05em;
}

.interview-card-body {
  padding: 1em 1.1em;
}

.interview-card-body h3 {
  font-weight: 700;
  font-size: 1.05em;
  margin: 0 0 0.2em;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 0;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--color-foreground-primary, #111);
}

.interview-card-meta {
  font-size: 0.82em;
  font-weight: 700;
  color: var(--color-foreground-primary, #111);
  margin: 0.2em 0 0;
}

/* --- Interview language switcher ------------------------- */
.interview-lang-switch {
  display: flex;
  gap: 0.6em;
  margin-bottom: 1.5em;
  font-size: 0.9em;
  font-weight: 700;
}

.interview-lang-switch a {
  text-decoration: none;
  color: var(--dada-accent);
  border: 1px solid var(--color-foreground-primary);
  border-radius: 0;
  padding: 0.2em 0.7em;
  transition: background 0.15s, color 0.15s;
}

.interview-lang-switch a:hover {
  background: var(--dada-accent);
  color: #fff;
}

.interview-lang-active {
  background: var(--color-foreground-primary, #111);
  color: var(--color-background-primary, #fff);
  border: 1px solid var(--color-foreground-primary, #111);
  border-radius: 0;
  padding: 0.2em 0.7em;
}

/* --- Sidebar copyright footer ---------------------------- */
/* .sidebar-container becomes the viewport-height sticky wrapper so
   .sidebar-copyright is always pinned at the bottom without scrolling.
   Furo puts height:100vh + position:sticky on .sidebar-sticky; we move
   those properties to .sidebar-container instead. */
.sidebar-container {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  overflow: hidden !important;
  position: sticky !important;
  top: 0 !important;
}

.sidebar-sticky {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  height: auto !important;      /* override Furo's height: 100vh */
  position: static !important;  /* override Furo's position: sticky */
}

.sidebar-copyright {
  flex-shrink: 0;
  padding: 0.8em 1.2em 1em;
  font-size: 0.75em;
  color: var(--color-foreground-muted, #6b7280);
  border-top: 1px solid var(--color-background-border);
  line-height: 1.5;
}

.sidebar-copyright a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Hide "Made with Sphinx and Furo" + its surrounding line from main footer
   (copyright already shown in sidebar) */
.bottom-of-page {
  display: none !important;
}

/* Also remove the top border Furo puts on <footer> since bottom-of-page
   is gone and there's nothing left below .related-pages.
   Add bottom padding to provide spacing at the end of the page. */
footer {
  border-top: none !important;
  padding-bottom: 3em !important;
}

/* --- Blog card grid ---------------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8em;
  margin: 1.5em 0 0;
}

@media (max-width: 540px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

.blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s;
}

.blog-card:hover {
  transform: translateY(-3px);
  text-decoration: none;
  color: inherit;
}

.blog-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-background-border);
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--dada-text-secondary);
  letter-spacing: 0.05em;
}

.blog-card-body {
  padding: 0.8em 0 0;
}

.blog-card-body h3 {
  font-weight: 700;
  font-size: 1.05em;
  margin: 0 0 0.35em;
  padding-left: 0 !important;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--color-foreground-primary, #111);
}

.blog-card-category {
  display: inline-block;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
  margin-bottom: 0.35em;
}

.blog-card-body p {
  font-size: 0.88em;
  line-height: 1.5;
  color: var(--dada-text-secondary);
  margin: 0 0 0.5em;
}

.blog-card-date {
  display: block;
  font-size: 0.82em;
  font-weight: 700;
  color: var(--color-foreground-primary, #111);
  margin-top: 0.2em;
}