/* =========================================================================
   Seelsorgeraum Oberes Wipptal – Typografie & Feinschliff
   Datei: /templates/shaper_helixultimate/css/custom.css
   (Helix Ultimate lädt diese Datei automatisch als letzte CSS-Datei.)

   Überschriften: EB Garamond 500 (lokal gehostet – Paket fonts/).
   Fließtext: Open Sans (ebenfalls lokal).

   Hinweis: Schriftfamilien/-größen stehen zusätzlich im Inline-<style> des
   Templates (Template-Einstellungen -> Typography). Deshalb sind die
   Selektoren hier bewusst etwas spezifischer (body.site, .sp-page-builder h2 …).
   Ideal: die Werte auch im Typography-Panel angleichen.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design-Tokens (Marke statt Template-Preset)
   ------------------------------------------------------------------------- */
:root {
  /* Markenfarben aus dem Logo */
  --ssr-red:        #8b1520;   /* Bordeaux – Überschriften, Akzent   */
  --ssr-red-dark:   #6e101a;   /* Hover                              */
  --ssr-blue:       #2c5697;   /* Blau – Links, Navigation           */
  --ssr-blue-dark:  #1e3d6e;
  --ssr-ink:        #23262b;   /* Fließtext (etwas kühler als #2d2d2d) */
  --ssr-ink-soft:   #5b6068;   /* Meta, Datum, Bildunterschriften    */
  --ssr-line:       #e3e0dc;   /* Trennlinien                        */
  --ssr-paper:      #faf8f5;   /* warmes Off-White für Flächen       */

  /* Typo – Überschriften: EB Garamond (lokal, siehe fonts/fonts.css),
     Fallback bewusst serif, nicht sans! */
  --ssr-serif: 'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --ssr-sans:  'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Fließende Größen (min → max zwischen 360px und 1200px Viewport)
     EB Garamond hat eine kleinere x-Höhe als Lora – die Überschriften
     stehen deshalb rund 15 % größer, damit sie optisch gleich wirken. */
  --fs-body: clamp(1.0625rem, 0.99rem + 0.30vw, 1.1875rem); /* 17 → 19px */
  --fs-h1:   clamp(2.30rem,  1.72rem + 2.40vw, 3.50rem);    /* 37 → 56px */
  --fs-h2:   clamp(1.75rem,  1.45rem + 1.20vw, 2.40rem);    /* 28 → 38px */
  --fs-h3:   clamp(1.35rem,  1.20rem + 0.55vw, 1.65rem);    /* 22 → 26px */
  --fs-h4:   clamp(1.15rem,  1.08rem + 0.28vw, 1.30rem);
  --fs-small: 0.9375rem;

  /* Zeilenlänge */
  --measure: 68ch;
}

/* -------------------------------------------------------------------------
   2. Fließtext: Größe, Zeilenabstand, Silbentrennung (wichtig für Deutsch)
   ------------------------------------------------------------------------- */
body.site {
  font-family: var(--ssr-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ssr-ink);
  -webkit-font-smoothing: antialiased;
}

body.site p,
body.site li {
  line-height: 1.65;
  hyphens: auto;                 /* „Erstkommunionvorbereitung“ bricht sauber */
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

body.site p { margin: 0 0 0.9em; }
body.site ul, body.site ol { margin: 0 0 1.2em; padding-left: 1.35em; }
body.site li + li { margin-top: 0.35em; }

/* -------------------------------------------------------------------------
   3. Zeilenlänge begrenzen – der größte Lesbarkeitsgewinn
      (aktuell laufen Absätze über ~1290px = ca. 175 Zeichen pro Zeile)
   ------------------------------------------------------------------------- */
.sp-page-builder .sppb-addon-text-block p,
.sp-page-builder .sppb-addon-text-block ul,
.sp-page-builder .sppb-addon-text-block ol,
.com-content-article__body p,
.com-content-article__body ul,
.com-content-article__body ol {
  max-width: var(--measure);
}

/* Bei Joomla-Beiträgen die ganze Textspalte zentriert begrenzen –
   Bilder, Überschriften und Text stehen dann in einer Achse. */
#sp-component .article-details {
  max-width: 74ch;
  margin-inline: auto;
}

/* Überschriften dürfen etwas breiter laufen, aber nicht über die Seite */
.sp-page-builder .sppb-addon-text-block h2,
.sp-page-builder .sppb-addon-text-block h3,
.article-details h2,
.article-details h3 { max-width: 30ch; }

