/* =============================================================================
   Square Grape landing page — light-lilac reskin
   Mirrors the design language of rsvp_website/public/css/index.css.
   Scoped to body.squaregrape so these rules do not leak into squaremain.css
   as a fallback for other squaregrape pages.
   Loaded AFTER squaremain.css so these rules win the cascade.
   ============================================================================= */

:root {
    /* Brand palette */
    --g4i-purple-dark:  #6d28d9;
    --g4i-purple:       #8b5cf6;
    --g4i-purple-light: #c4b5fd;
    --g4i-fuchsia:      #d946ef;

    /* Light surface palette (from the Grape4Invite app spec) */
    --g4i-bg:           #eeebf4;
    --g4i-card:         #ffffff;
    --g4i-border:       rgba(139, 92, 246, 0.15);
    --g4i-text:         #1f2937;
    --g4i-text-muted:   #6b7280;
    --g4i-white:        #ffffff;

    /* App design-system tokens */
    --primary-purple:   #b444eb;
    --secondary-purple: #8b5cf6;
    --main-gradient:    linear-gradient(135deg, #c026d3, #8b5cf6);
    --shadow-purple:    rgba(139, 92, 246, 0.25);
    --btn-radius:       30px;

    --g4i-radius:       20px;
    --g4i-radius-sm:    10px;
    --g4i-shadow-lg:    0 16px 56px rgba(139, 92, 246, 0.2);
    --g4i-shadow-md:    0 8px 24px rgba(139, 92, 246, 0.15);
    --g4i-shadow-sm:    0 4px 14px rgba(139, 92, 246, 0.1);
}

/* -----------------------------------------------------------------------------
   Page surface
   ----------------------------------------------------------------------------- */
body.squaregrape { background: var(--g4i-bg); color: var(--g4i-text); }
body.squaregrape *,
body.squaregrape *::before,
body.squaregrape *::after { box-sizing: border-box; }

/* -----------------------------------------------------------------------------
   HEADER — white bar with dark text, gradient CTA pill, grape logo mark
   ----------------------------------------------------------------------------- */

body.squaregrape #header {
    background: var(--g4i-card);
    color: var(--g4i-text);
    box-shadow: var(--g4i-shadow-sm);
    border-bottom: 1px solid var(--g4i-border);
    background-image: none;
}
body.squaregrape #header #logo,
body.squaregrape #header #logo a {
    color: var(--primary-purple) !important;
    text-decoration: none;
    font-weight: 600;
}
/* Grape logo image before the Square Grape wordmark text — applies to both
   the desktop #header and the mobile #titleBar (whose .title is a clone of
   #logo.html() via main.js), matching grape4invite.com's pattern of using
   one em-based rule so each context scales to its own font-size. */
body.squaregrape #header #logo a .logo-mark,
body.squaregrape #titleBar .title .logo-mark {
    height: 1.4em;
    width: auto;
    margin-right: 0.45em;
    vertical-align: middle;
    filter: drop-shadow(0 3px 8px var(--shadow-purple));
}
body.squaregrape #header #nav a {
    color: var(--g4i-text) !important;
    text-decoration: none;
}
body.squaregrape #header #nav a:hover { color: var(--primary-purple) !important; }

/* Language dropdown: mirror mobile #navPanel depth-1 look —
   group card with purple left accent, lilac wash, hover deepens tint. */
body.squaregrape #header #nav > ul > li > ul {
    background: var(--g4i-card);
    border: 1px solid var(--g4i-border);
    box-shadow: var(--g4i-shadow-md);
    border-radius: var(--g4i-radius-sm);
    padding: 0;
    min-width: 160px;
    overflow: hidden; /* clip group corners + left-accent */
}

body.squaregrape #header #nav > ul > li > ul > li {
    display: block;
    margin: 0;
}

