/*
 * newmalta.org — child template of Cassiopeia (Joomla 4.4.14), group 18.
 * Loaded by Cassiopeia's own "template.user" asset (no index.php override).
 * 2020 identity rebuilt on Cassiopeia: red #cc3333, Times New Roman (system font, no web fonts, no CDN),
 * black header/menu as in 2020, module titles with the 25 % red underline, date badge, carousel.
 */

/* ------------------------------------------------------------------ design tokens */
:root {
  --nm-red: #cc3333;            /* historic primary (2020 toolbar)          */
  --nm-red-dark: #a32929;       /* hover / active                            */
  --nm-black: #000000;          /* 2020 header and menu bar                  */
  --nm-ink: #222222;            /* body text                                 */
  --nm-muted: #555555;
  --nm-menu-text: #d1d1d1;      /* 2020 menu text                            */
  --nm-bg: #ffffff;
  --nm-surface: #f5f5f5;        /* 2020 content / sidebar background         */
  --nm-border: #dddddd;
  --nm-badge: #54575a;          /* 2020 date badge background                */
  --nm-shadow: 0 3px 2px rgba(0, 0, 0, .17);
  --nm-radius: 3px;
  --nm-space: 1rem;
  --nm-content-width: 68.75rem; /* 1100 px, the 2020 template width          */
  --nm-font: "Times New Roman", Times, serif;

  /* Cassiopeia variables */
  --cassiopeia-color-primary: var(--nm-red);
  --cassiopeia-color-link: var(--nm-red);
  --cassiopeia-color-hover: var(--nm-red-dark);
  --cassiopeia-font-family-body: var(--nm-font);
  --cassiopeia-font-family-headings: var(--nm-font);
  --cassiopeia-font-weight-headings: 700;
}

body {
  font-family: var(--nm-font);
  color: var(--nm-ink);
  background: var(--nm-bg);
  font-size: 1.0625rem;
}

h1, h2, h3, h4, h5, h6, .page-header h1, .page-header h2 {
  font-family: var(--nm-font);
}

a { color: var(--nm-red); }
a:hover, a:focus { color: var(--nm-red-dark); }

/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--nm-red);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ 1100 px layout */
.site-grid, .footer {
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [main-start] repeat(4, minmax(0, calc(var(--nm-content-width) / 4)))
    [main-end] minmax(0, 1fr)
    [full-end];
}

/* gutter that centres a 1100 px band inside a full-width element */
:root { --nm-gutter: max(var(--nm-space), calc((100% - var(--nm-content-width)) / 2)); }