/* -------------------------------------------------------------------------
   4. Überschriften: klare Hierarchie + Rhythmus
      Problem heute: h1 36px / h2 30px (zu kleiner Sprung), margin-top: 0
      → Überschrift klebt am vorherigen Absatz statt am eigenen Text.
   ------------------------------------------------------------------------- */
body.site h1, body.site h2, body.site h3,
body.site h4, body.site h5, body.site h6 {
  font-family: var(--ssr-serif);
  color: var(--ssr-red);
  line-height: 1.2;
  letter-spacing: 0;      /* Garamond braucht keine negative Laufweite */
  text-wrap: balance;            /* verhindert Schusterjungen in Titeln */
  hyphens: none;
}

body.site h1 { font-size: var(--fs-h1); font-weight: 500; margin: 0 0 .6em; }
body.site h2 { font-size: var(--fs-h2); font-weight: 500; margin: 2.2em 0 .5em; }
body.site h3 { font-size: var(--fs-h3); font-weight: 500; margin: 1.9em 0 .45em; }
body.site h4 { font-size: var(--fs-h4); font-weight: 500; margin: 1.6em 0 .4em; }

/* h5/h6 als Label statt als Mini-Überschrift */
body.site h5, body.site h6 {
  font-family: var(--ssr-sans);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ssr-ink-soft);
  margin: 1.6em 0 .4em;
}

/* Erste Überschrift im Abschnitt braucht keinen Abstand nach oben */
body.site h2:first-child, body.site h3:first-child,
body.site .sppb-addon-content > h2:first-child { margin-top: 0; }

/* Seitentitel deutlich absetzen */
body.site .sp-page-title h1,
body.site .article-header h1,
body.site .page-header h1 {
  padding-bottom: .35em;
  border-bottom: 3px solid var(--ssr-red);
  display: inline-block;
}

/* -------------------------------------------------------------------------
   5. Links: Markenfarbe + Unterstreichung (Kontrast & WCAG 1.4.1)
      Heute: #ec430f auf Weiß = 3,9:1 → unter AA (4,5:1), ohne Unterstreichung.
      Neu:   #2c5697 auf Weiß = 7,3:1.
   ------------------------------------------------------------------------- */
body.site a { color: var(--ssr-blue); }
body.site a:hover,
body.site a:focus,
body.site a:active { color: var(--ssr-red); }

/* Links im Fließtext immer unterstreichen */
.sp-page-builder .sppb-addon-text-block a,
.article-details [itemprop="articleBody"] a,
.com-content-article__body a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(44, 86, 151, .45);
}
.sp-page-builder .sppb-addon-text-block a:hover,
.article-details [itemprop="articleBody"] a:hover { text-decoration-color: currentColor; }

