/* Responsive CSS - Additional responsive behaviors */

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

/* Hide elements on specific breakpoints */
@media (max-width: 1024px) {
  .desktop-only {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .tablet-mobile-only {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .desktop-tablet-only {
    display: none !important;
  }
}

/* ========================================
   RESPONSIVE TYPOGRAPHY
   ======================================== */

/* Adjust font sizes for better mobile readability */
@media (max-width: 768px) {
  h1 {
    font-size: var(--font-size-2xl);
  }
  
  h2 {
    font-size: var(--font-size-xl);
  }
  
  h3 {
    font-size: var(--font-size-lg);
  }
  
  .page-title {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-tight);
  }
}

/* ========================================
   RESPONSIVE SPACING
   ======================================== */

/* Adjust spacing for mobile devices */
@media (max-width: 768px) {
  .container {
    padding-inline: var(--space-2);
  }
  
  .page-header {
    margin-bottom: var(--space-3);
  }
  
  .page-content {
    margin-bottom: var(--space-3);
  }
  
  .breadcrumbs {
    margin-bottom: var(--space-2);
  }
}

/* ========================================
   RESPONSIVE NAVIGATION
   ======================================== */

/* Mobile navigation adjustments */
@media (max-width: 768px) {
  .main-nav {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .nav-list {
    flex-direction: column;
    gap: var(--space-1);
  }
  
  .nav-link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-base);
  }
}

/* ========================================
   RESPONSIVE FORMS
   ======================================== */

/* Form elements for mobile */
@media (max-width: 768px) {
  input,
  select:not(.unit-select),
  textarea {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: var(--space-3);
  }
  
  /* Keep unit-select at desired size on mobile */
  .unit-select {
    font-size: 11.2px !important;
  }
  
  button {
    min-height: 44px; /* Touch-friendly minimum */
    padding: var(--space-3) var(--space-4);
  }
}

/* ========================================
   RESPONSIVE CONVERTER SPECIFIC
   ======================================== */

/* Converter form responsive adjustments */
@media (max-width: 768px) {
  .converter-form {
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .converter-input-group {
    width: 100%;
  }
  
  .converter-select {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .converter-form {
    flex-direction: row;
    gap: var(--space-4);
  }
  
  .converter-input-group {
    flex: 1;
  }
}

/* ========================================
   RESPONSIVE FOOTER
   ======================================== */

/* Footer responsive layout */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }
  
  .footer-section {
    width: 100%;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .footer-content {
    flex-direction: row;
    gap: var(--space-4);
  }
  
  .footer-section {
    flex: 1;
  }
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

/* Responsive grid adjustments */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

/* ========================================
   RESPONSIVE IMAGES
   ======================================== */

/* Image responsive behavior */
@media (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
  }
  
  .responsive-image {
    width: 100%;
    height: auto;
  }
}

/* ========================================
   RESPONSIVE TABLES
   ======================================== */

/* Table responsive behavior */
@media (max-width: 768px) {
  table {
    font-size: var(--font-size-sm);
  }
  
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .table-responsive table {
    min-width: 600px;
  }
}

/* ========================================
   RESPONSIVE ACCESSIBILITY
   ======================================== */

/* Ensure proper focus indicators on mobile */
@media (max-width: 768px) {
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
}

/* ========================================
   RESPONSIVE PERFORMANCE
   ======================================== */

/* Optimize for mobile performance */
@media (max-width: 768px) {
  /* Reduce animations on mobile for better performance */
  * {
    animation-duration: 0.2s !important;
    transition-duration: 0.2s !important;
  }
  
  /* Disable hover effects on touch devices */
  .hover-only {
    display: none;
  }
}

/* ========================================
   RESPONSIVE PRINT
   ======================================== */

@media print {
  /* Hide non-essential elements when printing */
  .no-print {
    display: none !important;
  }
  
  /* Ensure proper page breaks */
  .page-break-before {
    page-break-before: always;
  }
  
  .page-break-after {
    page-break-after: always;
  }
  
  /* Optimize colors for printing */
  * {
    color: black !important;
    background: white !important;
  }
}