/*
 * Theme-spezifisches CSS - ergaenzt design_tokens.css und components.css
 * Layout-Glue fuer Header, Sidebar, Footer und sprachspezifische Logos.
 */

/* ===== Header ===== */
.sportal-header {
    padding: 22px 0;
    background: var(--color-bg);
    position: relative;
}
.sportal-header-inner {
    max-width: 1170px;
    margin: 0 auto;
    align-items: center !important;
    gap: 30px;
    flex-wrap: nowrap !important;
}
.sportal-portal-label {
    font-size: 24px;
    font-weight: 500;
    margin: 0 !important;
    flex: 1;
    text-align: center;
}
.sportal-header-actions {
    align-items: center !important;
    gap: 16px;
    flex-wrap: nowrap !important;
}

/* ===== Mega-Menu (Burger -> Vollflaechiges Drop-Down) =====
 * Pure-CSS-Toggle via #sportal-menu-toggle Checkbox.
 * Repliziert Tocco-Layout: 6 Spalten mit Top-Level-Pages, jede mit
 * 2 Ebenen Sub-Items.
 */
.sportal-menu-toggle { display: none !important; }

.sportal-menu-burger {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 36px;
    height: 27px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 100;
}
.sportal-burger-icon {
    height: 3px;
    background: var(--color-text);
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}

/* Burger -> X bei geoeffnetem Menue */
.sportal-menu-toggle:checked ~ .sportal-menu-burger { display: none; }

.sportal-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 90;
}
.sportal-menu-toggle:checked ~ .sportal-menu-overlay { display: block; }

.sportal-mega-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff !important;
    padding: 60px 80px 40px;
    z-index: 95;
    overflow-y: auto;
}
.sportal-menu-toggle:checked ~ .sportal-mega-menu { display: block; }

.sportal-menu-close {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    color: var(--ssb-red);
    z-index: 96;
}

.sportal-menu-home {
    display: block;
    color: var(--color-text);
    font-weight: 400;
    margin-bottom: 30px;
    text-decoration: none;
}
.sportal-menu-home:hover { color: var(--ssb-red); }

.sportal-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 32px;
    align-items: start;
}
.sportal-first-level {
    list-style: none;
}
.sportal-first-level-link {
    display: block;
    color: var(--color-text);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.3;
    text-decoration: none;
    margin-bottom: 22px;
    padding-bottom: 4px;
}
.sportal-first-level-link:hover { color: var(--ssb-red); }

