/* ============================================/* Mobile Responsive Styles - Mobile-first design */

   MOBILE-FIRST RESPONSIVE STYLES/* 365-Day Alkaline Vegan Meal Plan - Enhanced for all devices */

   Modern Mobile UX with Jamaican Theme

   365-Day Alkaline Vegan Meal Plan by Elle/* ========================================

   ============================================ */   TABLET LANDSCAPE (1024px and below)

   ======================================== */

/* ============================================@media (max-width: 1024px) {

   MOBILE BASE (320px+) - Mobile First  /* Container */

   ============================================ */  .container {

    max-width: 900px;

/* Safe Area Support (for notched devices) */    padding: 1.5rem 1rem;

:root {  }

  --safe-area-inset-top: env(safe-area-inset-top, 0px);

  --safe-area-inset-right: env(safe-area-inset-right, 0px);  /* Grid adjustments */

  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);  .grid-4 {

  --safe-area-inset-left: env(safe-area-inset-left, 0px);    grid-template-columns: repeat(2, 1fr);

}    gap: 1.25rem;

  }

/* Touch-optimized base */

* {  .grid-3 {

  -webkit-tap-highlight-color: rgba(0, 155, 58, 0.1);    grid-template-columns: repeat(2, 1fr);

  -webkit-touch-callout: none;    gap: 1.25rem;

}  }



/* Improved scrolling on mobile */  /* Recipe cards */

body {  .recipe-card {

  -webkit-overflow-scrolling: touch;    padding: 1.25rem;

  overscroll-behavior-y: contain;  }

}

  /* Navigation */

/* ============================================  .nav-container {

   MOBILE TOUCH TARGETS (48px minimum)    flex-wrap: wrap;

   ============================================ */    gap: 0.75rem;

.btn,  }

.nav-btn,

.favorite-btn,  .nav-btn {

button,    flex: 1 1 calc(33.333% - 0.75rem);

a.card,    min-width: 150px;

.filter-chip,  }

.tab-button,

input[type="checkbox"],  /* Modal */

input[type="radio"] {  .modal-content {

  min-width: 48px;    width: 90%;

  min-height: 48px;    max-width: 700px;

}  }



/* Touch-friendly spacing */  /* Tables */

@media (max-width: 768px) {  table {

  .nav-container {    font-size: 0.95rem;

    gap: var(--space-3);  }

  }

    th, td {

  .filter-container {    padding: 0.9rem 0.75rem;

    gap: var(--space-4);  }

  }}



  .recipe-card-footer .btn {/* ========================================

    flex: 1;   TABLET PORTRAIT (768px and below)

  }   ======================================== */

}@media (max-width: 768px) {

  /* Typography adjustments */

/* ============================================  header h1 {

   MOBILE NAVIGATION - BOTTOM BAR    font-size: 1.75rem;

   ============================================ */    line-height: 1.2;

@media (max-width: 768px) {  }

  nav {

    position: fixed;  header p {

    bottom: 0;    font-size: 1rem;

    left: 0;    line-height: 1.4;

    right: 0;  }

    top: auto;

    padding: var(--space-2) var(--space-2) calc(var(--space-2) + var(--safe-area-inset-bottom));  h1 {

    background: rgba(255, 255, 255, 0.95);    font-size: 2rem;

    -webkit-backdrop-filter: blur(20px);  }

    backdrop-filter: blur(20px);  h2 {

    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);    font-size: 1.75rem;

    z-index: var(--z-fixed);  }

    border-bottom: none;  h3 {

    border-top: 1px solid var(--gray-200);    font-size: 1.5rem;

  }  }

    h4 {

  .nav-container {    font-size: 1.25rem;

    flex-direction: row;  }

    justify-content: space-around;

    gap: var(--space-1);  /* Navigation */

    max-width: 100%;  .nav-container {

    padding: 0;    flex-direction: column;

  }  }



  .nav-btn {  .nav-btn {

    flex-direction: column;    width: 100%;

    padding: var(--space-2);    text-align: center;

    font-size: var(--font-size-xs);  }

    gap: var(--space-1);

    border-radius: var(--radius-lg);  /* Ensure touch targets are 44px minimum (iOS/Android standard) */

    min-width: 60px;  .btn,

    flex: 1;  .nav-btn,

    max-width: 80px;  .favorite-btn,

  }  .form-control {

      min-width: 44px;

  .nav-btn::before {    min-height: 44px;

    display: none;    padding: 0.75rem 1rem;

  }  }



  .nav-btn:hover {  /* Health badges */

    transform: none;  .health-badges {

  }    flex-direction: column;

      align-items: center;

  .nav-btn.active {  }

    background: var(--green-50);

    color: var(--jamaican-green);  .badge {

    border-color: var(--jamaican-green);    width: 100%;

  }    text-align: center;

      margin-bottom: 0.5rem;

  /* Add bottom spacing to prevent content being hidden by bottom nav */  }

  body {

    padding-bottom: calc(70px + var(--safe-area-inset-bottom));  /* Container padding */

  }  .container {

      padding: 1rem 0.5rem;

  .container {  }

    padding-bottom: var(--space-8);

  }  /* Cards */

}  .card,

  .recipe-card {

/* ============================================    padding: 1rem;

   MOBILE HEADER - COMPACT    margin-bottom: 1rem;

   ============================================ */  }

