/*
 * Balneologie Transilvania – child template of Cassiopeia (Joomla 6)
 * Layout of the old Purity III "corporate" site, styled after magazine.joomla.org
 * (header, menu and footer bars, fonts, article cards).
 * Install as: media/templates/site/cassiopeia_balneo/css/user.css
 * Fonts:      media/templates/site/cassiopeia_balneo/fonts/opensans-latin.woff2
 *             media/templates/site/cassiopeia_balneo/fonts/opensans-latin-ext.woff2
 *
 * Version: 2.5 (2026-11-09)
 *
 * Changelog
 * 2.5 (2026-11-09) – old HTML in articles ({source} / Sourcerer): Bootstrap 3 .thumbnail photo grids,
 *                    responsive YouTube iframes; document link in the body font (old courier/Tahoma spans)
 * 2.4 (2026-11-09) – smaller headings on phones (< 768px): h1 22 / h2 19 / h3 17 / h4 16 / h5 15 px;
 *                    documents shown on phones too (plugin balneodocs 1.1.0 uses PDF.js), 75% screen height
 * 2.3 (2026-10-26) – heading links in brand blue #0067a2; h1–h3 margins equal (15px above and below)
 * 2.2 (2026-10-26) – no underline on a:not([class]) either (Cassiopeia default); heading links in header dark blue #1a3867
 * 2.1 (2026-10-26) – links underlined only on hover/focus; smaller headings (h1 28px … h6 14px)
 * 2.0 (2026-10-26) – magazine.joomla.org look: Open Sans headings (self-hosted), system body font 16px,
 *                    blue radial-gradient header, full-width #1b63a2 menu bar, navy dropdowns,
 *                    article list as white cards with blue top line, dark navy footer;
 *                    footer menu centred and shown on all screen sizes; first-item light-blue box removed
 * 1.2 (2026-10-17) – styles for {aridoc} documents (plugin "Content - Balneo Docs"),
 *                    iframe hidden on phones, document icon on the download link
 * 1.1 (2026-10-17) – menu hover dropdowns, top-a card reset + equal box images,
 *                    article title spacing, footer menu row/order, copyright styling
 * 1.0 (2026-10-17) – first version: colours, fonts, width, header, menu, slideshow,
 *                    boxes, article list, footer
 */

/* ---------- Open Sans (variable font, self-hosted – no Google request) ---------- */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/opensans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/opensans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Colours & fonts (values taken from magazine.joomla.org) ---------- */
:root {
  --balneo-navy: #152845;          /* top bar / dropdowns */
  --balneo-header: #1a3867;        /* header gradient outer */
  --balneo-header-light: #17568c;  /* header gradient centre */
  --balneo-menu: #1b63a2;          /* menu bar */
  --balneo-menu-active: rgba(19, 42, 76, .5);
  --balneo-footer-top: #10223e;
  --balneo-footer-bottom: #0b172a;
  --balneo-blue: #0d6efd;          /* links, card top line */
  --balneo-blue-hover: #0a58ca;
  --balneo-title: #0067a2;         /* text blue of the SNV Balneo logo (images/2021/03/snvbalneo-header.png) */
  --balneo-border: #dee2e6;
  --balneo-gray-bg: #f7f7f7;

  --cassiopeia-color-primary: var(--balneo-blue);
  --cassiopeia-color-link: var(--balneo-blue);
  --cassiopeia-color-hover: var(--balneo-blue-hover);
  --link-color: #0d6efd;
  --link-color-rgb: 13, 110, 253;
  --link-hover-color: #0a58ca;
  --link-hover-color-rgb: 10, 88, 202;

  --cassiopeia-font-family-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --cassiopeia-font-family-headings: "Open Sans", sans-serif;
  --cassiopeia-font-weight-headings: 700;
  --body-font-size: 1rem;
  --body-line-height: 1.5;
  --body-color: #212529;
}

