/*
Theme Name: Sketchamajig
Theme URI: https://almost.chibitronics.com/
Author: Kevin Çelebi
Author URI: https://chibitronics.com/
Description: A custom theme designed for Sketcher-Site Test; evolving into a full Chibitronics site.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: custom, creative, responsive
Text Domain: sketchamajig
*/

/* ========================================================================== */
/* ========================== TABLE OF CONTENTS ============================= */
/* ========================================================================== */
/*
1. CSS VARIABLES
2. BASE RESETS & TYPOGRAPHY
3. HEADER
4. LOGO
5. NAVIGATION MENU
6. BUTTONS
7. DROPDOWN MENUS
8. UTILITY MENU
9. FOOTER
10. FOOTER DECORATIONS
11. FOOTER LAYOUT
12. FOOTER CAT
13. NEWSLETTER
14. FOOTER BOTTOM
15. MOBILE MENU TOGGLE
16. MOBILE SLIDE-OUT PANEL
17. MOBILE RESPONSIVE
18. FOOTER V2 OVERRIDES
19. BRAND & BADGES
20. INLINE SIGNUP
21. CONTENT BANDS
22. WORDPRESS BLOCK STYLES
23. HERO SECTION
24. SPARKLES
*/

/* ========================================================================== */
/* ========================== CSS VARIABLES ================================ */
/* ========================================================================== */
:root {
    --pink:       #D91645;   /* Shop button "rich" pink */
    --teal:       #2A8F99;   /* Circuit Sketcher "rich" teal */
    --nav-bg:     #E1F6F8;   /* Navbar background */
    --text-base:  #000;      /* Main text color */
    --text-muted: #555;      /* Secondary text/muted color */
    --header-gap: 3rem;      /* Spacing between logo & nav on desktop */
}

/* ========================================================================== */
/* ====================== BASE RESETS & TYPOGRAPHY ========================== */
/* ========================================================================== */
body {
    margin: 0;
    padding: 0;
    font-family: "Lexend", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
    color: #333;
    background: #fff;
}

/* Override Tailwind container to use full width */
.container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

*, *::before, *::after { box-sizing: border-box; }

/* Optional belt-and-suspenders if you still see a 1px jiggle */
html, body { overflow-x: hidden; }

/* ========================================================================== */
/* =============================== HEADER ================================== */
/* ========================================================================== */
header {
    background-color: #ffffff; /* Cloud white instead of teal */
}
header > .container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* spread logo and nav */
    gap: var(--header-gap);
    padding: 1rem calc(2rem + 35px) !important;
}

/* full-bleed header */
.site-header {
    background: #ffffff;
    box-shadow: none;   /* remove the white Tailwind shadow */
    width: 100%;
}

/* span the whole row */
.site-header > .container{
    max-width: 1200px;
    margin-inline: auto;
    padding: 1rem calc(2rem + 35px) !important;
}

/* ========================================================================== */
/* ================================ LOGO =================================== */
/* ========================================================================== */
.site-branding {
    flex-shrink: 0;
}
.site-branding img.custom-logo {
    max-height: 60px;
    width: auto;
    display: block;
    margin-right: 0; /* NEW */
}

/* ========================================================================== */
/* ========================== NAVIGATION MENU ============================== */
/* ========================================================================== */
.nav-primary {
    position: relative;
    flex: 1 1 auto;
}

.nav-primary .mobile-menu-container {
    width: 100%;
}

.menu-primary {
    display: flex;
    align-items: center;
    justify-content: space-between;  /* spread across the whole line */
    width: 100%;
    background: transparent;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* make each top-level item take its natural width */
.menu-primary > li {
    flex: 0 0 auto;
    margin: 0 1rem;  /* Add some breathing room between items */
}

/* Make first 3 links red */
.menu-primary > li:nth-child(1) > a,
.menu-primary > li:nth-child(2) > a,
.menu-primary > li:nth-child(3) > a {
    color: var(--pink) !important;
}

/* Create two groups: first 3 items, then gap, then last 3 items */
.menu-primary > li:nth-child(3) {
    margin-right: 6rem; /* Bigger gap after the 3rd item */
}

.menu-primary > li:nth-child(4) {
    margin-left: 6rem; /* Bigger gap before the 4th item */
}

/* kill bullets + default spacing on the header menu */
.site-header .site-navigation ul,
.site-header .site-navigation li { list-style:none; margin:0; padding:0; }
.menu-primary,
.menu-primary li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 2) safety: never let the menu row overflow */
.site-header .menu-primary {
    max-width: 100%;
    overflow: visible;
}

@media (min-width: 769px){
    .menu-primary{
        display: flex;
        align-items: center;
        gap: 2.25rem;          /* space between siblings within each group */
        justify-content: flex-start;
        background: transparent;
        width: 100%;
    }
    .menu-primary > li{ margin: 0; }  /* remove any leftover manual margins */

    /* This is the trick! everything from the 4th item on becomes Group B */
    .menu-primary > li:nth-child(4){ margin-left: auto; }
}

/* First 3 links in red (Group A) */
.menu-primary > li:nth-child(-n+3) > a {
    color: var(--pink) !important;
    font-weight: bold;
}

/* Make all navbar links bold */
.menu-primary > li > a {
    font-weight: bold;
}

/* ========================================================================== */
/* ========================== TEXT NAVIGATION LINKS ======================== */
/* ========================================================================== */
.menu-primary > li:not(.shop-btn):not(.cs-btn) > a {
    font-family: "Lexend", sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: none;
    color: var(--text-base);
    padding: 0.5rem 0; /* Vertically position inside the 49px nav bar */
    position: relative;
    text-decoration: none;
    transition: color 0.2s ease;
}
.menu-primary > li:not(.shop-btn):not(.cs-btn) > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px; /* 2px below the text baseline */
    width: 0;
    height: 3px;
    background: var(--pink);
    transition: width 0.2s ease;
}
.menu-primary > li:not(.shop-btn):not(.cs-btn) > a:hover {
    color: var(--pink);
}
.menu-primary > li:not(.shop-btn):not(.cs-btn) > a:hover::after {
    width: 100%;
}

/* ========================================================================== */
/* =============================== BUTTONS ================================= */
/* ========================================================================== */
/* Shop button (nav) & footer */
.menu-primary > li.shop-btn > a,
.btn-shop {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 86px;
    height: 49px;
    padding: 0;
    border-radius: 25px;
    line-height: 1;
    white-space: nowrap;

    color: #ffffff;
    border: 2px solid var(--pink);
    border-bottom-width: 4px !important; /* Thicker bottom edge */
    background-clip: padding-box;
    background-color: var(--pink); /* Deep red background */

    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.1);

    font-family: "Lexend", sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;

    transition: transform 0.1s ease;
}
.site-header .menu-primary > li.shop-btn > a {
    box-shadow: none;
}
.menu-primary > li.shop-btn > a:hover,
.btn-shop:hover {
    transform: translateY(-2px);
    background-color: #b8133a; /* Slightly darker red on hover */
}

/* Circuit Sketcher button (nav) & footer */
.menu-primary > li.cs-btn > a,
.btn-sketcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 181px;
    height: 49px;
    padding: 0;
    border-radius: 7px;
    line-height: 1;
    white-space: nowrap;

    color: var(--teal);
    border: 2px solid var(--teal);
    border-bottom-width: 4px !important;
    background-clip: padding-box;
    background-color: #e8f8fa; /* Very light teal fill */

    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.1);

    font-family: "Lexend", sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;

    transition: transform 0.1s ease;
}

.menu-primary > li.cs-btn > a:hover,
.btn-sketcher:hover {
    transform: translateY(-2px);
}

