/* ==========================================================
   Eratreener – Cassiopeia kohandus (Joomla 4/5)
   Paigalda: /media/templates/site/cassiopeia/css/user.css
   (lapsmalli puhul: /media/templates/site/<lapsmall>/css/user.css)
   ========================================================== */

:root {
  --er-bg-top: #8c0a0a;
  --er-bg-bottom: #560000;
  --er-panel: #7d2c2c;          /* menüü, teadaande kast, jalus */
  --er-panel-dark: #5e1515;
  --er-red: #d4141c;            /* pealkirjad, lingid */
  --er-yellow: #ffff00;
  --er-beez: #f1b270;
  --er-text: #333333;
  --er-font: Verdana, Tahoma, Arial, sans-serif;
  --er-head-font: Arial, Helvetica, sans-serif;
  --er-width: 960px;
  --er-side: 190px;
  --er-gap: 10px;
  --er-top: 20px;               /* tühi ruum lehe ülaservas */
  --er-logo-w: 200px;           /* logo laius päises */
  --er-banner-h: 150px;         /* päise kõrgus */

  --cassiopeia-color-primary: var(--er-red);
  --cassiopeia-color-link: var(--er-red);
  --cassiopeia-color-hover: var(--er-panel);
}

/* ---------- Taust ja põhiraam ---------- */
html { background: var(--er-bg-bottom); }

body {
  background: linear-gradient(to bottom, var(--er-bg-top), var(--er-bg-bottom)) fixed;
  color: var(--er-text);
  font-family: var(--er-font);
  font-size: 11px;
  line-height: 1.3;
}

/*
  Grid: 2 veergu.  [vasak 200px = logo / külgriba+10px vahe] [parem 760px = bänner / sisu]
  Nimelised jooned (full-start, main-start...) on alles, sest Cassiopeia
  klass .full-width viitab neile.
*/
.site-grid {
  display: grid;
  width: var(--er-width);
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  gap: 0;
  grid-template-areas: none;
  grid-template-columns:
    [full-start side-start] var(--er-logo-w)
    [side-end main-start]   minmax(0, 1fr)
    [main-end full-end];
  grid-template-rows: none;
  grid-auto-rows: auto;
}

/* Nulli Cassiopeia grid-area ja .full-width, siis paiguta ise */
.site-grid > * {
  grid-area: auto;
  min-width: 0;
}

/* Rida 1: bänner. Päis asub grid'i kohal (väljaspool), seega tõmbame
   bänneri negatiivse ülaääriga päise kõrvale; rida ise kukub 0 kõrguseks. */
.site-grid > .container-banner {
  grid-column: main-start / full-end;
  grid-row: 1;
  margin-top: calc(-1 * var(--er-banner-h));
  position: relative;
  z-index: 1;
}