/* Tastatur-Fokus sichtbar machen */
body.site a:focus-visible,
body.site button:focus-visible,
body.site .sppb-btn:focus-visible,
body.site input:focus-visible {
  outline: 3px solid var(--ssr-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* -------------------------------------------------------------------------
   6. Preset-Orange (#ec430f) überall durch Markenfarben ersetzen
   ------------------------------------------------------------------------- */
.sp-megamenu-parent > li > a { color: var(--ssr-blue); font-weight: 600; white-space: nowrap; }
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active:hover > a { color: var(--ssr-red); }
.sp-megamenu-parent > li { position: relative; }
.sp-megamenu-parent > li.active > a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 14px;
  height: 2px; background: var(--ssr-red);
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a { color: var(--ssr-red); }

.btn-primary, .sppb-btn-primary {
  background-color: var(--ssr-red); border-color: var(--ssr-red);
  font-family: var(--ssr-sans); font-weight: 600; letter-spacing: .01em;
  border-radius: 3px; padding: .7em 1.4em;
}
.btn-primary:hover, .sppb-btn-primary:hover {
  background-color: var(--ssr-red-dark); border-color: var(--ssr-red-dark);
}
.sp-page-title { background: var(--ssr-red); }
.pagination > .active > a, .pagination > .active > span {
  background-color: var(--ssr-red); border-color: var(--ssr-red);
}
.tags > li a { background: rgba(139,21,32,.08); color: var(--ssr-red); }
#offcanvas-toggler > .fa:hover, #offcanvas-toggler > .fas:hover { color: var(--ssr-red); }
.sp-reading-progress-bar { background-color: var(--ssr-red); }

/* -------------------------------------------------------------------------
   6b. Nadpisania dla reguł generowanych przez SP Page Builder
       ------------------------------------------------------------------
       SP Page Builder zapisuje kolory ustawione w każdym dodatku jako
       regułę z selektorem ID, np.:
         #sppb-addon-1776459359498 .sppb-addon-articles
            .sppb-article-info-wrap h3 a { color:#ec430f }   -> (1,0,4)
       i wstawia ją w <style> w <head>, czyli PO custom.css.
       Zwykły selektor klasowy tego nie przebije. Dokładamy drugie ID
       (#sp-component jest rodzicem #sp-page-builder), więc mamy (2,0,4)
       i wygrywamy bez !important.

       Docelowo lepiej poprawić to w samym dodatku (Page Builder ->
       dodatek Articles -> Title Color / Read More Color). Ta sekcja jest
       siatką bezpieczeństwa dla dodatków, których nikt nie przestawi.
   ------------------------------------------------------------------------- */
#sp-component #sp-page-builder .sppb-addon-articles .sppb-article-info-wrap h2 a,
#sp-component #sp-page-builder .sppb-addon-articles .sppb-article-info-wrap h3 a,
#sp-component #sp-page-builder .sppb-addon-articles .sppb-article-info-wrap h4 a,
#sp-component #sp-page-builder .sppb-addon-articles .sppb-article-title a {
  color: var(--ssr-red);
}
#sp-component #sp-page-builder .sppb-addon-articles .sppb-article-info-wrap h2 a:hover,
#sp-component #sp-page-builder .sppb-addon-articles .sppb-article-info-wrap h3 a:hover,
#sp-component #sp-page-builder .sppb-addon-articles .sppb-article-info-wrap h4 a:hover,
#sp-component #sp-page-builder .sppb-addon-articles .sppb-article-title a:hover {
  color: var(--ssr-blue);
}
#sp-component #sp-page-builder .sppb-addon-articles .sppb-article-info-wrap .sppb-readmore {
  color: var(--ssr-blue);
}
#sp-component #sp-page-builder .sppb-addon-articles .sppb-article-info-wrap .sppb-readmore:hover {
  color: var(--ssr-red);
}

/* -------------------------------------------------------------------------
   6c. Menu mobilne (offcanvas) – preset2.css koloruje je pomarańczem
   ------------------------------------------------------------------------- */
.offcanvas-menu .offcanvas-inner a:hover,
.offcanvas-menu .offcanvas-inner a:focus,
.offcanvas-menu .offcanvas-inner a:active,
.offcanvas-menu .offcanvas-inner ul.menu > li a:hover,
.offcanvas-menu .offcanvas-inner ul.menu > li a:focus,
.offcanvas-menu .offcanvas-inner ul.menu > li span:hover,
.offcanvas-menu .offcanvas-inner ul.menu > li span:focus,
.offcanvas-menu .offcanvas-inner ul.menu li.active > a,
.offcanvas-menu .offcanvas-inner ul.menu li.active > .mod-menu__heading,
.offcanvas-menu .offcanvas-inner ul.menu li.active > .nav-header,
.offcanvas-menu .offcanvas-inner ul.menu li.active ul li.active > a,
.offcanvas-menu .offcanvas-inner ul.menu li.active ul li.active > .mod-menu__heading,
.offcanvas-menu .offcanvas-inner ul.menu li.active ul li.active > .nav-header { color: var(--ssr-red); }

#offcanvas-toggler > .fa:hover, #offcanvas-toggler > .fas:hover,
#offcanvas-toggler > .far:hover, #offcanvas-toggler > .fa:focus,
#offcanvas-toggler > .fas:focus { color: var(--ssr-red); }

/* Nagłówki sekcji w menu mobilnym są dziś stylowane własnym snippetem
   z !important – zostawiamy rozmiar, poprawiamy tylko kolor aktywnego. */

/* -------------------------------------------------------------------------
   6d. Pomarańcz wklejony jako styl inline W TREŚCI strony
       Na stronie głównej w panelu kontaktowym są linki z atrybutem
         style="… color: #ec430f; …"
       wklejonym do edytora razem z tekstem. Styl inline bije każdy
       arkusz, więc jedyne wyjście z poziomu CSS to !important.
       Właściwa naprawa: usunąć atrybut style w edytorze Page Buildera
       (widok kodu). Poniższa reguła to plaster na czas przejściowy.
   ------------------------------------------------------------------------- */
