/**
 * Utility Classes
 * 
 * Version: 1.0.0
 * Last Updated: 2026-03-05
 * 
 * This file contains utility classes for rapid prototyping and layout.
 * Import AFTER design-tokens.css and components.css.
 * 
 * Utilities included:
 * - Spacing (margin, padding)
 * - Typography (text size, weight, alignment, color)
 * - Layout (flexbox, grid, display)
 * - Sizing (width, height)
 * - Visibility (show/hide responsive)
 * - Borders
 * - Colors (backgrounds, text)
 */

/* ============================================
   SPACING UTILITIES
   ============================================ */

/* Margin */
.m-0 { margin: 0; }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.m-2xl { margin: var(--space-2xl); }
.m-3xl { margin: var(--space-3xl); }

/* Margin Top */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

/* Margin Bottom */
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

/* Margin Left */
.ml-0 { margin-left: 0; }
.ml-xs { margin-left: var(--space-xs); }
.ml-sm { margin-left: var(--space-sm); }
.ml-md { margin-left: var(--space-md); }
.ml-lg { margin-left: var(--space-lg); }
.ml-xl { margin-left: var(--space-xl); }
.ml-auto { margin-left: auto; }

/* Margin Right */
.mr-0 { margin-right: 0; }
.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.mr-lg { margin-right: var(--space-lg); }
.mr-xl { margin-right: var(--space-xl); }
.mr-auto { margin-right: auto; }

/* Margin Horizontal */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
.mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
.mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
.mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Margin Vertical */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
.my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
.my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }

/* Padding */
.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.p-3xl { padding: var(--space-3xl); }

/* Padding Top */
.pt-0 { padding-top: 0; }
.pt-xs { padding-top: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }
.pt-2xl { padding-top: var(--space-2xl); }
.pt-3xl { padding-top: var(--space-3xl); }

/* Padding Bottom */
.pb-0 { padding-bottom: 0; }
.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }
.pb-2xl { padding-bottom: var(--space-2xl); }
.pb-3xl { padding-bottom: var(--space-3xl); }

/* Padding Left */
.pl-0 { padding-left: 0; }
.pl-xs { padding-left: var(--space-xs); }
.pl-sm { padding-left: var(--space-sm); }
.pl-md { padding-left: var(--space-md); }
.pl-lg { padding-left: var(--space-lg); }
.pl-xl { padding-left: var(--space-xl); }

/* Padding Right */
.pr-0 { padding-right: 0; }
.pr-xs { padding-right: var(--space-xs); }
.pr-sm { padding-right: var(--space-sm); }
.pr-md { padding-right: var(--space-md); }
.pr-lg { padding-right: var(--space-lg); }
.pr-xl { padding-right: var(--space-xl); }

/* Padding Horizontal */
.px-0 { padding-left: 0; padding-right: 0; }
.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }

/* Padding Vertical */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

/* Gap (for flexbox/grid) */
.gap-0 { gap: 0; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */

/* Font Sizes */
.text-caption { font-size: var(--font-size-caption); }
.text-small { font-size: var(--font-size-body-small); }
.text-base { font-size: var(--font-size-body); }
.text-h4 { font-size: var(--font-size-h4); }
.text-h3 { font-size: var(--font-size-h3); }
.text-h2 { font-size: var(--font-size-h2); }
.text-h1 { font-size: var(--font-size-h1); }

/* Font Weights */
.font-regular { font-weight: var(--font-weight-regular); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Text Transform */
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.text-normal { text-transform: none; }

/* Text Decoration */
.text-underline { text-decoration: underline; }
.text-line-through { text-decoration: line-through; }
.text-no-underline { text-decoration: none; }

/* Text Colors */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-navy { color: var(--color-primary-navy); }
.text-teal { color: var(--color-secondary-teal); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-white { color: var(--color-bg-white); }

/* Line Height */
.leading-tight { line-height: var(--line-height-heading); }
.leading-normal { line-height: var(--line-height-body); }
.leading-relaxed { line-height: 1.8; }

/* Text Wrapping */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-nowrap { white-space: nowrap; }
.text-wrap { white-space: normal; }

/* Max Width for Readability */
.text-readable {
  max-width: var(--content-max-width);
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */

/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }

/* Flexbox */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col-reverse { flex-direction: column-reverse; }

.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }

.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }

/* Grid */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (min-width: 768px) {
  .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); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* ============================================
   SIZING UTILITIES
   ============================================ */

/* Width */
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-fit { width: fit-content; }
.w-max { width: max-content; }
.w-min { width: min-content; }

.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }
.w-1\/4 { width: 25%; }
.w-3\/4 { width: 75%; }

