/*
Theme Name:  Karmastic
Theme URI:   https://karmastic.org/
Author:      Karmastic Foundation
Author URI:  https://karmastic.org/
Template:    benevolent
Description: Custom theme for Karmastic Foundation. Based on Goodwill Charity by Rara Theme (GPL), running on the Benevolent parent theme.
Version:     1.13.0
Requires PHP: 7.4
Requires at least: 4.7
License:     GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: karmastic
*/

/* Brand colours, taken from the elephant logo */
:root {
    --primary-font: 'Inter', sans-serif;
    --primary-color: #5b3a9b;           /* logo purple */
    --primary-color-rgb: 91, 58, 155;
    --primary-dark: #3f2672;
    --secondary-color: #d6336c;         /* heart magenta */
    --secondary-color-rgb: 214, 51, 108;
    --secondary-dark: #b0245a;
    --accent-color: #3b5bdb;            /* logo blue */
    --text-color: #2b2140;
    --muted-text: #5f5873;
    --radius: 8px;
}

body {
    font-family: var(--primary-font);
    font-size: 18px;
}

.home.has-slider .site-header.header-two .header-bottom,
.site-header.header-two .header-bottom {
    background: #fff;
}

.site-header.header-two .header-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-header.header-two .right-panel {
    flex-wrap: nowrap;
}

.site-header.header-two .site-branding .site-title {
    line-height: 1.1;
}

.site-header.header-two .header-bottom .container::after {
    content: none;
}

.site-header.header-two .site-branding {
    margin: 0;
}

.site-header.header-two .site-branding.logo-text {
    display: flex;
    grid-gap: 16px;
}

.site-header.header-two .site-branding.logo-text .site-title-wrap {
    padding-left: 0;
}

.site-header.header-two .site-branding .site-title a {
    color: #000;
}

.site-header.header-two .site-branding .site-description {
    color: #777;
}

.site-header.header-two .main-navigation a {
    color: #2b2b2b;
}

@media only screen and (max-width: 1199px) {
    .site-header.header-two .btn-donate {
        width: 184px;
    }
}

.site-header.header-two .main-navigation a:hover,
.site-header.header-two .main-navigation a:focus,
.site-header.header-two .main-navigation ul li:hover>a,
.site-header.header-two .main-navigation ul li.current-menu-item>a,
.site-header.header-two .main-navigation ul li.current_page_item>a,
.site-header.header-two .main-navigation ul li.current-menu-ancestor>a,
.site-header.header-two .main-navigation ul li.current_page_ancestor>a {
    color: var(--secondary-color);
}

.site-header.header-two #mobile-header a {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18' stroke='%232b2140' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") left center / 24px no-repeat;
}

.site-header.header-two .main-navigation ul li .btn-donate:hover,
.site-header.header-two .main-navigation ul li .btn-donate:focus {
    color: #2b2b2b;
}

a {
    /* color: var(--primary-color); */
    color: var(--primary-color);

}

a:hover {

    color: var(--primary-color);
}

.main-navigation a:hover,
.main-navigation ul li:hover>a {
    color: var(--secondary-color);
}

.site-header .btn-donate {
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

.site-header .btn-donate:hover {
    background: var(--secondary-color);
}

.banner .text .btn-learn {
    background: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

.banner .text .btn-learn:hover {
    color: var(--secondary-color);
}

.intro .columns-3 .text-holder .btn {
    color: var(--primary-color);

}

.our-community .header {
    background: var(--primary-color);
}

.our-community .community-holder .hover-state .title {

    color: var(--secondary-color);
}

.our-community .community-holder .hover-state .text-content {
    border-top: 1px solid var(--secondary-color);

}

.donation-box .columns-4 .social-networks li a:hover {
    color: var(--secondary-color);
}

.donation-box .columns-8 .tabset ul .ui-tabs-active a {
    background: var(--primary-color);
}

.donation-box .columns-8 .tab-content .btn-continue {

    background: var(--primary-color);

}

.donation-box .columns-8 .tab-content .btn-continue:hover {
    background: var(--primary-color);
}

.blog-section .blog-holder .post .entry-title a:hover {
    color: var(--secondary-color);
}

.blog-section .blog-holder .post .entry-meta a {
    color: var(--primary-color);
}

.blog-section .blog-holder .post .entry-meta svg {
    color: var(--primary-color);
}

.blog-section .blog-holder .post .readmore:hover {
    color: var(--secondary-color);
}

#primary .post .entry-header .entry-title a:hover,
#primary .page .entry-header .entry-title a:hover {
    color: var(--secondary-color);
}

#primary .post .entry-meta {
    color: var(--primary-color);
}

