/**
 * Variables and shorthands
 */
:root {
    /* Banner backgrounds */
    /* --ap-color-mint: #CFFFD6; */
    --ap-color-mint: rgb(207,235,231);
    --ap-color-robin: #BCE2FE;
    /* --ap-color-peach: #F8D7C6; */
    --ap-color-peach: rgb(224,220,238);
    --ap-color-golddust: #FCEBE1;

    /* Elements */
    --ap-color-navy: #2B5BA6;
    --ap-color-cyan: #3C89F7;
    --ap-color-teal: #21A9A1;
    --ap-color-purple: #8278B5;
    --ap-color-orange: #FFAC42;
    --ap-color-pink: #D26EA2;

    --ap-color-teal20: rgb(211,238,236);
    --ap-color-purple20: rgb(230,228,240);

    /* RGB Substitute Values */
    --ap-rgb-teal: 33, 169, 161;
    --ap-rgb-pink: 210, 110, 162;

    /* Grays */
    --ap-color-black: #4B4B4B;
    --ap-color-shadow: #E4E4E4;
    --ap-color-dove: #D9D9D9;
    --ap-color-white: #FFFFFF;

    /* Fonts */
    --ap-font-title: 'Luckiest Guy', cursive;
    --ap-font-copy: 'Fredoka', sans-serif;

    /* Layout */
    --ap-app-width: 1200px;

    /* Custom Transitions */
    /* --transition-ease-snap: cubic-bezier(.95,.51,.97,.77); */
    /* --transition-ease-snap: cubic-bezier(.12,.81,.8,.19); */
    --transition-ease-snap: cubic-bezier(.52,1.73,.69,-0.93);
}

.bg-color-mint {
    background-color: var(--ap-color-mint) !important;
}
.bg-color-robin {
    background-color: var(--ap-color-robin) !important;
}
.bg-color-peach {
    background-color: var(--ap-color-peach) !important;
}
.bg-color-navy {
    background-color: var(--ap-color-navy) !important;
}
.bg-color-teal {
    background-color: var(--ap-color-teal) !important;
}
.bg-color-purple {
    background-color: var(--ap-color-purple) !important;
}
.bg-color-orange {
    background-color: var(--ap-color-orange) !important;
}
.bg-color-pink {
    background-color: var(--ap-color-pink) !important;
}
.bg-color-black {
    background-color: var(--ap-color-black) !important;
}
.bg-color-dove {
    background-color: var(--ap-color-dove) !important;
}
.bg-color-shadow {
    background-color: var(--ap-color-shadow) !important;
}


/**
 * Global elements
 */
body {
    font-size: 16px;
}

footer {
    text-align: center;
    margin-top: 1em;
    clear: both;
}

h2.page-title {
    margin: 0.5em 0;
}

div.env-callout,
div.promo-callout {
    text-align: center;
    padding: 0.5em;
    font-size: 1em;
    color: var(--ap-color-white);
    background-color: var(--bs-cyan);
}
div.promo-callout {
    background-color: var(--ap-color-pink);
}

/**
 * Modals
 */
div.modal-content {
    background-color: var(--ap-color-white);
    color: var(--ap-color-black);
    border-radius: 1.25em;
    border: none;
    padding: 1em;
    position: relative;
    margin-right: 0.5em;
    margin-left: 0.5em;
}
div.modal-content button.btn-close {
    position: absolute;
    width: 0.5em;
    height: 0.5em;
    top: -0.25em;
    right: -0.25em;
    background: var(--ap-color-navy) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.75em auto no-repeat;
    border-radius: 50%;
    border: 0.125em solid var(--ap-color-white);
    color: var(--ap-color-white);
    padding: 0.5em;
    opacity: 1;
}
div.modal-content button.btn-close:hover {
    color: var(--ap-color-white);
}
div.modal-content .modal-header {
    border: none;
    margin: 0 0 0.833em 0;
    padding: 1em;
    align-items: start;
    border-radius: 0.75em;
    color: var(--ap-color-white);
    background-color: var(--ap-color-shadow);
    justify-content: center;
    align-items: center;
}
div.modal-content .modal-header .modal-title {
    font-family: var(--ap-font-title);
    color: var(--ap-color-white);
    font-size: 2em;
    line-height: 1;
    margin-bottom: -0.25em;
    text-align: center;
}

div.modal-content .modal-body {
    font-size: 0.75em;
    line-height: 1;
    padding: 0;
}
div.modal-content .modal-body .scrolly-content {
    height: 50vh;
    overflow-y: scroll;
    margin: 0 -0.5em 0-1.5em;
    padding: 0 0.5em 0 1.5em;
}
div.modal-content .modal-body .scrolly-content .inner-content{
    background-color: rgba(255,255,255,0.5);
}

