/* ==================== PROFESSIONAL MOBILE APP DESIGN ==================== */
/* Tide.com-style Mobile Footer & Header */

/* ========== MOBILE TYPOGRAPHY IMPROVEMENTS ========== */
@media (max-width: 768px) {
    /* Base font size for mobile */
    body {
        font-size: 14px !important;
    }
    
    /* News card titles */
    .news-card h4 {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }
    
    /* News card excerpt */
    .news-card .excerpt-text {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }
    
    /* Meta information */
    .news-card .meta {
        font-size: 0.75rem !important;
    }
    
    /* Section headings */
    h2, .section-title {
        font-size: 1.3rem !important;
    }
    
    h3 {
        font-size: 1.1rem !important;
    }
    
    /* Button text */
    button, .btn {
        font-size: 0.85rem !important;
    }
}

/* ========== HIDE MOBILE ELEMENTS ON DESKTOP ========== */
@media (min-width: 769px) {
    /* Hide mobile-only elements on desktop */
    .mobile-search-bar,
    .mobile-menu-toggle,
    .mobile-nav-drawer,
    .mobile-overlay,
    .footer-accordion,
    .footer-contact-compact,
    .footer-legal {
        display: none !important;
    }
    
    /* Show desktop elements */
    .header-search-bar {
        display: flex !important;
    }
    
    /* Show desktop footer sections */
    .footer-desktop-sections {
        display: grid !important;
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr !important;
        gap: 2rem !important;
    }
    
    /* Show desktop footer bottom */
    .footer-bottom {
        display: block !important;
    }
}