/* Cassiopeia underlines a:not([class]) – no underline anywhere, only on hover/focus */
a,
a:not([class]) {
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* titles with links: brand blue of the association logo text */
:is(h1, h2, h3, h4, h5, h6) a,
:is(h1, h2, h3, h4, h5, h6) a:hover,
:is(h1, h2, h3, h4, h5, h6) a:focus {
  color: var(--balneo-title);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

h1, .h1, h2, .h2, h3, .h3 {
  margin-top: 15px;
  margin-bottom: 15px;
}

h1, .h1 { font-size: 1.75rem; }   /* 28px */
h2, .h2 { font-size: 1.375rem; }  /* 22px */
h3, .h3 { font-size: 1.25rem; }   /* 20px */
h4, .h4 { font-size: 1.125rem; }  /* 18px */
h5, .h5 { font-size: 1rem; }      /* 16px */
h6, .h6 { font-size: .875rem; }   /* 14px */

/* phones: smaller headings */
@media (max-width: 767.98px) {
  h1, .h1 { font-size: 1.375rem; }  /* 22px */
  h2, .h2 { font-size: 1.1875rem; } /* 19px */
  h3, .h3 { font-size: 1.0625rem; } /* 17px */
  h4, .h4 { font-size: 1rem; }      /* 16px */
  h5, .h5 { font-size: .9375rem; }  /* 15px */
}

/* ---------- Page width: 1180px like the old .container ---------- */
.grid-child {
  max-width: 1184px;
}

@supports (display: grid) {
  .site-grid {
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 17.75rem)) [main-end] minmax(0, 1fr) [full-end];
  }
}

/* ---------- Header: blue radial gradient, centred white site title ---------- */
.container-header {
  background-color: var(--balneo-header);
  background-image: radial-gradient(circle, var(--balneo-header-light), var(--balneo-header));
  background-repeat: no-repeat;
  border-bottom: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 0 1px rgba(0, 0, 0, .2);
}

.container-header .grid-child {
  padding-top: 0;
  padding-bottom: 0;
}

.container-header .navbar-brand {
  margin: 18px auto;
  padding: 0;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: calc(1.375rem + 1vw);
  font-weight: 400;
  line-height: 1.2;
  white-space: normal;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
}

.container-header .navbar-brand a {
  text-decoration: none;
}

.container-header .navbar-brand a:hover,
.container-header .navbar-brand a:focus {
  text-decoration: none;
}

@media (min-width: 1200px) {
  .container-header .navbar-brand {
    font-size: 2.25rem;
  }
}

@media (max-width: 600px) {
  .container-header .navbar-brand {
    margin: 12px auto;
  }
}

/* ---------- Main menu (mod_menu, layout "Collapsible Dropdown") ---------- */
/* full-width blue bar: border-image paints past the 1184px column without causing horizontal scroll */
.container-header .container-nav {
  padding: 0 .5em;
  border-image: linear-gradient(to bottom, #2f89d3 0 1px, #1e67a7 1px, #1a5f9c calc(100% - 1px), #368ad8 0) fill 0 // 0 100vmax;
}

.container-header nav {
  margin-top: 0;
}

.container-header .container-nav nav {
  margin-top: 0;
}

.container-header .metismenu.mod-menu > li.level-1 {
  padding: .75rem;
  font-size: .89rem;
  text-transform: none;
  transition: background-color .2s ease-in-out;
}

.container-header .metismenu > li.level-1 > a,
.container-header .metismenu > li.level-1 > button {
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
}

.container-header .metismenu > li.level-1:hover,
.container-header .metismenu > li.level-1:focus-within,
.container-header .metismenu > li.level-1.active {
  background-color: var(--balneo-menu-active);
  box-shadow: inset 3px 0 2px -2px rgba(0, 0, 0, .15), inset -3px 0 2px -2px rgba(0, 0, 0, .15);
}

.container-header .metismenu > li.level-1 > a:hover,
.container-header .metismenu > li.level-1 > button:hover,
.container-header .metismenu > li.level-1.active > a,
.container-header .metismenu > li.level-1.active > button {
  color: #fff;
  text-decoration: none;
}

/* Cassiopeia's animated underline under menu items – not used on the magazine */
.container-header .metismenu > li > a:after,
.container-header .metismenu > li > button:before {
  display: none;
}

/* Dropdowns: navy box like the magazine's mega menu */
.container-header .metismenu.mod-menu .mm-collapse,
.container-header .metismenu.mod-menu .parent > ul {
  background-color: var(--balneo-navy);
  border: 0;
  color: #fff;
  min-width: 250px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .25);
}