body.squaregrape #header #nav > ul > li > ul > li > a {
    display: block;
    padding: 0.6em 1em;
    color: var(--g4i-text-muted) !important;
    font-size: 0.95em;
    font-weight: 400;
    line-height: 1.3;
    background: rgba(139, 92, 246, 0.04);
    border-left: 3px solid var(--primary-purple); /* rides along with hover swipe, same as mobile */
    border-top: 1px solid rgba(139, 92, 246, 0.08);
    transform: translateX(0);
    transition:
        background-color 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease;
}

body.squaregrape #header #nav > ul > li > ul > li:first-child > a {
    border-top: none;
}

body.squaregrape #header #nav ul li ul li a:hover {
    background: rgba(139, 92, 246, 0.1);
    color: var(--primary-purple) !important;
    transform: translateX(6px);
}

/* Access Grape4Invite pill — uses the app button spec */
body.squaregrape #header nav ul li { vertical-align: middle; }
body.squaregrape #header .button.primary {
    background: var(--main-gradient);
    color: #ffffff !important;
    border: none;
    border-radius: var(--btn-radius);
    height: auto;
    line-height: 1.2;
    padding: 0.55rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 8px 25px var(--shadow-purple);
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s, box-shadow 0.2s;
}
body.squaregrape #header .button.primary:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 28px var(--shadow-purple);
}
body.squaregrape #header .button.primary b { font-weight: 600; }

/* -----------------------------------------------------------------------------
   BANNER — lilac bg, clean white card, dark text
   ----------------------------------------------------------------------------- */

body.squaregrape #banner {
    position: relative;
    min-height: auto;                                    /* was 100vh — let the banner shrink
                                                            so the footer sits right under the card
                                                            instead of being pushed past the fold */
    display: flex;
    align-items: center;
    justify-content: center;
    /* NOTE: squaremain.css line 2988 has #banner { padding: 0 !important }
       which blocks any padding declared here. The top/bottom gap between
       the fixed #header and the card is driven from .banner-flex below. */
    background: var(--g4i-bg);
    color: var(--g4i-text);
    overflow: hidden;
    background-image: none;
}
body.squaregrape #banner::before { content: none; display: none; }

body.squaregrape #banner .content.banner-flex {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;                                       /* override squaremain.css's legacy
                                                            .banner-flex { margin-top: -200px; }
                                                            which pulled the card under the fixed
                                                            mobile #titleBar */
    padding: 5rem 1rem 4rem;                             /* desktop (>1280px): 5rem top clears the
                                                            3.5em fixed #header (~60.7px at 13pt body)
                                                            with ~19–24px breathing room */
}
/* Large (≤1280px): body font shrinks to 11.5pt, so the header is shorter
   (~53.7px). Trim the top padding here per design ask — card sits closer
   to the header with ~10px clearance. */
@media screen and (max-width: 1280px) {
    body.squaregrape #banner .content.banner-flex {
        padding-top: 4rem;
    }
}
/* Mobile (≤736px): #header is hidden and #titleBar is only 44px with
   #page-wrapper already padding 44px, so tighten padding all around. */
@media screen and (max-width: 736px) {
    body.squaregrape #banner .content.banner-flex {
        padding: 2.5rem 1rem 2rem;
    }
}

body.squaregrape .card-box {
    background: var(--g4i-card) !important;
    border: 1px solid var(--g4i-border) !important;
    border-radius: var(--g4i-radius) !important;
    box-shadow: var(--g4i-shadow-lg) !important;
    padding: 2.5rem 2rem !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    text-align: center !important;
    color: var(--g4i-text) !important;
    backdrop-filter: none !important;
}

body.squaregrape .card-box .logotext-img {
    display: block !important;
    max-width: 320px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 1.5rem !important;
}

body.squaregrape .welcome-text {
    color: var(--g4i-text) !important;
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    margin: 0 0 1.75rem !important;
}
body.squaregrape .welcome-text span { color: var(--g4i-text) !important; }

body.squaregrape .store-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin: 0 !important;
}
body.squaregrape .store-buttons .google-play-btn,
body.squaregrape .store-buttons .app-store-btn {
    display: inline-block !important;
    line-height: 0 !important;
    text-decoration: none !important;
    border: none !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
}
body.squaregrape .store-buttons img {
    display: block !important;
    width: 170px !important;
    height: auto !important;
    max-width: 100% !important;
}