/* Rida 2: gradientriba kogu laiuses (pseudo-element) */
.site-grid::before {
  content: "";
  grid-column: full-start / full-end;
  grid-row: 2;
  height: 18px;
  margin-bottom: var(--er-gap);
  background: linear-gradient(#B86A69, #7c0707);
}

/* Read 3-4: ülemised moodulid kogu laiuses */
.site-grid > .container-top-a { grid-column: full-start / full-end; grid-row: 3; }
.site-grid > .container-top-b { grid-column: full-start / full-end; grid-row: 4; }

/* Rida 5: külgriba + sisu */
.site-grid > .container-sidebar-left {
  grid-column: full-start / side-end;
  grid-row: 5;
  padding-right: var(--er-gap);
}
.site-grid > .container-component {
  grid-column: main-start / full-end;
  grid-row: 5;
}

/* Read 6-8 */
.site-grid > .container-sidebar-right { grid-column: main-start / full-end; grid-row: 6; }
.site-grid > .container-bottom-a      { grid-column: full-start / full-end;  grid-row: 7; }
.site-grid > .container-bottom-b      { grid-column: full-start / full-end;  grid-row: 8; }
.site-grid > .container-footer        { grid-column: full-start / full-end;  grid-row: 9; }

/* Mõned Cassiopeia versioonid mähivad sisu "main" kasti */
.container-component main,
.container-component .com-content-article { width: 100%; max-width: none; }

a { color: var(--er-red); text-decoration: none; }
a:hover, a:focus { color: var(--er-panel); text-decoration: underline; }

/* ---------- Päis: asub .site-grid'i kohal; ainult logo (200 x 150) ---------- */
.container-header {
  display: block;
  width: var(--er-width);
  max-width: 100%;
  height: var(--er-banner-h);
  margin: var(--er-top) auto 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border: 0;
  overflow: visible;
}

.container-header .grid-child {
  display: block;
  width: var(--er-logo-w);
  max-width: 100%;
  height: var(--er-banner-h);
  margin: 0;
  padding: 0;
  background: #ffffcc;
  overflow: hidden;
}

.container-header .container-nav,
.container-header .container-search { display: none; }

.container-header .navbar-brand {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.container-header .navbar-brand a,
.container-header .brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.container-header .brand-logo img,
.container-header .navbar-brand img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

/* ---------- Bänner (760 x 150) ---------- */
.container-banner {
  height: var(--er-banner-h);
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
}
.container-banner .mod-banners,
.container-banner .banneritem,
.container-banner .mod-custom,
.container-banner .card { margin: 0; padding: 0; border: 0; background: transparent; }
.container-banner img {
  display: block;
  width: 100%;
  height: var(--er-banner-h);
  object-fit: cover;
}

/* ---------- Vasak külgriba: menüü ---------- */
.container-sidebar-left {
  padding: 0;
  margin: 0;
  background: transparent;
}

.container-sidebar-left .card {
  border: 0;
  border-radius: 0;
  background: var(--er-panel);
  margin-bottom: var(--er-gap);
  color: #fff;
}

.container-sidebar-left .card._menu {
    margin-top: 0;
}

/* Menüü pealkiri: hele gradient, punane paks tekst, ikoon paremal */
.container-sidebar-left .card-header {
  background: linear-gradient(#ffffff, #cfcfcf);
  color: var(--er-red);
  font-family: var(--er-head-font);
  font-size: 11px;
  font-weight: bold;
  padding: 7px 10px;
  margin: 0;
  border: 0;
  border-radius: 0;
  min-height: 26px;
  /* background-image: url(/images/headers/card-header.jpg) no-repeat right top; */
}

.container-sidebar-left .card-body { padding: 8px 6px 14px; }

.container-sidebar-left .mod-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.container-sidebar-left .mod-menu li { margin: 0; padding: 0; }

.container-sidebar-left .mod-menu a,
.container-sidebar-left .mod-menu span {
  display: block;
  position: relative;
  padding: 3px 4px 3px 20px;
  color: #fff;
  font-family: var(--er-font);
  font-size: 11px;
  font-weight: bold;
  line-height: 1.45;
  text-decoration: none;
}

.container-sidebar-left .mod-menu a::before {
  content: "\2733";            /* ✳ */
  position: absolute;
  left: 2px;
  top: 3px;
  width: 14px;
  text-align: center;
  color: #fff;
}

.container-sidebar-left .mod-menu a:hover,
.container-sidebar-left .mod-menu .current > a,
.container-sidebar-left .mod-menu .active > a {
  color: var(--er-beez);
  text-decoration: none;
}

/* Bännerid külgribal (SportsGene) */
.container-sidebar-left .mod-banners,
.container-sidebar-left .card.mod-banners { background: transparent; }
.container-sidebar-left .mod-banners img { display: block; max-width: 100%; height: auto; background: #fff; }

/* ---------- Sisuala: valge kast ---------- */
.container-component {
  background: #fff;
  padding: 10px;
  margin: 0;
  box-shadow: none;
  font-size: 11px;
  text-align: justify;
}

/* Teadaande kast sisu ülaosas (moodul positsioonis main-top / top-a) */
.main-top,
.container-component > .mod-custom,
.container-top-a .card {
  background: var(--er-panel);
  color: var(--er-yellow);
  border: 0;
  border-radius: 0;
  margin: 0 0 14px;
  padding: 10px 15px;
  text-align: center;
  font-family: var(--er-head-font);
  font-size: 13px;
  font-weight: bold;
}

.main-top a,
.container-component > .mod-custom a,
.container-top-a .card a { color: var(--er-yellow); }

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

/* Pealkirjad */
.container-component h1,
.container-component h2,
.container-component .page-header h1,
.container-component .page-header h2 {
  color: var(--er-red);
  font-family: var(--er-head-font);
  font-size: 20px;
  font-weight: bold;
  border: 0;
  padding: 0;
  margin: 0 0 14px;
  text-align: left;
}

.container-component h3,
.container-component h4 {
  color: var(--er-text);
  font-family: var(--er-head-font);
  font-size: 12px;
  font-weight: bold;
}

.container-component .page-header { margin: 0; padding: 0; border: 0; }
.container-component p { margin: 0 0 11px; }
.container-component a { font-weight: bold; }
.container-component img { max-width: 100%; height: auto; }

/* ---------- Jalus ---------- */
.container-footer {
  width: var(--er-width);
  max-width: 100%;

  background: var(--er-panel);
  color: #fff;
  text-align: center;
  font-family: var(--er-head-font);
  font-size: 12px;
  padding: 8px 15px;
  margin: var(--er-gap) auto;
  border-bottom: 18px solid transparent;
  border-image: linear-gradient(var(--er-panel), var(--er-panel-dark)) 1;
}

.container-header {
  display: block;
  padding: 0;
  background: none;
  box-shadow: none;
  border: 0;
  overflow: visible;
}

.container-footer a { color: #fff; }

/* ---------- Nupud ja vormid ---------- */
.btn-primary {
  background: var(--er-panel);
  border-color: var(--er-panel);
  border-radius: 0;
}
.btn-primary:hover { background: var(--er-red); border-color: var(--er-red); }

/* ---------- Mobiil ---------- */
@media (max-width: 767.98px) {
  .site-grid {
    width: 100%;
    grid-template-columns: [full-start side-start main-start] minmax(0, 1fr) [side-end main-end full-end];
  }
  .site-grid::before { grid-row: auto; order: 2; }
 
  /* Järjestus mobiilis: külgriba (menüü) enne sisu */
  .site-grid > .container-banner        { order: 1; }
  .site-grid > .container-top-a         { order: 3; }
  .site-grid > .container-top-b         { order: 4; }
  .site-grid > .container-sidebar-left  { order: 5; }
  .site-grid > .container-component     { order: 6; }
  .site-grid > .container-sidebar-right { order: 7; }
  .site-grid > .container-bottom-a      { order: 8; }
  .site-grid > .container-bottom-b      { order: 9; }
  .site-grid > .container-footer        { order: 10; }
  .site-grid > * { grid-column: full-start / full-end !important; grid-row: auto !important; }
  .site-grid > .container-sidebar-left { padding-right: 0; }
  .container-header { width: 100%; height: 110px; }
  .container-header .grid-child { width: 100%; height: 110px; }
  .site-grid > .container-banner { margin-top: 0; }
  .container-banner, .container-banner img { height: auto; }
  .container-component { text-align: left; }
}