/* CSS/upgrade-banner.css
 *
 * The quiet strip that sits under an advertisement (components/upgrade-banner.php).
 *
 * Tone follows .city-callout in city-pages.css: a faint brand tint, a hairline
 * brand border, small type. It has to read as a footnote to the ad, not as a
 * second advertisement — if it shouts louder than the paid unit above it, the
 * page looks cheaper and the ad looks worse.
 *
 * Two hard rules, both AdSense policy rather than taste:
 *   1. Never overlap, cover or float over the ad. Everything here is in normal
 *      flow; there is no position:absolute/fixed and no transform.
 *   2. Keep a visible gap and a different surface colour from the ad box, so the
 *      link can never be mistaken for part of the ad creative.
 *
 * Nothing here loads late or resizes after paint, so the strip cannot cause
 * layout shift: it is static HTML with a fixed line box.
 */

/* `p.` rather than `.` because the strip is a <p>, and both city-pages.css
 * (`.city-section p`) and the page stylesheets style bare paragraphs. Matching
 * their specificity keeps the strip looking the same wherever it is dropped in. */
p.upgrade-banner {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.45rem;
    /* Own margins, stated in full: the surrounding stylesheets set paragraph
     * margins that would otherwise leak in. The top margin is overridden per
     * ad slot below. */
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.7rem;
    max-width: none;
    background: rgba(var(--rgb-primary), 0.06);
    border: 1px solid rgba(var(--rgb-primary), 0.18);
    border-radius: var(--border-radius-3);
    color: var(--color-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: left;
}

.upgrade-banner-icon {
    flex: 0 0 auto;
    width: 0.95rem;
    height: 0.95rem;
    /* Decorative, so the brand orange needs no text contrast. It marks the strip
     * as BorderTanker's own voice rather than ad copy. */
    color: var(--color-primary);
    /* Nudged onto the text baseline; align-items:baseline does not apply to a
     * replaced element the way it does to the text next to it. */
    transform: translateY(0.12rem);
}

.upgrade-banner-text {
    flex: 1 1 14rem;
    min-width: 0;
}

/* Higher specificity than `.city-section p a`, which paints inline links in
 * --color-primary. That orange is ~2.3:1 on white and would fail here; the link
 * is body-text dark with a brand-coloured underline instead. */
p.upgrade-banner .upgrade-banner-link {
    flex: 0 0 auto;
    /* #212529 on the tinted background: ~15:1. */
    color: var(--color-text);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

p.upgrade-banner .upgrade-banner-link:hover,
p.upgrade-banner .upgrade-banner-link:focus-visible {
    /* #c9633a on the tint: ~3.9:1, so it is never the only cue — the underline
     * and the weight carry the affordance, the colour is the hover feedback. */
    color: var(--color-primary-700);
    text-decoration-color: var(--color-primary-700);
}

p.upgrade-banner .upgrade-banner-link:focus-visible {
    outline: 2px solid var(--color-primary-700);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
 * Binding the strip to its ad
 *
 * Each ad block brings its own bottom margin, which would leave the strip
 * drifting halfway to the next section instead of reading as a note on the ad
 * above it. Cancelling that margin from here keeps border-benefit.css and
 * city-pages.css untouched. The gap that remains (0.5rem) is deliberate: the
 * strip must stay visibly separate from the ad frame.
 * -------------------------------------------------------------------------- */

/* .benefit-ad-section — margin: 1.25rem 0 2rem */
.benefit-ad-section + p.upgrade-banner {
    margin-top: calc(0.5rem - 2rem);
    margin-bottom: 2rem;
}

/* .city-ad-section — .city-section gives it margin-bottom: 2.75rem */
.city-ad-section + p.upgrade-banner {
    margin-top: calc(0.5rem - 2.75rem);
    margin-bottom: 2.75rem;
}

/* Inside a station table ad row: match the ad's own width and the viewport's
 * padding, so the strip sits squarely under the ad instead of spanning the
 * whole table. */
.city-table-ad-viewport + p.upgrade-banner {
    width: min(100%, 640px);
    margin: 0 auto 0.8rem;
}

.city-station-table td > p.upgrade-banner {
    /* The row cell has padding:0; keep the strip off the table's edges. */
    max-width: calc(100% - 1.6rem);
}

/* station.php / map.php station-list ads — margin: 10px 0 */
.station-list-ad + p.upgrade-banner {
    margin-top: 0;
}

@media (max-width: 480px) {
    p.upgrade-banner {
        /* At 360px the sentence needs the full width; letting the link sit on
         * its own line keeps it a comfortable tap target and stops the price
         * from being orphaned. */
        gap: 0.35rem 0.45rem;
        font-size: 0.78rem;
    }

    .upgrade-banner-text {
        flex: 1 1 100%;
    }
}