/**
 * LinkesWP Compatibility CSS
 * Bridges Ghost-specific CSS classes to WordPress/Gutenberg output
 */

/* -------------------------------------------------------------------------
   Ghost "Header Card" (kg-header-card) → WordPress Cover Block equivalent
   These styles make WordPress Cover blocks look like Ghost Header Cards
   -------------------------------------------------------------------------*/
.gh-content .wp-block-cover,
.gh-content .wp-block-group.alignfull {
    position: relative;
    padding: 0;
    min-height: initial;
}

.gh-content .wp-block-cover__inner-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}

@media (max-width: 640px) {
    .gh-content .wp-block-cover__inner-container {
        grid-template-columns: 1fr;
    }
}

/* Ghost kg-header-card split layout */
.gh-content .kg-header-card {
    box-sizing: border-box;
    padding: 0;
    min-height: initial;
    text-align: initial;
}

.gh-content .kg-header-card.kg-v2 {
    position: relative;
    width: 100%;
}

.gh-content .kg-header-card-content {
    width: 100%;
}

.gh-content .kg-layout-split .kg-header-card-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
    .gh-content .kg-layout-split .kg-header-card-content {
        grid-template-columns: 1fr;
    }
}

.gh-content .kg-header-card-text {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    padding: min(6.4vmax, 120px) min(4vmax, 80px);
    background-size: cover;
    background-position: center;
    text-align: left;
}

.gh-content .kg-width-full .kg-header-card-text {
    padding: min(12vmax, 260px) 0;
}

.gh-content .kg-layout-split .kg-header-card-text {
    padding: min(12vmax, 260px) min(4vmax, 80px);
}

.gh-content .kg-header-card-image {
    width: 100%;
    height: 0;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
}

.gh-content .kg-header-card-heading {
    margin: 0;
    font-family: var(--font-sans-title);
    font-size: clamp(1.7em, 4vw, 2.5em);
    font-weight: 700;
    line-height: 1.05em;
    letter-spacing: -0.01em;
}

.gh-content .kg-width-full .kg-header-card-heading {
    font-size: clamp(1.9em, 5.6vw, 4.2em);
}

.gh-content .kg-header-card-subheading {
    max-width: 40em;
    margin: 0.6em 0 0;
    font-size: clamp(1.05em, 2vw, 1.4em);
    font-weight: 500;
    line-height: 1.2em;
}

.gh-content .kg-header-card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.5em;
    padding: 0.8em 1.4em;
    font-size: 1.5rem;
    font-weight: 600;
    border-radius: 100px;
    text-decoration: none;
    cursor: pointer;
    border: 0;
}

.gh-content .kg-btn-accent,
.gh-content .kg-style-accent {
    background-color: var(--ghost-accent-color);
    color: #fff;
}

/* kg-width-full overrides the grid column */
.gh-canvas .kg-width-full {
    grid-column: full;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Fix font paths — Ghost used /assets/fonts/, WordPress uses theme URL */
/* (handled by replacing URLs in screen.css on enqueue) */

/* Accent color — Ghost used --ghost-accent-color, WP uses custom property */
:root {
    --ghost-accent-color: #ff0000;
}

/* WordPress search form */
.gh-form input[type="search"] {
    position: absolute;
    inset: 0;
    padding-inline: 26px;
    width: 100%;
    height: 100%;
    font-size: inherit;
    letter-spacing: inherit;
    line-height: 1.1;
    border: 0;
    background-color: transparent;
    outline: none;
    color: var(--color-primary-text);
}

/* Dropdown items are <li> moved out of <ul> — reset default list styling */
.gh-dropdown li {
    list-style: none;
}

/* position: relative + z-index: 100 ensures nav paints above hero section which has z-index: auto */
.gh-navigation {
    position: relative;
    z-index: 100;
}

/* Navigation — WordPress adds <ul> directly, Ghost wraps in <nav> */
.gh-navigation-menu {
    overflow: hidden;
    min-width: 0;
}

.gh-navigation-menu ul,
.gh-navigation-menu ul.nav {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gh-navigation-menu li a {
    display: block;
    padding: 0 1.2rem;
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--color-darker-gray);
    white-space: nowrap;
}

/* Active nav item in accent color — WordPress classes */
.gh-navigation .nav li.current-menu-item > a,
.gh-navigation .nav li.current_page_item > a,
.gh-navigation .nav li.current-menu-parent > a,
.gh-navigation .nav li.nav-current > a {
    color: var(--ghost-accent-color);
}

/* WordPress submenu / dropdown */
.gh-navigation-menu .menu-item-has-children {
    position: relative;
}

.gh-navigation-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--background-color);
    box-shadow: 0 4px 20px rgb(0 0 0 / 0.1);
    border-radius: 6px;
    padding: 8px 0;
    z-index: 1000;
    list-style: none;
    margin: 0;
    display: none;
    flex-direction: column;
}

