/* =====================================================================
   Block D – Custom additions (adviris.de)
   Loaded after main.css via inc/assets.php ($css['custom']).
   D1 Infokasten · D2 Inline CTA · D3 Header registration button.
   Header buttons bottom bar: ≤1250px | Menu burger: ≤840px (default)
   ===================================================================== */

/* =====================================================================
   Block A – Blog article CSS fixes
   .main-content  → page.php / single.php
   .blog-article-hero .post-item .post__content → single-post.php
   Using 3-class specificity to override main.css rules at same level.
   ===================================================================== */

/* A1 – List indentation */
.main-content ul,
.main-content ol,
.blog-article-hero .post-item .post__content ul,
.blog-article-hero .post-item .post__content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.main-content li,
.blog-article-hero .post-item .post__content li {
    margin-bottom: 0.25rem;
    line-height: 1.65;
}

/* A2 – Heading hierarchy */
.main-content h2,
.blog-article-hero .post-item .post__content h2 {
    font-size: 2rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.main-content h3,
.blog-article-hero .post-item .post__content h3 {
    font-size: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.main-content h4,
.blog-article-hero .post-item .post__content h4 {
    font-size: 1.2rem;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

/* A3 – Bold / font-weight
   Agrandir-TextBold @font-face uses font-weight: bold (= 700) */
.main-content strong,
.main-content b,
.blog-article-hero .post-item .post__content strong,
.blog-article-hero .post-item .post__content b {
    font-weight: bold;
    font-family: inherit;
}

/* A4 – Line height */
.main-content p,
.blog-article-hero .post-item .post__content p,
.blog-article-hero .post-item .post__content > p {
    line-height: 1.65;
}

/* A5 – Image display */
.main-content img,
.blog-article-hero .post-item .post__content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 1.5rem;
}
.main-content .aligncenter,
.blog-article-hero .post-item .post__content .aligncenter {
    margin-left: auto;
    margin-right: auto;
}
.main-content .alignleft,
.blog-article-hero .post-item .post__content .alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}
.main-content .alignright,
.blog-article-hero .post-item .post__content .alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}
@media (max-width: 768px) {
    .main-content .alignleft,
    .main-content .alignright,
    .blog-article-hero .post-item .post__content .alignleft,
    .blog-article-hero .post-item .post__content .alignright {
        float: none;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ── D3 – Registration CTA in Header ─────────────────────────────────────── */
/* Styled like .post-inline-cta: mint→peach gradient, arrow that nudges
   right on hover, existing dark offset shadow from .button base class. */

.header__buttons a.button.register {
    -webkit-transition: -webkit-box-shadow 0.25s ease;
    transition: -webkit-box-shadow 0.25s ease;
    -o-transition: box-shadow 0.25s ease;
    transition: box-shadow 0.25s ease;
    transition: box-shadow 0.25s ease, -webkit-box-shadow 0.25s ease;
}

.header__buttons a.button.register > span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.5rem;
    background: #ffeadd;
    background: conic-gradient(from 4deg at 50% 50%, #e3f8ee 0, #ffeadd 100%);
    color: #1d1d1b;
    -webkit-transition: background 0.25s ease, color 0.25s ease;
    -o-transition: background 0.25s ease, color 0.25s ease;
    transition: background 0.25s ease, color 0.25s ease;
}

/* Arrow — same as post-inline-cta */
.header__buttons a.button.register > span::after {
    content: "\2192";
    font-family: inherit;
    font-size: 1rem;
    line-height: 1;
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: -webkit-transform 0.25s ease;
    -o-transition: transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}

/* Hover: invert to dark + arrow nudges right */
.header__buttons a.button.register:hover > span {
    background: #1d1d1b;
    color: #fff;
}

.header__buttons a.button.register:hover > span::after {
    -webkit-transform: translateX(0.3rem);
    -ms-transform: translateX(0.3rem);
    transform: translateX(0.3rem);
}

/* Dark offset shadow inherited from .button base; just set its color */
.header__buttons a.button.register::after {
    background: #1d1d1b;
}

/* Extend fixed bottom bar from 1100px → 1250px to match the burger breakpoint */
@media screen and (max-width: 1250px) and (min-width: 481px) {
    .header__buttons {
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        background: #fff;
        padding: 0.8125rem 0.9375rem;
    }
    /* 3 buttons flex-share the bar equally */
    .header__buttons a.button {
        width: auto;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
        flex: 1 1 0;
    }
    .header__buttons a.button > span {
        min-width: 0;
        padding-left: 0.625rem;
        padding-right: 0.625rem;
        white-space: nowrap;
    }
}

/* Mobile ≤480px: Registrieren full-width on top row */
@media (max-width: 480px) {
    .header__buttons {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .header__buttons a.button.register {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
    }
    .header__buttons a.button:not(.register) {
        -ms-flex-preferred-size: calc(50% - 0.25rem);
        flex-basis: calc(50% - 0.25rem);
        max-width: calc(50% - 0.25rem);
    }
    .header__buttons a.button > span {
        min-width: 0;
    }
}

/* ── Infokasten (D1 – Info Box) ───────────────────────────────────────────── */

.infokasten {
    position: relative;
    background: #efe9fd;
    border-left: 4px solid #1d1d1b;
    padding: 1.75rem 2rem 1.875rem;
    margin: 2.5rem 0;
    -webkit-box-shadow: 4px 4px 0 #1d1d1b;
    box-shadow: 4px 4px 0 #1d1d1b;
}

.infokasten p {
    font-size: 1rem;
    line-height: 1.6;
    color: #1d1d1b;
    margin: 0;
}

.infokasten strong {
    font-weight: 700;
    font-family: Agrandir, sans-serif;
}

/* Optional heading — [infokasten heading="..."] */
.infokasten__heading {
    font-family: Agrandir, sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.4;
    color: #1d1d1b;
    margin: 0 0 0.5rem;
}

@media (max-width: 768px) {
    .infokasten {
        padding: 1.25rem 1.25rem 1.375rem;
        margin: 1.875rem 0;
    }
    .infokasten__heading {
        font-size: 1.0625rem;
        margin-bottom: 0.375rem;
    }
}

/* ── D2 – Inline CTA Button inside Blog Articles ─────────────────────────── */

.post-inline-cta,
.post-inline-cta--secondary {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.625rem;
    position: relative;
    font-family: Cirka, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.02em;
    padding: 0.875rem 1.5rem 1rem;
    text-decoration: none;
    vertical-align: middle;
    margin: 0.25rem 0 0.5rem;
    -webkit-transition: -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
    transition: -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
    -o-transition: transform 0.25s ease, box-shadow 0.25s ease;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    transition: transform 0.25s ease, box-shadow 0.25s ease, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
}

/* Arrow that nudges right on hover */
.post-inline-cta::after,
.post-inline-cta--secondary::after {
    content: "\2192";
    font-size: 1.0625rem;
    line-height: 1;
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: -webkit-transform 0.25s ease;
    -o-transition: transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}

.post-inline-cta:hover::after,
.post-inline-cta--secondary:hover::after {
    -webkit-transform: translateX(0.25rem);
    -ms-transform: translateX(0.25rem);
    transform: translateX(0.25rem);
}

/* Press-into-shadow: button slides into its offset shadow on hover */
.post-inline-cta:hover,
.post-inline-cta--secondary:hover {
    -webkit-transform: translate(4px, 4px);
    -ms-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
}

/* Primary — mint→peach conic gradient */
.post-inline-cta {
    color: #1d1d1b;
    background: #ffeadd;
    background: conic-gradient(from 4deg at 50% 50%, #e3f8ee 0, #ffeadd 100%);
    -webkit-box-shadow: 4px 4px 0 0 #1d1d1b;
    box-shadow: 4px 4px 0 0 #1d1d1b;
}

.post-inline-cta:hover {
    -webkit-box-shadow: 0 0 0 0 #1d1d1b;
    box-shadow: 0 0 0 0 #1d1d1b;
}

/* Secondary — dark with colored offset, reveals gradient on hover */
.post-inline-cta--secondary {
    color: #fff;
    background: #1d1d1b;
    -webkit-box-shadow: 4px 4px 0 0 #e0e9fd;
    box-shadow: 4px 4px 0 0 #e0e9fd;
}

.post-inline-cta--secondary:hover {
    color: #1d1d1b;
    background: #e0e9fd;
    background: conic-gradient(from 4deg at 50% 50%, #e3f8ee 0, #ffeadd 100%);
    -webkit-box-shadow: 0 0 0 0 #e0e9fd;
    box-shadow: 0 0 0 0 #e0e9fd;
}

@media (max-width: 768px) {
    .post-inline-cta,
    .post-inline-cta--secondary {
        padding: 0.75rem 1.25rem 0.875rem;
    }
    .post-inline-cta {
        -webkit-box-shadow: 3px 3px 0 0 #1d1d1b;
        box-shadow: 3px 3px 0 0 #1d1d1b;
    }
    .post-inline-cta--secondary {
        -webkit-box-shadow: 3px 3px 0 0 #e0e9fd;
        box-shadow: 3px 3px 0 0 #e0e9fd;
    }
    .post-inline-cta:hover,
    .post-inline-cta--secondary:hover {
        -webkit-transform: translate(3px, 3px);
        -ms-transform: translate(3px, 3px);
        transform: translate(3px, 3px);
    }
}

/* ── B2 – Specificity overrides for inline CTA inside single post ─────────
   Theme rule: .post-item .post__content > a { display:block; min-height:3.5rem }
   Specificity: 0,2,1  →  our selectors use 0,4,0 to win without !important.
   Applied only inside .blog-article-hero so blog-listing cards are untouched. */

.blog-article-hero .post-item .post__content .post-inline-cta,
.blog-article-hero .post-item .post__content .post-inline-cta--secondary {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: auto;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    min-height: unset;
    margin-bottom: 0.5rem;
}

/* Restore correct text colours overridden by theme link rules */
.blog-article-hero .post-item .post__content .post-inline-cta {
    color: #1d1d1b;
}
.blog-article-hero .post-item .post__content .post-inline-cta--secondary {
    color: #fff;
}
.blog-article-hero .post-item .post__content .post-inline-cta--secondary:hover {
    color: #1d1d1b;
}

/* ── Backend spacing control ──────────────────────────────────────────────
   Editors can set spacing per element without touching CSS:
   [infokasten spacing="compact|large"]...[/infokasten]
   [button url="..." text="..." spacing="compact|large"]
   No "spacing" param = default Block D spacing (rules above stay unchanged). */

.infokasten.awc-spacing-compact {
    margin: 1.25rem 0;
}
.infokasten.awc-spacing-large {
    margin: 3.75rem 0;
}
@media (max-width: 768px) {
    .infokasten.awc-spacing-compact {
        margin: 0.9375rem 0;
    }
    .infokasten.awc-spacing-large {
        margin: 2.8125rem 0;
    }
}

.post-inline-cta.awc-spacing-compact,
.post-inline-cta--secondary.awc-spacing-compact {
    margin: 0 0 0.25rem;
}
.post-inline-cta.awc-spacing-large,
.post-inline-cta--secondary.awc-spacing-large {
    margin: 1.5rem 0 2rem;
}
@media (max-width: 768px) {
    .post-inline-cta.awc-spacing-large,
    .post-inline-cta--secondary.awc-spacing-large {
        margin: 1rem 0 1.5rem;
    }
}
