/******************* Smethwick Advice Centre Main Homepage Styles *******************/
/********** BASE STYLES - HOME **********/
:root {
    --smbc-green: #508328;
    --sac-green: #1c4c1c;
    --sac-lightgreen: #52AB4D;
    --sac-verylight: #c9d6c7;
    --sac-olive: #4A7337;
    --sac-teal-bg: #f0fbf9;
    --sac-teal-l: #bce9e2;
    --sac-teal-d: #04727C;
    --sac-blue: #1D71B8;
    --text-colour: #1c212c;
    --white: #ffffff;
    --very-light: #f5f5f7;
    --light-grey: #e4e9f4;
    --medium-grey: #595959;
    --dark-grey: #2e2e2e;
    --black: #000000;
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.14);
    --glow: 0 0 32px rgba(245, 245, 247, 1);
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --radius-vsm: 8px;
}
.widget-image .image {
    border-bottom: none;
    border-radius: 0.75rem;
}
.widget-width--20 {
    width: 20%;
}
.widget-width--60 {
    /* width: 60%; */
}

/* HEADINGS & SUBHEADINGS */
.widget__heading {
    color: var(--smbc-green);
}

/******************* CUSTOM STYLES *******************/
/* ---------- Page width breakout on landing page ---------- */
.page-content {
    margin-top: 0;
}
/* Break-out rows - 1 */
.container:has(.styles1010) {
    max-width: 100vw;
}
.container:has(.styles1010) .widget-row {
    max-width: 1280px;
    margin: 0 auto;
}
.container:has(.styles1010) .widget-row {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Hero Section - row 1 */
.container:has(.styles1010) {
    background-color: var(--smbc-green);
    color: var(--white);
}
/*.container:has(.styles1010) {
    padding: 0;
    margin: 0 auto;
}*/

/* Hero heading */
.styles1006 h2 {
    font-size: 5rem;
    line-height: 1;
    color: var(--sac-litegreen);
}
/* Key details panel with icon */
.styles1007 .widget-content .editor {
    border-bottom: 2px solid var(--white);
    padding-bottom: 1.5rem;
    max-width: 95%;
}
.styles1007 .widget-content .editor::before {
    
}
.styles1007 .widget-content .editor p {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 0.65;
}

/* Hero supporting copy */
.styles1008 p {
    font-size: 1rem;
    line-height: 0.5;
}
.styles1008 p:nth-child(2) {
    font-weight: 600;
}
.styles1009 a, .styles1009 a:visited {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--smbc-green);
    font-size: 1rem;
    margin-top: 1rem;
}
.styles1009 a, .styles1009 a:visited {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--smbc-green);
    font-size: 1rem;
    margin-top: 1rem;
}
.styles1010 img {
    box-shadow: 
    0 0 10px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(0, 0, 0, 0.2),
    0 0 30px rgba(0, 0, 0, 0.1);

}

/* Feature - row 2 */
.widget-row:has(.styles1011) {
    background-color: var(--smbc-green);
    border-radius: 100px;
    margin: 3rem auto;
    padding: 1rem;
}
.widget-row:has(.styles1011) .widget-width {
    color: var(--white);
    border-right: 2px solid var(--white);
    padding: 0;
    text-align:center;
}
.widget-row:has(.styles1011) .widget-width:last-child {
    border-right: none;
}
.widget-row:has(.styles1011) .widget-width h3 {
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 0;
}

/* Intro - row 3 */
/* 2-column row with lists */
.widget-row:has(.styles1012) {
    margin: 1rem 0 4rem;
}
.widget-row:has(.styles1012) .widget-width:last-child {
    border-left: 1px solid var(--dark-grey);
}
.styles1012 {
    display: flex;
}
.widget-row:has(.styles1012) .widget-width:first-child .styles1012 {
    padding-right: 1rem;
    justify-content: flex-end;
}
.widget-row:has(.styles1012) .widget-width:last-child .styles1012 {
    padding-left: 1rem;
}
.widget-row:has(.styles1012) .styles1012 ul {
    margin: 1rem 1rem 1rem 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0rem 01rem;
}
.widget-row:has(.styles1012) .styles1012 ul li {
    margin: 0.5rem 0;
}
.widget-row:has(.styles1012) .styles1012 .editor ul li::before, 
.widget-row:has(.styles1012) .styles1012 .editor ul .list__item::before, 
.widget-row:has(.styles1012) .styles1012 .list--unordered li::before, 
.widget-row:has(.styles1012) .styles1012 .list--unordered .list__item::before {
    content: "✓";
    position: absolute;
    top: 0rem;
    left: -1.75rem;
    width: .5rem;
    height: .5rem;
    background-color: transparent;
    display: block;
    color: var(--smbc-green);
    font-weight: 700;
}

