/* Homepage surface contract. The page canvas stays transparent so the global
   tile can show through; sections and cards use the same light glass language
   as the sticky navbar without replacing their content colors. */
body.homepage {
  background: transparent !important;
  background-image: none !important;
}

/* The global coffee/Greek tile is the only artwork behind the homepage's
   opening surfaces. The older morning illustration created a second, opaque
   layer over it and made the top of the page feel visually disconnected. */
body.homepage .morning-surface::before,
body.homepage .morning-surface::after {
  display: none !important;
  background: none !important;
}
body.homepage .morning-surface {
  background: transparent !important;
}

/* Navbar surface contract: keep this small set of high-traffic homepage
   surfaces visually related to the sticky header without changing their
   existing content, layout, or RTL flow. */
body.homepage :is(
  #today,
  #guides,
  #deals,
  .today-coffee,
  #uploadAuth,
  .profile-login-dialog-card.kalimera-overlay-surface
) {
  background: var(--app-glass, rgba(255, 253, 249, .72)) !important;
  border: 1px solid rgba(22, 53, 71, .16);
  box-shadow: 0 6px 26px rgba(22, 53, 71, .07);
  -webkit-backdrop-filter: blur(var(--motion-blur-menu, 12px)) saturate(1.12);
  backdrop-filter: blur(var(--motion-blur-menu, 12px)) saturate(1.12);
}

body.homepage #today,
body.homepage #guides,
body.homepage #deals {
  background-image: none !important;
}

body.homepage #uploadAuth {
  color: var(--ink, #163547);
}

body.homepage #uploadAuth :is(h3, p, label, input, button) {
  color: inherit;
}

/* The modal login card is covered by a more specific legacy dark-surface
   rule, so mirror the navbar contract at that specificity as well. */
body.homepage .profile-login-dialog .profile-login-dialog-card.kalimera-overlay-surface {
  background: var(--app-glass, rgba(255, 253, 249, .72)) !important;
  border-color: rgba(22, 53, 71, .16) !important;
  box-shadow: 0 6px 26px rgba(22, 53, 71, .07) !important;
  -webkit-backdrop-filter: blur(var(--motion-blur-menu, 12px)) saturate(1.12) !important;
  backdrop-filter: blur(var(--motion-blur-menu, 12px)) saturate(1.12) !important;
  color: var(--ink, #163547) !important;
}

body.homepage .profile-login-dialog .profile-login-dialog-card.kalimera-overlay-surface
  :is(h2, p, label, .auth-message) {
  color: var(--ink, #163547) !important;
}

body.homepage main > :is(#today, #upload, #guides, #qa, #beans, #tips, #deals, #archive) {
  position: relative;
  isolation: isolate;
  /* Keep every homepage section on the same responsive, RTL-safe spacing rail. */
  box-sizing: border-box;
  width: auto;
  max-width: none;
  margin-block: clamp(18px, 2.4vw, 30px);
  margin-inline: clamp(10px, 2.4vw, 32px);
  padding-block: clamp(20px, 3vw, 36px);
  padding-inline: clamp(16px, 3vw, 36px);
  border: 1px solid var(--slice-border, rgba(16,47,63,.14));
  border-radius: 18px;
  box-shadow: 0 9px 28px rgba(16,47,63,.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  backdrop-filter: blur(16px) saturate(1.08);
}

body.homepage :is(
  .today-coffee,
  .featured-loader-waiting,
  .upload-card,
  .guide-card,
  .calculator-card,
  .freshness-card,
  .bean-card,
  .deal-card,
  .deals-page-card,
  .gallery-item,
  .qa-question,
  .tips-grid article,
  .deals-loading,
  .empty-state
) {
  border-color: var(--slice-border, rgba(16,47,63,.14));
  box-shadow: 0 9px 28px rgba(16,47,63,.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  backdrop-filter: blur(16px) saturate(1.08);
}

/* Troubleshooting gets a deliberate section box instead of loose cards over
   the page canvas. */
body.homepage #qa .qa-grid {
  margin-inline: 0;
  padding: 18px;
  border: 1px solid var(--slice-border, rgba(16,47,63,.14));
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(255,253,249,.94), rgba(244,249,247,.96));
  box-shadow: 0 9px 28px rgba(16,47,63,.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  backdrop-filter: blur(16px) saturate(1.08);
}

@media (max-width: 700px) {
  body.homepage main > :is(#today, #upload, #guides, #qa, #beans, #tips, #deals, #archive) {
    margin-block: 10px;
    margin-inline: 10px;
    padding-block: 16px;
    padding-inline: 12px;
    border-radius: 14px;
  }
  body.homepage #qa .qa-grid { padding: 12px; border-radius: 14px; }
  body.homepage :is(#today, #guides, #deals, .today-coffee, #uploadAuth, .profile-login-dialog-card.kalimera-overlay-surface) {
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.homepage main > :is(#today, #upload, #guides, #qa, #beans, #tips, #deals, #archive),
  body.homepage :is(.today-coffee,.featured-loader-waiting,.upload-card,.guide-card,.calculator-card,.freshness-card,.bean-card,.deal-card,.deals-page-card,.gallery-item,.qa-question,.tips-grid article,.deals-loading,.empty-state),
  body.homepage #qa .qa-grid {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}