/*
 * TE v4 – aloldali oldalsáv (terv3_aloldal)
 * author: Laszlo BLAHO – www.blaho.hu
 *
 * Elemek (mind kártya, egymás alatt 24 px térközzel):
 *   .te-cardmenu     mod_menu "sidebar-card" / "sidebar-menu", mod_articles_categories "te-card"
 *   .te-doccard      mod_custom "document-card" – színes dokumentumkártya letöltőgombbal
 *   .te-contactcard  mod_custom "contact-card" – „kérdésed van?” kártya
 *   .te-sidecard     minden más modul (chromes/te-card) – fehér kártya címmel
 *
 * A színek a menüpont / modul szintjén inline CSS-változóból jönnek (HSL-hármas):
 *   --te-item  kártyamenü-pont,  --te-card  dokumentumkártya háttere.
 *
 * Réteg nélkül (mint a layout.css), így az örökölt tartalmi CSS nem írja felül.
 */

/* ==========================================================================
   Elrendezés
   ========================================================================== */

.te-page__sidebar {
   --te-side-radius: var(--radius-lg);
   --te-side-border: 1px solid hsla(var(--darkBlue), .1);
   --te-side-pad: 24px;

   align-self: start;
   min-width: 0;
}

/* 1040 px alatt az oldalsáv a tartalom alá kerül: két oszlopban, a menük teljes szélességben */
@media (576px <= width < 1040px) {
   .te-page__sidebar {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch; /* egy sorban azonos magasságú kártyák */

      > :is(.te-cardmenu, .te-sidecard:has(.mod-menu)) {
         grid-column: 1 / -1;
      }
   }
}

/* ==========================================================================
   Közös kártya-alap
   ========================================================================== */

:is(.te-cardmenu, .te-doccard, .te-contactcard, .te-sidecard) {
   position: relative;
   min-width: 0;
   margin: 0;
   border-radius: var(--te-side-radius, var(--radius-lg));
   font-size: 16px;
   line-height: 1.4;
   overflow-wrap: anywhere;
   hyphens: manual;

   :is(p, ul, ol) {
      margin: 0;
   }
}

/* ==========================================================================
   Kártyamenü
   ========================================================================== */

