/*
 * 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.
 */

/* FontFace Declarations */
@font-face {
  font-family: "Montserrat";
  src: url("/assets/Montserrat-VariableFont_wght-c4756298.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Permanent Marker";
  src: url("/assets/PermanentMarker-Regular-d0922e9f.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Base typography */
body {
  font-family: "Montserrat", system-ui, sans-serif;
}

/* Typography utilities */
.font-montserrat {
  font-family: "Montserrat", system-ui, sans-serif;
}

.font-marker {
  font-family: "Permanent Marker", cursive;
}

/* Line clamp utilities for article descriptions */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ALTCHA CAPTCHA widget theming - matches Photopia design system */
altcha-widget {
  --altcha-color-base: #ffffff;
  --altcha-color-border: #b9b1a3;
  --altcha-color-text: #29331b;
  --altcha-color-border-focus: #29331b;
  --altcha-color-error-text: #b94e4e;
  --altcha-color-footer-bg: #f2ecdf;
  --altcha-border-radius: 0.5rem;
  --altcha-max-width: 100%;
  display: block;
  font-family: "Montserrat", system-ui, sans-serif;
}