
/* ============================================================
   BOJANGLES V3
   CANES-STYLE DESIGN SYSTEM
   ============================================================ */


/* ------------------------------------------------------------
   ROOT / ASTRA RESET
   ------------------------------------------------------------ */

body.home .site-content,
body.home .site-content > .ast-container,
body.home .site-content > .ast-container > .bjp3-home {

    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;
}

.bjp3-home {
    width:100%;
    color:#252a31;
    background:#ffffff;
}

.bjp3-wrap {
    width:min(
        1320px,
        calc(100% - 48px)
    );

    margin:0 auto;
}


/* ------------------------------------------------------------
   GLOBAL HEADER
   MATCH CANES PROPORTIONS
   ------------------------------------------------------------ */

body.home .bjp-site-header {
    width:100%;

    background:#ffffff;

    border-bottom:
        1px solid #eceef0;

    position:relative;

    z-index:9999;
}

body.home
.bjp-site-header
.bjp-global-shell.bjp-header-row {

    width:min(
        1320px,
        calc(100% - 48px)
    );

    min-height:76px;

    margin:0 auto;
    padding:8px 0;

    display:grid;

    grid-template-columns:
        minmax(220px,auto)
        minmax(0,1fr);

    align-items:center;

    gap:30px;
}

body.home .bjp-site-brand {
    display:flex;
    align-items:center;

    min-width:0;

    line-height:0;
}

body.home .bjp-site-logo {
    display:block;

    width:auto;
    height:auto;

    max-width:220px;
    max-height:55px;

    object-fit:contain;
}

body.home .bjp-primary-nav {
    margin-left:auto;
}

body.home .bjp-primary-menu {

    margin:0 !important;
    padding:0 !important;

    display:flex;

    align-items:center;
    justify-content:flex-end;

    gap:2px;

    list-style:none;
}

body.home
.bjp-primary-menu
> li {

    margin:0;
    padding:0;

    list-style:none;
}

body.home
.bjp-primary-menu
> li
> a {

    min-height:42px;

    padding:0 10px;

    display:flex;
    align-items:center;

    color:#20242a;

    background:transparent;

    border:0;
    border-radius:7px;

    font-size:14px;
    font-weight:650;

    line-height:1.25;

    white-space:nowrap;

    text-decoration:none;
}

body.home
.bjp-primary-menu
> li
> a:hover,

body.home
.bjp-primary-menu
> li.current-menu-item
> a {

    color:#df1821;

    background:#fff4f4;
}

body.home .bjp-menu-toggle {
    display:none;
}


/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

.bjp3-hero {

    padding:68px 0;

    background:
        linear-gradient(
            180deg,
            #fff7dc 0%,
            #fffdf8 100%
        );

    border-bottom:
        1px solid #efe6cf;
}

.bjp3-hero-grid {

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(420px,.88fr);

    align-items:center;

    gap:72px;
}

.bjp3-kicker {

    display:inline-block;

    margin-bottom:12px;

    color:#df1821;

    font-size:12px;
    font-weight:850;

    letter-spacing:.1em;

    text-transform:uppercase;
}

.bjp3-hero h1 {

    max-width:700px;

    margin:
        0 0 20px;

    color:#181c21;

    font-size:
        clamp(
            42px,
            4.2vw,
            62px
        );

    font-weight:850;

    line-height:1.03;

    letter-spacing:-.045em;
}

.bjp3-hero-copy > p {

    max-width:680px;

    margin:
        0 0 24px;

    color:#555d66;

    font-size:17px;

    line-height:1.75;
}

.bjp3-hero-actions {

    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-bottom:24px;
}

.bjp3-btn-primary,
.bjp3-btn-secondary {

    min-height:46px;

    padding:
        0 20px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    border-radius:7px;

    font-size:14px;

    font-weight:800;

    text-decoration:none !important;
}

.bjp3-btn-primary {

    color:#ffffff !important;

    background:#df1821;
}

.bjp3-btn-secondary {

    color:#242a31 !important;

    background:#ffffff;

    border:
        1px solid #dfe2e5;
}

.bjp3-btn-primary:hover {
    background:#be141c;
}

.bjp3-btn-secondary:hover {

    color:#df1821 !important;

    border-color:#e6b3b7;
}

