/**
 * Militra.com Store Notification Styles
 *
 * Layout and typography rules for the WooCommerce store notice when rendered
 * at the top of the page via militra_render_store_notice(). Colors and font
 * size are driven by CSS custom properties set inline from theme settings.
 *
 * @package Militra_Com
 */

.militra-store-notice {
    --notice-bg: #1f2937;
    --notice-text: #ffffff;
    --notice-font-size: 15px;

    position: relative;
    z-index: 1100;
    width: 100%;
    background: var(--notice-bg);
    color: var(--notice-text);
    font-family: var(--font-family-body);
    font-size: var(--notice-font-size);
    line-height: 1.4;
    text-align: center;
}

/*
 * On inner pages the body carries a large padding-top to clear the fixed
 * header, which would push the in-flow notice down below the header. Pin it
 * to the document top instead so it sits above the header on every page,
 * matching the homepage (where front-page.css zeroes the body padding). The
 * body's padding-top already reserves --militra-notice-height for it, and an
 * absolute element scrolls away with the page just like the in-flow notice
 * does on the homepage.
 */
body:not(.home):not(.page-template-front-page) .militra-store-notice {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.militra-store-notice__inner {
    max-width: var(--header-width-max, 1264px);
    margin: 0 auto;
    padding: 10px var(--spacing-8, 24px);
}

.militra-store-notice a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.militra-store-notice a:hover,
.militra-store-notice a:focus {
    text-decoration: none;
}

.militra-store-notice p {
    margin: 0;
}

@media (max-width: 600px) {
    .militra-store-notice__inner {
        padding: 8px var(--spacing-4, 16px);
    }
}