/*
 * Social Links — soft grey canvas, Poppins, coral pill buttons, navy footer.
 * Brand colours follow Site Settings: --color-primary (accent) and --color-secondary (ink / footer).
 * Every class is prefixed with `gsl-` so custom CMS HTML never collides with the Tailwind CDN utilities.
 */
body.theme-social-links {
    --gsl-primary: var(--color-primary, #ff725e);
    --gsl-primary-soft: color-mix(in srgb, var(--gsl-primary) 12%, #ffffff);
    --gsl-ink: var(--color-secondary, #1c1d3e);
    --gsl-bg: #f4f6fa;
    --gsl-surface: #ffffff;
    --gsl-text: #616368;
    --gsl-muted: #656d77;
    --gsl-heading: #232e3c;
    --gsl-link: #206bc4;
    --gsl-accent-red: #d63939;
    --gsl-accent-blue: #206bc4;
    --gsl-accent-green: #2fb344;
    --gsl-radius: 9999px;

    --cms-bg-page: var(--gsl-bg);
    --cms-surface: var(--gsl-surface);
    --cms-primary: var(--gsl-primary);
    --cms-primary-dark: var(--gsl-primary);
    --cms-ink: var(--gsl-heading);
    --cms-slate-200: #e6e8ee;
    --cms-text-muted: var(--gsl-muted);
    --cms-gradient: none;

    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background: var(--gsl-bg);
    color: var(--gsl-text);
}

body.theme-social-links main {
    background: var(--gsl-bg);
}

body.theme-social-links .cms-page section + section {
    border-top: 0;
}

/* Tailwind CDN ships `.collapse { visibility: collapse }`, which hides open Bootstrap menus and accordions. */
body.theme-social-links .collapse {
    visibility: visible;
}

/* ---------- Layout ---------- */

body.theme-social-links .gsl-container {
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

body.theme-social-links .gsl-container-narrow {
    max-width: 1080px;
}

body.theme-social-links .gsl-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

body.theme-social-links .gsl-section-lg {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

body.theme-social-links .gsl-section-white {
    background: var(--gsl-surface);
}

body.theme-social-links .gsl-section img {
    max-width: 100%;
    height: auto;
}

body.theme-social-links .gsl-img-full {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Typography ---------- */

body.theme-social-links .gsl-display {
    font-size: clamp(2.25rem, 1.4rem + 2.7vw, 3.5rem);
    font-weight: 300;
    line-height: 1.15;
    color: var(--gsl-text);
    margin: 0 0 2rem;
}

body.theme-social-links .gsl-title {
    font-size: clamp(2rem, 1.3rem + 2.8vw, 4rem);
    font-weight: 300;
    line-height: 1.15;
    color: var(--gsl-text);
    margin: 0 0 0.5rem;
}

body.theme-social-links .gsl-title-sm {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.43;
    color: var(--gsl-text);
    margin: 0;
}

body.theme-social-links .gsl-lead {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--gsl-text);
    margin: 1rem 0 2rem;
}

body.theme-social-links .gsl-text {
    color: var(--gsl-text);
    margin: 0;
}

body.theme-social-links .gsl-text + .gsl-text {
    margin-top: 0.5rem;
}

body.theme-social-links .gsl-feature-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 0.5rem;
    color: var(--gsl-heading);
}

body.theme-social-links .gsl-text-red { color: var(--gsl-accent-red); }
body.theme-social-links .gsl-text-blue { color: var(--gsl-accent-blue); }
body.theme-social-links .gsl-text-green { color: var(--gsl-accent-green); }
body.theme-social-links .gsl-text-primary { color: var(--gsl-primary); }

/* ---------- Buttons & links ---------- */

body.theme-social-links .gsl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--gsl-primary);
    border-radius: var(--gsl-radius);
    background: var(--gsl-primary);
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.43;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

body.theme-social-links .gsl-btn:hover,
body.theme-social-links .gsl-btn:focus-visible {
    color: #ffffff;
    filter: brightness(1.04);
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem color-mix(in srgb, var(--gsl-primary) 30%, transparent);
}

body.theme-social-links .gsl-btn-sm {
    font-size: 1rem;
    padding: 0.45rem 1.25rem;
}

body.theme-social-links .gsl-link {
    color: var(--gsl-link);
    text-decoration: none;
    padding: 1rem 1rem 1rem 2rem;
}

body.theme-social-links .gsl-link:hover {
    text-decoration: underline;
}

/* ---------- Navigation ---------- */

body.theme-social-links .gsl-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #ffffff;
    box-shadow: inset 0 -1px 0 rgba(101, 109, 119, 0.16);
    padding: 0.25rem 0;
}

body.theme-social-links .gsl-nav .gsl-nav-inner {
    padding: 0.25rem clamp(1rem, 4vw, 4rem);
}

body.theme-social-links .gsl-nav-logo {
    display: block;
    width: 200px;
    max-width: 55vw;
    height: auto;
}

body.theme-social-links .gsl-nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

body.theme-social-links .gsl-nav-link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    color: rgba(35, 46, 60, 0.7);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
}

body.theme-social-links .gsl-nav-link:hover,
body.theme-social-links .gsl-nav-link.is-active {
    color: var(--gsl-heading);
}

body.theme-social-links .gsl-nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
}

