/* =========================================================
   LANGOMAT / CASSIOPEIA CUSTOM STYLE
========================================================= */


/* =========================================================
   GLOBAL SETTINGS
========================================================= */

:root {

    /* =====================================================
       BACKGROUND
    ===================================================== */

    --bg-image-size: 2200px;
    --bg-color: #000000;


    /* =====================================================
       LOGO
    ===================================================== */

    --logo-size: 80px;


    /* =====================================================
       CONTENT BOXES
    ===================================================== */

    --content-bg: rgba(255, 255, 255, 0.88);
    --content-radius: 14px;
    --content-padding: 30px;
    --content-shadow: 0 0 18px rgba(0, 0, 0, 0.25);


    /* =====================================================
       FOOTER GENERAL
    ===================================================== */



    --footer-padding-y: 5px;
    --footer-padding-x: 25px;
    --footer-gap: 20px;

    --footer-text-color: #ffffff;
    --footer-hover-color: #4fc3f7;


    /* =====================================================
       FOOTER LINKS
    ===================================================== */

    --footer-link-font-size: 20px;
    --footer-link-font-weight: 600;
    --footer-link-gap: 16px;


    /* =====================================================
       SOCIAL ICONS
    ===================================================== */

    --footer-icon-size: 30px;
    --footer-icon-gap: 22px;


    /* =====================================================
       STORE BUTTONS
    ===================================================== */

    --store-gap: 16px;

    /* EINZELN steuerbar */
    --appstore-height: 45px;
    --playstore-height: 45px;

    --store-radius: 0px;


    /* =====================================================
       MOBILE
    ===================================================== */

    --mobile-appstore-height: 46px;
    --mobile-playstore-height: 50px;

    --mobile-link-font-size: 17px;
}


/* =========================================================
   BODY
========================================================= */

body {

    background-image:
        url('/plugins/system/langomat/assets/langomat_ocean.jpg');

    background-size: var(--bg-image-size);

    background-position: left bottom;

    background-repeat: no-repeat;

    background-color: var(--bg-color) !important;

    /* Optional */
    /* background-attachment: fixed; */
}


/* =========================================================
   LOGO
========================================================= */

.navbar-brand .brand-logo img {

    width: var(--logo-size) !important;

    height: var(--logo-size) !important;
}


/* =========================================================
   CONTENT / FORM BOXES
========================================================= */

.com-users-registration__form,
.com-users-reset__form,
.com-users-remind__form,
.com-users-login__form,
[class^="com-users-profile__"],
.com-content-article,
[class^="com-content-article__"] {

    background-color: var(--content-bg);

    box-shadow: var(--content-shadow);

    border-radius: var(--content-radius);

    padding: var(--content-padding);
}


/* =========================================================
   HIDE ARTICLE META
========================================================= */

.article-info,
.com-content-article__info,
dl.article-info {

    display: none !important;
}


/* =========================================================
   FOOTER  (revisionssicher)
   -----------------------------------------------------------
   Dieses Styling zielt ausschliesslich auf die Standard-Joomla-
   Footer-Struktur (.container-footer > .grid-child + Modul-Klassen).
   Es werden KEINE Klassen im Template (index.php) benoetigt, daher
   ueberlebt es Joomla-/Cassiopeia-Updates. Das Flexbox-Layout passt
   sich automatisch an die Modulanzahl an (ein- und ausgeloggt).
========================================================= */

.container-footer {
    margin-top: auto;
    padding: 1.35rem 0;
    color: rgba(255, 255, 255, 0.88);
    background: #001b4c;
    box-shadow: 0 -8px 28px rgba(0, 27, 76, 0.2);
}