.te-cardmenu {
   --te-item: var(--blue);
   --te-cardmenu-bar: 4px;
   --te-cardmenu-pad-x: 22px;
   --te-cardmenu-pad-y: 16px;

   display: block;
   width: 100%;
   background-color: hsl(var(--white));
   border: var(--te-side-border, 1px solid hsla(var(--darkBlue), .1));
   overflow: hidden; /* a színes sávok a lekerekített sarkoknál is levágódnak */

   .te-cardmenu__title {
      margin: 0;
      padding: 20px var(--te-cardmenu-pad-x) 22px;
      background-color: hsl(var(--blue));
      color: hsl(var(--white));
      font-size: 21px;
      font-weight: 700;
      line-height: 1.2;
      text-wrap: balance;
   }

   :is(.te-cardmenu__list, .te-cardmenu__sub) {
      list-style: none;
      margin: 0;
      padding: 0;
   }

   .te-cardmenu__item {
      margin: 0;
      padding: 0;

      & + .te-cardmenu__item {
         border-top: 1px solid hsla(var(--darkBlue), .08);
      }
   }

   :is(.te-cardmenu__link, .te-cardmenu__label) {
      position: relative;
      display: flex;
      align-items: center;
      gap: 16px;
      min-height: 56px;
      padding: var(--te-cardmenu-pad-y) var(--te-cardmenu-pad-x) var(--te-cardmenu-pad-y) calc(var(--te-cardmenu-pad-x) + var(--te-cardmenu-bar));
      color: hsl(var(--blue));
      font-weight: 500;
      line-height: 1.25;
      text-decoration: none;
      transition: background-color var(--transition-time), color var(--transition-time);

      /* színes bal oldali sáv */
      &::before {
         content: '';
         position: absolute;
         inset: 0 auto 0 0;
         width: var(--te-cardmenu-bar);
         background-color: hsl(var(--te-item));
         transition: width var(--transition-time);
      }
   }

   .te-cardmenu__label {
      color: hsl(var(--midGray));
      font-size: var(--fs-sm);
      letter-spacing: .04em;
      text-transform: uppercase;
   }

   .te-cardmenu__text {
      flex: 1 1 auto;
      min-width: 0;
   }

   .te-cardmenu__image {
      flex: 0 0 auto;
      width: auto;
      max-height: 1.5em;
   }

   .te-cardmenu__arrow {
      flex: 0 0 auto;
      width: 16px;
      height: 10px;
      color: hsl(var(--te-item));
      transition: transform var(--transition-time);
   }

   .te-cardmenu__link {
      &:hover,
      &:focus-visible {
         background-color: hsla(var(--te-item), .08);
         color: hsl(var(--darkBlue));

         &::before {
            width: calc(var(--te-cardmenu-bar) + 2px);
         }

         .te-cardmenu__arrow {
            transform: translateX(4px);
         }
      }

      &:focus-visible {
         outline: 2px solid hsl(var(--te-item));
         outline-offset: -2px;
      }
   }

   /* Aktuális oldal (és a kategórialistában az aktív kategória) */
   .te-cardmenu__item.current > .te-cardmenu__link {
      background-color: hsla(var(--te-item), .12);
      color: hsl(var(--darkBlue));

      &::before {
         width: calc(var(--te-cardmenu-bar) + 2px);
      }
   }

   /* Almenü: halványabb sáv, behúzás, kisebb betű */
   .te-cardmenu__sub {
      border-top: 1px solid hsla(var(--darkBlue), .08);

      :is(.te-cardmenu__link, .te-cardmenu__label) {
         min-height: 0;
         padding-block: 11px;
         padding-left: calc(var(--te-cardmenu-pad-x) * 1.75);
         font-size: 15px;
         font-weight: 400;

         &::before {
            background-color: hsla(var(--te-item), .45);
         }
      }

      .te-cardmenu__sub :is(.te-cardmenu__link, .te-cardmenu__label) {
         padding-left: calc(var(--te-cardmenu-pad-x) * 2.5);
         font-size: var(--fs-sm);
      }
   }

   /* Kategórialista (mod_articles_categories "te-card") */
   .te-cardmenu__count {
      display: inline-block;
      min-width: 22px;
      margin-left: 6px;
      padding: 1px 6px;
      border-radius: 10px;
      background-color: hsla(var(--te-item), .14);
      color: hsla(var(--darkBlue), .8);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.4;
      text-align: center;
   }

   .te-cardmenu__desc {
      padding: 0 var(--te-cardmenu-pad-x) var(--te-cardmenu-pad-y) calc(var(--te-cardmenu-pad-x) + var(--te-cardmenu-bar));
      color: hsl(var(--midGray));
      font-size: 13px;
      line-height: 1.4;
   }
}

/* ==========================================================================
   Dokumentumkártya
   ========================================================================== */

