/*
 * TE v4 – tartalomkomponensek (terv3_aloldal), a JCE snippetek (jce-templates/) megjelenése
 * author: Laszlo BLAHO – www.blaho.hu
 *
 * Komponensek (mind osztállyal kapcsolható, a régi tartalmat nem érintik):
 *   .te-facts > .te-fact        kiemelt adat(ok): felirat + nagy érték, színes kártyán
 *   .te-kicker                  színes, nagybetűs alcím (pl. „ALAPKÉPZÉSI SZAKOK”)
 *   ul.te-list                  négyzetes, színes felsorolás (.te-list--multi: soronként más szín)
 *   .te-callout                 felhívás / kiemelt doboz (ikon: --equal, --info, --warning)
 *   .te-accent, .te-highlight   narancs link/szöveg, kék félkövér kiemelés
 *   .te-doccard, .te-contactcard  az oldalsáv kártyái a cikkben is (sidebar.css + itteni javítások)
 *
 * Szín: bármelyik elemre (vagy a szülőjére) te-color-<szín>; a komponens a --te-c / --te-c-ink
 * változót használja. Világos színeken (yellow, gold, sand, pink, lightBlue, tf100green)
 * sötétkék, a többin fehér a betű.
 *
 * Hatókör: a cikk (#content .container article), a JCE/TinyMCE szerkesztő (#tinymce) és a
 * .te-content burkoló. A :is() a legerősebb tagja specificitását veszi át (1 id + 1 osztály),
 * így ezek a szabályok a legacy-content.css „#content .container article p / ul / a”
 * szabályainál erősebbek.
 */

/* ==========================================================================
   Színek
   ========================================================================== */

:root {
   --te-c: var(--blue);
   --te-c-ink: var(--white);
}

.te-color-orange     { --te-c: var(--orange);     --te-c-ink: var(--white); }
.te-color-turquoise  { --te-c: var(--turquoise);  --te-c-ink: var(--white); }
.te-color-purple     { --te-c: var(--purple);     --te-c-ink: var(--white); }
.te-color-strawberry { --te-c: var(--strawberry); --te-c-ink: var(--white); }
.te-color-green      { --te-c: var(--green);      --te-c-ink: var(--white); }
.te-color-blue       { --te-c: var(--blue);       --te-c-ink: var(--white); }
.te-color-darkBlue,
.te-color-darkblue   { --te-c: var(--darkBlue);   --te-c-ink: var(--white); }
.te-color-midGray,
.te-color-midgray    { --te-c: var(--midGray);    --te-c-ink: var(--white); }
.te-color-gold       { --te-c: var(--gold);       --te-c-ink: var(--darkBlue); }
.te-color-yellow     { --te-c: var(--yellow);     --te-c-ink: var(--darkBlue); }
.te-color-sand       { --te-c: var(--sand);       --te-c-ink: var(--darkBlue); }
.te-color-pink       { --te-c: var(--pink);       --te-c-ink: var(--darkBlue); }
.te-color-lightBlue,
.te-color-lightblue  { --te-c: var(--lightBlue);  --te-c-ink: var(--darkBlue); }
.te-color-tf100green { --te-c: var(--tf100green); --te-c-ink: var(--darkBlue); }
.te-color-white      { --te-c: var(--white);      --te-c-ink: var(--darkBlue); }

/* ==========================================================================
   Komponensek
   ========================================================================== */

