/*
    Theme Name: RJO Futures Theme 2026 - Stonex Migration
    Version: 1.0.10
*/

:root {
    --rich-black: #363636;
    --royal-blue: #235274;
    --sage-green: #27B47E;
    --positive-yellow: #F8F391;
    --mist-gray: #F7F8FA;
    --clarity-white: #ffffff;

    --px1000: 62.5rem;
    --px500: 31.25rem;
    --px350: 21.875rem;
    --px260: 16.25rem;
    --px214: 13.375rem;
    --px160: 10rem;
    --px128: 8rem;
    --px100: 6.25rem;
    --px90: 5.625rem;
    --px85: 5.313rem;
    --px80: 5rem;
    --px65: 4.063rem;
    --px60: 3.75rem;
    --px55: 3.438rem;
    --px50: 3.125rem;
    --px40: 2.5rem;
    --px36: 2.25rem;
    --px34: 2.125rem;
    --px32: 2rem;
    --px30: 1.875rem;
    --px27: 1.688rem;
    --px26: 1.625rem;
    --px23: 1.438rem;
    --px22: 1.375rem;
    --px20: 1.25rem;
    --px19: 1.188rem;
    --px18: 1.125rem;
    --px17: 1.063rem;
    --px16: 1rem;
    --px15: 0.938rem;
    --px14: 0.875rem;
    --px12: 0.75rem;
    --px11: 0.688rem;
    --px9: 0.563rem;
    --px7: 0.438rem;
    --px5: 0.313rem;
    --px3: 0.188rem;

    --paragraph-padding: 5.75rem;
    --block-padding: var(--px100);

    --max-width: 1088px;
    --max-nav-width: 1266px;
    --half-width: calc(var(--max-width) / 2);
    --card-image-height: var(--px160);
    --border-radius: var(--px5);
    --btn-radius: var(--px5);

    --broker-img-height: var(--px214);

    --max-menu-width: var(--px1000);

    /* --max-video-width: 30rem; */
    font-display: swap;
}

@media screen and (width < 38rem) {
    :root {
        --block-padding: var(--px50);
    }
}

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
  }
  
  /* 2. Remove default margin */
  * {
    margin: 0;
  }
  
  body {
    /* 3. Add accessible line-height */
    line-height: 1.5;
    /* 4. Improve text rendering */
    -webkit-font-smoothing: antialiased;
  }
  
  /* 5. Improve media defaults */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  
  /* 6. Inherit fonts for form controls */
  input, button, textarea, select {
    font: inherit;
  }
  
  /* 7. Avoid text overflows */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  
  /* 8. Improve line wrapping */
  p {
    text-wrap: pretty;
  }
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }
  
  /*
    9. Create a root stacking context
  */
  #root, #__next {
    isolation: isolate;
  }