div.modal-content .modal-body .pills-container {
    margin: 1.25em 0 0.75em 0;
}
div.modal-content .modal-body .pills-container .pill {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 1em;
    padding: 0.5em 1.5em;
    cursor: pointer;
}
div.modal-content .modal-body .pills-container .pill-selected {
    background-color: var(--ap-color-black);
    color: var(--ap-color-white);
}

div.modal-content .modal-body .errors {
    font-size: 1em;
    color: var(--ap-color-pink);
    background-color: rgba(var(--ap-rgb-pink), 0.1);
    border-color: var(--ap-color-pink);
}

div.modal-content .modal-body .actions-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1em;
}
div.modal-content .modal-body .actions-container .action {
    display: inline-block;
    border: 1px solid var(--ap-color-black);
    border-radius: 1.5em;
    padding: 0.5em 1.5em;
    cursor: pointer;
    transition: all 300ms;
}
div.modal-content .modal-body .actions-container .action:hover {
    background-color: rgba(0,0,0,0.1);
}
div.modal-content .modal-footer {
    padding: 0;
    border-top: none;
}
div.modal-content .modal-footer button {
    margin: 0;
}

/**
 * Layout
 */
h1.layout_title {  }
h1.layout_title a { text-decoration:none; font-weight:bold; }

h1, h2, h3, h4, h5 {
    font-family: var(--ap-font-title);
    color: var(--ap-color-navy);
}
/** Hack for alt heading fonts **/
h1.context, h2.context, h3.context, h4.context, h5.context {
    font-family: var(--ap-font-copy);
}

#middle_container { }
#content-container { }
#content-container.view-type-entry { text-align: center; }
#content-container.view-type-entry #content { text-align: left; margin: auto; max-width: 400px; }

body.admin #content {
    /* nav tray horizontal - multiplier must be same as .nav-tray-container font-size */
    padding-top: 2.8125em;
}

/** Overrides for banding **/
div#content-container {
    padding: 0;
}
.full-width-container { }
.site-width-container {
    text-align: center;
}
.site-width-container .content {
    text-align: left;
    margin: auto;
    max-width: var(--ap-app-width);
}

/**
 * Form layout
 */
div.form-row { }
div.button-row { margin-left:208px; }
div.button-row { margin-top:1.5em; text-align:right; overflow:auto; }
div.button-row.form-row { margin-top:0; margin-bottom:1.5em; }
div.button-row .btn-default { float:left; }

/**
 * Controls
 */
