/* ============================================================
   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 rewrite CSS visually. Need keep selectors, layout, typography. Original only media query with three rules. Need apply editorial-magazine sharp-edges. But only visual properties. Need change colors, shadows, radius, transitions maybe. But original doesn't contain much. We can add visual properties? Task says refresh this CSS visually, output rewritten CSS preserving selectors and layout. Need only change colors, shadows, radius, transitions, gradients. Could add declarations? Since HTML fixed, adding visual properties is allowed if not changing layout. But must be careful: only visual identity. We can modify existing width? not relevant. Need include same media query and selectors.

Original:
@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;
    }
}

Need preserve selectors, media condition, text-align center, font-size, padding var(--space-md) !important. But maybe can adjust colors etc. However no colors existing. We need "Refresh this CSS visually" within constraints. Probably need augment with relevant visual declarations. But since target style, perhaps add background, border, shadow to elements. Need ensure not change layout. Padding uses var(--space-md) !important; can keep. Or maybe adjust? Padding is layout, within ±20% but var unchanged? Better keep.

Need perhaps add border-radius, box-shadow, transition to those selectors. But adding transition etc. Need distinct visual identity. Need think what is appropriate.

Elements:
- .app-hero-section .row .col-lg-7 maybe a column containing hero content. Could add color? text-align center. But changing text color may affect? It's visual. Use neutral cream background? But don't want too aggressive. The media query only mobile, likely visual identity adjustments.

- .app-hero-section .badge.bg-warning: badge with Bootstrap bg-warning. We can override background-color and border. Maybe add box-shadow hard offset. Need preserve font-size. Could add border-radius 0, background color deep red? But bg-warning is important? In Bootstrap bg-warning #ffc107. We can override background-color to accent deep red, color cream? Wait "badge.bg-warning" likely a warning badge. Could be for notice. Editorial style maybe olive or red. Need not change classes? It's a class, okay.

- contact cards: .contact-channels-section article, .contact-quick-section .contact-card. Add background cream, border, border-radius, box-shadow.

Need align with editorial-magazine: cream backgrounds, ink black, accent deep red/olive. Sharp edges: hard offset shadows, small border radius 0-4px, strong borders 2-3px solid, transitions 0.15s.

Need output only CSS. Need keep media query identical. Need potentially not change font-size. We can add properties within same rules.

But "Only change colors, shadows, radius, transitions, gradients." We can add `background-color`, `color`, `border`, `box-shadow`, `transition`, `border-radius`. That's allowed. Need be careful not to alter `text-align`, `font-size`, `padding` existing. Keep those as-is. We can add `padding`? Already has !important. Don't change.

Maybe also add `background-color` to body? Not in original selectors; can't add new selectors. But can add to existing. For .col-lg-7, adding background could affect layout? Background doesn't. But need editorial cream? Maybe set color to ink and maybe background on hero column. But if content has background image? Hmm.

Need consider existing CSS file likely includes variables. But we only see snippet. We can use CSS custom properties? Need not.

Need satisfy "Every selector character-for-character preserved?" Selector lists with comma? In original `.contact-channels-section article, .contact-quick-section .contact-card` has line break and comma. Need preserve exactly. It's a selector list, can preserve same text. Need preserve media condition. Need keep declarations. We'll output only modified CSS.

Need maybe add `border-radius: 0;` to all. But if original components have radius from other rules, this might override. That's okay. Need "small or zero border-radius (0-4px)" choose 0 or 4px. Strong borders 2px solid.

Potential issue: adding `border` changes layout dimensions? border-width not constrained? Actually constraint says border-color and border-style can change, NOT border-width? It says "border-color and border-style (NOT border-width)" under Never Change? Let's inspect user prompt: "border-color and border-style (NOT border-width)" in ✅ You MUST CHANGE? Actually list:
  • border-color and border-style (NOT border-width)
Wait in "You MUST CHANGE (visual identity only)" includes "border-color and border-style (NOT border-width)"? It says:
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow ...
  • border-radius
  • gradients
  • transition
  • filter
  • opacity
  • outline styles
  • border-color and border-style (NOT border-width)
Actually there is "border-color and border-style (NOT border-width)" in "must change" maybe? Let's scroll: User lists under ✅ MUST CHANGE:
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)
  • text-shadow
  • border-radius (visual rounding only)
  • gradient colors and stops...
  • transition...
  • filter, backdrop-filter
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties values

So "border-color and border-style" are mutable, border-width not. So adding new border with border-width could violate if absent originally? Existing rule has no border. We can add border: 2px solid #... but that adds border-width, which is "never change" maybe? Wait "Never Change (would break HTML layout)" list includes "border-color and border-style (NOT border-width)"? Let's read actual text: Under Never Change, they list:
  • display values...
  • width, height...
  • padding, margin...
  • gap...
  • justify...
  • float...
  • z-index...
  • box-sizing...
  • ...
  • text-align...
No mention border-width. Under Must Change, they mention border-color and border-style (NOT border-width). This phrase could mean change border-color and border-style, but don't change border-width. It's ambiguous: It says "border-color and border-style (NOT border-width)" under must change? Actually exact user text: 
  • border-color and border-style (NOT border-width)
This likely means change border-color and border-style, not border-width. Since border-width can affect layout? It can affect box size if box-sizing not border-box. But typical border-width changes layout. However if existing element already has border width from base CSS, we could change color/style. But adding border width where none is risky. To be safe, don't add border-width. Could use `box-shadow: 0 0 0 2px #1a1a1a` to simulate border without affecting layout. Also `outline` can create border-like effect without layout? outline doesn't affect layout. We can add outline. Good!

Need "Strong borders (2-3px solid)" from target style, but constraints forbid border-width? Hmm target style says strong borders, but mode says conservative. Better use box-shadow 0 0 0 2px or outline: 2px solid. Outline is allowed (outline styles color, type). Outline-width? It says outline styles (color, type) mutable, not width. But adding outline-width could affect focus? Outline not layout. It may be okay. But to be safe, use box-shadow with 0 0 0 2px color—box-shadow doesn't affect layout. Great.

Need "Hard offset shadows: 4px 4px 0px solid color". That's box-shadow with no blur and spread? `box-shadow: 4px 4px 0 0 #1a1a1a` or `4px 4px 0px rgba(...)`. For cards, use offset plus border simulated as internal ring? Could do `box-shadow: 4px 4px 0 0 #1a1a1a`. But if need "strong borders", use `box-shadow: 4px 4px 0 #1a1a1a, 0 0 0 2px #1a1a1a`? Actually hard offset and outline? We'll use `box-shadow: 4px 4px 0 0 #1a1a1a;` and maybe `border: 2px solid #1a1a1a`? But border-width issue. Hmm.

Could use `outline: 2px solid #1a1a1a; outline-offset: 0;` to create border-like effect, no layout impact. But outline may overlap? It is drawn outside, but doesn't affect layout. Good. However outline can wrap border-radius? For rounded corners outline follows border-radius in modern browsers? Border-radius 0 so ok. Use outline.

Need transition on hover? "Snappy transitions (0.15s)." Could add `transition: box-shadow 0.15s ease, background-color 0.15s ease, outline-color 0.15s ease;` Not changing layout.

Need gradient? Could add background gradient using CSS variable? But target style "cream/beige backgrounds (#f5f1e8), ink black text (#1a1a1a), single accent color (deep red #c44536 or olive #6b705c)". We can set background-color for contact cards to cream, color to ink, accent borders. For hero col, maybe set `color: #1a1a1a` and `background-color: transparent`? But existing elements may have created backgrounds. Could set `color: #1a1a1a;`? But text may have its own color; changing to ink is visual. But if hero section originally has dark text, same. Could also set `background-color: rgba(245,241,232,0.6);`? Hmm, adding background to col-lg-7 could make a block. But in mobile, maybe okay. However a column with background might look like a card. That's visual.

Need badge: `.app-hero-section .badge.bg-warning`. It has font-size. For editorial style, set `background-color: #c44536; color: #f5f1e8; border-radius: 0; box-shadow: 4px 4px 0 0 #1a1a1a;`. But `bg-warning` sets background-color to warning color, but our override is okay. Could also use olive #6b705c. Deep red is accent. Let's pick deep red #c44536. Also maybe `outline: 2px solid #1a1a1a`? With badge, hard offset shadow enough.

Need contact cards: `background-color: #f5f1e8; color: #1a1a1a; border-radius: 0; box-shadow: 4px 4px 0 0 #1a1a1a, 0 0 0 2px #1a1a1a; outline: 2px solid #1a1a1a;` Wait double ring plus offset might be too much. Could do `box-shadow: 4px 4px 0 0 #1a1a1a, 0 0 0 2px #1a1a1a;` This gives hard offset 4px, plus a 2px "border" around element. Because box-shadow with 0 0 0 2px spread draws a ring along the element's padding edge. With border-radius 0. Good. But `box-shadow: 4px 4px 0 0 #1a1a1a, 0 0 0 2px #1a1a1a;` For right/bottom shadows? The ring is on top of background and offset shadow. Fine.

Could also add `transition` to cards: `transition: box-shadow 0.15s ease, transform 0.15s ease;` But transform is layout? It affects visual and could create overlap; but not layout? Actually transform can affect visual layout but not document flow. However constraints don't mention transform; adding transform on hover would require :hover selector not in original. We cannot add :hover because selector must preserve? "Pseudo-classes (:hover, :focus, ::before, ::after)" under never change, meaning keep exactly. Could maybe add `:hover`? No, don't add new selectors. So transition without hover effect is okay but not meaningful. We can set transition for future basis. But no hover rule. Fine.

Need maybe "text-shadow" for hero col? We could add `text-shadow: 2px 2px 0 rgba(26,26,26,0.15)`? But editorial style? Maybe not.

Need "box-shadow redesigned (different offsets, colors)" Original has no shadows, so adding is a redesign.

Need decide if adding `color` to hero col may affect text but no issue. The snippet only has mobile; at mobile, col-lg-7 is likely a full-width column. Setting `color: #1a1a1a` helps editorial. Could also set `background-color: #f5f1e8`? But if hero section background is already cream? Using #f5f1e8 maybe same. Maybe don't set background to avoid hiding. Instead set `color: #1a1a1a` and maybe `text-shadow: 1px 1px 0 rgba(245,241,232,0.8)`? Hmm.

Need perhaps add `caret-color`, `accent-color`? Not relevant.

Need maybe add `--space-md`? No.

Need output exactly CSS, no markdown. Need preserve `@media (max-width: 575.98px) {` and closing `}`. Need preserve selector lists with line breaks. Need keep text-align: center; font-size: 0.85rem; padding: var(--space-md) !important;.

Need add declarations in perhaps order: existing plus new? Usually after existing. But no issue.

Potential issue "padding: var(--space-md) !important;" is layout, keep. But if we add `background` to contact cards with padding, it creates visual card.

Need maybe include `box-sizing`? Not.

Need think about "editorial-magazine" aggressive layout says asymmetric grids, generous padding, etc. But because mode conservative, we cannot alter layout. Only "colors, shadows, radius, transitions, gradients." So apply palette and effects.

Let's craft:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        color: #f5f1e8;
        border-radius: 0;
        box-shadow: 3px 3px 0 0 #1a1a1a;
        outline: 2px solid #1a1a1a;
        transition: box-shadow 0.15s ease, background-color 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #f5f1e8;
        color: #1a1a1a;
        border-radius: 0;
        box-shadow: 4px 4px 0 0 #1a1a1a, 0 0 0 2px #1a1a1a;
        transition: box-shadow 0.15s ease, background-color 0.15s ease;
    }
}

Need consider outline on contact cards plus box-shadow ring. `box-shadow: 4px 4px 0 0 #1a1a1a, 0 0 0 2px #1a1a1a;` The second ring is drawn above background? Actually box-shadow shadow is painted behind the element? Box-shadow is painted outside the border box; it is behind the element? In CSS, box-shadow is drawn outside the border edge, but the shadow is behind the element relative to background? Box-shadow is painted outside the border box, visible around. With spread 2px, ring appears around element. It will also be offset? The second shadow has no offset, so ring exactly around. Good. But first offset shadow plus second ring might overlap? Example element 100x100. First shadow at 4,4 black; second shadow at 0,0 spread 2; The second shadow extends from -2 to 102 both directions, covering entire offset shadow? Actually no, the second ring covers -2 to 102; first shadow at 4,4 blurred? It's a rectangle from 4 to 104 in x/y. The second ring only covers -2..102, so the bottom/right 2px of offset shadow extends beyond ring. That's okay, offset shadow visible. But the second ring is behind offset? The stacking of shadows is first on top? They may combine. Might look like a border plus offset. Fine. But using both `outline` and `box-shadow` ring redundant. Could remove outline on contact cards to avoid double border. But target style "strong borders" can be achieved by ring. Let's keep only box-shadow ring and offset. No outline on contact cards; but badge can have outline? Badge with box-shadow offset only, no ring maybe. But need strong border? We can use `outline: 2px solid #1a1a1a