/* ==========================================================================
   Szekely Design — single post
   Loaded only on single posts (see szekely-design.php). Tokens (--sd-*)
   come from szekely-design.css; the reaction row, comment preview and
   pill share their rules with the archive cards (szekely-design-cards.css).

   Body classes (includes/single-post.php):
     .sd-single--quote    one-liner, no image: centred, larger, quote marks
     .sd-single--text     a few sentences
     .sd-single--article  long text or headings/lists: reading column
     .sd-single--has-image / --no-image

   Why some rules need !important: the single template (in the database)
   puts inline styles on the post content (font size 1.25–2em, weight 500,
   colour, side padding), and the child theme styles every paragraph as a
   pill-shaped bubble with !important padding/margins. Inline styles and
   !important rules can only be overridden with !important.
   ========================================================================== */

body.sd-single {
    --sd-read: 610px;           /* reading column: 377 + 233 */
    --sd-text: #2b2b2b;
    --sd-title: var(--color-two, #013A63);
}

/* --------------------------------------------------------------------------
   Frame: one centred reading column for the whole post
   -------------------------------------------------------------------------- */

body.sd-single .content_sajat_frame {
    min-width: 0;
    animation: sd-single-fade-in var(--sd-slow) var(--sd-ease) both;
}

body.sd-single .content_sajat_frame > * {
    max-width: var(--sd-read);
    margin-left: auto;
    margin-right: auto;
}

/* The related-posts strip (.horizontal-scroll-container_single_post) is
   docked to the bottom of the screen (position: fixed, ~211px tall). Room
   below the post so the end of a long article can scroll clear of it. */
body.sd-single .content_sajat {
    padding-bottom: calc(var(--sd-144) + var(--sd-89));
}

@keyframes sd-single-fade-in {
    from { opacity: 0; transform: translateY(var(--sd-8)); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Top row: category pill(s) + author, same look as the archive cards
   -------------------------------------------------------------------------- */

body.sd-single .content_sajat_frame > .wp-block-group:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sd-13);
    margin-bottom: var(--sd-21);
}

body.sd-single .category_single_post {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sd-8);
    padding: 0;
    background: none;
}

body.sd-single .category_single_post p {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sd-8);
    margin: 0;
}