.bjp3-trust-row {

    display:flex;
    flex-wrap:wrap;

    gap:10px 20px;

    color:#656c74;

    font-size:12px;

    font-weight:650;
}

.bjp3-hero-media img {

    width:100%;

    max-height:430px;

    display:block;

    object-fit:cover;

    border-radius:14px;

    box-shadow:
        0 18px 40px
        rgba(30,35,40,.12);
}


/* ------------------------------------------------------------
   QUICK LINKS
   ------------------------------------------------------------ */

.bjp3-quick {

    padding:30px 0;

    background:#ffffff;

    border-bottom:
        1px solid #eceef0;
}

.bjp3-quick-grid {

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:14px;
}

.bjp3-quick-grid a {

    padding:18px 18px;

    display:flex;
    flex-direction:column;

    gap:4px;

    color:#242a30 !important;

    background:#ffffff;

    border:
        1px solid #e4e7e9;

    border-radius:9px;

    text-decoration:none !important;

    transition:.18s ease;
}

.bjp3-quick-grid strong {

    font-size:14px;

    font-weight:800;
}

.bjp3-quick-grid span {

    color:#6b7279;

    font-size:12px;

    line-height:1.45;
}

.bjp3-quick-grid a:hover {

    border-color:#e9b7ba;

    box-shadow:
        0 8px 20px
        rgba(15,23,42,.06);

    transform:
        translateY(-2px);
}


/* ------------------------------------------------------------
   INTRO
   ------------------------------------------------------------ */

.bjp3-intro {

    padding:
        52px 0 28px;

    background:#ffffff;
}

.bjp3-intro-grid {

    display:grid;

    grid-template-columns:
        minmax(0,1.6fr)
        minmax(290px,.55fr);

    gap:24px;

    align-items:stretch;
}

.bjp3-intro-card,
.bjp3-info-card {

    padding:28px;

    background:#ffffff;

    border:
        1px solid #e5e8ea;

    border-radius:10px;
}

.bjp3-intro-card h2 {

    margin:
        0 0 14px;

    color:#1c2127;

    font-size:31px;

    font-weight:820;

    line-height:1.22;
}

.bjp3-intro-card p,
.bjp3-info-card p {

    color:#555d66;

    font-size:15px;

    line-height:1.76;
}

.bjp3-intro-card p {

    max-width:900px;

    margin:
        0 0 14px;
}

.bjp3-info-card {

    background:#fff9e5;

    border-color:#ead88e;
}

.bjp3-info-card strong {

    display:block;

    margin-bottom:10px;

    color:#262b31;

    font-size:16px;
}

.bjp3-info-card p {

    margin:
        0 0 13px;

    font-size:13px;
}

.bjp3-info-card a {

    color:#d71820;

    font-size:13px;

    font-weight:750;
}


/* ------------------------------------------------------------
   MENU AREA
   ------------------------------------------------------------ */

.bjp3-menu-guide {

    padding:
        5px 0 70px;

    background:#ffffff;
}

.bjp3-section {

    padding:
        45px 0 34px;
}

.bjp3-section
+ .bjp3-section {

    border-top:
        1px solid #eceef0;
}

.bjp3-section-title {

    margin-bottom:20px;
}

.bjp3-section-title h2 {

    margin:0;

    padding:
        13px 17px;

    color:#ffffff;

    background:#a60f18;

    border-radius:7px;

    font-size:23px;

    font-weight:820;

    line-height:1.32;
}

.bjp3-section-copy {

    max-width:980px;

    margin:
        0 0 24px;
}

.bjp3-section-copy p,
.bjp3-section-copy li {

    color:#414850;

    font-size:15px;

    line-height:1.78;
}

.bjp3-section-copy p {

    margin:
        0 0 15px;
}

.bjp3-section-copy a {

    color:#d71820;

    font-weight:650;
}


/* ------------------------------------------------------------
   MENU CARDS
   ------------------------------------------------------------ */

.bjp3-menu-grid {

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:16px;
}

.bjp3-menu-card {

    min-width:0;

    overflow:hidden;

    background:#ffffff;

    border:
        1px solid #e1e4e7;

    border-radius:9px;

    box-shadow:
        0 2px 10px
        rgba(20,25,32,.045);
}

.bjp3-menu-image {

    height:175px;

    padding:14px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#fafafa;

    border-bottom:
        1px solid #eceef0;
}