/* Primary button styling */
.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    background-color: var(--pink);
    color: #ffffff;
    border: 2px solid var(--pink);
    border-bottom-width: 4px;
    font-family: "Lexend", sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.2s ease;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"].btn-primary:hover {
    background-color: #b8133a;
    transform: translateY(-2px);
}

/* ========================================================================== */
/* ============================ DROPDOWN MENUS ============================= */
/* ========================================================================== */
.menu-primary .sub-menu {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem;
    padding: 0.5rem 0;
    white-space: nowrap;
    z-index: 10;
}
.menu-primary li:hover > .sub-menu {
    display: block;
}
.menu-primary .sub-menu li {
    list-style: none;
}
.menu-primary .sub-menu li a {
    font-family: "Lexend", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #222;
    padding: 0.5rem 1rem;
    display: block;
    transition: background 0.2s ease, color 0.2s ease;
}
.menu-primary .sub-menu li a:hover {
    background: var(--pink);
    color: #fff;
}

/* ========================================================================== */
/* ============================ UTILITY MENU ============================== */
/* ========================================================================== */
.nav-utility .menu-utility,
.menu-utility {
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu-utility a {
    font-family: "Lexend", sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.2s ease;
}
.menu-utility a:hover {
    color: var(--pink);
}

/* ========================================================================== */
/* =============================== FOOTER ================================== */
/* ========================================================================== */
.site-footer {
    font-family: "Lexend", sans-serif;
    background-color: #383838;
    color: #fff;
    margin: 0;
    padding: 0;
    position: relative; /* so .footer-top-decor sits on top */
}

/* ========================================================================== */
/* ========================== FOOTER DECORATIONS =========================== */
/* Big zig-zag that inherits the parent bg and overlaps the next band */
/* ===== Zig-zag separator ================================================== */
.wp-block-separator.is-style-chibi-zigzag,
.chibi-zigzag {
    --zig-h: 56px;                  /* tooth height */
    height: var(--zig-h);
    margin: 0 0 calc(-1 * var(--zig-h));  /* pull it down so it overlaps next band */
    line-height: 0;                 /* kill stray line height space */
    display: block;
    width: 100%;
    position: relative;
    z-index: 5;                     /* keep above the next section */
    border: 0;
    background: transparent;
}

.chibi-zigzag svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Give the teeth the right color per band */
.chibi-zigzag {
    color: var(--wp--preset--color--custom-nav);   /* teal teeth */
}




.home-band--red {
    position: relative;
    z-index: 1;  /* sits behind the teeth */
}

/* Make sure bands can overlap the separator */
.is-style-home-hero,
.home-band--red {
    overflow: visible;
}

/* ========================================================================== */
/* ========================== FOOTER LAYOUT =============================== */
/* ========================================================================== */
.footer-widgets {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) 2fr minmax(250px, 1fr);
    gap: 2rem;
    padding: 4rem 2rem;
}

/* 2×2 grid for the four link-groups in the footer's center column */
.footer-main-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

/* Card style on each of the four footer-col columns */
.footer-main-links .footer-col {
    background: #454545;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

.footer-col h4 {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}
.footer-col .footer-menu li a {
    display: block;
    padding: 0.25rem 0;
    color: #fff;
    transition: color 0.2s ease;
}
.footer-col .footer-menu li a:hover {
    color: var(--pink);
}

/* ========================================================================== */
/* ============================ FOOTER CAT ================================ */
/* ========================================================================== */
.footer-cat {
    position: absolute;
    bottom: 0;
    right: 400px; /* Position it more precisely under the shop button */
    z-index: 1;
    pointer-events: none; /* Allow clicks to pass through */
}

.footer-cat img {
    max-height: 400px;
    width: auto;
    display: block;
}

/* ========================================================================== */
/* ============================ NEWSLETTER ================================ */
/* ========================================================================== */
.footer-subscribe {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 2rem;
}

/* Make the form's children (input + button) sit side by side */
.footer-subscribe .subscribe-form {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
}

/* Text field styling */
.footer-subscribe input[type="email"] {
    width: 331px;
    height: 44px;
    padding: 13px 15px;
    background: #ffffff;
    border: none;
    border-radius: 10px;

    font-family: "Lexend", sans-serif;
    font-size: 14px;
    color: #333;
}
.footer-subscribe input[type="email"]::placeholder {
    color: #999;
}

/* "Submit" button (Secondary Button style) */
.footer-subscribe button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 104px;
    height: 43px;
    padding: 0;
    border-radius: 7px;

    background: transparent;
    border: 2px solid #ffffff;
    border-bottom-width: 4px;
    background-clip: padding-box;

    font-family: "Lexend", sans-serif;
    font-size: 14px;
    color: #ffffff;
    cursor: pointer;

    transition: background 0.2s ease, transform 0.1s ease;
}
.footer-subscribe button:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

/* ========================================================================== */
/* ========================== FOOTER BOTTOM =============================== */
/* ========================================================================== */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
}

/* ========================================================================== */
/* ========================== MOBILE MENU TOGGLE ========================== */
/* ========================================================================== */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

