/* ================================================================
   Superfood Garden Summit 2026 — additional styles
   Loads after styles.min.css and only adds rules for the new sections.
   Version: 2026-04-28-v5 (subtle 20px center-peak dividers)
   ================================================================ */

/* Custom styles */

.medium-txt {
    /* clamp(min, preferred, max) */
    font-size: clamp(18px, 4vw, 28px);
    line-height: 1.3;
}

.py-20 { padding-top: 20px !important; padding-bottom: 20px !important; }

.lato-para {
    font-size: 26px;
}

.largest-txt {
    font-size: 55px;
}

.largest-txt {
    font-size: clamp(32px, 5vw, 55px);
}

.medium-txt {
    font-size: 32px;
}

.medium-txt {
    font-size: clamp(20px, 2.8vw, 32px);
}

.weight-700 {
    font-weight: 700!important;
}



.white-txt {
    color: #fff;
}

.green-txt {
    color: #008000;

}
.hero-subheader {
    font-family: Lato, Arial, Helvetica, sans-serif;
    text-align: center;
    margin-top: 20px;
}

.summit-host-para {
    font-family: Lato, sans-serif;
    line-height: 28px;
    
}

.footer-bg {
    background: #3D3838!important;
}


/* ----- Hero / registration card additions ----- */
.sgs-logo-header {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 15px;
}
.sgs-logo-header img {
    max-width: 480px;
    width: 100%;
}
.sgs-h1-reserve {
    margin-top: 10px;
}
.sgs-airing-date {
    font-family: Lato, sans-serif;
    text-align: center;
    font-style: italic;
    color: #672392 !important;
    font-size: 1.8rem;
}
.sgs-tagline {
    font-family: Actor, serif;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 10px;
    font-size: 22px;
    color: rgb(62, 47, 111);
}

/* ----- "4 Transformative Days" green band + slanted dividers ----- */
/* SGS-GREEN: #388e3c is the canonical forest green used on the band AND sticky bar */
.green-band {
    background: #388e3c !important;
    padding-top: 40px;     /* room for top divider + breathing space */
    padding-bottom: 40px;  /* room for bottom divider + breathing space */
    position: relative;
    overflow: hidden;
}
.green-band-inner {
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto;
}
.green-band-title {
    font-family: Lato, sans-serif;
    color: #ffffff;
    text-align: center;
    margin-bottom: 18px;
    font-size: 38px;
    line-height: 1.2;
}
.green-band-text {
    color: #ffffff;
    text-align: center;
    font-size: 19px;
    line-height: 1.6;
    margin-bottom: 12px;
    font-family: Lato, sans-serif;
}

/* Top divider: two-tone layered transition from white above into green band.
   Front (solid white) sits high; back (50% white) extends slightly further
   down into the green, producing a soft translucent stripe between the hard
   white edge and the solid green. Same effect as Divi's two-tone divider. */
.green-band-top-divider {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1280 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'><path d='M0,0 L1280,0 L1280,50 L0,30 Z' fill='%23ffffff' fill-opacity='0.5'/><path d='M0,0 L1280,0 L1280,25 L0,10 Z' fill='%23ffffff'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 60px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    pointer-events: none;
}

/* Bottom divider: mirror of the top — two-tone transition from green into
   white below. Back layer extends further up into the green (translucent
   stripe above the solid white edge). */
.green-band-bottom-divider {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1280 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'><path d='M0,50 L1280,70 L1280,100 L0,100 Z' fill='%23ffffff' fill-opacity='0.5'/><path d='M0,75 L1280,90 L1280,100 L0,100 Z' fill='%23ffffff'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 60px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    pointer-events: none;
}

/* ----- Day 1-4 cards ----- */
.days-cards-section {
    max-width: 1200px;
    padding-top: 50px;
    padding-bottom: 50px;
}
.day-card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;            /* clips image to card's rounded corners */
    background: #f8f5ee;         /* cream body to match the screenshots */
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.day-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}
.day-card .card-img-top {
    width: 100%;
    height: 280px;
    object-fit: cover;            /* crop instead of distort, normalizes mixed aspect ratios */
    display: block;
    border-radius: 0;             /* override Bootstrap's rounded top — we control corners on the card */
}
.day-card .card-body {
    padding: 28px 30px 32px;
}
.day-card-title {
    font-family: Lato, sans-serif;
    font-weight: 700;
    color: #2c2c2c;
    text-align: center;
    margin: 0 0 18px;
    font-size: 38px;
    line-height: 1.2;
}
.day-card .font-safe {
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 14px;
    font-family: Lato, sans-serif;
    color: #2c2c2c;
}
.day-card .font-safe.day-card-emphasis {
    color: #3e2f6f;
    margin-top: 18px !important;
}