/* ========== MOBILE HEADER ========== */
@media (max-width: 768px) {
    /* Hide desktop elements */
    .top-bar {
        display: none !important; /* Remove live update, weather, etc */
    }
    
    .theme-toggle {
        display: none !important; /* Remove brightness toggle */
    }
    
    .main-nav {
        display: none !important; /* Hide horizontal navigation - will be in hamburger */
    }
    
    .header-search-bar {
        display: none !important; /* Hide desktop search on mobile */
    }
    
    /* Header layout: Logo | Search | Submit | Menu */
    .header {
        padding: 0.75rem 0;
    }
    
    .header-content {
        display: grid;
        grid-template-columns: 60px 1fr auto auto;
        gap: 0.5rem;
        align-items: center;
    }
    
    /* Logo - DRN Circle only */
    .logo {
        grid-column: 1;
        padding: 0;
    }
    
    .logo-circle {
        width: 40px !important;
        height: 40px !important;
    }
    
    .logo-drn {
        font-size: 0.85rem !important;
    }
    
    /* Hide logo text on mobile */
    .logo-text,
    .logo h1,
    .logo .tagline {
        display: none !important;
    }
    
    /* Search bar - wide, centered */
    .header-actions {
        grid-column: 2 / 4;
        display: flex;
        gap: 0.5rem;
        width: 100%;
    }
    
    #searchBtn {
        display: none !important; /* Hide search button, show search bar instead */
    }
    
    /* Add search input directly in header */
    .mobile-search-bar {
        flex: 1;
        position: relative;
    }
    
    .mobile-search-bar input {
        width: 100%;
        padding: 0.6rem 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 25px;
        font-size: 0.85rem;
        background: #f9fafb;
    }
    
    .mobile-search-bar input::placeholder {
        font-size: 0.75rem;
        color: #9ca3af;
    }
    
    /* Submit Story Button */
    .submit-story-btn {
        padding: 0.6rem 1rem !important;
        font-size: 0.85rem !important;
        white-space: nowrap;
    }
    
    .submit-story-btn span {
        display: none; /* Hide text, show only icon */
    }
    
    /* Hamburger Menu */
    .mobile-menu-toggle {
        grid-column: 4;
        background: var(--accent-blue);
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        color: white;
        font-size: 1.2rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Mobile Navigation Drawer */
    .mobile-nav-drawer {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: white;
        box-shadow: -5px 0 20px rgba(0,0,0,0.2);
        z-index: 9999;
        transition: right 0.3s ease;
        overflow-y: auto;
        border-radius: 0;
    }
    
    .mobile-nav-drawer::before,
    .mobile-nav-drawer::after {
        display: none !important;
    }
    
    .mobile-nav-drawer.active {
        right: 0;
    }
    
    .mobile-nav-header {
        padding: 1.5rem;
        background: linear-gradient(135deg, var(--accent-blue) 0%, #1e40af 100%);
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .mobile-nav-close {
        background: rgba(255,255,255,0.2);
        border: none;
        color: white;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        font-size: 1.2rem;
        cursor: pointer;
    }
    
    .mobile-nav-menu {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .mobile-nav-menu li {
        border-bottom: 1px solid #e5e7eb;
    }
    
    .mobile-nav-menu li a {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.5rem;
        color: #1f2937;
        text-decoration: none;
        font-size: 0.95rem;
        transition: background 0.2s;
    }
    
    .mobile-nav-menu li a:hover,
    .mobile-nav-menu li a.active {
        background: #f3f4f6;
        color: var(--accent-blue);
    }
    
    .mobile-nav-menu li a i {
        width: 20px;
        text-align: center;
        color: var(--accent-blue);
    }
    
    /* Overlay */
    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 9998;
        display: none;
    }
    
    .mobile-overlay.active {
        display: block;
    }
}

/* ========== MOBILE FOOTER (Tide.com Style) ========== */
@media (max-width: 768px) {
    .footer {
        padding: 2rem 0 1rem !important;
        font-size: 0.8rem; /* Smaller font for mobile */
    }
    
    .footer-content {
        display: block !important;
    }
    
    /* Hide desktop footer sections */
    .footer-section,
    .footer-desktop-sections {
        display: none !important;
    }
    
    .footer-bottom {
        display: none !important; /* Will use footer-legal instead */
    }
    
    /* Show accordion footer on mobile */
    .footer-accordion {
        display: block;
        border-top: 1px solid rgba(255,255,255,0.2);
    }
    
    /* Show compact contact and legal on mobile */
    .footer-contact-compact,
    .footer-legal {
        display: block;
    }
    
    /* Accordion Footer Menu */
    .footer-accordion {
        border-top: 1px solid rgba(255,255,255,0.2);
    }
    
    .footer-accordion-item {
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    
    .footer-accordion-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 0;
        background: none;
        border: none;
        color: white;
        font-size: 0.9rem;
        font-weight: 600;
        width: 100%;
        text-align: left;
        cursor: pointer;
        transition: color 0.2s;
    }
    
    .footer-accordion-header:hover {
        color: var(--accent-blue);
    }
    
    .footer-accordion-icon {
        font-size: 0.8rem;
        transition: transform 0.3s;
    }
    
    .footer-accordion-header.active .footer-accordion-icon {
        transform: rotate(180deg);
    }
    
    .footer-accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .footer-accordion-content.active {
        max-height: 500px;
    }
    
    .footer-accordion-body {
        padding: 0 0 1rem 0;
        font-size: 0.8rem;
        line-height: 1.6;
        color: rgba(255,255,255,0.85);
    }
    
    .footer-accordion-body p {
        margin-bottom: 0.5rem;
    }
    
    .footer-accordion-body ul {
        list-style: none;
        padding: 0;
        margin: 0.5rem 0;
    }
    
    .footer-accordion-body ul li {
        padding: 0.4rem 0;
    }
    
    .footer-accordion-body ul li a {
        color: rgba(255,255,255,0.85);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
    }
    
    .footer-accordion-body ul li a:hover {
        color: white;
        text-decoration: underline;
    }
    
    .footer-accordion-body ul li i {
        font-size: 0.7rem;
        width: 16px;
    }
    
    /* Contact Info - Compact */
    .footer-contact-compact {
        padding: 1.5rem 0;
        border-top: 1px solid rgba(255,255,255,0.2);
        font-size: 0.75rem;
        color: rgba(255,255,255,0.7);
        text-align: center;
    }
    
    .footer-contact-compact p {
        margin: 0.3rem 0;
    }
    
    .footer-contact-compact a {
        color: rgba(255,255,255,0.85);
        text-decoration: none;
    }
    
    /* Legal Section */
    .footer-legal {
        padding: 1rem 0;
        border-top: 1px solid rgba(255,255,255,0.2);
        font-size: 0.7rem;
        color: rgba(255,255,255,0.6);
    }
    
    .footer-legal-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem 1rem;
        margin-bottom: 0.5rem;
    }
    
    .footer-legal-links a {
        color: rgba(255,255,255,0.7);
        text-decoration: none;
    }
    
    .footer-legal-links a:hover {
        color: white;
        text-decoration: underline;
    }
    
    .footer-copyright {
        text-align: center;
        margin-top: 0.5rem;
        font-size: 0.65rem;
    }
    
    /* Social Icons - Compact */
    .footer-social-compact {
        display: flex;
        justify-content: center;
        gap: 1rem;
        padding: 1rem 0;
    }
    
    .footer-social-compact a {
        color: rgba(255,255,255,0.7);
        font-size: 1.2rem;
        transition: color 0.2s;
    }
    
    .footer-social-compact a:hover {
        color: white;
    }
}

/* ========== MOBILE TYPOGRAPHY ========== */
@media (max-width: 768px) {
    /* Reduce all font sizes for mobile */
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.3rem !important;
    }
    
    h3 {
        font-size: 1.1rem !important;
    }
    
    h4 {
        font-size: 1rem !important;
    }
    
    p {
        font-size: 0.85rem !important;
    }
    
    /* Buttons */
    button,
    .btn {
        font-size: 0.85rem !important;
        padding: 0.6rem 1rem !important;
    }
    
    /* News cards */
    .news-card h3 {
        font-size: 0.9rem !important;
    }
    
    .news-card p {
        font-size: 0.75rem !important;
    }
    
    .news-card .news-meta {
        font-size: 0.7rem !important;
    }
}

/* ========== MOBILE SECTIONS - COMPACT ========== */
@media (max-width: 768px) {
    .hero-section {
        padding: 1rem 0 !important;
    }
    
    .section {
        padding: 1.5rem 0 !important;
    }
    
    .container {
        padding: 0 1rem !important;
    }
    
    /* Remove extra spacing */
    .news-grid {
        gap: 1rem !important;
        margin-top: 1rem !important;
    }
    
    .featured-section {
        margin: 1rem 0 !important;
    }
}