.gh-navigation-menu .menu-item-has-children.is-open > .sub-menu,
.gh-navigation-menu .menu-item-has-children:focus-within > .sub-menu {
    display: flex;
}

.gh-navigation-menu .sub-menu li a {
    padding: 8px 16px;
    font-size: 1.5rem;
    white-space: nowrap;
}

/* Footer menu */
.gh-footer-menu ul,
.gh-footer-menu ul.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gh-footer-menu li a {
    display: block;
    padding: 4px 12px;
    font-size: 1.5rem;
    color: var(--color-darker-gray);
}

/* WordPress custom-logo resets */

/* When logo is an image, gh-navigation-logo is a <span> not <a> */
span.gh-navigation-logo {
    display: inline-flex;
    align-items: center;
}

.gh-navigation-logo .custom-logo-link,
.gh-footer-logo .custom-logo-link {
    display: inline-flex;
    align-items: center;
}

/* Remove logo hover effect (no opacity change on hover) */
.gh-navigation-logo,
.gh-navigation-logo:hover {
    opacity: 1;
    transition: none;
}
.gh-navigation-logo .custom-logo-link,
.gh-navigation-logo .custom-logo-link:hover {
    opacity: 1;
    transition: none;
}

.gh-navigation-logo .custom-logo {
    max-height: 115px;
    width: auto;
    max-width: none;
}

.gh-footer-logo .custom-logo {
    max-height: 84px;
    width: auto;
}

/* Logo rechts layout */
.gh-navigation.is-right-logo .gh-navigation-brand {
    order: 3;
    margin-left: auto;
}
.gh-navigation.is-right-logo .gh-navigation-menu {
    order: 1;
}
.gh-navigation.is-right-logo .gh-navigation-actions {
    order: 2;
}

/* Hide menu items with no label (e.g. untitled pages added to menu) */
.gh-navigation .nav > li > a:empty,
.gh-footer-menu .nav > li > a:empty {
    display: none;
}
.gh-navigation .nav > li:has(> a:empty),
.gh-footer-menu .nav > li:has(> a:empty) {
    display: none;
}

/* WordPress pagination */
.gh-pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 0;
}

.gh-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 1.5rem;
    font-weight: 500;
    border-radius: 6px;
    color: var(--color-primary-text);
    border: 1px solid var(--color-border);
}

.gh-pagination .page-numbers.current {
    background: var(--ghost-accent-color);
    color: #fff;
    border-color: var(--ghost-accent-color);
}

.gh-pagination .page-numbers:hover:not(.current) {
    background: var(--color-lighter-gray);
}

/* WordPress comments */
.gh-comments .comments-area {
    padding: 40px 0;
}

.gh-comments .comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gh-comments .comment-body {
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border);
}

.gh-comments .comment-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.gh-comments .comment-author img {
    border-radius: 50%;
}

/* WordPress alignment classes */
.gh-canvas > .alignfull {
    grid-column: full;
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.gh-content .alignwide {
    margin-left: calc(25% - 25vw);
    margin-right: calc(25% - 25vw);
}

/* -------------------------------------------------------------------------
   Theme-level Hero (linkeswp-hero) — einstellbar im Customizer
   Liegt außerhalb von .gh-content, braucht eigene Split-Layout-Regeln
   -------------------------------------------------------------------------*/
.linkeswp-hero {
    width: 100%;
    box-sizing: border-box;
    display: block;
}

.linkeswp-hero .kg-header-card-content {
    width: 100%;
    min-height: 50vh;
}

.linkeswp-hero.kg-layout-split .kg-header-card-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 50vh;
}

