/* ============================================
   Flavor Forum — Mobile Responsive Overrides
   Best-in-class mobile-first responsive design
   ============================================ */

/* -----------------------------------------------
   TABLET LANDSCAPE & SMALL DESKTOP (≤ 1280px)
   ----------------------------------------------- */
@media (max-width: 1280px) {
    .ff-sidebar-right {
        display: none;
    }
    .ff-main {
        margin-right: 0;
    }
    .ff-footer {
        margin-right: 0;
    }
}

/* -----------------------------------------------
   TABLET PORTRAIT (≤ 1024px)
   ----------------------------------------------- */
@media (max-width: 1024px) {
    .ff-content-wrapper {
        padding: 16px 20px;
    }
    .ff-section-header {
        padding: 24px 20px;
    }
    .ff-hero {
        padding: 30px 20px;
    }
    .ff-hero__title {
        font-size: 1.6rem;
    }
}

/* -----------------------------------------------
   MOBILE LARGE / TABLET SMALL (≤ 900px)
   Sidebar becomes overlay drawer
   ----------------------------------------------- */
@media (max-width: 900px) {
    /* Sidebar: off-canvas drawer */
    .ff-sidebar {
        transform: translateX(-100%);
        z-index: 200;
    }
    .ff-sidebar--open {
        transform: translateX(0);
        box-shadow: var(--ff-shadow-xl);
    }

    /* Main content: full width */
    .ff-main {
        margin-left: 0;
    }

    /* Show hamburger menu */
    .ff-header__menu-toggle {
        display: flex;
    }

    /* Hide desktop search in header */
    .ff-header__center {
        display: none;
    }

    /* Hide username next to avatar */
    .ff-user-menu__name {
        display: none;
    }

    /* Footer full width */
    .ff-footer {
        margin-left: 0;
    }

    /* Content padding */
    .ff-content-wrapper {
        padding: 16px;
    }

    /* Topic detail adjustments */
    .ff-topic-detail {
        padding: 16px;
    }
    .ff-topic-detail__header {
        flex-direction: column;
        gap: 12px;
    }

    /* Section header */
    .ff-section-header {
        padding: 20px 16px;
    }
    .ff-section-header__info {
        flex-direction: column;
        gap: 12px;
    }
    .ff-section-header__icon {
        font-size: 2.5rem;
    }

    /* Profile header */
    .ff-profile-header {
        padding: 20px 16px;
    }
    .ff-profile-header__info {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .ff-profile-header__stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* New topic button: icon only on smaller tablets */
    .ff-new-topic-trigger span {
        display: none;
    }
    .ff-new-topic-trigger {
        padding: 8px 10px;
    }

    /* Hero */
    .ff-hero {
        padding: 24px 16px;
    }
    .ff-hero__title {
        font-size: 1.4rem;
    }
    .ff-hero__subtitle {
        font-size: 0.85rem;
    }
}

/* -----------------------------------------------
   MOBILE (≤ 600px)
   Core mobile optimizations
   ----------------------------------------------- */
@media (max-width: 600px) {
    /* Base font size adjustment */
    html {
        font-size: 14px;
    }

    /* Header */
    .ff-header__inner {
        padding: 0 12px;
        gap: 8px;
    }
    .ff-header__logo-text {
        font-size: 1rem;
    }

    /* Content */
    .ff-content-wrapper {
        padding: 12px 10px;
    }

    /* ---- Topic Cards (Feed) ---- */
    .ff-card-topic {
        border-radius: var(--ff-radius-sm);
        margin-bottom: 8px;
    }
    .ff-card-topic__vote {
        padding: 8px 6px;
        min-width: 40px;
    }
    .ff-vote-count {
        font-size: 0.8rem;
    }
    .ff-vote-btn svg {
        width: 14px;
        height: 14px;
    }
    .ff-card-topic__content {
        padding: 10px 10px;
    }
    .ff-card-topic__title {
        font-size: 0.9rem;
        line-height: 1.35;
    }
    .ff-card-topic__meta {
        font-size: 0.7rem;
        gap: 3px;
    }
    .ff-card-topic__excerpt {
        font-size: 0.8rem;
        -webkit-line-clamp: 2;
    }
    .ff-card-topic__footer {
        gap: 12px;
        padding-top: 6px;
    }
    .ff-card-topic__action {
        font-size: 0.75rem;
        gap: 4px;
    }
    .ff-card-topic__action svg {
        width: 14px;
        height: 14px;
    }
    .ff-card-topic__thumb {
        margin-top: 8px;
        border-radius: var(--ff-radius-sm);
    }

    /* ---- Feed Controls ---- */
    .ff-feed-controls {
        padding: 6px 0;
        margin-bottom: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ff-feed-controls::-webkit-scrollbar {
        display: none;
    }
    .ff-feed-controls__btn {
        padding: 5px 10px;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    /* ---- Topic Detail (Single Post Page) ---- */
    .ff-topic-detail {
        padding: 14px 12px;
    }
    .ff-topic-detail__title {
        font-size: 1.15rem;
        line-height: 1.35;
    }
    .ff-topic-detail__meta {
        flex-wrap: wrap;
        gap: 6px;
        font-size: 0.75rem;
    }
    .ff-topic-detail__body {
        font-size: 0.9rem;
        line-height: 1.65;
    }
    .ff-topic-detail__body img {
        border-radius: var(--ff-radius-sm);
    }
    .ff-topic-detail__body pre {
        font-size: 0.8rem;
        padding: 12px;
        overflow-x: auto;
    }
    .ff-topic-detail__body blockquote {
        padding: 10px 12px;
        margin: 12px 0;
        font-size: 0.85rem;
    }
    .ff-topic-detail__actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ---- Comments ---- */
    .ff-comments {
        padding: 0;
    }
    .ff-comment {
        padding: 12px 10px;
    }
    .ff-comment__header {
        flex-wrap: wrap;
        gap: 6px;
    }
    .ff-comment__body {
        font-size: 0.85rem;
        line-height: 1.6;
    }
    .ff-comment__actions {
        gap: 10px;
        font-size: 0.75rem;
    }
    .ff-comment-reply {
        margin-left: 16px;
        padding-left: 12px;
    }
    .ff-comment-form textarea {
        min-height: 80px;
        font-size: 0.9rem;
    }

    /* ---- Section Header ---- */
    .ff-section-header {
        padding: 16px 12px;
        gap: 10px;
    }
    .ff-section-header__info {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .ff-section-header__icon {
        font-size: 2rem;
    }
    .ff-section-header__title {
        font-size: 1.2rem;
    }
    .ff-section-header__desc {
        font-size: 0.8rem;
    }
    .ff-section-header__stats {
        justify-content: center;
        gap: 12px;
        font-size: 0.8rem;
    }

    /* ---- Hero (Homepage Banner) ---- */
    .ff-hero {
        padding: 20px 14px;
        text-align: center;
    }
    .ff-hero__title {
        font-size: 1.3rem;
        line-height: 1.3;
    }
    .ff-hero__subtitle {
        font-size: 0.8rem;
    }
    .ff-hero__actions {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
    .ff-hero__actions .ff-btn {
        width: 100%;
        justify-content: center;
    }

    /* ---- Profile Header ---- */
    .ff-profile-header {
        padding: 16px 12px;
    }
    .ff-profile-header__info {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .ff-profile-header__avatar {
        width: 72px;
        height: 72px;
    }
    .ff-profile-header__details {
        padding-top: 8px;
    }
    .ff-profile-header__name {
        font-size: 1.1rem;
    }
    .ff-profile-header__meta {
        justify-content: center;
        flex-wrap: wrap;
        font-size: 0.8rem;
    }
    .ff-profile-header__stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }
    .ff-profile-header__stat-num {
        font-size: 1rem;
    }
    .ff-profile-header__stat-label {
        font-size: 0.7rem;
    }

    /* ---- Profile Tabs ---- */
    .ff-profile-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ff-profile-tabs::-webkit-scrollbar {
        display: none;
    }
    .ff-profile-tabs__btn {
        white-space: nowrap;
        font-size: 0.8rem;
        padding: 8px 12px;
    }

    /* ---- Modal (New Topic, etc.) ---- */
    .ff-modal {
        padding: 16px 12px;
        margin: 8px;
        max-height: 92vh;
        border-radius: var(--ff-radius);
    }
    .ff-modal__container {
        max-height: 90vh;
    }
    .ff-modal__title {
        font-size: 1.1rem;
    }
    .ff-modal__close {
        top: 12px;
        right: 12px;
    }
    .ff-form-group label {
        font-size: 0.8rem;
    }
    .ff-form-row--inline {
        flex-direction: column;
    }
    .ff-form-group input,
    .ff-form-group select,
    .ff-form-group textarea {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* ---- Notifications Dropdown ---- */
    .ff-notifications__dropdown {
        right: -40px;
        width: calc(100vw - 24px);
        max-width: 360px;
    }

    /* ---- User Menu Dropdown ---- */
    .ff-user-menu__dropdown {
        right: 0;
        min-width: 180px;
    }

    /* ---- Auth Pages (Login/Register) ---- */
    .ff-auth-card {
        padding: 24px 18px;
        border-radius: var(--ff-radius);
    }
    .ff-auth-card__title {
        font-size: 1.2rem;
    }

    /* ---- Load More / Pagination ---- */
    .ff-load-more {
        margin: 16px 0;
    }
    .ff-load-more .ff-btn {
        width: 100%;
    }
    .ff-pagination {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }

    /* ---- Footer ---- */
    .ff-footer__inner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 16px 12px;
    }
    .ff-footer__links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    /* ---- Breadcrumbs ---- */
    .ff-breadcrumbs {
        font-size: 0.75rem;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .ff-breadcrumbs::-webkit-scrollbar {
        display: none;
    }

    /* ---- Toast / Notifications ---- */
    .ff-toast {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        max-width: none;
    }

    /* ---- General Cards ---- */
    .ff-card {
        border-radius: var(--ff-radius-sm);
    }
    .ff-card__body {
        padding: 12px;
    }
    .ff-card__header {
        padding: 10px 12px;
    }
    .ff-card__stats {
        gap: 16px;
        flex-wrap: wrap;
    }

    /* ---- Alert/Notice ---- */
    .ff-alert {
        font-size: 0.8rem;
        padding: 10px 12px;
    }
}

/* -----------------------------------------------
   SMALL MOBILE (≤ 400px)
   Extra tight layouts for small phones
   ----------------------------------------------- */
@media (max-width: 400px) {
    html {
        font-size: 13.5px;
    }

    .ff-header__inner {
        padding: 0 8px;
        gap: 6px;
    }
    .ff-header__logo-text {
        font-size: 0.9rem;
    }

    /* Topic cards: even tighter */
    .ff-card-topic__vote {
        padding: 6px 4px;
        min-width: 36px;
    }
    .ff-card-topic__content {
        padding: 8px;
    }
    .ff-card-topic__title {
        font-size: 0.85rem;
    }

    /* Comments: reduce nesting depth */
    .ff-comment-reply {
        margin-left: 8px;
        padding-left: 8px;
    }
    .ff-comment-reply .ff-comment-reply {
        margin-left: 4px;
        padding-left: 4px;
    }

    /* Content wrapper */
    .ff-content-wrapper {
        padding: 8px 6px;
    }

    /* Modal fills screen */
    .ff-modal {
        margin: 4px;
        padding: 12px 10px;
        border-radius: var(--ff-radius-sm);
    }

    /* Buttons: full width */
    .ff-btn {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    /* Auth card */
    .ff-auth-card {
        padding: 20px 14px;
    }
}

/* -----------------------------------------------
   TOUCH & MOBILE-SPECIFIC ENHANCEMENTS
   ----------------------------------------------- */

/* Increase tap targets for mobile */
@media (pointer: coarse) {
    .ff-vote-btn {
        min-width: 36px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ff-card-topic__action {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }
    .ff-sidebar__link {
        padding: 10px 12px;
        min-height: 40px;
    }
    .ff-feed-controls__btn {
        min-height: 36px;
    }
    .ff-comment__actions a,
    .ff-comment__actions button {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }
    .ff-btn--sm {
        min-height: 36px;
        padding: 6px 14px;
    }
}

/* Prevent horizontal overflow */
@media (max-width: 900px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    .ff-topic-detail__body {
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .ff-topic-detail__body pre {
        max-width: 100%;
        overflow-x: auto;
    }
    .ff-topic-detail__body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ff-topic-detail__body img {
        max-width: 100%;
        height: auto;
    }
}

/* Smooth transitions for mobile orientation change */
@media (max-width: 900px) {
    .ff-main,
    .ff-content-wrapper,
    .ff-card-topic {
        transition: none;
    }
}

/* Safe area insets for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
    .ff-header {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    .ff-footer {
        padding-bottom: env(safe-area-inset-bottom);
    }
    @media (max-width: 600px) {
        .ff-sidebar {
            padding-bottom: env(safe-area-inset-bottom);
        }
        .ff-modal {
            padding-bottom: calc(12px + env(safe-area-inset-bottom));
        }
    }
}

/* Landscape mobile: reduce vertical space */
@media (max-height: 500px) and (max-width: 900px) {
    .ff-header {
        height: 44px;
    }
    .ff-layout {
        padding-top: 44px;
    }
    .ff-sidebar {
        top: 44px;
    }
    .ff-hero {
        padding: 14px 16px;
    }
    .ff-hero__title {
        font-size: 1.1rem;
    }
    .ff-section-header {
        padding: 12px;
    }
}

/* Print: clean up for printing */
@media print {
    .ff-header,
    .ff-sidebar,
    .ff-sidebar-right,
    .ff-footer,
    .ff-card-topic__vote,
    .ff-card-topic__action,
    .ff-feed-controls,
    .ff-comment__actions,
    .ff-overlay {
        display: none !important;
    }
    .ff-main {
        margin: 0 !important;
    }
    .ff-card-topic {
        break-inside: avoid;
        border: 1px solid #ccc;
    }
    body.ff-body {
        background: #fff;
        color: #000;
    }
}