/* Info cards - row 4 */
.widget-row:has(.styles1013) {
    display: flex;
    flex-wrap: wrap;
}
.widget-row:has(.styles1013) > .widget-width {
    display: flex;
}
.widget-row:has(.styles1013) > .widget-width > .widget {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.widget-row:has(.styles1013) .styles1015 {
    background: var(--sac-teal-d);
    color: var(--white);
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 1.5rem 1.5rem 2rem;
}
.widget-row:has(.styles1013) .styles1015 h2 {
    color: var(--sac-teal-l);
}
.widget-row:has(.styles1013) .styles1015 h4 {
    color: var(--white);
    font-size: 1.5rem;
}
.widget-row:has(.styles1013) .styles1015 .editor > p {
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1;
}
.widget-row:has(.styles1013) .styles1015 .editor > p:nth-child(2) {
    padding-bottom: 1.5rem;
}
.widget-row:has(.styles1013) .styles1015 .editor > p:nth-child(4) {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--white);
}
.widget-row:has(.styles1013) .styles1015 .editor > p:nth-child(5) {
    color:var(--sac-teal-d);
    text-align: center;
    padding: 1rem ;
    background-color: var(--sac-teal-l);
    border-radius: 3rem;
}
.widget-row:has(.styles1013) .styles1015 .editor > p:nth-child(6) {
    font-size: 1.5rem;
    padding-top: 2.5rem;
    text-align: center;
}
.widget-row:has(.styles1013) .styles1013 {
    background: var(--white);
    border: 1px solid var(--light-grey);
    box-shadow: var(--glow);
    border-radius: var(--radius-sm);
    padding: 1.5rem 1.5rem 2rem;
}
.widget-row:has(.styles1013) .styles1014 {
    background: var(--sac-teal-bg);
    border: 1px solid var(--sac-teal-l);
    border-radius: var(--radius-sm);
    padding: 1.5rem 1.5rem 2rem;
}
.widget-row:has(.styles1013) h2 {
    font-size: 1.25rem;
    margin: 0;
}
.widget-row:has(.styles1013) ul:not([class]):not([type]), .widget-row:has(.styles1013) p {
    font-size: 0.9rem;
}
.widget-row:has(.styles1013) ul:not([class]):not([type]) {
    margin: 0 3rem;
}
.widget-row:has(.styles1013) ul + p {
    margin-top: 1.5rem;
}
.widget-row:has(.styles1013) ul li {
    margin: 1em 0;
}