/* ------------------------------------------------------------------ header */
.container-header {
  background-color: var(--nm-black);
  background-image: linear-gradient(180deg, #1a1a1a 0%, var(--nm-black) 100%);
  box-shadow: none;
}

/* header rows (Cassiopeia markup: topbar, below-top, brand, nav — all direct children of the header):
   toolbar and menu bar full width, logo (brand) left and header-bar module (below-top) right on one row */
.container-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.container-header > * { box-sizing: border-box; }
.container-header > .container-topbar { order: 0; flex: 0 0 100%; }
.container-header > .grid-child:not(.container-below-top):not(.container-nav) {
  order: 1;
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  margin: 0 0 0 var(--nm-gutter);
  padding-left: 0;
  padding-right: 0;
}
.container-header > .container-below-top {
  order: 2;
  flex: 0 1 auto;
  width: auto;
  max-width: none;
  margin: 0 var(--nm-gutter) 0 1rem;
  padding-left: 0;
  padding-right: 0;
}
.container-header > .container-nav { order: 3; flex: 0 0 100%; max-width: none; }

/* toolbar (topbar) — red as in 2020 */
.container-header .container-topbar {
  background: var(--nm-red);
  color: #fff;
  padding: .25rem var(--nm-gutter);
}

.container-header .container-topbar a:not(.btn),
.container-header .container-topbar a:not(.btn):hover,
.container-header .container-topbar a:not(.btn):focus {
  color: #fff;
}

.container-header .container-topbar a:focus-visible { outline-color: #fff; }

/* logo (Cassiopeia brand) and the header-bar module (below-top) on one row on large screens */
.container-header .navbar-brand { padding: .25rem 0; }
.container-header .brand-logo img { max-width: 100%; height: auto; max-height: 15rem; }

.container-header .container-below-top img { max-width: 100%; height: auto; }
.container-header .container-below-top p { margin: 0; }

/* menu bar — black with red accents (2020); menu left, search right on large screens */
.container-header .container-nav {
  background: var(--nm-black);
  border-top: 1px solid #222;
  border-bottom: 2px solid var(--nm-red);
  padding: 0 var(--nm-gutter);
  align-items: center;
}

@media (min-width: 992px) {
  .container-header .container-nav { flex-wrap: nowrap; gap: 1.5rem; padding-bottom: 0; }
  .container-header .container-nav > nav, .container-header .container-nav > .mod-menu { flex: 1 1 auto; min-width: 0; }
  .container-header .container-nav > .container-search { flex: 0 0 12rem; }
  .container-header .mod-menu { flex-wrap: wrap; align-items: center; }
  .container-header .container-nav .mod-menu > li { display: flex; align-items: center; padding: .2rem .1rem; }
  .container-header .container-nav .mod-menu > li > a,
  .container-header .container-nav .mod-menu > li > span { padding: .45rem .45rem; font-size: 1rem; }
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu > li > button {
  color: var(--nm-menu-text);
  font-family: var(--nm-font);
  font-size: 1.05rem;
  border-top: 2px solid transparent;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus,
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a {
  color: #fff;
  border-top-color: var(--nm-red);
  text-decoration: none;
}

.container-header .metismenu.mod-menu .mm-collapse {
  background: rgba(0, 0, 0, .92);
  border-bottom: 2px solid var(--nm-red);
  border-radius: 0 0 var(--nm-radius) var(--nm-radius);
}

.container-header .metismenu.mod-menu .mm-collapse > li > a {
  color: #e8e8e8;
}

.container-header .metismenu.mod-menu .mm-collapse > li > a:hover,
.container-header .metismenu.mod-menu .mm-collapse > li > a:focus {
  color: #fff;
  background: var(--nm-red-dark);
}

/* strong focus ring on the black menu bar (Cassiopeia's metismenu default is a 1 px dotted outline) */
.container-header .container-nav .mod-menu a:focus-visible,
.container-header .container-nav .mod-menu button:focus-visible,
.container-header .container-nav .navbar-toggler:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.container-header .navbar-toggler {
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
}

/* search box (mod_finder 134) */
.container-header .container-search { padding: .5rem 0; }
.container-header .container-search .form-control {
  font-family: var(--nm-font);
  border-radius: var(--nm-radius);
  border: 1px solid #444;
}

/* ------------------------------------------------------------------ module chrome (Cassiopeia "card") */
.card {
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius);
  box-shadow: var(--nm-shadow);
}

.card-header {
  position: relative;
  background: transparent;
  color: #333;
  font-family: var(--nm-font);
  font-size: 1.25rem;
  border-bottom: 1px solid var(--nm-red);
  padding-bottom: .75rem;
}

.card-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 25%;
  height: 2px;
  background: var(--nm-red);
}

/* 2020 "box-grey" variant, still configured on the sidebar modules (module class suffix) */
.card.box-grey { background: var(--nm-surface); }
.sidebar-left .card-header { color: #444; }

/* main content area */
.container-component { font-size: 1.0625rem; line-height: 1.6; }
.page-header h1, .page-header h2, .item-title, .blog-item h2 { color: #222; }
.page-header h2 a, .item-title a { color: #222; }
.page-header h2 a:hover, .item-title a:hover { color: var(--nm-red); }

.readmore .btn, .btn-primary {
  background-color: var(--nm-red);
  border-color: var(--nm-red);
  color: #fff;
}

.readmore .btn:hover, .readmore .btn:focus, .btn-primary:hover, .btn-primary:focus {
  background-color: var(--nm-red-dark);
  border-color: var(--nm-red-dark);
  color: #fff;
}

.pagination .page-link { color: var(--nm-red); }
.pagination .active .page-link, .pagination .page-item.active .page-link {
  background-color: #383838;
  border-color: #383838;
  color: #fff;
}

/* ------------------------------------------------------------------ date badge (2020) */
.article-info .nm-create { float: left; margin: 0 1.25rem .5rem 0; }

.nm-date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  min-height: 3.5rem;
  padding: .3rem .2rem .25rem;
  background: var(--nm-badge);
  color: #fff;
  border: 1px solid var(--nm-border);
  border-top: 8px solid var(--nm-red);
  border-radius: var(--nm-radius);
  box-shadow: var(--nm-shadow);
  line-height: 1.05;
  text-align: center;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
}

.nm-date-badge__day { font-size: 1.5rem; font-weight: 700; }
.nm-date-badge__month { font-size: .85rem; text-transform: uppercase; }
.nm-date-badge__year { font-size: .8rem; }

.article-info::after { content: ""; display: block; clear: both; }

/* ------------------------------------------------------------------ bottom-a: "Stazioni Antartiche" on the 2020 water background */
.container-bottom-a {
  grid-column: full-start / full-end;
  background: #0b2a3d url("../images/water.jpg") center / cover no-repeat;
  padding: 2rem var(--nm-gutter);
}

.container-bottom-a > .card {
  background: rgba(255, 255, 255, .92);
}

.container-bottom-a img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------------ bottom-b: carousel */
.container-bottom-b > .card:has(.nm-carousel) {
  grid-column: 1 / -1;
  padding: 0;
}

.nm-carousel { position: relative; }

.nm-carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.nm-carousel__viewport::-webkit-scrollbar { display: none; }

.nm-carousel__slides {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nm-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.nm-carousel__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 710 / 202;
  max-height: 350px;          /* 2020 slideshow max height */
  object-fit: cover;
}

.nm-carousel__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem;
  background: var(--nm-surface);
}

.nm-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0 .5rem;
  color: #fff;
  background: var(--nm-red);
  border: 0;
  border-radius: var(--nm-radius);
  font: inherit;
  cursor: pointer;
}

.nm-carousel__btn:hover, .nm-carousel__btn:focus { background: var(--nm-red-dark); }

.nm-carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: 0 .25rem; padding: 0; list-style: none; }

.nm-carousel__dot {
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 2px solid var(--nm-red);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.nm-carousel__dot[aria-current="true"] { background: var(--nm-red); }

@media (prefers-reduced-motion: reduce) {
  .nm-carousel__viewport { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------ social links (topbar module) */
.nm-social {
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nm-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.25rem;
  color: #fff;
  border-radius: 50%;
}

.nm-social__link:hover, .nm-social__link:focus { background: rgba(0, 0, 0, .2); }

/* ------------------------------------------------------------------ footer (2020 "bottom-c": contacts and map) */
.footer {
  color: var(--nm-ink);
  background: var(--nm-surface);
  background-image: none;
  border-top: 3px solid var(--nm-red);
}

.footer .grid-child { align-items: flex-start; flex-wrap: wrap; gap: 1rem; }
.footer a:not(.btn) { color: var(--nm-red-dark); }
.footer img { max-width: 100%; height: auto; }

.back-to-top-link { background: var(--nm-red); }
.back-to-top-link:hover, .back-to-top-link:focus { background: var(--nm-red-dark); }

/* ------------------------------------------------------------------ media in editorial content */
.container-component img, .card-body img { max-width: 100%; height: auto; }
.container-component iframe { max-width: 100%; }

/* ------------------------------------------------------------------ small screens */
@media (max-width: 991.98px) {
  .container-header > .grid-child:not(.container-below-top):not(.container-nav),
  .container-header > .container-below-top {
    flex: 0 0 100%;
    margin: 0;
    padding: .25rem var(--nm-space);
    justify-content: center;
  }
  .container-header .navbar-brand { justify-content: center; margin: 0 auto; }
  .container-header .container-below-top img { max-height: 5rem; width: auto; }
}