/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Lato */
@font-face {
  font-family: "Lato";
  src: url("/assets/Lato-Regular-ae4dad9b.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("/assets/Lato-Italic-dae91478.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("/assets/Lato-Bold-2a866c0a.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("/assets/Lato-BoldItalic-6f73cd6a.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("/assets/Lato-Light-445c26a3.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("/assets/Lato-LightItalic-6c4e8fa8.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Merriweather */
@font-face {
  font-family: "Merriweather";
  src: url("/assets/Merriweather24pt-Regular-de494473.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("/assets/Merriweather24pt-Italic-42f60c75.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("/assets/Merriweather24pt-Bold-d8ff8f3b.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("/assets/Merriweather24pt-BoldItalic-29b3d0db.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Masonry: Fix flash of unstyled content by hiding items until layout is ready. Only applies when JavaScript is enabled (progressive enhancement). */
[data-controller="masonry"]:not(.masonry-loaded) .masonry-item {
  opacity: 0;
}

[data-controller="masonry"].masonry-loaded .masonry-item {
  opacity: 1;
  transition: opacity 0.15s ease-in;
}

/* Grain texture background for warm, tactile aesthetic */
.grain-texture {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.05"/></svg>');
}

/* Hide number input arrows for cleaner UI while keeping native functionality */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}