#primary .post .entry-meta a {
    color: var(--primary-color);
}

#primary .post .entry-meta a:hover {
    color: var(--secondary-color);
}

#primary .post .entry-footer .readmore {

    color: var(--primary-color);
}

#primary .post .entry-footer .readmore:hover {
    color: var(--secondary-color);
}

.comment-list .comment-metadata a:hover {
    color: var(--secondary-color);
}

.comment-list .reply a:hover {
    color: var(--secondary-color);
}

.comment-form input[type="submit"]:hover {
    background: var(--primary-color);
}

.error404 .error-holder h1 {

    color: var(--secondary-color);

}

.error404 .error-holder h2 {
    color: var(--secondary-color);
}

#secondary .widget ul li a:hover {
    color: var(--primary-color);
}

#secondary .widget.widget_text .text-holder .readmore:hover,
.widget.widget_benevolent_featured_post .readmore:hover {
    color: var(--secondary-color);
}

.widget.widget_benevolent_recent_post .entry-header .entry-title a:hover,
.widget.widget_benevolent_popular_post .entry-header .entry-title a:hover {
    color: var(--secondary-color);
}

.widget.widget_benevolent_recent_post .entry-header .entry-meta a,
.widget.widget_benevolent_popular_post .entry-header .entry-meta a {
    color: var(--primary-color);
}

.widget.widget_benevolent_recent_post .entry-header .entry-meta a:hover,
.widget.widget_benevolent_popular_post .entry-header .entry-meta a:hover {
    color: var(--secondary-color);
}

.widget.widget_tag_cloud .tagcloud a:hover {
    background: var(--primary-color);
}

.widget.widget_calendar .calendar_wrap caption {

    background: var(--primary-color);
}

.widget.widget_calendar tbody td a {

    background: var(--primary-color);

}

.site-footer .promotional-block .btn-donate:hover {
    background: var(--secondary-color);

}

.site-footer .columns-4 ul li a:hover,
.site-footer .columns-6 ul li a:hover,
.site-footer .widget ul li a:hover {
    color: var(--secondary-color);
}

.site-footer .footer-b .columns-4 .social-networks li a:hover {
    color: var(--secondary-color);
}

.site-info a:hover {
    color: var(--secondary-color);
    text-decoration: none;
}

.site-footer .widget.widget_benevolent_recent_post .entry-header .entry-title a:hover,
.site-footer .widget.widget_benevolent_recent_post .entry-header .entry-title a:focus,
.site-footer .widget.widget_benevolent_popular_post .entry-header .entry-title a:hover,
.site-footer .widget.widget_benevolent_popular_post .entry-header .entry-title a:focus {
    color: var(--secondary-color);
}

@media only screen and (max-width: 1199px) {
    .mobile-header .btn-donate a {

        color: var(--secondary-color);
        border: 1px solid var(--secondary-color);

    }

    .mobile-header .btn-donate a:hover,
    .mobile-header .btn-donate a:focus {

        background: var(--secondary-color);
    }

    .mobile-header .mobile-menu .primary-menu ul li a:hover,
    .mobile-header .mobile-menu .secondary-menu ul li a:hover,
    .mobile-header .mobile-menu .primary-menu ul li a:focus,
    .mobile-header .mobile-menu .secondary-menu ul li a:focus,
    .mobile-header .mobile-menu .primary-menu ul li:hover>a,
    .mobile-header .mobile-menu .primary-menu ul li:focus>a,
    .mobile-header .mobile-menu .secondary-menu ul li:hover>a,
    .mobile-header .mobile-menu .secondary-menu ul li:focus>a,
    .mobile-header .mobile-menu .primary-menu ul .current-menu-item>a,
    .mobile-header .mobile-menu .primary-menu ul .current-menu-ancestor>a,
    .mobile-header .mobile-menu .primary-menu ul .current_page_item>a,
    .mobile-header .mobile-menu .primary-menu ul .current_page_ancestor>a,
    .mobile-header .mobile-menu .secondary-menu ul .current-menu-item>a,
    .mobile-header .mobile-menu .secondary-menu ul .current-menu-ancestor>a,
    .mobile-header .mobile-menu .secondary-menu ul .current_page_item>a,
    .mobile-header .mobile-menu .secondary-menu ul .current_page_ancestor>a {
        color: var(--primary-color);
    }

    .mobile-menu .social-networks li a:hover,
    .mobile-menu .social-networks li a:focus {

        background: var(--primary-color);
        border-color: var(--primary-color);
    }
}

.mobile-menu .primary-menu .primary-menu-list .social-networks li a:focus {

    background: var(--primary-color);
    border-color: var(--primary-color);
}