/* Max Width */
.max-w-sm { max-width: 24rem; /* 384px */ }
.max-w-md { max-width: 28rem; /* 448px */ }
.max-w-lg { max-width: 32rem; /* 512px */ }
.max-w-xl { max-width: 36rem; /* 576px */ }
.max-w-2xl { max-width: 42rem; /* 672px */ }
.max-w-readable { max-width: var(--content-max-width); }
.max-w-page { max-width: var(--page-max-width); }
.max-w-full { max-width: 100%; }

/* Height */
.h-auto { height: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-fit { height: fit-content; }

/* Min Height */
.min-h-screen { min-height: 100vh; }
.min-h-full { min-height: 100%; }
.min-h-touch { min-height: var(--touch-target-min); }

/* ============================================
   VISIBILITY UTILITIES
   ============================================ */

/* Responsive Display */
@media (max-width: 767px) {
  .mobile-only { display: block; }
  .tablet-up { display: none; }
  .desktop-only { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .mobile-only { display: none; }
  .tablet-only { display: block; }
  .desktop-only { display: none; }
}

@media (min-width: 1024px) {
  .mobile-only { display: none; }
  .tablet-only { display: none; }
  .desktop-only { display: block; }
}

/* Visibility */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Overflow */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ============================================
   BORDER UTILITIES
   ============================================ */

/* Border Width */
.border-0 { border-width: 0; }
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }

.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-l { border-left-width: 1px; }
.border-r { border-right-width: 1px; }

/* Border Style */
.border-solid { border-style: solid; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }
.border-none { border-style: none; }

/* Border Color */
.border-grey { border-color: var(--color-border-grey); }
.border-navy { border-color: var(--color-primary-navy); }
.border-teal { border-color: var(--color-secondary-teal); }
.border-success { border-color: var(--color-success); }
.border-warning { border-color: var(--color-warning); }
.border-error { border-color: var(--color-error); }

/* Border Radius */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* ============================================
   BACKGROUND UTILITIES
   ============================================ */

/* Background Colors */
.bg-white { background-color: var(--color-bg-white); }
.bg-surface { background-color: var(--color-surface-grey); }
.bg-navy { background-color: var(--color-primary-navy); }
.bg-teal { background-color: var(--color-secondary-teal); }
.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.bg-error { background-color: var(--color-error); }
.bg-transparent { background-color: transparent; }

/* ============================================
   SHADOW UTILITIES
   ============================================ */

.shadow-none { box-shadow: none; }
.shadow-subtle { box-shadow: var(--shadow-subtle); }
.shadow { box-shadow: var(--shadow-default); }
.shadow-elevated { box-shadow: var(--shadow-elevated); }

/* ============================================
   INTERACTION UTILITIES
   ============================================ */

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* Pointer Events */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* User Select */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* ============================================
   ACCESSIBILITY UTILITIES
   ============================================ */

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus Visible Only */
.focus-visible-only {
  position: absolute;
  left: -9999px;
}

.focus-visible-only:focus {
  position: static;
  left: auto;
}

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

/* Mobile (0-767px) - Base styles, no prefix needed */

/* Tablet (768px+) */
@media (min-width: 768px) {
  .md\:d-block { display: block; }
  .md\:d-flex { display: flex; }
  .md\:d-none { display: none; }
  
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }
  
  .md\:text-left { text-align: left; }
  .md\:text-center { text-align: center; }
  .md\:text-right { text-align: right; }
  
  .md\:w-1\/2 { width: 50%; }
  .md\:w-full { width: 100%; }
  
  .md\:p-lg { padding: var(--space-lg); }
  .md\:px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .lg\:d-block { display: block; }
  .lg\:d-flex { display: flex; }
  .lg\:d-none { display: none; }
  
  .lg\:flex-row { flex-direction: row; }
  
  .lg\:text-left { text-align: left; }
  .lg\:text-center { text-align: center; }
  
  .lg\:w-1\/3 { width: 33.333333%; }
  .lg\:w-1\/4 { width: 25%; }
  .lg\:w-full { width: 100%; }
  
  .lg\:p-xl { padding: var(--space-xl); }
  .lg\:px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
}

