/**
 * Baja Angels of the Sea
 * New Website Design
 *
 * All redesign styles must stay inside .ba-site
 * so they cannot affect the current live website.
 */

/* =========================================================
   REDESIGN ROOT / BRAND VARIABLES
   ========================================================= */

.ba-site {
    box-sizing: border-box;

    --ba-navy: #071820;
    --ba-deep-teal: #03313b;
    --ba-cyan: #16c4df;
    --ba-yellow: #efc94c;
    --ba-white: #ffffff;

    font-family: "Outfit", sans-serif;
    font-weight: 400;
    color: var(--ba-white);
}

.ba-site *,
.ba-site *::before,
.ba-site *::after {
    box-sizing: inherit;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.ba-site h1,
.ba-site h2,
.ba-site h3,
.ba-site h4,
.ba-site h5,
.ba-site h6 {
    margin: 0;
    font-family: "Unbounded", sans-serif;
    font-weight: 500;
    line-height: 1.1;
}

.ba-site p {
    margin: 0;
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    line-height: 1.6;
}

.ba-site .ba-font-playful {
    font-family: "Paytone One", sans-serif;
    font-weight: 400;
}

.ba-site a,
.ba-site button,
.ba-site input,
.ba-site select,
.ba-site textarea {
    font-family: "Outfit", sans-serif;
}

.ba-site button,
.ba-site .ba-button,
.ba-site input[type="submit"],
.ba-site input[type="button"] {
    font-weight: 400;
}


/* =========================================================
   HEADER
   ========================================================= */

.ba-site .ba-header {
    width: 100%;
    background: #0d1117;
    position: relative;
    z-index: 100;
}

.ba-site .ba-header__inner {
    width: min(100% - 40px, 1400px);
    margin: 0 auto;
    min-height: 125px;

    display: flex;
    align-items: center;
    gap: 32px;

    position: relative;
}

.ba-site .ba-header__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;

    position: relative;
    z-index: 2;
}

.ba-site .ba-header__logo-image {
    display: block;

    width: auto;
    height: 165px;
    max-width: 320px;

    object-fit: contain;

    margin-top: -18px;
    margin-bottom: -18px;
}

.ba-site .ba-header__nav {
    flex: 1;
}

.ba-site .ba-header__menu {
    list-style: none;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.ba-site .ba-header__menu li {
    margin: 0;
    padding: 0;
}

.ba-site .ba-header__menu a {
    color: var(--ba-white);

    text-decoration: none;

    font-size: 15px;
    font-weight: 400;
}

.ba-site .ba-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;

    flex-shrink: 0;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.ba-site .ba-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 0 22px;

    text-decoration: none;

    border-radius: 6px;

    font-weight: 400;
    line-height: 1;
}

.ba-site .ba-button--secondary {
    background: #39b5cf;
    color: var(--ba-navy);
}

.ba-site .ba-button--donate {
    background: var(--ba-yellow);
    color: var(--ba-navy);
}

.ba-site .ba-button--outline {
    border: 2px solid var(--ba-cyan);

    background: transparent;
    color: var(--ba-white);
}

.ba-site .ba-button--outline:hover {
    background: var(--ba-cyan);
    color: var(--ba-navy);
}


/* =========================================================
   HERO
   ========================================================= */

.ba-site .ba-hero {
    position: relative;

    width: 100%;
    min-height: 620px;

    overflow: hidden;

    background: var(--ba-navy);
    color: var(--ba-white);
}

.ba-site .ba-hero__slides {
    position: relative;

    min-height: 620px;
}

.ba-site .ba-hero__slide {
    display: none;

    position: absolute;
    inset: 0;

    min-height: 620px;

    background-size: cover;
    background-position: 72% center;
    background-repeat: no-repeat;
}

.ba-site .ba-hero__slide--active {
    display: flex;
    align-items: center;
}


/* =========================================================
   SLIDE-SPECIFIC IMAGE POSITIONING
   ========================================================= */

.ba-site .ba-hero__slide--two {
    background-position: 72% center;
}

.ba-site .ba-hero__slide--three {
    background-position: 72% center;
}

.ba-site .ba-hero__slide--four {
    background-position: 72% center;
}

/* =========================================================
   HERO OVERLAY
   ========================================================= */

.ba-site .ba-hero__overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(3, 49, 59, 0.98) 0%,
        rgba(4, 58, 68, 0.94) 22%,
        rgba(5, 69, 79, 0.72) 36%,
        rgba(6, 84, 94, 0.30) 48%,
        rgba(6, 92, 103, 0.08) 56%,
        rgba(6, 92, 103, 0) 63%
    );

    z-index: 1;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.ba-site .ba-hero__content {
    position: relative;
    z-index: 2;

    width: min(100% - 80px, 1400px);
    margin: 0 auto;

    padding-top: 50px;
    padding-bottom: 80px;
}


/* =========================================================
   HERO EYEBROW
   ========================================================= */

.ba-site .ba-hero__eyebrow {
    margin-bottom: 18px;

    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;

    letter-spacing: 0.22em;
    text-transform: uppercase;

    color: var(--ba-cyan);
}


/* =========================================================
   HERO TITLE
   All hero title lines use Unbounded.
   ========================================================= */