body.theme-social-links .gsl-nav-login {
    color: var(--gsl-link);
    text-decoration: none;
}

body.theme-social-links .gsl-nav-login:hover {
    text-decoration: underline;
}

body.theme-social-links .gsl-nav-toggle {
    border: 1px solid rgba(35, 46, 60, 0.15);
    border-radius: 6px;
    background: transparent;
    padding: 0.35rem 0.6rem;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--gsl-heading);
}

@media (min-width: 992px) {
    body.theme-social-links .gsl-nav-links {
        flex-direction: row;
        margin: 0 auto 0 4rem;
    }

    body.theme-social-links .gsl-nav-actions {
        padding: 0;
    }
}

/* ---------- Hero ---------- */

body.theme-social-links .gsl-hero {
    background-image: url("/images/themes/social-links/hero-bg.png");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 2rem 0;
}

body.theme-social-links .gsl-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 3px 1rem 3px 0;
    border-radius: var(--gsl-radius);
    background: var(--gsl-bg);
    color: var(--gsl-heading);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

body.theme-social-links .gsl-badge img {
    width: 40px;
    height: 40px;
}

/* ---------- Platform logos ---------- */

body.theme-social-links .gsl-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.5rem 4rem;
}

body.theme-social-links .gsl-logos img {
    width: 64px;
    height: auto;
    filter: grayscale(0.15);
    transition: transform 0.2s ease, filter 0.2s ease;
}

body.theme-social-links .gsl-logos img:hover {
    filter: none;
    transform: translateY(-3px);
}

/* ---------- Feature rows ---------- */

body.theme-social-links .gsl-feature-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

body.theme-social-links .gsl-feature-row img {
    width: 50px;
    flex: 0 0 50px;
}

body.theme-social-links .gsl-split {
    border-left: 1px solid #e6e8ee;
    padding: 3rem 0 3rem 3rem;
}

@media (max-width: 767.98px) {
    body.theme-social-links .gsl-split {
        border-left: 0;
        padding: 1rem 0 0;
    }
}

body.theme-social-links .gsl-icon-90 {
    width: 90px;
    padding: 1.5rem 0;
    box-sizing: content-box;
}

body.theme-social-links .gsl-step img {
    width: 25%;
    margin: 0 auto 1rem;
}

body.theme-social-links .gsl-step-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gsl-heading);
    margin: 0 0 0.5rem;
}

body.theme-social-links .gsl-icon-quarter {
    width: 25%;
    padding: 0.5rem 0;
}

/* ---------- Pricing ---------- */

body.theme-social-links .gsl-price-card {
    height: 100%;
    background: var(--gsl-surface);
    border-radius: 4px;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.176);
    overflow: hidden;
    transition: transform 0.2s ease;
}

body.theme-social-links .gsl-price-card:hover {
    transform: translateY(-4px);
}

body.theme-social-links .gsl-price-head {
    padding: 3.5rem 1rem 2.5rem;
    text-align: center;
}

body.theme-social-links .gsl-price-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gsl-text);
    margin: 0 0 0.5rem;
}

body.theme-social-links .gsl-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
}

body.theme-social-links .gsl-price-amount {
    font-size: 1.5rem;
    color: var(--gsl-heading);
}

body.theme-social-links .gsl-price-old {
    font-size: 0.85rem;
    color: var(--gsl-muted);
    text-decoration: line-through;
}

body.theme-social-links .gsl-price-sale {
    font-size: 1.5rem;
    color: var(--gsl-accent-red);
}

body.theme-social-links .gsl-price-unit {
    font-size: 1rem;
    font-weight: 400;
    color: var(--gsl-text);
}

body.theme-social-links .gsl-price-body {
    padding: 0 1rem 2.5rem;
    text-align: center;
}

body.theme-social-links .gsl-price-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

body.theme-social-links .gsl-price-list li {
    padding: 0.5rem 0;
    color: var(--gsl-muted);
}

/* ---------- Testimonials ---------- */

body.theme-social-links .gsl-testimonial {
    padding: 0 3rem 3.5rem;
}

