/* =========================
   MONTSERRAT (TTF only) — robust paths + weights
   ========================= */

/* Regular 400 */
@font-face{
  font-family:'Montserrat';
  src:
    url('/system/modules/org.klanen.core/resources/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'),
    url('/system/modules/org.klanen.core/resources/fonts/Montserrat/Montserrat-regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* Italic 400 */
@font-face{
  font-family:'Montserrat';
  src:
    url('/system/modules/org.klanen.core/resources/fonts/Montserrat/Montserrat-Italic.ttf') format('truetype'),
    url('/system/modules/org.klanen.core/resources/fonts/Montserrat/Montserrat-italic.ttf') format('truetype');
  font-weight:400;
  font-style:italic;
  font-display:swap;
}

/* Bold 700 */
@font-face{
  font-family:'Montserrat';
  src:
    url('/system/modules/org.klanen.core/resources/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype'),
    url('/system/modules/org.klanen.core/resources/fonts/Montserrat/Montserrat-bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* Bold Italic 700 */
@font-face{
  font-family:'Montserrat';
  src:
    url('/system/modules/org.klanen.core/resources/fonts/Montserrat/Montserrat-BoldItalic.ttf') format('truetype'),
    url('/system/modules/org.klanen.core/resources/fonts/Montserrat/Montserrat-Bolditalic.ttf') format('truetype');
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

/* Map Bootstrap-ish weights to files we have */
@font-face{
  font-family:'Montserrat';
  src:
    url('/system/modules/org.klanen.core/resources/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
  font-weight:300; /* use regular file for light */
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:
    url('/system/modules/org.klanen.core/resources/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
  font-weight:500; /* use regular file for 500 */
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:
    url('/system/modules/org.klanen.core/resources/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
  font-weight:600; /* use bold file for 600 */
  font-style:normal;
  font-display:swap;
}

/* Apply globally (keep Arial as last fallback) */
html, body{
  font-family:'Montserrat', Arial, sans-serif !important;
}

/* Make most elements inherit it */
body :where(h1,h2,h3,h4,h5,h6,p,a,small,li,ul,ol,blockquote,code,pre,
            button,input,textarea,select,label,div,span,table,th,td,figcaption){
  font-family:inherit !important;
}

/* Don’t mess with icon fonts */
svg,i,.bi,[class^="bi-"],[class*=" bi-"],.fa,[class^="fa-"],[class*=" fa-"]{
  font-family:initial!important;
}





/* =========================
   KLANEN.GLOBAL CSS
   ========================= */

* {
  box-sizing: border-box;
}


/* Legacy slide-in menu (kept) */
.custom-menu {
  position: fixed;
  top: 56px; /* høyden på navbar */
  right: 0;
  width: 260px;
  height: 100%;
  background-color: #343a40;
  z-index: 1050;
  overflow-y: auto;
  border-left: 1px solid #222;
}

/* Header / footer helpers (kept) */
.logo-header-color { background-color: #000000; }

.header-stuff {
  background-color: #000000;
  margin: 0;
}

/* Footer text */
.footer-text {
  font-size: 15px;
  font-style: italic;
}
.footer-text-delimiter {
  width: 100%;
  height: 1px;
  border: none;
  background-color: #ccc;
}

/* Generic spacing utility */
.content-normal-margins {
  margin: 10px;
}

/* Float clearing helper */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* -------------------------
   OLD FRONT-PAGE IMAGE HELPER
   (You can retire this if all
   listings use .kl-thumb now)
   ------------------------- */
.article-list-frontpages-images {
  /* max-width: 350px;  <-- consider removing this limit */
  height: auto;
  display: block;
  margin-bottom: 16px;
}

/* Keep for details page / older templates */
.article-image-wrapper { position: relative; }

/* Featured (top) image */
.article-list-featured-image {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 16px;
}

/* Sidebar list thumbnails */
.article-list-sidebar-image {
  width: 100%;
  max-width: 100%;
  height: 90px;           /* Fast høyde */
  object-fit: cover;      /* Zoom og klipp til fylling */
  border-radius: 4px;
}

/* =========================
   UNIFORM CROPPED THUMBNAILS
   (Use this wrapper around ALL
   list/grid images on front page,
   categories, and search.)
   ========================= */
.kl-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* same height for all thumbs */
  overflow: hidden;
  border-radius: 6px;
  background: transparent; /* or #e9eef6 if you want a tile */
}
.kl-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* crop (don’t distort) */
  object-position: center;
  display: block;
}

/* ============================
   Article date overlay on thumbnails
   ============================ */
/* ONE RULE – adjust here if you want bottom-right instead */
.kl-thumb .article-date-overlay,
.article-image-wrapper .article-date-overlay {
  position: absolute;
  left: .5rem;   /* change to 'auto' if you want right */
  top: .5rem;    /* change to 'auto' if you want bottom */
  right: auto;
  bottom: auto;

  display: inline-block;
  padding: .2rem .45rem;
  border-radius: 4px;

  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: .8rem;
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
}