/*
 Theme Name:   communicaziun.ch - Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* Referenzen: 3. und 4. Karte - .ref-meta fixe Höhe (nur ab Tablet aufwärts;
   auf Mobile sollen die Karten der Bricks-Definition folgen) */
@media (min-width: 768px) {
    .brxe-refloop:nth-of-type(3) .ref-meta,
    .brxe-refloop:nth-of-type(4) .ref-meta {
        height: 350px;
    }
}

/* Referenzen: Bei den 3./4.-Karten des sich wiederholenden 5er-Musters
   (links | rechts | zwei nebeneinander | ganze Breite) soll die Ref-Meta-
   Box oben ausgerichtet sein und eine Mindesthoehe halten, damit die
   Karten trotz unterschiedlicher Textlaengen gleichmaessig wirken.
   Trifft: 3+4, 8+9, 13+14, ... */
body.page-id-584 .brxe-refloop:nth-of-type(5n+3) .brxe-refmeta.brxe-block,
body.page-id-584 .brxe-refloop:nth-of-type(5n+4) .brxe-refmeta.brxe-block {
    align-self: stretch !important;
    width: 100%;
    justify-content: flex-start !important;
    min-height: 320px;
}

/* Mobile-Menü offen: Scroll komplett verhindern (html + body).
   Bricks setzt bereits body.no-scroll { overflow:hidden }, aber der
   Scroll-Container ist html — daher html mit-sperren. */
html:has(body.no-scroll) {
    overflow: hidden;
}
body.no-scroll {
    overscroll-behavior: contain;
}

/* --- Startseite Mobile: Header-Anpassungen ---
   Nur auf der Homepage (body.home), nur auf Mobile.
   - Header-Container: border-bottom entfernen
   - Logo oben links ausblenden
   - Burger-Icon von schwarz auf weiss */
@media (max-width: 767px) {
    body.home .header-container.brxe-container {
        padding-bottom: 0;
        justify-content: flex-end;
    }
    body.home #brxe-acrbcp {
        border-bottom: 0;
    }
    body.home #brxe-dwueph,
    body.home #brxe-acrbcp > .bricks-link-wrapper {
        display: none;
    }
    body.home .bricks-mobile-menu-toggle .bar-top,
    body.home .bricks-mobile-menu-toggle .bar-center,
    body.home .bricks-mobile-menu-toggle .bar-bottom {
        background-color: #fff;
    }
    /* Menü geöffnet -> X-Icon auf schwarz, damit es auf dem hellen
       aufgeklappten Panel sichtbar bleibt. */
    body.home .show-mobile-menu .bricks-mobile-menu-toggle .bar-top,
    body.home .show-mobile-menu .bricks-mobile-menu-toggle .bar-center,
    body.home .show-mobile-menu .bricks-mobile-menu-toggle .bar-bottom {
        background-color: var(--schwarz);
    }
}

/* Startseite Desktop/Tablet: dunkler Verlauf oben auf der Video-Section,
   damit die weissen Menuetexte darueber auf hellen Video-Frames (Himmel,
   Schnee, ...) lesbar bleiben. Der Header selbst bleibt transparent und
   wird nicht beruehrt. Der Verlauf laeuft von oben (schwarz, ~45%) sanft
   in transparent aus. */
@media (min-width: 768px) {
    body.home #video {
        position: relative;
    }
    body.home #video::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 220px;
        background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 100%);
        pointer-events: none;
        z-index: 2;
    }
}

/* --- Navigation auf Unterseiten (nicht Startseite) ---
   Oberste Ebene + Submenu-Links: Schrift schwarz, Hover grau.
   Auf der Startseite bleiben die Bricks-Video-Overlay-Farben (weiss)
   erhalten — hier greift nur body:not(.home). */
