/* ============================================================
   RESOURCES (/resources/*)
   Small additions to the sd-* Elementor classes for the pages
   built by migration/resources/build.php. The scorecard tool has
   its own scoped stylesheet (scorecard.css).
   ============================================================ */

/* --- Cover and spread images: hard offset shadow, as in the guide --- */
/* .elementor img resets border and shadow, so these need the extra class. */
.elementor .sd-rx-cover img,
.elementor .sd-rx-shot img,
.elementor .sd-rx-thumb img {
    box-shadow: 14px 14px 0 rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.elementor .sd-rx-thumb img { box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.35); }

/* --- Index cards: the title is a link, keep it white until hover --- */
.sd-rx-card .elementor-heading-title a { color: inherit; text-decoration: none; transition: color 0.2s; }
.sd-rx-card .elementor-heading-title a:hover { color: var(--sd-accent); }

/* --- Download gate popup: form state, then success state --- */
.sd-gate .sd-gate-success { display: none; }
.sd-gate[data-state="success"] .sd-gate-form { display: none; }
.sd-gate[data-state="success"] .sd-gate-success { display: flex; }
.sd-gate .elementor-widget-text-editor a { color: var(--sd-accent); }

/* Local stand-in for the HubSpot form (local environment only) */
.sd-gate-placeholder { display: flex; flex-direction: column; gap: 14px; }
.sd-gate-placeholder label {
    display: flex; flex-direction: column; gap: 8px;
    font-family: 'Space Mono', monospace; font-size: 0.65rem;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--sd-muted);
}
.sd-gate-placeholder input {
    font: 400 1rem 'Space Grotesk', sans-serif; color: var(--sd-fg);
    background: var(--sd-bg); border: 1px solid var(--sd-border); padding: 14px 16px;
}
.sd-gate-placeholder input:focus { outline: none; border-color: var(--sd-accent); }
.sd-gate-placeholder button {
    font: 700 0.8rem 'Space Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--sd-bg); background: var(--sd-accent); border: 0; padding: 18px; cursor: pointer;
}
.sd-gate-placeholder button:hover { background: #c8911e; }
.sd-gate-fine { font-size: 0.75rem; line-height: 1.6; color: var(--sd-muted); margin: 0; }
.sd-gate-fine code { color: var(--sd-accent); }

/* --- Scorecard page: printing the results --- */
@media print {
    #mainNav, body > footer, .sd-print-hide, .elementor-location-popup { display: none !important; }
    body, .sd-hero, .sd-scorecard-band, .e-con { background: #fff !important; }
    .sd-hero::before { display: none !important; }
    .sd-hero { padding: 0 0 18pt !important; min-height: 0 !important; }
    .sd-hero .elementor-heading-title { color: #0C2340 !important; }
    .sd-hero .elementor-widget-text-editor { color: #55657E !important; }
}

/* --- Tool pages: once results are scored, the results carry the guide CTA, so drop the band below --- */
body:has(.sc-results[data-state="scored"]) .sd-guide-cross { display: none; }

/* --- Related videos band on the resource pages (empty when there are none) --- */
.sd-videos-band .sd-related-videos { max-width: 1280px; margin: 0 auto; padding: 72px 40px 0; }
.sd-videos-band .sd-related-videos:last-child { padding-bottom: 72px; }
@media (max-width: 767px) { .sd-videos-band .sd-related-videos { padding: 48px 20px 0; } }