:root {
    --white : #fff;
    --wellington-green : #004a33;
}

.simple-notice-bar {position: relative; max-width: 1200px;}
.simple-notice-bar .background-shapes {position: absolute; width: 100%; height: 100%; object-fit: cover;}
.simple-notice-bar * {color: var(--white);}
.simple-notice-bar__inner {display: flex; align-items: center; gap: 3rem; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; padding: 100px 80px 80px; background-image: url('/wp-content/themes/wellington-countrypark-2023/assets/graphics/background-pattern-simple-notice-bar.png'); background-color: var(--wellington-green); background-repeat: no-repeat; background-size: cover; background-position: center; -webkit-mask-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 20'%3E%3Cpath fill='white' d='M 1 2 Q 15 1.2 30 1.7 Q 50 2 70 1.7 Q 85 1.2 98 1.7 L 99 2 Q 99.5 6 99 10 Q 99.5 14 99 18 L 98.5 19 Q 83 19.5 70 19 Q 50 18.5 30 19 Q 15 19.5 2 19 L 1 18.5 Q 0.5 14 1 10 Q 0.5 6 1 2 Z'%3E%3C/path%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 20'%3E%3Cpath fill='white' d='M 1 2 Q 15 1.2 30 1.7 Q 50 2 70 1.7 Q 85 1.2 98 1.7 L 99 2 Q 99.5 6 99 10 Q 99.5 14 99 18 L 98.5 19 Q 83 19.5 70 19 Q 50 18.5 30 19 Q 15 19.5 2 19 L 1 18.5 Q 0.5 14 1 10 Q 0.5 6 1 2 Z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; align-items: flex-end;}
.simple-notice-bar__decoration.is-2 {left: -50px; top: -50px; z-index: -1; transform: rotate(180deg);}
.simple-notice-bar__text p {opacity: .85;}
.simple-notice-bar__text p:last-of-type {margin-bottom: 0;}
.simple-notice-bar__content {flex: 1 1 60%; min-width: 280px;}
.simple-notice-bar__content h2 {font-family: var(--font-display); font-size: 35px !important; text-shadow: 1px 1px 0 var(--wellington-gold), -1px -1px 0 var(--wellington-gold), 1px -1px 0 var(--wellington-gold), -1px 1px 0 var(--wellington-gold), 1px 1px 0 var(--wellington-gold); -webkit-text-fill-color: var(--white); -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--wellington-gold); margin-bottom: 15px; line-height: 2; max-width: clamp(100px, 70vw, 600px);}
.simple-notice-bar__text {max-width: 90%;}
.simple-notice-bar__action {flex: 0 0 auto;}
.simple-notice-bar__action .global-btn {white-space: nowrap;}
.simple-notice-bar__decoration {position: absolute; max-width: 160px;}

/* Accents Positions */
.simple-notice-bar__decoration.is-1 {left: -25px; top: -20px; z-index: 1;}
.simple-notice-bar__decoration.is-2 {right: -40px; bottom: -30px;}
.simple-notice-bar__decoration.is-3 {right: 0; top: 0; transform: translate(-10%, 40%); max-width: 375px; z-index: 1;}
.simple-notice-bar__decoration.is-4 {left: 20%; top: -40px;}

/* Responsive */

@media (max-width: 1200px) {
    .simple-notice-bar {padding: 0 50px;}
    .simple-notice-bar__inner {padding: 75px 50px 70px;}
    .simple-notice-bar__content h2 {font-size: 30px!important;}
    .simple-notice-bar__decoration.is-3 {max-width: 350px; transform: translateX(-20%);}
}

@media (max-width: 1050px) {
    .simple-notice-bar__decoration.is-3 {max-width: 350px; top: unset; bottom: 0; right: 0; transform: translate(-13%, -20%);}
    .simple-notice-bar__inner {gap: 2rem; flex-wrap: nowrap; flex-direction: column; align-items: flex-start;}
    .simple-notice-bar__content h2 {font-size: 28px!important;}
}

@media (max-width: 800px) {
    .simple-notice-bar__decoration.is-3 {max-width: 325px; top: 0; bottom: unset; right: 0;}
    .simple-notice-bar__decoration.is-2 {right: 0; left: unset; top: unset; bottom: 0; z-index: 1; max-width: 125px; transform: rotate(200deg) translate(75%, -35%);}
    .simple-notice-bar__decoration.is-1 {left: unset; top: unset; z-index: 2; right: 14%; bottom: 0; max-width: 125px;}
}

@media (max-width: 700px) {
    .simple-notice-bar__inner {flex-direction: column; align-items: flex-end; gap: 1.5rem;}
}

@media (max-width: 600px) {
    .simple-notice-bar {padding: 0 20px;}
    .simple-notice-bar__text {max-width: 100%;}
    .simple-notice-bar__content h2 {font-size: 24px !important; margin: 0 auto 20px;}
    .simple-notice-bar__inner {padding: 115px 25px; align-items: center; text-align: center;}
    .simple-notice-bar__decoration.is-3 {max-width: 300px;}
    .simple-notice-bar__decoration.is-2 {max-width: 100px;}
}