@media (min-width: 768px) {
    body:not(.home):not(.front-page) .header-navigation.brxe-nav-menu .bricks-nav-menu > li > a,
    body:not(.home):not(.front-page) .header-navigation.brxe-nav-menu .bricks-nav-menu > li > .brx-submenu-toggle > *,
    body:not(.home):not(.front-page).brx-body #brxe-tyenfi .bricks-nav-menu > li > a,
    body:not(.home):not(.front-page).brx-body #brxe-tyenfi .bricks-nav-menu > li > .brx-submenu-toggle > *,
    body:not(.home):not(.front-page) .header-navigation .sub-menu > li > a,
    body:not(.home):not(.front-page) .header-navigation .sub-menu > li > .brx-submenu-toggle > *,
    body:not(.home):not(.front-page).brx-body #brxe-tyenfi .sub-menu > li > a,
    body:not(.home):not(.front-page).brx-body #brxe-tyenfi .sub-menu > li > .brx-submenu-toggle > * {
        color: var(--schwarz) !important;
    }
    body:not(.home):not(.front-page) .header-navigation.brxe-nav-menu .bricks-nav-menu > li > a:hover,
    body:not(.home):not(.front-page) .header-navigation.brxe-nav-menu .bricks-nav-menu > li:hover > a,
    body:not(.home):not(.front-page) .header-navigation.brxe-nav-menu .bricks-nav-menu > li:hover > .brx-submenu-toggle > *,
    body:not(.home):not(.front-page).brx-body #brxe-tyenfi .bricks-nav-menu > li > a:hover,
    body:not(.home):not(.front-page).brx-body #brxe-tyenfi .bricks-nav-menu > li:hover > a,
    body:not(.home):not(.front-page).brx-body #brxe-tyenfi .bricks-nav-menu > li:hover > .brx-submenu-toggle > *,
    body:not(.home):not(.front-page) .header-navigation .sub-menu > li > a:hover,
    body:not(.home):not(.front-page) .header-navigation .sub-menu > li:hover > a,
    body:not(.home):not(.front-page) .header-navigation .sub-menu > li:hover > .brx-submenu-toggle > *,
    body:not(.home):not(.front-page).brx-body #brxe-tyenfi .sub-menu > li > a:hover,
    body:not(.home):not(.front-page).brx-body #brxe-tyenfi .sub-menu > li:hover > a,
    body:not(.home):not(.front-page).brx-body #brxe-tyenfi .sub-menu > li:hover > .brx-submenu-toggle > * {
        color: var(--grau) !important;
    }
}

/* Menütexte auf Mobile: die weisse Farbe (in Bricks fuer die Startseite/Header
   ueber Video definiert) auf Mobile zuruecknehmen — dort wird die Nav ohnehin
   nicht ueber dem Video ausgespielt. */
@media (max-width: 767px) {
    .header-navigation.brxe-nav-menu .bricks-nav-menu > li > a,
    .header-navigation.brxe-nav-menu .bricks-nav-menu > li > .brx-submenu-toggle > * {
        color: var(--schwarz);
    }
}

/* Mobile-Menu Startseite: Submenü-Links sichtbar und klickbar machen.
   Bricks setzt fuer die Home-Nav die Submenus auf weiss (fuer Video-Overlay),
   im ausgeklappten Mobile-Menu ist der Hintergrund aber ebenfalls weiss —
   Links sind unsichtbar. Zudem: pointer-events auf sub-menu erzwingen,
   damit die Links unabhaengig vom aria-expanded-Zustand klickbar sind. */
@media (max-width: 767px) {
    body.home #brxe-tyenfi .bricks-mobile-menu .sub-menu > li > a,
    body.home #brxe-tyenfi .bricks-mobile-menu .sub-menu > li > .brx-submenu-toggle > *,
    body.home .header-navigation .bricks-mobile-menu .sub-menu > li > a,
    body.home .header-navigation .bricks-mobile-menu .sub-menu > li > .brx-submenu-toggle > * {
        color: var(--schwarz) !important;
    }
    #brxe-tyenfi .bricks-mobile-menu .sub-menu,
    #brxe-tyenfi .bricks-mobile-menu .sub-menu * {
        pointer-events: auto !important;
    }
}

/* Startseite Desktop-Submenü: Hover-Farbe schwarz.
   Auf der Home-Nav sind Submenü-Links per Bricks-Setting weiss (fuer Video-
   Overlay). Beim Hovern soll der Text auf schwarz wechseln, damit er auf
   dem hellen ausgeklappten Panel lesbar bleibt. */
@media (min-width: 768px) {
    body.home #brxe-tyenfi .sub-menu > li > a:hover,
    body.home #brxe-tyenfi .sub-menu > li > .brx-submenu-toggle > a:hover,
    body.home #brxe-tyenfi .sub-menu > li > .brx-submenu-toggle > *:hover,
    body.home .header-navigation .sub-menu > li > a:hover,
    body.home .header-navigation .sub-menu > li > .brx-submenu-toggle > a:hover,
    body.home .header-navigation .sub-menu > li > .brx-submenu-toggle > *:hover {
        color: var(--schwarz) !important;
    }
}

