/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* Opt-in the whole page to animating to/from intrinsic sizing keywords */
:root {
    /*interpolate-size: allow-keywords;*/ /* 👈 */
}

#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
  color: transparent ;
  background: url('https://socialretsadvokaterne.dk/wp-content/uploads/2020/04/logo1.png') no-repeat scroll 0 0 / 100% auto;
  
}
body .login h1 a {
  background-image: url('/wp-content/uploads/2020/04/logo1.png');
}
body.login div#login form#loginform p.submit input#wp-submit{
    background:green!important;
}

/*Togglecontainers*/
.toggle-container {
    position: relative;
    height:auto;
    max-height: 150px; /* 20% synlig del */
    overflow: hidden;
    
   /*Det her giver en fadeout effect i bunden*/
    position: relative;
    -webkit-mask-image: linear-gradient(to top, transparent 0px, black 50px);
    mask-image: linear-gradient(to top, transparent 0px, black 50px);
    transition: max-height 1s ease-in-out, -webkit-mask-image 1s ease-in-out;
    -webkit-transition: max-height 1s ease-in-out, -webkit-mask-image 1s ease-in-out;
}
.toggle-container.expanded {
    max-height:500px;
    /*max-height:fit-content;*/
    max-height: calc-size(max-content, size); /* Udvider til fuld højde */
  
    -webkit-mask-image: none !important; /* or: linear-gradient(to top, black 0px, black 50px); */
    mask-image: none !important;
    transition: max-height 1s ease-in-out, -webkit-mask-image 1s ease-in-out;
    -webkit-transition: max-height 1s ease-in-out, -webkit-mask-image 1s ease-in-out;
  
  
}
.toggle-button {
    transition: all 0.4s ease;
    margin-top:0px;
}
.toggle-button.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: all 0.4s ease;
    height: 0px;
    margin-top: -20px;
}
.toggle-container.expanded::after {
    /* height: 0px;  Størrelsen af det gennemsigtige lag */
}
.toggle-button span {
    line-height: normal;
}
.toggle-container {
    box-sizing: border-box;
    transform: translateZ(0); /* tvinger hardware rendering */
}

@media all and (max-width:767px){
  .toggle-container {
    max-height:100px;
  }
  .toggle-container.expanded{
    overflow-y:auto;
  }
}

/* ==========================================================
   MODIFIER: .toggle-large
   Brug klassen "toggle-wrapper toggle-large" i Elementor
   ========================================================== */

/* Desktop: Ekstra højde til de store tekstsektioner */
.toggle-wrapper.toggle-large .toggle-container {
    max-height: 350px; /* Juster denne værdi efter behov */
}

/* Sørg for at den foldes helt ud, selvom teksten er meget lang */
.toggle-wrapper.toggle-large .toggle-container.expanded {
    max-height: 1500px; /* Højere fallback, da tekstsektioner ofte fylder mere end 500px */
    max-height: calc-size(max-content, size);
}

/* Mobil (Under 767px) - Tager højde for din eksisterende struktur */
@media all and (max-width: 767px) {
    .toggle-wrapper.toggle-large .toggle-container {
        max-height: 200px; /* Giver mere læseplads på mobilen end de normale 100px */
    }
}