/* ----- Summit Host section ----- */
.summit-host-section {
    background: #ffffff;
    box-shadow: none;
    background-image: none !important;
}
.summit-host-image-col {
    text-align: center;
}
.summit-host-image {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    margin: 0 auto;
}
.supercharge-tagline {
    color: #3e2f6f !important;
    font-family: Lora, serif;
    font-style: italic;
    font-size: 32px;
    line-height: 1.25;
    text-align: center;
    margin-top: 22px;
    margin-bottom: 0;
    max-width: 480px;
}

@media (max-width: 991.98px) {
    .summit-host-image {
        max-width: 360px;
    }
    .supercharge-tagline {
        font-size: 26px;
    }
}

/* ----- Supercharge section ----- */
.supercharge-section {
    padding-top: 30px;
    padding-bottom: 25px;
}
.supercharge-section-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.supercharge-section h1 {
    font-family: Lato, sans-serif;
    text-align: center;
    color: #3e2f6f;
    font-size: 36px;
    line-height: 1.25;
}
.supercharge-section p {
    text-align: left;
    font-size: 22px;
    line-height: 1.6;
    margin-top: 25px;
    font-family: Lato, sans-serif;
}
.supercharge-cta-wrap {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 10px;
}
.supercharge-cta {
    display: inline-block;
    background: #f4832c;
    color: #ffffff;
    text-decoration: none;
    font-family: Lato, sans-serif;
    font-size: 22px;
    font-weight: 700;
    padding: 14px 42px;
    border: none;
    border-radius: 999px;     /* pill shape, matches the Divi button */
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: background-color 0.2s ease, transform 0.15s ease;
}
.supercharge-cta:hover,
.supercharge-cta:focus {
    background: #e3771f;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Two-column "Inside the 4-day..." block */
.supercharge-discover-row {
    max-width: 1100px;
    margin: 30px auto 10px;
}
.supercharge-discover-text {
    padding: 10px 20px;
}
.supercharge-discover-heading {
    font-family: Lato, sans-serif;
    color: #6a9a3b;          /* green to match the Divi template */
    font-size: 39px;
    text-align: left;
    margin-bottom: 18px;
}
.supercharge-discover-list {
    font-family: Lato, sans-serif;
    font-size: 20px;
    line-height: 1.8;
    list-style: disc;
    padding-left: 50px;
    text-align: left;
    color: #2c2c2c;
    margin-bottom: 0;
}
.supercharge-discover-img-col {
    text-align: center;
    padding: 10px 20px;
}
.supercharge-discover-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (max-width: 991.98px) {
    .supercharge-discover-row {
        text-align: center;
    }
    .supercharge-discover-heading {
        text-align: center;
    }
    .supercharge-discover-list {
        display: inline-block;
        text-align: left;
    }
    .supercharge-discover-img {
        max-width: 360px;
        margin-top: 20px;
    }
}

/* ----- FAQ section ----- */
.faq-section {
    padding-top: 40px;
    padding-bottom: 100px; /* extra space so the sticky bar doesn't overlap */
    max-width: 950px;
}
.faq-section h1 {
    font-family: Lato, sans-serif;
    text-align: center;
    margin-bottom: 30px;
    color: #4e9223 !important;
    font-size: 44px;
}
.faq-section .accordion-item {
    margin-bottom: 8px;
    border-radius: 4px;
}
.faq-section .accordion-button {
    font-family: Lato, sans-serif;
    font-weight: 600;
    color: #3e2f6f;
    color: black;
    background-color: #f8f5eeb8;
}
.faq-section .accordion-button:not(.collapsed) {
    background-color: #f8f5eeb8;
    color: #3e2f6f;
}
.faq-section .accordion-body {
    font-family: Lato, sans-serif;
    line-height: 1.6;
}

/* ----- Sticky bottom CTA bar ----- */
.sticky-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #4e9223 !important;
    color: white;
    padding: 22px 60px;        /* was 14px 28px — taller bar, more side breathing room */
    display: flex;
    justify-content: center;
    gap: 24px;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
    font-family: Lato, sans-serif;
}
.sticky-cta-text {
    font-weight: 700;
    font-size: 20px;           /* was 18px */
    margin: 0;
    color: #ffffff;
}
.sticky-cta-btn {
    background: #ef6c00;
    color: #ffffff !important;
    padding: 16px 44px;        /* was 12px 32px — bigger button */
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    font-size: 20px;           /* was 17px */
    line-height: 1;
    transition: background 0.15s ease;
    white-space: nowrap;
    border: none;
}