.entry-content a:hover,
.entry-summary a:hover,
.page-content a:hover,
.comment-content a:hover,
.widget .textwidget a:hover {
    color: var(--secondary-color);
}
.site-header .site-branding .site-title {
    font-size: 1.5em;
   
}
.header-two .logo-text .site-logo,
.mobile-header .logo-text .site-logo {
    max-width: 100%;
    width: unset;
}
@media only screen and (min-width: 767px) {
    .banner .banner-text {
        top: 45%;

    }
}
.home.has-slider .site-header.header-two .header-bottom,
.site-header.header-two .header-bottom{
    padding: 25px 0 25px;
}

@media screen and (min-width: 37.5em) {

    .main-navigation ul .submenu-toggle svg path {
        fill: currentColor
    }
}

/* ==========================================================================
   Karmastic brand layer
   Everything below is ours. Edit here, not in the rules above.
   ========================================================================== */

body {
    color: var(--text-color);
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
}

/* Header: make Donate the clear main action */
.site-header .btn-donate,
.site-header.header-two .btn-donate {
    background: var(--secondary-color);
    color: #fff;
    border: 1px solid var(--secondary-color);
    border-radius: var(--radius);
    font-weight: 600;
    text-align: center;
}

.site-header .btn-donate:hover,
.site-header .btn-donate:focus,
.site-header.header-two .main-navigation ul li .btn-donate:hover,
.site-header.header-two .main-navigation ul li .btn-donate:focus {
    background: var(--secondary-dark);
    border-color: var(--secondary-dark);
    color: #fff;
}

.site-header.header-two .main-navigation ul li.current-menu-item > a,
.site-header.header-two .main-navigation ul li.current_page_item > a,
.site-header.header-two .main-navigation a:hover {
    color: var(--primary-color);
}

/* Banner button */
.banner .text .btn-learn {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
    border-radius: var(--radius);
}

.banner .text .btn-learn:hover,
.banner .text .btn-learn:focus {
    background: #fff;
    color: var(--secondary-color);
}

/* Intro cards (Earn Good Karma / Sponsor / Volunteer) */
.intro .columns-3 .text-holder .btn {
    color: var(--secondary-color);
    font-weight: 600;
}

.intro .columns-3 .text-holder .btn:hover,
.intro .columns-3 .text-holder .btn:focus {
    color: var(--primary-dark);
}

/* Blog cards */
.blog-section .blog-holder .post .readmore {
    color: var(--secondary-color);
    font-weight: 600;
}

/* Footer donate strip */
.site-footer .promotional-block .btn-donate {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
    border-radius: var(--radius);
}

.site-footer .promotional-block .btn-donate:hover,
.site-footer .promotional-block .btn-donate:focus {
    background: #fff;
    color: var(--secondary-color);
}

/* Buttons and form submits */
input[type="submit"],
button[type="submit"],
.wpcf7-submit {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    border-radius: var(--radius);
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.wpcf7-submit:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

/* Images never overflow on small screens */
img {
    max-width: 100%;
    height: auto;
}

/* Full-width layout: drop the boxed margin the custom background adds */
.custom-background-color .site,
.custom-background-image .site {
    margin: 0;
}

/* ==========================================================================
   About page (block patterns)
   Note: in classic themes WordPress wraps every Group block's contents in
   .wp-block-group__inner-container. "display: contents" lets the grid
   below lay out the real cards instead of that wrapper.
   ========================================================================== */

.k-about-hero > .wp-block-group__inner-container,
.k-values > .wp-block-group__inner-container,
.k-value > .wp-block-group__inner-container,
.k-figures > .wp-block-group__inner-container,
.k-figure > .wp-block-group__inner-container,
.k-team > .wp-block-group__inner-container,
.k-member > .wp-block-group__inner-container,
.k-legal > .wp-block-group__inner-container,
.k-about-cta > .wp-block-group__inner-container {
    display: contents;
}

.entry-content .k-values > *,
.entry-content .k-figures > *,
.entry-content .k-team > *,
.entry-content .k-member > *,
.entry-content .k-legal > * {
    margin: 0;
}

/* Hero */
.k-about-hero {
    background: linear-gradient(160deg, #f4eefc 0%, #fbf9fe 70%);
    border: 1px solid #ece6f5;
    border-radius: 16px;
    padding: 40px;
    margin: 0 0 16px;
}

.entry-content .k-lead {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    line-height: 1.4;
    color: var(--text-color);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
    max-width: 34em;
}

.entry-content .k-sub {
    color: var(--muted-text);
    margin: 0 0 24px;
}

/* Block buttons in brand style */
.entry-content .wp-block-buttons {
    gap: 12px;
}

.entry-content .wp-block-button__link {
    background: var(--secondary-color);
    color: #fff;
    border: 2px solid var(--secondary-color);
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 600;
    padding: 12px 24px;
    text-decoration: none;
}

.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus {
    background: var(--secondary-dark);
    border-color: var(--secondary-dark);
    color: #fff;
}

.entry-content .is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.entry-content .is-style-outline .wp-block-button__link:hover,
.entry-content .is-style-outline .wp-block-button__link:focus {
    background: var(--primary-color);
    color: #fff;
}

/* Credential chips */
#primary .entry-content ul.k-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0 0 8px;
}

#primary .entry-content ul.k-chips li {
    margin: 0;
    padding: 7px 14px 7px 32px;
    border: 1px solid #e3d9f2;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    position: relative;
    background: #fff;
    list-style: none;
}

