/* =========================================================
   MOBILE POLISH OVERRIDES
   Focused refinements for contrast, app-shell behaviour, and portfolio fallbacks.
   ========================================================= */

/* Stronger, less washed-out light theme for mobile and desktop. */
[data-theme="light"] {
    --text-primary: #171717;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --accent-primary: #9a4a16;
    --accent-secondary: #c45a05;
    --accent-glow: rgba(154, 74, 22, 0.22);
    --accent-subtle: rgba(154, 74, 22, 0.08);
    --gradient-text: linear-gradient(135deg, #171717 0%, #9a4a16 72%, #c45a05 100%);
}

/* Tighten the header mark so it reads like a deliberate code logo. */
.logo {
    gap: 0;
    letter-spacing: -0.04em;
}

.logo-mark {
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-weight: 800;
    color: var(--accent-primary);
}

/* Better portfolio fallback than emoji-only cards. */
.portfolio-placeholder {
    width: 100%;
    height: 100%;
    min-height: 220px;
    display: grid;
    place-content: center;
    gap: 0.5rem;
    padding: var(--space-4);
    text-align: center;
    background:
        radial-gradient(circle at top left, rgba(154, 74, 22, 0.28), transparent 35%),
        radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.18), transparent 36%),
        linear-gradient(145deg, #111827, #1f2937);
}

.portfolio-placeholder-title {
    color: #ffffff;
    font-size: var(--font-xl);
    font-weight: 800;
    line-height: 1.1;
}

.portfolio-placeholder-subtitle {
    color: #d1d5db;
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

@media (max-width: 1023px) {
    /* Modal sheet should clearly sit above the app nav. */
    .mobile-more-backdrop {
        z-index: 1200;
    }

    .mobile-more-sheet {
        z-index: 1201;
    }

    .mobile-bottom-nav {
        z-index: 1000;
    }
}

@media (max-width: 767px) {
    /* Use theme tokens instead of hard-coded grey values so light mode remains readable. */
    .hero-subtitle,
    .page-hero .section-description,
    .work-hero .section-description,
    .legal-hero .section-description,
    .case-study-description {
        color: var(--text-secondary) !important;
    }

    /* Inner pages should reach content/forms faster on phones. */
    .page-hero,
    .work-hero,
    .case-study-hero,
    .legal-hero {
        padding-top: calc(var(--header-height) + 1.25rem) !important;
        padding-bottom: 1.5rem !important;
    }

    .contact-section,
    .services-section,
    .portfolio-section {
        padding-top: 1.5rem !important;
    }

    .portfolio-placeholder {
        min-height: 190px;
    }
}

@media (max-width: 480px) {
    .mobile-nav-item {
        border-radius: 18px;
    }

    .mobile-nav-item.is-active {
        margin-inline: 2px;
    }
}