/* Push body content up so the sticky bar doesn't cover it
   AND leave a visible gap between the footer and the bar */


/* Mobile adjustments */
@media (max-width: 640px) {
    .sticky-cta-bar {
        padding: 10px 14px;
    }
    .sticky-cta-text {
        font-size: 14px;
    }
    .sticky-cta-btn {
        padding: 10px 18px;
        font-size: 14px;
    }
    .green-band-title {
        font-size: 28px;
    }
    .green-band-text {
        font-size: 16px;
    }
    .day-card-title {
        font-size: 30px;
    }
    .day-card .card-body {
        padding: 22px 22px 26px;
    }
    .day-card .card-img-top {
        height: 220px;
    }
    .supercharge-section h1 {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .sticky-cta-bar {
        padding: 8px 10px;
    }
    .sticky-cta-text {
        font-size: 12px;
        max-width: 55%;
    }
}

/* ================================================================
   OTO / Thank-You Page additions (2026)
   Small set of additions for the upsell-page-specific bits.
   Day cards, green band, sticky bar etc. above are reused as-is.
   ================================================================ */

/* 4 Collection cards in a 2x2 grid (static heading, button at bottom toggles trainings) */
.collections-grid { margin-top: 10px; }
.collection-cell {
    padding: 8px 18px 14px;
}
.collection-heading {
    font-family: Lato, sans-serif;
    font-weight: 700;
    color: #2c2c2c;
    font-size: 26px;
    line-height: 1.25;
    margin: 0 0 18px;
    text-align: center;
}

/* Toggle button — CLOSED state: black bar with white text and green + circle.
   OPEN state: transparent bg, dark text, navy-blue circle with minus icon. */
.collection-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #111111;
    color: #ffffff !important;
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 17px;
    padding: 14px 18px;
    border: none;
    border-radius: 4px;
    text-align: left;
    box-shadow: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.collection-toggle-btn:hover,
.collection-toggle-btn:focus,
.collection-toggle-btn:focus-visible,
.collection-toggle-btn:active {
    box-shadow: none !important;
    outline: none !important;
}
.collection-toggle-btn:hover { background: #1d1d1d; }

/* OPEN state — drops the black bg, switches to dark text on transparent */
.collection-toggle-btn[aria-expanded="true"],
.collection-toggle-btn[aria-expanded="true"]:hover,
.collection-toggle-btn[aria-expanded="true"]:focus {
    background: transparent;
    color: #2c2c2c !important;
}

.collection-toggle-label { flex: 1 1 auto; padding-right: 12px; }

/* Icon circle — CSS ::before draws the character so we can swap +/- on open. */
.collection-toggle-plus {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    line-height: 28px;
    border-radius: 50%;
    background: #66cc1a;            /* green when closed */
    color: #ffffff;
    font-weight: 700;
    font-size: 22px;
    text-align: center;
    transition: background 0.15s ease;
}
.collection-toggle-plus::before { content: "+"; }

/* OPEN state — circle becomes navy blue with a minus character */
.collection-toggle-btn[aria-expanded="true"] .collection-toggle-plus {
    background: #2c2c70;            /* navy / dark blue */
}
.collection-toggle-btn[aria-expanded="true"] .collection-toggle-plus::before {
    content: "\2212";               /* − minus sign */
}

/* Toggle BOX — wraps button + collapsing trainings list.
   Always 8px padding so the layout never shifts when the border appears.
   Border only becomes visible on open via :has() selector. */
.collection-toggle-box {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px;
    transition: border-color 0.15s ease;
}
.collection-toggle-box:has(.collection-toggle-btn[aria-expanded="true"]) {
    border-color: #d0d0d0;
}

.collection-trainings-wrap {
    margin-top: 0;
    padding-top: 12px;
    border-top: none;
}

/* Thin purple divider between the two stacked cards within each column.
   Each column is independent — expanding an accordion only pushes content
   in the SAME column down, never across to the other column. */
@media (min-width: 768px) {
    .collection-column > .collection-cell:not(:last-child) {
        border-bottom: 1px solid #3e2f6f;
        padding-bottom: 28px;
        margin-bottom: 28px;
    }
}

.collection-tagline {
    font-family: Lato, sans-serif;
    font-weight: 700;
    color: #2c2c2c;
    font-size: 18px;
    margin: 0 0 14px;
}
.collection-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 1.8;
    color: #2c2c2c;
}
.collection-bullets {
    list-style: none;
    padding-left: 4px;
}
.collection-bullets li::before {
    content: "✔ ";
    color: #4e9223;
    font-weight: 700;
    margin-right: 8px;
}
.collection-italic {
    font-style: italic;
    color: #3e2f6f;
    margin: 8px 0 18px;
    font-size: 17px;
}
.collection-trainings {
    list-style: disc;
    padding-left: 24px;
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: #2c2c2c;
}
.collection-trainings li {
    padding: 6px 0;
    border-bottom: none;
}

/* "Wait! Before you go..." final block */
.wait-headline {
    font-family: Lato, sans-serif;
    font-weight: 700;
    color: #ef6c00;
    font-size: 34px;
    text-align: center;
    margin: 24px 0 8px;
}
.wait-sub {
    font-family: Lato, sans-serif;
    font-style: italic;
    color: #3e2f6f;
    text-align: center;
    margin-bottom: 18px;
}

@media (max-width: 768px) {
    .wait-headline { font-size: 26px; }
    .collections-accordion .accordion-button { font-size: 18px; padding: 14px 16px; }
}

/* ----- Hero (Congratulations) bottom diagonal wedge ----- */
/* Cuts a slight diagonal off the bottom-right of the purple hero so it
   transitions to the white intro section below the way the template does. */
.ty-header {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%);
}
@media (max-width: 768px) {
    .ty-header {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), 0 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), 0 100%);
    }
}