.container-header .metismenu.mod-menu .mm-collapse .metismenu-item {
  padding: .5rem 1rem;
  font-size: .89rem;
  text-transform: none;
  text-shadow: none;
}

.container-header .metismenu.mod-menu .mm-collapse .metismenu-item:hover,
.container-header .metismenu.mod-menu .mm-collapse .metismenu-item:focus-within,
.container-header .metismenu.mod-menu .mm-collapse .metismenu-item.active {
  background-color: var(--balneo-menu);
}

.container-header .metismenu.mod-menu .mm-collapse a,
.container-header .metismenu.mod-menu .mm-collapse button {
  color: #fff;
}

.container-header .metismenu.mod-menu .mm-collapse a:hover,
.container-header .metismenu.mod-menu .mm-collapse a:focus,
.container-header .metismenu.mod-menu .mm-collapse .active > a {
  color: #fff;
  text-decoration: none;
}

/* Desktop: open dropdowns on hover like the old mega menu (click still works) */
@media (min-width: 992px) {
  .container-header .metismenu > li.parent:hover > ul.mm-collapse,
  .container-header .metismenu > li.parent:focus-within > ul.mm-collapse {
    display: block;
  }
}

.container-header .navbar-toggler {
  margin: .5rem 0;
  border-color: rgba(255, 255, 255, .6);
}

@media (max-width: 991.98px) {
  .container-header .metismenu.mod-menu > li.level-1 {
    padding: .75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
  }
}

/* ---------- Banner: slideshow on a grey band (custom module 01) ---------- */
.container-banner {
  margin-bottom: 0;
}

.balneo-slideshow {
  background: var(--balneo-gray-bg);
  border-bottom: 1px solid var(--balneo-border);
  padding: 40px 20px;
}

.balneo-slideshow .carousel {
  max-width: 1140px;
  margin: 0 auto;
}

.balneo-slideshow .carousel-caption {
  left: 10%;
  right: 10%;
  bottom: 20px;
  padding: 10px 20px;
  background: rgba(0, 0, 0, .5);
}

.balneo-slideshow .carousel-caption h2 {
  margin: 0 0 5px;
  font-size: 1.5rem;
}

.balneo-slideshow .carousel-caption p {
  margin: 0;
}

.balneo-slideshow .carousel-caption a {
  color: #fff;
  text-decoration: none;
}

/* the old slideshow was hidden on phones */
@media (max-width: 767.98px) {
  .balneo-slideshow {
    display: none;
  }
}

/* ---------- top-a: the 4 boxes under the slideshow (custom module 02) ---------- */
.container-top-a {
  padding: 30px 0;
  border-bottom: 1px solid var(--balneo-border);
}

/* in case the module keeps Cassiopeia's "card" style: no border, no padding */
.container-top-a > .card {
  background: none;
  border: 0;
  box-shadow: none;
}

.container-top-a > .card > .card-body {
  padding: 0;
}

/* the 4 images have slightly different sizes (250x160 / 263x166) – show them all the same */
.balneo-boxes img {
  display: block;
  width: 100%;
  max-width: 250px;
  aspect-ratio: 25 / 16;
  object-fit: cover;
  margin: 0 auto;
}