:is(#content .container article, #tinymce, .te-content) {

   /* --- Szöveges kiemelések ------------------------------------------------ */

   .te-accent,
   a.te-accent {
      color: hsl(var(--orange));
   }

   a.te-accent:hover {
      color: hsla(var(--orange), .7);
   }

   .te-highlight {
      color: hsl(var(--blue));
      font-weight: 700;
   }

   /* --- Kiemelt adatok ------------------------------------------------------ */

   .te-facts {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
      gap: var(--space-4);
      margin: var(--space-6) 0;
   }

   .te-fact {
      margin: 0;
      padding: 20px 24px 22px;
      border-radius: var(--radius-lg);
      background-color: hsl(var(--te-c));
      color: hsl(var(--te-c-ink));

      p {
         margin: 0;
      }

      .te-fact__label {
         margin-bottom: 6px;
         font-size: 12px;
         font-weight: 500;
         letter-spacing: .24em;
         line-height: 1.4;
         text-transform: uppercase;
         opacity: .85;
      }

      .te-fact__value {
         font-family: var(--font-base);
         font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem);
         font-weight: 700;
         line-height: 1.15;
         text-wrap: balance;
      }

      .te-fact__note {
         margin-top: 6px;
         font-size: var(--fs-sm);
         opacity: .9;
      }

      a {
         color: inherit;
         text-decoration: underline;
         text-underline-offset: 3px;
      }
   }

   /* egyedül álló kiemelt adat (rács nélkül) */
   & > .te-fact,
   :not(.te-facts) > .te-fact {
      margin: var(--space-6) 0;
      max-width: 420px;
   }

   /* --- Színes alcím -------------------------------------------------------- */

   .te-kicker {
      margin: var(--space-6) 0 var(--space-3);
      color: hsl(var(--te-c));
      font-family: var(--font-base);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .08em;
      line-height: 1.3;
      text-transform: uppercase;

      /* alapból narancs (a vázlat első alcíme) */
      &:not([class*="te-color-"]) {
         --te-c: var(--orange);
      }
   }

   /* --- Négyzetes, színes lista -------------------------------------------- */

   ul.te-list {
      margin: 0 0 var(--space-5);
      padding: 0;
      list-style: none;

      > li {
         position: relative;
         margin: 0;
         padding-left: 24px;
         line-height: 1.7;

         & + li {
            margin-top: var(--space-3);
         }

         &::before {
            content: '';
            position: absolute;
            top: .55em;
            left: 0;
            width: 11px;
            height: 11px;
            border-radius: 2px;
            background-color: hsl(var(--te-c));
         }
      }

      ul {
         margin: var(--space-2) 0 0;
      }
   }

   /* soronként más szín, a kártyamenü palettájának sorrendjében (li-n te-color-… felülírja) */
   ul.te-list--multi > li {
      &:nth-child(7n + 1):not([class*="te-color-"]) { --te-c: var(--orange); }
      &:nth-child(7n + 2):not([class*="te-color-"]) { --te-c: var(--turquoise); }
      &:nth-child(7n + 3):not([class*="te-color-"]) { --te-c: var(--purple); }
      &:nth-child(7n + 4):not([class*="te-color-"]) { --te-c: var(--green); }
      &:nth-child(7n + 5):not([class*="te-color-"]) { --te-c: var(--strawberry); }
      &:nth-child(7n + 6):not([class*="te-color-"]) { --te-c: var(--gold); }
      &:nth-child(7n + 7):not([class*="te-color-"]) { --te-c: var(--lightBlue); }
   }

   /* --- Felhívás ------------------------------------------------------------ */

   .te-callout {
      position: relative;
      margin: var(--space-6) 0;
      padding: 20px 24px;
      border-radius: var(--radius-lg);
      background-color: hsl(var(--te-c));
      color: hsl(var(--te-c-ink));
      line-height: 1.6;

      /* alapból rózsaszín; a te-color-<szín> osztály felülírja */
      &:not([class*="te-color-"]) {
         --te-c: var(--pink);
         --te-c-ink: var(--darkBlue);
      }

      > :last-child {
         margin-bottom: 0;
      }

      p {
         margin: 0 0 var(--space-2);
      }

      strong,
      b {
         font-weight: 700;
      }

      a {
         color: hsl(var(--orange));
         text-decoration: none;

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

      /* sötét háttéren a link fehér, aláhúzva */
      &: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) a {
         color: inherit;
         text-decoration: underline;
      }

      /* ikonos változatok: maszk, a betűszínnel */
      &:is(.te-callout--equal, .te-callout--info, .te-callout--warning) {
         padding-left: 68px;

         &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 24px;
            width: 26px;
            height: 26px;
            translate: 0 -50%;
            background-color: currentColor;
            -webkit-mask: var(--te-callout-icon) center / contain no-repeat;
            mask: var(--te-callout-icon) center / contain no-repeat;
         }
      }

      &.te-callout--equal {
         --te-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M3 8.5c2.5-2 5-2 7.5 0s5 2 7.5 0 5-2 5 0M3 14c2.5-2 5-2 7.5 0s5 2 7.5 0 5-2 5 0M3 19.5c2.5-2 5-2 7.5 0s5 2 7.5 0 5-2 5 0' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
      }

      &.te-callout--info {
         --te-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='11' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M13 11.5v7' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='13' cy='7.6' r='1.6'/%3E%3C/svg%3E");
      }

      &.te-callout--warning {
         --te-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 2.5 24.5 23h-23z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M13 10v6' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='13' cy='19.4' r='1.5'/%3E%3C/svg%3E");
      }

      /* halvány változat: áttetsző háttér, bal oldali színes sáv, sötét betű */
      &.te-callout--soft {
         background-color: hsla(var(--te-c), .16);
         box-shadow: inset 4px 0 0 hsl(var(--te-c));
         color: hsl(var(--darkBlue));

         a {
            color: hsl(var(--blue));
            text-decoration: underline;
         }
      }
   }

   /* --- Oldalsáv-kártyák a cikkben (a régi cikk-szabályok felülírása) ------- */

   :is(.te-doccard, .te-contactcard) {
      margin: var(--space-6) 0;
      max-width: 420px;

      p {
         margin: 0;
      }
   }

   .te-doccard {
      .te-doccard__title {
         margin: 0 0 var(--space-4);
      }

      a.te-doccard__btn,
      a.te-doccard__btn:hover {
         color: hsl(var(--te-doc-btn-ink));
         text-decoration: none;
      }
   }

   .te-contactcard {
      .te-contactcard__title {
         margin: 0 0 var(--space-4);
      }

      a {
         color: hsl(var(--blue));
      }

      a[href^="tel:"] {
         color: hsl(var(--midGray));
      }

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

   /* kártyák egymás mellett: <div class="te-cards"> */
   .te-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
      gap: var(--space-4);
      margin: var(--space-6) 0;

      > :is(.te-doccard, .te-contactcard, .te-fact, .te-callout) {
         margin: 0;
         max-width: none;
      }
   }
}