.ba-site .ba-hero__title {
    max-width: 700px;

    margin-bottom: 22px;

    line-height: 0.9;
    letter-spacing: -0.03em;
}

.ba-site .ba-hero__title-main,
.ba-site .ba-hero__title-accent,
.ba-site .ba-hero__title-yellow {
    display: block;

    font-family: "Unbounded", sans-serif;
}

/* White hero title line */
.ba-site .ba-hero__title-main {
    font-size: clamp(48px, 6.4vw, 74px);
    font-weight: 500;
    line-height: 0.9;

    color: var(--ba-white);
}

/* Cyan hero title line */
.ba-site .ba-hero__title-accent {
    margin-top: 6px;

    font-size: clamp(54px, 5.4vw, 82px);
    font-weight: 700;
    line-height: 0.86;

    color: var(--ba-cyan);
}

/* Yellow hero title line */
.ba-site .ba-hero__title-yellow {
    margin-top: 6px;

    font-size: clamp(54px, 5.4vw, 82px);
    font-weight: 700;
    line-height: 0.86;

    color: var(--ba-yellow);
}


/* =========================================================
   HERO TEXT
   ========================================================= */

.ba-site .ba-hero__text {
    max-width: 480px;

    margin-bottom: 28px;

    font-family: "Outfit", sans-serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.45;

    color: rgba(255, 255, 255, 0.92);
}


/* =========================================================
   HERO ACTIONS
   ========================================================= */

.ba-site .ba-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.ba-site .ba-hero__actions .ba-button {
    min-height: 48px;

    padding: 0 28px;

    border-radius: 6px;

    font-family: "Outfit", sans-serif;
    font-size: 15px;
    font-weight: 400;
}


/* =========================================================
   HERO CAROUSEL CONTROLS
   ========================================================= */

.ba-site .ba-hero__controls {
    position: absolute;

    left: max(40px, calc((100% - 1400px) / 2));
    bottom: 34px;

    z-index: 5;

    display: flex;
    align-items: center;
    gap: 10px;
}

.ba-site .ba-hero__dot {
    width: 10px;
    height: 10px;

    min-width: 10px;
    min-height: 10px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.35);

    cursor: pointer;
}

.ba-site .ba-hero__dot--active {
    background: var(--ba-yellow);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .ba-site .ba-hero__slide {
        background-position: 64% center;
    }

   .ba-site .ba-hero__slide--two {
    background-position: 70% center;
}

.ba-site .ba-hero__slide--three {
    background-position: 68% center;
}

.ba-site .ba-hero__slide--four {
    background-position: 68% center;
}

    .ba-site .ba-hero__overlay {
        background: linear-gradient(
            90deg,
            rgba(3, 49, 59, 0.97) 0%,
            rgba(4, 58, 68, 0.90) 26%,
            rgba(5, 69, 79, 0.58) 46%,
            rgba(6, 84, 94, 0.24) 62%,
            rgba(6, 92, 103, 0.06) 74%,
            rgba(6, 92, 103, 0) 82%
        );
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .ba-site .ba-hero,
    .ba-site .ba-hero__slides,
    .ba-site .ba-hero__slide {
        min-height: 560px;
    }

    .ba-site .ba-hero__slide {
        background-position: 58% center;
    }

    /*
     * Slide 2 has the group of children on the right,
     * so keep the crop farther right than Slide 1.
     */
  .ba-site .ba-hero__slide--two {
    background-position: 72% center;
}

.ba-site .ba-hero__slide--three {
    background-position: 64% center;
}

.ba-site .ba-hero__slide--four {
    background-position: 68% center;
}

    .ba-site .ba-hero__overlay {
        background: linear-gradient(
            90deg,
            rgba(3, 49, 59, 0.95) 0%,
            rgba(4, 58, 68, 0.82) 32%,
            rgba(5, 69, 79, 0.50) 58%,
            rgba(6, 84, 94, 0.18) 78%,
            rgba(6, 92, 103, 0.04) 92%,
            rgba(6, 92, 103, 0) 100%
        );
    }

    .ba-site .ba-hero__content {
        width: calc(100% - 36px);

        padding-top: 54px;
        padding-bottom: 88px;
    }

    .ba-site .ba-hero__eyebrow {
        font-size: 11px;

        letter-spacing: 0.18em;
    }

    .ba-site .ba-hero__title {
        max-width: 100%;

        margin-bottom: 20px;
    }

    .ba-site .ba-hero__title-main {
        font-size: clamp(36px, 10vw, 50px);
        font-weight: 500;
        line-height: 0.9;
    }

    .ba-site .ba-hero__title-accent,
    .ba-site .ba-hero__title-yellow {
        font-size: clamp(40px, 11vw, 56px);
        font-weight: 700;
        line-height: 0.86;
    }

    .ba-site .ba-hero__text {
        max-width: 360px;

        font-size: 17px;
        line-height: 1.45;
    }

    .ba-site .ba-hero__actions {
        gap: 12px;
    }

    .ba-site .ba-hero__actions .ba-button {
        min-height: 46px;

        padding: 0 22px;

        font-size: 14px;
        font-weight: 400;
    }

    .ba-site .ba-hero__controls {
        left: 18px;
        bottom: 28px;
    }

}