/**
 * Erik Gutow 2.0 - MASTER DESIGN SYSTEM (FINAL ARCHITECTURE COMPLETE)
 * Architecture: Senior Frontend / UI/UX Lead
 * Theme: The In-Between (Berlin Post-Modern)
 * Logic: Strictly Variable-Based / 80% Charcoal & Earth / 15% Midnight / 5% Gold
 * Status: 15/15 Sections Complete
 */

/* ---------------------------------------------------------
   1. FONTS & IMPORTS
   --------------------------------------------------------- */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ---------------------------------------------------------
   2. GLOBAL DESIGN TOKENS (ROOT ONLY)
   --------------------------------------------------------- */
:root {
    /* --- Foundation: Charcoal & Earth (80%) --- */
    --bg-main: #141415; /* Roher, dunkler Beton / Charcoal */
    --bg-dark-depth: #0a0a0b; /* Der absolute Schatten */
    --bg-surface: rgba(30, 30, 32, 0.4); /* Staubiges Glas / Patina-Fläche */
    --bg-surface-hover: rgba(45, 45, 48, 0.6);
    
    /* --- Secondary: Midnight Blue & Silver (15%) --- */
    --gc-midnight: #162231;
    --gc-midnight-glow: rgba(22, 34, 49, 0.6); /* Kühles Dämmerlicht aus den Fenstern */
    --gc-silver: #b5bcc4;

    /* --- Highlight: Bronze & Gold - "Hopeium" (5%) --- */
    --gc-gold: #c6a66a;
    --gc-bronze: #9c7a52;
    --gc-hopeium-glow: rgba(198, 166, 106, 0.15); /* Zartes, warmes Glühen */

    /* --- Typography & Borders --- */
    --text-primary: #e8e6e3; /* Gebrochenes, warmes Weiß */
    --text-muted: rgba(232, 230, 227, 0.55);
    --text-dimmed: rgba(232, 230, 227, 0.35);
    --border-subtle: rgba(198, 166, 106, 0.1); /* Hauch von Gold in den Rändern */
    --border-bright: rgba(198, 166, 106, 0.3);

    /* --- Brand Mapping --- */
    --primary-color: var(--gc-gold);
    --primary-hover: var(--gc-bronze);
    --primary-glow: var(--gc-hopeium-glow);
    --accent-gradient: linear-gradient(135deg, var(--gc-gold) 0%, var(--gc-bronze) 100%);
    
    --font-main: 'Inter', sans-serif;

    /* --- Spacing & UI --- */
    --header-top-gap: 3.5rem; 
    --border-radius-pill: 50px;
    --border-radius-card: 16px; /* Bleibt weich als Kontrast zum Brutalismus */
    --section-spacing: 6rem;
    --section-spacing-mobile: 3rem;
}

/* ---------------------------------------------------------
   3. BASE LAYOUT & AMBIENT BACKGROUND
   --------------------------------------------------------- */
html { scroll-behavior: smooth; height: 100%; }

body {
    margin: 0;
    font-family: var(--font-main) !important;
    background-color: var(--bg-main);
    color: var(--text-muted);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    
    /* 
      Der "Patina" Background-Stack: 
      1. Layer: Repeatable Noise/Concrete Textur (musst du hochladen)
      2. Layer: Midnight Blue Schatten (15%)
      3. Layer: Warmes Gold/Hopeium Licht (5%)
      4. Layer: Charcoal Fundament (80%)
    */
    background-image: 
        url('/sites/erikgutow/files/images/patina-texture.png'), 
        radial-gradient(circle at 15% 30%, var(--gc-midnight-glow) 0%, transparent 55%),
        radial-gradient(circle at 85% 70%, var(--gc-hopeium-glow) 0%, transparent 40%),
        linear-gradient(180deg, var(--bg-main) 0%, var(--bg-dark-depth) 100%);
    
    background-blend-mode: overlay, normal, normal, normal; /* Mischt die Patina in die Farben */
    background-attachment: fixed;
    background-size: repeat, cover, cover, cover; /* Die Textur kachelt, der Rest füllt */
}

