/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need to modify the CSS in a conservative mode, preserving selectors and layout, but changing visual properties. The given CSS is a media query block with three rules. We need to refresh the visual identity by changing colors, shadows, radius, transitions, gradients, etc. However, the original CSS has only media query and some rules that involve padding and text-align, which are layout properties. We are not allowed to change layout properties: padding, text-align are in the "NEVER CHANGE" list. But we can add new visual properties like color, box-shadow, border-radius, etc., to the existing selectors without changing existing declarations? Wait, the task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Since the original CSS doesn't have any color values, we need to add new visual declarations to the selectors. But is that allowed? The instruction says "Only colors, shadows, and decorative properties may change" and "All color values: background, color, border-color, fill, stroke, outline-color" must be changed. If there are none, we should introduce new ones? Let's read the original CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}

It only sets text-align, font-size, padding. These are layout/typography. We cannot change them. But we can add visual properties to these same selectors. The task says "Refresh this CSS visually" and "Output the rewritten CSS now". In conservative mode, we can add new properties as long as they don't change layout. We must preserve existing declarations exactly. So we can add color, background, border-radius, box-shadow, transition, etc. to these selectors. But we must be careful: adding padding? No, don't change. Adding display? No, don't change.

Also, we need to target "editorial-magazine" style and "glow-effects". The palette: cream/beige backgrounds (#f5f1e8), ink black text (#1a1a1a), accent deep red #c44536 or olive #6b705c. Since this is a media query for small screens, maybe we should apply subtle visual adjustments for mobile.

But note: The selectors might already have other styles elsewhere. We're only rewriting this chunk. We can only change what's here. So we can add visual properties to `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, and `.contact-channels-section article, .contact-quick-section .contact-card` within the media query. We can also add @keyframes? The instructions say @keyframes names can be preserved, values inside can change. We could add a subtle pulsing animation. But need to avoid changing layout. Adding animation is fine.

We need to ensure the selectors remain exactly the same. The original has `!important` on padding. We must keep that. We can add other properties with or without !important.

Let's craft a visually refreshed CSS. We need to choose colors: Use cream background? But we shouldn't change background of the body because we don't have body selector. But for the elements we can set background: maybe the badge gets accent red background? The class `.badge.bg-warning` is a Bootstrap badge with warning background. We can override its background to the editorial accent color? But that is a visual change. We can add `background-color: #c44536; color: #f5f1e8;` to the badge. Also we can add `box-shadow: 0 0 12px rgba(196, 69, 54, 0.4);` for glow. For the hero col, we can add `color: #1a1a1a;` but it's a container. Maybe add `text-shadow`? Actually text-align center is there. We can add `text-shadow: 0 1px 0 rgba(245, 241, 232, 0.8);` but not sure. Better to add visual effects to all elements: maybe add `transition` for hover? But these elements may not have hover states. We can add `transition: background-color 0.3s ease, box-shadow 0.3s ease;` to article/cards. But the media query is for mobile, hover is less relevant. We can add `border-radius: 12px;` to the cards/articles. Also add `box-shadow: 0 8px 24px rgba(26, 26, 26, 0.08), 0 0 0 1px rgba(196, 69, 54, 0.1);`. For the badge, add `border-radius: 6px;` and `box-shadow: 0 0 16px rgba(196, 69, 54, 0.5);`.

But wait, the original CSS uses custom property `--space-md`. We can't change that. We can add custom property definitions? Probably not within a media query? We could define `--accent: #c44536;` but that would be a new custom property. The instruction says "CSS custom properties (--color-*, --shadow-*) values" can change. There are none to change. We can add new custom properties? That would be new selectors? Not exactly. Better not.

We need to preserve all selectors and layout exactly. So we can add declarations to existing rules. Let's create the rewritten CSS with additional visual properties.

Important: We should not change the existing `font-size`, `text-align`, `padding` values. Keep them exactly. We can add `font-size`? Already there. Don't double.

Let's write:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        text-shadow: 0 1px 0 rgba(245, 241, 232, 0.6);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        border-color: #c44536;
        color: #f5f1e8;
        border-radius: 8px;
        box-shadow: 0 0 20px rgba(196, 69, 54, 0.45);
        transition: box-shadow 0.3s ease, background-color 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #fffdf8;
        border-radius: 14px;
        box-shadow: 0 8px 20px rgba(26, 26, 26, 0.06), 0 0 0 1px rgba(107, 112, 92, 0.12);
        transition: box-shadow 0.35s ease, transform 0.35s ease;
    }
}