.linkeswp-hero .kg-header-card-image {
    width: 100%;
    height: 0;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (max-width: 767px) {
    .linkeswp-hero.kg-layout-split .kg-header-card-content {
        grid-template-columns: 1fr;
    }
    .linkeswp-hero .kg-header-card-image {
        height: auto;
        min-height: unset;
    }
}

.linkeswp-hero .kg-header-card-text {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    padding: min(12vmax, 260px) min(4vmax, 80px);
    text-align: left;
    font-size: 1.7rem;
}

.linkeswp-hero .kg-header-card-heading {
    margin: 0;
    font-family: var(--font-sans-title);
    font-size: clamp(1.9em, 4vw, 4.2em);
    font-weight: 700;
    line-height: 1.05em;
    letter-spacing: -0.01em;
}

.linkeswp-hero .kg-header-card-subheading {
    max-width: 40em;
    margin: 0.6em 0 0;
    font-size: clamp(1.05em, 2vw, 1.55em);
    font-weight: 500;
    line-height: 1.2em;
}

.gh-content .alignleft {
    float: left;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

.gh-content .alignright {
    float: right;
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.gh-content .aligncenter {
    margin-left: auto;
    margin-right: auto;
}

/* WordPress Gutenberg blocks in Spectre context */
.gh-content .wp-block-image figcaption,
.gh-content .wp-block-embed figcaption {
    font-size: 1.4rem;
    color: var(--color-secondary-text);
    text-align: center;
    margin-top: 8px;
}

.gh-content .wp-block-quote {
    border-left: 4px solid var(--ghost-accent-color);
    padding-left: 2rem;
    margin: 2rem 0;
    font-style: italic;
}

.gh-content .wp-block-pullquote {
    border-top: 4px solid var(--ghost-accent-color);
    border-bottom: 4px solid var(--ghost-accent-color);
    padding: 2rem 0;
    text-align: center;
    font-size: 2rem;
}

.gh-content .wp-block-code,
.gh-content pre,
.gh-content code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
    background: var(--color-lighter-gray);
    border-radius: 4px;
    padding: 0.2em 0.4em;
}

.gh-content pre code {
    padding: 0;
    background: transparent;
}

.gh-content pre {
    padding: 1.6rem;
    overflow-x: auto;
}

.gh-content .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.5rem;
}

.gh-content .wp-block-table th,
.gh-content .wp-block-table td {
    padding: 10px 16px;
    border: 1px solid var(--color-border);
    text-align: left;
}

.gh-content .wp-block-table th {
    background: var(--color-lighter-gray);
    font-weight: 600;
}

/* Search overlay */
.gh-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
}

.gh-search-overlay-inner {
    width: 100%;
    max-width: 680px;
    padding: 0 24px;
}

.gh-search-form {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    padding: 0 20px;
    height: 64px;
    gap: 12px;
}

.gh-search-form svg {
    width: 20px;
    height: 20px;
    color: #666;
    flex-shrink: 0;
}

.gh-search-input {
    flex: 1;
    border: 0;
    outline: none;
    font-size: 1.8rem;
    font-family: var(--font-sans);
    background: transparent;
}

.gh-search-close {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px;
    color: #666;
}

.gh-search-close svg { width: 20px; height: 20px; }

.gh-search-results {
    margin-top: 12px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.gh-search-result {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-primary-text);
    text-decoration: none;
}

.gh-search-result:last-child { border-bottom: 0; }
.gh-search-result:hover { background: var(--color-lighter-gray); }

.gh-search-result img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.gh-search-result h4 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 4px;
}

.gh-search-result-date {
    font-size: 1.3rem;
    color: var(--color-secondary-text);
}

.gh-search-no-results {
    padding: 20px;
    font-size: 1.5rem;
    color: var(--color-secondary-text);
    text-align: center;
}

/* Navigation logo text fallback */
.gh-navigation-logo-text {
    font-family: var(--font-sans-title);
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-darker-gray);
    letter-spacing: -0.04em;
}

/* Burger icon states */
.gh-burger-icon { display: block; }
.gh-close-icon  { display: none; }
.gh-navigation.is-open .gh-burger-icon { display: none; }
.gh-navigation.is-open .gh-close-icon  { display: block; }

/* Burger: no tap delay, adequate touch target — display handled by screen.css */
.gh-burger {
    touch-action: manipulation;
    min-width: 44px;
    min-height: 44px;
}

/* Fix mobile menu layout for is-left-logo variant:
   screen.css sets margin-right:100px and grid-template-columns:auto 1fr auto on .is-left-logo
   at all widths — override these at mobile so the open menu shows items below the logo */
@media (max-width: 767px) {
    .gh-navigation.is-left-logo .gh-navigation-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        gap: 48px;
    }

    .gh-navigation.is-left-logo .gh-navigation-menu {
        margin-left: 0;
        margin-right: 0;
        overflow: visible;
    }

    .is-open#gh-navigation .gh-navigation-menu {
        overflow: visible;
    }
}

/* Hide browser-native clear button on search input */
.gh-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

/* wp-admin bar offset */
.admin-bar .gh-navigation {
    top: 0;
}