.dialog-off-canvas-main-canvas {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.layout-container {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

main#content {
    margin-top: calc(var(--header-top-gap) + 4rem); 
}

.section {
    padding-top: var(--section-spacing-mobile) !important;
    padding-bottom: var(--section-spacing-mobile) !important;
    position: relative;
    width: 100%;
}

@media (min-width: 992px) {
    .section {
        padding-top: var(--section-spacing) !important;
        padding-bottom: var(--section-spacing) !important;
    }
}

.full-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
}

/* ---------------------------------------------------------
   4. TYPOGRAPHY
   --------------------------------------------------------- */
h1, h2, h3, h4, .h1, .h2, .h3 {
    font-family: var(--font-main) !important;
    color: var(--text-primary);
    font-weight: 300 !important; /* Sehr filigran! */
    letter-spacing: -0.04em;
    margin-bottom: 2rem;
}

.massive-headline {
    font-size: clamp(3.2rem, 9vw, 6.5rem);
    line-height: 1.15;
}

.text-gradient {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block; 
    filter: drop-shadow(0 0 15px var(--gc-hopeium-glow)); /* Zartes Gold-Glühen */
}

a { color: var(--primary-color); transition: 0.3s ease; }
a:hover { color: var(--text-primary); }

.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--text-primary) !important; }
.text-dimmed { color: var(--text-dimmed) !important; }

/* ---------------------------------------------------------
   5. HEADER & NAVIGATION (Centered Pill)
   --------------------------------------------------------- */
#navbar-main {
       position: absolute !important; 
       top: var(--header-top-gap) !important;
       left: 50% !important;
       transform: translateX(-50%) !important; 
       z-index: 1040;
       
       /* Dunkle Glas-Optik mit Gold-Hauch */
       background-color: rgba(20, 20, 21, 0.6) !important;
       backdrop-filter: blur(25px);
       -webkit-backdrop-filter: blur(25px);
       border: 1px solid var(--border-subtle) !important;
       border-radius: var(--border-radius-pill) !important;
       padding: 0.7rem 1.8rem !important;
       
       width: max-content !important; 
       max-width: 90vw; 
       box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}

.logo-container {
    background-color: var(--bg-dark-depth);
    border: 1px solid var(--border-bright);
    border-radius: 50%;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-shadow: 0 0 20px var(--primary-glow);
    margin-right: 24px;
}

.logo-container img.logo {
    width: auto;
    height: 100%;
    object-fit: contain;
    max-width: 100% !important;
}

.nav-link {
    color: var(--text-muted) !important;
    font-weight: 400 !important;
    font-size: 0.95rem;
    padding: 0.5rem 1.4rem !important;
    letter-spacing: 0.05em; /* Etwas mehr Luft für die feine Typo */
}

.nav-link:hover, .nav-link.active {
    color: var(--text-primary) !important;
}

.navbar {
    pointer-events: auto;
    background-color: rgba(20, 20, 21, 0.6) !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--border-radius-pill) !important;
    padding: 0.7rem 1.8rem !important;
    width: max-content !important; 
    margin: 0 auto;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}

/* ---------------------------------------------------------
   6. CARDS & BENTO GRID
   --------------------------------------------------------- */
.card {
       background-color: var(--bg-surface);
       backdrop-filter: blur(20px);
       border: 1px solid var(--border-subtle) !important;
       border-radius: var(--border-radius-card);
       color: var(--text-muted) !important; 
       transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   .card:hover {
       border-color: var(--border-bright) !important;
       transform: translateY(-10px);
       background-color: var(--bg-surface-hover);
       box-shadow: 0 40px 80px rgba(0,0,0,0.8);
   }

/* ---------------------------------------------------------
   7. FOOTER (Optimized)
   --------------------------------------------------------- */
footer, .site-footer {
    background-color: transparent !important;
    padding: 8rem 0 4rem !important;
    margin-top: auto;
}

.site-footer .block, 
.site-footer .region {
    border: none !important;
    background: transparent !important;
}

footer .h6, footer h5 {
    color: var(--text-primary) !important; 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    margin-bottom: 2rem;
}

footer p, footer li {
    color: var(--text-muted) !important;
    font-size: 0.95rem;
}

.social-links ul {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0 !important;
    margin: 1rem 0 0 0 !important;
    list-style: none !important;
}

.social-links li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.social-links a {
    width: 44px; 
    height: 44px;
    display: flex !important; 
    align-items: center; 
    justify-content: center;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 50% !important;
    color: var(--text-primary) !important;
    transition: all 0.4s ease !important;
    text-decoration: none !important;
}

.social-links a:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--bg-main) !important; /* Dunkles Icon auf Gold */
    transform: translateY(-5px);
    box-shadow: 0 10px 20px var(--primary-glow) !important;
}

