@import "assets/font/font.css";
@import "assets/css/swiper-bundle.min.css";
@import "assets/css/normalize.css";
@import "assets/css/flex.css";
@import "assets/css/header.css";
@import "assets/css/home.css";

/* The donor styles now use the shared token names. Define the small homepage
   token bridge here so the inherited header keeps its original filled CTA and
   outlined login control when served outside a landing-folder stylesheet. */
:root {
    --color-primary-hover: #a0d8ee;
    --color-on-primary: #ffffff;
    --container: 1200px;
    --page-pad: 16px;
    --fs-display: 50px;
    --fs-h2: 36px;
    --fs-h4: 22px;
    --fs-body-lg: 18px;
    --fs-body: 16px;
    --fs-body-sm: 14px;
    --fs-kicker: 14px;
    --fs-nav: 16px;
    --fs-caption: 12px;
    --radius-md: 16px;
    --radius-sm: 10px;
    --radius-xs: 8px;
    --radius-pill: 999px;
}

/* Accessible compact FAQ on the homepage. The donor keeps accordion rows as
   divs, so the interaction layer adds button semantics and these styles keep
   the rows stable while their answers animate. */
#accordion .accordion-click {
    position: relative;
    width: 100%;
    min-height: 52px;
    padding: 12px 48px 12px 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

#accordion .accordion-box {
    border: 1px solid #dfe4e7;
    transition: background-color 180ms ease, border-color 180ms ease;
}

#accordion .accordion-click:focus-visible {
    outline: 2px solid #2a8fc4;
    outline-offset: 4px;
    border-radius: 6px;
}

#accordion .accordion-click h3 {
    margin: 0;
    color: #1c1c1c;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
}

#accordion .accordion-click:hover h3,
#accordion .accordion-box.is-open .accordion-click h3 {
    color: #1c1c1c;
}

#accordion .accordion-box:hover,
#accordion .accordion-box.is-open {
    border-color: #a0d8ee;
    background: #ffffff;
}

#accordion .submenu {
    display: block;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    opacity: 0;
    transition: max-height 180ms ease, padding 180ms ease, opacity 140ms ease;
}

#accordion .accordion-box.is-open .submenu {
    max-height: 420px;
    padding: 12px 0 12px;
    border-top: 1px solid #e3e7ea;
    opacity: 1;
}

#accordion .submenu p {
    margin: 0;
    max-width: 760px;
    color: #3f4650;
    font-size: 14px;
    line-height: 18px;
}

#accordion .open-accordion {
    transition: transform 180ms ease;
}

#accordion .accordion-box.is-open .open-accordion {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    #accordion .accordion-click h3 {
        font-size: 16px;
    }
}

/* Keep donor header controls within the shared 40px control height. */
header .btn-login,
header .btn {
    height: 40px !important;
    min-height: 40px !important;
    padding-block: 8px !important;
}

/* Donor CTA: the label and arrow are two 60px-high adjacent blocks. */
.animated-button {
    width: 281px;
    min-width: 281px;
    max-width: 281px;
    flex: 0 0 281px;
    height: 60px;
    min-height: 60px;
    text-decoration: none;
}

.animated-button .btn-text,
.animated-button .arrow {
    height: 60px;
    min-height: 60px;
}

.animated-button .btn-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 62px);
    flex: 0 0 calc(100% - 62px);
    padding: 0 12px;
    box-sizing: border-box;
}

.animated-button .arrow {
    width: 60px;
    max-width: 60px;
}

.make-beautiful-main .animated-button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 100%;
}

.make-beautiful-main .animated-button .btn-text {
    width: calc(100% - 62px);
    flex-basis: calc(100% - 62px);
    justify-content: flex-start;
    padding-inline: 24px;
}

@media (max-width: 600px) {
    .make-beautiful-main .animated-button .btn-text {
        padding-inline: 16px;
        font-size: clamp(13px, 3.8vw, 16px);
    }
}

@media (max-width: 992px) {
    .hero-btn-secondary {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) 64px;
        align-items: stretch;
        box-sizing: border-box;
    }

    .hero-btn-secondary-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hero-btn-secondary-arrow {
        width: auto;
        min-width: 0;
    }
}

/* Shared catalog footer for the homepage and all SEO landings. */
.footer {
    background: #1a1b1e;
    color: #fff;
    padding: 48px 0 24px;
    margin-top: 0;
}

.footer .container {
    max-width: 1200px;
}

.footer-catalog {
    display: grid;
    grid-template-columns: minmax(190px, 0.8fr) minmax(0, 2.2fr);
    gap: 32px;
    align-items: start;
    padding-bottom: 32px;
}

.footer-logo {
    display: flex;
    width: min(223px, 100%);
    min-height: 68px;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: 1px solid #dedede;
    border-radius: 12px;
    background: #fff;
}

.footer-logo img {
    display: block;
    width: 191px;
    max-width: 100%;
    height: auto;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.footer-links > div {
    min-width: 0;
}

.footer-links h3 {
    margin: 0 0 12px;
    color: var(--color-primary-hover);
    font-size: var(--fs-body);
    line-height: 1.25;
}

.footer-links a {
    display: block;
    margin-top: 8px;
    color: #fff;
    font-size: var(--fs-nav);
    line-height: 1.35;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--color-primary-hover);
}

.footer-line {
    border-top: 1px solid #2c2c2c;
    border-bottom: none;
    padding-top: 16px;
}

.footer-line p {
    margin: 0;
    color: #8e8e8e;
    font-size: var(--fs-body-sm);
    line-height: 1.4;
}

@media (max-width: 900px) {
    .footer-catalog {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .footer-links {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Keep the donor composition, but remove the empty gutters that appeared
   between the interactive blocks after the page was extended. */
.advantages-main,
.network-adapts,
.reviews-main,
.accordion-main,
.make-beautiful-main {
    padding-block: 28px !important;
}

.seo-longread {
    padding-block: 40px !important;
}

.make-beautiful-main {
    margin-top: 0 !important;
}

@media (max-width: 767px) {
    /* The donor's mobile rule enlarged this label beyond the fixed CTA cell. */
    .animated-button .btn-text {
        padding-inline: 12px;
    }
}