#primary .entry-content ul.k-chips li::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    transform: translateY(-70%) rotate(-45deg);
    background: none;
}

/* Milestones: horizontal timeline on desktop */
#primary .entry-content ul.k-milestones {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0;
    margin: 28px 0 0;
    position: relative;
}

#primary .entry-content ul.k-milestones::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 7px;
    height: 2px;
    background: #e3d9f2;
}

#primary .entry-content ul.k-milestones li {
    position: relative;
    margin: 0;
    padding: 28px 0 0;
    list-style: none;
    font-size: 16px;
    line-height: 1.5;
}

#primary .entry-content ul.k-milestones li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--secondary-color);
    box-shadow: 0 0 0 4px #fff;
}

#primary .entry-content ul.k-milestones strong {
    display: block;
    color: var(--secondary-color);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}

/* Track record */
.k-figures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.k-figure {
    background: linear-gradient(140deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    color: #fff;
    border-radius: 14px;
    padding: 28px;
}

#primary .entry-content .k-figure__num {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

#primary .entry-content .k-figure__label {
    margin: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, .85);
}

/* Values */
.k-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.k-value {
    background: #fff;
    border: 1px solid #ece6f5;
    border-top: 4px solid var(--primary-color);
    border-radius: 12px;
    padding: 24px;
}

#primary .page .entry-content .k-value h3.wp-block-heading {
    font-size: 19px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 8px;
    padding: 0;
    border: 0;
}

#primary .entry-content .k-value p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted-text);
}

/* Team: compact horizontal cards */
#primary .entry-content h3.wp-block-heading + .k-team,
.k-team {
    margin-top: 12px;
}

.k-team {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.k-member {
    display: grid;
    grid-template-columns: 112px 1fr;
    /* spacer rows above and below keep the text block centred on the photo */
    grid-template-rows: 1fr auto auto auto auto auto 1fr;
    column-gap: 24px;
    align-items: start;
    background: #fff;
    border: 1px solid #ece6f5;
    border-radius: 14px;
    padding: 22px;
    text-align: left;
}

#primary .entry-content .k-member .k-member__photo {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    margin: 0;
    width: 112px;
}

#primary .entry-content .k-member .k-member__photo img {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

#primary .page .entry-content .k-member .k-member__name {
    text-transform: none;
    letter-spacing: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-color);
    margin: 2px 0 0;
    padding: 0;
    border: 0;
}

#primary .entry-content .k-member .k-member__role {
    margin: 2px 0 8px;
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 14px;
}

#primary .entry-content .k-member .k-member__bio {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted-text);
}

#primary .entry-content .k-member .k-member__link {
    margin: 10px 0 0;
    font-size: 14px;
}

#primary .entry-content .k-member .k-member__link a {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

#primary .entry-content .k-member .k-member__link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#primary .entry-content .k-member .k-member__link a::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: none;
    background: #0a66c2;
    border-radius: 3px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#primary .entry-content .k-member > *:not(.k-member__photo),
#primary .entry-content .k-member > .wp-block-group__inner-container > *:not(.k-member__photo) {
    grid-column: 2;
}

#primary .entry-content .k-member .k-member__name { grid-row: 2; }
#primary .entry-content .k-member .k-member__role { grid-row: 3; }
#primary .entry-content .k-member .k-member__din  { grid-row: 4; }
#primary .entry-content .k-member .k-member__bio  { grid-row: 5; }
#primary .entry-content .k-member .k-member__link { grid-row: 6; }

/* Director Identification Number line */
#primary .entry-content .k-member .k-member__din {
    margin: -4px 0 8px;
    font-size: 13px;
    color: var(--muted-text);
    font-variant-numeric: tabular-nums;
}

