/* ==========================
   SUPER DOOBIE HEADER
========================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.comic-masthead {
    background: #efe2ae;
    border-bottom: 5px solid #111;
}

/* ==========================
   TOP INFO BAR
========================== */

.masthead-info-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    padding: 6px 22px;

    background: #2f6fa3;
    border-bottom: 5px solid #111;

    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(0.9rem, 1.4vw, 1.35rem);
}

.info-left,
.info-right {
    display: flex;
    align-items: center;
    gap: clamp(18px, 4vw, 70px);
}

.info-left {
    justify-content: center;
}

.info-right {
    justify-content: center;
}

.established-badge {
    background: #f6d13d;
    color: #111;

    padding: 8px 34px;

    border: 4px solid #111;
    box-shadow: 4px 4px 0 #111;

    white-space: nowrap;
}

/* ==========================
   MAIN HEADER ROW
========================== */

.masthead-main {
    display: grid;
    grid-template-columns: 190px 1fr 190px;
    align-items: center;
    gap: 24px;

    padding: 24px 32px 18px;

    background:
        radial-gradient(circle at center, rgba(255,255,255,0.35), transparent 48%),
        #fff0b8;
}

/* ==========================
   STILL FREE BURST
========================== */

.still-free-burst {
    --burst-color: #f6d13d;
    --burst-accent: #e5392f;
    --burst-paper: #fff7d6;
    --burst-shape: polygon(
        50% 0%, 56% 18%, 67% 3%, 70% 23%, 84% 9%,
        82% 30%, 100% 25%, 88% 43%, 100% 52%, 83% 59%,
        97% 76%, 77% 74%, 80% 95%, 63% 82%, 54% 100%,
        47% 82%, 32% 98%, 31% 78%, 12% 91%, 18% 69%,
        0% 71%, 13% 54%, 0% 43%, 18% 38%, 4% 20%,
        26% 25%, 22% 5%, 41% 19%
    );

    position: relative;

    width: 170px;
    height: 145px;

    display: grid;
    place-items: center;

    filter: drop-shadow(4px 4px 0 rgba(17, 17, 17, .95));
    transform: rotate(-4deg);
    isolation: isolate;
}

.still-free-burst::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background: #111;
    clip-path: var(--burst-shape);
}

.still-free-burst::after {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: 1;

    background:
        repeating-conic-gradient(
            from 3deg,
            var(--burst-color) 0deg 11deg,
            var(--burst-accent) 11deg 19deg,
            var(--burst-paper) 19deg 23deg
        );
    clip-path: var(--burst-shape);

    transition: background-color .45s ease;
}

.still-free-copy {
    position: relative;
    z-index: 3;

    display: grid;
    place-items: center;

    min-width: 112px;
    padding: 12px 14px 10px;

    background: var(--burst-paper);
    border: 4px solid #111;
    border-radius: 48% 52% 43% 57% / 56% 45% 55% 44%;
    box-shadow: 4px 4px 0 var(--burst-accent);

    line-height: .86;
    text-align: center;
    text-transform: uppercase;

    transform: rotate(-3deg) skewX(-5deg);
}

.still-free-copy small {
    display: block;

    color: #111;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.still-free-copy strong {
    display: block;

    color: var(--burst-color);
    font-size: 2rem;
    font-weight: 1000;
    letter-spacing: -.06em;

    text-shadow:
        -2px -2px 0 #111,
        2px -2px 0 #111,
        -2px 2px 0 #111,
        2px 2px 0 #111,
        4px 4px 0 var(--burst-accent);

    transition: color .45s ease;
}

.burst-pop {
    position: absolute;
    z-index: 4;

    width: 9px;
    height: 9px;

    background: var(--burst-accent);
    border: 2px solid #111;
    border-radius: 50%;
}

.burst-pop-one {
    left: 8px;
    top: 36px;
    box-shadow: -8px 13px 0 -1px var(--burst-color), 4px 22px 0 -2px var(--burst-paper);
}

.burst-pop-two {
    right: 9px;
    bottom: 34px;
    box-shadow: 8px -13px 0 -1px var(--burst-color), -3px -23px 0 -2px var(--burst-paper);
}

.still-free-burst.is-changing {
    animation: still-free-pop .8s ease-out;
}

@keyframes still-free-pop {
    0%, 100% {
        transform: rotate(-4deg) scale(1);
    }
    42% {
        transform: rotate(2deg) scale(1.08);
    }
    72% {
        transform: rotate(-6deg) scale(.98);
    }
}

/* Supplied transparent artwork replaces the CSS-drawn burst above. */
.still-free-burst {
    width: 170px;
    height: 145px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: none;
    clip-path: none;
    filter: none;
    transform: rotate(-4deg);

    animation: still-free-image-pop 6s ease-in-out infinite;
}

