/**
 * Responsive CSS - Dark Theme Simplicity
 * All media queries consolidated
 * Version: 1.0.0
 */

/* ============================================
   MOBILE FIRST APPROACH
   Base styles are mobile (< 768px)
   ============================================ */

/* ============================================
   TABLET SPECIFIC (768px to 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Hide sidebar on tablets for clean reading experience */
  .single .post-sidebar {
    display: none !important;
  }
  
  /* Ensure main content takes full width */
  .single .mobile-main-content {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .single .mobile-content-padding {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  
  .single .content-container {
    max-width: 100% !important;
  }
  
  /* Center the content for better readability */
  .single .entry-content {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================
   TABLET (768px and up)
   ============================================ */
@media (min-width: 768px) {
  
  /* Typography adjustments */
  html {
    font-size: 17px;
  }
  
  h1 {
    font-size: 2.5rem;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  h3 {
    font-size: 1.625rem;
  }
  
  /* Layout adjustments */
  .container {
    padding: 0 var(--spacing-lg);
  }
  
  .content-container {
    padding: 0 var(--spacing-xl);
  }
  
  /* Entry content */
  .entry-content {
    font-size: 1.125rem;
    padding: 0 var(--spacing-lg);
  }
  
  /* Flex responsive utilities */
  .hidden.md\:flex {
    display: flex;
  }
  
  .md\:flex {
    display: flex;
  }
  
  .md\:flex-row {
    flex-direction: row;
  }
  
  .md\:flex-col {
    flex-direction: column;
  }
  
  .md\:items-center {
    align-items: center;
  }
  
  .md\:items-start {
    align-items: flex-start;
  }
  
  .md\:items-end {
    align-items: flex-end;
  }
  
  .md\:justify-center {
    justify-content: center;
  }
  
  .md\:justify-between {
    justify-content: space-between;
  }
  
  .md\:justify-start {
    justify-content: flex-start;
  }
  
  .md\:justify-end {
    justify-content: flex-end;
  }
  
  /* Grid responsive utilities */
  .md\:grid {
    display: grid;
  }
  
  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  
  /* Grid column span utilities */
  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  
  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  
  /* Display utilities - Proper Tailwind responsive override */
  .hidden.md\:block {
    display: block !important;
  }
  
  .hidden.md\:flex {
    display: flex !important;
  }
  
  .md\:block {
    display: block;
  }
  
  .md\:flex {
    display: flex;
  }
  
  .md\:inline-block {
    display: inline-block;
  }
  
  .md\:hidden {
    display: none;
  }
  
  
  /* Width utilities */
  .md\:w-auto {
    width: auto;
  }
  
  .md\:w-1\/2 {
    width: 50%;
  }
  
  .md\:w-1\/3 {
    width: 33.333333%;
  }
  
  .md\:w-2\/3 {
    width: 66.666667%;
  }
  
  .md\:w-1\/4 {
    width: 25%;
  }
  
  .md\:w-3\/4 {
    width: 75%;
  }
  
  .md\:w-1\/5 {
    width: 20%;
  }
  
  .md\:w-1\/6 {
    width: 16.666667%;
  }
  
  .md\:w-4\/5 {
    width: 80%;
  }
  
  .md\:w-5\/6 {
    width: 83.333333%;
  }
  
  /* Spacing utilities */
  .md\:p-0 { padding: 0; }
  .md\:p-1 { padding: var(--spacing-sm); }
  .md\:p-2 { padding: var(--spacing-md); }
  .md\:p-3 { padding: var(--spacing-lg); }
  .md\:p-4 { padding: var(--spacing-xl); }
  .md\:p-5 { padding: var(--spacing-2xl); }
  .md\:p-10 { padding: 2.5rem; }
  .md\:p-12 { padding: 3rem; }
  
  .md\:px-0 { padding-left: 0; padding-right: 0; }
  .md\:px-1 { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
  .md\:px-2 { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
  .md\:px-3 { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
  .md\:px-4 { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
  
  .md\:py-0 { padding-top: 0; padding-bottom: 0; }
  .md\:py-1 { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
  .md\:py-2 { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
  .md\:py-3 { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
  .md\:py-4 { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
  
  .md\:m-0 { margin: 0; }
  .md\:m-1 { margin: var(--spacing-sm); }
  .md\:m-2 { margin: var(--spacing-md); }
  .md\:m-3 { margin: var(--spacing-lg); }
  .md\:m-4 { margin: var(--spacing-xl); }
  
  .md\:mb-4 { margin-bottom: var(--spacing-xl); }
  .md\:mb-6 { margin-bottom: var(--spacing-2xl); }
  
  /* Text alignment */
  .md\:text-left { text-align: left; }
  .md\:text-center { text-align: center; }
  .md\:text-right { text-align: right; }
}

/* ============================================
   DESKTOP (1024px and up)
   ============================================ */
@media (min-width: 1024px) {
  
  /* Typography adjustments */
  html {
    font-size: 18px;
  }
  
  h1 {
    font-size: 3rem;
  }
  
  h2 {
    font-size: 2.25rem;
  }
  
  h3 {
    font-size: 1.75rem;
  }
  
  /* Layout adjustments */
  .container {
    padding: 0 var(--spacing-xl);
  }
  
  .content-container {
    padding: 0 var(--spacing-2xl);
  }
  
  /* Entry content with sidebar layout */
  .content-layout--sidebar {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--spacing-2xl);
    align-items: start;
  }
  
  .content-layout--sidebar-left {
    grid-template-columns: 280px 1fr;
  }
  
  /* No sidebar adjustments */
  .no-sidebar .entry-content {
    max-width: var(--content-wide);
    font-size: 1.2rem;
    margin: 0 auto;
  }
  
  /* Grid responsive utilities */
  .lg\:grid {
    display: grid;
  }
  
  .lg\:grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  
  /* Grid column span utilities */
  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  
  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  
  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  
  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  
  /* Flex utilities */
  .lg\:flex {
    display: flex;
  }
  
  .lg\:flex-row {
    flex-direction: row;
  }
  
  .lg\:flex-col {
    flex-direction: column;
  }
  
  /* Display utilities */
  .lg\:block {
    display: block;
  }
  
  .lg\:inline-block {
    display: inline-block;
  }
  
  .lg\:hidden {
    display: none;
  }
  
  /* Width utilities */
  .lg\:w-auto {
    width: auto;
  }
  
  .lg\:w-1\/5 {
    width: 20%;
  }
  
  .lg\:w-1\/6 {
    width: 16.666667%;
  }
  
  .lg\:w-4\/5 {
    width: 80%;
  }
  
  .lg\:w-5\/6 {
    width: 83.333333%;
  }
  
  /* Text alignment */
  .lg\:text-left { text-align: left; }
  .lg\:text-center { text-align: center; }
  .lg\:text-right { text-align: right; }
}

/* ============================================
   LARGE DESKTOP (1280px and up)
   ============================================ */
@media (min-width: 1280px) {
  
  /* Typography adjustments */
  html {
    font-size: 19px;
  }
  
  /* Layout adjustments */
  .content-container {
    padding: 0 var(--spacing-3xl);
  }
  
  /* Sidebar adjustments */
  .content-layout--sidebar {
    grid-template-columns: 1fr 320px;
    gap: var(--spacing-3xl);
  }
  
  .content-layout--sidebar-left {
    grid-template-columns: 320px 1fr;
  }
  
  /* No sidebar adjustments */
  .no-sidebar .entry-content {
    max-width: var(--content-full);
  }
  
  /* Grid responsive utilities */
  .xl\:grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .xl\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  
  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  
  /* Display utilities */
  .xl\:block {
    display: block;
  }
  
  .xl\:hidden {
    display: none;
  }
  
  /* Width utilities */
  .xl\:w-1\/5 {
    width: 20%;
  }
  
  .xl\:w-1\/6 {
    width: 16.666667%;
  }
  
  .xl\:w-1\/7 {
    width: 14.285714%;
  }
  
  .xl\:w-1\/8 {
    width: 12.5%;
  }
  
  .xl\:w-4\/5 {
    width: 80%;
  }
  
  .xl\:w-5\/6 {
    width: 83.333333%;
  }
  
  .xl\:w-7\/8 {
    width: 87.5%;
  }
}

/* ============================================
   WIDE DESKTOP (1440px and up)
   ============================================ */
@media (min-width: 1440px) {
  
  /* No sidebar adjustments for very wide screens */
  .no-sidebar .entry-content {
    max-width: 1100px;
  }
  
  /* Sidebar adjustments */
  .content-layout--sidebar {
    grid-template-columns: 1fr 360px;
  }
  
  .content-layout--sidebar-left {
    grid-template-columns: 360px 1fr;
  }
}

/* ============================================
   ULTRA WIDE (1600px and up)
   ============================================ */
@media (min-width: 1600px) {
  
  .container {
    max-width: 1400px;
  }
  
  .no-sidebar .entry-content {
    max-width: 1200px;
  }
}

/* ============================================
   MOBILE SPECIFIC STYLES
   ============================================ */
@media (max-width: 767px) {
  
  /* Force single column layouts */
  .mobile-single-col {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
  
  /* Mobile typography adjustments */
  h1 {
    font-size: 2rem;
    line-height: 1.2;
  }
  
  h2 {
    font-size: 1.75rem;
    line-height: 1.3;
  }
  
  h3 {
    font-size: 1.5rem;
  }
  
  /* Mobile spacing adjustments */
  .entry-content {
    padding: 0 var(--spacing-md);
  }
  
  /* Mobile button adjustments */
  .btn {
    width: 100%;
    justify-content: center;
  }
  
  .btn--mobile-inline {
    width: auto;
  }
  
  /* Mobile form adjustments */
  .form-group {
    margin-bottom: var(--spacing-md);
  }
  
  /* Mobile table adjustments */
  .table-wrapper {
    border-radius: var(--radius-sm);
  }
  
  .table {
    font-size: 0.875rem;
  }
  
  .table th,
  .table td {
    padding: var(--spacing-xs) var(--spacing-sm);
    min-width: 80px;
  }
  
  /* Mobile card adjustments */
  .card-content {
    padding: var(--spacing-md);
  }
  
  /* Mobile modal adjustments */
  .modal {
    margin: var(--spacing-sm);
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--spacing-md);
  }
}

/* ============================================
   NAVIGATION BREAKPOINTS
   ============================================ */

/* Hide desktop navigation on mobile */
@media (max-width: 767px) {
  .desktop-nav {
    display: none;
  }
  
  .mobile-menu-toggle {
    display: flex;
  }
}

/* Hide mobile navigation on desktop */
@media (min-width: 768px) {
  .mobile-menu-toggle,
  .mobile-menu,
  .mobile-menu-overlay {
    display: none !important;
  }
  
  .desktop-nav {
    display: flex;
  }
}

/* ============================================
   CONTENT LAYOUT RESPONSIVE
   ============================================ */

/* Single post specific responsive adjustments */
@media (min-width: 768px) {
  .single.no-toc.no-sidebar.no-share .content-container {
    max-width: 85%;
    margin: 0 auto;
  }
}

@media (min-width: 992px) {
  .single.no-toc.no-sidebar.no-share .content-container {
    max-width: 80%;
  }
}

@media (min-width: 1200px) {
  .single.no-toc.no-sidebar.no-share .content-container {
    max-width: 70%;
  }
}

/* ============================================
   PRINT MEDIA QUERIES
   ============================================ */
@media print {
  
  /* Reset colors for print */
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }
  
  /* Typography for print */
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  
  /* Hide non-essential elements */
  .mobile-menu-toggle,
  .mobile-menu,
  .desktop-nav,
  .sidebar-container,
  .pagination,
  .btn,
  .dropdown,
  .modal,
  .tooltip {
    display: none !important;
  }
  
  /* Optimize images for print */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
  
  /* Optimize tables for print */
  .table-wrapper {
    overflow: visible;
  }
  
  .table {
    font-size: 10pt;
  }
  
  /* Print URLs for links */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 10pt;
  }
  
  /* Page breaks */
  .page-break {
    page-break-before: always;
  }
}

/* ============================================
   ACCESSIBILITY MEDIA QUERIES
   ============================================ */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --text-primary: #ffffff;
    --text-secondary: #ffffff;
    --text-muted: #cccccc;
    --accent-blue: #5eafff;
    --border-color: rgba(255, 255, 255, 0.3);
  }
  
  .btn {
    border-width: 2px;
  }
  
  a {
    text-decoration: underline;
  }
}

/* Dark mode preference (for future use) */
@media (prefers-color-scheme: dark) {
  /* Already dark by default, but can be used for refinements */
}

/* Light mode preference (for future light mode toggle) */
@media (prefers-color-scheme: light) {
  /* Future light mode styles would go here */
}