/* Add your custom styles below. */
/* set site wide variables */
:root {
    --ah-border-radius: 4px;
    --ah-white: #F7F3E9;
    --ah-blue: #0F2147;
    --ah-red: #BB281E;
}

ul.wp-block-navigation__container li a{
    font-weight: 500;
}


/* ========================================
   DONATE CTA
   ======================================== */

.wp-block-navigation .cta-donate a.wp-block-navigation-item__content {
    position: relative;
    background: var(--ah-red);
    color: #fff;
    border: 2px solid var(--ah-red);
    padding: 0.3em 0.5em 0.2em 2.3em !important;
    border-radius: var(--ah-border-radius);
}

.wp-block-navigation .cta-donate a.wp-block-navigation-item__content:hover {
    opacity: 0.8;
    text-decoration: none;
}


/* Donate heart icon */
.wp-block-navigation .cta-donate a.wp-block-navigation-item__content::before {
    content: "";
    position: absolute;
    left: 0.45em;
    top: 50%;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    transform: translateY(-50%);

    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/></svg>');

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: contain;
    mask-size: contain;
}


/* ========================================
   REFER CTA
   ======================================== */

.wp-block-navigation .cta-refer a.wp-block-navigation-item__content {
    background: transparent;
    color: var(--ah-blue);
    border: 2px solid var(--ah-blue);
    padding: 0.3em 0.5em 0.2em !important;
    border-radius: var(--ah-border-radius);
}

.wp-block-navigation .cta-refer a.wp-block-navigation-item__content:hover {
    background: var(--ah-blue);
    color: #fff;
    text-decoration: none;
}


/* Sticky header */
header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 100;

    background: var(--ah-white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* When the WordPress admin bar is visible */
body.admin-bar header.wp-block-template-part {
    top: 32px;
}


/* WordPress admin bar height on smaller screens */
@media screen and (max-width: 782px) {
    body.admin-bar header.wp-block-template-part {
        top: 46px;
    }
}