/*
 * Homepage Sticky — JumpingGiraffe.com brand color overrides
 * Extends sticky/css/base.css
 *
 * JG Brand colours:
 *   #fe7404  Orange
 *   #009eef  Blue
 *   #368B38  Green
 *   #fff0dd  Cream
 */

/* html: controls viewport edge only — safe for position:sticky and Lenis.
   overflow-x:hidden on body or .container would create a scroll container,
   breaking position:sticky on all children and confusing Lenis. */
html {
    scroll-behavior: auto !important;
    overflow-x: hidden;
}

body {
    overflow-x: visible !important;
}

/* ─── Color overrides ───────────────────────────────────────────────────────── */

:root {
    --color-bg:         #0d0d1a;
    --color-text:       #fff;
    --color-link:       rgba(255, 255, 255, 0.7);
    --color-link-hover: #fe7404;

    /* Section backgrounds — darker tones of JG brand blues/green */
    --color-bg-1: #0b3d5e; /* Website Analytics — dark JG blue   */
    --color-bg-2: #0a2d47; /* AVE Analytics    — deeper blue     */
    --color-bg-3: #0b3d0d; /* Message Manager  — dark JG green   */
}

/* ─── Banner (hero header) ──────────────────────────────────────────────────── */

.jgs-banner {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
    padding: 120px 80px;
    background: rgb(254, 116, 4);
    background: radial-gradient(
        circle,
        rgba(233, 141, 67, 1) 3%,
        rgba(254, 116, 4, 1) 60%
    );
    overflow: hidden;
}

.jgs-banner__content {
    padding: 0 30px;
}

.jgs-banner__title {
    font-family: "Tilt Neon", sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.1;
    margin: 0 0 24px 0;
    text-transform: none;
    color: #fff;
}

.jgs-banner__subtitle {
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* ─── Icon grid (reused from homepage.css) ──────────────────────────────────── */

.🦒_users-color-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 16px;
}

.🦒_item {
    max-width: 180px;
    aspect-ratio: 1 / 1;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.4),
                inset 0px 2px 2px rgba(255, 255, 255, 0.2);
    animation: jgs-fadeIn 0.5s linear 1 forwards;
    animation-delay: calc(0.2s * var(--i));
    opacity: 0;
}

@keyframes jgs-fadeIn {
    0%   { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
}

.🦒_item:nth-child(1)  { background-color: #67d7e1; border-radius: 50% 50% 0 50%; }
.🦒_item:nth-child(2)  { border-radius: 50% 50% 0 0; }
.🦒_item:nth-child(3)  { background-color: #6cc164; border-radius: 50%; }
.🦒_item:nth-child(4)  { border-radius: 0 0 0 50%; }
.🦒_item:nth-child(5)  { border-radius: 0 50% 50% 0; }
.🦒_item:nth-child(6)  { background-color: #8071a8; border-radius: 0 50% 50% 50%; }
.🦒_item:nth-child(7)  { border-radius: 50% 50% 0 50%; }
.🦒_item:nth-child(8)  { background-color: #fe7519; border-radius: 50% 0 0 50%; }
.🦒_item:nth-child(9)  { background-color: #f5bec3; border-radius: 0 50% 50% 0; }
.🦒_item:nth-child(10) { border-radius: 50%; }
.🦒_item:nth-child(11) { background-color: #fcd659; border-radius: 50% 0 50% 50%; }
.🦒_item:nth-child(12) { border-radius: 50% 0 0 0; }

/* ─── WordPress content section ─────────────────────────────────────────────── */

.jgs-wp-content {
    position: relative;
    z-index: 2;
}

/* ─── Plugin images — square icons, not large artwork ───────────────────────── */

.content--sticky .content__img {
    width: auto !important;
    max-width: 180px;
    height: auto;
    border-radius: 16px;
}

/* ─── Rich text content in sticky sections (overrides <p> defaults) ─────────── */

.content__text ul {
    margin: 10px 0 14px 0;
    padding-left: 1.4em;
    list-style: disc;
}

.content__text ul li {
    margin-bottom: 6px;
    line-height: 1.5;
    font-size: 0.9em;
}

.content__text p {
    margin-bottom: 8px;
    line-height: 1.5;
}

.content__text a {
    color: var(--color-link-hover);
}

.content__text a:hover {
    color: #fff;
}

/* ─── Section background gradients ──────────────────────────────────────────── */

.bg-1 {
    background: radial-gradient(
        circle at 30% 50%,
        #0d5a8a 0%,
        var(--color-bg-1) 70%
    );
}

.bg-2 {
    background: radial-gradient(
        circle at 30% 50%,
        #0d4468 0%,
        var(--color-bg-2) 70%
    );
}

.bg-3 {
    background: radial-gradient(
        circle at 30% 50%,
        #0d5a10 0%,
        var(--color-bg-3) 70%
    );
}

/* ─── Intro / outro text ─────────────────────────────────────────────────────── */

.content--intro,
.content--outro {
    background: var(--color-bg);
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 815px) {
    .jgs-banner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        padding: 80px 40px 60px;
        gap: 40px;
    }

    .jgs-banner__content {
        padding: 0;
        text-align: center;
    }

    .🦒_users-color-container {
        justify-self: center;
        max-width: 340px;
    }
}

@media (max-width: 480px) {
    .jgs-banner {
        padding: 60px 24px 40px;
    }
}