/* ---------------------------------------------------------
   8. BUTTONS (Refined Hover)
   --------------------------------------------------------- */
.btn {
    border-radius: var(--border-radius-pill);
    padding: 1.1rem 2.8rem;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 0.95rem;
}

.btn-primary {
    background: var(--accent-gradient) !important;
    border: none !important;
    color: var(--bg-main) !important; /* Dunkle Schrift auf Gold */
}

.btn-primary:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 15px 30px var(--primary-glow);
    background: var(--gc-bronze) !important; 
}

.btn-outline-primary {
    border: 1px solid var(--border-bright);
    color: var(--text-primary);
    background: transparent;
}

.btn-outline-primary:hover {
    border-color: var(--primary-color);
    background: var(--primary-glow);
    color: var(--primary-color);
}

/* ---------------------------------------------------------
   9. DRUPAL SPECIFIC OVERRIDES
   --------------------------------------------------------- */
.breadcrumb { background: transparent; padding: 2rem 0; margin-bottom: 2rem; }
.breadcrumb-item a { color: var(--text-dimmed); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--text-primary); }
.breadcrumb-item.active { color: var(--text-muted); }

.region-content, .region-footer, .block {
    background: transparent !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   10. PAGE SPECIFIC OVERRIDES
   --------------------------------------------------------- */
body.page-node-1199 { --primary-color: #e2626b !important; }
body.page-node-1099 { --primary-color: #cf1010 !important; }
body.page-node-4 { --primary-color: var(--gc-silver) !important; }
body.page-node-999 { --primary-color: var(--gc-gold) !important; }
body.page-node-27999 { --primary-color: var(--gc-midnight) !important; }

/* ---------------------------------------------------------
   11. DRUPAL MESSAGES & HIGHLIGHTED REGION
   --------------------------------------------------------- */
.highlighted .section, 
.region-highlighted .section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* ---------------------------------------------------------
   12. MEGA MENU STYLES (GC 2.0 Refined)
   --------------------------------------------------------- */
@media (min-width: 992px) {
    /* Positionierung des Dropdowns */
    .nav-item.dropdown {
        position: static; /* WICHTIG: Erlaubt dem Dropdown volle Breite */
    }

    .dropdown-menu.mega-menu {
        width: 700px;
        max-width: 90vw; 
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) translateY(10px); 
        margin-top: 0;
        border-radius: var(--border-radius-card); /* FIX: An GC 2.0 angepasst */
        background-color: rgba(20, 20, 21, 0.95) !important; /* FIX: Neues Charcoal-Glas */
        backdrop-filter: blur(15px);
        border: 1px solid var(--border-subtle);
        border-top: 2px solid var(--primary-color);
        padding: 2rem;
        display: block; 
        visibility: hidden;
        opacity: 0;
        transition: all 0.3s ease;
        box-shadow: 0 25px 60px rgba(0,0,0,0.8);
    }

    .full-dropdown-menu.full-mega-menu {
        width: 100%; left: 0; right: 0; margin-top: 0;
        border-radius: 0 0 var(--border-radius-card) var(--border-radius-card);
        background-color: rgba(20, 20, 21, 0.95) !important; 
        backdrop-filter: blur(15px);
        border-top: 2px solid var(--primary-color);
        padding: 3rem 2rem;
        opacity: 0; transform: translateY(10px);
        transition: all 0.3s ease;
        display: block; visibility: hidden;
    }

    .full-nav-item.dropdown:hover .full-dropdown-menu.mega-menu,
    .nav-item.dropdown:hover .dropdown-menu.mega-menu {
        visibility: visible; opacity: 1;
        transform: translateX(-50%) translateY(0); 
    }

    .dropdown-menu.mega-menu .row { margin-right: -10px; margin-left: -10px; }
    .dropdown-menu.mega-menu .mega-col {
        padding: 0 10px;
        border-right: 1px solid var(--border-subtle);
    }

    /* --- SPECIAL FIX: SIMPLE DROPDOWN --- */
    .nav-item.simple-dropdown { position: relative; }
    
    .nav-item.simple-dropdown .dropdown-menu.mega-menu {
        width: auto; min-width: 200px;
        left: auto; right: 0; 
        padding: 1rem;
        border-top: 1px solid var(--primary-color);
        display: block; visibility: hidden;
    }
    .nav-item.simple-dropdown:hover .dropdown-menu.mega-menu { visibility: visible; }

    .nav-item.simple-dropdown .container-fluid,
    .nav-item.simple-dropdown .row {
        display: block !important; width: 100%; margin: 0; padding: 0;
    }
    .nav-item.simple-dropdown .mega-col {
        width: 100%; max-width: 100%; border-right: none;
        margin-bottom: 0.5rem; padding: 0;
    }

    .nav-item.simple-dropdown h6 {
        margin-bottom: 0; border-bottom: none;
        padding: 0.5rem 1rem; font-size: 0.95rem;
        color: var(--text-primary); /* FIX: Tote Variable ersetzt */
        cursor: pointer;
        transition: 0.2s; border-radius: 8px;
    }
    .nav-item.simple-dropdown h6:hover {
        background-color: var(--bg-surface); color: var(--primary-color);
    }
}

/* Link Styling im Mega Menu */
.dropdown-menu.mega-menu h6 {
    font-size: 0.85rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 10px;
}

.dropdown-item.hover-white { background: transparent !important; transition: transform 0.2s ease, color 0.2s ease; }
.dropdown-item.hover-white:hover {
    color: var(--text-primary) !important;
    transform: translateX(5px);
    background: transparent !important;
}

/* ---------------------------------------------------------
   13. MOBILE MENU OVERRIDES
   --------------------------------------------------------- */
@media (max-width: 991px) {
    .dropdown-menu.mega-menu {
        position: static; float: none; width: 100%;
        background: transparent !important; border: none; box-shadow: none; padding-left: 1rem;
    }
    .mega-col { margin-bottom: 2rem; border: none; }
    .mega-col h6 { color: var(--text-primary) !important; font-size: 1rem; margin-top: 1rem; }
    
    .navbar-collapse {
        background-color: var(--bg-main); /* FIX: Tote Variable ersetzt */
        padding: 1rem;
        border-top: 1px solid var(--border-subtle);
        max-height: 80vh; overflow-y: auto; 
    }
}

/* ---------------------------------------------------------
   13. GC 2.0 HIGH-END FORM INTERFACE
   --------------------------------------------------------- */
.webform-submission-form {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--primary-color) !important;
    padding: 3rem !important;
    border-radius: var(--border-radius-card);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(15px);
}

.webform-submission-form .js-form-item,
.webform-submission-form .form-item {
    margin-bottom: 1.5rem;
}

.webform-submission-form label {
    color: var(--text-muted) !important;
    text-transform: none; 
    font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: 8px;
    display: block;
}

.webform-submission-form .form-control,
.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form select,
.webform-submission-form textarea {
    background-color: rgba(0,0,0,0.3) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important; 
    border-radius: 8px !important;
    padding: 12px 15px !important;
    transition: all 0.3s ease-in-out;
}

.webform-submission-form .form-control:focus,
.webform-submission-form input:focus,
.webform-submission-form textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-glow) !important; 
    background-color: rgba(0,0,0,0.5) !important;
    outline: none;
}