.still-free-burst::before,
.still-free-burst::after {
    display: none;
}

.still-free-image {
    display: block;
    width: 100%;
    height: auto;

    filter: drop-shadow(4px 4px 0 rgba(17, 17, 17, .45));
}

@keyframes still-free-image-pop {
    0%, 82%, 100% {
        transform: rotate(-4deg) scale(1);
    }
    88% {
        transform: rotate(1deg) scale(1.06);
    }
    94% {
        transform: rotate(-6deg) scale(.99);
    }
}

/* ==========================
   LOGO AREA
========================== */

.masthead-title {
    display: flex;
    justify-content: center;
    align-items: center;
}

.superdoobie-logo {
    display: block;
    width: 100%;
    max-width: 1180px;
    height: auto;
}

/* ==========================
   APPROVAL SEAL
========================== */

.approval-seal {
    display: flex;
    justify-content: center;
    align-items: center;
}

.approval-seal img {
    width: 160px;
    height: auto;
    display: block;
}

/* ==========================
   TAGLINE BANNER
========================== */

.masthead-tagline {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;

    background: #f6d13d;
    border-top: 5px solid #111;
    border-bottom: 5px solid #111;
}

.tag-center {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;

    background: transparent;
    color: #111;

    border: 0;

    padding: 11px 28px;

    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(0.88rem, 1.7vw, 1.65rem);
    line-height: 1.1;
    text-align: center;

    white-space: nowrap;

}

.tag-end-left,
.tag-end-right {
    display: none;
}

/* ==========================
   NAVIGATION
========================== */

.masthead-nav {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;

    background: #b92e1b;
    border-top: 0;
    margin: 0;
}

.masthead-nav a {
    flex: 1;

    color: #fff;
    text-decoration: none;

    padding: 16px 10px;

    border-right: 3px solid #111;

    text-align: center;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(0.8rem, 1.1vw, 1.1rem);

    text-shadow:
        2px 2px 0 #111,
        -1px -1px 0 #111,
        1px -1px 0 #111,
        -1px 1px 0 #111;
}

.masthead-nav a:last-child {
    border-right: none;
}

.masthead-nav a:hover {
    background: #f6d13d;
    color: #111;
    text-shadow: none;
}

.masthead-nav a[aria-current] {
    background: #f6d13d;
    color: #111;
    text-shadow: none;
}

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

@media (max-width: 1100px) {
    .masthead-main {
        grid-template-columns: 145px 1fr 145px;
        gap: 16px;
        padding: 20px 18px 16px;
    }

    .still-free-burst {
        width: 135px;
        height: 120px;
    }

    .still-free-copy {
        min-width: 92px;
        padding: 10px 11px 8px;
    }

    .still-free-copy strong {
        font-size: 1.55rem;
    }

    .still-free-copy small {
        font-size: .6rem;
    }

    .approval-seal img {
        width: 115px;
    }

    .masthead-tagline {
        width: 100%;
    }

    .tag-center {
        padding: 10px 20px;
    }

    .tag-end-left,
    .tag-end-right {
        width: 38px;
        height: 54px;
    }
}

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

@media (max-width: 760px) {

    .masthead-info-bar {
        display: none;
    }

    .masthead-main {
        display: block;
        padding: 20px 12px 14px;
        text-align: center;
    }

    .still-free-burst {
        display: none;
    }

    .approval-seal {
        display: none;
    }

    .masthead-title {
        margin: 0 auto;
    }

    .superdoobie-logo {
        display: block;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }

    .masthead-tagline {
        width: 100%;
        margin: 0;
    }

    .tag-center {
        white-space: normal;
        padding: 9px 10px;
        font-size: clamp(0.72rem, 3.4vw, 0.92rem);
        line-height: 1.15;
    }

    .tag-end-left,
    .tag-end-right {
        display: none;
    }

    .masthead-nav {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        border-top: 0;
    }

    .masthead-nav a {
        grid-column: span 2;

        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 7px 4px;

        border-right: 2px solid #111;
        border-bottom: 2px solid #111;

        font-size: clamp(.66rem, 2.45vw, .8rem);
        line-height: 1.08;
        text-align: center;
    }

    .masthead-nav a:nth-child(n + 4) {
        grid-column: span 3;
        border-bottom: none;
    }

    .masthead-nav a:nth-child(3),
    .masthead-nav a:nth-child(5) {
        border-right: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .still-free-burst,
    .still-free-burst::before,
    .still-free-burst::after,
    .still-free-copy,
    .still-free-copy strong {
        animation: none;
        transition: none;
    }
}