/* ========================================================================== */
/* ======================= MOBILE SLIDE-OUT PANEL ========================== */
/* ========================================================================== */
@media (max-width: 768px) {
    header > .container {
        justify-content: space-between;
        gap: 0;
    }

    .menu-toggle {
        display: block;
        color: var(--text-base);
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 20;
    }

    .mobile-menu-container {
        position: relative;
    }

    .menu-primary {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 0;
        overflow-x: hidden;
        background: #fff;
        flex-direction: column;
        padding-top: 5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        z-index: 10;
        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
        transition: width 0.3s ease;
    }

    .menu-primary.open {
        display: flex !important;
        width: 280px; /* Fixed width, not percentage */
    }

    .menu-primary > li {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .menu-primary > li > a {
        font-family: "Lexend", sans-serif;
        font-size: 16px;
        font-weight: 500;
        color: var(--text-base);
        text-decoration: none;
        padding: 0.75rem 0;
        border-bottom: 1px solid #eee;
        display: block;
    }

    .menu-primary > li:last-child > a {
        border-bottom: none;
    }

    .menu-primary .sub-menu {
        display: none;
        margin-left: 1rem;
    }

    .footer-widgets.container,
    .footer-subscribe.container,
    .footer-bottom.container {
        width: 100%;
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .footer-widgets {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 2rem 1rem !important;
    }

    .footer-main-links {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .footer-main-links .footer-col {
        width: 100%;
    }

    .footer-col.about,
    .footer-col.blog {
        text-align: center;
        margin-bottom: 2rem;
    }

    .footer-col {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Header mobile fixes */
    .site-header > .container {
        padding: 1rem 1rem; /* Reduce padding on mobile */
    }

    /* Footer mobile fixes */
    .footer-widgets {
        padding: 2rem 1rem;
        grid-template-columns: 1fr; /* Stack columns on mobile */
        gap: 2rem;
    }

    .footer-main-links {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .footer-col.about, .footer-col.blog {
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.5rem 1rem 2rem; /* Adjust padding */
    }

    /* Fix footer container width on mobile */
    .site-footer .container {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Hide cat on mobile */
    .footer-cat {
        display: none;
    }
}

/* ========================================================================== */
/* ======================== RESPONSIVE BREAKPOINTS ========================= */
/* ========================================================================== */
@media (max-width: 1200px) {
    .footer-widgets {
        grid-template-columns: minmax(200px, 1fr) 1.5fr minmax(200px, 1fr);
        gap: 1.5rem;
        padding: 3rem 1.5rem;
    }

    .footer-cat {
        right: 300px;
    }
    .footer-cat img {
        max-height: 300px;
    }
}

@media (max-width: 900px) {
    .footer-widgets {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        padding: 2rem 1rem;
    }

    .footer-col.about {
        grid-column: 1 / -1; /* Span full width */
    }

    .footer-cat {
        right: 200px;
    }
    .footer-cat img {
        max-height: 250px;
    }
}

/* ========================================================================== */
/* ======================= FOOTER V2 OVERRIDES ============================ */
/* ========================================================================== */

/* (safe) global container width if not already defined elsewhere */
.site-footer .container { 
    max-width: 1400px; 
    margin-left: 8rem !important;
    margin-right: 2rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* make footer white, airy, clean */
.site-footer { background:#fff; color:#222; border-top:1px solid #eee; }
.footer-top-decor { display:none; }

/* spacing & layout tweaks */
.footer-widgets { 
    padding: 4rem 1rem 2rem 3rem !important;
}
.footer-widgets.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.footer-main-links { gap: 2.5rem 4rem; }

/* remove dark cards in middle four lists */
.footer-main-links .footer-col { background: transparent; padding: 0; }

/* section headings */
.footer-col h4 {
    color: var(--pink);
    font: 700 20px/1.1 "Lexend", sans-serif;
    margin: 0 0 1rem;
    letter-spacing: .2px;
}

/* blog column uses teal accent */
.footer-col.blog h4 { color: var(--teal); }
.footer-col.blog .footer-menu a {
    color: var(--teal);
    font-weight: 700;
}

/* list links */
.footer-col .footer-menu { margin:0; padding:0; list-style:none; }
.footer-col .footer-menu li a {
    display:inline-block;
    padding:.35rem 0;
    color:#222;
    text-decoration:none;
    font-weight:600;
}
.footer-col .footer-menu li a:hover {
    color: var(--pink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* about blurb + socials */
.footer-col.about .footer-about-text {
    font: 600 18px/1.35 "Lexend", sans-serif;
    color:#2b2b2b;
    max-width: 520px;
    margin: 1rem 0 1.25rem;
}
.footer-social { display:flex; gap:12px; }
.footer-social .social-icon { width:24px; height:24px; display:inline-block; }

/* right-column buttons */
.site-footer .btn-shop {
    background: var(--pink);
    color:#fff;
    border-color: var(--pink);
    border-radius: 24px;
    height: 48px;
    padding: 0 22px;
    font-weight:700;
}
.site-footer .btn-shop:hover { filter: brightness(1.05); }

.site-footer .btn-sketcher {
    border-color: var(--teal);
    color: var(--teal);
    border-radius:24px;
    height:48px;
    padding:0 22px;
    font-weight:700;
}

/* newsletter */
.footer-subscribe {
    border-top:1px solid #eee;
    padding: 3rem 0 !important;
}
.footer-subscribe.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.footer-subscribe > p {
    margin:0 0 1.25rem;
    font: 800 28px/1.2 "Lexend", sans-serif;
    max-width: 640px;
    color:#222;
}
.footer-subscribe .subscribe-form { display:flex; gap: 1rem; flex-wrap:wrap; }
.footer-subscribe input[type="email"]{
    width: 320px;
    height: 52px;
    border-radius: 16px;
    border:0;
    background:#f3f3f3;
    padding: 0 16px;
    font: 500 16px/1 "Lexend", sans-serif;
}
.footer-subscribe input::placeholder { color:#8f8f8f; }
/* outlined secondary button */
.footer-subscribe button{
    height:52px;
    padding:0 22px;
    border-radius:24px;
    background:#fff;
    border:2px solid var(--pink);
    border-bottom-width:4px;
    color: var(--pink);
    font: 700 15px/1 "Lexend", sans-serif;
    cursor:pointer;
    transition: transform .1s ease, background .15s ease;
}
.footer-subscribe button:hover { background:#fff0f5; transform: translateY(-1px); }

/* bottom legal row */
.footer-bottom{
    display: grid;
    grid-template-columns: minmax(250px, 1fr) 2fr minmax(250px, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0 3rem 0 !important;
    position: relative;
    z-index: 2; /* keep above cat */
}
.footer-bottom.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.footer-legal {
    grid-column: 1 / 3;
}
/* Legal row: keep quiet and tidy */
.footer-legal-menu {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-legal-menu a { text-decoration: none; }

.footer-bottom .copyright {
    grid-column: 2;
    justify-self: start;   /* align to the left side of the middle column (under Sales) */
    margin: 0;
    margin-left: 50%; /* push it to the right half of the middle column (under Sales) */
}

/* focus styles */
.site-footer a:focus-visible,
.footer-subscribe button:focus-visible {
    outline:3px solid var(--teal);
    outline-offset:2px;
    border-radius:4px;
}

/* ========================================================================== */
/* ========================== BRAND & BADGES ============================== */
/* ========================================================================== */
.about .about-brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}
.about .about-brand .chibitronics-logo {
    max-height: 60px;
    width: auto;
    display: block;
}
.about .about-brand .create-badge {
    width: 140px;
    height: auto;
    display: block;
}

/* ========================================================================== */
/* ========================== INLINE SIGNUP =============================== */
/* ========================================================================== */
.footer-signup {
    display: flex;
    gap: 1rem;
    margin: 1.25rem 0 1.75rem;
}
.footer-signup input[type="email"] {
    width: 331px;
    height: 44px;
    padding: 13px 15px;
    background: #f3f3f3;
    border: none;
    border-radius: 10px;
    font-family: "Lexend", sans-serif;
    font-size: 14px;
    color: #333;
}
.footer-signup input[type="email"]::placeholder {
    font-weight: bold;
    color: #333;
}
.footer-signup .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 43px;
    border-radius: 25px;
    background: transparent;
    border: 2px solid var(--pink);       /* secondary outline look */
    border-bottom-width: 4px;
    color: var(--pink);
    font-family: "Lexend", sans-serif;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: transform .1s ease, background .2s ease;
}
.footer-signup .btn-secondary:hover {
    background: rgba(217,22,69,0.06);
    transform: translateY(-1px);
}

/* ========================================================================== */
/* ========================== CONTENT BANDS ============================== */
/* ========================================================================== */
/* Red content band */
.home-band--red { background:var(--pink); color:#fff; }
.home-band--red h2, .home-band--red p, .home-band--red a { color:#fff; }

/* ========================================================================== */
/* ===================== WORDPRESS BLOCK STYLES =========================== */
/* ========================================================================== */
/* Map our old vars to WP presets from theme.json */
:root{
    --pink:    var(--wp--preset--color--custom-pink);
    --teal:    var(--wp--preset--color--custom-teal);
    --nav-bg:  var(--wp--preset--color--custom-nav); 
    /* keep your existing --text-base etc. */
}

/* Button block styles (selectable in editor) */
/* Appearance → Block → Styles: "Chibi Filled / Chibi Outline" */
.is-style-chibi-filled .wp-block-button__link{
    background: var(--wp--preset--color--custom-pink);
    color:#fff;
    border:2px solid var(--wp--preset--color--custom-pink);
    border-bottom-width:4px;
    border-radius:24px;
    padding:10px 18px;
    box-shadow:0 6px 12px rgba(0,0,0,.08);
    text-decoration:none;
}
.is-style-chibi-filled .wp-block-button__link:hover{ filter:brightness(0.96); }

.is-style-chibi-outline .wp-block-button__link{
    background: transparent;
    color: var(--wp--preset--color--custom-pink);
    border:2px solid var(--wp--preset--color--custom-pink);
    border-bottom-width:4px;
    border-radius:24px;
    padding:10px 18px;
    text-decoration:none;
}
.is-style-chibi-outline .wp-block-button__link:hover{ background:rgba(217,22,69,.06); }

/* Section/band block styles (apply to Group blocks) */
.is-style-home-hero{
    background: #ffffff;
    padding:48px 0 60px;
}
.is-style-redband{
    background: var(--wp--preset--color--custom-pink);
    color:#fff;
    padding:70px 0;
}
.is-style-redband h2,
.is-style-redband p,
.is-style-redband a { color:#fff; }

/* ========================================================================== */
/* ========================== HERO SECTION =============================== */
/* ========================================================================== */
/* HERO — force text left, image right (even if WP tries to center) */
.is-style-home-hero .wp-block-columns,
.is-style-home-hero .wp-block-columns.is-layout-flex,
.is-style-home-hero .wp-block-columns.wp-block-columns-is-layout-flex,
.is-style-home-hero [class*="wp-container-core-columns-layout"]{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* stop centering the two columns */
    gap: 40px;
}

/* lock the 55/45 split even if theme applies widths differently */
.is-style-home-hero .wp-block-columns > .wp-block-column:first-child{
    flex: 0 0 55% !important;
    max-width: 55% !important;
    text-align: left !important;
    display: flex; flex-direction: column; align-items: flex-start !important;
}
.is-style-home-hero .wp-block-columns > .wp-block-column:last-child{
    flex: 0 0 45% !important;
    max-width: 45% !important;
    display: flex; justify-content: flex-end !important;
}

/* kill any per-block center text that Gutenberg added */
.is-style-home-hero .wp-block-column:first-child [class*="has-text-align"]{
    text-align: left !important;
}

/* Buttons: WP adds a container class that centers—override it */
.is-style-home-hero .wp-block-buttons,
.is-style-home-hero [class*="wp-container-core-buttons-layout"]{
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* Image hugs the right edge of its column */
.is-style-home-hero figure.hero-art{ margin: 0 0 0 auto !important; width: clamp(300px, 30vw, 520px); }
.is-style-home-hero figure.hero-art img{ display:block; width:100%; height:auto; }

/* Mobile: center the art beneath the text */
@media (max-width: 960px){
    .is-style-home-hero .wp-block-columns{ gap: 28px; }
    .is-style-home-hero .wp-block-columns > .wp-block-column{ max-width: 100% !important; flex-basis: 100% !important; }
    .is-style-home-hero .wp-block-columns > .wp-block-column:last-child{ justify-content: center !important; }
    .is-style-home-hero figure.hero-art{ margin: 12px auto 0 !important; width: min(520px, 85vw); }
}

/* ========================================================================== */
/* ========================== EDUCATORS PAGE BAND ========================== */
/* ========================================================================== */
/* Add breathing room between educators band and zigzag separator */
.centered-header-and-text {
    padding-bottom: 30px !important; /* Add 15px breathing room */
}

/* ========================================================================== */
/* ============================ LEARNING TILT CARDS ======================= */
/* ========================================================================== */
.chibi-learning-band {
    background: #fff;
    padding: 56px 0 72px;
}

.chibi-tilt-cards {
    margin-top: 40px;
    gap: 60px !important;
    justify-content: center;
}

.chibi-tilt-card {
    background: #1871C4; /* Rich royal blue background */
    border-radius: 16px;
    padding: 32px;
    position: relative;
    overflow: visible;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 auto;
    width: 300px;
}

.chibi-tilt-card--left {
    transform: rotate(-3deg);
    margin-right: 40px;
}

.chibi-tilt-card--right {
    transform: rotate(3deg);
    margin-left: 40px;
}

.chibi-tilt-card h3 {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 16px;
}

.chibi-tilt-card p {
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 24px;
}

/* White outline buttons for tilted cards */
.chibi-tilt-card .is-style-chibi-outline .wp-element-button {
    color: #fff !important;
    border-color: #fff !important;
    background: transparent !important;
}

.chibi-tilt-card .is-style-chibi-outline .wp-element-button:hover {
    background: #fff !important;
    color: #1871C4 !important;
}

.chibi-tilt-card__sticker {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 120px;
    height: auto;
    z-index: 2;
}

.chibi-tilt-card__sticker--right {
    right: -20px;
}

/* ===================== CURVE BAND (Image + Text) ===================== */
.chibi-curve-band{
    --band: #FFCD3A;          /* gold background */
    position: relative;
    background: var(--band);
    border-radius: 50% 50% 0 0 / 200px 200px 0 0; /* curves UP at the top */
    margin-top: -40px;        /* pull up to overlap previous section */
    padding-top: 120px !important;        /* increased padding */
    padding-bottom: 120px !important;     /* increased padding */
}

/* Image styling to match mock (rounded, white stroke, no shadow) */
.chibi-curve-media img{
    display:block;
    width:100%;
    height:auto;
    border-radius:20px;
    outline: 6px solid #fff;          /* white frame */
    outline-offset: -6px;
}

/* Button outline style inside yellow band */
.chibi-curve-band .is-style-chibi-outline .wp-element-button{
    color:#1f2a37;
    border-color:#1f2a37;
    background:transparent;
}
.chibi-curve-band .is-style-chibi-outline .wp-element-button:hover{
    background:#1f2a37;
    color:#fff;
}

/* Stack on mobile; arc can be shallower */
@media (max-width: 900px){
    .chibi-curve-band{ padding-top:100px !important; padding-bottom:100px !important; }
    .chibi-curve-band::before{ top:-160px; height:300px; width:160%; }
}


/* ========================================================================== */
/* ============================ SPARKLES ================================== */
/* ========================================================================== */
.hero-wrap {
    position: relative;
}

.sparkles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* don't block clicks */
}

.sparkle {
    position: absolute;
    width: 40px; /* adjust size */
    height: auto;
}

.sparkle--tl { top: 20px; left: 20px; }
.sparkle--tr { top: 20px; right: 20px; }
.sparkle--bl { bottom: 20px; left: 20px; }
.sparkle--br { bottom: 20px; right: 20px; }
.sparkles { z-index: 5; }
.hero-wrap > *:not(.sparkles) { position: relative; z-index: 1; }

/* ===== Full-width overrides ========================================= */
/* Make hero section span full width like header */
.is-style-home-hero {
    max-width: none !important;
    width: 100% !important;
}

.is-style-home-hero .wp-block-group__inner-wrapper {
    max-width: none !important;
    width: 100% !important;
}

/* ===== Inspiring Projects band ========================================= */
/* Inspiring Projects — paper background + built-in top zig-zag */
.chibi-projects-band{
    position: relative;
    background: url('images/paper-blue.png') center/cover repeat;
    padding-top: 72px; /* put the heading below the teeth */
    margin-top: 0;
    overflow: visible;
}

/* Top teeth over the image */
.chibi-projects-band::before{
    --tooth-w:56px;
    --tooth-h:28px;
    content:"";
    position:absolute;
    left:0; right:0;
    top:-1px;                    /* tiny overlap, no big negative */
    height:var(--tooth-h);
    z-index:2;
    pointer-events:none;
    background-repeat:repeat-x;
    background-size:var(--tooth-w) var(--tooth-h);
    /* downward gold triangles; gaps are transparent so the gold band shows through */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpolygon points='0,0 28,28 56,0' fill='%23FFCD3A'/%3E%3C/svg%3E");
}


/* Eat the WP block gap between the yellow curve band and projects band */
.chibi-projects-band{
    /* fall back to 28px if the theme var isn't present */
    margin-top: calc(-1 * var(--wp--style--block-gap, 28px)) !important;
}
.chibi-curve-band{
    margin-bottom: -50px !important; /* make sure the bottom of yellow doesn't add more space */
}


/* Belt-and-suspenders: ensure the preceding band doesn’t add a bottom gap */
.chibi-curve-band{ 
    margin-bottom: 0; 
    padding-bottom: 0;
    padding-top: 0;  /* remove top padding to eliminate gap */
    position: relative;
}

/* Fix text color for the projects band */
.chibi-projects-band h2{
    color:#fff;
    text-align:center;
    font: 800 44px/1.1 "Lexend", sans-serif;
    margin: 0 0 28px;
}

/* horizontally scrolling row (no heavy deps; swipe on touch) */
.chibi-slider{
    position: relative;
    margin-top: 28px;
}

.chibi-slider__track{
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 8px 2rem 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.chibi-slider__track::-webkit-scrollbar{
    display: none; /* Chrome, Safari, Opera */
}
.chibi-slider::-webkit-scrollbar{ height:10px; }
.chibi-slider::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.35);
    border-radius: 6px;
}

.chibi-project-card{
    scroll-snap-align: start;
    flex: 0 0 clamp(260px, 28vw, 340px);       /* width on different screens */
    background: #fff;
    border: none;
    border-radius: 16px;
    padding: 24px;
    color: #222;
    min-width: 260px; /* Ensure minimum width */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chibi-project-card .wp-block-image img{
    display:block; width:100%; height:auto;
    border-radius: 12px;
}

.chibi-project-card h3{
    margin: 12px 0 6px;
    font: 800 24px/1.2 "Lexend", sans-serif;
    color: #222;
}
.chibi-project-card p{ margin:0 0 8px; color: #333; }

/* use the existing "Chibi Outline" button look on this band */
.chibi-projects-band .is-style-chibi-outline .wp-element-button{
    color: var(--pink); border-color: var(--pink); background: transparent;
}
.chibi-projects-band .is-style-chibi-outline .wp-element-button:hover{
    background: var(--pink); color: #fff;
}

/* little spacing tune on small screens */
@media (max-width: 900px){
    .chibi-projects-band{ padding: 56px 0 72px; }
}
/* Band */
.chibi-testimonials-band{
    position: relative;
    background: url('images/paper-blue.png') center/cover repeat;
    padding: 72px 0;
}
.chibi-testimonials-band h2{
    color:#fff; margin:0 0 28px; text-align:left;
}

/* Cards */
.chibi-testimonial-card{
    background:#fff;
    border:4px solid var(--pink);
    border-radius:18px;
    box-shadow:0 22px 44px rgba(0,0,0,.15);
    padding:28px 28px 22px;
    color:#111;

    /* same width behavior as project cards */
    flex: 0 0 clamp(260px, 28vw, 340px);
    min-width:260px;
    transition: transform .15s ease;
    
    /* Make it a flex container so meta can be pushed to bottom */
    display: flex;
    flex-direction: column;
}
.chibi-quote{ margin:0 0 24px; }
.chibi-quote p{ font:600 18px/1.45 "Lexend", system-ui, sans-serif; color:#1f2a37; }

/* Footer: avatar + text */
.chibi-testimonial-meta{
    display:flex; align-items:center; gap:12px; margin-top:auto;
}
.chibi-avatar{
    width:56px; height:56px; border-radius:50%; overflow:hidden;
    background:#FFD050; /* placeholder circle like the mock */
    flex:0 0 56px;
}
.chibi-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.teacher-name{ margin:0; font:800 16px/1.1 "Lexend", sans-serif; color:#2b2b2b; }
.product{ margin:.15rem 0 0; font:500 12px/1.2 "Lexend", sans-serif; color:#666; }

/* “Random” tilts — resets every 6 cards */
.chibi-testimonials .chibi-testimonial-card:nth-child(6n+1){ transform: rotate(-3deg); }
.chibi-testimonials .chibi-testimonial-card:nth-child(6n+2){ transform: rotate(.8deg); }
.chibi-testimonials .chibi-testimonial-card:nth-child(6n+3){ transform: rotate(2.6deg); }
.chibi-testimonials .chibi-testimonial-card:nth-child(6n+4){ transform: rotate(-1.7deg); }
.chibi-testimonials .chibi-testimonial-card:nth-child(6n+5){ transform: rotate(3.2deg); }
.chibi-testimonials .chibi-testimonial-card:nth-child(6n+6){ transform: rotate(-2.1deg); }

/* Subtle straighten/hover pop */
.chibi-testimonial-card:hover{ transform: rotate(0) translateY(-2px); }

/* Reuse your slider styles; optional tighter gutters here */
.chibi-testimonials .chibi-slider__track{ padding: 8px 1.5rem 4px; gap: 28px; }
/* ensure row layout & no wrapping */
.chibi-testimonials .chibi-slider__track{
    display:flex;
    flex-wrap:nowrap;
}

/* ====================== DEMO REQUEST BAND ====================== */
.chibi-demo-band{
    position: relative;
    background:#fff;
    padding: 72px 0 88px;
}
.chibi-demo-band .wp-block-columns{ align-items:flex-start; }

/* Left: big title + tidy blurb */
.demo-title{
    margin:0 0 14px;
    color:#222;
    font: 800 clamp(40px, 5.2vw, 72px)/1.08 "Lexend", system-ui, sans-serif;
    letter-spacing:.2px;
}
.demo-blurb{
    max-width: 620px;
    font: 500 18px/1.55 "Lexend", system-ui, sans-serif;
    color:#3a3a3a;
}

/* Right: section title */
.demo-form-title{
    margin:0 0 14px;
    color: var(--teal);
    font: 800 28px/1.2 "Lexend", system-ui, sans-serif;
}

/* Form grid */
.chibi-demo-form{ display:block; }
.chibi-demo-form .row{ display:grid; gap:16px; margin:12px 0; }
.chibi-demo-form .row.two{ grid-template-columns: 1fr 1fr; gap:16px 20px; }
@media (max-width: 800px){ .chibi-demo-form .row.two{ grid-template-columns: 1fr; } }

/* Labels */
.chibi-demo-form .label{
    display:block;
    font: 700 12px/1 "Lexend", system-ui, sans-serif;
    color:#4b5563;      /* slate-ish */
    margin:0 0 6px;
}

/* Fields */
.chibi-demo-form input[type="text"],
.chibi-demo-form input[type="email"],
.chibi-demo-form textarea{
    width:100%;
    border:3px solid var(--pink);
    border-radius:12px;
    padding:14px 16px;
    background:#fff;
    color:#111;
    font: 600 16px/1 "Lexend", system-ui, sans-serif;
    outline: none;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.chibi-demo-form input::placeholder,
.chibi-demo-form textarea::placeholder{ color:#8c8c8c; font-weight:500; }
.chibi-demo-form textarea{ min-height:190px; resize:vertical; }
.chibi-demo-form input:focus,
.chibi-demo-form textarea:focus{
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(217,22,69,.15);
}

/* Qualifier header + checklist */
.chibi-demo-form .qualifier-head{
    margin:16px 0 8px;
    color: var(--teal);
    font: 800 18px/1.2 "Lexend", system-ui, sans-serif;
}
.chibi-demo-form .row.checklist{
    grid-template-columns: 1fr 1fr;
    gap:14px 56px;
}
.chibi-demo-form .check{
    display:flex; align-items:center; gap:10px;
    user-select:none; cursor:pointer;
    font: 600 15px/1.2 "Lexend", system-ui, sans-serif;
    color:#222;
}
.chibi-demo-form .check input[type="checkbox"]{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    width:22px; height:22px; border-radius:50%;
    border:3px solid var(--pink);
    display:inline-flex; align-items:center; justify-content:center;
    position:relative;
    box-sizing: border-box;
    margin:0;
    padding:0;
    flex-shrink:0;
}
.chibi-demo-form .check input[type="checkbox"]::after{
    content:""; width:10px; height:10px; border-radius:50%; background:var(--pink);
    transform: scale(0); transition: transform .12s ease;
}
.chibi-demo-form .check input[type="checkbox"]:checked::after{ transform: scale(1); }

/* Buttons */
.btn-dark{
    display:inline-flex; align-items:center; justify-content:center;
    height:48px; padding:0 22px;
    border-radius:10px;
    background:#2b2b2b; color:#fff; border:0;
    font: 700 15px/1 "Lexend", system-ui, sans-serif;
    box-shadow: 0 6px 12px rgba(0,0,0,.08);
    cursor:pointer;
    transition: transform .1s ease, filter .15s ease;
    margin-top:12px;
}
.btn-dark:hover{ transform: translateY(-1px); filter: brightness(1.05); }

/* Reuse existing sparkle system; just nudge positions for this band */
.sparkles--demo .sparkle--tl{ top:-8px; left:20px; }
.sparkles--demo .sparkle--tr{ top:24px; right:14%; }
.sparkles--demo .sparkle--bl{ bottom:22px; left:18px; }
.sparkles--demo .sparkle--br{ bottom:-6px; right:15%; }

/* Only apply to your band sections (no global stretching) */
:is(.is-style-home-hero,
    .home-band,
    .chibi-projects-band,
    .chibi-curve-band,
    .chibi-testimonials-band).alignfull {
    max-width: 100%;
}

/* Keep inner content constrained while the band background is full-bleed */
:is(.is-style-home-hero,
    .home-band,
    .chibi-projects-band,
    .chibi-curve-band,
    .chibi-testimonials-band).alignfull
> :where(.wp-block-group__inner-container, .wp-block-group__inner-wrapper) {
    max-width: var(--wp--style--global--content-size, 1200px);
    width: 100%;
    margin-inline: auto;
}

/* ========================================================================== */
/* ========================== THREE CARDS PATTERN ========================== */
/* ========================================================================== */
.chibi-get-started-band {
    background: #fff;
    padding: 72px 0 88px;
}

.chibi-feature-card { 
    display: flex; 
    flex-direction: column; 
    overflow: hidden;
    background: #FFCD3A !important; /* Match the mockup yellow */
    border-radius: 18px;
    border: 6px solid #E7B629;
    box-shadow: 0 16px 34px rgba(0,0,0,.12);
    padding: 0 22px 22px 22px;
    height: 100%;
}

.chibi-feature-card .wp-block-image { 
    margin: 0; 
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}

.chibi-feature-card .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
}

.chibi-feature-card h3 {
    color: #222;
    font: 800 24px/1.2 "Lexend", sans-serif;
    margin: 18px 0 8px;
    text-align: center;
}

.chibi-feature-card p {
    color: #222;
    font: 500 16px/1.5 "Lexend", sans-serif;
    margin: 0 0 18px;
    text-align: center;
}

.chibi-feature-card .wp-block-buttons { 
    margin-top: auto; 
    justify-content: center; 
}

/* Override button styling to match mockup */
.chibi-feature-card .is-style-chibi-outline .wp-element-button {
    background: transparent !important;
    color: #222 !important;
    border: 2px solid #222 !important;
    border-radius: 25px;
    font-weight: 700;
    padding: 12px 24px;
    transition: all 0.2s ease;
}

.chibi-feature-card .is-style-chibi-outline .wp-element-button:hover {
    background: #222 !important;
    color: #FFCD3A !important;
}

/* Keep zigzag from becoming a rounded pill if WP adds color/alpha classes */
.wp-block-separator.is-style-chibi-zigzag {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.wp-block-separator.is-style-chibi-zigzag.has-alpha-channel-opacity {
    background: transparent !important; /* kill the filled mound */
}

.chibi-feature-card { box-shadow: 0 16px 34px rgba(0,0,0,.12); }
.chibi-feature-card .wp-block-image { margin:0; }



/* Base curve band uses a CSS variable for its background */
/* Shop with Chibitronics (teal) — self-contained */
.shop-with-chibi{
    position: relative;
    background: #2A8F99 !important; /* Force teal color */
    color: #fff;
    overflow: visible;
}

/* Override any chibi-curve-band styling that might be applied */
.shop-with-chibi.chibi-curve-band {
    background: #2A8F99 !important;
    --band: #2A8F99 !important;
}

/* Force teal color for the chibi-curve-band--teal modifier */
.chibi-curve-band--teal {
    background: #2A8F99 !important;
    --band: #2A8F99 !important;
    margin-top: 40px !important; /* Add breathing room at the top */
}

/* Also target the chibi-shop-band class that's being added */
.chibi-shop-band {
    background: #2A8F99 !important;
    --band: #2A8F99 !important;
    margin-top: 40px !important; /* Add breathing room at the top */
}

/* Remove any zigzag at the bottom of these bands */
.chibi-curve-band--teal::after,
.chibi-shop-band::after {
    display: none !important;
}

/* Remove zigzag separators that appear after the teal band */
.chibi-curve-band--teal + .wp-block-separator.is-style-chibi-zigzag,
.chibi-shop-band + .wp-block-separator.is-style-chibi-zigzag {
    display: none !important;
}

/* Also hide any zigzag that might be added by the next pattern */
.chibi-curve-band--teal + * .wp-block-separator.is-style-chibi-zigzag,
.chibi-shop-band + * .wp-block-separator.is-style-chibi-zigzag {
    display: none !important;
}
.shop-with-chibi h1,
.shop-with-chibi h2,
.shop-with-chibi h3,
.shop-with-chibi p,
.shop-with-chibi a{ color:#fff; }

/* Outline buttons read correctly on teal */
.shop-with-chibi .is-style-chibi-outline .wp-block-button__link{
    color:#fff;
    border-color:#fff;
    background:transparent;
}
.shop-with-chibi .is-style-chibi-outline .wp-block-button__link:hover{
    background:#fff;
    color:#2A8F99;
}

/* Teal zig-zag on the TOP of this band only */
.shop-with-chibi::before{
    --tooth-w:56px;
    --tooth-h:28px;
    content:"";
    position:absolute;
    left:0; right:0;
    top:-1px;                               /* sits just above the band */
    height:var(--tooth-h);
    z-index:2;
    pointer-events:none;
    background-repeat:repeat-x;
    background-size:var(--tooth-w) var(--tooth-h);
    /* downward teal triangles; gaps are transparent */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpolygon points='0,0 28,28 56,0' fill='%232A8F99'/%3E%3C/svg%3E");
}

/* Prevent accidental decorations from old helpers */
.shop-with-chibi::after{ content:none !important; }

/* ===== Inspiring Projects — GOLD version ================================= */
.chibi-projects-gold{
    position: relative;
    background: #FFCD3A; /* gold */
    padding: 72px 0;
    margin-top: -40px; /* push up to meld with pattern above */
    overflow: visible;
}

/* Top zig-zag drawn by this band (teal teeth on gold) */
.chibi-projects-gold::before{
    --tooth-w:56px;
    --tooth-h:28px;
    content:"";
    position:absolute;
    left:0; right:0;
    top:-1px;
    margin-top: -9px;
    height:var(--tooth-h);
    z-index:2;
    pointer-events:none;
    background-repeat:repeat-x;
    background-size:var(--tooth-w) var(--tooth-h);
    /* Use teal color directly instead of currentColor */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpolygon points='0,0 28,28 56,0' fill='%232A8F99'/%3E%3C/svg%3E");
}

/* Headline & text colors on gold */
.chibi-projects-gold h2{
    color:#2b2b2b;
    text-align:center;
    font: 800 44px/1.1 "Lexend", sans-serif;
    margin:0 0 28px;
}

.chibi-projects-gold .chibi-project-card{
    scroll-snap-align: start;
    flex: 0 0 clamp(260px, 28vw, 340px);
    background: #fff;
    border: 4px solid var(--pink);
    border-radius: 16px;
    padding: 20px;
    color:#222;
    min-width:260px;
    box-shadow: 0 16px 34px rgba(0,0,0,.12);
}
.chibi-projects-gold .chibi-project-card .wp-block-image img{
    display:block; width:100%; height:auto; border-radius:12px;
}
.chibi-projects-gold .chibi-project-card h3{
    margin:12px 0 6px; font:800 24px/1.2 "Lexend", sans-serif; color:#222;
}
.chibi-projects-gold .chibi-project-card p{ margin:0 0 8px; color:#333; }

/* Outline button reads well on gold */
.chibi-projects-gold .is-style-chibi-outline .wp-element-button{
    color:#222; border-color:#222; background:transparent;
}
.chibi-projects-gold .is-style-chibi-outline .wp-element-button:hover{
    background:#222; color:#FFCD3A;
}

/* Reuse your slider chrome */
.chibi-projects-gold .chibi-slider{ position:relative; margin-top:28px; }
.chibi-projects-gold .chibi-slider__track{
    display:flex; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding: 8px 2rem 4px; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.chibi-projects-gold .chibi-slider__track::-webkit-scrollbar{ display:none; }

@media (max-width:900px){
    .chibi-projects-gold{ padding:56px 0 72px; }
}

/* Base already exists: .chibi-testimonials-band {...} uses blue paper */

/* Gold paper variant + proper heading color */
.chibi-testimonials--gold{
    background: url('images/paper-gold.png') center/cover repeat, #FFCD3A;
}
.chibi-testimonials--gold h2{ color:#2b2b2b; }

/* On gold we want dark quote text; reuse your card styles but ensure color */
.chibi-testimonials--gold .chibi-quote p{ color:#1f2a37; }

/* Download band */
.chibi-download-band{
    background:#0f8c8a url('/wp-content/themes/sketchamajig/images/teal-texture.jpg') center/cover no-repeat;
}

/* Left mockup image frame */
.download-asset img{
    display:block;
    width:100%;
    height:auto;
    border:5px solid #ff2a59;       /* brand pink */
    border-radius:18px;
    box-shadow:0 16px 40px rgba(0,0,0,.15);
}

/* Form card + fields (reuses demo form styles if present) */
.download-form-card{ box-shadow:0 10px 30px rgba(0,0,0,.18); }
.chibi-demo-form .field{ display:block; margin-bottom:14px; }
.chibi-demo-form .row.two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.chibi-demo-form .label{ display:block; font-weight:600; margin:0 0 6px; }
.chibi-demo-form input, .chibi-demo-form select, .chibi-demo-form textarea{
    width:100%; padding:12px 14px; border:3px solid #ff2a59; border-radius:12px; outline:0;
}
.chibi-demo-form .check{ display:flex; gap:10px; align-items:flex-start; margin:12px 0; }
.chibi-demo-form .privacy{ margin:10px 0 18px; }

.btn-download{
    display:inline-block; padding:12px 20px; border-radius:999px; background:#cf2e4a; color:#fff; font-weight:700;
}
@media (max-width: 781px){
    .chibi-demo-form .row.two{ grid-template-columns:1fr; }
}

.chibi-mirror-band{position:relative;overflow:hidden;}
.chibi-mirror-band .sparkles img{position:absolute;width:26px;height:auto;opacity:.9}
.chibi-mirror-band .sparkle--1{left:10px;top:6%}
.chibi-mirror-band .sparkle--2{right:12px;top:4%}
.chibi-mirror-band .sparkle--3{right:14%;top:48%}
.chibi-mirror-band .sparkle--4{left:3%;bottom:18%;width:18px}
.chibi-mirror-band .sparkle--5{right:3%;bottom:8%;width:22px}

/* Learning Benefits — nine dots */
.chibi-benefits-band {
    background: #fff;
    padding: 64px 0 72px;
}

/* Grid layout for the 3x3 structure */
.chibi-benefits-band .wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin: 0;
    justify-content: center;
}

.chibi-benefits-band .wp-block-columns .wp-block-column {
    flex: 0 0 calc(33.333% - 19px);
    min-width: 200px;
}

.chibi-benefits-band .wp-block-column {
    margin: 0;
    padding: 0;
}

.chibi-benefits-band .benefit-item { 
    text-align: center; 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.chibi-benefits-band .benefit-dot {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0;
}

.chibi-benefits-band .benefit-dot img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

.chibi-benefits-band h3 {
    margin: 12px 0 0;
    font-size: clamp(18px, 2.2vw, 22px);
    line-height: 1.15;
    min-height: 2.6em;
}

/* Mobile responsive */
@media (max-width: 782px) {
    .chibi-benefits-band .wp-block-columns .wp-block-column {
        flex: 0 0 calc(50% - 14px);
        min-width: 160px;
    }
    
    .chibi-benefits-band .benefit-dot {
        width: 140px;
        height: 140px;
    }
    
    .chibi-benefits-band h3 {
        min-height: unset;
    }
}

@media (max-width: 480px) {
    .chibi-benefits-band .wp-block-columns .wp-block-column {
        flex: 0 0 100%;
        min-width: 200px;
    }
}

.parents-two-cards .parents-card { color:#fff; }
.parents-two-cards .parents-card .wp-block-button.is-style-chibi-outline .wp-element-button{
    border-radius:999px;
    font-weight:600;
}
.parents-two-cards .card-media img{
    display:block;width:100%;height:auto;border-radius:16px;
}

/* Keep the zigzag visible and above later bands */
.wp-block-separator.chibi-zigzag,
.wp-block-separator.is-style-chibi-zigzag {
    display: block;
    height: var(--zig-h, 28px);   /* functions.php sets --zig-h */
    line-height: 0;
    border: 0;
    padding: 0;
    background: transparent;
    position: relative;
    z-index: 3;                   /* sit above following sections */
}

/* The next band should slide up under the jaggies */
.has-zigzag-top {
    margin-top: calc(-1 * var(--zig-h, 28px));
    overflow: visible;            /* if the editor adds wrappers, don’t clip */
    isolation: isolate;           /* stable stacking when wrappers appear */
}

/* Only these page bands need to allow overlap */
.centered-header-and-text,
.parents-hero-blue,
.chibi-learning-band,
.chibi-benefits-band,
.parents-two-cards {
    overflow: visible;
}

/* Make the band after any zig-zag always slide up under it */
.wp-block-separator.is-style-chibi-zigzag + .wp-block-group.alignfull {
    margin-top: calc(-1 * var(--zig-h, 28px));
    overflow: visible;
}

/* Keep the zig-zag above white bands even if wrappers are added */
.wp-block-separator.is-style-chibi-zigzag {
    position: relative;
    z-index: 3;
}
/* Base (shared) */
.chibi-products-band {
    background:#fff;
    padding: 80px 0 72px;
}
.chibi-products-band h2{ text-align:center; font:800 clamp(32px,6vw,56px)/1.1 "Lexend",sans-serif; margin:0 0 8px; }
.chibi-products-band p{ text-align:center; margin:8px 0 28px; }

/* Slider chrome (you already use .chibi-slider) */
.chibi-slider{ position:relative; margin-top: 12px; }
.chibi-slider__track{
    display:flex; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding: 8px 2rem 4px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    justify-content: center;
}
.chibi-slider__track::-webkit-scrollbar{ display:none; }

/* Card (shared) */
.chibi-card{
    scroll-snap-align:start;
    flex:0 0 clamp(240px, 26vw, 320px);
    background:#fff;
    border:4px solid #e5e5e5;
    border-radius:18px;
    padding:18px;
    min-width:240px;
    box-shadow:0 12px 24px rgba(0,0,0,.08);
    color:#222;
}
.chibi-card__image img{ display:block; width:100%; height:auto; border-radius:14px; }
.chibi-card__title{ margin:12px 0 6px; font:800 22px/1.2 "Lexend",sans-serif; }

/* “Shop Now” — works for BOTH button-block and plain anchor variants */
.chibi-card__link .wp-element-button,
.chibi-card__link a{
    display:inline-flex; align-items:center; gap:6px;
    font-weight:700; text-decoration:none; border-radius:999px;
    padding:10px 16px; border:2px solid currentColor; background:transparent;
}

/* ===== Gold variant (Parents) — just add .chibi-products--gold on the band ===== */
.chibi-products--gold{ background:#FFCD3A; }
.chibi-products--gold h2{ color:#2b2b2b; }
.chibi-products--gold p{ color:#2b2b2b; }

/* Cards on gold: pink outline, white fill */
.chibi-products--gold .chibi-card{ border-color: var(--pink); }

/* “Shop Now” uses pink outline & hover fill */
.chibi-products--gold .chibi-card__link .wp-element-button,
.chibi-products--gold .chibi-card__link a{
    color: var(--pink);
    border-color: var(--pink);
}
.chibi-products--gold .chibi-card__link .wp-element-button:hover,
.chibi-products--gold .chibi-card__link a:hover{
    background: var(--pink); color:#fff;
}
/* Single-row sparkle feature band */
.chibi-feature-band{ position:relative; overflow:visible; }

/* Sparkle positions unique to this band */
.sparkles--feature .sparkle--tl{ top:-6px; left:7%; }
.sparkles--feature .sparkle--tr{ top:0; right:11%; }
.sparkles--feature .sparkle--bl{ bottom:12%; left:1%; width:18px; }
.sparkles--feature .sparkle--br{ bottom:10%; right:14%; width:26px; }

/* Optional: flip columns by adding class 'chibi-feature--reverse' on the wrapper */
.chibi-feature--reverse .wp-block-columns{ flex-direction: row-reverse; }

/* Parents testimonials (white band) */
.chibi-testimonials--white{
    background:#fff !important;
    padding:72px 0;            /* matches others */
}
.chibi-testimonials--white h2{
    color:#2b2b2b;             /* dark heading on white */
}
.chibi-testimonials--white .chibi-quote p{
    color:#1f2a37;             /* dark quote text */
}
/* optional: keep sparkles visible on white */
.chibi-testimonials--white .sparkles { z-index: 1; }

/* Parents: Inspiring Projects — red paper */
.chibi-projects-red{
    position: relative;
    background: url('images/paper-red.png') center/cover repeat, #c83a4f;
    padding: 72px 0;
    margin-top: -40px;   /* optional: meld with band above, like others */
    overflow: visible;
}

.chibi-projects-red h2{
    color:#fff;
    text-align:center;
    font: 800 44px/1.1 "Lexend", system-ui, sans-serif;
    margin: 0 0 28px;
}

.chibi-projects-red .chibi-project-card{
    scroll-snap-align: start;
    flex: 0 0 clamp(260px, 28vw, 340px);
    background:#fff;
    border:4px solid var(--pink);
    border-radius:16px;
    padding:20px;
    color:#222;
    min-width:260px;
    box-shadow:0 16px 34px rgba(0,0,0,.12);
}
.chibi-projects-red .chibi-project-card .wp-block-image img{
    display:block; width:100%; height:auto; border-radius:12px;
}
.chibi-projects-red .chibi-project-card h3{
    margin:12px 0 6px;
    font:800 24px/1.2 "Lexend", system-ui, sans-serif;
    color:#222;
}
.chibi-projects-red .chibi-project-card p{ margin:0 0 8px; color:#333; }
.chibi-projects-red .is-style-chibi-outline .wp-element-button{
    color:#222; border-color:#222; background:transparent;
}
.chibi-projects-red .is-style-chibi-outline .wp-element-button:hover{
    background:#222; color:#fff;
}

/* --- Get started — RED variant (parents/admin) --- */
.chibi-get-started--red .chibi-feature-card{
    background:#D61F4E !important;            /* red card */
    border-color:#E71E52 !important;           /* pink border */
    color:#fff;
}
.chibi-get-started--red .chibi-feature-card h3,
.chibi-get-started--red .chibi-feature-card p{
    color:#fff;
}

/* White “see-through” outline button on red */
.chibi-get-started--red .is-style-chibi-outline .wp-element-button{
    background:transparent !important;
    color:#fff !important;
    border:2px solid #fff !important;
    border-radius:25px;
    font-weight:700;
    padding:12px 24px;
}
.chibi-get-started--red .is-style-chibi-outline .wp-element-button:hover{
    background:#fff !important;
    color:#D61F4E !important;
}

.is-style-chibi-link .wp-element-button{
    background:transparent;border:none;color:#D61F4E;font-weight:700;padding:0
}
.is-style-chibi-link .wp-element-button::after{content:" \\203A";} /* › */
/* Shop with Chibitronics — 4 links */
.chibi-shop-four h2.wp-block-heading{
    color:#D61F4E; /* title */
}
.chibi-shop-four h3.wp-block-heading{
    color:#D61F4E;           /* card headings */
    font-size:36px;
    line-height:1.05;
    margin:0 0 8px;
}
.chibi-shop-four p{ margin:0 0 16px; font-size:18px; }

/* Link-style CTA with arrow */
.is-style-chibi-link .wp-element-button{
    background:transparent; border:0; color:#D61F4E; font-weight:700; padding:0;
}
.is-style-chibi-link .wp-element-button::after{
    content:"\00A0›"; /* NBSP + arrow glyph — no escaping issues */
}

/* White zig-zag used above the teal testimonials band */
.wp-block-separator.is-style-chibi-zigzag.zigzag--white{
    --zig-h:28px;
    margin:0;
    height:var(--zig-h);
    border:0;border-radius:0;background:transparent;
    background-repeat:repeat-x;
    background-size:56px var(--zig-h);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpolygon points='0,0 28,28 56,0' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* (Optional) if you want to guarantee the red card frame & tilt */
.chibi-testimonials .chibi-testimonial-card{
    background:#fff;border:6px solid #E71E52;border-radius:18px;
    box-shadow:0 16px 34px rgba(0,0,0,.12);
    padding:22px; width:360px; min-height:420px;
    display: flex;
    flex-direction: column;
}
.chibi-testimonials .chibi-quote p{color:#222;font-weight:700;}
.chibi-testimonials .chibi-testimonial-meta{display:flex;gap:12px;align-items:center;margin-top:auto}
.chibi-testimonials .chibi-avatar img{width:56px;height:56px;border-radius:50%;display:block}

/* playful tilt like the comp */
.chibi-testimonials .chibi-testimonial-card:nth-child(3n+1){transform:rotate(-3deg)}
.chibi-testimonials .chibi-testimonial-card:nth-child(3n+2){transform:rotate(2deg)}
.chibi-testimonials .chibi-testimonial-card:nth-child(3n+3){transform:rotate(-2deg)}