/* -----------------------------------------------------------------------------
   BACK BUTTON — gradient pill used on secondary pages (e.g. comingsoon-apple).
   Matches the site's primary CTA language.
   ----------------------------------------------------------------------------- */

body.squaregrape .back-button {
    display: inline-block;
    background: var(--main-gradient);
    color: #ffffff !important;
    border: none;
    border-radius: var(--btn-radius);
    padding: 0.75rem 2rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 25px var(--shadow-purple);
    transition: transform 0.15s, filter 0.15s, box-shadow 0.2s;
    margin-top: 1rem;
    cursor: pointer;
}
body.squaregrape .back-button:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 28px var(--shadow-purple);
}
body.squaregrape .back-button:focus-visible {
    outline: 3px solid var(--primary-purple);
    outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   FOOTER — lilac bg, small grape logo + copyright
   ----------------------------------------------------------------------------- */

body.squaregrape #footer {
    background: var(--g4i-bg);
    color: var(--g4i-text);
    padding: 2rem 1.5rem 2rem;
    text-align: center;
    border-top: 1px solid var(--g4i-border);
}
body.squaregrape #footer .copyright {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.squaregrape #footer .copyright li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    border: 0;
}
body.squaregrape #footer .copyright .logo-img {
    height: 50px;                                       /* match grape4invite.com footer logo size */
    width: auto;
    opacity: 0.85;
}
body.squaregrape #footer .copyright span {
    font-size: 0.9rem;
    color: var(--g4i-text-muted);
    font-weight: 700;                                   /* bold copyright line */
}

@media screen and (min-width: 768px) {
    body.squaregrape #footer .copyright li {
        flex-direction: row;
        justify-content: center;
    }
}

/* -----------------------------------------------------------------------------
   Tablet polish
   ----------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
    body.squaregrape .card-box {
        padding: 3rem 2.5rem !important;
    }
    body.squaregrape .welcome-text { font-size: 1.2rem !important; }
    body.squaregrape .store-buttons img { width: 190px !important; }
}

@media screen and (min-width: 1200px) {
    body.squaregrape .card-box {
        max-width: 820px !important;
        padding: 3.5rem 3rem !important;
    }
    body.squaregrape .card-box .logotext-img { max-width: 380px !important; }
    body.squaregrape .welcome-text { font-size: 1.25rem !important; }
    body.squaregrape .store-buttons img { width: 210px !important; }
}

/* -----------------------------------------------------------------------------
   CARD-BOX HEAD — the Grape4Invite app icon sits inside the card,
   to the left of the Grape4Invite wordmark (stacked on mobile, row on tablet+).
   Scoped to body.squaregrape so it overrides squaremain.css's legacy
   absolute offsets (top: -50px; left: -400px) without leaking out.
   ----------------------------------------------------------------------------- */
body.squaregrape .card-box__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
body.squaregrape .card-box .logo.animated-logo {
    position: relative;
    top: auto;
    left: auto;
    margin: 0;
    width: 120px;
    height: 120px;
    flex: 0 0 auto;
    /* Neutralize squaremain.css's purple-gradient circle — the app icon
       already carries its own rounded background, so we want a bare,
       transparent tile (mirrors grape4invite.com's .hero__checkmark). */
    background: none;
    box-shadow: none;
    border-radius: 0;
    /* Override the template's logoFloat with a scoped keyframe that
       floats around a 20%-higher baseline, so the logo visually sits
       a bit higher in the hero card. Same 6s / 10px bounce. */
    animation: squaregrapeLogoFloat 6s ease-in-out infinite;
}
@keyframes squaregrapeLogoFloat {
    0%, 100% { transform: translateY(-20%); }
    50%      { transform: translateY(calc(-20% - 10px)); }
}
/* grape4invite.com's .hero__checkmark has no inner highlight overlay — kill
   the translucent radial gradient drawn by squaremain.css's
   .logo.animated-logo::before so the two marks render identically. */