@media (max-width: 768px) {

  header {  /* Recipe header */

    padding: var(--space-8) var(--space-4);  .recipe-header {

    padding-top: calc(var(--space-8) + var(--safe-area-inset-top));    flex-direction: column;

  }    gap: 1rem;

    }

  header h1 {

    font-size: var(--font-size-3xl);  .recipe-title {

  }    font-size: 1.25rem;

    }

  header p {

    font-size: var(--font-size-base);  /* Grid layouts become single column on tablet */

  }  .grid-2,

    .grid-3,

  .health-badges {  .grid-4 {

    gap: var(--space-2);    grid-template-columns: 1fr;

  }    gap: 1rem;

    }

  .badge {

    font-size: var(--font-size-xs);  /* Day selector */

    padding: var(--space-2) var(--space-4);  .day-selector {

  }    flex-direction: column;

}    align-items: stretch;

  }

/* ============================================

   MOBILE TYPOGRAPHY  .day-selector select {

   ============================================ */    width: 100%;

@media (max-width: 640px) {    font-size: 16px; /* Prevents zoom on iOS */

  h1 {  }

    font-size: var(--font-size-3xl);

  }  /* Meal sections */

    .meal-header {

  h2 {    font-size: 1.25rem;

    font-size: var(--font-size-2xl);    padding: 0.75rem;

  }  }



  h3 {  /* Form controls */

    font-size: var(--font-size-xl);  .form-control {

  }    font-size: 16px; /* Prevents zoom on iOS */

      padding: 0.75rem;

  h4 {  }

    font-size: var(--font-size-lg);

  }  /* Modal */

    .modal-content {

  p {    width: 95%;

    font-size: var(--font-size-base);    padding: 1.5rem;

  }    max-height: 90vh;

}    overflow-y: auto;

  }