.webform-submission-form .form-submit {
    background: var(--accent-gradient) !important;
    color: var(--bg-main) !important;
    font-weight: 600;
    border: none !important;
    border-radius: var(--border-radius-pill) !important;
    padding: 1rem 2.5rem !important;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.webform-submission-form .form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px var(--primary-glow);
    filter: brightness(1.1);
}

.webform-submission-form .form-type-checkbox { margin-top: 2rem; }
.webform-submission-form .form-type-checkbox label {
    font-weight: 400; color: var(--text-muted) !important;
    display: inline; padding-left: 10px;
}

/* ---------------------------------------------------------
   14. SECTION BACKGROUNDS & SOFT TRANSITIONS (PATINA UPDATE)
   --------------------------------------------------------- */
/* --- ABSTRACT PATINA FADES --- */
.bg-soft-fade {
    /* Ein feiner Gold/Charcoal Fade */
    background: linear-gradient(180deg, transparent 0%, rgba(198, 166, 106, 0.02) 25%, rgba(198, 166, 106, 0.02) 86%, transparent 100%);
    position: relative;
}

/* Umbenannt für bessere Zuordnung, behält aber die Struktur für dich */
.bg-texture-bottom {
    position: relative;
    z-index: 1; 
}

.bg-texture-bottom::after {
    content: "";
    position: absolute;
    bottom: -20vh; 
    left: 0; 
    width: 100%; 
    height: 80vh; 
    
    /* Overlay für die Tiefe mit Midnight & Charcoal */
    background-image: 
        linear-gradient(to bottom, rgba(20, 20, 21, 0.8), rgba(10, 10, 11, 0.4)),
        var(--wave-image, url('/sites/erikgutow/files/images/texture-background.png')); 
        
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1; 
    pointer-events: none;
    
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 60%, black 80%, transparent 100%);
    
    mix-blend-mode: screen;
    opacity: 0.6; 
}