.rjof-container {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

footer {
    padding-block: var(--px50);
    background: var(--royal-blue);
    color: white;

    .footer-main {

        display: flex;
        flex-direction: column;
        gap: 2rem;
        align-items: flex-start;

        
        .footer-links {
            display: flex;
            gap: 3rem;
            padding-block-end: 2rem;
            flex-wrap: wrap;
        }

        .footer-disclaimer, .footer-copyright {
            margin-block: 0.25rem;
            font-size: var(--px12);
        }

        .link-column {
            display: flex;
            flex-direction: column;

            &:first-child {
                margin-block-end: 1rem;
            }
        }

        .social-links {
            display: flex;
            flex-direction: row;
            gap: 1rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .footer-label {
            font-weight: bold;
            padding-block-end: 1rem;
        }

        a {
            color: white;
            text-decoration: none;
        }

        p {
            color: white;
        }

        .legal {
            ul {
                list-style: none;
                padding: 0;

            }
        }

        .contact-number {
            display: flex;
            flex-direction: column;
            text-wrap: nowrap;
            margin-block-end: 1rem;
        }

        .social-icon {
            width: 24px;
        }
    }
}

.rjof-heading--xlarge {
    font-size: clamp(var(--px80), 10vw, var(--px90));
    line-height: 0.95em;
    font-weight: 900;
}

.rjof-heading--large {
    font-size: clamp(var(--px36), 6vw, var(--px50));
    line-height: 1.1em;
    font-weight: 900;
}

.rjof-heading--medium {
    font-size: clamp(var(--px27), 4vw, var(--px32));
    line-height: 1.125em;
    font-weight: 700;
}

.rjof-heading--small {
    font-size: var(--px20);
    line-height: var(--px26);
    font-weight: 700;
}

.make-narrow {
    padding-inline: var(--paragraph-padding);
}

.standard-padding {
    padding-block: var(--block-padding);
}

.extra-inline-padding {
    padding-inline: var(--paragraph-padding);
}

.rjof-align--center {
    text-align: center;
}

.btn {
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color, var(--text-color));
    border-radius: var(--btn-radius);
    font-weight: bold;
    padding-inline: var(--px18);
    min-height: var(--px50);
    display: inline-flex;
    justify-content: center;
    justify-self: flex-start;
    align-items: center;
    text-decoration: none;

    &:focus-visible {
        outline: 2px dotted var(--royal-blue);
        outline-offset: 3px;
    }   
}

.btn-cta {
    --border-color: var(--sage-green);
    --bg-color: var(--sage-green);
    --text-color: var(--clarity-white);

    &:hover {
        --bg-color: black;
        --text-color: white;
        --border-color: black;
    }
}

.btn-ghost {
    --bg-color: var(--clarity-white);
    --text-color: var(--rich-black);
    &:hover {
        --bg-color: black;
        --text-color: white;
    }
}

.btn-alt {
    --text-color: var(--rich-black);
    --bg-color: var(--positive-yellow);
    &:hover {
        --bg-color: white;
        --text-color: black;
    }
}

.btn-left {
    align-self: flex-start;
}

.btn-center {
    align-self: center;
}

.btn-right {
    align-self: flex-end;
}

input[type="search"] {
    background-color: var(--mist-gray);
    background-repeat: no-repeat;
    background-position: 0.5rem center;
    border: 1px solid var(--rich-black);
    border-radius: 2rem;
    padding: 0.25rem;
    padding-inline-start: 2rem;
    background-image: url('./assets/images/icons/Search Icon - Blue.svg');
}

button[aria-label="Search"] {
    background: var(--sage-green);
    color: white;
    border-radius: var(--btn-radius);
}

.wp-block-post-excerpt__more-link {
    color: var(--sage-green);
    display: none;
}

.btn-login, .btn-open-account {
    padding-block: 0.5rem;
}

.market-contract-table {
    border: none;

    tr:first-child td {
        border-top: none;
    }

    tr:last-child td {
        border-bottom: none;
    }

    tr td:first-child {
        border-left: none;
    }

    tr td:last-child {
        border-right: none;
    }
    
    td {
        vertical-align: top;
    }
}

@media screen and (max-width: 600px) {
    .market-contract-table {
        /* writing-mode: vertical-lr; */
        
        width: 100%;
        
        table {
            margin-inline: auto;

            tbody {
                display: grid;
                grid-template-columns: 1fr 1fr;

                tr {
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-template-rows: subgrid;
                    grid-row: span 6;
                }
            }

            td {
                border: none;
            }

            td:not(:last-child) {
                border-block-end: 1px solid var(--rich-black);
            }

            tr:first-of-type {
                border-inline-end: 1px solid var(--rich-black);
            }
        
        }

    }
}

.gradient-background {
    background: url('./assets/images/patterns/RJO Badge Pattern Small Blue repeating.png'), linear-gradient(0deg, var(--royal-blue), var(--sage-green));
    color: white;
}

.gradient-background-alt {
    background: url('./assets/images/patterns/RJO Badge Pattern Small Green repeating.png'), linear-gradient(0deg, var(--royal-blue), var(--sage-green));
    color: white;
}

.pattern-background-blue {
    background: var(--royal-blue);
    background-image: url('./assets/images/patterns/pattern gray.PNG');
    background-size: 5.5em;
    color: white;
}

.pattern-background-gray {
    background-image: url('./assets/images/patterns/Pattern - Large - Gray 24.png');
    background-size: 6.5em;
}

.testimonial {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.5rem;
    font-style: italic;
    background: white;
    border-radius: var(--btn-radius);
}

.center-content {
    padding-inline: max(1rem, calc(50vw - var(--half-width)));
}

a:has(img.arrow-link) {
    padding: .5rem .5rem .5rem 0;
    align-self: flex-start;

    .arrow-link {
        clip-path: inset(0 0 0 10px);
        transform: translateX(-10px);
    
        transition: 0.2s ease-in;

        &.arrow-left {
            rotate: 180deg;
        }
    
    }
    
    &:hover {
        .arrow-link {
            clip-path: inset(0 0 0 0);
            transform: translateX(0);
        }
    }
    
    
}

.arrow-left {
    transform: rotate(180deg);
}

.rjof-platform-table {
    
    table {
        border: none;
        border-collapse: collapse;

        tr {

            background: white;

            td {
                border-top: none;
                border-bottom: none;
                border-left: 1px solid silver;
                border-right: 1px solid silver;
                text-align: center;
                vertical-align: center;
                padding-block: 0.5rem;

                div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                &:first-child {
                    border-left: none;
                    text-align: left;
                    vertical-align: top;
                    font-weight: bold;
                }

                &:last-child {
                    border-right: none;
                }
            }

            &:nth-child(2n) {
                background: var(--mist-gray);
            }

            &:first-of-type {
                font-weight: bold;
                vertical-align: top;
            }

        }
    }
}

.add-shadow {
    background: white;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #3636361A;
    padding: 2rem;
}

.add-shadow-only {
    background: white;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #3636361A;
    overflow: hidden;
}

.broker-name {
    color: var(--sage-green);
    font-weight: bold;
    font-size: var(--px26);
    line-height: 1;
    padding-block-start: 1.5rem;

    a {
        color: inherit;
        text-decoration: none;
    }
}

.broker-title {
    color: var(--rich-black);
    font-weight: bold;
    padding-block-end: 1rem;
    margin-block-end: 1rem;
    border-block-end: 1px solid var(--rich-black);
    margin-inline: 1rem;
}

.broker-experience-label, .broker-focus {
    color: var(--rich-black);
    font-weight: bold;
}

.broker-link a {
    color: var(--sage-green);
    background: transparent;
    padding-inline: 0;
    font-weight: bold;
}

ul.broker-grid {
    grid-auto-rows:  var(--broker-img-height) min-content min-content min-content min-content max-content min-content;
    row-gap: 0.1rem;

    img {
        object-fit: cover;
        object-position: top center;
        height: 100%;
    }

    li.rjof_broker {
        
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: subgrid;
        grid-row: span 7;

        max-width: var(--px250);

        /* outline: 1px solid green; */

        margin-block-end: 1.5rem;

        &>*:not(figure, ul, .broker-title, img) {
            padding-inline: 1rem;
        }
    }

}

.services-video {
    width: min(var(--max-video-width), 95vw);
    margin-inline: auto;
    padding-inline: 1rem;
}

ul.check-list {
    list-style-image: url('./assets/images/icons/system/Checkbox.svg');

    li {
        margin-bottom: 1em;
    }
}

ul.new-check-list {
    list-style: none;
    padding-inline-start: 0;
    
    > li {
        background-image: url('./assets/images/icons/list-icons/RJOFutures_AgrisAcademyWebinarSeries_iconCheck.svg');
        background-repeat: no-repeat;
        background-position: 0 2px;
        padding-bottom: 1em;
        padding-inline-start: 2rem;
        
        &.date-icon {
            background-image: url('./assets/images/icons/list-icons/RJOFutures_AgrisAcademyWebinarSeries_iconDate.svg');
        }
        
        &.platform-icon {
            background-image: url('./assets/images/icons/list-icons/RJOFutures_AgrisAcademyWebinarSeries_PlatformIcon.svg');
        }
        
        &.price-icon {
            background-image: url('./assets/images/icons/list-icons/RJOFutures_AgrisAcademyWebinarSeries_iconFree.svg');
        }
        
        &.bonus-icon {
            background-image: url('./assets/images/icons/list-icons/RJOFutures_AgrisAcademyWebinarSeries_iconBonus.svg');
        }
    }
}

.blue {
    color: var(--royal-blue);
}

.green {
    color: var(--sage-green);
}

.white {
    color: white;
}

.black {
    color: var(--rich-black);
}

.px80 {
    font-size: var(--px80);
    line-height: 1;
    font-weight: 900;
}
.px60 {
    font-size: var(--px60);
    line-height: 1;
    font-weight: 900;
}
.px50 {
    font-size: var(--px50);
    line-height: 1;
    font-weight: 900;
}
.px36 {
    font-size: var(--px36);
    line-height: 1;
    font-weight: 700;
}
.px34 {
    font-size: var(--px34);
    line-height: 1;
    font-weight: 900;
}
.px32 {
    font-size: var(--px32);
    line-height: 1;
    font-weight: 700;
}
.px26 {
    font-size: var(--px26);
    line-height: 1;
    font-weight: 700;
}

.blue-60 {
    font-size: var(--px60);
    line-height: 1;
    color: var(--royal-blue);
    font-weight: 900;
}

.green-80 {
    font-size: var(--px80);
    line-height: 1;
    color: var(--sage-green);
    font-weight: 900;
}

.green-50 {
    font-size: var(--px50);
    line-height: 1;
    color: var(--sage-green);
    font-weight: 900;
}

.white-50 {
    font-size: var(--px50);
    line-height: 1;
    color: white;
    font-weight: 900;
}

.blue-50 {
    font-size: var(--px50);
    line-height: 1;
    color: var(--royal-blue);
    font-weight: 900;
}

.white-36 {
    font-size: var(--px36);
    font-weight: 700;
    line-height: 1;
    color: white;
}

.blue-32 {
    font-size: var(--px32);
    font-weight: 700;
    line-height: 1;
    color: var(--royal-blue);
}

.black-26 {
    font-size: var(--px26);
    color: var(--rich-black);
    font-weight: 700;
}

.pad-2-1 {
    padding: 2rem 1rem;
}

.check-start {
    position: relative;
    padding-inline-start: 2rem;

    &::before {
        content: '';
        display: block;
        background: url('./assets/images/icons/system/Checkbox.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        width: 1.2rem;
        height: 1.2rem;
        position: absolute;
        left: 0;
    }
}


@media screen and (max-width: 40rem) {
    .make-narrow {
        padding-inline: unset;
    }
}

.icon-span {
    display: flex;
    gap: 0.5em;
    align-items: center;
}

.podcast-title-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-block-end: 1px solid var(--rich-black);
    padding-block-end: var(--px32);

    h2 {
        font-size: var(--px50);
    }
    
    .podcast-host, .podcast-host-title {
        font-weight: bold;
    }
}

.podcast-video {
    iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }
}

.podcast-column-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
}

@media screen and (min-width: 50rem) {
    .podcast-column-section {
        grid-template-columns: 3fr 1fr;
    }
}

.wp-block-rjof-container.landing-page {
    --landing-page-overlap: var(--px50);

    background: var(--mist-gray);

    .rjof-container {
        margin-block-start: calc(-1 * var(--landing-page-overlap));
        border-radius: 5px;
        box-shadow: 0px 0px 10px #3636361A;
    }
}

body .grid330px {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 330px));
    justify-content: center;

    h2 {
        margin-block: 16px 4px;
    }

    hr {
        margin-block: 8px;
    }
}

.overlap {

    background: var(--mist-gray);
    padding-block-start: 0;

    .rjof-container {
        background: white;
        box-shadow: 0px 0px 10px #3636361A;
        border-radius: 5px;
        margin-block-start: -50px;
        position: relative;
        padding-block-end: 50px;
        padding-inline: 3rem;
    }

    .make-narrow {
        padding: 0;
        align-self: center;
        width: 70%;
    }
}

.round-corners {
    img {
        border-radius: 5px;
    }
}

.vcenter-columns {
    div {
        align-self: center;

        h2 {
            margin-block-start: 0;
        }
        
    }
}