.widget-row:has(.styles1013) ul li.f {
    content: "✓";
    position: absolute;
    top: 0rem;
    left: -1.75rem;
    width: .5rem;
    height: .5rem;
    background-color: transparent;
    display: block;
    color: var(--smbc-green);
    font-weight: 700;
}
@media (min-width: 1025px) {
    .widget-row:has(.styles1012) .widget-width:first-child .styles1012 p {
        width: 40ch;
    }
}
@media (max-width: 1024px) {
    .styles1006 h2 {
        font-size: 3.5rem;
    }
    .styles1007 .widget-content .editor p {
        font-size: 1.3rem;
    }
    .styles1008 .widget-content .editor p {
        font-size: 1rem;
        line-height: 1.3;
    }
    .widget-row:has(.styles1012) .widget-width {
        width: 50%;
    }
    .widget-row:has(.styles1012) .styles1012 h2 {
        font-size: 1.75rem;
    }
    .widget-row:has(.styles1012) .styles1012 p {
        width: 35ch;
    }
    .widget-row:has(.styles1012) .styles1012 ul {
        grid-template-columns: repeat(1, 1fr);
        gap: 0rem;
    }
    .widget-row:has(.styles1012) .styles1012 ul li {
        margin: 0.5rem 0;
        }
}
@media (max-width: 768px) {
    .container:has(.styles1010) .widget-row {
        padding-top: 1rem;
    }
    .styles1010 {
        padding-top: 1rem;
    }
    .widget-row:has(.styles1011) {
        display: flex;
    }
    .widget-row:has(.styles1011) .widget-width {
        width: 33.3333%;
        margin-bottom: 0;
    }
    .widget-row:has(.styles1011) .widget-width h3 {
        font-size: 1.2rem;
    }
    .widget-row:has(.styles1012) .widget-width {
        width: 100%;
    }
    .widget-row:has(.styles1012) .widget-width:last-child {
        border-left: none;
        border-top: 1px solid var(--dark-grey);
        padding-top: 1.5rem;
    }
    .widget-row:has(.styles1012) .widget-width .widget {
        padding: 0 1rem;
    }
    .widget-row:has(.styles1012) .widget-width:first-child .styles1012 {
        justify-content: flex-start;
    }
    .widget-row:has(.styles1012) .styles1012 p {
        width: 100%;
    }
    .widget-row:has(.styles1013) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .widget-row:has(.styles1013) > .widget-width:nth-child(3) {
        grid-column: span 2;
    }
.widget-row:has(.styles1013) .styles1015 h2 {
    font-size: 2rem;
    text-align: center;
    padding: 0 0 1rem;
}
.widget-row:has(.styles1013) .styles1015 .widget-content .editor {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem 1rem;
}
.widget-row:has(.styles1013) .styles1015 h4,
.widget-row:has(.styles1013) .styles1015 p {
    font-size: 1rem;
    padding: 0;
    margin: 0;
}
.widget-row:has(.styles1013) .styles1015 .editor p:nth-child(2) {
    padding-bottom: 0;
    padding-right: 1rem;
    border-right: 2px solid var(--white);
}
.widget-row:has(.styles1013) .styles1015 .editor > p:nth-child(4) {
    padding: 0;
    margin: 0;
    border-bottom: none;
}
.widget-row:has(.styles1013) .styles1015 .editor > p:nth-child(5) {
    grid-column: span 2;
    width: 75%;
    margin: 1rem auto 0;
}
.widget-row:has(.styles1013) .styles1015 .editor > p:nth-child(6) {
    grid-column: span 2;
    width: 75%;
    margin: 0 auto;
    padding-top: 0.5rem;
}
}
@media (max-width: 420px) {
    .styles1006 h2 {
        text-align: center;
        font-size: 3rem;
    }
    .styles1007 .widget-content .editor p {
        text-align: center;
        font-size: 1rem;
    }
    .styles1008 .widget-content .editor p {
        font-size: 1rem;
        line-height: 1.5;
        text-align: center;
    }
    .styles1009 .widget-content .editor p {
        text-align: center;
    }
    .widget-row:has(.styles1011) .widget-width h3 {
        font-size: 1rem;
        padding: 0 1rem;
    }
    .widget-row:has(.styles1013) {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }
    .widget-row:has(.styles1013) > .widget-width:nth-child(3) {
        grid-column: span 1;
    }
    .widget-row:has(.styles1013) .styles1015 .editor > h4, 
    .widget-row:has(.styles1013) .styles1015 .editor > p:nth-child(2) {
        flex: 0 0 100%;
        text-align: center;
    }
    .widget-row:has(.styles1013) .styles1015 .editor p:nth-child(2) {
        border-right: none;
    }
    .widget-row:has(.styles1013) .styles1015 .editor > p:nth-child(5) {
        width: 100%;
    }
    .widget-row:has(.styles1013) .styles1015 .editor > p:nth-child(6) {
        width: 100%;
    }
    .styles1016 h2 {
        font-size: 1.75rem;
    }
}

/******************* NO ADJUSTMENTS TO JADU DEFAULT MENU, HEADER & FOOTER ON THE MAIN SITE *******************/