/* SweetJobs consent banner + ad slot styling.
   Loaded after theme.css so vars like --sj-honey / --sj-warm-brown
   are available. Everything here is opt-in: nothing renders unless
   the banner or ad-slot DOM is present. */

/* ── Consent banner ─────────────────────────────────────────────── */
.sj-consent-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 1080;
    background: var(--sj-white, #fff);
    border: 1px solid var(--sj-border, #e8dfd4);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(107, 79, 54, 0.18);
    padding: 1rem 1.25rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.sj-consent-banner-inner {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}
.sj-consent-text { flex: 1 1 280px; min-width: 0; }
.sj-consent-text strong {
    display: block;
    color: var(--sj-warm-brown, #6b4f36);
    margin-bottom: 0.15rem;
}
.sj-consent-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
@media (max-width: 575.98px) {
    .sj-consent-actions { width: 100%; justify-content: stretch; }
    .sj-consent-actions .btn { flex: 1 1 auto; }
}

/* Footer "Cookie preferences" link */
.sj-cookie-prefs-link {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}
.sj-cookie-prefs-link:hover { color: var(--sj-honey, #d4a843); }

/* ── Ad slots ──────────────────────────────────────────────────── */
.sj-ad-slot {
    /* Reserve space to prevent CLS while ad loads. */
    position: relative;
    margin: 1rem auto;
    text-align: center;
    background: var(--sj-cream, #faf7f2);
    border: 1px dashed var(--sj-border, #e8dfd4);
    border-radius: 8px;
    overflow: hidden;
}
.sj-ad-slot::before {
    content: 'Sponsored';
    position: absolute;
    top: 4px;
    left: 8px;
    font-size: 0.7rem;
    color: var(--sj-muted, #8a7d72);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.sj-ad-slot .sj-ad-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--sj-muted, #8a7d72);
    font-size: 0.85rem;
}

/* Leaderboard slot (top of content). 90 desktop, 50 mobile. */
.sj-ad-slot.sj-ad-leaderboard {
    min-height: 90px;
    max-width: 970px;
}
@media (max-width: 767.98px) {
    .sj-ad-slot.sj-ad-leaderboard { min-height: 100px; }
}

/* Right rail (sticky on desktop). Reserved for high-value pages only;
   avoid placing above content the user needs to read first. */
.sj-ad-slot.sj-ad-rail {
    min-height: 600px;
    max-width: 300px;
    margin: 0 auto;
}
@media (max-width: 991.98px) {
    .sj-ad-slot.sj-ad-rail { display: none; }
}
.sj-ad-rail-wrap {
    position: sticky;
    top: 80px; /* below sticky navbar */
}

/* Sidebar medium rectangle. Goes at the bottom of a sidebar AFTER the
   primary content/CTAs. Not sticky \u2014 it's a quiet footer-style block. */
.sj-ad-slot.sj-ad-sidebar {
    min-height: 250px;
    max-width: 300px;
    margin: 0 auto 1.5rem;
}
@media (max-width: 991.98px) {
    /* On mobile the sidebar stacks below content; keep the ad but
       allow full width for better visibility. */
    .sj-ad-slot.sj-ad-sidebar { max-width: 336px; }
}

/* In-feed sponsored card — sized to match job-card rhythm so the
   "Sponsored" block reads as a natural item in the result list rather
   than a sidebar widget. */
.sj-ad-slot.sj-ad-infeed {
    min-height: 130px;
    max-width: none;
    margin: 0 0 1rem;
    text-align: left;
}

/* Mid-content (job detail body). */
.sj-ad-slot.sj-ad-incontent {
    min-height: 250px;
    max-width: 728px;
}

/* Mobile anchor (fixed bottom; mobile only). */
.sj-ad-slot.sj-ad-anchor {
    display: none;
}
@media (max-width: 767.98px) {
    .sj-ad-slot.sj-ad-anchor {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        min-height: 60px;
        margin: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        background: var(--sj-white, #fff);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    /* Lift the back-to-top button above the anchor so they don't overlap. */
    body.sj-has-anchor-ad #sjBackToTop { bottom: 80px; }
    /* Pad page bottom so the anchor ad never covers footer content. */
    body.sj-has-anchor-ad { padding-bottom: 70px; }
}