/**
 * Frontend-only Styles
 * Diese Datei wird NUR im Frontend geladen, NICHT im Editor.
 */

/* Full-Width-Support für Hero-Block */
.wp-block-bistum-essen-hero {
    max-width: none !important;
    width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* Full-Width-Support für Alert-Banner */
.wp-block-bistum-essen-alert-banner {
    max-width: none !important;
    width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Sicherstellen, dass Body/Container kein Overflow verstecken */
body,
.wp-site-blocks {
    overflow-x: hidden;
}

.wp-block-group,
.wp-block-post-content {
    overflow-x: visible;
}

/* Padding für normale Content-Blöcke (nicht full-width) */
.wp-block-post-content > *:not(.alignfull):not(.alignwide) {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Responsive Padding */
@media (max-width: 768px) {
    .wp-block-post-content > *:not(.alignfull):not(.alignwide) {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* =============================================
   Header Logo (wp:site-logo)
   ============================================= */
.wp-block-site-logo {
    flex-shrink: 0;
}

.wp-block-site-logo img {
    display: block;
    height: auto;
}

/* Footer Logo: kleiner, ggf. invertiert */
.footer-logo img {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* =============================================
   Sidebar-Navigation (Burger-Menu)
   Universelle Selektoren für wp:page-list
   und wp:navigation-link
   ============================================= */

/* Container: Versteckt wenn nicht offen */
.bistum-nav__sidebar:not(.is-menu-open) {
    display: none;
}

/* Burger-Button: Immer sichtbar */
.bistum-nav__open {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    color: #003669 !important;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    background: none !important;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.bistum-nav__open::after {
    content: 'Menü';
}

.bistum-nav__open:hover {
    background-color: rgba(0, 54, 105, 0.08) !important;
}

.bistum-nav__open svg {
    width: 24px;
    height: 24px;
}

/* Overlay-Container */
.bistum-nav__sidebar.is-menu-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    animation: fadeIn 0.3s ease !important;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Sidebar-Panel */
.bistum-nav__sidebar.is-menu-open .bistum-nav__sidebar-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 340px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: linear-gradient(180deg, #003669 0%, #002a52 100%) !important;
    padding: 4.5rem 0 2rem !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    animation: slideInLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: block !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.bistum-nav__sidebar.is-menu-open .bistum-nav__sidebar-content::-webkit-scrollbar {
    display: none;
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

/* WordPress Close-Button verstecken (wird per JS ausgeblendet) */
.bistum-nav__close {
    display: none !important;
}

/* Eigener Close-Button (per JS erstellt) */
.sidebar-close-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    height: auto !important;
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    z-index: 100000 !important;
    padding: 0.5rem !important;
    border-radius: 50% !important;
    transition: color 0.2s ease, background-color 0.2s ease !important;
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
    margin: 0 !important;
    font-size: 0 !important;
}

.sidebar-close-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.sidebar-close-btn svg {
    width: 20px !important;
    height: 20px !important;
}

/* === Kompletter WordPress Navigation Reset im Sidebar === */

/* Alle Flex-Container → Block-Layout */
.bistum-nav__sidebar.is-menu-open .wp-block-navigation-item,
.bistum-nav__sidebar.is-menu-open .wp-block-page-list,
.bistum-nav__sidebar.is-menu-open .wp-block-navigation__container,
.bistum-nav__sidebar.is-menu-open .bistum-nav__sidebar-content > *,
.bistum-nav__sidebar.is-menu-open .wp-block-pages-list__item {
    display: block !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Alle Listen im Sidebar: Reset */
.bistum-nav__sidebar.is-menu-open ul,
.bistum-nav__sidebar.is-menu-open ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    flex-wrap: unset !important;
    gap: 0 !important;
}

/* Alle <li> Items */
.bistum-nav__sidebar.is-menu-open li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* ===================================================
   ALLE Links im Sidebar - Breite Selektoren
   Fängt li>a, WP-spezifische Klassen, und verschachtelte Links ab
   =================================================== */
.bistum-nav__sidebar.is-menu-open a,
.bistum-nav__sidebar.is-menu-open li > a,
.bistum-nav__sidebar.is-menu-open .wp-block-navigation-item__content,
.bistum-nav__sidebar.is-menu-open .wp-block-pages-list__item__link {
    display: block !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.975rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    padding: 0.6rem 1.75rem !important;
    text-decoration: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease !important;
    line-height: 1.4 !important;
    background: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Hover & Focus */
.bistum-nav__sidebar.is-menu-open a:hover,
.bistum-nav__sidebar.is-menu-open a:focus,
.bistum-nav__sidebar.is-menu-open .wp-block-navigation-item__content:hover,
.bistum-nav__sidebar.is-menu-open .wp-block-pages-list__item__link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
    padding-left: 2rem !important;
}

/* Aktive Seite */
.bistum-nav__sidebar.is-menu-open li.current-menu-item > a,
.bistum-nav__sidebar.is-menu-open li.current_page_item > a,
.bistum-nav__sidebar.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
    color: #e5007d !important;
    font-weight: 500 !important;
    background: rgba(255, 255, 255, 0.9) !important;
}

/* === Untermenüs: Initial versteckt via JS === */
.bistum-nav__sidebar.is-menu-open li > ul.sidebar-submenu-hidden {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: rgba(0, 0, 0, 0.12) !important;
    border: none !important;
}

.bistum-nav__sidebar.is-menu-open li > ul.sidebar-submenu-open {
    max-height: 500px !important;
    overflow: hidden !important;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: rgba(0, 0, 0, 0.12) !important;
    border: none !important;
}

/* Untermenü-Links: Kleiner und eingerückt */
.bistum-nav__sidebar.is-menu-open li > ul a,
.bistum-nav__sidebar.is-menu-open li > ul .wp-block-navigation-item__content,
.bistum-nav__sidebar.is-menu-open li > ul .wp-block-pages-list__item__link {
    font-size: 0.9rem !important;
    padding: 0.45rem 1.75rem 0.45rem 2.75rem !important;
    color: rgba(255, 255, 255, 0.65) !important;
    border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

.bistum-nav__sidebar.is-menu-open li > ul a:hover,
.bistum-nav__sidebar.is-menu-open li > ul .wp-block-navigation-item__content:hover,
.bistum-nav__sidebar.is-menu-open li > ul .wp-block-pages-list__item__link:hover {
    color: #ffffff !important;
    padding-left: 3rem !important;
}

.bistum-nav__sidebar.is-menu-open li > ul li:last-child > a,
.bistum-nav__sidebar.is-menu-open li > ul li:last-child > .wp-block-navigation-item__content {
    border-bottom: none !important;
}

/* === Toggle-Button für Untermenüs (via JS eingefügt) === */
.sidebar-submenu-toggle {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 3.25rem !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    cursor: pointer !important;
    transition: color 0.2s ease, background-color 0.2s ease !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sidebar-submenu-toggle:hover {
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Chevron-Pfeil */
.sidebar-submenu-toggle::after {
    content: '' !important;
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sidebar-submenu-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg) !important;
}

/* Li mit Untermenü: relative für den Toggle-Button */
.bistum-nav__sidebar.is-menu-open li.has-submenu {
    position: relative !important;
}

.bistum-nav__sidebar.is-menu-open li.has-submenu > a,
.bistum-nav__sidebar.is-menu-open li.has-submenu > .wp-block-navigation-item__content,
.bistum-nav__sidebar.is-menu-open li.has-submenu > .wp-block-pages-list__item__link {
    padding-right: 4rem !important;
}

/* WordPress eigene Submenu-Icons verstecken (nicht den Container selbst!) */
.bistum-nav__sidebar.is-menu-open .wp-block-navigation__submenu-icon {
    display: none !important;
}

/* Oberer Trenner beim ersten Element */
.bistum-nav__sidebar.is-menu-open .bistum-nav__sidebar-content > ul > li:first-child > a,
.bistum-nav__sidebar.is-menu-open .bistum-nav__sidebar-content > ul > li:first-child > .wp-block-navigation-item__content {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* =============================================
   Footer
   ============================================= */
/* =============================================
   Blockquote
   ============================================= */
.wp-block-post-content > .wp-block-quote {
    border-left-color: #003669 !important;
    margin-left: 2rem !important;
}

.wp-block-group.has-primary-blue-background-color a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.2s ease;
}

.wp-block-group.has-primary-blue-background-color a:hover {
    color: #ffffff;
}

/* =============================================
   Aktuelles / News Cards
   ============================================= */
.bistum-news-card {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    padding: 0 !important;
}

.bistum-news-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Horizontales Layout */
.bistum-news-card--horizontal {
    display: flex !important;
    flex-direction: row;
}

.bistum-news-card--horizontal .wp-block-post-featured-image,
.bistum-news-card--horizontal .bistum-news-card__image {
    margin: 0;
    flex: 0 0 320px;
    min-height: 100%;
    text-decoration: none;
    display: block;
}

.bistum-news-card--horizontal .wp-block-post-featured-image img,
.bistum-news-card--horizontal .bistum-news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: auto;
}

.bistum-news-card--horizontal .bistum-news-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

.bistum-news-card__content {
    padding: 1.25rem 1.5rem !important;
    margin-top: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden;
}

.bistum-news-card__content .wp-block-post-date,
.bistum-news-card__content .bistum-news-card__date {
    color: #888;
    margin: 0 0 0.25rem 0 !important;
    font-size: var(--wp--preset--font-size--small);
}

.bistum-news-card__content .wp-block-post-title,
.bistum-news-card__content .bistum-news-card__title {
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.5rem 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--wp--preset--font-size--medium);
}

.bistum-news-card__content .wp-block-post-title a,
.bistum-news-card__content .bistum-news-card__title a {
    color: var(--wp--preset--color--primary-blue);
    text-decoration: none;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bistum-news-card__content .wp-block-post-title a:hover,
.bistum-news-card__content .bistum-news-card__title a:hover {
    color: var(--wp--preset--color--accent-magenta);
}

.bistum-news-card__content .wp-block-post-excerpt,
.bistum-news-card__content .bistum-news-card__excerpt {
    color: #555;
    font-size: var(--wp--preset--font-size--small);
    margin: 0 0 1rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bistum-news-card__content .wp-block-post-excerpt__more-text {
    display: none;
}

/* Weiterlesen-Link mit Pfeil-Icon */
.bistum-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--wp--preset--color--primary-blue);
    text-decoration: none;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    margin: 0 !important;
    transition: color 0.2s ease, gap 0.2s ease;
}

.bistum-read-more::after {
    content: '→';
    display: inline-block;
    transition: transform 0.2s ease;
}

.bistum-read-more:hover {
    color: var(--wp--preset--color--accent-magenta);
}

.bistum-read-more:hover::after {
    transform: translateX(3px);
}

/* Responsive: Horizontal → Vertikal auf Mobil */
@media (max-width: 600px) {
    .bistum-news-card--horizontal {
        flex-direction: column !important;
    }

    .bistum-news-card--horizontal .wp-block-post-featured-image,
    .bistum-news-card--horizontal .bistum-news-card__image {
        flex: none;
        min-height: auto;
    }

    .bistum-news-card--horizontal .wp-block-post-featured-image img,
    .bistum-news-card--horizontal .bistum-news-card__image img {
        aspect-ratio: 16/9;
    }
}

/* =============================================
   Suchformular
   ============================================= */
.bistum-search-form .wp-block-search__inside-wrapper {
    border: 2px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.2s ease;
}

.bistum-search-form .wp-block-search__inside-wrapper:focus-within {
    border-color: var(--wp--preset--color--primary-blue);
}

.bistum-search-form .wp-block-search__input {
    border: none;
    padding: 0.6rem 1rem;
}

.bistum-search-form .wp-block-search__button {
    background-color: var(--wp--preset--color--primary-blue);
    color: #fff;
    border: none;
    padding: 0.6rem 1.25rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.bistum-search-form .wp-block-search__button:hover {
    background-color: var(--wp--preset--color--accent-magenta);
}

/* =============================================
   Post-Meta (Kategorien, Datum)
   ============================================= */
.bistum-post-meta a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s ease;
}

.bistum-post-meta a:hover {
    color: var(--wp--preset--color--primary-blue);
}

/* =============================================
   Zurück-Link
   ============================================= */
.bistum-back-link a {
    color: var(--wp--preset--color--primary-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

.bistum-back-link a:hover {
    color: var(--wp--preset--color--accent-magenta);
}

/* =============================================
   Post-Navigation (Vorheriger/Nächster)
   ============================================= */
.bistum-post-navigation {
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20);
}

.bistum-post-navigation a {
    color: var(--wp--preset--color--primary-blue);
    text-decoration: none;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    transition: color 0.2s ease;
}

.bistum-post-navigation a:hover {
    color: var(--wp--preset--color--accent-magenta);
}

/* =============================================
   Archiv Post-Grid
   ============================================= */
.wp-block-post-template.is-layout-grid .wp-block-post-featured-image img {
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
}

.wp-block-post-template .wp-block-post-title a {
    text-decoration: none;
    color: var(--wp--preset--color--primary-blue);
    transition: color 0.2s ease;
}

.wp-block-post-template .wp-block-post-title a:hover {
    color: var(--wp--preset--color--accent-magenta);
}

.wp-block-post-template .wp-block-post-terms a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s ease;
}

.wp-block-post-template .wp-block-post-terms a:hover {
    color: var(--wp--preset--color--primary-blue);
}

/* Responsive: 1 Spalte auf Mobil */
@media (max-width: 600px) {
    .wp-block-post-template.is-layout-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .wp-block-post-template.is-layout-grid.columns-3 {
        grid-template-columns: 1fr 1fr !important;
    }
}