/* Fluent Forms Success-Message: neutraler Look mit Beige-Hintergrund */
.ff-message-success {
    background: var(--beige);
    border: 0;
    box-shadow: none;
    max-width: 700px;
    margin-top: 10px;
    padding: 15px;
    position: relative;
}

/* --- Fluent Forms an das Communicaziun-Design anpassen ---
   Ziel: gleiche Typografie (niveau-grotesk), gleiche Buttons wie Bricks
   (kein Radius, Farbwelt Beige/Schwarz), unaufdringliche Inputs. */

.fluentform .frm-fluent-form,
.fluentform label,
.fluentform input,
.fluentform textarea,
.fluentform select,
.fluentform button {
    font-family: 'niveau-grotesk', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    color: var(--schwarz);
}

/* Labels */
.fluentform .ff-el-input--label label {
    font-weight: 500;
    font-size: 18px;
    color: var(--schwarz);
    margin-bottom: 6px;
    display: inline-block;
}
.fluentform .ff-el-is-required .ff-el-input--label label::after,
.fluentform label span.ff-el-is-required-hint,
.fluentform label span[class*='required'] {
    color: var(--schwarz);
    opacity: 0.5;
}

/* Text-Inputs, Textareas, Selects */
.fluentform .ff-el-form-control,
.fluentform textarea.ff-el-form-control,
.fluentform select.ff-el-form-control {
    background: var(--weiss);
    border: 1px solid var(--schwarz);
    border-radius: 0;
    color: var(--schwarz);
    font-size: 18px;
    font-weight: 300;
    padding: 12px 14px;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color 0.15s ease;
    width: 100%;
    max-width: 700px;
}

/* Placeholder */
.fluentform .ff-el-form-control::placeholder {
    color: var(--schwarz);
    opacity: 0.4;
    font-weight: 300;
}

/* Focus */
.fluentform .ff-el-form-control:focus,
.fluentform textarea.ff-el-form-control:focus,
.fluentform select.ff-el-form-control:focus {
    border-color: var(--schwarz);
    outline: 2px solid var(--beige);
    outline-offset: 0;
    box-shadow: none;
}

/* Submit-Button — im Bricks-Button-Stil */
.fluentform .ff-btn,
.fluentform .ff-btn-submit,
.fluentform button[type='submit'] {
    background: #ebebeb;
    color: var(--schwarz);
    border: 0;
    border-radius: 0;
    padding: 12px 48px;
    font-family: 'niveau-grotesk', 'Helvetica Neue', Arial, sans-serif;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease;
    box-shadow: none;
    text-transform: none;
}
.fluentform .ff-btn:hover,
.fluentform .ff-btn-submit:hover,
.fluentform button[type='submit']:hover {
    background: var(--beige);
    color: var(--schwarz);
}

/* File-Upload-Buttons in gleichem Stil */
.fluentform .ff_uploader_holder .ff-el-input--content,
.fluentform .ff-uploader-btn,
.fluentform .ff-el-file-upload button,
.fluentform .ff_file_upload_holder button {
    background: #ebebeb !important;
    color: var(--schwarz) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 12px 48px !important;
    font-family: 'niveau-grotesk', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
    box-shadow: none !important;
}
.fluentform .ff_uploader_holder .ff-el-input--content:hover,
.fluentform .ff-uploader-btn:hover,
.fluentform .ff-el-file-upload button:hover,
.fluentform .ff_file_upload_holder button:hover {
    background: var(--beige) !important;
}

/* Wrapper-Abstände */
.fluentform .ff-el-group {
    margin-bottom: 20px;
}
.fluentform .ff-t-container {
    gap: 24px;
}

/* Erfolgsmeldung + Fehler bereits vorher gestylt (.ff-message-success) */
.fluentform .ff-el-is-error .ff-el-form-control {
    border-color: #e95129;
}
.fluentform .error {
    color: #e95129;
    font-size: 14px;
    margin-top: 4px;
    font-weight: 400;
}

/* File-Upload Buttons: der Button selbst ist ein span.ff_upload_btn */
.fluentform .ff_upload_btn,
.fluentform .ff_file_upload_holder .ff_upload_btn {
    background: #ebebeb !important;
    color: var(--schwarz) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 12px 48px !important;
    font-family: 'niveau-grotesk', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    cursor: pointer;
    display: inline-block !important;
    transition: background-color 0.2s ease;
    box-shadow: none !important;
}
.fluentform .ff_upload_btn:hover {
    background: var(--beige) !important;
}