But we also need to consider the "glow-effects" variant: "Glow shadows in accent color: 0 0 24px rgba(accent, 0.4), Halo on hover: 0 0 32px rgba(accent, 0.6), Medium radius (8-16px), Subtle pulsing animations". We can add a subtle pulsing animation to the cards or badge. But adding @keyframes requires a named animation. We can define a new @keyframes block within the media query? Actually @keyframes can be inside media queries. But the instruction says "@keyframes names (values inside CAN change)". Since there are no existing keyframes, we could add one. But would that violate "Only colors, shadows, and decorative properties may change"? Animation is decorative. But we need to be careful: adding a keyframe with transform could change layout if transform changes? Animating transform: translateY or scale might slightly affect visual but not layout. It's allowed? The NEVER CHANGE list includes "display, position, ..." but not transform. However, "z-index, overflow" etc. Transform is not listed, so it's allowed. But to be safe, we can animate opacity or box-shadow only.

Let's add a subtle pulse on the badge:

@keyframes subtlePulse {
    0%, 100% { box-shadow: 0 0 16px rgba(196, 69, 54, 0.4); }
    50% { box-shadow: 0 0 28px rgba(196, 69, 54, 0.6); }
}

Then apply to `.app-hero-section .badge.bg-warning { animation: subtlePulse 2.5s ease-in-out infinite; }` within the media query. That adds motion. But the animation name is new; that's okay. However, the output instructions say "Only the rewritten CSS, preserving ALL selectors and layout exactly." Adding @keyframes is new, but it's not a selector? It is a @keyframes rule. It doesn't violate selectors. But "preserving ALL selectors" means existing selectors unchanged; we can add new ones? It says "Preserving ALL selectors and layout exactly" and "Keep ALL selectors and layout exactly as-is." This could mean we cannot add new selectors. But @keyframes is not a selector per se. But to be safe, we might avoid adding new @keyframes. The user requested "Subtle pulsing animations" as part of the effect variant. But if we can't add keyframes, we can't. However, we can use `transition` to simulate a pulsing effect on hover? Not for mobile. Hmm.

Let's check the instruction: "🎬 ANIMATION & MEDIA: • @keyframes names (values inside CAN change) • @media query breakpoints (conditions only) ... • animation-name (values like duration/timing CAN change)". This implies we can change keyframe values and animation properties, but we cannot change the existence of @keyframes? It says values inside CAN change, but it doesn't say we can add new @keyframes. In a strict conservative mode, we should not add new selectors or rules. But the task asks us to "Refresh this CSS visually" with limited scope. Since the original has no animation, adding one might be beyond scope. Let's avoid adding new @keyframes to be safe. Instead, we can use `transition` on the badge and cards, which is already allowed. The "Subtle pulsing animations" can be approximated with a continuous transition? No, transitions trigger on state change. So we can't.

Maybe we can use `animation` with a predefined keyframe that already exists elsewhere? But we don't know. No.

Let's stick to static visual changes: colors, shadows, radius. That's enough.

Also, note: We must change "All color values" if there are any. Since there are none, adding colors is optional? The instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must be changed. There are no color values. So we can add them as part of refresh.

But we need to ensure we don't break Bootstrap's `.bg-warning`. Overriding `background-color` is fine. We also set `border-color` because the badge may have a border. But if the badge doesn't have border, setting border-color won't create a border unless border-width is set. It's okay.

Let's also consider the editorial color palette: cream background #f5f1e8, ink #1a1a1a, accent deep red #c44536. Olive alternative #6b705c. We can use both: red for badge, olive for card accents.

Let's write a comprehensive refresh.

Also, we need to ensure no markdown fences, no comments. Start with `@media`.

