:root {
    --stem-organic: #566e49;
    --sage-wellness: #87ae73;
    --eucalyptus-goodness: #bcd0a9;
    --sunshine-smiles: #e7df5d;
    --lavender-charm: #978cb4;
    --textile-family: #d78682;
    --cloud-comfort: #99c5c9;
    --linen-calming: #f1f1d3;
    --barnwood-rustic: #810029;
    --soil-earth: #b67965;
    --farmhouse-handcrafted: #ca9e6d;
    --cottage-cory: #644a6b;
    --moms-care: #a04956;
    --barn-spot: #e56a5e;
}

/* Background */
.bg-background {
    background-color: var(--eucalyptus-goodness);
}
.bg-darkest {
    background-color: var(--barnwood-rustic);
}

.bg-lightest {
    background-color: var(--linen-calming);
}

/* Dark colours */
.bg-dark-red {
    background-color: var(--moms-care);
}

.bg-dark-purple {
    background-color: var(--cottage-cory);
}

.bg-dark-green {
    background-color: var(--stem-organic);
}

/*Light colours*/
.bg-light-brown {
    background-color: var(--soil-earth);
}
.bg-lighter-brown {
    background-color: var(--farmhouse-handcrafted);
}
.bg-light-pink {
    background-color: var(--textile-family);
}
.bg-light-blue {
    background-color: var(--cloud-comfort);
}
.bg-light-red {
    background-color: var(--barn-spot);
}

.bg-light-purple {
    background-color: var(--lavender-charm);
}

.bg-light-green {
    background-color: var(--sage-wellness);
}
.bg-light-yellow {
    background-color: var(--sunshine-smiles);
}

/* Fonts */
.f-darkest {
    color: var(--barnwood-rustic);
}

.f-lightest {
    color: var(--linen-calming);
}

/* Dark colours */
.f-dark-red {
    color: var(--moms-care);
}

.f-dark-purple {
    color: var(--cottage-cory);
}

.f-dark-green {
    color: var(--stem-organic);
}

/*Light colours*/
.f-light-red {
    color: var(--barn-spot);
}

.f-light-purple {
    color: var(--lavender-charm);
}

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

.f-light-yellow {
    color: var(--sunshine-smiles);
}

/* Tags */

/* Anchor */
a {
    color: var(--stem-organic);
}

a:active {
    color: var(--linen-calming);
}

a:hover {
    color: var(--lavender-charm);
}

@font-face {
    font-family: 'sweet-apricot';
    src: url('font/sweetapricot-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'gumbo-regular';
    src: url('font/gumbo-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'figtree';
    src: url('font/gumbo-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: "brandon-grotesque", "figtree", sans-serif;
    color: var(--barnwood-rustic);
    background-color: var(--eucalyptus-goodness);
    font-weight: 400;
    font-style: normal;
}

.f-head {
    letter-spacing: 0.5px;
    font-family: 'gumbo-regular', 'Fredoka', sans-serif;
}

.f-title {
    font-family: "sweet-apricot", "Marck Script", cursive;
    font-style: normal;
}

.f-weight-100 {
    font-weight: 100;
}

.f-weight-200 {
    font-weight: 200;
}

.f-weight-300 {
    font-weight: 300;
}

.f-weight-400 {
    font-weight: 400;
}

.f-weight-500 {
    font-weight: 500;
}

.f-weight-600 {
    font-weight: 600;
}

.f-weight-700 {
    font-weight: 700;
}

.f-weight-800 {
    font-weight: 800;
}

.f-weight-900 {
    font-weight: 900;
}

.f-lh-2_50 {
    line-height: 2.50rem;
}

.f-size-3_00 {
    font-size: 3rem;
}
.f-size-2_75 {
    font-size: 2.75rem;
}
.f-size-2_50 {
    font-size: 2.50rem;
}
.f-size-2_25 {
    font-size: 2.25rem;
}

.f-size-2_00 {
    font-size: 2rem;
}

.f-size-1_75 {
    font-size: 1.75rem;
}

.f-size-1_50 {
    font-size: 1.5rem;
}

.f-size-1_25 {
    font-size: 1.25rem;
}

.f-size-_75 {
    font-size: 0.75rem;
}

.f-size-_50 {
    font-size: 0.5rem;
}

.f-size-_25 {
    font-size: 0.25rem;
}

/* Component */
/* Menu Gutter */
#gutter {
    font-size: calc(1rem + 0.3vw); /*fs-4*/
}
@media(max-width: 992px) {
    #gutter {
        width: 100%;
        font-size: calc(1.375rem + 1.5vw); /*fs-1*/
    }

    .gutter-content {
        align-items: center;
    }

}
#gutter-toggle {
    z-index: 2000;
}
#gutter a {
    color: var(--cloud-comfort);
}
.gutter-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-content: center;
}

