/**
 * qa17-webinare-ondemand-cta.css
 * Pages: /de/hilfecenter/webinare/  +  /en/help-center/webinars/   — Batch #17 item 2.
 *        The "Media library / On-Demand Webinars" list — section.webinare-jtl-on-demand.
 *
 * Each on-demand item's "Jetzt ansehen" / recording button renders as the base
 * `a.bordered-orange-link` — the OLD outlined-orange treatment (transparent fill,
 * orange border, grey #333 label from StudyAccordion/style.css:325). The redesign's
 * current orange CTA is the FILLED `.btn-orange` pill (Figma node 335:2067, see
 * custom-clone.css:743): solid #fb581f, JTL Dark-Blue #0b1b45 label, Inter SemiBold
 * 16/24, 0.32px tracking, 12/24 padding, pill radius, hover #e34813.
 *
 * Restyle these buttons to that filled-orange design so they match the rest of the
 * site's primary CTAs. Applied to BOTH languages (rule 18) via the structural
 * section class, which exists only on the two webinars pages.
 *
 * WHY THE ORIGINAL VERSION OF THIS SHEET CHANGED NO PIXELS (JP-948).
 * Setting `background` on the anchor is not enough, and the earlier root cause
 * recorded here — "these buttons sit outside custom-clone.css:5427" — was wrong.
 * Measured 2026-07-10 on the clone: that selector DOES match, this sheet DOES
 * load, and the anchor's computed background really is #fb581f. The button still
 * renders yellow because the legacy base rule in the compiled theme bundle
 * (dist/app.css) is
 *
 *     .bordered-orange-link         { position: relative; z-index: 0;
 *                                     background: linear-gradient(64deg,#FF9A26,#FFC935); }
 *     .bordered-orange-link::before { position:absolute; inset:0; z-index:-2;
 *                                     background: linear-gradient(64deg,#FF9A26,#FFC935); }
 *     .bordered-orange-link::after  { position:absolute; inset:0; z-index:-1; opacity:0;
 *                                     background: linear-gradient(64deg,#FFC935,#FF9A26); }
 *
 * `z-index:0` makes the anchor a stacking context, and inside one, a negative-z
 * child paints AFTER the element's own background but BEFORE its content. So
 * ::before's yellow gradient covers whatever background-color we set on the
 * anchor — the orange is there, underneath, permanently hidden. ::after is the
 * hover cross-fade, so on hover the yellow would bloom back in over the orange.
 * Killing both pseudos is therefore the fix; recolouring them is not enough,
 * because the shape (radius:inherit) and the hover transition come along too.
 *
 * Scoped to the section, NOT to `.bordered-orange-link` globally: the same class
 * is the site-wide header "Beratung vereinbaren" CTA (nav-left.php, footer.php),
 * and 7 of the 8 instances on this very page are that header button
 * (css-override.md §2 — never blanket-recolour a theme default).
 */

section.webinare-jtl-on-demand a.bordered-orange-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fb581f !important;
    background-image: none !important;
    /* Figma 335:2067 has no stroke. The 2px border this sheet used to add made the
       button 52px tall against the design's 48px — padding + line box only. */
    border: 0 !important;
    /* `.webinare-rebuild-filter .btn-wrapper a` (dist/app.css:75574) paints a 2px
       inset #333 ring via box-shadow, so the pill kept a dark outline even after
       `border: 0` — an inset shadow is not a border and is not removed by one. */
    box-shadow: none !important;
    border-radius: 145px !important;             /* Figma: 145.323px */
    padding: 12px 24px !important;
    /* The base pins `height: 46px`, which fights the padding and makes this
       button a different size from every other primary CTA. `.btn-orange`
       (custom-clone.css:743) derives its height from 12px padding + 24px line
       box; let this one do the same -> 48px, matching Figma. */
    height: auto !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
    color: #0b1b45 !important;
}
/* The two gradient layers described above. `content: none` suppresses the boxes
   outright rather than repainting them, which also drops the 300ms hover
   cross-fade that would otherwise wash orange back to yellow. */
section.webinare-jtl-on-demand a.bordered-orange-link::before,
section.webinare-jtl-on-demand a.bordered-orange-link::after {
    content: none !important;
}
/* The label sits in a child <span class="text"> — carry the Dark-Blue there too so
   the StudyAccordion `color:#333 !important` on the anchor can't leak through.
   The base also pins the span to `font-weight:700; line-height:22px`, which beats
   the anchor's own typography by proximity; restate the `.btn-orange` metrics here
   or the label renders Bold/22 instead of SemiBold/24. */
section.webinare-jtl-on-demand a.bordered-orange-link .text,
section.webinare-jtl-on-demand a.bordered-orange-link span {
    color: #0b1b45 !important;
}
section.webinare-jtl-on-demand a.bordered-orange-link .text {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
}
section.webinare-jtl-on-demand a.bordered-orange-link:hover,
section.webinare-jtl-on-demand a.bordered-orange-link:focus,
section.webinare-jtl-on-demand a.bordered-orange-link:focus-visible {
    background: #e34813 !important;
    color: #0b1b45 !important;
}
section.webinare-jtl-on-demand a.bordered-orange-link:hover .text,
section.webinare-jtl-on-demand a.bordered-orange-link:hover span {
    color: #0b1b45 !important;
}