/* "Here are Your Next Steps!" section — straight horizontal top & bottom edges */
.no-slant {
    clip-path: none !important;
    -webkit-clip-path: none !important;
}
.no-slant::before,
.no-slant::after {
    display: none !important;
    content: none !important;
}
/* Add the top padding the removed .reserve-your-top-divider was providing */
.container-next-steps.no-slant {
    padding-top: 50px;
}

/* ================================================================
   Mobile padding fixes — match the Day 1 card edge spacing
   ================================================================
   On mobile, the "For your security..." line and the Garden Success
   Kit checkmark bullet lists sit visually too close to the screen
   edge, while the $87 sales banner image sits with too much white
   space around it. These rules align all three with the Day 1
   card's edge spacing, which is the design target. */
@media (max-width: 991.98px) {
    /* "For your security, all orders are processed on a secured server..."
       — appears in 4 places on the page (under each Buy Now block) */
    .cc-purchase-txt {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* Bullet list inside the intro section
       ("Recordings from the LIVE 2026 Superfood Garden Summit Broadcast",
       "60 curated expert presentations", etc.) */
    .ty-intro .row > .col-lg-7 {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* "When you upgrade to the Garden Success Kit..." bullet list
       (mid-page, just before the $87 sales banner) */
    .container_properties_lg .row > .col-auto.col-sm-10 {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* The two "Complete Superfood Garden System" sales images and their
       Buy Now buttons are wrapped in <div class="col-8 mx-auto">, which
       hard-locks them to 67% width at every breakpoint. On mobile that's
       too narrow for both the image AND the button. Override to full
       width so they fill the row like a normal col-12. */
    .row > .col-8.mx-auto {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }

    /* SGS-Sales-Image-Dark1.webp has a denser design with less built-in
       whitespace than its square-format sibling image, so at full col
       width it visually crowds the screen edge. Add extra horizontal
       padding to ONLY this col so the image and its Buy Now button pull
       further inward on mobile, matching the visual spacing of the
       mid-page (square) sales image. Uses :has() so the rule only fires
       on the specific col that contains this image. */
    .row > .col-8.mx-auto:has(img[src*="SGS-Sales-Image-Dark1"]) {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Prevent any minor right-side overflow from causing a page-level
   horizontal scrollbar. Belt-and-suspenders fix — applies at all
   widths since horizontal scroll is essentially never wanted. */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}