/*
 * Main Theme Stylesheet
 *
 * Contains base styles and variables for the light/dark theme toggle.
 */

body {
  font-family: 'Inter', sans-serif;
  overflow-x: hidden; /* Prevent horizontal scroll from animation */
}

html {
  overflow-x: hidden;
}

.hero-bg {
  background-image: url('../site/assets/two-goats.jpg');
  background-size: cover;
  background-position: center;
}

body::before,
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../site/assets/goat.svg');
  background-repeat: repeat;
  background-size: 150px;
  opacity: 0.03;
  z-index: -1;
  pointer-events: none;
}

body::before {
    animation: scroll-left 180s linear infinite;
}

body::after {
    background-image: url('../site/assets/goat.svg');
    background-size: 250px;
    opacity: 0.02;
    animation: scroll-right 240s linear infinite;
}


@keyframes scroll-left {
  0% { background-position: 0 0; }
  100% { background-position: 2000px -2000px; }
}

@keyframes scroll-right {
  0% { background-position: 0 0; }
  100% { background-position: -2000px 2000px; }
}


/* Enable light and dark theme variants */
:root {
  color-scheme: light dark;
}

/* Invert images in dark mode where specified */
html[data-theme="dark"] .dark\:invert {
  filter: invert(1) hue-rotate(180deg);
}

.lightbox-backdrop {
    transition: opacity 0.2s ease-in-out;
}

.lightbox-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-frame {
    transition: transform 0.2s ease-in-out;
    transform: scale(0.95);
}

.lightbox-backdrop.open .lightbox-frame {
    transform: scale(1);
}

@media print {
    .no-print {
        display: none !important;
    }
    .printable-card {
        page-break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}

/* Fix for calculator inputs in dark mode */
html[data-theme="dark"] .calculator-input,
html[data-theme="dark"] .dark-mode-readable,
html[data-theme="dark"] .dark-mode-readable td,
html[data-theme="dark"] .dark-mode-readable strong {
    background-color: #ffffff;
    color: #1e293b !important; /* Use !important to override tailwind's specificity */
}

html[data-theme="dark"] .dark-mode-readable input[type="checkbox"] {
    filter: invert(1);
}


/* Make date picker icon visible in dark mode on WebKit browsers */
html[data-theme="dark"] .calculator-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}