#gutter-icon {
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: clamp(2rem, 1.5rem + 1vw, 2rem);
    width: clamp(3rem, 2.5rem + 1vw, 4rem);
    height: clamp(3rem, 2.5rem + 1vw, 4rem);
    padding: clamp(0.5rem, 0.3rem + 0.5vw, 1rem);

    background-color: var(--barnwood-rustic);
    color: var(--linen-calming);
    border-radius: 50% 40% 58% 44%;
    transition: background-color 0.5s ease-in-out;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
#gutter-toggle > a {
    text-decoration: none;
}
#top-logo-container {
    z-index: 2001;
    right: 0;
}
#top-logo {
    background-color: var(--barnwood-rustic);
    color: var(--linen-calming);
    border-radius: 50% 40% 58% 44%;
    padding: 0.5rem;
    align-items: center;
    width: 3rem;
    height: 3rem;
}

#gutter-icon:hover {
    background-color: var(--linen-calming);
    color: var(--moms-care);
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.25);
}

#gutter-icon.shown {
    background-color: var(--linen-calming);
    color: var(--moms-care);
}


/* Carousel */
.carousel .carousel-item {
    transition: transform 2s ease-in-out;
}

/*.error-notifications {*/
/*    width: 80vw;*/
/*}*/

/* this is attached to the top of the screen, rounded borders just looks a little funky */
.error-notifications > .carousel-item {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.btn-outline-lightest {
    border-color: var(--linen-calming);
    background: var(--stem-organic);
    color: var(--linen-calming);
    transition: 0.3s ease-in-out;
}

.btn-outline-lightest:hover {
    background-color: var(--sage-wellness);
    color: var(--linen-calming);
}

.btn-outline-darkest {
    border-color: var(--barnwood-rustic);
    background: var(--soil-earth);
    color: var(--barnwood-rustic);
    transition: 0.3s ease-in-out;
}

.btn-outline-darkest:hover {
    background-color: var(--moms-care);
    color: var(--barnwood-rustic);
}

.alert-danger {
    background-color: var(--barn-spot);
    border-color: var(--barn-spot);
    color: var(--barnwood-rustic);
}

.alert-info {
    background-color: var(--cloud-comfort);
    border-color: var(--cloud-comfort);
    color: var(--cottage-cory)
}

.alert-warning {
    background-color: var(--sunshine-smiles);
    border-color: var(--sunshine-smiles);
    color: var(--textile-family);
}

.alert-success {
    background-color: var(--sage-wellness);
    border-color: var(--sage-wellness);
    color: var(--stem-organic);
}

/* scrollbar */
/* For Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 8px;              /* make it slim */
    height: 8px;             /* for horizontal scroll */
}

::-webkit-scrollbar-track {
    background: transparent; /* or a subtle color */
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3); /* modern translucent thumb */
    border-radius: 4px;
    border: 2px solid transparent;        /* adds spacing inside track */
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5); /* darker on hover */
}

/* For Firefox */
* {
    scrollbar-width: thin;               /* slim look */
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent; /* thumb and track colors */
}

.cursor-pointer {
    cursor: pointer;
}

.toast-container {
    z-index: 2001;
}
/* Full-width on phones, keep corners square; add safe-area padding for iOS */
@media (max-width: 575.98px) {
    .toast-container { padding-top: env(safe-area-inset-top, 0); }
    #team-layout-toast { width: 100vw; border-radius: 0; }
}
/* Optional: cap width on larger screens */
@media (min-width: 576px) {
    #team-layout-toast { max-width: 420px; }
}

.form-text {
    font-size: 1.25rem;
    margin-top: 0.25rem;
    color: var(--bs-secondary-color);
    line-height: 1.1rem;
}