/* --- DYNAMISCHE KLASSEN FÜR EXTRA TEXTUREN --- */
.bg-texture-2 { --wave-image: url('/sites/erikgutow/files/images/texture-background-2.png'); }
.bg-texture-3 { --wave-image: url('/sites/erikgutow/files/images/texture-background-3.png'); }

/* ---------------------------------------------------------
   15. MOBILE RESPONSIVENESS & CARD-TRANSFORMATION
   --------------------------------------------------------- */
@media (max-width: 767px) {
    body, html, .layout-container {
        overflow-x: hidden;
        width: 100%;
    }

    .section:not(:first-of-type):not(.bg-soft-fade) > .container > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .section:not(:first-of-type):not(.bg-soft-fade) > .container > .row > div {
        background-color: var(--bg-surface) !important;
        backdrop-filter: blur(10px);
        border: 1px solid var(--border-subtle) !important;
        border-radius: var(--border-radius-card);
        padding: 2.5rem 1.5rem !important;
        margin-bottom: 1.5rem !important; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        width: 100% !important; 
    }

    .section:not(:first-of-type):not(.bg-soft-fade) > .container > .row > div .card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .section > .container > .row > div:has(img:not(.logo)) {
        display: none !important;
    }

    .navbar-toggler {
        border-color: rgba(198, 166, 106, 0.2) !important; /* Gold-Hauch fürs Icon */
    }
    .navbar-toggler-icon {
        filter: brightness(0) invert(1) sepia(1) hue-rotate(10deg) saturate(3) !important; /* Passt das Icon leicht in Richtung Gold an */
    }

    .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .massive-headline {
        font-size: clamp(2.2rem, 10vw, 3rem) !important;
        line-height: 1.1;
        word-wrap: break-word;
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }

    h1, h2, h3, .h1, .h2, .h3, .display-1, .display-2, .display-4, .display-5 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .card-body {
        padding: 1.5rem !important;
    }
    
    .section {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .full-section {
        padding-top: 8rem !important;
        padding-bottom: 4rem !important;
        min-height: auto !important;
    }

    footer .border-top, .site-footer .border-top, .region-footer .border-top {
        border-top: none !important;
        padding-top: 1rem !important;
    }
    
    footer .row, .site-footer .row, .region-footer .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    footer .row > div:empty, 
    .site-footer .row > div:empty, 
    .region-footer .row > div:empty,
    footer .row > div:not(:has(*)), 
    .site-footer .row > div:not(:has(*)), 
    .region-footer .row > div:not(:has(*)) {
        display: none !important;
        padding: 0 !important;
        border: none !important;
        margin: 0 !important;
    }

    footer .row > div:has(*):not(:has(.block-cookies-ui-block)), 
    .site-footer .row > div:has(*):not(:has(.block-cookies-ui-block)), 
    .region-footer .row > div:has(*):not(:has(.block-cookies-ui-block)) {
        background-color: var(--bg-surface) !important;
        backdrop-filter: blur(10px);
        border: 1px solid var(--border-subtle) !important;
        border-radius: var(--border-radius-card);
        padding: 2.5rem 1.5rem !important;
        margin-bottom: 1.5rem !important; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        width: 100% !important;
    }

    footer .row > div .card, 
    .site-footer .row > div .card, 
    .region-footer .row > div .card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}