/*
 * TDN CSS Masthead Header Override
 * Compact sticky-friendly masthead. No oversized header image and no object-fit cropping.
 */

:root {
    --tdn-gold: #9b6f25;
    --tdn-gold-soft: #caa75c;
    --tdn-red: #c9152c;
}

html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-hdr-top {
    background: #fff !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 60 !important;
}

html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-hdr-top-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    position: static !important;
}

html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead-original-logo,
html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-hdr-logo,
html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-polished-header-banner {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
}

html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead {
    display: block !important;
    width: 100% !important;
    min-height: var(--tdn-css-masthead-desktop, 82px) !important;
    height: var(--tdn-css-masthead-desktop, 82px) !important;
    background:
        linear-gradient(90deg, rgba(155,111,37,.07), transparent 22%, transparent 78%, rgba(155,111,37,.06)),
        linear-gradient(180deg, #fff 0%, #fff 58%, #faf9f6 100%) !important;
    border-top: 1px solid var(--tdn-gold) !important;
    border-bottom: 2px solid var(--tdn-gold) !important;
    color: #111 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 5 !important;
    box-shadow: 0 2px 7px rgba(0,0,0,.05) !important;
    transition: height .18s ease, min-height .18s ease, box-shadow .18s ease !important;
}

html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 170px;
    background:
        repeating-linear-gradient(130deg, rgba(155,111,37,.08) 0, rgba(155,111,37,.08) 1px, transparent 1px, transparent 8px);
    opacity: .42;
    pointer-events: none;
}

html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 150px;
    background: repeating-linear-gradient(45deg, rgba(155,111,37,.06) 0, rgba(155,111,37,.06) 1px, transparent 1px, transparent 9px);
    opacity: .45;
    pointer-events: none;
}

html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__inner {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: var(--tdn-css-masthead-max, 1180px) !important;
    height: 100% !important;
    min-height: inherit !important;
    margin: 0 auto !important;
    padding: 0 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(12px, 2vw, 26px) !important;
    position: relative !important;
    z-index: 2 !important;
}

html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__emblem {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 48px !important;
    height: 48px !important;
    border-right: 1px solid var(--tdn-gold) !important;
    padding-right: 18px !important;
    color: var(--tdn-gold-soft) !important;
    text-shadow: 0 1px 0 #fff, 0 2px 6px rgba(155,111,37,.25) !important;
}

html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__star {
    font-size: 24px !important;
    line-height: 1 !important;
}

html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__brand {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__title {
    display: block !important;
    white-space: nowrap !important;
    color: #111 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-size: clamp(32px, 5vw, 58px) !important;
    font-weight: 900 !important;
    line-height: .78 !important;
    letter-spacing: -.065em !important;
    transform: scaleY(1.08) !important;
    transform-origin: center center !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.9) !important;
}

html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__accent {
    color: var(--tdn-red) !important;
}

html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__tagline {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 7px !important;
    color: #111 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(8px, 1vw, 11px) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .42em !important;
    text-transform: uppercase !important;
}

html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__tagline::before,
html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__tagline::after {
    content: "";
    display: block;
    width: 38px;
    height: 1px;
    background: var(--tdn-gold);
}

html.tdn-css-masthead-active.tdn-css-masthead-scrolled body.tdn-css-masthead-active .tdn-css-masthead {
    min-height: var(--tdn-css-masthead-desktop-scrolled, 62px) !important;
    height: var(--tdn-css-masthead-desktop-scrolled, 62px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}

html.tdn-css-masthead-active.tdn-css-masthead-scrolled body.tdn-css-masthead-active .tdn-css-masthead__title {
    font-size: clamp(28px, 4.2vw, 46px) !important;
}

html.tdn-css-masthead-active.tdn-css-masthead-scrolled body.tdn-css-masthead-active .tdn-css-masthead__tagline {
    margin-top: 5px !important;
    font-size: 8px !important;
}

html.tdn-css-masthead-active.tdn-css-masthead-scrolled body.tdn-css-masthead-active .tdn-css-masthead__emblem {
    width: 40px !important;
    height: 40px !important;
}

html.tdn-css-masthead-active.tdn-css-masthead-scrolled body.tdn-css-masthead-active .tdn-css-masthead__star {
    font-size: 20px !important;
}

html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead-preserved-burger,
html.tdn-css-masthead-active body.tdn-css-masthead-active #tdn-burger.tdn-hdr-burger,
html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-hdr-burger {
    z-index: 90 !important;
}

@media (max-width: 900px) {
    html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead {
        min-height: var(--tdn-css-masthead-tablet, 72px) !important;
        height: var(--tdn-css-masthead-tablet, 72px) !important;
    }

    html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__title {
        font-size: clamp(30px, 6vw, 48px) !important;
    }

    html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__emblem {
        width: 40px !important;
        height: 40px !important;
        padding-right: 14px !important;
    }
}

@media (max-width: 767px) {
    html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead {
        min-height: var(--tdn-css-masthead-mobile, 54px) !important;
        height: var(--tdn-css-masthead-mobile, 54px) !important;
        border-bottom-width: 1px !important;
    }

    html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__inner {
        justify-content: flex-start !important;
        padding: 0 70px 0 18px !important;
        gap: 10px !important;
    }

    html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__emblem {
        display: none !important;
    }

    html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__brand {
        align-items: flex-start !important;
    }

    html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__title {
        font-size: clamp(25px, 8.2vw, 34px) !important;
        line-height: .86 !important;
        letter-spacing: -.07em !important;
        max-width: calc(100vw - 92px) !important;
    }

    html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__tagline {
        margin-top: 4px !important;
        font-size: 7px !important;
        letter-spacing: .24em !important;
    }

    html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__tagline::before,
    html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__tagline::after {
        display: none !important;
    }

    html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead-preserved-burger,
    html.tdn-css-masthead-active body.tdn-css-masthead-active #tdn-burger.tdn-hdr-burger,
    html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-hdr-burger {
        position: absolute !important;
        top: 50% !important;
        right: 12px !important;
        transform: translateY(-50%) !important;
        width: 42px !important;
        height: 42px !important;
        padding: 8px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(0,0,0,.18) !important;
        background: rgba(255,255,255,.95) !important;
        box-shadow: 0 3px 12px rgba(0,0,0,.14) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
    }

    html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-hdr-burger span,
    html.tdn-css-masthead-active body.tdn-css-masthead-active #tdn-burger span {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        margin: 0 !important;
        background: #111 !important;
        border-radius: 999px !important;
    }
}

@media (max-width: 380px) {
    html.tdn-css-masthead-active body.tdn-css-masthead-active .tdn-css-masthead__title {
        font-size: clamp(22px, 7.8vw, 29px) !important;
    }
}