.container-footer .grid-child {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem clamp(0.9rem, 1.8vw, 2rem);
    width: min(100% - 2rem, 82.5rem);
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* Jedes Footer-Modul richtet sich an derselben oberen Linie aus. */
.container-footer .grid-child > * {
    align-self: flex-start;
    margin: 0 !important;
    padding: 0 !important;
}

/* Copyright rechts, ohne Markup im Template (revisionssicher). */
.container-footer .grid-child::after {
    content: "\00A9 LangOMat \00B7 powered by NATAVO solutions!";
    align-self: center;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* --- Abmelden-Button (mod-login-logout) und Subscription-Menue --- */
.container-footer .mod-login-logout .btn,
.container-footer .mod-menu:has(.item-124) a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.35rem !important;
    min-height: 2.35rem;
    padding: 0.48rem 0.7rem;
    margin: 0 !important;
    box-sizing: border-box;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
}

.container-footer .mod-login-logout .btn:hover,
.container-footer .mod-login-logout .btn:focus,
.container-footer .mod-menu:has(.item-124) a:hover,
.container-footer .mod-menu:has(.item-124) a:focus-visible {
    color: #fff !important;
    background: #0969b9;
    border-color: #4fc3f7;
    text-decoration: none;
}

/* Subscription steckt in <ul class="nav"> > <li class="nav-item">.
   Diese Wrapper bringen eigenes Padding/Zeilenhoehe mit; hier auf 0
   gesetzt und als Flexbox top-ausgerichtet (keine Pixel-Verschiebung). */
.container-footer .mod-menu:has(.item-124),
.container-footer .mod-menu:has(.item-124) .nav-item {
    display: flex;
    align-items: flex-start;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
    list-style: none;
}

/* Das vorhandene Custom-Modul enthaelt PHP-Beispielcode, der in
   mod_custom nicht ausgefuehrt wird. Die fehlerhaften Klartextzeilen
   werden verborgen; die realen Social-Media-Links bleiben erhalten. */
.container-footer .footer1,
.container-footer .footer2 {
    display: none;
}

.container-footer .mod-footer {
    width: auto;
    height: auto;
    padding: 0 !important;
    color: inherit;
}

/* Sprachumschaltung */
.container-footer .mod-languages .btn {
    height: 2.35rem !important;
    min-width: 5.25rem;
    min-height: 2.35rem;
    padding: 0.48rem 0.7rem;
    margin: 0 !important;
    box-sizing: border-box;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    font-size: 0.8125rem;
    line-height: 1;
}

.container-footer .mod-languages .btn:hover,
.container-footer .mod-languages .btn:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.container-footer .mod-languages img {
    margin-right: 0.3rem;
}

/* Vorhandene Social-Media-Verknuepfungen */
.container-footer .footer-icons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    margin: 0 !important;
}

.container-footer .footer-icons a {
    display: inline-grid;
    width: 2.35rem;
    height: 2.35rem;
    margin: 0 !important;
    box-sizing: border-box;
    place-items: center;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    font-size: 1.05rem;
    text-decoration: none;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.container-footer .footer-icons a:hover,
.container-footer .footer-icons a:focus-visible {
    color: #fff !important;
    background: #0969b9;
    border-color: #4fc3f7;
    outline: none;
    transform: translateY(-2px);
}

/* Impressum, AGB und Datenschutz: bestehende Joomla-Menuelinks.
   Das Rechtliche-Menue (ohne Subscription-Eintrag) wird als
   gestapelte Linkliste dargestellt. */
.container-footer .mod-menu:not(:has(.item-124)) {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.container-footer .mod-menu:not(:has(.item-124)) a {
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 0.8125rem;
    line-height: 1.4;
    text-decoration: none;
}

.container-footer .mod-menu:not(:has(.item-124)) a:hover,
.container-footer .mod-menu:not(:has(.item-124)) a:focus-visible {
    color: #fff !important;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Bestehende App-Store-Verknuepfungen */
.container-footer .footer-stores {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: flex-start !important;
    justify-content: flex-start;
    gap: 0.65rem !important;
}

.container-footer .footer-stores a {
    display: inline-block;
}

.container-footer .store-badge {
    display: block;
    width: auto !important;
    height: 2.45rem !important;
    border-radius: 5px;
    transition: transform 160ms ease, filter 160ms ease;
}

.container-footer .store-badge:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

@media (max-width: 640px) {
    .container-footer {
        padding: 1.5rem 0;
    }

    .container-footer .grid-child {
        gap: 1.25rem;
    }

    .container-footer .grid-child::after {
        margin-left: 0;
    }
}