We need to preserve the exact selectors, including commas, spaces, etc. The third rule:
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
}
We need to keep that selector exactly, with line break after comma? We can keep it in one line or two lines. The selector list can be formatted as original. But to be safe, keep same formatting: comma then newline? Original has it as two lines inside the media query:
    .contact-channels-section article,
    .contact-quick-section .contact-card {
        ...
    }
We can keep that.

Now, adding properties to each. For the first rule, we can add color, text-shadow, maybe letter-spacing? But letter-spacing is typography and should not change. So no.

We should also consider adding `background` to the hero col? Maybe not because it's a column. But we could add `background: rgba(245, 241, 232, 0.5);`? That would change the visual background of the column, but might be okay. However, adding background might cover underlying content? But it's decorative. To be safe, avoid setting background on the col.

For the badge, we can also add `box-shadow: 0 0 20px rgba(196, 69, 54, 0.45), 0 2px 4px rgba(26, 26, 26, 0.15);` and `border-radius: 8px;`.

For the cards, we can add `background: linear-gradient(180deg, #fffdf8 0%, #f5f1e8 100%);`? But that would override background. It's okay. But the original doesn't set background, so we can. Need to be careful that adding a linear-gradient with colors is allowed. Yes.

Also add `border: 1px solid rgba(107, 112, 92, 0.25);`? But border-width is allowed to change? Actually "border-color and border-style (NOT border-width)" can change. If we add border, we might change layout because border-width adds to element size. But we can use `box-shadow` instead of border to avoid affecting layout. So avoid adding border.

Border-radius doesn't affect layout.

Box-shadow doesn't affect layout.

Transition doesn't affect layout.

So let's craft:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        text-shadow: 0 1px 0 rgba(245, 241, 232, 0.6);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        border-color: #c44536;
        color: #f5f1e8;
        border-radius: 8px;
        box-shadow: 0 0 20px rgba(196, 69, 54, 0.45), 0 2px 6px rgba(26, 26, 26, 0.2);
        transition: box-shadow 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(160deg, #fffdf8 0%, #f5f1e8 100%);
        border-radius: 14px;
        box-shadow: 0 10px 24px rgba(26, 26, 26, 0.08), 0 0 0 1px rgba(107, 112, 92, 0.15), 0 0 24px rgba(196, 69, 54, 0.08);
        transition: box-shadow 0.4s ease, transform 0.4s ease;
    }
}

But the transition property for transform may be okay, even if we don't animate transform on hover. It's harmless. But maybe "transform" is not a decorative property? It's not in the never-change list. However, adding transition for transform might hint at a transform change, but we don't have transform property. It's fine.

We should also consider that `.app-hero-section .badge.bg-warning` is likely a span with padding. Adding `border-radius` and `box-shadow` is fine.

Now, the instruction "All color values ... must change" – we're adding new ones. Good.

But wait: The original CSS has a `font-size: 0.85rem;` in `.app-hero-section .badge.bg-warning`. Font-size is in NEVER CHANGE list. Keep as is.

We also have `padding: var(--space-md) !important` in the third rule. Padding is in NEVER CHANGE list, but we keep it exactly.

Now, should we adjust the media query breakpoint? No, it's a condition, keep as is.

The output should be exactly the rewritten CSS. Since the original only had three declarations, our output will have more declarations. That's acceptable.

Let's double-check the target style: "editorial-magazine" with "glow-effects". We used cream/ink/red. Radius 8-16px. Glow shadows. Good.

We need to ensure there is no markdown fence. Start with `@media`.

Potential issue: The original uses `var(--space-md)` inside `padding`. We keep it. The custom property `--space-md` may be defined elsewhere. We don't change it.

Should we add `!important` to new properties? Not needed. Except maybe if we want to override Bootstrap, but we are in a media query and the specificity is higher than Bootstrap's `.badge`? Actually `.app-hero-section .badge.bg-warning` has specificity 0,3,0 (three classes) while `.bg-warning` is 0,1,0, so it overrides. Good. For `.contact-channels-section article` specificity is 0,1,1 (one class one element) and `.contact-card` is 0,2,0. Fine