/* main.css - Non-critical styles loaded asynchronously */
@import url('./unified-selectors.css');

/* Load fonts with display swap for better performance */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

@font-face {
  font-family: 'BlockBerthold';
  src: url('../fonts/BlockBerthold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Improved font loading */
}

/* Enhanced Color System - Extended from critical styles */
:root {
  /* Base colors already defined in critical CSS */
  
  /* Noise Effect Pattern */
  --noise-pattern: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  
  /* Extra UI Colors */
  --color-green: #00C10D;
  --color-blue: #2D2DFF;
  --color-red: #F21215;
  
  /* Derived Colors for UI States */
  --color-orange-hover: #E5570F;
  --color-orange-active: #CC4D0D;
  --color-orange-light: #FFE5D6;
  --color-orange-dark: #CC4100;
  
  --color-yellow-hover: #E6C928;
  --color-yellow-active: #CCB324;
  --color-yellow-light: #FFF9E6;
  
  --color-black-light: #404040;
  --color-black-lighter: #666666;
  --color-black-lightest: #999999;
  
  --color-green-hover: #00A80B;
  --color-green-active: #009009;
  --color-green-light: #E6F9E7;
  
  --color-blue-hover: #2626E6;
  --color-blue-active: #1F1FCC;
  --color-blue-light: #E6E6FF;
  
  --color-red-hover: #D90F12;
  --color-red-active: #BF0D10;
  --color-red-light: #FFE6E6;
  
  /* Neutral Colors */
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  --shadow-inset: inset 0.75px -0.75px 1px 0.5px rgba(0, 0, 0, 0.3), inset -0.75px 0.75px 1px 1px rgba(255, 255, 255, 0.3);
}

/* Enhanced Typography - Non-critical styles */
*, *::before, *::after {
  letter-spacing: 0.025rem;
  line-height: 1.5;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
}

h2, h3, h4, h5, h6 {
  font-weight: 500;
  margin: 0;
}

/* Material Icons */
.material-symbols-rounded {
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* Image Optimization */
img, canvas {
  display: block;
  max-width: 100%;
}

/* Enhanced Button System - Building on critical styles */
.btn {
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Button System */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-kerning: auto;
  letter-spacing: 0.05em;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 0px solid transparent;
  width: 100%;
  gap: 0.5rem;
  white-space: nowrap;
  text-align: center;
  min-height: 3rem; /* Minimum touch target size */
  max-width: 100%;
  position: relative;
  overflow: hidden;
  /*box-shadow: inset -0.5px -0.5px 0.5px 1px rgba(0, 0, 0, 0.2);*/

  box-shadow: rgba(0, 0, 0, 0.08) 0 0 0 1px, rgba(0, 0, 0, 0.08) 0 -2px 1px 0 inset, rgba(255, 255, 255, 0.2) 0 2px 1px 0 inset, 0 2px 5px -1px rgba(0, 0, 0, 0.05), 0 1px 3px -1px rgba(0, 0, 0, 0.3);
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);

}

.button--full-width {
  width: 100% !important;
}

/* Mobile-first approach */
@media (max-width: 768px) {
  .button {
    padding: 0.875rem 1rem;
    font-size: 1rem;
  }

  .button--small {
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
  }

  .button--large {
    padding: 1rem 1.25rem;
    font-size: 1rem;
  }

  .button--icon-only {
    padding: 0.75rem;
    min-width: 3rem; /* Minimum touch target size */
    min-height: 3rem;
  }
}

/* Desktop enhancements */
@media (min-width: 769px) {
  .button {
  
    min-width: 120px;
   
  }

  .button:active {
    transform: translateY(1px);
  }

  .button--primary:active {
    background-color: var(--color-yellow-active);
  }

  .button--orange:active {
    background-color: var(--color-orange-active);
  }

  .button--secondary:active {
    background-color: var(--color-gray-200);
  }
}

.button:disabled {
  opacity: 0.5;
  filter: grayscale(100%);
  mix-blend-mode: multiply;
  cursor: not-allowed;
  pointer-events: none;


  transform: none !important;
}

.button--primary:disabled {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: transparent;
}

.button--orange:disabled {
  background-color: var(--color-orange-light);
  color: var(--color-white);
  border-color: transparent;
}

.button--secondary:disabled {
  background-color: var(--color-white);
  color: var(--color-gray-400);
  border-color: var(--color-gray-200);
}

/* Primary Button - Yellow CTA Brand Color */
.button--primary {
  background-color: var(--color-yellow);
  color: var(--color-black);
  border-color: transparent;
  position: relative;
  overflow: hidden;
}

.button--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--noise-pattern);
  opacity: 0.20;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.button--primary:hover:not(:disabled) {
  background-color: var(--color-yellow-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Orange Button - Secondary Brand Color */
.button--orange {
  background-color: var(--color-orange);
  color: var(--color-white);
  border-color: transparent;
}

.button--orange:hover:not(:disabled) {
  background-color: var(--color-orange-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(255, 97, 23, 0.2);
}

/* Secondary Button */
.button--secondary {
  background-color: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-gray-200);
}

.button--secondary:hover:not(:disabled) {
  background-color: var(--color-white);
  border-color: var(--color-orange);
  color: var(--color-orange);
  transform: translateY(-1px);
}

/* Success Button - Green */
.button--success {
  background-color: var(--color-green);
  color: var(--color-white);
  border-color: transparent;
}

.button--success:hover:not(:disabled) {
  background-color: var(--color-green-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 193, 13, 0.2);
}

/* Info Button - Blue */
.button--info {
  background-color: var(--color-blue);
  color: var(--color-white);
  border-color: transparent;
}

.button--info:hover:not(:disabled) {
  background-color: var(--color-blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(45, 45, 255, 0.2);
}

/* Danger Button - Red */
.button--danger {
  background-color: var(--color-red);
  color: var(--color-white);
  border-color: transparent;
}

.button--danger:hover:not(:disabled) {
  background-color: var(--color-red-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(242, 18, 21, 0.2);
}

/* Button Size Variants */
.button--small {
  padding: 8px 12px;
  font-size: 0.875rem;
  min-height: 36px;
}

.button--large {
  padding: 14px 16px;
  font-size: 1.125rem;
  min-height: 52px;
}

/* Button with Icon */
.button--icon-only {
  padding: 10px;
  width: auto;
  aspect-ratio: 1/1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button .material-symbols-rounded {
  font-size: 1.125em;
  line-height: 1;
  vertical-align: middle;
}

/* Loading state */
.button--loading {
  position: relative;
  cursor: wait;
}

.button--loading::after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  border: 2px solid transparent;
  border-radius: 50%;
  border-top-color: currentColor;
  animation: button-loading-spinner 0.6s linear infinite;
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

/* Focus styles */
.button:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

/* Active state */
.button:active:not(:disabled) {
  transform: scale(0.98);
}

/* Utility Classes for Brand Colors */
.text-orange { color: var(--color-orange); }
.text-yellow { color: var(--color-yellow); }
.text-black { color: var(--color-black); }
.text-green { color: var(--color-green); }
.text-blue { color: var(--color-blue); }
.text-red { color: var(--color-red); }

.bg-orange { background-color: var(--color-orange); }
.bg-yellow { background-color: var(--color-yellow); }
.bg-black { background-color: var(--color-black); }
.bg-main-white { background-color: var(--color-main-white-bg); }
.bg-green { background-color: var(--color-green); }
.bg-blue { background-color: var(--color-blue); }
.bg-red { background-color: var(--color-red); }

.border-orange { border-color: var(--color-orange); }
.border-yellow { border-color: var(--color-yellow); }
.border-black { border-color: var(--color-black); }
.border-green { border-color: var(--color-green); }
.border-blue { border-color: var(--color-blue); }
.border-red { border-color: var(--color-red); }

/* Noise Effect Utilities */
.noise-overlay {
  position: relative;
  overflow: hidden;
}

.noise-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--noise-pattern);
  opacity: 0.15;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

.noise-overlay--light::before {
  opacity: 0.08;
}

.noise-overlay--medium::before {
  opacity: 0.15;
}

.noise-overlay--heavy::before {
  opacity: 0.25;
}

.noise-overlay--screen::before {
  mix-blend-mode: screen;
  opacity: 0.1;
}

.noise-overlay--overlay::before {
  mix-blend-mode: overlay;
  opacity: 0.2;
}

.noise-background {
  background-image: var(--noise-pattern);
  background-size: 256px 256px;
  background-repeat: repeat;
}

/* 
Updated Button System Examples:

Primary CTA button (Yellow with noise effect):
<button class="button button--primary">Primary CTA</button>

Orange button:
<button class="button button--orange">Orange Action</button>

Secondary button:
<button class="button button--secondary">Secondary Button</button>

Success button (Green):
<button class="button button--success">Success Button</button>

Info button (Blue):
<button class="button button--info">Info Button</button>

Danger button (Red):
<button class="button button--danger">Danger Button</button>

Primary button with icon:
<button class="button button--primary">
  <span class="material-symbols-rounded">check</span>
  Primary CTA
</button>

Disabled button:
<button class="button button--primary" disabled>Disabled Button</button>

Size variants:
<button class="button button--primary button--small">Small CTA</button>
<button class="button button--primary button--large">Large CTA</button>

Icon-only button:
<button class="button button--secondary button--icon-only">
  <span class="material-symbols-rounded">edit</span>
</button>

Noise Effect Examples:

Basic noise overlay:
<div class="noise-overlay">Content with noise</div>

Different intensities:
<div class="noise-overlay noise-overlay--light">Light noise</div>
<div class="noise-overlay noise-overlay--heavy">Heavy noise</div>

Different blend modes:
<div class="noise-overlay noise-overlay--screen">Screen blend</div>
<div class="noise-overlay noise-overlay--overlay">Overlay blend</div>

Background noise:
<div class="noise-background">Noise background</div>
*/

/* === Sidebar Toggle Button (Global) === */
.sidebar-toggle-button {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--color-orange-dark);
  border: 0px solid transparent;
  border-radius: 12px;
  color: var(--color-white);
  cursor: pointer;
  transition: all 0.2s ease;
  
  box-shadow: rgba(0, 0, 0, 0.08) 0 0 0 1px, rgba(0, 0, 0, 0.08) 0 -2px 1px 0 inset, rgba(255, 255, 255, 0.2) 0 2px 1px 0 inset, 0 2px 5px -1px rgba(0, 0, 0, 0.05), 0 1px 3px -1px rgba(0, 0, 0, 0.3);
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);
  
}

.sidebar-toggle-button:hover {
  background-color: var(--color-orange-light);
  border-color: var(--color-orange-light);
  color: var(--color-orange-dark);
  
}

.sidebar-toggle-button .material-symbols-rounded {
  font-size: 24px;
  transition: transform 0.2s ease;
}

/* Desktop: Position button relative to sidebar panel */
@media (min-width: 768px) {
  .sidebar-toggle-button {
    right:  420px; 
    /* Just to the left of the 400px sidebar */
    top: 50%;
    transform: translateY(-50%);
    transition: right 0.3s ease, all 0.2s ease;
  }
  
  .sidebar-toggle-button.sidebar-hidden {
    right: 16px; /* Move to screen edge when panel is hidden */
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (max-width: 767px) {
  .sidebar-toggle-button {
    width: 48px;
    height: 48px;
    background-color: var(--color-white);
    color: var(--color-orange-dark);
    z-index: 10;

  }
  .sidebar-toggle-button .material-symbols-rounded {
    font-size: 22px;
  }
}

/* When sidebar is hidden, keep button visible and in place */
.sidebar-toggle-button.sidebar-hidden {
  right: 16px;
}