/*  ==========================================================================
Lead Text
==========================================================================  */

.lead {
    font-size: var(--font-size-lead);
    font-weight: 100;
    line-height: var(--line-height-lead);
    letter-spacing: var(--letter-spacing-lead);
    margin-bottom: 0.5rem;
}

/*  ==========================================================================
HR Divider
==========================================================================  */

.hr-silver {
	background-color: var(--neutral-silver, #CAD2D8);
}

.hr-teal {
    background-color: var(--accent-teal, #009374);
}

.hr-apple {
    background-color: var(--accent-apple, #9CCB3B);
}

.hr-medium {
    height: var(--hr-medium-weight, 0.1875rem);
}

.hr-heavy {
    height: var(--hr-heavy-weight, 0.313rem);
}

/*  ==========================================================================
Link List (Bordered, Square Arrow, and Chevrons)
==========================================================================  */

.link-list {
    list-style: none;
	width: fit-content;
}

.link-list li {
    position: relative;
    padding-left: 1rem;
    margin: 0.5rem 0;
    font-size: 1rem;
}

.link-list a {
    font-weight: 400;
    transition: transform 0.3s ease;
    padding: 0 0.75rem;
	display: block;
}

.bordered-list {
    border-left-style: solid;
    border-left-width: 0.313rem;
}

.square-arrow-list a::before,
.chevrons-list a::before {
    content: '';
    position: absolute;
    left: -0.25rem;
    top: 0.65rem;
    transform: translateY(-50%);
    width: 1rem;
    height: 1.1rem;
    overflow: hidden;
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    transition: transform 0.3s ease;
}

.square-arrow-list a::before {
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M448 96c0-35.3-28.7-64-64-64L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320zM377 273L265 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L88 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l214.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L377 239c9.4 9.4 9.4 24.6 0 33.9z"/></svg>');
}

.chevrons-list a::before {
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M278.6 278.6L301.3 256l-22.6-22.6-192-192L64 18.7 18.7 64 41.4 86.6 210.7 256 41.4 425.4 18.7 448 64 493.3l22.6-22.6 192-192zm192 0L493.3 256l-22.6-22.6-192-192L256 18.7 210.7 64l22.6 22.6L402.7 256 233.4 425.4 210.7 448 256 493.3l22.6-22.6 192-192z"/></svg>');
}

.square-arrow-list a:hover::before,
.chevrons-list a:hover::before,
.square-arrow-list a:focus::before,
.chevrons-list a:focus::before{
    transform: translate(0.25rem, -50%);
}

/* Link List Colors */

.bordered-list_apple {
    border-left-color: var(--accent-apple);
}

.bordered-list_teal {
    border-left-color: var(--accent-teal);
}

.square-arrow-list_apple a::before,
.chevrons-list_apple a::before {
    background-color: var(--accent-apple);
}

.square-arrow-list_teal a::before,
.chevrons-list_teal a::before {
    background-color: var(--accent-teal);
}


/*  ==========================================================================
Buttons
==========================================================================  */
.button-group {
    list-style: none;
    margin: 0;
}

.button {
    font-size: var(--font-size-button);
    letter-spacing: var(--letter-spacing-button);
    line-height: normal;
    padding: 0.75rem 1.5rem;
    border: 1px var(--primary-usf-green) solid;
    border-radius: 0.25rem;
    margin-right: 8px;
    font-weight: 600;
    transition: background-color 0.3s ease;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    text-align: center;
}

.button-group__item {
	margin: 0;
}

.button-group .button {
    margin-top: 1.5em;
}

.button-group__item:last-child .button,
.button:not(.button-group__item .button) {
  margin-right: 0;
}

@media (min-width: 577px) {
    .button-group__item {
        display: inline-block;
    }

    .button {
        width: fit-content;
        text-align: left;
    }
}

/* To match height with other buttons in the button-group */
.button--primary,
.button--primary:visited {
    background-color: var(--primary-usf-green);
    color: var(--text-light);
}

.button--secondary,
.button--secondary:visited {
    background-color: var(--transparent);
    color: var(--primary-usf-green);
}

.button--ghost,
.button--ghost:visited {
    background-color: var(--transparent);
    color: var(--primary-usf-green);
}

.button--disabled {
    background-color: var(--neutral-silver);
    color: var(--neutral-slate);
    cursor: not-allowed;
    pointer-events: none;
}

.button--icon .u-icon {
    margin-left: 0.5rem;
    color: var(--accent-apple);
    transition: transform 0.3s ease;
}

.button--secondary.button--icon .u-icon {
    color: var(--accent-teal);
}

.button--icon:hover .u-icon,
.button--icon:focus .u-icon {
    color: var(--text-dark);
    transform: translate(0.25rem, 0%);
}

/* Button States */
.button--primary:hover,
.button--primary:focus,
.button--secondary:hover,
.button--secondary:focus,
.button--ghost:hover,
.button--ghost:focus {
    background-color: var(--primary-gold);
    color: var(--text-dark);
    text-decoration: none;
}

.button:focus {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 3px 5px var(--accent-sky);
}

.button:active {
    background-color: var(--secondary-evergreen);
    color: var(--text-light);
}