/* --- Custom Dropdown fuer Bricks Query Filter Selects ---
   Wird per JS aus dem nativen <select class="brxe-filter-select"> aufgebaut.
   Natives Element bleibt fuer die Bricks-Filter-Bindung im DOM, wird aber
   visuell komplett versteckt. */
.commu-select {
    position: relative;
    display: block;
    width: 50%;
    height: 100%;
    font-family: 'niveau-grotesk', 'Helvetica Neue', Arial, sans-serif;
}
.commu-select > select.brxe-filter-select {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    clip: rect(0 0 0 0);
    overflow: hidden;
}
.commu-select__btn {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--schwarz);
    color: #ebebeb;
    border: 0;
    border-radius: 0;
    padding: 18px 32px;
    font-family: inherit;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.4;
    cursor: pointer;
    text-align: left;
    box-shadow: none;
    transition: background-color .15s ease;
}
.commu-select__btn:hover {
    background: #000000;
}
.commu-select__btn:focus-visible {
    outline: 2px solid var(--beige);
    outline-offset: 0;
}
.commu-select__label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.commu-select__chevron {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    transition: transform .2s ease;
}
.commu-select__chevron svg { width: 100%; height: 100%; }
.commu-select.is-open .commu-select__chevron {
    transform: rotate(180deg);
}
.commu-select__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #ffffff;
    border: 0;
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
    z-index: 30;
    max-height: 60vh;
    overflow-y: auto;
}
.commu-select__option {
    padding: 14px 32px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 300;
    font-size: 20px;
    color: var(--schwarz);
    outline: none;
}
.commu-select__option:hover,
.commu-select__option:focus {
    background: #ebebeb;
}
.commu-select__option.is-selected {
    background: var(--beige);
    font-weight: 500;
}

/* Mobile: Liste ueber die volle Breite der Filter-Zeile, damit lange
   Bereichs-Namen (z.B. "Bewegtbild und Fotografie") nicht mehr abgeschnitten
   werden. Wrap/Button bleiben bei 50% (Layout neben Suchen unveraendert). */
@media (max-width: 767px) {
    .commu-select__list {
        left: -100%;
        right: 0;
        width: 200%;
    }
}

/* Lehrstellen-Button ausgegraut, wenn data-vergeben=true (Klasse .vergeben per JS). */
.lehrstellenbutton.vergeben,
.lehrstellenbutton[data-vergeben='true'] {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
    background: #ebebeb;
    color: var(--schwarz);
    filter: grayscale(1);
}
.lehrstellenbutton.vergeben:hover,
.lehrstellenbutton[data-vergeben='true']:hover {
    background: #ebebeb;
}

/* -------------------------------------------------------------
 * Header-Navigation Farbe je nach Seite
 * Startseite (body.home): Nav + Submenu weiss (Header liegt ueber dunklem Hero)
 * Alle anderen Seiten:    Nav + Submenu schwarz
 * ------------------------------------------------------------- */
body.home #brx-header .brxe-nav-menu,
body.home #brx-header .brxe-nav-menu a,
body.home #brx-header .brxe-nav-menu li,
body.home #brx-header .brxe-nav-menu .sub-menu a,
body.home #brx-header .brxe-nav-nested,
body.home #brx-header .brxe-nav-nested a,
body.home #brx-header .brxe-nav-nested li {
    color: #ffffff;
}

body:not(.home) #brx-header .brxe-nav-menu,
body:not(.home) #brx-header .brxe-nav-menu a,
body:not(.home) #brx-header .brxe-nav-menu li,
body:not(.home) #brx-header .brxe-nav-menu .sub-menu a,
body:not(.home) #brx-header .brxe-nav-nested,
body:not(.home) #brx-header .brxe-nav-nested a,
body:not(.home) #brx-header .brxe-nav-nested li {
    color: #000000;
}

/* -------------------------------------------------------------
 * Team-Seite: Mitarbeitenden-Cards nur rendern wenn sichtbar.
 * Auf Mobile mit 68 Cards spart das massiv Initial-Layout und
 * -Paint. contain-intrinsic-size reserviert den Platz so, dass
 * die Scroll-Position stabil bleibt.
 * ------------------------------------------------------------- */
@media (max-width: 991px) {
    .brxe-lnedls.mitinfos {
        content-visibility: auto;
        contain-intrinsic-size: auto 570px;
    }
}