.sportal-second-level {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sportal-second-item {
    position: relative;
    border-bottom: 1px solid #b8b8b8;
}

.sportal-second-link {
    display: block;
    color: var(--color-text);
    text-decoration: none;
    padding: 16px 28px 16px 0;
    font-size: 15px;
    line-height: 1.35;
    transition: color 0.15s;
}
.sportal-second-link:hover {
    color: var(--ssb-red);
}
/* aktive Sub-Page (current-page) leicht unterstrichen wie im Original */
.sportal-second-item.current-page > .sportal-second-link {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.sportal-sub-toggle { display: none; }
.sportal-sub-chevron {
    position: absolute;
    top: 10px;
    right: -4px;
    cursor: pointer;
    color: var(--ssb-red-text);
    transition: transform 0.2s, background-color 0.15s;
    user-select: none;
    padding: 8px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    line-height: 1;
}
.sportal-sub-chevron:hover {
    background-color: rgba(197, 48, 42, 0.08);
}
.sportal-sub-chevron svg {
    display: block;
    width: 20px;
    height: 20px;
    transition: transform 0.2s;
}
.sportal-sub-toggle:checked ~ .sportal-sub-chevron svg { transform: rotate(180deg); }

.sportal-third-level {
    list-style: none;
    margin: 0;
    padding: 0 0 8px 16px;
    display: none;
}
.sportal-sub-toggle:checked ~ .sportal-third-level { display: block; }
.sportal-third-level li { padding: 4px 0; }
.sportal-third-level a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 13px;
}
.sportal-third-level a:hover { color: var(--ssb-red); }

@media (max-width: 1300px) {
    .sportal-nav-list { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1050px) {
    .sportal-nav-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
    .sportal-nav-list { grid-template-columns: repeat(2, 1fr); }
    .sportal-mega-menu { padding: 60px 20px 40px; }
}
.sportal-lang-switcher .lang_selector {
    color: var(--ssb-red);
    font-weight: 400;
    text-decoration: none;
}
.sportal-lang-switcher .sep {
    color: #aaa;
    margin: 0 4px;
}
.search-icon button {
    color: var(--ssb-red);
    background: transparent;
    border: 0;
}
.sportal-mainnav {
    margin-top: 22px;
}

/* Sprachspezifisches Logo via body.lang-xx */
body.lang-de .custom-logo-link img,
body.lang-de .wp-block-site-logo img { content: url("/wp-content/themes/samariter-portal/assets/samariter_logo.svg"); }
body.lang-fr .custom-logo-link img,
body.lang-fr .wp-block-site-logo img { content: url("/wp-content/themes/samariter-portal/assets/logo-fr.svg"); }
body.lang-it .custom-logo-link img,
body.lang-it .wp-block-site-logo img { content: url("/wp-content/themes/samariter-portal/assets/logo-it.svg"); }

/* ===== Page-Grid (Hauptcontent + Sidebar) ===== */
.sportal-page-grid {
    margin-top: 22px;
    gap: 30px !important;
}
.sportal-page-main { max-width: 887px; }
.sportal-page-side {
    max-width: 443px;
}
.sportal-sidebar {
    background: transparent;
    padding-left: 0;
}
.sportal-sidebar h3 { margin-top: 0; }

/* ===== Front-Page (Tocco-HTML 1:1 layouten) ===== */
.sportal-front-page-article {
    margin-bottom: 44px;
}

/* Tile-Reihe: 6 Boxen quadratisch */
.sportal-front-page-article .sp-tiles,
.sp-tiles.wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 44px !important;
    flex-wrap: nowrap !important;
}
.sportal-front-page-article .sp-tiles > [class*="tocco-container-box"],
.sp-tiles.wp-block-columns > .wp-block-column {
    min-width: 0;
    flex-basis: auto !important;
    margin: 0 !important;
    padding: 0;
}
.sportal-front-page-article .sp-tiles .box-wrapper,
.sp-tiles .box-wrapper {
    aspect-ratio: 1 / 1;
    margin: 0;
    width: 100%;
}

/* sp-2col: Lead+Quicklinks 2-Spalten-Layout */
.sp-2col.wp-block-columns {
    gap: 60px !important;
    margin-bottom: 44px;
}
.sp-2col .sportal-italic em { color: var(--color-text-muted); }

/* 2-Col-Layout: Hauptcontent links, Sidebar rechts */
.sportal-front-page-article .sp-2col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 60px;
    align-items: start;
}
.sportal-front-page-article .sp-main { min-width: 0; }
.sportal-front-page-article .sp-side {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.sportal-front-page-article .sp-side > .tocco-container {
    margin-bottom: 22px;
}
.sportal-front-page-article .sp-side > .tocco-container p,
.sportal-front-page-article .sp-side > .tocco-container div {
    margin: 0;
    padding: 0;
}
/* Pfeil-Bilder neben Quicklink-Texten - laenger und schwarz wie Original */
.sportal-front-page-article .sp-side img.box-arrow {
    margin-right: 14px;
    vertical-align: middle;
    height: 14px;
    width: auto;
    /* CSS-Filter macht das schwarze Pfeil-SVG aus dem roten Original */
    filter: brightness(0);
}
.sportal-front-page-article .sp-side a {
    font-weight: 700;
    text-decoration: none;
    color: var(--color-text);
}
.sportal-front-page-article .sp-side a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Quicklinks im Sidebar-Stil: Pfeil + schwarzer fetter Link wie im Original */
.sportal-front-page-article .sp-side a {
    color: #000;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
}

.sportal-front-page-article .sp-rest {
    margin-top: 22px;
    clear: both;
}

@media (max-width: 768px) {
    .sportal-front-page-article .sp-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
    .sportal-front-page-article .sp-2col {
        grid-template-columns: 1fr;
        row-gap: 30px;
    }
}
.box-wrapper {
    text-decoration: none;
    color: inherit !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1 / 1 !important;
    width: 100%;
    padding: 13px;
    margin: 0 !important;
    box-sizing: border-box;
}
.box-wrapper h3 {
    margin: 0 0 8px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
}
.box-wrapper .box-title {
    font-size: 13px;
    margin: 0 !important;
    flex: 1;
}
.box-wrapper h3 {
    color: var(--ssb-red);
}
.box-wrapper.violet.light h3 { color: var(--box-violet-dark); }
.box-wrapper.green.light h3 { color: #6b8e23; }
.box-wrapper.blue.light h3 { color: #4682b4; }
.box-wrapper.black h3 { color: var(--color-text); }

.box-arrow-link {
    color: var(--ssb-red);
    font-size: 24px;
    line-height: 1;
}
.box-wrapper.violet.light .box-arrow-link { color: var(--box-violet-dark); }
.box-wrapper.green.light .box-arrow-link { color: #6b8e23; }
.box-wrapper.blue.light .box-arrow-link { color: #4682b4; }
.box-wrapper.black .box-arrow-link { color: var(--color-text); }

/* ===== Footer (1:1 zum Tocco-Original) ===== */
.sportal-footer {
    margin-top: 60px;
    background: #eaeaea !important;
    padding: 0 !important;
}
.sportal-footer-inner {
    max-width: 1170px;
    margin: 0 auto;
    padding: 40px 30px 30px;
    color: var(--color-text);
}
.sportal-footer h3,
.sportal-footer h5 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 12px;
    color: var(--color-text);
    text-transform: none;
    letter-spacing: 0;
}
.sportal-footer a {
    color: var(--ssb-red);
    text-decoration: none;
}
.sportal-footer a:hover { text-decoration: underline; }

/* Reihe 1: Kontakt | Social | © + Links | SRK-Logo */
.sportal-footer-main {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 30px;
    align-items: start;
    border-bottom: 1px solid #d5d5d5;
    padding-bottom: 30px;
    margin-bottom: 30px;
}
.sportal-footer-col {
    font-size: 14px;
    line-height: 1.5;
    min-width: 0; /* prevent overflow if Contact-text long */
}
.sp-foot-contact a { color: var(--ssb-red); }
.sp-foot-social-icons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.sp-foot-social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0; /* anchor wraps img — strip baseline-gap */
}
.sp-foot-social-icons img {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: block;
}
.sp-foot-legal {
    line-height: 1.7;
}
.sp-foot-srk {
    align-self: center;
    text-align: right;
}
.sp-foot-srk img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: inline-block;
}

/* Reihe 2: Zertifizierungs-Logos in einer Linie */
.sportal-footer-certs {
    text-align: left;
}
.sp-foot-cert-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.sp-foot-cert-row img {
    max-height: 60px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
}
.sp-foot-cert-row a {
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .sportal-footer-main {
        grid-template-columns: repeat(2, 1fr);
    }
    .sp-foot-srk { text-align: left; }
    .sp-foot-cert-row img { max-height: 40px; max-width: 90px; }
}
@media (max-width: 500px) {
    .sportal-footer-main { grid-template-columns: 1fr; }
}

/* ===== Search-UI (Header-Icon, einfache Variante) ===== */
.search-icon {
    margin-bottom: 0 !important;
}
.search-icon .wp-block-search__inside-wrapper {
    border: 0;
}
.search-icon .wp-block-search__input {
    display: none;  /* Nur Icon im Header */
}
.search-icon .wp-block-search__button {
    background: transparent;
    border: 0;
    padding: 6px;
}
.search-icon .wp-block-search__button svg {
    fill: var(--ssb-red);
    width: 18px;
    height: 18px;
}

/* ===== Login-Link ===== */
.sportal-login {
    color: var(--color-text);
    font-weight: 400;
    text-decoration: none;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .sportal-header-inner { flex-wrap: wrap !important; }
    .sportal-portal-label { font-size: 18px; }
    .sportal-page-grid { flex-direction: column; }
    .sportal-page-main, .sportal-page-side { max-width: 100%; }
    .sportal-tile-row { flex-wrap: wrap; }
    .sportal-tile-row .wp-block-column { flex-basis: calc(50% - 10px); }
    .sportal-partner-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Search-Modal (Pure-CSS via Checkbox-Toggle) ===== */
.sportal-search-toggle { display: none; }

.sportal-search-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    cursor: pointer;
    color: var(--ssb-red, #df4034);
    background: transparent;
    border: 0;
    transition: opacity 0.15s;
}
.sportal-search-trigger:hover { opacity: 0.7; }

.sportal-search-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: flex-start;
    justify-content: center;
}
.sportal-search-toggle:checked ~ .sportal-search-modal { display: flex; }

.sportal-search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.55);
    cursor: pointer;
    z-index: 0;
}

