/* Future Coffee Corporation - Foundation Stylesheet */
:root {
  --ground: #F9F6F0; /* warm oat */
  --surface: #FFFFFF;
  --surface-alt: #F1ECE1; /* light clay / warm sand */
  --ink: #1C1917; /* warm deep charcoal */
  --ink-muted: #57534E; /* warm stone */
  --rule: #E2DAD0; /* warm oat rule */
  --accent: #B45309; /* warm terracotta amber accent */
  --accent-hover: #92400E; /* deep warm clay accent */
  --accent-soft: rgba(180, 83, 9, 0.08);
  --accent-ring: rgba(180, 83, 9, 0.32);
}

/* Mobile Navigation Drawer Fix: Ensure header nav links are visible and accessible */
@media (max-width: 72rem) {
  .site-nav {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    padding: var(--space-xs) 0 !important;
    gap: var(--space-xs) !important;
    background: transparent !important;
    border: none !important;
  }
  .nav-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: var(--space-2xs) var(--space-xs) !important;
    width: 100% !important;
  }
  .nav-item {
    border-bottom: none !important;
    width: auto !important;
  }
  .nav-link {
    width: auto !important;
    padding: var(--space-3xs) var(--space-2xs) !important;
    font-size: var(--step--1) !important;
    min-height: 38px !important;
  }
  .header-actions {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: var(--space-xs) !important;
    margin-top: var(--space-3xs) !important;
  }
  .header-actions .btn {
    width: auto !important;
    flex: 1 1 auto !important;
  }
  .nav-toggle {
    display: none !important;
  }
}

/* Header phone and actions responsiveness to prevent offscreen clipping at 1440px / 320px */
.site-header .btn-phone,
.site-header .btn,
.site-header .nav-link {
  min-width: 0 !important;
  max-width: 100% !important;
}

.site-header .header-inner {
  flex-wrap: wrap !important;
  gap: var(--space-xs) var(--space-m) !important;
}

/* Fix offscreen text in equipment lookup and tables */
.lookup-results-panel,
.lookup-primary-card,
.lookup-diagnostic-card,
.lookup-parts-table-wrap,
.lookup-disclaimer-box {
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.lookup-parts-table-wrap table,
.data-table-wrapper table {
  width: 100% !important;
  table-layout: auto !important;
}

.lookup-parts-table-wrap th,
.lookup-parts-table-wrap td,
.data-table-wrapper th,
.data-table-wrapper td {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.lookup-results-panel h3,
.lookup-diagnostic-card h3,
.lookup-diagnostic-card p,
.lookup-diagnostic-card span,
.lookup-parts-table-wrap span,
.lookup-primary-card span,
.lookup-primary-card strong {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Interactive control states: flat_control fix */
button,
.btn,
.nav-link,
.legal-tab-btn,
.faq-trigger {
  transition: background-color 160ms var(--ease-standard),
              border-color 160ms var(--ease-standard),
              color 160ms var(--ease-standard),
              box-shadow 160ms var(--ease-standard),
              transform 160ms var(--ease-standard) !important;
}

.btn:hover,
button.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(28, 25, 23, 0.12);
}

.btn:active,
button.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(28, 25, 23, 0.18);
}

.btn:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px !important;
}