#primary .entry-content .k-member .k-member__link a:hover,
#primary .entry-content .k-member .k-member__link a:focus {
    text-decoration: underline;
}

/* Transparency */
.k-legal {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 24px;
    background: #f7f3fd;
    border-radius: 14px;
    padding: 28px;
    font-size: 15px;
    line-height: 1.7;
}

/* Closing call to action */
.k-about-cta {
    background: linear-gradient(120deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: #fff;
    border-radius: 16px;
    padding: 48px 32px;
    text-align: center;
    margin: 3.5em 0 64px;
}

#primary .entry-content .k-about-cta h2.wp-block-heading {
    color: #fff;
    border: 0;
    padding: 0;
    margin: 0 0 20px;
}

.k-about-cta .wp-block-buttons {
    justify-content: center;
}

.entry-content .k-about-cta .wp-block-button__link {
    background: #fff;
    color: var(--primary-dark);
    border-color: #fff;
}

.entry-content .k-about-cta .wp-block-button__link:hover,
.entry-content .k-about-cta .wp-block-button__link:focus {
    background: transparent;
    color: #fff;
}

#primary .entry-content .k-about-cta .k-sub {
    color: #fff;
    margin: 18px 0 0;
}

.entry-content .k-about-cta .k-sub a {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 860px) {
    .k-values,
    .k-figures,
    .k-legal {
        grid-template-columns: 1fr;
    }

    .k-team {
        grid-template-columns: 1fr;
    }

    #primary .entry-content ul.k-milestones {
        grid-template-columns: 1fr;
        gap: 0;
        padding-left: 28px;
    }

    #primary .entry-content ul.k-milestones::before {
        left: 7px;
        right: auto;
        top: 0;
        bottom: 0;
        width: 2px;
        height: auto;
    }

    #primary .entry-content ul.k-milestones li {
        padding: 0 0 20px;
    }

    #primary .entry-content ul.k-milestones li::before {
        left: -28px;
        top: 3px;
    }
}

@media (max-width: 560px) {
    .k-member {
        grid-template-columns: 76px 1fr;
        column-gap: 16px;
        padding: 18px;
    }

    #primary .entry-content .k-member .k-member__photo,
    #primary .entry-content .k-member .k-member__photo img {
        width: 76px;
        height: 76px;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer.k-footer {
    background: #1d1430;
    color: #d9d2e6;
    padding: 0;
    margin: 0;
    font-size: 16px;
}

.k-footer__wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.k-footer__main {
    padding: 64px 0 48px;
}

.k-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: 40px;
}

.k-footer a {
    color: #d9d2e6;
    text-decoration: none;
}

.k-footer a:hover,
.k-footer a:focus {
    color: #fff;
    text-decoration: underline;
}

.k-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.k-footer__logo img {
    width: 56px;
    height: auto;
    background: #fff;
    border-radius: 12px;
    padding: 6px;
}

.k-footer__logo span {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

.k-footer .k-footer__logo:hover {
    text-decoration: none;
}

.k-footer__tagline {
    margin: 16px 0 24px;
    line-height: 1.6;
    max-width: 30em;
}

.k-footer .k-footer__donate {
    display: inline-block;
    background: var(--secondary-color);
    color: #fff;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: var(--radius);
}

.k-footer .k-footer__donate:hover,
.k-footer .k-footer__donate:focus {
    background: #fff;
    color: var(--secondary-color);
    text-decoration: none;
}

.k-footer__heading {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 18px;
}

.k-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.k-footer__col li {
    margin: 0 0 12px;
    padding: 0;
}

.k-footer__address {
    line-height: 1.6;
}

.k-footer ul.k-footer__social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.k-footer__social li {
    margin: 0;
}

.k-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.k-footer .k-footer__social a:hover,
.k-footer .k-footer__social a:focus {
    background: var(--secondary-color);
    text-decoration: none;
}

.k-footer__legal {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 20px 0;
    font-size: 14px;
    color: #b6abc9;
}

.k-footer__legal-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

.k-footer__legal p {
    margin: 0;
}

.k-footer__legal-links {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.k-footer__legal-links li {
    margin: 0;
}

@media (max-width: 991px) {
    .k-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .k-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .k-footer__wrap {
        padding: 0 16px;
    }

    .k-footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .k-footer__main {
        padding: 48px 0 32px;
    }
}

/* ==========================================================================
   Pages: full width, centred reading column, stronger title
   ========================================================================== */

.page.full-width #primary {
    float: none;
    width: 100%;
    max-width: 1040px;
    margin: 56px auto 0;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

#primary .page {
    border-bottom: 0;
}

#primary .page .entry-header {
    margin: 0 0 28px;
}

