/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* TOKENS: */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */

:root {
    /* brand colors (matched to kvymca.org) */
    --purple-dk: #512881; /* header top bar, dropdown backgrounds */
    --purple: #5c2e91; /* header background, sub-menu backgrounds */
    --magenta: #912d8e; /* button hover, accents */
    --lavender: #c2b3d4; /* menu links on purple */
    --blue-lt: #4fb6e6; /* main buttons */

    /* neutrals */
    --white: #ffffff;
    --black: #000000;
    --gray: #555555; /* body text */

    /* border radius */
    --radius-sm: 3px;
    --radius-md: 8px;

    /* box shadows */
    --shadow-md: 0 0 4px 4px #00000026;
    --shadow-dropdown: 0 2px 6px #00000033;

    /* fonts */
    --font-body: Verdana, Helvetica, Arial, sans-serif;

    /* containers */
    --container-max: 1400px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* RESETS: */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

/*remove default list styling on nav lists*/
nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* TYPOGRAPHY: */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* body */

body {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray);
}

a {
    color: var(--purple);
    transition: color 0.2s ease;
}
a:hover {
    color: var(--magenta);
}

/* headings */

h1,
.h1 {
    font-family: var(--font-body);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--purple);
}
h2,
.h2 {
    font-family: var(--font-body);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--purple);
}
h3,
.h3 {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--purple);
}
h4,
.h4 {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--purple);
}

/* utility text */

/*uppercase nav links: menus, dropdown items*/
.nav-text {
    font-family: var(--font-body);
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 1px;
}

/*small bold uppercase labels: "Follow Us", phone number*/
.label-text {
    font-family: var(--font-body);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 1px;
}

/*small print: footer copy, copyright*/
.small-text {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* LAYOUT: */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

section {
    padding: 36px 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* BUTTONS: */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.btn {
    /* position & display */
    display: inline-block;

    /* spacing */
    padding: 5px 10px;

    /* container */
    border: 0;
    border-radius: var(--radius-md);

    /* font */
    font-family: var(--font-body);
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;

    /* interactives */
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

/*light blue: ACF button style "btn--blue-lt"*/
.btn.btn--blue-lt {
    background-color: var(--blue-lt);
    color: var(--white);
}
.btn.btn--blue-lt:hover,
.btn.btn--blue-lt:focus-visible {
    background-color: var(--magenta);
    color: var(--white);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ICONS: */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/*get_icon() output: icons take the text color of their parent*/
.icon {
    display: inline-flex;
    width: 1em;
    height: 1em;
}
.icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

@media (max-width: 576px) {
    /* typography */

    h1,
    .h1 {
        font-size: 30px;
    }
    h2,
    .h2 {
        font-size: 24px;
    }

    /* buttons */

    .btn {
        font-size: 16px;
    }
}