.te-doccard {
   --te-card: var(--yellow);
   --te-doc-ink: var(--blue);
   --te-doc-eyebrow: hsla(var(--darkBlue), .7);
   --te-doc-btn-bg: var(--blue);
   --te-doc-btn-ink: var(--white);
   --te-doc-btn-hover: var(--darkBlue);

   padding: var(--te-side-pad, 24px);
   background-color: hsl(var(--te-card));
   color: hsl(var(--te-doc-ink));

   /* a cikkbe (JCE snippettel) tett kártyánál elég a te-color-<szín> osztály (content.css) */
   &[class*="te-color-"] {
      --te-card: var(--te-c);
   }

   &.te-doccard--dark,
   &:is(.te-color-orange, .te-color-turquoise, .te-color-purple, .te-color-strawberry, .te-color-green, .te-color-blue, .te-color-darkBlue, .te-color-darkblue, .te-color-midGray, .te-color-midgray):not(.te-doccard--light) {
      --te-doc-ink: var(--white);
      --te-doc-eyebrow: hsla(var(--white), .8);
      --te-doc-btn-bg: var(--white);
      --te-doc-btn-ink: var(--blue);
      --te-doc-btn-hover: var(--yellow);
   }

   /* fehér kártyán kerettel */
   &.te-color-white {
      border: var(--te-side-border, 1px solid hsla(var(--darkBlue), .1));
   }

   .te-doccard__eyebrow {
      margin-bottom: var(--space-2);
      color: var(--te-doc-eyebrow);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .28em;
      line-height: 1.4;
      text-transform: uppercase;
   }

   .te-doccard__title {
      margin: 0 0 var(--space-4);
      color: inherit;
      font-size: 24px;
      font-weight: 700;
      line-height: 1.15;
      text-wrap: balance;
   }

   .te-doccard__body {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);

      > p {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         gap: var(--space-2) var(--space-3);
      }
   }

   .te-doccard__btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: var(--radius);
      background-color: hsl(var(--te-doc-btn-bg));
      color: hsl(var(--te-doc-btn-ink));
      font-weight: 700;
      line-height: 1.2;
      text-decoration: none;
      transition: background-color var(--transition-time), color var(--transition-time);

      &:hover,
      &:focus-visible {
         background-color: hsl(var(--te-doc-btn-hover));
         color: hsl(var(--te-doc-btn-ink));

         .te-doccard__icon {
            transform: translateY(2px);
         }
      }

      &:focus-visible {
         outline: 2px solid hsl(var(--te-doc-ink));
         outline-offset: 2px;
      }
   }

   .te-doccard__icon {
      flex: 0 0 auto;
      transition: transform var(--transition-time);
   }

   .te-doccard__meta {
      color: var(--te-doc-eyebrow);
      font-size: 13px;
      white-space: nowrap;
   }
}

/* ==========================================================================
   „Kérdésed van?” kártya
   ========================================================================== */

.te-contactcard {
   padding: var(--te-side-pad, 24px) var(--te-side-pad, 24px) calc(var(--te-side-pad, 24px) + 4px);
   background-color: hsl(var(--white));
   border: var(--te-side-border, 1px solid hsla(var(--darkBlue), .1));

   .te-contactcard__title {
      margin: 0 0 var(--space-4);
      color: hsl(var(--blue));
      font-size: 22px;
      font-weight: 700;
      line-height: 1.2;
      text-wrap: balance;
   }

   .te-contactcard__body {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      color: hsl(var(--midGray));
      font-size: 15px;

      > :first-child,
      :is(strong, b, h4, h5) {
         color: hsl(var(--blue));
         font-size: 15px;
         font-weight: 700;
      }

      > :is(h4, h5):not(:first-child),
      > p:has(> :is(strong, b):first-child):not(:first-child) {
         margin-top: var(--space-3);
      }
   }

   a {
      color: hsl(var(--blue));
      text-decoration: none;
      transition: color var(--transition-time);

      &:hover,
      &:focus-visible {
         text-decoration: underline;
         text-underline-offset: 3px;
      }
   }

   :is(.te-contactcard__phone, a[href^="tel:"]) {
      color: hsl(var(--midGray));
   }

   :is(.te-contactcard__mail, a[href^="mailto:"], joomla-hidden-mail a) {
      color: hsl(var(--orange));
      font-weight: 700;
   }
}

/* ==========================================================================
   Általános oldalsáv-modul (chromes/te-card)
   ========================================================================== */