#primary .page .entry-header .entry-title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-color);
}

.page .entry-content > h2,
.page .entry-content > .wp-block-heading {
    margin-top: 2.2em;
}

#primary .page .entry-content h2.wp-block-heading {
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-weight: 800;
    color: var(--text-color);
    padding-top: 1.2em;
    border-top: 1px solid #ece6f5;
}

#primary .page .entry-content h3.wp-block-heading {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted-text);
    margin: 28px 0 0;
}

@media (max-width: 767px) {
    .page.full-width #primary {
        margin-top: 32px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .k-about-hero {
        padding: 24px;
    }
}

/* ==========================================================================
   Featured images on blog lists and posts: never upscale small images
   (the parent stretches every image to 100% width, which blurs logos and
   small photos). Large photos still fill the column, capped in height.
   ========================================================================== */

#primary .post .post-thumbnail {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 0 1.5em;
    height: auto;
}

/* Large photos: fill the column, cropped to a consistent shape */
#primary .post .post-thumbnail img {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

/* Small images (logos, small photos): real size, centred on a soft panel */
#primary .post .post-thumbnail:has(img.k-small-thumb) {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f7f3fd;
    padding: 32px;
}

#primary .post .post-thumbnail img.k-small-thumb {
    width: auto;
    max-width: 100%;
    aspect-ratio: auto;
    height: auto;
    object-fit: contain;
}

#primary .post .entry-content img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   Contact page and Contact Form 7
   ========================================================================== */

.k-contact-hero {
    margin-bottom: 32px;
}

#primary .entry-content .k-contact-hero .k-sub {
    margin-bottom: 0;
}

.wpcf7 form.init .wpcf7-response-output {
    display: none;
}

.k-contact {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 28px;
    align-items: start;
}

.k-contact > .wp-block-group__inner-container,
.k-contact__form > .wp-block-group__inner-container,
.k-contact__aside > .wp-block-group__inner-container,
.k-route > .wp-block-group__inner-container {
    display: contents;
}

.entry-content .k-contact > * {
    margin: 0;
}

.k-contact__form {
    background: #fff;
    border: 1px solid #ece6f5;
    border-radius: 16px;
    padding: 32px;
}

#primary .page .entry-content .k-contact__form h2.wp-block-heading {
    border: 0;
    padding: 0;
    margin: 0 0 20px;
}

.k-contact__aside {
    display: grid;
    gap: 14px;
}

.k-route {
    background: #f7f3fd;
    border-radius: 14px;
    padding: 20px 22px;
}

.k-route--plain {
    background: #fff;
    border: 1px solid #ece6f5;
}

#primary .page .entry-content .k-route h3.wp-block-heading {
    font-size: 17px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-color);
    margin: 0 0 4px;
}

#primary .entry-content .k-route p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted-text);
}

#primary .entry-content .k-route .k-route__link {
    margin-top: 8px;
}

#primary .entry-content .k-route a {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

#primary .entry-content .k-route .k-route__link a::after {
    content: " \2192";
}

#primary .entry-content .k-route a:hover,
#primary .entry-content .k-route a:focus {
    text-decoration: underline;
}

#primary .entry-content .k-reg {
    margin: 40px 0 64px;
    padding-top: 20px;
    border-top: 1px solid #ece6f5;
    font-size: 13px;
    color: var(--muted-text);
    text-align: center;
}

/* Form */
.wpcf7-form p {
    margin: 0 0 18px;
}

.wpcf7-form label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
}

.wpcf7-form br {
    display: none;
}

.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-top: 6px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-color);
    background: #fff;
    border: 1px solid #d9cfe8;
    border-radius: var(--radius);
    padding: 12px 14px;
    transition: border-color .15s, box-shadow .15s;
}

.wpcf7-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235b3a9b' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.wpcf7-form textarea {
    min-height: 140px;
    resize: vertical;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), .18);
}

.k-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.wpcf7-form .wpcf7-list-item {
    display: block;
    margin: 0 0 10px;
}

.wpcf7-form .wpcf7-list-item label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 400;
    font-size: 15px;
    cursor: pointer;
}

.wpcf7-form .wpcf7-list-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: none;
    accent-color: var(--primary-color);
}

.wpcf7-form .k-form-checks .wpcf7-form-control-wrap {
    margin: 0;
}

.wpcf7-form .k-form-notice {
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted-text);
    background: #f7f3fd;
    border-radius: 10px;
    padding: 12px 14px;
}

.wpcf7-form .k-form-notice a {
    color: var(--primary-color);
    font-weight: 600;
}