[style*="ec430f"], [style*="EC430F"] { color: var(--ssr-blue) !important; }

/* -------------------------------------------------------------------------
   6e. Błąd w konfiguracji slidera na stronie głównej
       W <head> pojawia się 10x  line-height:-2px  (wartość ujemna jest
       nieprawidłowa i przeglądarka ją ignoruje). Do poprawienia w
       Page Builderze: dodatek slidera -> Navigation -> Line Height.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   7. Kopfbereich
   ------------------------------------------------------------------------- */
#sp-top-bar {
  background: var(--ssr-red);
  color: rgba(255,255,255,.92);
  font-size: .875rem;
}
#sp-top-bar a { color: #fff; text-decoration: none; }
#sp-top-bar a:hover { text-decoration: underline; }

#sp-header { border-bottom: 1px solid var(--ssr-line); }

/* "Sign In" gehört nicht in die öffentliche Navigation.
   Sauberer wäre: Modul im Joomla-Backend abschalten. */
#sp-header .sp-sign-in { display: none; }

/* -------------------------------------------------------------------------
   8. Tabellen (Kontakte, Termine) – lesbar statt Rohtabelle
   ------------------------------------------------------------------------- */
body.site table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 1rem; }
body.site table > thead > tr > th {
  font-family: var(--ssr-sans); font-size: .8125rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: #fff; background: var(--ssr-red);
  text-align: left; padding: .7em .9em;
}
body.site table > tbody > tr > th[scope="row"] {
  background: transparent; color: var(--ssr-ink);
  font-family: var(--ssr-sans); font-weight: 700; text-align: left;
  padding: .75em .9em; border-bottom: 1px solid var(--ssr-line); vertical-align: top;
}
body.site table td { padding: .75em .9em; border-bottom: 1px solid var(--ssr-line); vertical-align: top; }
body.site table > tbody > tr:nth-child(odd) > * { background: var(--ssr-paper); }

/* Uhrzeiten/Datumsangaben mit gleich breiten Ziffern */
body.site table td, body.site .gottesdienst-zeit,
body.site time { font-variant-numeric: tabular-nums; }