.bjp3-menu-image img {

    width:100%;
    height:100%;

    object-fit:contain;
}

.bjp3-menu-body {

    padding:14px;
}

.bjp3-menu-body h3 {

    min-height:40px;

    margin:
        0 0 10px;

    color:#242a30;

    font-size:14px;

    font-weight:750;

    line-height:1.4;
}

.bjp3-menu-price {

    display:inline-flex;

    min-height:30px;

    padding:
        5px 10px;

    align-items:center;

    color:#171a1f;

    background:#fedb00;

    border-radius:5px;

    font-size:13px;

    font-weight:850;
}


/* ------------------------------------------------------------
   TABLES
   ------------------------------------------------------------ */

.bjp3-table-wrap {

    width:100%;

    margin-top:20px;

    overflow-x:auto;

    -webkit-overflow-scrolling:
        touch;
}

.bjp3-table-wrap style {
    display:none !important;
}

.bjp3-table-wrap table {

    width:100% !important;

    min-width:600px;

    margin:0 !important;

    border-collapse:
        separate !important;

    border-spacing:
        0 !important;

    background:#ffffff !important;

    border:
        1px solid #dfe3e6 !important;

    border-radius:
        7px !important;

    overflow:hidden;
}

.bjp3-table-wrap th,
.bjp3-table-wrap td {

    padding:
        12px 14px !important;

    color:#333941 !important;

    background:#ffffff !important;

    border:0 !important;

    border-bottom:
        1px solid #e7eaed !important;

    font-size:
        14px !important;

    text-align:
        left !important;
}

.bjp3-table-wrap
thead th,

.bjp3-table-wrap
tr:first-child th,

.bjp3-table-wrap
tr:first-child td {

    color:#ffffff !important;

    background:#a60f18 !important;

    font-weight:
        800 !important;
}

.bjp3-table-wrap
tbody
tr:nth-child(even)
td {

    background:
        #f7f8f9 !important;
}


/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */

.bjp3-faq style {
    display:none !important;
}

.bjp3-faq details {

    margin-bottom:10px !important;

    overflow:hidden;

    background:#ffffff !important;

    border:
        1px solid #e1e4e7 !important;

    border-radius:
        7px !important;
}

.bjp3-faq summary {

    padding:
        14px 16px !important;

    color:#252a31 !important;

    background:#ffffff !important;

    font-size:
        14px !important;

    font-weight:
        750 !important;

    cursor:pointer;
}

.bjp3-faq
details[open]
summary {

    color:#a60f18 !important;

    background:#fff8f8 !important;
}

.bjp3-faq details p {

    padding:
        0 16px 15px !important;

    color:#555d66 !important;

    font-size:
        14px !important;

    line-height:
        1.7 !important;
}


/* ------------------------------------------------------------
   FINAL TRUST CARD
   ------------------------------------------------------------ */

.bjp3-final-card {

    margin-top:40px;

    padding:30px;

    background:#f8f9fa;

    border:
        1px solid #e4e7ea;

    border-radius:9px;
}

.bjp3-final-card h2 {

    margin:
        0 0 12px;

    color:#20252b;

    font-size:26px;

    font-weight:800;
}

.bjp3-final-card p {

    max-width:900px;

    color:#555d66;

    font-size:14px;

    line-height:1.75;
}

.bjp3-final-links {

    margin-top:18px;

    display:flex;

    flex-wrap:wrap;

    gap:9px;
}

.bjp3-final-links a {

    padding:
        8px 11px;

    color:#333940 !important;

    background:#ffffff;

    border:
        1px solid #dfe3e6;

    border-radius:6px;

    font-size:12px;

    font-weight:700;

    text-decoration:none !important;
}


/* ------------------------------------------------------------
   GLOBAL FOOTER - CANES STYLE
   ------------------------------------------------------------ */

body.home .bjp-site-footer {

    background:#1d252e;

    color:#ffffff;
}

body.home .bjp-footer-main {

    width:min(
        1320px,
        calc(100% - 48px)
    );

    margin:0 auto;

    padding:
        48px 0 42px;

    display:grid;

    grid-template-columns:
        minmax(260px,1.35fr)
        repeat(3,minmax(140px,.6fr));

    gap:38px;
}

body.home
.bjp-site-footer
strong {

    color:#ffffff;
}