.wpcf7-form input.wpcf7-submit {
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    font-family: inherit;
    background: var(--secondary-color);
    color: #fff;
    border: 0;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 700;
    padding: 14px 28px;
    cursor: pointer;
}

.wpcf7-form input.wpcf7-submit:hover,
.wpcf7-form input.wpcf7-submit:focus {
    background: var(--secondary-dark);
}

.wpcf7-form input.wpcf7-submit:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.wpcf7-form .wpcf7-not-valid-tip {
    font-size: 13px;
    font-weight: 400;
    color: #b42318;
    margin-top: 4px;
}

.wpcf7-form .wpcf7-not-valid {
    border-color: #b42318;
}

.wpcf7 form .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15px;
}

@media (max-width: 860px) {
    .k-contact {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .k-contact__form {
        padding: 22px;
    }

    .k-form-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Posts, blog list and archives: single centred reading column
   ========================================================================== */

.single.full-width #primary,
.blog.full-width #primary,
.archive.full-width #primary {
    float: none;
    width: 100%;
    max-width: 820px;
    margin: 56px auto 0;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

#primary .post .entry-header .entry-title {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-color);
}

.single #primary .post .entry-content {
    font-size: 18px;
    line-height: 1.75;
}

/* End-of-post donate prompt */
.k-post-cta {
    margin: 40px 0 8px;
    padding: 28px;
    border-radius: 16px;
    background: linear-gradient(120deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: #fff;
}

#primary .entry-content .k-post-cta p {
    margin: 0;
    color: #fff;
}

#primary .entry-content .k-post-cta__title {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
}

#primary .entry-content .k-post-cta__text {
    margin-top: 6px;
    font-size: 16px;
    opacity: .92;
}

#primary .entry-content .k-post-cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 18px;
}

#primary .entry-content .k-post-cta__btn {
    display: inline-block;
    background: #fff;
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: var(--radius);
    text-decoration: none;
}

#primary .entry-content .k-post-cta__btn:hover,
#primary .entry-content .k-post-cta__btn:focus {
    background: var(--primary-dark);
    color: #fff;
}

#primary .entry-content .k-post-cta__link {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .single.full-width #primary,
    .blog.full-width #primary,
    .archive.full-width #primary {
        margin-top: 32px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .single #primary .post .entry-content {
        font-size: 17px;
    }
}

#primary .post .entry-meta svg,
#primary .post .entry-meta i,
#primary .post .entry-meta .fa {
    color: var(--secondary-color);
    fill: currentColor;
}

/* ==========================================================================
   Header: compact, about 100px tall on desktop
   ========================================================================== */

.home.has-slider .site-header.header-two .header-bottom,
.site-header.header-two .header-bottom {
    padding: 18px 0;
}

.site-header.header-two .header-bottom .container {
    align-items: center;
}

.header-two .logo-text .site-logo img,
.header-two .site-logo .custom-logo {
    height: 64px;
    width: auto;
    display: block;
}