/* Tabellen auf dem Handy scrollbar statt gequetscht */
@media (max-width: 575.98px) {
  body.site table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* -------------------------------------------------------------------------
   9. Artikel-Karten (Pfarrgemeinde-Seiten)
   ------------------------------------------------------------------------- */
.sppb-addon-articles .sppb-addon-article,
.blog .item {
  background: #fff;
  border: 1px solid var(--ssr-line);
  border-radius: 4px;
  overflow: hidden;
}
.sppb-addon-articles .sppb-article-title,
.sppb-addon-articles .sppb-article-info-wrap h3,
.blog .item .page-header h2 {
  font-family: var(--ssr-serif);
  font-weight: 500;
  font-size: var(--fs-h3) !important;
  line-height: 1.25;
  margin: 0 0 .45em;
  text-wrap: balance;
}
.sppb-addon-articles .sppb-article-meta,
.article-info { font-size: var(--fs-small); color: var(--ssr-ink-soft); font-family: var(--ssr-sans); }
.sppb-addon-articles .sppb-article-introtext { line-height: 1.6; }

/* Bilder in den Artikel-Karten füllen die Karte vollständig aus.
   Zwei Fälle im Bestand:
   a) echtes Beitragsbild -> .sppb-article-img-wrap  (füllt bereits)
   b) Bild im Anrisstext eingefügt -> behielt seine Originalbreite
      (z. B. 685 px in einer 817 px breiten Karte -> Lücke rechts).
   Hinweis: width:100% skaliert kleine Bilder hoch. Sauber ist, im
   Beitrag das Feld „Einleitungsbild" zu nutzen und Bilder ab ca.
   900 px Breite hochzuladen. */
.sppb-addon-articles .sppb-article-img-wrap { overflow: hidden; }
.sppb-addon-articles .sppb-article-img-wrap img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.sppb-addon-articles .sppb-article-introtext img,
.sppb-addon-articles .sppb-article-introtext p > img {
  display: block; width: 100%; height: auto; margin: 0 0 1em;
}

/* URSACHE der Lücke rechts neben dem Bild:
   die im Editor eingefügten Bilder tragen ein Inline-Attribut
     style="margin: 10px; float: left;"
   Dadurch schwimmt das Bild links und behält seine Originalbreite
   (z. B. 466px in einer 817px breiten Karte). Inline-Styles schlagen
   jedes Stylesheet – deshalb hier ausnahmsweise !important.
   Dauerhafte Lösung: im Beitrag das Feld „Einleitungsbild" verwenden
   statt das Bild in den Text zu kleben.
   .sppb-article-info-wrap hat 15px Innenabstand – den heben wir auf,
   damit das Bild bis an die Kartenkante läuft. */
.sppb-addon-articles .sppb-article-info-wrap > .sppb-article-introtext > img:first-child,
.sppb-addon-articles .sppb-article-info-wrap > .sppb-article-introtext > p:first-child > img:only-child {
  float: none !important;
  display: block !important;
  width: calc(100% + 30px) !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 -15px 1em !important;
}

/* Einheitlicher Bildausschnitt 3:2 – alle Karten wirken als eine Reihe.
   Für das Masonry-Layout ggf. auskommentieren. */
.sppb-addon-articles .sppb-article-img-wrap { aspect-ratio: 3 / 2; }

/* "Weiter lesen" als klarer Button-Link */
.sppb-readmore, .readmore .btn, a.readmore {
  display: inline-block; margin-top: .8em;
  font-family: var(--ssr-sans); font-size: var(--fs-small); font-weight: 700;
  color: var(--ssr-blue); text-decoration: none;
}
.sppb-readmore::after, a.readmore::after { content: " →"; }
.sppb-readmore:hover, a.readmore:hover { color: var(--ssr-red); text-decoration: underline; }

/* Bilder im Inhaltsbereich nie über den Container
   (bewusst NICHT global: das Logo hat ein height-Attribut, das
   ein globales height:auto aushebeln würde) */
#sp-component img,
.article-details img,
.sp-page-builder .sppb-addon img { max-width: 100%; height: auto; }
body.site figure figcaption {
  font-size: var(--fs-small); color: var(--ssr-ink-soft); margin-top: .5em; line-height: 1.45;
}

/* -------------------------------------------------------------------------
   10. Fußbereich – Kontrast reparieren
       Heute: oranger Link auf rotem Panel = 1,8:1 (praktisch unlesbar)
   ------------------------------------------------------------------------- */
#sp-footer, #sp-bottom { background: #1c1a19; color: rgba(255,255,255,.82); }
#sp-footer a, #sp-bottom a { color: #fff; text-decoration: underline; text-underline-offset: .18em; }
#sp-footer a:hover, #sp-bottom a:hover { color: #f0d9db; }
#sp-footer { font-size: var(--fs-small); }

/* Kontakt-Panel: helle Schrift auf Bordeaux statt Orange */
.sppb-addon .sppb-addon-content a[href^="tel:"],
.sppb-addon .sppb-addon-content a[href^="mailto:"] { color: inherit; text-decoration: underline; }

/* -------------------------------------------------------------------------
   11. Abstände: Seitenanfang/-ende beruhigen
   ------------------------------------------------------------------------- */
#sp-main-body { padding-top: 2.5rem; padding-bottom: 3.5rem; }
@media (min-width: 992px) { #sp-main-body { padding-top: 3.5rem; } }

/* -------------------------------------------------------------------------
   12. Mobil-Feinschliff
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body.site { line-height: 1.6; }
  body.site h2 { margin-top: 1.8em; }
  /* Pfarrgemeinde-Kacheln zweispaltig statt je ein Vollbild */
  .sppb-col-md-2 > .sppb-column,
  #sp-main-body .sppb-row > [class*="sppb-col-"]:has(.sppb-addon-single-image) { }
}

/* -------------------------------------------------------------------------
   13. Druck (Gottesdienstordnung wird oft ausgedruckt)
   ------------------------------------------------------------------------- */
@media print {
  #sp-top-bar, #sp-header, #sp-footer, #sp-bottom, .sp-scroll-up { display: none !important; }
  body.site { font-size: 11pt; line-height: 1.45; color: #000; }
  body.site h1, body.site h2, body.site h3 { color: #000; }
  body.site a { text-decoration: none; color: #000; }
  body.site a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}