/* Remove render-blocking Google Fonts import */
/* @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;700&display=swap'); */

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: 'CustomFont';
  src: url('/custom-font.woff2') format('woff2'),
       url('/custom-font.ttf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 20%;
  line-gap-override: 0%;
}

/* Improved system font stack for fallbacks */
.system-font {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  letter-spacing: -0.01em; /* Adjusts for system fonts */
  word-spacing: 0.01em;
}

/* Font loading states */
.fonts-loading h1, 
.fonts-loading h2, 
.fonts-loading h3, 
.fonts-loading h4, 
.fonts-loading h5, 
.fonts-loading h6 {
  /* Use system fonts until custom font is loaded */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
  /* Prevent layout shift when font loads by matching metrics */
  letter-spacing: -0.01em;
  word-spacing: 0.01em;
  /* Ensure text remains smooth */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Once fonts have loaded, use the custom font */
.fonts-loaded h1, 
.fonts-loaded h2, 
.fonts-loaded h3, 
.fonts-loaded h4, 
.fonts-loaded h5, 
.fonts-loaded h6 {
  font-family: 'CustomFont', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
  /* Add a subtle transition for the font swap */
  transition: font-family 0.2s ease-out, letter-spacing 0.2s ease-out, word-spacing 0.2s ease-out;
  letter-spacing: 0;
  word-spacing: 0;
}

/* If font loading fails, ensure we still have a fallback */
.fonts-failed h1, 
.fonts-failed h2, 
.fonts-failed h3, 
.fonts-failed h4, 
.fonts-failed h5, 
.fonts-failed h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
  letter-spacing: -0.01em;
  word-spacing: 0.01em;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

*:focus:not(ol) {
  @apply outline-none ring-2 ring-pink-500 ring-opacity-50;
}

html {
  height: 100%;
  box-sizing: border-box;
  touch-action: manipulation;
  font-feature-settings:
    'case' 1,
    'rlig' 1,
    'calt' 0;
}

html,
body {
  font-family: var(--font-roboto-condensed), sans-serif;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  @apply bg-orange-100 antialiased;
  color: #333;
}

body {
  position: relative;
  min-height: 100%;
  margin: 0;
}

p a {
  @apply hover:underline;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.height-screen-helper {
  min-height: calc(100vh - 80px);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'CustomFont', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400 !important;
}

::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

input:focus {
  outline: none;
  box-shadow: none;
}

/* LCP element specific optimizations */
.lcp-element {
  /* Force system fonts for initial render */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
  font-weight: bold !important;
  /* Ensure high rendering priority */
  content-visibility: visible;
  /* Prevent any animations */
  animation: none !important;
  transition: none !important;
}

/* Hidden until custom font is loaded - immediately display with system font */
.hidden-until-loaded {
  /* Don't hide this initially - show with system font */
  position: static;
  opacity: 1;
  visibility: visible;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}

/* Show the real h1 with custom font once fonts are loaded */
.fonts-loaded .hidden-until-loaded {
  opacity: 1;
  visibility: visible;
  position: static;
  font-family: 'CustomFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}

/* Additional optimizations for the LCP element during font loading */
.fonts-loading .lcp-element {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}

/* Subtle animation for when font successfully loads */
@keyframes fontFadeIn {
  from {
    opacity: 0.95;
    transform: scale(0.99);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.fonts-loaded h1[data-testid="main-heading"] {
  animation: fontFadeIn 0.3s ease-out forwards;
}