.site-header.header-two .site-branding {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-header.header-two .site-branding .site-title {
    font-size: 26px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.site-header.header-two .site-branding .site-description {
    font: 500 13px/1.4 var(--primary-font);
    color: var(--muted-text);
    margin: 2px 0 0;
}

.site-header.header-two .main-navigation a {
    font-size: 17px;
}

.site-header.header-two .btn-donate {
    padding: 12px 22px;
    line-height: 1.2;
    width: auto;
}

/* ==========================================================================
   Mobile header (shown below 1200px): one compact row
   ========================================================================== */

@media only screen and (max-width: 1199px) {
    .mobile-header {
        padding: 10px 0;
        border-bottom: 1px solid #f0eaf8;
    }

    .mobile-header .container {
        flex-wrap: nowrap;
        gap: 12px;
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .mobile-header .site-branding {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .mobile-header .site-branding .site-logo {
        margin: 0;
        flex: none;
    }

    .mobile-header .site-logo img,
    .mobile-header .custom-logo {
        height: 44px;
        width: auto;
        display: block;
    }

    .mobile-header .site-branding .site-title {
        font-size: 20px;
        line-height: 1.15;
        font-weight: 800;
    }

    .mobile-header .site-branding .site-description {
        font: 500 12px/1.3 var(--primary-font);
        color: var(--muted-text);
    }

    .mobile-header .btn-donate {
        flex: none;
    }

    .mobile-header .btn-donate a {
        color: #fff;
        background: var(--secondary-color);
        border: 0;
        border-radius: var(--radius);
        padding: 9px 16px;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 700;
    }

    .mobile-header .btn-donate a:hover,
    .mobile-header .btn-donate a:focus {
        background: var(--secondary-dark);
        color: #fff;
    }

    .mobile-header .menu-opener {
        flex: none;
        width: 24px;
        margin-left: 4px;
    }

    .mobile-header .menu-opener span {
        background: var(--text-color);
    }
}

@media only screen and (max-width: 600px) {
    .mobile-header .site-branding {
        width: auto;
        margin: 0;
        justify-content: flex-start;
        gap: 10px;
    }

    .mobile-header .site-branding .site-description {
        display: none;
    }
}

/* Footer on phones: link columns side by side */
@media (max-width: 560px) {
    .k-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px 20px;
    }

    .k-footer__brand,
    .k-footer__grid > .k-footer__col:last-child {
        grid-column: 1 / -1;
    }
}

@media only screen and (max-width: 420px) {
    .mobile-header .container {
        gap: 10px;
    }

    .mobile-header .site-logo img,
    .mobile-header .custom-logo {
        height: 38px;
    }

    .mobile-header .site-branding {
        gap: 8px;
    }

    .mobile-header .site-title-wrap {
        min-width: 0;
        padding: 0;
    }

    .mobile-header .site-branding .site-title {
        font-size: 17px;
        white-space: nowrap;
    }

    .mobile-header .btn-donate a {
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* ==========================================================================
   Legal pages (Privacy Policy, Terms): TOC + readable document
   ========================================================================== */

.k-legal-page.full-width #primary {
    max-width: 1120px;
}

.k-legaldoc {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.k-toc--side {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 4px 4px 4px 0;
}

.admin-bar .k-toc--side {
    top: 56px;
}

#primary .entry-content .k-toc__title,
.k-toc summary {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted-text);
    margin: 0 0 10px;
}

#primary .entry-content .k-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid #ece6f5;
}

#primary .entry-content .k-toc li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#primary .entry-content .k-toc a {
    display: block;
    padding: 6px 0 6px 14px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: 14px;
    line-height: 1.4;
    color: var(--muted-text);
    text-decoration: none;
}

#primary .entry-content .k-toc a:hover,
#primary .entry-content .k-toc a:focus {
    color: var(--primary-color);
    border-left-color: var(--primary-color);
}

.k-toc--inline {
    display: none;
}

.k-legaldoc__body {
    max-width: 760px;
    font-size: 17px;
    line-height: 1.75;
}

.k-legal-page .entry-content h2[id] {
    scroll-margin-top: 24px;
}

#primary .page.type-page .entry-content .k-legaldoc__body h2.wp-block-heading,
.k-legal-page #primary .entry-content .k-legaldoc__body h2 {
    font-size: 22px;
    line-height: 1.3;
    margin: 2.2em 0 .6em;
    padding-top: 1.2em;
    border-top: 1px solid #ece6f5;
}

.k-legal-page #primary .page .entry-content .k-legaldoc__body h3.wp-block-heading {
    font-size: 17px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-color);
    margin: 1.6em 0 .4em;
}

.k-legal-page #primary .entry-content .k-legaldoc__body ul,
.k-legal-page #primary .entry-content .k-legaldoc__body ol {
    padding-left: 1.4em;
    margin: 0 0 1.2em;
}

.k-legal-page #primary .entry-content .k-legaldoc__body li {
    margin: 0 0 .5em;
}

#primary .entry-content .k-legal-updated {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted-text);
    background: #f7f3fd;
    border-radius: 999px;
    padding: 6px 14px;
    margin: 0 0 1.5em;
}

.k-legal-page .entry-content mark {
    background: #fff3b0;
    padding: 0 4px;
    border-radius: 3px;
}

.k-legal-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.55;
}

.k-legal-table th,
.k-legal-table td {
    border: 1px solid #ece6f5;
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
}

.k-legal-table thead th {
    background: #f7f3fd;
}

@media (max-width: 960px) {
    .k-legaldoc {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .k-toc--side {
        display: none;
    }

    .k-toc--inline {
        display: block;
        background: #f7f3fd;
        border-radius: 12px;
        padding: 14px 18px;
        margin: 0 0 24px;
    }

    .k-toc--inline summary {
        cursor: pointer;
        margin: 0;
        list-style-position: inside;
    }

    .k-toc--inline[open] summary {
        margin-bottom: 10px;
    }

    .k-legaldoc__body {
        font-size: 16px;
    }

    .k-legal-table {
        overflow-x: auto;
    }
}

.k-toc--inline summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}

.k-toc--inline summary::-webkit-details-marker {
    display: none;
}

.k-toc--inline summary::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    transform: rotate(45deg) translateY(-3px);
    transition: transform .2s;
}

.k-toc--inline[open] summary::after {
    transform: rotate(-135deg) translateY(-1px);
}