.sportal-search-modal-inner {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin-top: 14vh;
    padding: 0 24px;
    z-index: 1;
}

.sportal-search-form {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    padding: 6px;
}

.sportal-search-input {
    flex: 1 1 auto;
    border: 0;
    outline: none;
    padding: 16px 20px;
    font-size: 20px;
    background: transparent;
    color: #222;
}
.sportal-search-input::placeholder { color: #999; }

.sportal-search-submit {
    border: 0;
    background: var(--ssb-red, #df4034);
    color: #fff;
    width: 46px;
    height: 46px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    transition: opacity 0.15s;
}
.sportal-search-submit:hover { opacity: 0.85; }

.sportal-search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    cursor: pointer;
    font-size: 28px;
    color: #555;
    line-height: 1;
    transition: color 0.15s;
}
.sportal-search-close:hover { color: var(--ssb-red, #df4034); }

@media (max-width: 600px) {
    .sportal-search-modal-inner { margin-top: 8vh; padding: 0 12px; }
    .sportal-search-input { font-size: 17px; padding: 14px 16px; }
}

/* ===== Search-Results-Page ===== */
.sportal-search-results-page { padding: 30px 0; }

.sportal-search-header {
    margin-bottom: 32px;
}
.sportal-search-header h1 {
    margin: 0 0 18px;
    font-size: 32px;
}

.sportal-search-form-inline {
    max-width: 560px;
}

.sportal-search-results .sportal-search-result {
    padding: 20px 0;
    border-bottom: 1px solid #e5e5e5;
}
.sportal-search-results .sportal-search-result-title a {
    color: var(--color-text, #222);
    text-decoration: none;
    font-size: 20px;
}
.sportal-search-results .sportal-search-result-title a:hover {
    color: var(--ssb-red, #df4034);
}
.sportal-search-results .sportal-search-result-excerpt {
    color: #555;
    font-size: 15px;
    margin: 6px 0 0;
}
.sportal-search-no-results {
    padding: 40px 0;
    color: #888;
    font-style: italic;
    font-size: 16px;
}
.sportal-search-pagination {
    margin-top: 30px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* ===== ContentTree (Sub-Pages-Liste auf Uebersichts-Pages) ===== */
.sportal-content-tree {
    list-style: none;
    margin: 14px 0 22px;
    padding: 0;
}
.sportal-content-tree li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.sportal-content-tree li:last-child {
    border-bottom: 0;
}
.sportal-content-tree a {
    color: var(--color-text, #222);
    text-decoration: none;
    font-size: 16px;
    display: inline-block;
    padding: 2px 0;
    transition: color 0.15s;
}
.sportal-content-tree a:hover {
    color: var(--ssb-red, #df4034);
}
.sportal-content-tree .sportal-content-tree {
    margin-left: 22px;
    margin-top: 4px;
}

/* ===== Accessibility-Fixes (Lighthouse-Audit 2026-05-08) ===== */

/* Color-Contrast: rotes Text auf weissem/hellgrauem Hintergrund */
.sportal-lang-switcher .lang_selector,
.logged-out a,
.sportal-login a,
.box-arrow-link {
    color: var(--ssb-red-text) !important;
}

/* Footer: rotes Text auf grauem Footer-BG */
.sportal-footer-inner a,
.sportal-footer-inner a:visited {
    color: var(--ssb-red-text-on-gray) !important;
}

/* Search-Trigger im Header — rote Lupe */
.sportal-search-trigger {
    color: var(--ssb-red-text);
}

/* Tile-Boxes: green/blue Variants verstärken — Title-Farben dunkler fuer AA-Kontrast */
.box-wrapper.green .box-title,
.box-wrapper.green strong {
    color: #5a6e25 !important;  /* dunkleres gruen, ratio 4.6+ auf #f2f4ea */
}
.box-wrapper.blue .box-title,
.box-wrapper.blue strong {
    color: #2c6970 !important;  /* dunkleres blau, ratio 4.5+ auf #edf5f6 */
}

/* Target-Size: Footer-Links min. 24px Hoehe (mobile-touch-friendly) */
.sportal-footer-inner a {
    display: inline-block;
    padding: 4px 0;
    line-height: 1.6;
    min-height: 24px;
}

/* Image-Aspect-Ratios: Footer-Logos und arrow-svg mit fixen dimensions */
.sportal-footer-logos img,
.partner-logo {
    width: auto;
    height: auto;
    max-width: 100%;
}
/* box-arrow.svg: explizite Dimensionen verhindern Layout-Shift */
img.box-arrow {
    width: 14px;
    height: 14px;
    display: inline-block;
}

/* Color-Contrast Fix: rote Inline-Texte AA-konform (5.4 Ratio statt 4.26) */
.sportal-red,
.box-wrapper .box-title b,
.box-wrapper p.box-title b {
    color: #c5302a;
}

/* Sidebar-Links: unterstrichen damit sie nicht nur per Farbe erkennbar sind */
.sportal-sidebar a,
.sportal-page-side a,
aside a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Breadcrumb-Home-Link + Sidebar-Email-Links: dunkleres Rot */
nav[aria-label="Breadcrumb"] a,
.sportal-sidebar a,
.sportal-page-side a,
aside.sportal-sidebar a {
    color: var(--ssb-red-text) !important;
}

/* Migrations-Pages: Email-Links und Page-Links dunkler */
.sportal-page-main a:not(.box-wrapper):not(.box-arrow-link) {
    color: var(--ssb-red-text);
}
.sportal-page-main a:not(.box-wrapper):not(.box-arrow-link):hover {
    color: var(--ssb-red-hover);
}

/* Front-Page-Tiles: <span class="box-title"> braucht display:block weil span default inline ist */
.sp-tiles .box-wrapper > .box-title,
.box-wrapper > .box-title {
    display: block;
    margin: 4px 0;
}
.box-wrapper.no-link {
    cursor: default;
    pointer-events: none;
}
.box-wrapper.no-link > * {
    pointer-events: auto;
}