body.home
.bjp-site-footer
p {

    color:#c5ccd3;

    font-size:13px;

    line-height:1.7;
}

body.home
.bjp-site-footer
a {

    color:#d9dfe4;

    text-decoration:none;
}

body.home
.bjp-site-footer
a:hover {

    color:#ffffff;
}

body.home .bjp-footer-bottom {

    width:100%;

    background:#151c24;

    border-top:
        1px solid #2a323c;
}


/* ------------------------------------------------------------
   TABLET / MOBILE
   ------------------------------------------------------------ */

@media(max-width:900px) {

    body.home
    .bjp-site-header
    .bjp-global-shell.bjp-header-row {

        width:
            calc(100% - 28px);

        max-width:none;

        min-height:70px;

        margin:0 auto;

        padding:8px 0;

        display:grid;

        grid-template-columns:
            minmax(0,1fr)
            auto;

        gap:10px;

        position:relative;
    }

    body.home .bjp-site-logo {

        width:
            min(195px,100%);

        max-height:50px;
    }

    body.home .bjp-menu-toggle {

        width:58px;
        min-width:58px;

        height:38px;

        padding:0 8px;

        display:flex;

        align-items:center;
        justify-content:center;

        color:#ffffff;

        background:#df1821;

        border:0;
        border-radius:7px;

        font-size:12px;
        font-weight:800;
    }

    body.home .bjp-primary-nav {

        display:none;

        width:100%;

        position:absolute;

        top:100%;
        left:0;
        right:0;

        margin:0;

        padding:
            8px 14px 12px;

        background:#ffffff;

        border-top:
            1px solid #eceef0;

        border-bottom:
            1px solid #e4e6e8;

        box-shadow:
            0 12px 25px
            rgba(15,23,42,.10);

        z-index:99999;
    }

    body.home
    .bjp-primary-nav.is-open {

        display:block;
    }

    body.home
    .bjp-primary-menu {

        width:100%;

        margin:0 !important;
        padding:0 !important;

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:0;
    }

    body.home
    .bjp-primary-menu
    > li {

        width:100%;
    }

    body.home
    .bjp-primary-menu
    > li
    > a {

        width:100%;

        min-height:44px;

        padding:
            11px 8px;

        color:#232931;

        background:#ffffff;

        border-bottom:
            1px solid #eeeeef;

        border-radius:0;

        white-space:normal;
    }

    .bjp3-hero-grid {

        grid-template-columns:
            1fr 1fr;

        gap:35px;
    }

    .bjp3-quick-grid {

        grid-template-columns:
            repeat(2,1fr);
    }

    .bjp3-menu-grid {

        grid-template-columns:
            repeat(3,1fr);
    }

}


@media(max-width:767px) {

    .bjp3-wrap {

        width:
            calc(100% - 28px);
    }

    .bjp3-hero {

        padding:
            38px 0;
    }

    .bjp3-hero-grid {

        grid-template-columns:
            1fr;

        gap:28px;
    }

    .bjp3-hero h1 {

        font-size:
            38px;
    }

    .bjp3-hero-copy > p {

        font-size:
            15px;
    }

    .bjp3-intro-grid {

        grid-template-columns:
            1fr;
    }

    .bjp3-section {

        padding:
            34px 0 25px;
    }

    .bjp3-section-title h2 {

        padding:
            11px 13px;

        font-size:
            20px;
    }

    .bjp3-menu-grid {

        grid-template-columns:
            repeat(2,1fr);

        gap:11px;
    }

    .bjp3-menu-image {

        height:140px;
    }

    body.home .bjp-footer-main {

        width:
            calc(100% - 28px);

        grid-template-columns:
            1fr 1fr;

        gap:28px;

        padding:
            38px 0;
    }

}


@media(max-width:420px) {

    body.home .bjp-site-logo {

        width:
            min(165px,100%);

        max-height:45px;
    }

    body.home .bjp-menu-toggle {

        width:54px;
        min-width:54px;

        height:36px;

        font-size:11px;
    }

    .bjp3-quick-grid {

        grid-template-columns:
            1fr;
    }

    .bjp3-menu-grid {

        grid-template-columns:
            1fr 1fr;
    }

    .bjp3-menu-image {

        height:120px;
    }

    body.home .bjp-footer-main {

        grid-template-columns:
            1fr;
    }

}

