/* css/responsive.css — Mobile-first breakpoints */

/* Safe area for notched devices */
@supports (padding: env(safe-area-inset-left)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .site-header .container { padding-left: max(var(--space-md), env(safe-area-inset-left)); padding-right: max(var(--space-md), env(safe-area-inset-right)); }
  .back-to-top { right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); }
}

@media (max-width: 767px) {
  html { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  body { overflow-x: hidden; padding-bottom: 100px; }
  #main, main { padding-bottom: 60px; min-height: 0; }
  .container { padding-left: var(--space-md); padding-right: var(--space-md); }
  #site-header { padding-top: 64px; }
  .site-header .container { flex-wrap: wrap; }
  .main-nav {
    display: none;
    width: 100%;
    order: 3;
  }
  .main-nav.open {
    display: block;
  }
  .main-nav ul {
    flex-direction: column;
    padding: var(--space-md) 0;
  }
  .main-nav li { width: 100%; }
  .main-nav a { display: flex; align-items: center; padding: var(--space-sm) var(--space-md); min-height: 44px; line-height: normal; box-sizing: border-box; }
  .main-nav .nav-label { align-items: flex-start; text-align: left; }
  .has-dropdown .dropdown {
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    background: rgba(0,0,0,0.1);
  }
  .has-dropdown.open .dropdown { display: flex; }
  .menu-toggle, .theme-toggle { display: block; margin-left: auto; min-width: 44px; min-height: 44px; padding: 0; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .hero-today-inner { flex-direction: column; gap: var(--space-md); }
  .hero-analog-clock { width: 130px; }
  .hero-analog-clock #clock { box-shadow: 0 0 0 4px rgba(255,255,255,0.3), 0 8px 20px rgba(0,0,0,0.3); }
  .hero-today .date-kn { font-size: 1.1rem; }
  .hero-clock { font-size: 1.35rem; letter-spacing: 0.04em; }
  .hero-chips { flex-wrap: wrap; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { min-height: 48px; padding: var(--space-sm) var(--space-md); width: 100%; justify-content: center; text-align: center; }

  .key-dates-strip { flex-direction: column; align-items: flex-start; gap: var(--space-sm); padding: var(--space-md) 0; }
  .key-dates-chips {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    gap: var(--space-sm);
    padding-bottom: var(--space-xs);
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .key-date-chip { flex-shrink: 0; scroll-snap-align: start; min-height: 44px; padding: var(--space-sm) var(--space-md); display: inline-flex; align-items: center; }

  .index-quick-cards { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: var(--space-sm); }
  .index-card { padding: var(--space-lg) var(--space-md); min-height: 100px; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .section-cta { margin-left: 0; }
  .calendar-section { margin: var(--space-md) 0; overflow: visible; }
  .calendar-scroll-wrap {
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  /* Wider calendar on mobile so date/tithi/festival are readable; user scrolls horizontally */
  .calendar-scroll-wrap .calendar-days-header,
  .calendar-scroll-wrap .calendar-grid {
    width: 420px;
    min-width: 420px;
    flex-shrink: 0;
  }
  /* Keep grid columns equal to header; allow vertical overflow for wrapped content */
  .calendar-scroll-wrap .calendar-grid {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: visible;
  }
  .calendar-scroll-wrap .calendar-days-header { position: relative; }
  #calendar { scroll-margin-top: 72px; }
  .calendar-nav { padding: var(--space-sm) var(--space-md); }
  .nav-btn { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
  .cal-cell {
    min-height: 64px;
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    overflow: visible;
  }
  .cal-date { font-size: 0.95rem; line-height: 1.2; }
  .cal-tithi { font-size: 0.6rem; line-height: 1.2; word-break: break-word; }
  .cal-festival {
    font-size: 0.6rem;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }
  .day-header { font-size: 0.7rem; padding: 6px 4px; }
  .calendar-legend { gap: var(--space-sm); font-size: 0.75rem; padding: var(--space-sm) var(--space-md); }
  .calendar-legend::after {
    content: "ದಿನ ಟ್ಯಾಪ್ ಮಾಡಿ → ಪೂರ್ಣ ವಿವರ (Tap a day for full details)";
    display: block;
    width: 100%;
    margin-top: var(--space-sm);
    font-size: 0.75rem;
    color: var(--text-muted);
  }
  .legend-item { font-size: 0.75rem; }
  .data-table { font-size: 0.85rem; }
  .data-table th, .data-table td { padding: var(--space-sm); }
  .quick-links-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-link-card { min-height: 56px; padding: var(--space-md); }
  .rashi-grid { grid-template-columns: 1fr; }
  .rashi-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .rashi-tab { flex-shrink: 0; white-space: nowrap; min-height: 44px; padding: var(--space-sm) var(--space-md); }
  .rashi-tab-pane { min-height: 100px; }
  .muhurat-month-grid { grid-template-columns: 1fr; }
  .muhurat-summary { gap: var(--space-md); }
  .muhurat-hero::before, .muhurat-hero::after { display: none; }
  .page-hero.muhurat-hero { padding: var(--space-lg) var(--space-md); }
  .page-hero.muhurat-hero h1 { font-size: 1.25rem; }
  .muhurat-hero-badge { font-size: 0.75rem; padding: 0.3rem 0.6rem; }
  .muhurat-hero-chips { gap: var(--space-xs); margin-top: var(--space-sm); }
  .muhurat-hero-chip { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
  .muhurat-best-strip { flex-direction: column; align-items: flex-start; }
  .muhurat-notice { flex-direction: column; align-items: flex-start; }

  /* Festivals & Holidays responsive */
  .table-summary { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .table-summary .summary-main { align-items: flex-start; }
  .festival-search-wrap { width: 100%; }
  .festival-search-input { max-width: 100% !important; width: 100%; box-sizing: border-box; min-height: 44px; }
  .filter-chips { gap: var(--space-sm); }
  .filter-chip { min-height: 44px; padding: var(--space-sm) var(--space-md); font-size: 0.85rem; }
  .table-scroll-wrap { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; border-radius: var(--radius-md); }
  .table-scroll-wrap .data-table { min-width: 560px; font-size: 0.85rem; }
  .table-wrap { width: 100%; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .table-wrap .data-table { min-width: 280px; }
  #rahuKalaTable, #festivalList { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; min-width: 0; }
  #rahuKalaTable .data-table, #festivalList .data-table { min-width: 280px; }
  .content-section { overflow: visible; }
  .container { overflow-x: visible; }
  .festival-list-table .add-to-cal-header,
  .festival-list-table .add-to-cal-cell { display: none !important; }
  .muhurat-tips-chips { flex-direction: column; }
  .muhurat-tip-chip { max-width: none; }
  .faq-question { padding: var(--space-md) var(--space-md); min-height: 52px; font-size: 0.95rem; }
  .faq-answer { padding-left: var(--space-md); padding-right: var(--space-md); }
  .page-hero { padding: var(--space-lg) var(--space-md); }
  .page-hero h1 { font-size: 1.35rem; }
  .page-hero .page-hero-sub { font-size: 0.95rem; }
  .page-card { padding: var(--space-md); }
  .page-card h2 { font-size: 1.05rem; }
  .coming-up-list { flex-direction: column; }
  .coming-up-item { min-width: 0; }
}

/* Day detail popup: full-screen on mobile for better readability */
@media (max-width: 767px) {
  .day-detail-popup {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding: var(--space-lg);
    padding-top: calc(64px + var(--space-lg));
  }
  .day-detail-popup button {
    min-height: 48px;
    padding: var(--space-md) var(--space-lg);
    font-size: 1rem;
  }
}

/* Extra small phones: slightly smaller calendar cells so more fits on screen */
@media (max-width: 380px) {
  .cal-cell { min-height: 46px; padding: 2px 4px; }
  .cal-date { font-size: 0.9rem; }
  .cal-festival { font-size: 0.5rem; }
  .day-header { font-size: 0.65rem; padding: 4px 2px; }
  .calendar-nav h2 { font-size: 1.1rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .cal-cell { min-height: 80px; }
}

@media print {
  .site-header, .ad-slot, .theme-toggle, .menu-toggle, .hero-actions .btn, .nav-btn, .day-detail-popup { display: none !important; }
  .ad-footer-sticky { position: static !important; }
  body { background: white; color: #1a1a1a; }
  .calendar-section { box-shadow: none; border: 1px solid #ccc; }
}