/* =============================================================================
   Footer Ad Bar
   Sticky fixed bar at the bottom of the viewport.
   - Slides up after a JS-controlled delay
   - Collapses/expands via the toggle tab above it
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Bar wrapper
   --------------------------------------------------------------------------- */
.ipd-footer-ad-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    max-width: 1000px;
    width: 100%;
    z-index: 9999;
    background: #ffffff;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
    text-align: center;

    /* translateX(-50%) centres the bar; translateY(100%) hides it below viewport */
    transform: translateX(-50%) translateY(100%);
    transition: transform 0.45s ease;
}

/* Slide up into view (added by JS after delay) */
.ipd-footer-ad-bar.is-visible {
    transform: translateX(-50%) translateY(0);
}

/*
   Collapsed: slide bar back down.
   The toggle tab (positioned 30px above the bar) remains visible
   at the very bottom of the viewport because it travels with the bar.
*/
.ipd-footer-ad-bar.is-collapsed {
    transform: translateX(-50%) translateY(100%);
}

/* ---------------------------------------------------------------------------
   Toggle tab  — sits above the bar, centered
   --------------------------------------------------------------------------- */
.ipd-footer-ad-toggle {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);

    width: 60px;
    height: 30px;
    padding: 0;

    background: #ffffff;
    border: none;
    border-radius: 6px 6px 0 0;
    box-shadow: -2px -2px 8px rgba(0, 0, 0, 0.32);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Hidden until the bar has been revealed */
    opacity: 0;
    transition: opacity 0.3s ease, background 0.2s ease;
}

.ipd-footer-ad-toggle:hover {
    background: #f5f5f5;
}

/* Remove default browser outline; restore a subtle ring for keyboard nav only */
.ipd-footer-ad-toggle:focus {
    outline: none;
}

.ipd-footer-ad-toggle:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.15);
    outline-offset: 2px;
}

/* Show the toggle once the bar is visible */
.ipd-footer-ad-bar.is-visible .ipd-footer-ad-toggle {
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   Chevron arrow inside the toggle
   --------------------------------------------------------------------------- */
.ipd-footer-ad-arrow {
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #555555;
    border-bottom: 2px solid #555555;

    /* Points down (↓) — click collapses the bar */
    transform: rotate(45deg);
    margin-top: -4px; /* optical vertical centering */
    transition: transform 0.3s ease, margin 0.3s ease;
}

/* Points up (↑) when bar is collapsed — click reopens */
.ipd-footer-ad-bar.is-collapsed .ipd-footer-ad-arrow {
    transform: rotate(-135deg);
    margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   Content area
   --------------------------------------------------------------------------- */
.ipd-footer-ad-content {
    padding: 10px 16px;
}

/* Strip any default widget margins from setup.php */
.ipd-footer-ad-content .widget {
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------------------------------
   Ad image
   --------------------------------------------------------------------------- */
.ipd-footer-ad-link {
    display: block;
    line-height: 0; /* remove inline gap below image */
}

/*
   Default: enforce 728×90 crop.
   The image fills the leaderboard ratio regardless of its original dimensions.
*/
.ipd-footer-ad-image {
    display: block;
    width: 100%;
    aspect-ratio: 728 / 90;
    object-fit: cover;
    object-position: center;
    margin: 0 auto;
}

/*
   Natural ratio: opted in via widget checkbox.
   Removes the enforced crop and lets the image scale freely.
*/
.ipd-footer-ad-image--natural {
    aspect-ratio: auto;
    object-fit: initial;
    height: auto;
}