/**
 * =============================================================================
 * CRITICAL CSS - Inline in <head> to Prevent FOUC
 * =============================================================================
 * 
 * This file contains ONLY the absolute minimum CSS needed to prevent
 * Flash of Unstyled Content (FOUC) while the main stylesheets load.
 * 
 * USAGE: Inline this in your <head> tag BEFORE any external CSS
 */

/* Hide body until CSS loads (prevents FOUC) */
.no-fouc {
  opacity: 0;
  visibility: hidden;
}

html {
  height: 100%;
  font-size: 13.5px;
}

/* Basic page structure (prevents layout shift) */
body {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  background: #fafafa;
  color: #262626;
}

/* Prevent content jump on loading */
.site {
  min-height: 100vh;
}

/* Critical: Header skeleton to prevent layout shift */
.site__header,
.header {
  background: #fff;
  position: relative;
}

.mobile-header {
  background: #fff;
  min-height: 50px;
}

/* Hide heavy elements until loaded */
img {
  max-width: 100%;
  height: auto;
}

/* Prevent invisible clickable areas */
a {
  color: #c94a00;
  text-decoration: none;
}

button {
  cursor: pointer;
}

/* Prevent layout shift from web fonts */
@font-face {
  font-family: 'Inter';
  font-display: swap; /* Show fallback immediately */
}