/*
Theme Name: Jodelchörli Gottvertraue
Theme URI: https://jodelchoerli-gottvertraue.ch
Author: Jodelchörli Gottvertraue
Description: Block-Theme für das Jodelchörli Gottvertraue – blaue Kopfzeile mit Menü, Titelbild mit Motto, Karten, Liederliste, Termine und Kontaktformular. Alle Inhalte über den Block-Editor pflegbar.
Version: 3.7.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jodelchoerli
*/
*{box-sizing:border-box}
body{margin:0;-webkit-font-smoothing:antialiased}
.wp-site-blocks{min-height:100vh;display:flex;flex-direction:column}
.wp-site-blocks>*{margin-block-start:0!important}
.wp-site-blocks>main{flex:1}
.wp-site-blocks>footer{margin-top:auto}

/* Kopfzeile */
.wp-site-blocks>header{position:sticky;top:0;z-index:50}
.admin-bar .wp-site-blocks>header{top:32px}
@media (max-width:782px){.admin-bar .wp-site-blocks>header{top:46px}}
.jg-bar{box-shadow:0 2px 8px rgba(0,0,0,.25)}
.jg-bar-inner{max-width:1100px;margin:0 auto!important;padding:14px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.jg-bar-inner>*{margin:0!important}
.jg-bar-title{font-family:var(--wp--preset--font-family--titel);font-weight:400;font-size:28px;letter-spacing:.5px;line-height:1.1}
.jg-bar-title a{color:#fff!important;text-decoration:none}
.jg-nav .wp-block-navigation__container{gap:4px 6px!important}
.jg-nav .wp-block-navigation-item__content{color:#fff!important;text-decoration:none!important;font-family:var(--wp--preset--font-family--titel);font-weight:400;font-size:18px;padding:8px 14px!important;border-radius:6px;min-height:44px;display:inline-flex!important;align-items:center;white-space:nowrap}
.jg-nav .wp-block-navigation-item__content:hover{background:rgba(255,255,255,.18)}
.jg-nav .wp-block-navigation-item__content{border-radius:0}
.jg-nav .current-menu-item>.wp-block-navigation-item__content,.jg-nav .wp-block-navigation-item__content[aria-current="page"]{background:transparent;box-shadow:inset 0 -3px 0 #FFFF00}
.jg-nav .is-menu-open .current-menu-item>.wp-block-navigation-item__content,.jg-nav .is-menu-open .wp-block-navigation-item__content[aria-current="page"]{box-shadow:inset 4px 0 0 #FFFF00}
.jg-nav .wp-block-navigation__responsive-container-open{width:44px;height:44px;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.6);border-radius:6px;color:#fff}
.jg-nav .wp-block-navigation__responsive-container.is-menu-open{position:fixed;top:0;left:0;right:0;bottom:auto;background:#002060!important;color:#fff!important;padding:72px 12px 12px!important;box-shadow:0 6px 20px rgba(0,0,0,.35);z-index:100000;animation:none}
.admin-bar .jg-nav .wp-block-navigation__responsive-container.is-menu-open{top:46px}
.jg-nav .is-menu-open .wp-block-navigation__responsive-container-content{padding-top:0!important;align-items:stretch!important;border-top:1px solid rgba(255,255,255,.2)}
.jg-nav .is-menu-open .wp-block-navigation__container{flex-direction:column;align-items:stretch!important;gap:0!important;width:100%;padding-top:8px}
.jg-nav .is-menu-open .wp-block-navigation-item{width:100%}
.jg-nav .is-menu-open .wp-block-navigation-item__content{font-size:20px;padding:12px 14px!important;min-height:48px;width:100%;display:flex!important}
.jg-nav .is-menu-open .wp-block-navigation__responsive-container-close{top:14px;right:20px;color:#fff;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.6);border-radius:6px}

/* Menü: Desktop ab 600px nur Links, darunter nur Menü-Knopf */
@media (min-width:600px){
 .jg-nav .wp-block-navigation__responsive-container-open{display:none!important}
 .jg-nav .wp-block-navigation__responsive-container:not(.is-menu-open){display:block!important;position:relative!important;width:auto!important;background:transparent!important;padding:0!important}
}
@media (max-width:599px){
 .jg-nav .wp-block-navigation__responsive-container-open{display:inline-flex!important}
 .jg-nav .wp-block-navigation__responsive-container:not(.is-menu-open){display:none!important}
 .jg-bar-inner{flex-wrap:nowrap;padding:6px 14px}
 .jg-bar-title{font-size:18px;flex:1;min-width:0}
 .jg-nav .is-menu-open .wp-block-navigation__responsive-container-close{top:6px;right:14px}
 .jg-nav .wp-block-navigation__responsive-container.is-menu-open{padding-top:58px!important}
 .jg-nav{flex:none}
}

/* Titelbild */
.jg-hero.wp-block-cover{position:relative;aspect-ratio:10.6;min-height:0!important;padding:0!important;overflow:visible;background:#002060}
body.home .jg-hero.wp-block-cover{aspect-ratio:3.41}
.jg-hero .wp-block-cover__inner-container{position:absolute!important;inset:0;width:100%!important;max-width:none!important;margin:0!important}
body:not(.home) .jg-hero .wp-block-cover__image-background{object-position:50% 82%!important}
.jg-motto{position:absolute;left:50%;top:50%;transform:translate(-50%,-42%);width:min(62%,820px);margin:0!important;line-height:0}
body.home .jg-motto{top:4%;transform:translateX(-50%);width:min(72%,880px)}
.jg-motto svg{display:block;width:100%;height:auto;overflow:visible}

/* Startseite */
.jg-home{display:flex;flex-direction:column;align-items:center}
.jg-home>*{margin:0!important}
.jg-home>.jg-home-photo{width:min(57%,700px);margin-top:-8%!important;position:relative;z-index:1}
.jg-home>.wp-block-buttons{margin:28px 20px 48px!important;justify-content:center}
.jg-home>p{max-width:760px;padding:0 20px;text-align:center;margin-top:24px!important}

/* Bild mit Rahmen */
.is-style-rahmen{position:relative;border:6px double #fff;outline:1px solid rgba(0,0,0,.15);box-shadow:0 6px 20px rgba(0,0,0,.3);background:#ccc;overflow:hidden;line-height:0}
.is-style-rahmen::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 18px rgba(0,0,0,.5);pointer-events:none}
.is-style-rahmen img{display:block;width:100%;height:auto}
/* Feste Bildformate: neue Bilder werden automatisch passend zugeschnitten */
.jg-home-photo img,.jg-bild-mitte img{aspect-ratio:12/5;object-fit:cover;object-position:50% 40%;height:auto!important}
.jg-bild-mitte{max-width:640px;margin-inline:auto!important}

/* Knopf Hörproben */
.is-style-pill .wp-block-button__link{display:inline-flex;align-items:center;gap:8px;background:transparent;color:#002060;border:2px solid #002060;font-family:var(--wp--preset--font-family--titel);font-weight:400;font-size:18px;padding:8px 22px;border-radius:999px;min-height:44px;box-shadow:none;text-decoration:none}
.is-style-pill .wp-block-button__link::before{content:"";width:0;height:0;border-left:12px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.is-style-pill .wp-block-button__link:hover{background:#002060;color:#fff}

/* Unterseiten */
.jg-page{max-width:1100px;width:100%;margin:0 auto!important;padding:40px 20px 56px;display:flex;flex-direction:column;gap:28px}
.jg-page>*{margin:0!important}
.jg-page-title{font-family:var(--wp--preset--font-family--titel);font-weight:400;color:#002060;font-size:clamp(34px,5vw,48px);line-height:1.1}
.jg-page .wp-block-post-content>*{margin-block:0}
.jg-page .wp-block-post-content>*+*{margin-block-start:28px}
.jg-page .wp-block-columns{gap:32px}
.jg-page .wp-block-post-content :is(p,ul,ol):not(.jg-bildtext):not(.has-text-align-center){max-width:70ch}
.jg-bildtext{text-align:center;color:#444;font-size:16px;margin-top:10px!important}

/* Karte */
.is-style-karte{background:#fff;border-radius:8px;border:1px solid #e2ddd2;padding:24px 28px}
.is-style-karte>*{margin:0!important}
.is-style-karte>*+*{margin-top:10px!important}
.is-style-karte h2{font-size:26px}

/* Lieder */
.jg-liederliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px!important}
.is-style-lied{background:#fff;border:1px solid #e2ddd2;border-radius:8px;padding:16px 20px;display:flex;flex-direction:column;gap:4px}
.is-style-lied>*{margin:0!important}
.is-style-lied>:nth-child(1){font-family:var(--wp--preset--font-family--titel);font-size:20px;color:#002060;line-height:1.25}
.is-style-lied>:nth-child(2){color:#0070C0;font-size:15px;font-weight:700}
.is-style-lied>:nth-child(3){color:#333;font-size:16px}

/* Termine */
.is-style-termine{background:#fff;border-radius:8px;border:1px solid #e2ddd2;overflow:hidden}
.is-style-termine table{width:100%;border-collapse:collapse;border:0}
.is-style-termine thead{border:0!important}
.is-style-termine th{background:#002060;color:#fff;font-family:var(--wp--preset--font-family--titel);font-weight:400;font-size:18px;padding:14px 24px;text-align:left;border:0!important}
.is-style-termine td{padding:18px 24px;border:0!important;border-top:1px solid #e2ddd2!important;vertical-align:top;text-align:left}
.is-style-termine table{table-layout:fixed}
.is-style-termine th:nth-child(1){width:20%}
.is-style-termine th:nth-child(2){width:13%}
.is-style-termine th:nth-child(3){width:34%}
.is-style-termine td{overflow-wrap:anywhere}
.is-style-termine td:first-child{font-weight:700;color:#002060}
.is-style-termine td a{color:#0070C0;text-decoration:underline;text-underline-offset:3px}
.is-style-termine td a:hover{color:#002060}

.jg-anlaesse{display:flex;flex-direction:column;gap:20px}
.jg-anlaesse>*{margin:0!important}
.jg-vergangen-titel{font-family:var(--wp--preset--font-family--titel);font-weight:400;color:#002060;font-size:28px;line-height:1.2;margin-top:24px!important}
.is-vergangen th{background:#5A6785}
.is-vergangen td,.is-vergangen td:first-child{color:#555}
.is-vergangen td a{color:#555}
.jg-admin-hinweis{font-size:16px}
.jg-admin-hinweis a{color:#0070C0}
.jg-admin-hinweis span{color:#777}
.jg-keine-anlaesse{background:#fff;border:1px solid #e2ddd2;border-radius:8px;padding:18px 24px}

/* Kontaktformular */
.jg-form{display:flex;flex-direction:column;gap:14px}
.jg-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:16px}
.jg-form input,.jg-form textarea{font:inherit;font-weight:400;font-size:18px;padding:10px 12px;border:1px solid #c9c3b6;border-radius:6px;min-height:44px;width:100%;background:#fff}
.jg-form textarea{resize:vertical}
.jg-form button{align-self:flex-start;background:#002060;color:#fff;border:0;font-family:var(--wp--preset--font-family--titel);font-size:18px;padding:12px 26px;border-radius:6px;min-height:44px;cursor:pointer}
.jg-form button:hover{background:#0070C0}
.jg-hp{position:absolute!important;left:-9999px!important}
.jg-meldung{padding:12px 16px;border-radius:6px;border:1px solid #002060;background:#eef3fa;color:#002060;font-weight:700}
.jg-meldung.is-fehler{border-color:#a00;background:#fff3f3;color:#a00}

/* Fusszeile */
.jg-footer-inner{max-width:1100px;margin:0 auto!important;padding:28px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.jg-footer-inner>*{margin:0!important}
.jg-footer-name{font-family:var(--wp--preset--font-family--titel);font-size:20px}
.jg-footer-links{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:16px}
.jg-footer a{color:#fff!important}

/* Handy */
@media (max-width:759px){
 .jg-hero.wp-block-cover{aspect-ratio:4.9}
 body.home .jg-hero.wp-block-cover{aspect-ratio:1.45}
 .jg-motto{width:94%}
 body.home .jg-motto{width:92%}
 .jg-home>.jg-home-photo{width:86%;margin-top:-2%!important}
 .is-style-termine thead{display:none}
 .is-style-termine table,.is-style-termine tbody,.is-style-termine tr,.is-style-termine td{display:block;width:100%!important}
 .is-style-termine tr{padding:16px 20px;border-top:1px solid #e2ddd2}
 .is-style-termine tbody tr:first-child{border-top:0}
 .is-style-termine td{border:0!important;padding:2px 0}
 .is-style-termine td:first-child{font-size:19px}
 .is-style-termine td:empty{display:none}
 .is-style-termine table{table-layout:auto}
 .is-style-termine td:nth-child(2):not(:empty)::before{content:"Zeit: ";font-weight:700}
 .is-style-termine td:nth-child(3):not(:empty)::before{content:"Anlass: ";font-weight:700}
 .is-style-termine td:nth-child(4):not(:empty)::before{content:"Ort: ";font-weight:700;color:#1a1a1a}
}