/* ============================================
   CONTAINER UTILITY
   ============================================ */

.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}

/* ============================================
   PRINT UTILITIES
   ============================================ */

@media print {
  .print-hidden { display: none; }
  .print-visible { display: block; }
  .print-break-before { page-break-before: always; }
  .print-break-after { page-break-after: always; }
  .print-break-inside-avoid { page-break-inside: avoid; }
}

/* ============================================
   PHASE 4 MOBILE-FIRST AUDIT FIXES
   Added: 2026-03-05
   ============================================ */

/* Phase 4 Mobile-First Audit Fixes - 2026-03-05 */
/* Comprehensive responsive fixes for ALL pages */

/* ============================================
   1. RESPONSIVE LAYOUT - BASE FIXES
   ============================================ */

/* Prevent horizontal scroll at all breakpoints */
* {
  max-width: 100%;
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  width: 100%;
}

/* Ensure images and media scale correctly */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ============================================
   2. TOUCH TARGETS - 44×44px MINIMUM
   ============================================ */

/* All interactive elements */
button,
a,
input[type="submit"],
input[type="button"],
select,
.btn,
.button,
.card-button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
  cursor: pointer;
}

/* Icon-only buttons need extra padding wrapper */
.icon-button,
button.icon-only {
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
}

/* Table action buttons */
table button,
table a.button {
  min-height: 44px;
  padding: 10px 16px;
}

/* Navigation links */
nav a,
.nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 12px 16px;
}

/* ============================================
   3. FORM USABILITY - MOBILE OPTIMIZATION
   ============================================ */

/* Prevent zoom on iOS - 16px minimum */
input,
select,
textarea {
  font-size: 16px !important;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 8px;
}

/* Labels must be clearly associated */
label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
}

/* Spacing between form fields */
.form-group,
.form-field {
  margin-bottom: 24px;
}

/* ============================================
   4. MOBILE BREAKPOINT - 375px (iPhone SE)
   ============================================ */

@media (max-width: 375px) {
  /* Reduce padding on mobile */
  .container,
  .page-container {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  /* Stack cards */
  .card-grid,
  .grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  
  /* Full-width buttons on mobile */
  .btn-primary,
  .btn-secondary,
  button:not(.icon-button) {
    width: 100%;
    justify-content: center;
  }
  
  /* Typography adjustments */
  h1 { font-size: 28px; line-height: 1.2; }
  h2 { font-size: 24px; line-height: 1.3; }
  h3 { font-size: 20px; line-height: 1.4; }
  
  /* Tables - force scroll container */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ============================================
   5. TABLET BREAKPOINT - 768px (iPad)
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
  
  /* 2-column grid for cards */
  .card-grid,
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* ============================================
   6. DESKTOP BREAKPOINT - 1024px+
   ============================================ */

@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
  }
  
  /* 3-column grid for cards */
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

/* ============================================
   7. PORTAL - BOTTOM NAVIGATION (MOBILE ONLY)
   ============================================ */

/* Show bottom nav on mobile for portal pages */
@media (max-width: 767px) {
  /* Hide desktop sidebar on mobile */
  .portal-sidebar,
  .sidebar {
    display: none !important;
  }
  
  /* Bottom navigation bar */
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 72px;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 999;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
  }
  
  .mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 72px;
    padding: 8px;
    text-decoration: none;
    color: #64748b;
    transition: color 0.2s;
  }
  
  .mobile-bottom-nav-item:hover,
  .mobile-bottom-nav-item.active {
    color: #2AA198;
  }
  
  .mobile-bottom-nav-icon {
    font-size: 24px;
    margin-bottom: 4px;
  }
  
  .mobile-bottom-nav-label {
    font-size: 12px;
    font-weight: 500;
  }
  
  /* Add padding to page content to account for bottom nav */
  body.portal-page {
    padding-bottom: 88px;
  }
}