body.theme-social-links .gsl-testimonial-head {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

body.theme-social-links .gsl-testimonial-head img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

body.theme-social-links .gsl-testimonial-name,
body.theme-social-links .gsl-testimonial-role {
    display: block;
    font-weight: 600;
    color: var(--gsl-text);
}

body.theme-social-links .gsl-testimonial-quote {
    margin: 1.5rem 0 0;
    color: var(--gsl-text);
}

body.theme-social-links .gsl-carousel-control {
    width: 2.5rem;
    height: 2.5rem;
    top: auto;
    bottom: 0;
    border-radius: 50%;
    background: var(--gsl-primary);
    opacity: 0.9;
}

body.theme-social-links .gsl-carousel-control:hover {
    opacity: 1;
}

body.theme-social-links .gsl-carousel-control .carousel-control-prev-icon,
body.theme-social-links .gsl-carousel-control .carousel-control-next-icon {
    width: 1.1rem;
    height: 1.1rem;
}

body.theme-social-links .carousel-control-prev.gsl-carousel-control {
    left: 0;
}

body.theme-social-links .carousel-control-next.gsl-carousel-control {
    left: 3.25rem;
    right: auto;
}

/* ---------- FAQ ---------- */

body.theme-social-links .gsl-faq-item {
    margin: 0 0 1.25rem;
}

body.theme-social-links .gsl-faq-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 20px 30px 20px 20px;
    border: 0;
    border-radius: 7px;
    background: var(--gsl-surface);
    color: var(--gsl-ink);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    text-transform: capitalize;
    transition: background-color 0.3s linear, color 0.3s linear;
}

body.theme-social-links .gsl-faq-toggle::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.25rem;
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1;
}

body.theme-social-links .gsl-faq-toggle:not(.collapsed)::before {
    content: "\2212";
}

body.theme-social-links .gsl-faq-toggle:hover,
body.theme-social-links .gsl-faq-toggle:not(.collapsed) {
    background: var(--gsl-primary);
    color: #ffffff;
}

body.theme-social-links .gsl-faq-answer {
    padding: 1.25rem 1.25rem 0.5rem;
    color: var(--gsl-text);
}

/* ---------- Contact & legal ---------- */

body.theme-social-links .gsl-card {
    height: 100%;
    padding: 2.5rem 2rem;
    background: var(--gsl-surface);
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgba(28, 29, 62, 0.08);
    text-align: center;
}

body.theme-social-links .gsl-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    background: var(--gsl-primary-soft);
    color: var(--gsl-primary);
    font-size: 1.75rem;
}

body.theme-social-links .gsl-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gsl-heading);
    margin: 0 0 0.75rem;
}

body.theme-social-links .gsl-legal {
    padding: 3rem;
    background: var(--gsl-surface);
    border-radius: 0.5rem;
    color: var(--gsl-text);
}

body.theme-social-links .gsl-legal h1 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--gsl-heading);
    margin: 0 0 1.5rem;
}

body.theme-social-links .gsl-legal h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gsl-heading);
    margin: 2rem 0 0.75rem;
}

body.theme-social-links .gsl-legal p {
    margin: 0 0 0.75rem;
}

body.theme-social-links .gsl-legal ul {
    list-style: disc;
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

body.theme-social-links .gsl-legal li {
    margin-bottom: 0.35rem;
}

@media (max-width: 575.98px) {
    body.theme-social-links .gsl-legal {
        padding: 1.75rem 1.25rem;
    }
}

/* ---------- Footer ---------- */

body.theme-social-links .gsl-footer {
    background: var(--gsl-ink);
    color: #9a9cb4;
    padding: 6rem 0 4rem;
    text-align: center;
}

body.theme-social-links .gsl-footer-brand {
    display: inline-block;
    margin-bottom: 2.5rem;
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 0;
}

body.theme-social-links .gsl-footer-brand span {
    color: var(--gsl-primary);
}

body.theme-social-links .gsl-footer-logo {
    display: block;
    width: 180px;
    max-width: 60vw;
    height: auto;
    margin: 0 auto;
}

body.theme-social-links .gsl-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.5rem;
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
}

body.theme-social-links .gsl-footer-links a {
    color: #f4f6fa;
    text-decoration: none;
}

body.theme-social-links .gsl-footer-links a:hover {
    color: var(--gsl-primary);
}

body.theme-social-links .gsl-footer-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 0 0 2.5rem;
}

body.theme-social-links .gsl-footer-social a {
    color: #7d7987;
    font-size: 2rem;
    line-height: 1;
    transition: color 0.2s ease;
}

body.theme-social-links .gsl-footer-social a:hover {
    color: var(--gsl-primary);
}

body.theme-social-links .gsl-footer-copy {
    margin: 0;
    font-size: 0.875rem;
    color: #9a9cb4;
}