.te-sidecard {
   padding: var(--te-side-pad, 24px);
   background-color: hsl(var(--white));
   border: var(--te-side-border, 1px solid hsla(var(--darkBlue), .1));

   .te-sidecard__title {
      margin: 0 0 var(--space-4);
      color: hsl(var(--blue));
      font-size: 21px;
      font-weight: 700;
      line-height: 1.2;
      text-wrap: balance;
   }

   .te-sidecard__body {
      color: hsl(var(--midGray));
      font-size: 15px;

      > * + * {
         margin-top: var(--space-3);
      }

      img {
         border-radius: var(--radius);
      }
   }

   /* alap mod_menu (nem kártya layouttal): elválasztott sorok, arany jelölő */
   ul.mod-menu {
      list-style: none;
      padding: 0;

      li + li {
         border-top: 1px solid hsla(var(--darkBlue), .08);
      }

      a,
      .mod-menu__heading,
      .separator {
         display: block;
         padding: 10px 0;
         color: hsl(var(--blue));
         text-decoration: none;
      }

      a:hover,
      a:focus-visible,
      .current > a {
         color: hsl(var(--darkBlue));
         box-shadow: inset 3px 0 0 hsl(var(--gold));
         padding-left: 12px;
      }

      a {
         transition: padding var(--transition-time), box-shadow var(--transition-time);
      }

      ul {
         list-style: none;
         padding-left: var(--space-4);
         font-size: var(--fs-sm);
      }
   }
}

@media (prefers-reduced-motion: reduce) {
   .te-page__sidebar * {
      transition: none !important;
   }
}

/* ==========================================================================
   Archívum (mod_monthlyarchive) – évek lenyitható blokkokban, bennük a hónapok
   ========================================================================== */

.te-archive {
   font-size: 15px;
}

.te-archive__years,
.te-archive__months {
   margin: 0;
   padding: 0;
   list-style: none;
}

.te-archive__year {
   border-top: 1px solid hsla(var(--darkBlue), .08);

   &:last-child {
      border-bottom: 1px solid hsla(var(--darkBlue), .08);
   }
}

.te-archive__summary {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 4px 2px;
   color: hsl(var(--blue));
   font-weight: 700;
   text-decoration: none;
   cursor: pointer;
   list-style: none;
   transition: color var(--transition-time);

   &::-webkit-details-marker {
      display: none;
   }

   &:hover,
   &:focus-visible {
      color: hsl(var(--darkBlue));
   }

   &:focus-visible {
      outline: 2px solid hsl(var(--gold));
      outline-offset: 2px;
      border-radius: var(--radius-sm);
   }
}

.te-archive__label {
   flex: 1 1 auto;
}

.te-archive__chevron {
   flex: none;
   color: hsl(var(--midGray));
   transition: transform var(--transition-time);

   details[open] > summary & {
      transform: rotate(180deg);
   }
}

.te-archive__count {
   flex: none;
   min-width: 24px;
   padding: 1px 7px;
   border-radius: 999px;
   background: hsla(var(--blue), .1);
   color: hsl(var(--blue));
   font-size: 11px;
   font-weight: 700;
   line-height: 1.6;
   text-align: center;
}

/* hónapok: egy oszlopban, a szám jobbra igazítva */
.te-archive__months {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 1px;
   padding: 0 0 8px;
}

.te-archive__month {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   padding: 5px 8px;
   border-radius: var(--radius-sm);
   color: hsl(var(--darkBlue));
   text-decoration: none;
   transition: background-color var(--transition-time), color var(--transition-time);

   &:hover,
   &:focus-visible {
      background: hsla(var(--lightBlue), .25);
      color: hsl(var(--darkBlue));
   }

   &.is-current {
      background: hsl(var(--blue));
      color: hsl(var(--white));
      font-weight: 700;

      .te-archive__count {
         background: hsla(var(--white), .2);
         color: hsl(var(--white));
      }
   }
}

.te-archive__select {
   width: 100%;
   min-height: 42px;
   padding: 6px 12px;
   border: 1px solid hsla(var(--darkBlue), .2);
   border-radius: var(--radius);
   background: hsl(var(--white));
   color: hsl(var(--darkBlue));
   font: inherit;
}

.te-archive__empty {
   margin: 0;
   color: hsl(var(--midGray));
}

@media (prefers-reduced-motion: reduce) {
   .te-archive__chevron {
      transition: none;
   }
}