body.sd-single .post-category-tag {
    margin: 0;
    padding: var(--sd-3) var(--sd-13);
    border-radius: var(--sd-13);
    background: var(--color-three, #E3E3E3);
    color: var(--color-four, #0285BA);
    box-shadow: none;
    font-size: var(--sd-13);
    font-weight: 600;
    line-height: 1.618;
    transition: none;
}

body.sd-single .post-category-tag:hover,
body.sd-single .post-category-tag:focus-visible {
    transform: none;
    box-shadow: none;
    text-decoration: underline;
}

body.sd-single .author_single_post .wp-block-post-author {
    display: flex;
    align-items: center;
    gap: var(--sd-8);
    padding: 0 !important;
    font-size: var(--sd-13) !important;
    font-weight: 500 !important;
}

body.sd-single .author_single_post .wp-block-post-author__avatar {
    margin: 0;
}

/* The child theme forces this avatar to 25px with !important. */
body.sd-single .author_single_post img {
    display: block !important;
    width: var(--sd-34) !important;
    height: var(--sd-34) !important;
    margin: 0 !important;
    border-radius: 50% !important;
    object-fit: cover;
    box-shadow: none;
}

body.sd-single .author_single_post .wp-block-post-author__name {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Title (added by includes/single-post.php)
   -------------------------------------------------------------------------- */

body.sd-single .sd-single__title {
    margin: 0 0 var(--sd-21);
    font-size: var(--sd-34);
    font-weight: 700;
    line-height: 1.3;
    color: var(--sd-title);
    text-align: left;
}

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */

body.sd-single .single_post_content {
    padding: 0 !important;
    color: var(--sd-text) !important;
    font-size: var(--sd-21) !important;
    font-weight: 400 !important;
    line-height: 1.618;
    border-radius: 0;
    /* The child theme's popIn/scale animation and hover zoom; the frame
       fades in instead. */
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

body.sd-single.sd-single--article .single_post_content {
    font-size: var(--sd-16) !important;
}

/* Rules for elements inside the text skip :not(.szekely-paywall-wrapper *):
   for logged-out visitors past their view limit, szekely-membership
   injects its paywall overlay into the post content, and that overlay
   keeps its own styling. */

/* Paragraphs: plain text, not the theme's pill-shaped bubbles */
body.sd-single .single_post_content p:not(.szekely-paywall-wrapper *) {
    margin: 0 0 var(--sd-21) !important;
    padding: 0 !important;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    transition: none;
}

body.sd-single .single_post_content p:not(.szekely-paywall-wrapper *):hover {
    color: inherit;
    transform: none;
}

body.sd-single .single_post_content > :last-child {
    margin-bottom: 0 !important;
}

/* Headings, lists, quotes, links inside the text */
body.sd-single .single_post_content h2:not(.szekely-paywall-wrapper *),
body.sd-single .single_post_content h3:not(.szekely-paywall-wrapper *),
body.sd-single .single_post_content h4:not(.szekely-paywall-wrapper *) {
    color: var(--sd-title);
    font-weight: 700;
    line-height: 1.3;
}

body.sd-single .single_post_content h2:not(.szekely-paywall-wrapper *) {
    margin: var(--sd-34) 0 var(--sd-13);
    font-size: var(--sd-21);
}

body.sd-single .single_post_content h3:not(.szekely-paywall-wrapper *),
body.sd-single .single_post_content h4:not(.szekely-paywall-wrapper *) {
    margin: var(--sd-21) 0 var(--sd-8);
    font-size: var(--sd-16);
}

body.sd-single .single_post_content ul:not(.szekely-paywall-wrapper *),
body.sd-single .single_post_content ol:not(.szekely-paywall-wrapper *) {
    margin: 0 0 var(--sd-21);
    padding-left: var(--sd-21);
}

body.sd-single .single_post_content li:not(.szekely-paywall-wrapper *) {
    margin: 0 0 var(--sd-8);
}

body.sd-single .single_post_content blockquote:not(.szekely-paywall-wrapper *) {
    margin: var(--sd-34) 0;
    padding: 0 0 0 var(--sd-21);
    border-left: var(--sd-3) solid var(--color-four, #0285BA);
    color: var(--sd-text-muted);
}

body.sd-single .single_post_content a:not(.szekely-paywall-wrapper *) {
    color: var(--color-four, #0285BA);
    text-decoration: underline;
    text-underline-offset: var(--sd-3);
}

/* Images inside the text: never wider than the column. The child theme
   caps them at 60–95vw / 60–70vh (and a theme script may set inline
   max-height), which overflowed or shrank them oddly. */
body.sd-single .single_post_content img:not(.wp-post-image):not(.szekely-paywall-wrapper *) {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: var(--sd-21) auto;
    border-radius: var(--sd-13);
    object-fit: initial;
}

body.sd-single .single_post_content figure:not(.szekely-paywall-wrapper *) {
    margin: var(--sd-21) 0;
}

body.sd-single .single_post_content figcaption:not(.szekely-paywall-wrapper *) {
    margin-top: var(--sd-8);
    font-size: var(--sd-13);
    color: var(--sd-text-muted);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Featured image (injected at the top of the content by the child theme)
   -------------------------------------------------------------------------- */

body.sd-single .single_post_content .post-featured-image {
    position: relative;
    margin: 0 0 var(--sd-34);
    aspect-ratio: 1.618 / 1;
    overflow: hidden;
    border-radius: var(--sd-21);
    background: var(--color-three, #E3E3E3);
}

/* Pinned to the frame: a percentage height doesn't resolve against a
   height that comes from aspect-ratio alone. */
body.sd-single .single_post_content .post-featured-image img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0;
    border-radius: 0;
    object-fit: cover !important;
}

/* --------------------------------------------------------------------------
   Quote: a one-liner, no image — centred, larger, with quote marks
   -------------------------------------------------------------------------- */

body.sd-single.sd-single--quote .single_post_content {
    font-size: var(--sd-34) !important;
    font-weight: 500 !important;
    line-height: 1.3;
    text-align: center;
}

body.sd-single.sd-single--quote .single_post_content p:not(.szekely-paywall-wrapper *) {
    padding: var(--sd-21) 0 !important;
    text-align: center;
}

body.sd-single.sd-single--quote .single_post_content p:not(.szekely-paywall-wrapper *):first-of-type::before {
    content: "\201E";          /* „ */
    display: block;
    height: var(--sd-34);
    font-size: var(--sd-89);
    line-height: 1;
    color: var(--color-four, #0285BA);
    opacity: 0.3;
}

/* --------------------------------------------------------------------------
   Reactions under the post
   -------------------------------------------------------------------------- */

body.sd-single .content_sajat_frame > .wp-block-group:last-child {
    margin-top: var(--sd-34);
    padding: 0;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 610px) {
    body.sd-single .sd-single__title {
        font-size: var(--sd-21);
    }

    body.sd-single .single_post_content {
        font-size: var(--sd-16) !important;
    }

    body.sd-single.sd-single--quote .single_post_content {
        font-size: var(--sd-21) !important;
    }

    body.sd-single .single_post_content .post-featured-image {
        margin-bottom: var(--sd-21);
        border-radius: var(--sd-13);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.sd-single .content_sajat_frame {
        animation: none;
    }
}