/* ============================================================
   chrome.css — navbar, footer, back-to-top, page header, shared components
   Part of the Praxis Dr. Kretzschmar theme. Rules moved verbatim
   from the original single style.css (see CLAUDE.md).
   ============================================================ */

/* ---------- Navbar ---------- */
.navbar {
    background: var(--color-green-100);
    /* Content capped at 1280px and centered; green background still spans full viewport.
       ROLLBACK: comment the active line below and uncomment the rollback line. */
    padding: 6px max(80px, (100% - 1280px) / 2);
    /* ROLLBACK (previous full-width content): padding: 6px 80px; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    max-height: 70px;
    position: sticky;
    top: 0;
    z-index: 200;
}

.brand {
    display: flex;
    align-items: center;
    gap: 18px;
}

.brand-link {
    display: inline-block;   /* layout only — keeps logo + text together */
}

.brand-link,
.brand-link:link,
.brand-link:visited,
.brand-link:hover,
.brand-link:active,
.brand-link:focus {
    text-decoration: none;   /* no underline, in any state */
    color: inherit;          /* no link blue, no visited purple */
    cursor: default;         /* no pointer hand on hover */
}

.brand-logo {
    width: auto;
    height: 48px;
}

.brand-icon {
    width: 96px;
    height: 120px;
    flex-shrink: 0;
    color: var(--color-ink-900);
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-line-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--color-ink-900);
}

.brand-line-credentials {
    font-size: 13px;
    font-weight: 300;
    color: var(--color-ink-900);
    margin-top: 1px;
}

.brand-line-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-ink-900);
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 44px;
    list-style: none;
}

.nav-menu a {
    color: var(--color-ink-900);
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    transition: opacity 0.2s ease;
}

.nav-menu a:hover {
    opacity: 0.65;
}

/* ---------- Hamburger Menu (hidden by default on desktop) ---------- */

/* Hide the checkbox — it only carries state */
.nav-toggle {
    display: none;
}

/* Hide the hamburger button on desktop */
.nav-toggle-label {
    display: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 0;
    z-index: 110;
}

.nav-toggle-bar {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--color-ink-900);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
}

/* ---------- Mobile layout ---------- */
@media (max-width: 640px) {
    .navbar {
        width: 100%;
        padding: 16px 20px;
        position: relative;
        max-height: none;
    }
    
    /* Show the hamburger */
    .nav-toggle-label {
        display: flex;
    }
    
    /* Shrink brand on small screens so it fits next to the hamburger */
    .brand-icon {
        width: 48px;
        height: 60px;
    }
    .brand-line-title { font-size: 18px; }
    .brand-line-credentials { font-size: 13px; }
    .brand-line-name { font-size: 15px; }
    
    /* Collapsed nav menu — slides down from below the navbar */
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--color-green-100);
        border-top: 1px solid var(--color-green-200);
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        z-index: 100;
    }
    
    .nav-menu li {
        border-bottom: 1px solid var(--color-green-200);
    }
    
    .nav-menu li:last-child {
        border-bottom: none;
    }
    
    .nav-menu a {
        display: block;
        padding: 16px 24px;
        font-size: 16px;
    }
    
    /* Open state — checkbox checked */
    .nav-toggle:checked ~ .nav-menu {
        max-height: 400px;  /* large enough to fit all items */
    }
    
    /* Animate hamburger → X when open */
    .nav-toggle:checked ~ .nav-toggle-label .nav-toggle-bar:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    .nav-toggle:checked ~ .nav-toggle-label .nav-toggle-bar:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle:checked ~ .nav-toggle-label .nav-toggle-bar:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }
}

/* ---------- Tablet layout (iPad Mini & Pro — portrait + landscape) ----------
   From 641px to 1024px the hamburger isn't active yet, so the full horizontal
   nav has to fit. The desktop 80px side padding + 44px gaps push the menu past
   the right edge, which also forces the whole page to scroll sideways and clips
   the centred page content. Tightening the padding and gaps keeps everything
   inside the viewport. (iPad Pro landscape ≥1194px already fits the desktop
   layout, so it needs no override.) */
@media (min-width: 641px) and (max-width: 1024px) {
    .navbar {
        padding: 6px 24px;
    }
    .nav-menu {
        gap: 24px;
    }
    /* Keep each brand line and menu label on a single line (no awkward wraps) */
    .brand-text { white-space: nowrap; }
    .nav-menu a { white-space: nowrap; }
}


/* ---------- Leistungen dropdown (main navbar) ---------- */
.nav-menu { align-self: stretch; }

.nav-menu .has-dropdown {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
}