.balneo-boxes h3 {
  margin-top: 10px;
  text-align: center;
}

/* ---------- Article list (Featured / Category Blog): white cards with a blue top line ---------- */
.container-component {
  padding-top: 20px;
}

.blog-featured .blog-items,
.blog .blog-items {
  gap: 1.5rem;
  margin-left: 0;
  margin-right: 0;
}

.blog-featured .blog-items .blog-item,
.blog .blog-items .blog-item {
  display: block;
  padding: 25px;
  margin-bottom: 0;
  overflow: hidden; /* contain the floated intro image */
  background-color: #fff;
  box-shadow: 0 0 2px hsla(216, 13%, 23%, .1), 0 2px 5px hsla(216, 13%, 23%, .08),
              0 5px 15px hsla(216, 13%, 23%, .08), inset 0 3px 0 var(--balneo-blue);
}

@media (min-width: 768px) {
  .blog-item .item-image {
    float: left;
    max-width: 430px;
    margin: 0 20px 10px 0;
  }
}

.blog-item .item-title {
  margin: 0 0 20px;
}

.readmore {
  clear: both;
  margin-bottom: 0;
  text-align: right;
}

/* ---------- Documents from {aridoc} tags (plugin "Content - Balneo Docs") ---------- */
.balneo-doc {
  display: block;
  margin: 10px 0 20px;
}

.balneo-doc-frame {
  display: block;
  max-width: 100%;
  border: 1px solid var(--balneo-border);
}

.balneo-doc-link {
  display: inline-block;
  margin-top: 5px;
}

.balneo-doc-link:before {
  content: "\f15c"; /* Font Awesome file-lines (Joomla ships FA 6 Free) */
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  margin-right: 6px;
}

/* the old editor wrapped some documents in courier / 12px Tahoma spans */
.balneo-doc {
  font-family: var(--cassiopeia-font-family-body);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
}

/* phones: the PDF.js viewer (plugin 1.1.0+) works here too – keep it shorter than the 1000px of the tag */
@media (max-width: 767.98px) {
  .balneo-doc-frame {
    width: 100% !important;
    height: 75vh !important;
  }
}

/* ---------- Old HTML in articles ({source} tags, Sourcerer) ---------- */
/* photo grids: Bootstrap 3 .thumbnail frames (Cassiopeia has the .row / .col-* grid, not .thumbnail) */
.com-content-article__body .thumbnail {
  margin-bottom: 1em;
  padding: 4px;
  background-color: #fff;
  border: 1px solid var(--balneo-border);
  border-radius: 4px;
}

.com-content-article__body .thumbnail img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* YouTube videos: full width up to 560px, 16:9 */
.com-content-article__body iframe[src*="youtube.com/embed"] {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* ---------- Footer: dark navy bar, centred menu + copyright ---------- */
.footer {
  background-color: #0e1e36;
  background-image: linear-gradient(to bottom, var(--balneo-footer-top), var(--balneo-footer-bottom));
  background-repeat: repeat-x;
  border-top: 1px solid var(--balneo-footer-bottom);
  color: #fff;
  margin-top: 2rem;
}

.footer .grid-child {
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 20px;
}

.footer a:not(.btn) {
  color: #fff;
}

.footer a:not(.btn):hover,
.footer a:not(.btn):focus {
  color: #ccc;
}

/* menu first, copyright after – whatever the module ordering is */
.footer .mod-menu {
  order: 1;
}

.footer .mod-custom {
  order: 2;
}

.footer .mod-menu {
  display: flex;
  flex-direction: row; /* Cassiopeia sets .mod-menu to column */
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  background: none;
}

.footer .mod-menu > li > a {
  display: block;
  padding: 0 .75rem;
}

.balneo-copyright,
.footer .mod-custom {
  border-top: 0;
  font-size: .875rem;
  padding: 0;
  text-align: center;
}

.footer .mod-custom p {
  margin: 0;
}