/**
 * HBC Church Website - Responsive Stylesheet
 * Mobile and tablet specific styles
 */

/* ===== TABLET STYLES (max-width: 1024px) ===== */
@media (max-width: 1024px) {
    
    /* Typography adjustments */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    
    /* Header adjustments */
    .header-top {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .church-logo img {
        height: 60px;
    }
    
    .church-name h1 {
        font-size: 1.5rem;
    }
    
    .church-name .tagline {
        font-size: 0.875rem;
    }
    
    /* Navigation adjustments */
    .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Bible quote bar */
    .bible-quote-bar {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .quote-text {
        font-size: 1.125rem;
    }
    
    .quote-reference {
        font-size: 0.875rem;
    }
    
    /* Content blocks */
    .content-article {
        padding: var(--spacing-md);
    }
    
    /* Mission statement */
    .mission-header h1 {
        font-size: 2rem;
    }
    
    .mission-block {
        padding: var(--spacing-md);
    }
    
    .mission-block h2 {
        font-size: 1.5rem;
    }
    
    .mission-block p {
        font-size: 1rem;
    }
}

/* ===== MOBILE STYLES (max-width: 768px) ===== */
@media (max-width: 768px) {
    
    /* Typography */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    /* Header */
    .header-top {
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }
    
    .logo-section {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    .church-logo img {
        height: 50px;
    }
    
    .church-name h1 {
        font-size: 1.25rem;
    }
    
    .church-name .tagline {
        font-size: 0.75rem;
    }
    
    /* Auth section */
    .auth-section {
        width: 100%;
        justify-content: center;
    }
    
    .user-info {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .welcome-message {
        font-size: 0.875rem;
        margin-right: 0;
    }
    
    .auth-links {
        flex-direction: column;
        width: 100%;
    }
    
    .btn {
        width: 100%;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Navigation - Mobile Menu */
    .mobile-menu-toggle {
        display: block;
        position: absolute;
        top: 1rem;
        right: 1rem;
    }
    
    .nav-menu {
        display: none;
        flex-direction: column;
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    .nav-menu > li {
        border-bottom: 1px solid var(--color-border);
    }
    
    .nav-link {
        padding: 1rem;
        text-align: left;
        border-bottom: none;
    }
    
    .dropdown-menu {
        position: static;
        box-shadow: none;
        background: var(--color-bg-main);
    }
    
    .nav-dropdown:hover .dropdown-menu {
        display: none; /* Disable hover on mobile */
    }
    
    .nav-dropdown.active .dropdown-menu {
        display: block;
    }
    
    .dropdown-menu a {
        padding-left: 2rem;
    }
    
    /* Bible quote */
    .bible-quote-bar {
        padding: var(--spacing-sm);
    }
    
    .quote-text {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    .quote-reference {
        font-size: 0.75rem;
    }
    
    /* Message bar */
    .message-item {
        font-size: 0.875rem;
        padding: 0 2rem;
    }
    
    /* Aside headers */
    .aside-header h2 {
        font-size: 1.25rem;
    }
    
    .aside-content {
        padding: var(--spacing-sm);
    }
    
    /* Content blocks */
    .content-block {
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
    }
    
    .content-block h3 {
        font-size: 1.125rem;
    }
    
    /* Articles */
    .content-article {
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }
    
    .content-article h2 {
        font-size: 1.5rem;
    }
    
    .article-summary {
        font-size: 1rem;
        padding-left: var(--spacing-sm);
    }
    
    .article-body {
        font-size: 0.9375rem;
    }
    
    .article-meta {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    /* Social links */
    .social-links {
        flex-direction: column;
    }
    
    .social-link {
        width: 100%;
        text-align: center;
    }
    
    /* Mission statement */
    .mission-statement {
        padding: var(--spacing-sm);
    }
    
    .mission-header {
        padding: var(--spacing-md) 0;
    }
    
    .mission-header h1 {
        font-size: 1.5rem;
    }
    
    .mission-block {
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }
    
    .mission-block h2 {
        font-size: 1.25rem;
    }
    
    .mission-block p {
        font-size: 0.9375rem;
    }
    
    /* Ticker */
    .ticker-item {
        font-size: 1rem;
        padding: 0 2rem;
    }
    
    /* Scroll to top button */
    .scroll-to-top {
        width: 40px;
        height: 40px;
        bottom: 1rem;
        right: 1rem;
        font-size: 1.25rem;
    }
}

/* ===== SMALL MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
    
    /* Further typography reduction */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.125rem; }
    
    /* Header */
    .church-name h1 {
        font-size: 1.125rem;
    }
    
    .church-name .tagline {
        font-size: 0.625rem;
    }
    
    /* Reduce spacing */
    .main-container {
        margin: var(--spacing-sm) auto;
        gap: var(--spacing-sm);
    }
    
    /* Bible quote */
    .quote-text {
        font-size: 0.875rem;
    }
    
    .quote-reference {
        font-size: 0.625rem;
    }
    
    /* Message bar */
    .message-item {
        font-size: 0.75rem;
        padding: 0 1.5rem;
    }
    
    /* Content */
    .content-block,
    .content-article {
        padding: 0.75rem;
    }
    
    /* Mission blocks */
    .mission-block {
        padding: 0.75rem;
    }
    
    .mission-block h2 {
        font-size: 1.125rem;
    }
    
    .mission-block p {
        font-size: 0.875rem;
        line-height: 1.6;
    }
    
    /* Footer */
    .footer-tabs {
        padding: var(--spacing-sm);
    }
    
    .info-tab {
        min-width: 80px;
        padding: 0.5rem;
    }
    
    .info-tab .tab-icon {
        font-size: 1.25rem;
    }
    
    .info-tab .tab-text {
        font-size: 0.625rem;
    }
    
    .ticker-item {
        font-size: 0.875rem;
        padding: 0 1.5rem;
    }
    
    .footer-bottom {
        padding: var(--spacing-sm);
    }
    
    .footer-info p,
    .footer-links a {
        font-size: 0.75rem;
    }
}

/* ===== LANDSCAPE MODE (MOBILE) ===== */
@media (max-width: 768px) and (orientation: landscape) {
    
    .header-top {
        padding: 0.5rem var(--spacing-sm);
    }
    
    .church-logo img {
        height: 40px;
    }
    
    .church-name h1 {
        font-size: 1rem;
    }
    
    .church-name .tagline {
        font-size: 0.625rem;
    }
    
    .nav-link {
        padding: 0.5rem 1rem;
    }
    
    .bible-quote-bar {
        padding: 0.5rem var(--spacing-sm);
    }
    
    .quote-text {
        font-size: 0.875rem;
    }
    
    .quote-reference {
        font-size: 0.75rem;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    
    /* Hide navigation and interactive elements */
    .site-header,
    .bible-quote-bar,
    .message-bar,
    .footer-tabs,
    .scrolling-ticker,
    .scroll-to-top,
    .auth-section,
    .social-links {
        display: none;
    }
    
    /* Adjust layout for print */
    .main-container {
        display: block;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .left-aside,
    .right-aside {
        display: none;
    }
    
    .main-content {
        width: 100%;
    }
    
    /* Remove backgrounds */
    body,
    .content-article,
    .content-block {
        background: white;
        box-shadow: none;
    }
    
    /* Adjust colors for print */
    * {
        color: black !important;
    }
    
    a {
        text-decoration: underline;
    }
    
    /* Page breaks */
    .content-article {
        page-break-inside: avoid;
    }
}

/* ===== ACCESSIBILITY FEATURES ===== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --color-text-primary: #000000;
        --color-text-white: #ffffff;
        --color-border: #000000;
    }
    
    .nav-link {
        border: 2px solid var(--color-text-primary);
    }
    
    .btn {
        border: 2px solid var(--color-text-primary);
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .scroll-messages,
    .ticker-content {
        animation: none;
    }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    /* Uncomment if you want automatic dark mode
    :root {
        --color-bg-main: #1a1a1a;
        --color-bg-white: #2d2d2d;
        --color-text-primary: #ffffff;
        --color-text-secondary: #e0e0e0;
    }
    */
}


/* =============================================================================
   MOBILE NAVIGATION — DRILL-DOWN (rev 7, 2026-07-01)  [replaces rev 6]
   Desired flow (phones, <=768px):
     STATE A  collapsed  : only the hamburger shows. Menu + submenus hidden,
                           site title header visible, page CONTENT dominates.
                           (Every fresh page load starts here — e.g. Fundraising
                           page is fully visible, not covered by the menu.)
     STATE B  menu open  : tap hamburger -> the 9 top-level items list out.
     STATE C  drilled in : tap a top-level item -> the site title header, the
                           hamburger and the other 8 items ALL hide; only that
                           section's submenu shows, led by a [<- Back] button.
                           Back returns to STATE B.
     Navigate            : tap a submenu link -> the page loads in STATE A.

   All rules use !important so they win regardless of the main.css / responsive.css
   load order (main.css force-open Fix1/Fix5 have now also been de-scoped from the
   nav). Submenu rules are scoped under .main-navigation so admin table dropdowns
   are never affected.
   ============================================================================= */

/* Injected Back button is hidden on desktop; shown only inside the mobile drill-down */
.dropdown-back { display: none; }

@media (max-width: 768px) {

    /* ---- Hamburger: always available in STATE A and STATE B ---- */
    .mobile-menu-toggle {
        display: block !important;
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 1002;
    }

    /* ---- STATE A (default): whole menu hidden ---- */
    .nav-menu {
        display: none !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    /* ---- STATE B: hamburger opened ---- */
    .nav-menu.active {
        display: flex !important;
    }

    /* Top-level rows fill the width */
    .nav-menu > li {
        border-bottom: 1px solid var(--color-border, #e0e0e0);
        flex: none !important;
        width: 100% !important;
    }
    .nav-link {
        padding: 0.95rem 1.1rem;
        font-size: 1.05rem;
        text-align: left;
    }
    /* Chevron hint on the items that drill into a submenu */
    .nav-dropdown > .nav-link::after {
        content: "\203A";              /* > */
        float: right;
        font-size: 1.3rem;
        line-height: 1;
        opacity: 0.55;
    }

    /* ---- Submenu base: hidden + forced into normal flow (defeats absolute) ---- */
    .main-navigation .nav-dropdown > .dropdown-menu {
        display: none !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border: none !important;
        box-shadow: none !important;
        transform: none !important;
        z-index: auto !important;
    }
    /* Neutralize hover-open on touch devices */
    .main-navigation .nav-dropdown:hover > .dropdown-menu {
        display: none !important;
    }
    /* ---- STATE C: the opened section reveals its submenu ---- */
    .main-navigation .nav-dropdown.submenu-open > .dropdown-menu {
        display: block !important;
    }

    /* ---- STATE C drill-down: hide EVERYTHING except the open submenu ---- */
    /* hide the site title/logo/search header */
    body.submenu-active .site-header .header-top { display: none !important; }
    /* hide the hamburger (Back button is the control now) */
    body.submenu-active .mobile-menu-toggle { display: none !important; }
    /* hide the other top-level items */
    body.submenu-active .nav-menu > li:not(.submenu-open) { display: none !important; }
    /* hide the opened section's own label + its chevron */
    body.submenu-active .nav-dropdown.submenu-open > .nav-link { display: none !important; }
    body.submenu-active .nav-dropdown.submenu-open > .nav-link::after { content: none !important; }

    /* Back button (JS injects it as the first child of the open submenu) */
    .dropdown-back {
        display: block;
        padding: 1rem 1.25rem;
        font-size: 1.1rem;
        font-weight: 700;
        color: #ffffff;
        background: var(--color-primary, #2980b9);
        cursor: pointer;
        user-select: none;
        border: none;
    }

    /* Submenu items: large, full-width, dominate the screen */
    .main-navigation .dropdown-menu a {
        display: block !important;
        padding: 1.1rem 1.25rem !important;
        padding-left: 1.25rem !important;
        font-size: 1.1rem;
        border-bottom: 1px solid var(--color-border, #e0e0e0);
        background: transparent;
        white-space: normal;
    }
}