/* ==========================================================================
   ATTILUM — Feinschliff im Frontend
   ==========================================================================

   WARUM DIESE DATEI UND NICHT custom_less
   ---------------------------------------
   YOOtheme hat ein Feld "custom_less" im Template-Stil, und dort gehoerte das
   eigentlich hin. Es geht aber nicht: custom_less wird zu theme.13.css
   kompiliert, und das geschieht erst, wenn jemand im YOOtheme-Customizer
   speichert. Aus einem Skript heraus laesst sich das nicht ausloesen.
   Nachgesehen: theme.13.css ist vom 11.08. und traegt den Stand von damals.

   Deshalb liefert das Plugin diese Datei aus. Das ist in unserer Hand, wirkt
   sofort und ueberlebt jedes Update von Joomla, VirtueMart und YOOtheme.

   ==========================================================================
   1. DIE SCHRIFT AUF ARTIKELSEITEN
   ==========================================================================
   Das Impressum stand in 12px. Die Ursache ist aelter als wir und steht in
   custom_less, kompiliert in theme.13.css:

       article.uk-article p { font-size: 12px !important; line-height: 1.15 }

   Der Kommentar dort lautet "Suchresultate Finder/VirtueMart kompakter".
   Gemeint waren Suchergebnisse - getroffen wird JEDER Artikel der Website.

   Diese Regel wird NICHT angefasst. Wo sie sonst noch gebraucht wird, weiss
   ich nicht, und kompakte Suchergebnisse sind gewollt. Stattdessen wird die
   Lesbarkeit dort wiederhergestellt, wo ein Artikel ALLEIN steht:

       article.uk-article:only-of-type

   Auf einer Artikelseite gibt es genau einen - die Regel greift. In einer
   Ergebnisliste stehen mehrere nebeneinander - sie greift nicht. Beides
   bedient, ohne an der alten Regel zu ruehren.

   ==========================================================================
   2. DER ABSTAND ZU DEN BROTKRUMEN
   ==========================================================================
   Er kam dreifach zustande:

       .tm-top ist eine uk-section           grosse Abstaende oben und unten
       die Brotkrumen tragen uk-margin-medium-bottom
       <main> ist wiederum eine uk-section   eigener Abstand oben

   Alle drei addieren sich. Hier auf ein vernuenftiges Mass gebracht - nicht
   auf null, sonst klebt die Zeile am Inhalt.

   ==========================================================================
   Ausgeblendet wird nichts. Es geht um Schriftgroesse und Abstaende.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Artikelseiten wieder lesbar
   -------------------------------------------------------------------------- */
.tm-main article.uk-article:only-of-type p,
.tm-main article.uk-article:only-of-type li {
    font-size: 16px !important;
    line-height: 1.65 !important;
    margin-bottom: 10px !important;
}

.tm-main article.uk-article:only-of-type h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
    margin-bottom: 18px !important;
}

.tm-main article.uk-article:only-of-type h2,
.tm-main article.uk-article:only-of-type h3 {
    font-size: 21px !important;
    line-height: 1.3 !important;
    margin: 22px 0 8px !important;
}

/* Die alte Regel setzt auch margin und padding auf null. Auf einer
   Artikelseite braucht der Text wieder Luft. */
.tm-main article.uk-article:only-of-type {
    margin: 0 !important;
    padding: 0 !important;
}

.tm-main article.uk-article:only-of-type hr {
    margin: 24px 0 !important;
}


/* --------------------------------------------------------------------------
   2. Der Abstand zu den Brotkrumen
   --------------------------------------------------------------------------
   ZWEITER ANLAUF. Der erste hat .tm-top.uk-section angefasst - und das war
   falsch.

   Auf Artikelseiten enthaelt .tm-top nur die Brotkrumen. Auf SHOP-Seiten
   steckt dort der ganze Inhalt drin:

       <div class="tm-top uk-section-default uk-section">
         <div class="uk-container">
           <nav>...Brotkrumen...</nav>
           <div class="uk-section-default uk-section">     <- Shop-Inhalt
             <div class="uk-container">                    <- verschachtelt
               <div class="uk-width-1-3@m">                <- linke Spalte

   Mein padding-bottom:0 hat damit dem gesamten Shop-Block den unteren
   Abstand genommen. Die linke Spalte haengt zudem an uk-sticky mit
   offset:120 und reagiert auf veraenderte Abstaende - sie erschien
   verschoben und schmaler.

   Deshalb wird jetzt NUR die Brotkrumenzeile angefasst: das nav mit dem
   Label "Navigationspfad" und die Liste darin. Der umgebende Abschnitt
   bleibt unberuehrt, egal was er sonst noch traegt.
   -------------------------------------------------------------------------- */
.tm-top nav[aria-label="Navigationspfad"] {
    margin-bottom: 6px !important;
}

.tm-top nav[aria-label="Navigationspfad"] .uk-breadcrumb {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Der Abstand oberhalb der Brotkrumen kommt vom Abschnitt. Ihn ganz
   wegzunehmen war zu viel; hier nur der obere, und nur so weit, dass die
   Zeile naeher an die Navigation rueckt. Der untere bleibt, weil auf
   Shop-Seiten der Inhalt daran haengt. */
.tm-top.uk-section {
    padding-top: 20px !important;
}