a.subtle { color:#999; font-size:0.8em; text-decoration:none; }
a.subtle:hover { text-decoration:underline; }
input[type=date], input[type=month] { -webkit-appearance:none; }

.btn {
    border-radius: 1.5em;
    padding: 0.5em 1.25em;
    font-size: 1em;
}
.btn.btn-success,
.btn.btn-primary {
    background-color: var(--ap-color-teal);
    border-color: var(--ap-color-teal);
    transition: all 200ms;
}
.btn.btn-success:hover,
.btn.btn-primary:hover {
    background-color: rgba(var(--ap-rgb-teal), 0.8);
}
.btn.btn-danger {
    background-color: var(--ap-color-pink);
    border-color: var(--ap-color-pink);
    transition: all 200ms;
}
.btn.btn-danger:hover {
    background-color: rgba(var(--ap-rgb-pink), 0.8);
}

div.pills {
    padding: 1.25em 0;
    display: flex;
}
div.pills .pill-group {
    text-align: center;
    font-size: 0.75em;
}
div.pills .pill-group:last-child {
    margin-left: 1em;
}
div.pills .pill-group h3 {
    font-family: var(--ap-font-copy);
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 0.5em;
}
div.pills .pill-group .group-rule {
    display: none;
    height: 0.5em;
    overflow: hidden;
    border: 2px solid var(--ap-color-purple);
    border-bottom: none;
    margin: 0.25em 2em 0.75em;
}
div.pills .pill-group .pill-items {
    display: flex;
    flex-wrap: wrap;
}
div.pills .pill {
    flex: 0 0 100%;
    padding: 0.5em 1.5em;
    border-radius: 1.5em;
    color: var(--ap-color-black);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 1em;
    line-height: 1;
}
div.pills .pill:hover {
    background-color: var(--ap-color-black);
    color: var(--ap-color-white);
}
div.pills .pill.pill-selected {
    background-color: var(--ap-color-black);
    border-color: var(--ap-color-black);
    color: var(--ap-color-white);
    margin: 0;
}
div.pills .pill:first-of-type {
    margin-left: 0;
}
div.pills .pill:last-child {
    margin-right: 0;
}


/**
 * Utilities
tr.header_row th { background-color:#444; color:#FFF; padding:5px; }
tr.zebra_even td { background-color:#FFFFFF; }
tr.zebra_odd td { background-color:#EEEEEE; }
 */
.hidden { display:none !important; }
.clearfix:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
div.errors { padding: 1em; border: 4px solid red; background-color:#FFEFEF; border-radius: 0.5em; color: red; }
div.errors p { margin:0; }

/**
 * Bootstrap Overrides
 */
:root {
    --bs-font-sans-serif: 'Fredoka', sans-serif;
    --bs-font-sans-serif-alt: 'Fredoka', sans-serif;
    --bs-body-font-size: 16px;

    --bs-danger: var(--ap-color-pink);
    --bs-warning: var(--ap-color-gold);
    --bs-success: var(--ap-color-teal);

    --awesome-white: #FFFFFF;
    --awesome-light-blue: #E1EFFC;
    --awesome-dark-blue: #0C58B0;

    --site-width: 850px;
}
.form-control {
    font-size: 1em; /* 1rem isn't happy when containers are adjusted */
}

/**
 * ------------------------------------------------
 *                  RESETS
 * ------------------------------------------------
 */
html {
    width: 100%;
}
body {
    width: 100%;
    z-index: 1;
}

/**
 * ------------------------------------------------
 *           SHARED STUFF
 * ------------------------------------------------
 */

/**
 * Banners
 */
.banner-theme-default .banner-content,
.banner-theme-peach .banner-content {
    background-color: var(--ap-color-peach);
}
.banner-theme-mint .banner-content {
    background-color: var(--ap-color-mint);
}
.banner-theme-robin .banner-content {
    background-color: var(--ap-color-robin);
}
.banner-theme-reef .banner-content {
    background: no-repeat bottom right/contain url(/img/illustrations/ocean-reef.png) var(--ap-color-robin);
}
.banner-theme-jungle .banner-content {
    background: no-repeat bottom right/contain url(/img/illustrations/jungle-foliage.png) var(--ap-color-mint);
}

/* FIXME: This can go away with a grep and a replace */
.story-theme-default,
.story-theme-peach {
    background-color: var(--ap-color-peach);
}
.story-theme-mint {
    background-color: var(--ap-color-mint);
}
.story-theme-robin {
    background-color: var(--ap-color-robin);
}
.story-theme-reef {
    background: no-repeat bottom right/contain url(/img/illustrations/ocean-reef.png) var(--ap-color-robin);
}
.story-theme-jungle {
    background: no-repeat bottom right/contain url(/img/illustrations/jungle-foliage.png) var(--ap-color-mint);
}

/**
 * Behaviors
 */
.awards .date-divider,
.behaviors .date-divider {
    margin: 2em 0 0.75em 1.5em;
    font-weight: bold;
}
.awards .date-divider:first-child,
.behaviors .date-divider:first-child {
    margin-top: 0.5em;
}
.one-behavior {
    position: relative;
    color: var(--ap-color-black);
    /*
    margin-bottom: 1.167em;
    */
    margin-bottom: 1em;
    cursor: pointer;
    z-index: 1;
    /* Hacking font size on xs - spec says 16px, but it's too tight */
    font-size: 0.75em;
}
.one-behavior .shadow-container {
    position: absolute;
    border-radius: 0 0 1.25em 1.25em;
    background: var(--ap-color-shadow);
    z-index: 1;
    bottom: -0.417em;
    left: 0;
    height: 3em;
    width: 100%
}
.one-behavior .content-container {
    position: relative;
    display: flex;
    border-radius: 1.25em;
    border: 2px solid var(--ap-color-shadow);
    background-color: var(--ap-color-white);
    /*
    padding: 0.667em 1em;
    */
    /* Design spec on mobile: 430px wide */
    padding: 1em 1.25em;
    z-index: 5;
    align-items: center;
}
.one-behavior .content-container .icon-container {
    display: flex;
    align-items: center;
    margin-right: 1em;
}
.one-behavior .content-container .icon-container .icon-bg {
    flex: 0 0 auto;
    color: var(--ap-color-white);
    background-color: var(--bs-gray-400);
    border-radius: 1em;
    height: 3.125em;
    width: 3.125em;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}
.one-behavior .content-container .icon-container .icon-bg i {
    font-size: 1.667em;
}
.one-behavior .content-container .icon-container .icon-bg .badge {
    border-radius: 1em;
    border: 1px solid var(--ap-color-white);
    font-size: 0.75em;
    color: var(--ap-color-white);
    background-color: var(--ap-color-navy);
    position: absolute;
    top: -0.75em;
    right: -0.75em;
    line-height: 1;
}
.one-behavior .content-container .copy-container {
    display: inline-block;
    margin-right: 1em;
    font-size: 1.2em; /* Just a nudge on top of the 0.75 for the container */
}
.one-behavior .content-container .copy-container .behavior-name {
    /*
    font-weight: bold;
    font-size: 1.167em;
    */
    font-weight: 500; /* medium */
    line-height: 1;
}
.one-behavior .content-container .copy-container .behavior-description {
    font-size: 0.725em;
    font-weight: 300; /* light */
    line-height: 1.3;
    margin-top: 0.25em;
}
.one-behavior .content-container .points-container {
    display: flex;
    align-items: center;
    margin: 0 0 0 auto;
}
.one-behavior .content-container .points-container .point-value {
    font-size: 2em;
    font-family: var(--ap-font-title);
    line-height: 1;
    margin-top: 0.417em;
    margin-right: 0.0625em;
}
.one-behavior .content-container .actions-container {
    height: 1em;
    aspect-ratio: 1;
    margin-left: 1em;
    margin-right: 0.25em;
    color: var(--bs-gray-500);
}

/** Tiles **/
.gutter-tiles {
    padding: 1em 1em 0 1em;
}
.gutter-tiles .tile:first-child {
    margin-top: 0.75em;
}
.gutter-tiles .tile:last-child {
    margin-bottom: 0;
}
.gutter-tiles .tile {
    border-radius: 1.250em;
    background-color: var(--ap-color-dove);
    color: var(--ap-color-white);
    padding: 1em;
    text-align: center;
    width: 100%;
    margin-bottom: 1em;
}
.gutter-tiles .tile .main-row {
    display: flex;
    align-items: center;
    justify-content: center;
}
.gutter-tiles .tile .title {
    font-family: var(--ap-font-title);
    font-size: 2em;
    line-height: 1;
    margin-bottom: 0.125em;
}
.gutter-tiles .tile .subtitle {
    font-size: 2em;
    margin-bottom: 0.5em;
    line-height: 1;
}
.gutter-tiles .tile .action-row .action {
    border: 2px solid var(--ap-color-white);
    background-color: rgba(255,255,255,0.3);
    border-radius: 1.250em;
    cursor: pointer;
    transition: all 300ms;
}
.gutter-tiles .tile .action-row .action:hover {
    background-color: rgba(255,255,255,0.12);
}
.gutter-tiles .tile .action-row .action .caret {
    float: right;
}

.gutter-tiles .tile.award-notice {
    background-color: var(--ap-color-orange);
    position: relative;
    padding-top: 2.25em;
}
.gutter-tiles .tile.award-notice .notice-callout {
    position: absolute;
    top: -1.5em;
    left: calc(50% - 1.5em);
    background-color: var(--ap-color-navy);
    border-radius: 50%;
    width: 3em;
    height: 3em;
    border: 4px solid var(--ap-color-white);
}
.gutter-tiles .tile.award-notice .notice-callout i {
    font-size: 1.5em;
    line-height: 1.8;
}

.gutter-tiles .tile.flaunt-link {
    background-color: var(--ap-color-teal);
}
.gutter-tiles .tile.award-history {
    background-color: var(--ap-color-purple);
}
.gutter-tiles .tile.flaunt-link .main-row,
.gutter-tiles .tile.award-history .main-row {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0em 1em;
}
.gutter-tiles .tile.flaunt-link .main-row.wrapped,
.gutter-tiles .tile.award-history .main-row.wrapped {
    justify-content: center;
}

/**
 * ------------------------------------------------
 *                  MEDIA QUERIES
 * ------------------------------------------------
 */

/**
 * Bootstrap Breakpoints:
 * - xs < 576px
 * - s >= 576px
 * - m >= 768px
 * - l >= 992px
 * - xl >= 1200px
 **/

/**
 * xs - Mobile-first Portrait styling, no media query needed
 */
@media (min-width: 425px) {
    div.modal-content .modal-body {
        font-size: 1em;
    }
}

/**
 * s - Mobile Landscape
 */
@media (min-width: 576px) {
    .one-behavior {
        font-size: 1em;
    }
}

/**
 * m - Tablet Portrait
 */
@media (min-width: 768px) {
    body.admin #content {
        /* nav tray horizontal padding */
        padding-top: 3.6644em;
    }
}

/**
 * l - Tablet Landscape
 */
@media (min-width: 992px) {
    div.modal .modal-dialog {
        max-width: 600px;
    }
}

/**
 * xl - Desktop and up
 */
@media (min-width: 1200px) {
    body {
        font-size: 20px;
    }
    div.modal .modal-dialog {
        max-width: calc(var(--ap-app-width) * 0.667);
    }
}

/**
 * xxl - 4k Desktop and up
 */
@media (min-width: 1400px) {
    body {
        font-size: 24px;
    }
    .one-behavior .content-container .copy-container {
        font-size: 1em;
    }
}