.nav-menu .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    background: var(--color-green-50);
    border-top: 2px solid var(--color-accent-600);
    box-shadow: 0 10px 28px rgba(15, 40, 66, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 120;
}

.nav-menu .has-dropdown:hover .dropdown,
.nav-menu .has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-menu .dropdown li { margin: 0; }

.nav-menu .dropdown a {
    display: block;
    padding: 11px 22px;
    font-size: 14px;
    white-space: nowrap;
    color: var(--color-ink-900);
}

.nav-menu .dropdown a:hover {
    background: var(--color-green-100);
    opacity: 1;
}


/* ---------- Mobile: dropdown becomes an inline indented list ---------- */
@media (max-width: 640px) {
    .nav-menu .has-dropdown { display: block; }
    .nav-menu .dropdown {
        position: static;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-top: none;
        background: var(--color-green-100);
        padding: 0;
    }
    .nav-menu .dropdown a {
        padding: 14px 40px;
        font-size: 15px;
        border-top: 1px solid var(--color-green-200);
    }
    .nav-toggle:checked ~ .nav-menu { max-height: 760px; }
}

/* ---------- Footer ---------- */
.footer {
    background: var(--color-ink-900);
    color: #ffffff;
    padding: 80px 80px 32px;
}

.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
    margin-bottom: 48px;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-heading {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 12px;
}

.footer-divider {
    width: 40px;
    height: 2px;
    background: var(--color-accent-600);
    margin-bottom: 24px;
}

.footer-text {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #ffffff;
}

.footer-address {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    font-style: normal;
    margin-bottom: 16px;
}

.footer-contact-line {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 8px;
    word-break: break-word;
}

.footer-contact-line a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact-line a:hover {
    color: #ffffff;
}

.footer-rule {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 0 0 24px;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.footer-copyright {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.footer-legal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 32px;
}

.footer-legal a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal a:hover {
    color: #ffffff;
}


/* ---------- Responsive (footer) ---------- */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 640px) {
    .footer {
        padding: 60px 24px 24px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .footer-legal {
        gap: 20px;
    }
}

/* ---------- Back-to-top Button ---------- */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-green-900);
    color: var(--color-ink-50);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.2s ease;
    z-index: 100;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--color-green-800);
}

.back-to-top svg {
    width: 22px;
    height: 22px;
}

@media (max-width: 640px) {
    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }
}

/* ---------- Page Header (sub-page hero) ---------- */
.page-header {
    background: var(--color-green-50);
    padding: 80px 80px 60px;
}

.page-header-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.page-header-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 44px;
    font-weight: 400;
    color: var(--color-ink-900);
    margin-bottom: 18px;
    line-height: 1.1;
}

.page-header-divider {
    width: 56px;
    height: 2px;
    background: var(--color-accent-600);
    margin: 0 auto 24px;
}

.page-header-tagline {
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-ink-900);
    opacity: 0.85;
}


/* ---------- Responsive (page header) ---------- */
@media (max-width: 640px) {
    .page-header {
        padding: 60px 24px 40px;
    }
    .page-header-title {
        font-size: 36px;
    }
}

.info-box {
    background: #ffffff;
    border: 2px solid var(--color-green-600);
    border-radius: 12px;
    padding: 28px 28px 24px;
}

.info-box-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--color-ink-900);
    margin-bottom: 10px;
}

.info-box-divider {
    width: 40px;
    height: 2px;
    background: var(--color-accent-600);
    margin-bottom: 20px;
}

.info-box-content {
    font-size: 14px;
    color: var(--color-ink-900);
}

.info-box-line {
    margin-bottom: 8px;
    line-height: 1.55;
}

.info-box-line span {
    font-weight: 700;
}

.info-box-line:last-child {
    margin-bottom: 0;
}

.info-box-line strong {
    font-weight: 700;
}

/* Info-box content from the WYSIWYG field (Phase 4c): match the look the
   .info-box-line / span markup gave — spaced paragraphs, bold highlights. */
.info-box-content p {
    margin-bottom: 8px;
    line-height: 1.55;
}

.info-box-content p:last-child {
    margin-bottom: 0;
}

.info-box-content strong {
    font-weight: 700;
}



/* ---------- CTA Strip (sub-page) ---------- */
.cta-strip {
    background: var(--color-green-100);
    padding: 36px 24px;
}

.cta-strip-inner {
    text-align: center;
}

.cta-strip-link {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-creme-50);
    text-decoration: none;
    background: var(--color-accent-600);
    border: 1px solid var(--color-creme-50);
    padding: 14px 32px;
    transition: opacity 0.2s ease;
}

.cta-strip-link:hover {
    opacity: 0.9;
}