/* Desktop - show sidebar, hide bottom nav */
@media (min-width: 768px) {
  .mobile-bottom-nav {
    display: none !important;
  }
}

/* ============================================
   8. HORIZONTAL SCROLL FIXES
   ============================================ */

/* Tables must scroll horizontally, not overflow */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 24px;
}

.table-wrapper table {
  min-width: 600px; /* Ensure minimum width for table */
}

/* Long URLs in content */
.content-text,
.article-body {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Code blocks */
pre, code {
  max-width: 100%;
  overflow-x: auto;
  word-wrap: normal;
}

/* ============================================
   9. CALCULATOR MOBILE UX
   ============================================ */

@media (max-width: 767px) {
  /* Calculator inputs in vertical layout */
  .calculator-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .calculator-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  /* Results section as bottom sheet style */
  .calculator-results {
    position: sticky;
    bottom: 88px; /* Above bottom nav */
    background: #ffffff;
    padding: 24px;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  }
}

/* ============================================
   10. ANIMATION PERFORMANCE & ACCESSIBILITY
   ============================================ */

/* All animations max 0.5s */
* {
  transition-duration: 0.3s !important;
  max-transition-duration: 0.5s;
}

/* Respect prefers-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;
  }
}

/* ============================================
   11. MOBILE NAVIGATION FIXES
   ============================================ */

@media (max-width: 767px) {
  /* Mobile menu spacing */
  .mobile-menu {
    padding: 16px;
  }
  
  .mobile-menu-item {
    padding: 16px;
    min-height: 56px;
    display: flex;
    align-items: center;
  }
  
  /* Hamburger must be 44×44px */
  .hamburger,
  .mobile-hamburger {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }
}

/* ============================================
   12. SPACING FIXES - 8px GRID
   ============================================ */

/* Section spacing */
section,
.section {
  padding: 48px 16px;
}

@media (min-width: 768px) {
  section,
  .section {
    padding: 64px 24px;
  }
}

@media (min-width: 1024px) {
  section,
  .section {
    padding: 80px 32px;
  }
}

/* Card spacing */
.card {
  padding: 16px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .card {
    padding: 24px;
    margin-bottom: 24px;
  }
}

/* ============================================
   13. FOCUS STATES - ACCESSIBILITY
   ============================================ */

/* Ensure all focusable elements have visible focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #2AA198;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================
   14. BLOG POST RESPONSIVE
   ============================================ */

@media (max-width: 767px) {
  .blog-post-header {
    padding: 24px 16px;
  }
  
  .blog-post-content {
    padding: 16px;
    font-size: 16px;
    line-height: 1.6;
  }
  
  .blog-post-image {
    width: 100%;
    height: auto;
    margin-bottom: 24px;
  }
}

/* ============================================
   15. FOOTER RESPONSIVE
   ============================================ */

@media (max-width: 767px) {
  footer {
    padding: 32px 16px;
  }
  
  .footer-columns {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  
  .footer-column {
    width: 100%;
  }
}