/* ============================================

   MOBILE CARDS - STACKED LAYOUT  /* Tables - make responsive */

   ============================================ */  table {

@media (max-width: 640px) {    font-size: 0.9rem;

  .grid,  }

  .grid-2,

  .grid-3,  th,

  .grid-4 {  td {

    grid-template-columns: 1fr;    padding: 0.75rem 0.5rem;

    gap: var(--space-4);  }

  }

    /* For wide tables, enable horizontal scroll */

  .recipe-card {  .table-wrapper {

    max-width: 100%;    overflow-x: auto;

  }    margin: 0 -0.5rem;

      padding: 0 0.5rem;

  .recipe-card-image {  }

    height: 180px;

  }  /* Recipe tags */

    .recipe-tags {

  .recipe-card-content {    font-size: 0.8rem;

    padding: var(--space-5);    flex-wrap: wrap;

  }  }



  .recipe-card-footer {  .tag {

    flex-direction: column;    padding: 0.2rem 0.5rem;

    gap: var(--space-3);    margin: 0.2rem;

  }  }



  .recipe-card-footer .btn {  /* Benefits and cultural notes */

    width: 100%;  .benefits,

  }  .cultural-note {

}    padding: 0.75rem;

    font-size: 0.9rem;

/* ============================================  }

   MOBILE FORMS - THUMB-FRIENDLY

   ============================================ */  /* Reduce spacing */

@media (max-width: 768px) {  .recipe-section {

  .form-input,    margin-bottom: 1rem;

  .form-select,  }

  .form-textarea {

    font-size: 16px; /* Prevents zoom on iOS */  .recipe-section li,

    padding: var(--space-4);  .recipe-section ol li {

  }    padding: 0.25rem 0;

      padding-left: 1.25rem;

  .search-bar {  }

    font-size: 16px;

    padding: var(--space-4) var(--space-5) var(--space-4) var(--space-12);  /* Keyboard shortcuts */

  }  .keyboard-shortcuts {

      font-size: 0.9rem;

  .form-group {  }

    margin-bottom: var(--space-5);

  }  .shortcut-item {

      flex-direction: column;

  .btn {    align-items: flex-start;

    width: 100%;    gap: 0.5rem;

    justify-content: center;  }

  }

    /* Empty state */

  .btn-group {  .empty-state {

    flex-direction: column;    padding: 2rem 1rem;

    gap: var(--space-3);  }

  }

    .empty-state h3 {

  .btn-group .btn {    font-size: 1.25rem;

    width: 100%;  }

  }

}  .empty-state p {

    font-size: 1rem;

/* ============================================  }

   MOBILE MODAL - BOTTOM SHEET

   ============================================ */  /* Utility adjustments */

@media (max-width: 640px) {  .mt-4,

  .modal-overlay {  .mb-4 {

    align-items: flex-end;    margin: 1.5rem 0;

    padding: 0;  }

  }  .p-4 {

      padding: 1.5rem;

  .modal {  }

    max-width: 100%;}

    width: 100%;

    max-height: 90vh;/* ========================================

    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;   MOBILE LANDSCAPE (640px and below)

    margin-bottom: 0;   ======================================== */

    animation: slideUpFromBottom 0.3s ease-out;@media (max-width: 640px) {

  }  /* Typography */

    header h1 {

  @keyframes slideUpFromBottom {    font-size: 1.6rem;

    from {  }

      transform: translateY(100%);

    }  h1 {

    to {    font-size: 1.9rem;

      transform: translateY(0);  }

    }

  }  h2 {

      font-size: 1.6rem;

  .modal-header {  }

    padding: var(--space-5);

    position: relative;  h3 {

  }    font-size: 1.4rem;

    }

  .modal-header::before {

    content: '';  /* Recipe cards */

    position: absolute;  .recipe-card {

    top: var(--space-2);    padding: 0.9rem;

    left: 50%;  }

    transform: translateX(-50%);

    width: 40px;  .recipe-title {

    height: 4px;    font-size: 1.2rem;

    background: var(--gray-300);  }

    border-radius: var(--radius-full);

  }  /* Buttons */

    .btn,

  .modal-body {  .nav-btn {

    padding: var(--space-5);    font-size: 0.95rem;

    padding-bottom: calc(var(--space-5) + var(--safe-area-inset-bottom));    padding: 0.8rem 1.1rem;

  }  }



  .modal-footer {  /* Meal sections */

    padding: var(--space-5);  .meal-header {

    padding-bottom: calc(var(--space-5) + var(--safe-area-inset-bottom));    font-size: 1.2rem;

    flex-direction: column-reverse;  }

  }

    /* Modal */

  .modal-footer .btn {  .modal-content {

    width: 100%;    width: 98%;

  }    padding: 1.25rem;

}  }



/* ============================================  /* Day selector */

   MOBILE TABLES - CARD LAYOUT  .day-selector select {

   ============================================ */    font-size: 16px; /* Prevent zoom on iOS */

@media (max-width: 640px) {    padding: 0.75rem;

  table {  }

    display: block;

    overflow-x: auto;  /* Cards */

    -webkit-overflow-scrolling: touch;  .card {

  }    padding: 0.9rem;

    }

  thead {

    display: none;  /* Benefits */

  }  .benefits,

    .cultural-note {

  tbody,    padding: 0.65rem;

  tr {    font-size: 0.85rem;

    display: block;  }

    margin-bottom: var(--space-4);}

  }

  /* ========================================

  tr {   MOBILE PORTRAIT (480px and below)

    background: var(--surface-elevated);   ======================================== */

    border-radius: var(--radius-lg);@media (max-width: 480px) {

    padding: var(--space-4);  /* Extra small devices */

    box-shadow: var(--shadow-sm);  header h1 {

  }    font-size: 1.5rem;

    }

  td {

    display: flex;  header p {

    justify-content: space-between;    font-size: 0.9rem;

    padding: var(--space-3) 0;  }

    border-bottom: 1px solid var(--gray-200);

  }  h1 {

      font-size: 1.75rem;

  td:last-child {  }

    border-bottom: none;

  }  h2 {

      font-size: 1.5rem;

  td::before {  }

    content: attr(data-label);

    font-weight: var(--font-weight-semibold);  h3 {

    color: var(--text-primary);    font-size: 1.3rem;

  }  }

}

  .container {

/* ============================================    padding: 0.5rem;

   MOBILE FILTER CHIPS - HORIZONTAL SCROLL  }

   ============================================ */

@media (max-width: 768px) {  .card,

  .filter-container {  .recipe-card {

    flex-wrap: nowrap;    padding: 0.75rem;

    overflow-x: auto;  }

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;  .recipe-title {

    padding: var(--space-4);    font-size: 1.1rem;

    margin-left: calc(var(--space-4) * -1);  }

    margin-right: calc(var(--space-4) * -1);

    padding-left: var(--space-4);  .meal-header {

    padding-right: var(--space-4);    font-size: 1.1rem;

  }    padding: 0.5rem;

    }

  .filter-container::-webkit-scrollbar {

    display: none;  .btn,

  }  .nav-btn {

      font-size: 0.9rem;

  .filter-chip {    padding: 0.75rem 1rem;

    flex-shrink: 0;  }

    white-space: nowrap;

  }  /* Tables - even more compact */

}  table {

    font-size: 0.85rem;

/* ============================================  }

   MOBILE FAB - OPTIMIZED POSITION

   ============================================ */  th, td {

@media (max-width: 768px) {    padding: 0.6rem 0.4rem;

  .btn-fab {  }

    bottom: calc(80px + var(--safe-area-inset-bottom));

    right: var(--space-4);  /* Grid - ensure single column */

    width: 56px;  .grid-2,

    height: 56px;  .grid-3,

  }  .grid-4 {

}    grid-template-columns: 1fr;

    gap: 0.75rem;

/* ============================================  }

   MOBILE SEARCH - FULL WIDTH

   ============================================ */  /* Reduced spacing */

@media (max-width: 640px) {  .recipe-section {

  .search-container {    margin-bottom: 0.75rem;

    margin-bottom: var(--space-6);  }

  }

    .recipe-section li,

  .search-bar {  .recipe-section ol li {

    border-radius: var(--radius-xl);    padding: 0.2rem 0;

  }    padding-left: 1rem;

}    font-size: 0.9rem;

  }

/* ============================================

   MOBILE TABS - SCROLLABLE  /* Modal - almost full screen */

   ============================================ */  .modal-content {

@media (max-width: 768px) {    width: 100%;

  .tabs-list {    padding: 1rem;

    overflow-x: auto;    border-radius: 12px 12px 0 0;

    -webkit-overflow-scrolling: touch;  }

    scrollbar-width: none;

    flex-wrap: nowrap;  /* Tags smaller */

  }  .tag {

      font-size: 0.75rem;

  .tabs-list::-webkit-scrollbar {    padding: 0.15rem 0.4rem;

    display: none;  }

  }

    /* Empty state */

  .tab-button {  .empty-state {

    flex-shrink: 0;    padding: 1.5rem 0.75rem;

    white-space: nowrap;  }

  }

}  .empty-state h3 {

    font-size: 1.15rem;

/* ============================================  }

   MOBILE BREADCRUMBS - COMPACT

   ============================================ */  .empty-state p {

@media (max-width: 640px) {    font-size: 0.9rem;

  .breadcrumbs {  }

    font-size: var(--font-size-xs);

    overflow-x: auto;  /* Utility adjustments */

    -webkit-overflow-scrolling: touch;  .mt-4,

    scrollbar-width: none;  .mb-4 {

    flex-wrap: nowrap;    margin: 1rem 0;

  }  }

    .p-4 {

  .breadcrumbs::-webkit-scrollbar {    padding: 1rem;

    display: none;  }

  }}

}

/* ========================================

/* ============================================   EXTRA SMALL MOBILE (375px and below)

   MOBILE EMPTY STATES - COMPACT   ======================================== */

   ============================================ */@media (max-width: 375px) {

@media (max-width: 640px) {  header h1 {

  .empty-state {    font-size: 1.3rem;

    padding: var(--space-12) var(--space-4);  }

  }

    header p {

  .empty-state-icon {    font-size: 0.85rem;

    font-size: 3rem;  }

  }

    h1 {

  .empty-state-title {    font-size: 1.6rem;

    font-size: var(--font-size-xl);  }

  }

}  h2 {

    font-size: 1.4rem;

/* ============================================  }

   PULL TO REFRESH INDICATOR

   ============================================ */  h3 {

.pull-to-refresh {    font-size: 1.2rem;

  position: fixed;  }

  top: calc(var(--safe-area-inset-top) + var(--space-4));

  left: 50%;  .container {

  transform: translateX(-50%) scale(0);    padding: 0.4rem;

  width: 40px;  }

  height: 40px;

  background: var(--jamaican-green);  .card,

  border-radius: var(--radius-full);  .recipe-card {

  display: flex;    padding: 0.65rem;

  align-items: center;  }

  justify-content: center;

  color: var(--white);  .recipe-title {

  z-index: var(--z-fixed);    font-size: 1rem;

  transition: transform var(--transition-base);  }

  box-shadow: var(--shadow-lg);

}  .meal-header {

    font-size: 1rem;

.pull-to-refresh.active {    padding: 0.4rem;

  transform: translateX(-50%) scale(1);  }

}

  .btn,

.pull-to-refresh.loading {  .nav-btn {

  animation: spin 1s linear infinite;    font-size: 0.85rem;

}    padding: 0.65rem 0.9rem;

  }

@keyframes spin {

  from { transform: translateX(-50%) rotate(0deg); }  .tag {

  to { transform: translateX(-50%) rotate(360deg); }    font-size: 0.7rem;

}    padding: 0.15rem 0.35rem;

  }

/* ============================================

   TOAST NOTIFICATIONS - MOBILE OPTIMIZED  table {

   ============================================ */    font-size: 0.8rem;

.toast {  }

  position: fixed;

  bottom: calc(80px + var(--safe-area-inset-bottom));  th, td {

  left: var(--space-4);    padding: 0.5rem 0.3rem;

  right: var(--space-4);  }

  background: var(--gray-900);

  color: var(--white);  .benefits,

  padding: var(--space-4) var(--space-5);  .cultural-note {

  border-radius: var(--radius-xl);    padding: 0.5rem;

  box-shadow: var(--shadow-2xl);    font-size: 0.8rem;

  z-index: var(--z-modal);  }

  animation: slideUpToast 0.3s ease-out;}

  display: flex;

  align-items: center;/* ========================================

  gap: var(--space-3);   LANDSCAPE ORIENTATION ADJUSTMENTS

}   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {

@keyframes slideUpToast {  header {

  from {    padding: 1rem;

    transform: translateY(100%);  }

    opacity: 0;

  }  header h1 {

  to {    font-size: 1.5rem;

    transform: translateY(0);  }

    opacity: 1;

  }  .health-badges {

}    flex-direction: row;

    flex-wrap: wrap;

.toast-success {  }

  background: var(--jamaican-green);

}  .badge {

    width: auto;

.toast-error {    flex: 1;

  background: var(--error);    min-width: 120px;

}  }



.toast-warning {  .nav-container {

  background: var(--jamaican-gold);    flex-direction: row;

  color: var(--gray-900);    flex-wrap: wrap;

}  }



/* ============================================  .nav-btn {

   SWIPE INDICATORS    width: auto;

   ============================================ */    flex: 1;

.swipe-indicator {    min-width: 120px;

  position: absolute;  }

  top: 50%;

  transform: translateY(-50%);  /* Modal should not be too tall in landscape */

  width: 60px;  .modal-content {

  height: 60px;    max-height: 85vh;

  background: var(--jamaican-green);  }

  color: var(--white);

  border-radius: var(--radius-full);  /* Grid can be 2 columns in landscape */

  display: flex;  .grid-2,

  align-items: center;  .grid-3,

  justify-content: center;  .grid-4 {

  font-size: var(--font-size-2xl);    grid-template-columns: repeat(2, 1fr);

  opacity: 0;  }

  pointer-events: none;}

  transition: opacity var(--transition-fast);

}/* Low height screens in landscape */

@media (max-height: 600px) and (orientation: landscape) {

.swipe-indicator-left {  header {

  left: var(--space-4);    padding: 0.75rem;

}  }



.swipe-indicator-right {  header h1 {

  right: var(--space-4);    font-size: 1.3rem;

}  }



.swipe-indicator.active {  header p {

  opacity: 1;    font-size: 0.85rem;

}  }



/* ============================================  .modal-content {

   TABLET LANDSCAPE (1024px and below)    max-height: 80vh;

   ============================================ */    padding: 1rem;

@media (max-width: 1024px) and (min-width: 769px) {  }

  .container {

    max-width: 900px;  .card,

    padding: var(--space-8) var(--space-6);  .recipe-card {

  }    padding: 0.75rem;

    }

  .grid-4 {}

    grid-template-columns: repeat(2, 1fr);

  }/* ========================================

     TOUCH-FRIENDLY IMPROVEMENTS

  .grid-3 {   ======================================== */

    grid-template-columns: repeat(2, 1fr);@media (hover: none) and (pointer: coarse) {

  }  /* Larger touch targets for mobile devices */

}  .btn,

  .nav-btn,

/* ============================================  .favorite-btn,

   LANDSCAPE ORIENTATION  button {

   ============================================ */    min-height: 44px; /* iOS/Android recommendation */

@media (max-width: 896px) and (orientation: landscape) {    min-width: 44px;

  header {  }

    padding: var(--space-6) var(--space-4);

  }  /* Ensure proper spacing between interactive elements */

    .btn + .btn,

  header h1 {  .nav-btn + .nav-btn {

    font-size: var(--font-size-2xl);    margin-top: 8px; /* Minimum spacing between touch targets */

  }  }



  header p {  /* Remove hover effects on touch devices */

    font-size: var(--font-size-sm);  .card:hover,

  }  .recipe-card:hover,

    .nav-btn:hover,

  .health-badges {  .btn:hover {

    display: none;    transform: none;

  }  }



  .modal {  /* Add active states for better touch feedback */

    max-height: 80vh;  .btn:active,

  }  .nav-btn:active,

}  .favorite-btn:active {

    transform: scale(0.98);

/* ============================================    opacity: 0.9;

   PRINT MEDIA - MOBILE  }

   ============================================ */

@media print {  .card:active,

  nav,  .recipe-card:active {

  .btn-fab,    transform: scale(0.99);

  .toast,  }

  .pull-to-refresh,

  .filter-container {  /* Make close buttons larger */

    display: none !important;  .close,

  }  .modal-close,

    [aria-label="Close"] {

  body {    min-width: 44px;

    padding-bottom: 0;    min-height: 44px;

  }    padding: 10px;

    }

  .recipe-card {

    break-inside: avoid;  /* Make checkboxes and radio buttons larger */

    page-break-inside: avoid;  input[type="checkbox"],

  }  input[type="radio"] {

}    min-width: 24px;

    min-height: 24px;

/* ============================================  }

   HIGH DPI DISPLAYS (RETINA)

   ============================================ */  /* Better select dropdown */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {  select {

  /* Crisper borders on high DPI */    min-height: 44px;

  .card,    padding: 0.75rem;

  .btn,    font-size: 16px; /* Prevents zoom on iOS */

  .nav-btn,  }

  .recipe-card {}

    border-width: 0.5px;

  }/* ========================================

}   HIGH CONTRAST MODE SUPPORT

   ======================================== */

/* ============================================@media (prefers-contrast: high) {

   DARK MODE SUPPORT (FUTURE)  .card,

   ============================================ */  .recipe-card {

@media (prefers-color-scheme: dark) {    border: 2px solid var(--text-dark);

  /* Placeholder for future dark mode implementation */  }

  /* Can be implemented to respect user system preferences */

}  .btn,

  .nav-btn {
    border: 2px solid var(--white);
  }

  .tag {
    border: 1px solid var(--text-dark);
  }

  .health-badges .badge {
    border: 2px solid currentColor;
  }
}

/* ========================================
   REDUCED MOTION SUPPORT
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .card:hover,
  .recipe-card:hover,
  .nav-btn:hover,
  .btn:hover {
    transform: none !important;
  }

  .btn:active,
  .nav-btn:active,
  .card:active {
    transform: none !important;
  }
}

/* ========================================
   DARK MODE SUPPORT (Future Enhancement)
   ======================================== */
@media (prefers-color-scheme: dark) {
  /* Dark mode styles would go here */
  /* Currently maintaining light theme for consistency */
  /* Uncomment and customize when implementing dark mode:

  :root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
  }

  .card,
  .recipe-card {
    background: var(--bg-secondary);
    color: var(--text-primary);
  }

  */
}

/* ========================================
   PRINT OPTIMIZATIONS FOR MOBILE
   ======================================== */
@media print {
  /* Remove navigation on print */
  .nav-container,
  .favorite-btn,
  .btn {
    display: none;
  }

  /* Optimize spacing for print */
  .container {
    padding: 0;
  }

  .card,
  .recipe-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Ensure good contrast for print */
  body {
    color: #000;
    background: #fff;
  }
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Focus indicators for keyboard navigation */
@media (max-width: 768px) {
  .btn:focus,
  .nav-btn:focus,
  .form-control:focus,
  a:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
  }

  /* Skip to content link for screen readers */
  .skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
  }

  .skip-to-content:focus {
    top: 0;
  }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */
@media (max-width: 768px) {
  /* Optimize animations for mobile */
  .card,
  .recipe-card,
  .btn,
  .nav-btn {
    will-change: transform;
  }

  /* Smooth scrolling on mobile */
  html {
    scroll-behavior: smooth;
  }

  /* Optimize images for mobile */
  img {
    max-width: 100%;
    height: auto;
  }
}