body.squaregrape .logo.animated-logo::before {
    content: none;
    display: none;
}
body.squaregrape .card-box .logo.animated-logo .logo-img-checkmark {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
body.squaregrape .card-box .logotext-img { margin: 0 !important; }

@media screen and (min-width: 768px) {
    body.squaregrape .card-box__head {
        flex-direction: row;
        gap: 2rem;
    }
    body.squaregrape .card-box .logo.animated-logo { width: 140px; height: 140px; }
}
@media screen and (min-width: 1200px) {
    body.squaregrape .card-box .logo.animated-logo { width: 160px; height: 160px; }
}

/* -----------------------------------------------------------------------------
   MOBILE NAV — mirror grape4invite.com's design: white #titleBar and #navPanel
   with purple accents, gradient hamburger toggle, gradient CTA pill.
   Scoped to body.squaregrape so the template's dark mobile nav is only
   overridden on this page.
   ----------------------------------------------------------------------------- */

body.squaregrape #titleBar {
    background: var(--g4i-card);
    color: var(--primary-purple);
    box-shadow: var(--g4i-shadow-sm);
    border-bottom: 1px solid var(--g4i-border);
}
body.squaregrape #titleBar .title,
body.squaregrape #titleBar .title a {
    color: var(--primary-purple) !important;
    font-weight: 600;
    text-decoration: none;
}
body.squaregrape #titleBar .toggle:before {
    background: var(--main-gradient);
    color: #ffffff;
    border-radius: var(--g4i-radius-sm);
}

body.squaregrape #navPanel {
    background: var(--g4i-card);
    color: var(--g4i-text);
    border-right: 1px solid var(--g4i-border);
    box-shadow: var(--g4i-shadow-md);
    padding: 1rem;
}
body.squaregrape #navPanel .link {
    color: var(--g4i-text) !important;
    border-top: 1px solid var(--g4i-border);
    padding: 0 0.5rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
body.squaregrape #navPanel .link:hover {
    color: var(--primary-purple) !important;
    background: var(--g4i-bg);
}
body.squaregrape #navPanel .link.depth-0 {
    color: var(--g4i-text) !important;
    font-weight: 600;
}

/* Nested language options — grouped visually as children of "Language" above:
   purple left accent, faint tinted bg, subtle dividers. */
body.squaregrape #navPanel .link.depth-1 {
    color: var(--g4i-text-muted) !important;
    font-weight: 400;
    font-size: 0.95em;
    margin-left: 1rem;
    padding-left: 3.5rem;
    border-top: 1px solid rgba(139, 92, 246, 0.08);
    border-left: 3px solid var(--primary-purple);
    background: rgba(139, 92, 246, 0.04);
    transform: translateX(0);
    transition:
        background 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease;
}
body.squaregrape #navPanel .link.depth-0 + .link.depth-1 {
    border-top: none;
    margin-top: 0.25rem;
    border-top-left-radius: var(--g4i-radius-sm);
}
body.squaregrape #navPanel .link.depth-1:has(+ .link.depth-0) {
    margin-bottom: 0.5rem;
    border-bottom-left-radius: var(--g4i-radius-sm);
}
body.squaregrape #navPanel .link.depth-1:hover {
    color: var(--primary-purple) !important;
    background: rgba(139, 92, 246, 0.1);
    transform: translateX(6px);
}

/* "Access Grape4Invite" CTA — gradient pill inside the panel.
   Target by href since navList() strips class attributes. */
body.squaregrape #navPanel .link[href="https://www.grape4invite.com"] {
    background: var(--main-gradient);
    color: #ffffff !important;
    border-radius: var(--btn-radius);
    font-weight: 600;
    text-align: center;
    margin: 0.5rem 0;
    height: 2.75rem;
    line-height: 2.75rem;
    border-top: none;
    box-shadow: 0 4px 14px var(--shadow-purple);
}
body.squaregrape #navPanel .link[href="https://www.grape4invite.com"]:hover {
    color: #ffffff !important;
    background: var(--main-gradient);
    filter: brightness(1.05);
}