/* ROMAQ child template of Cassiopeia - look of the former jm-sport site
   Colours from the old template params: accent #f1b239, navy #081f4b, text #1c202e,
   page #f5f5f5, boxes #ececec / #e6e6e6, copyrights #081f4b / #cfcfd1 */

@font-face { font-family: "Aller"; src: url("../fonts/Aller_Rg.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Aller"; src: url("../fonts/Aller_It.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Aller"; src: url("../fonts/Aller_Bd.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Aller"; src: url("../fonts/Aller_BdIt.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --romaq-accent: #f1b239;
  --romaq-accent-dark: #a86f00;
  --romaq-navy: #081f4b;
  --romaq-text: #1c202e;
  --romaq-page: #f5f5f5;
  --romaq-box: #e6e6e6;
  --cassiopeia-color-primary: #081f4b;
  --cassiopeia-color-link: #a86f00;
  --cassiopeia-color-hover: #081f4b;
  --cassiopeia-font-family-body: "Aller", Arial, Helvetica, sans-serif;
  --cassiopeia-font-family-headings: "Aller", Arial, Helvetica, sans-serif;
  --body-font-family: "Aller", Arial, Helvetica, sans-serif;
}

body.site {
  background: var(--romaq-page);
  color: var(--romaq-text);
  font-family: "Aller", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
}
h1, h2, h3, h4, h5, h6 { font-family: "Aller", Arial, Helvetica, sans-serif; color: var(--romaq-text); font-weight: 700; }
h1 { font-size: 1.6rem; margin-bottom: 1rem; }
h2 { font-size: 1.3rem; }
h3, h4 { font-size: 1.1rem; }
a { color: var(--romaq-accent-dark); text-decoration: none; }
a:hover, a:focus { color: var(--romaq-navy); text-decoration: underline; }

/* ---------- Header: aqueduct sketch, menu top right, logo centred */
.container-header {
  display: flex;
  flex-direction: column;
  background-color: #a7c6ed;
  background-image: url("/images/hg-bg-aqueducts1.jpg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  box-shadow: none;
  color: var(--romaq-text);
  min-height: 300px;
  padding-bottom: 2.5rem;
}
.container-header > .grid-child { width: 100%; }
.container-header .container-nav { order: -1; display: flex; justify-content: flex-end; padding-top: .75rem; padding-bottom: .25rem; }
.container-header .container-nav > nav.navbar { margin-left: auto; padding: 0; }
.container-header .container-nav .navbar-collapse { justify-content: flex-end; }
.container-header .navbar-brand { margin: 1.5rem auto 0; padding: 0; text-align: center; }
.container-header .navbar-brand .brand-logo {
  display: inline-block;
  background: #fff;
  padding: .6rem .9rem;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(8, 31, 75, .18);
}
.container-header .navbar-brand .brand-logo img { display: block; max-width: 231px; width: 100%; height: auto; }
.container-header .site-description { display: none; }

/* main menu (Cassiopeia dropdown-metismenu) */
.container-header .mod-menu { color: var(--romaq-text); }
.container-header .metismenu.mod-menu .metismenu-item > a,
.container-header .metismenu.mod-menu .metismenu-item > button,
.container-header .metismenu.mod-menu .metismenu-item > span {
  color: #2d2d2d;
  font-weight: 700;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.container-header .metismenu.mod-menu > .metismenu-item { padding: .35em .7em; }
.container-header .metismenu.mod-menu > .metismenu-item.active > a,
.container-header .metismenu.mod-menu > .metismenu-item > a:hover,
.container-header .metismenu.mod-menu > .metismenu-item > a:focus {
  color: var(--romaq-navy);
  text-decoration: none;
  border-bottom: 2px dashed var(--romaq-accent);
}
.container-header .metismenu.mod-menu > .metismenu-item.active > a:after,
.container-header .metismenu.mod-menu > .metismenu-item > a:hover:after { display: none; }
.container-header .metismenu.mod-menu .mm-toggler { color: #2d2d2d; transform: scale(.75); }
.container-header .metismenu.mod-menu .mm-collapse {
  background: var(--romaq-navy);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.container-header .metismenu.mod-menu .mm-collapse .metismenu-item > a { color: #fff; text-transform: none; font-weight: 400; }
.container-header .metismenu.mod-menu .mm-collapse .metismenu-item > a:hover,
.container-header .metismenu.mod-menu .mm-collapse .metismenu-item.active > a { color: var(--romaq-accent); text-decoration: none; }
.container-header .navbar-toggler { color: var(--romaq-navy); border-color: var(--romaq-navy); background: rgba(255, 255, 255, .7); }

/* ---------- Breadcrumb bar (banner position, full width orange) */
.container-banner .mod-breadcrumbs__wrapper,
.container-banner nav[aria-label] { margin: 0; }
.container-banner { background: var(--romaq-accent); margin-bottom: 1rem; }
.container-banner .mod-breadcrumbs {
  max-width: 1320px;
  margin: 0 auto;
  padding: .55rem 1rem !important;
  background: transparent;
  color: var(--romaq-navy);
  font-size: .95rem;
}
.container-banner .mod-breadcrumbs .mod-breadcrumbs__here,
.container-banner .mod-breadcrumbs .breadcrumb-item,
.container-banner .mod-breadcrumbs .breadcrumb-item.active,
.container-banner .mod-breadcrumbs a { color: var(--romaq-navy); }
.container-banner .mod-breadcrumbs .breadcrumb-item + .breadcrumb-item::before { color: var(--romaq-navy); }
.container-banner .mod-breadcrumbs a:hover { color: #000; }

/* ---------- Content and sidebar */
.site-grid { margin-top: 0; }
.container-header { margin-bottom: 0; }
.container-component > main, .container-component .com-content-article, .container-component .contact {
  background: #fff;
  padding: 1.5rem 1.75rem;
  border-radius: 4px;
}
.container-component .com-romaq, .container-component [class*="romaq-"] { background: transparent; }
.com-content-article__body ul > li::marker { color: var(--romaq-accent); }
.com-content-article__body img { max-width: 100%; height: auto; }

.container-sidebar-left .card,
.container-sidebar-right .card {
  background: var(--romaq-box);
  border: 0;
  border-radius: 0;
}
.container-sidebar-left .card-header,
.container-sidebar-right .card-header {
  background: transparent;
  border: 0;
  color: var(--romaq-navy);
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
  padding-bottom: .25rem;
}
.container-sidebar-left .card-header::after,
.container-sidebar-right .card-header::after {
  content: "";
  display: block;
  width: 3rem;
  margin-top: .4rem;
  border-bottom: 2px dashed var(--romaq-accent);
}
.romaq-sponsors .card-body { text-align: center; }
.romaq-sponsors img { max-width: 100%; height: auto; }
.container-sidebar-left .mod-menu a { color: var(--romaq-text); }
.container-sidebar-left .mod-menu .current > a { color: var(--romaq-accent-dark); font-weight: 700; }

/* ---------- FAQ (native details/summary) */
.romaq-faq-item { border: 1px solid #ececec; border-radius: 4px; margin-bottom: .6rem; background: #fff; }
.romaq-faq-item > summary {
  cursor: pointer;
  padding: .7rem 1rem;
  font-weight: 700;
  color: var(--romaq-navy);
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
}
.romaq-faq-item > summary::-webkit-details-marker { display: none; }
.romaq-faq-item > summary::after { content: "+"; position: absolute; right: 1rem; top: .55rem; font-size: 1.3rem; color: var(--romaq-accent-dark); }
.romaq-faq-item[open] > summary { border-bottom: 2px dashed var(--romaq-accent); }
.romaq-faq-item[open] > summary::after { content: "\2212"; }
.romaq-faq-item > summary:focus-visible { outline: 2px solid var(--romaq-navy); outline-offset: 2px; }
.romaq-faq-body { padding: .75rem 1rem; }
.romaq-faq-body img { max-width: 100%; height: auto; }

/* ---------- Footer */
.container-footer { background: var(--romaq-navy); color: #cfcfd1; margin-top: 2.5rem; }
.container-footer .grid-child { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.romaq-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; width: 100%; font-size: .9rem; }
.romaq-footer p { margin: 0; }
.container-footer a { color: #cfcfd1; }
.back-to-top-link { background: var(--romaq-accent); color: var(--romaq-navy); }

/* ---------- Mobile */
@media (max-width: 991.98px) {
  .container-header { min-height: 220px; background-size: auto 100%; }
  .container-header .container-nav { justify-content: flex-end; }
  .container-header .container-nav > nav.navbar { width: 100%; justify-content: flex-end; }
  .container-header .navbar-collapse { flex-basis: 100%; }
  .container-header .metismenu.mod-menu { background: rgba(255, 255, 255, .92); border-radius: 4px; padding: .25rem 0; }
  .container-header .metismenu.mod-menu > .metismenu-item { padding: .25em 1em; }
}
@media (max-width: 575.98px) {
  .container-header .navbar-brand .brand-logo img { max-width: 190px; }
  .container-component > main, .container-component .com-content-article { padding: 1rem; }
}