/*
 Theme Name:   Beckerturm Immobilien
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne // Cal
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

:root {
	--becker-shadow: 0px 0px 20px rgba(0,0,0,0.5);
	--becker-shadow-2: 0px 0px 15px rgba(0,0,0,0.75);
	--becker-shadow-heavy: 0px 0px 20px rgba(0,0,0,0.75);
	--becker-shadow-heavy-2: 0px 0px 15px rgba(0,0,0,1.0);
	--becker-lesser-width: 1000px;
	--becker-more-width: 1166px;
	--gp-slideout-width: 400px !important;
	scroll-behavior: smooth;
}

html {
	overflow-x: hidden;
	background: #FFFFFF;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(65, 106, 161, 1) 50%, rgba(65, 106, 161, 1) 100%);
	min-height: 100%;
	background-attachment: fixed;
}

/**********************************/
/******* NAVIGATION **************/
/********************************/


#mobile-header .inside-navigation {
	flex-wrap: nowrap;
	justify-content: space-around;
}

#mobile-header .inside-navigation .site-logo {
	min-width: 200px;
}

#masthead {
	box-shadow: var(--becker-shadow);
}

.site-branding-container {
	flex-direction: column;
}

.slideout-navigation button.slideout-exit {
	font-size: 2rem;
	text-align: right !important;
	padding-top: 2rem !important;
	padding-right: 2rem !important;
}
button.menu-toggle span.icon-menu-bars {
	font-size: 2rem;
	padding-right: 2rem;
}

.main-navigation .main-nav ul li.menu-item-has-children > a {
	padding-right: 15px;
}

.main-navigation li * {
	transition: all 200ms ease-in-out;
}

.main-navigation .main-nav ul li > a:hover,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a {
	padding-left: 2rem;
	padding-right: 2rem;
}

.menu-item-has-children span.dropdown-menu-toggle {
	display: none;
}

.main-navigation ul ul.sub-menu {
	background-color: rgba(255,255,255,0.8);
	backdrop-filter: blur(10px);
}

.main-navigation ul ul.sub-menu li {
	border-bottom: var(--white) 1px solid;
}
@media (min-width: 1491px) {
	
}

@media (max-width: 1490px) {
	.main-navigation .main-nav ul li a {
		line-height: 80px;
	}
	.site-header .header-image {
		width:200px;
	}
	.site-logo {
		margin-bottom: 1rem;
		margin-top: 1rem;
	}
}

#generate-slideout-menu .slideout-menu li > .sub-menu {
	position: relative;
	top: 0;
	left: auto;
	right: auto;
	width: 100%;
	display: block !important;
	height: auto;
	opacity: 1;
	visibility: visible;
	overflow: visible;
	pointer-events: auto;
}

#generate-slideout-menu .dropdown-menu-toggle {
	display: none;
}


#generate-slideout-menu.main-navigation  ul ul.sub-menu {
	background-color: none;
	backdrop-filter: none;
}

#generate-slideout-menu.main-navigation  ul ul.sub-menu li {
	border-bottom: 0 !important;
	line-height: 1;
}

#generate-slideout-menu.main-navigation  ul ul.sub-menu li a {
	padding-left: 2rem;
}

#generate-slideout-menu.main-navigation  ul ul.sub-menu li a:hover {
	padding-left: 3rem;
}

/**********************************/
/******* BODIES ******************/
/********************************/

#main {
	margin-top: 0px;
	margin-bottom: 0;
}

.separate-containers div.inside-article {
	padding-top: 0px;
}

div.wpc-custom-selected-terms {
	display: none;
}

div.entry-content > .wp-block-paragraph,
div.entry-content > .wp-block-heading,
div.entry-content > .wp-block-list{
	max-width: var(--becker-lesser-width);
	margin-left: auto;
	margin-right: auto;
}

/**********************************/
/******* CONTENT *****************/
/********************************/

h1.entry-title {
	margin-top: 3rem;
	color: var(--accent);
	max-width: var(--becker-lesser-width);
	margin-left: auto;
	margin-right: auto;
}

.braun-hero {
	margin-bottom: 3rem;
	overflow-clip-margin: 10px;
}

.braun-hero.leistungen {
	min-height: 50vh;
}

.braun-hero::after {
 	content: '';
 	position: absolute;
 	bottom: -9px;
  	left: 50%;
	width: 50%;
	border-bottom: 10px solid var(--accent);
}

.braun-hero .wp-block-cover__inner-container {
	max-width: 1400px;
	padding: 2rem;
}

@media screen and (max-width: 768px) {
	.braun-hero {
		min-height: 40vh !important;
	}
	.braun-hero.leistungen {
		min-height: 30vh !important;
	}
	.braun-hero .wp-block-cover__inner-container {
		padding: 0.5rem;
		padding-top: 4rem;
		padding-right: 1.5;
	}
}

.braun-hero .wp-block-cover__inner-container > * {
	max-width: 768px;
}

.braun-hero .wp-block-cover__inner-container p {
	color: var(--white) !important
}

.braun-hero .wp-block-cover__inner-container .wp-block-heading {
	color: var(--white) !important
}

.braun-hero .wp-block-cover__inner-container p strong {
	color: var(--white) !important;
	font-weight: 900;
}


/*breadcrumbs*/ 
nav.fbc.fbc-page {
	position: absolute;
	margin-top: -2rem;
	width: 75vw;
}
nav.fbc.fbc-page .fbc-items {
	padding: 0px;
	background: none;
}
nav.fbc.fbc-page .fa.fa-home {
	display: none;
}
/*************/ 



h2.wp-block-heading.has-text-align-center {
	color: var(--accent);
}

p.braun-anleser {
	color: var(--accent);
}

p.braun-anleser.has-text-align-center {
	color: var(--contrast);
	font-weight: 300;
}

nav + code + p + div.wp-block-group {
	margin-top: -3rem !important;
}

.braun-leistungen > .wp-block-group__inner-container {
	max-width: var(--becker-more-width);
	padding-top: 5rem;
}

.braun-leistungen .wp-block-group {
	position: relative;
	margin-bottom: 2rem;
}

.braun-leistungen .wp-block-group:hover .wp-block-group__inner-container > * {
	transform: scale(0.9);
	transition: all 100ms ease-in-out;
}


.braun-leistungen .wp-block-group:hover .wp-block-group__inner-container > * {
	transition: all 100ms ease-in-out;
}

.braun-leistungen .wp-block-column {
	padding: 0.5rem;
}

.braun-leistungen .wp-block-column > h2 {
	transform: scale(1.05);
}

.braun-leistungen .wp-block-group > .wp-block-group__inner-container {
	padding: 1.5rem;
	padding-bottom: 0.25rem;
}

.braun-leistungen .wp-block-group .wp-block-heading {
	margin-bottom: 0;
}


.braun-leistungen .wp-block-group .wp-block-paragraph {
	margin-bottom: 0;
	color: var(--accent);
	font-weight: normal;
}

.braun-leistungen figure.alignright {
	float: unset;
	text-align: right;
	display: inherit;
}

.braun-leistungen .wp-block-group::after {
 	content: '';
 	position: absolute;
 	bottom: -8px;
  	right: -9px;
	width: 50%;
	height: 80%;
	border-bottom: 10px solid var(--accent-grn);
	border-right: 10px solid var(--accent-grn);
}

.braun-halfwidth {
	max-width: var(--becker-lesser-width);
	margin-left: auto;
	margin-right: auto;
}

.wp-block-button__link {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background: transparent !important;
    color: var(--accent);
    border: none;
    border-radius: 0;

    transition: color 0.4s ease;
}

.wp-block-button__link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 7px;
    background: var(--accent);
    z-index: -1;

    transition: height 0.4s ease;
}

.wp-block-button__link:hover {
    background: transparent !important;
    color: #fff;
    text-decoration: none;
}

.wp-block-button__link:hover::before {
    height: 100%;
}

.wp-block-paragraph strong {
	color: var(--accent);
}

.wp-block-column.is-vertically-aligned-stretch {
	display:  flex;
	flex-direction: column;
}

.wp-block-column.is-vertically-aligned-stretch > .wp-block-buttons:last-child {
	margin-top: auto;
}

.braun--meldung {
	max-width: calc(80px + var(--becker-more-width));
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 4rem;
	margin-top: 6rem !important;
	min-height: 420px;
}
.braun--meldung .wp-block-group__inner-container {
	padding-bottom: 40px;
}
.braun--meldung .wp-block-image figure {
	width: 50%;
	margin-top: 0;
}
.braun--meldung .wp-block-image figure.alignleft {
	transform: translate(-3rem, -3rem) scale(1.2);
}
.braun--meldung .wp-block-image figure.alignright {
	transform: translate(3rem, -3rem) scale(1.2);
}
.braun--meldung.has-accent-grn-background-color .wp-block-image figure.alignleft::after {
	content: '';
 	position: absolute;
 	top: -9px;
  	left: -9px;
	width: 50%;
	height: 50%;
	border-top: 10px solid var(--accent-grn);
	border-left: 10px solid var(--accent-grn);
}
.braun--meldung.has-accent-lght-background-color .wp-block-image figure.alignleft::after {
	content: '';
 	position: absolute;
 	top: -9px;
  	left: -9px;
	width: 50%;
	height: 50%;
	border-top: 10px solid var(--accent-lght);
	border-left: 10px solid var(--accent-lght);
}
.braun--meldung.has-accent-grn-background-color .wp-block-image figure.alignright::after {
	content: '';
 	position: absolute;
 	top: -9px;
  	right: -9px;
	width: 50%;
	height: 50%;
	border-top: 10px solid var(--accent-grn);
	border-right: 10px solid var(--accent-grn);
}
.braun--meldung.has-accent-lght-background-color .wp-block-image figure.alignright::after {
	content: '';
 	position: absolute;
 	top: -9px;
  	right: -9px;
	width: 50%;
	height: 50%;
	border-top: 10px solid var(--accent-lght);
	border-right: 10px solid var(--accent-lght);
}
@media screen and (max-width: 781px) {
	.braun--meldung .wp-block-image figure {
		float: none;
		width: 100%;
		margin-bottom: 0;
	}
}

.braun-ribbon:not(:last-child) {
	margin-bottom: 2rem;
}

body .entry-content > .wp-block-group.has-background + .braun-ribbon {
	margin-top: 0px;
}

body .entry-content > div:not(:first-child).braun-ribbon {
	margin-top: 3rem;
}

.braun-ribbon .wp-block-heading,
.braun-hero .wp-block-heading {
	text-shadow: var(--becker-shadow);
}

.braun-hero.shadowy .wp-block-heading {
	text-shadow: var(--becker-shadow-heavy);
}

.braun-ribbon .wp-block-paragraph,
.braun-hero .wp-block-paragraph {
	font-weight: 500 !important;
	text-shadow: var(--becker-shadow-2);
}

.braun-hero.shadowy .wp-block-paragraph {
	text-shadow: var(--becker-shadow-heavy-2);
}

.braun-ribbon .wp-block-cover__inner-container {
	max-width: var(--becker-more-width);
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.inside-article:has(.entry-content .braun-ribbon:last-child) {
	padding-bottom: 0px;
}

.braun-ribbon .wp-block-button__link {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background: transparent !important;
    color: var(--white);
    border: none;
    border-radius: 0;

    transition: color 0.4s ease;
}

.braun-ribbon .wp-block-paragraph {
	font-weight: normal;
} 

.braun-ribbon strong {
	color: var(--accent-grn)
} 

.braun-ribbon .wp-block-button__link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 7px;
    background: var(--accent-grn);
    z-index: -1;

    transition: height 0.4s ease;
}

.braun-ribbon .wp-block-button__link:hover {
    background: transparent !important;
    color: #fff;
    text-decoration: none;
}

.braun-ribbon .wp-block-button__link:hover::before {
    height: 100%;
}

.braun-fullwidth {
	width: 100% !important;
	max-width: 100% !important;
}

.no-sidebar .entry-content .braun-erfolge--image figure.alignfull {
	max-width: 100%;
	margin: 0px;
}

.wp-block-table td {
	background-color: var(--accent);
	border : var(--base-3) 1px solid;
	color: var(--base-3);
	font-weight: normal;
}

.wp-block-table td:first-child {
	white-space: nowrap;
}

@media screen and (max-width: 781px) {
	.braun-erfolge--image {
		order: -1;
	}
}

.entry-content hr {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	border-top: var(--accent-grn) 9px solid;
	margin-top: 3rem;
	margin-bottom: 3rem;
	
}

.braun-hero.leistungen ~ .wp-block-buttons {
	margin-top: 3rem;
	margin-bottom: 1rem;
}

.braun-hero.leistungen ~ .wp-block-buttons .wp-block-button__link {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background: transparent !important;
    color: var(--accent);
    border: none;
    border-radius: 0;

    transition: color 0.4s ease;
	font-size: 0.9rem;
}

.braun-hero.leistungen ~ .wp-block-buttons .wp-block-button__link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 7px;
    background: var(--accent-grn);
    z-index: -1;

    transition: height 0.4s ease;
}

.braun-hero.leistungen ~ .wp-block-buttons .wp-block-button__link:hover {
    background: transparent !important;
    color: #fff;
    text-decoration: none;
}

.braun-hero.leistungen ~ .wp-block-buttons .wp-block-button__link:hover::before {
    height: 100%;
}



@media (max-width: 781px) {

  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    row-gap: 0 !important;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile)
  > .wp-block-column > p:last-child {
    margin-bottom: 0 !important;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile)
  > .wp-block-column > p:first-child {
    margin-top: 0 !important;
  }

}


/**********************************/
/******* POP-UP ******************/
/********************************/
.pum-overlay {
	backdrop-filter: blur(10px);
}

.pum-content .wp-block-paragraph {
	font-size: 1rem;
	font-weight: 300;
}

.pum-content .braun-popup {
	padding: 1.5rem;
	height: auto;
	position: relative;
	box-shadow: var(--becker-shadow);
}

.pum-content .braun-popup .wp-block-image {
	margin-bottom: 1rem;
}

.pum-content .braun-popup h2 {
	color: var(--accent);
}

.pum-content .braun-popup strong {
	color: var(--accent);
}

.pum-content .wp-block-columns .wp-block-paragraph {
	transform: translatey(0.5rem);
	color: var(--accent);
	font-weight: 400;
}

.braun-popup > div::after {
 	content: '';
 	position: absolute;
 	bottom: -8px;
  	right: -9px;
	width: 50%;
	height: 50%;
	border-bottom: 10px solid var(--accent-grn);
	border-right: 10px solid var(--accent-grn);
	z-index: -1;
}


.inside-article .entry-content {
	padding-bottom: 40px;
}

.inside-article .entry-content:has(> :last-child:is(.has-background.alignfull, .wp-block-cover)) {
	padding-bottom: 0px;
}

.inside-article .entry-content :last-child.has-background.alignfull {
	padding-bottom: 40px;
}

.inside-article .entry-content :last-child.has-background.alignfull .wp-block-columns.has-white-background-color {
	max-width: var(--becker-lesser-width);
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.wp-block-group.braun-leistungen .wp-block-column .wp-block-group:last-of-type {
	margin-bottom: 0px;
}

.wp-block-group.braun-leistungen {
	padding-bottom: 40px;
}

.wp-block-columns.braun-leistungen::after {
	content: '';
 	position: absolute;
 	right: -9px;
  	bottom: -9px;
	width: 50%;
	height: 50%;
	border-right: 10px solid var(--accent-grn);
	border-bottom: 10px solid var(--accent-grn);
	z-index: -1;
}

/**********************************/
/******* TABS / AKKORDION ********/
/********************************/

.premium-tabs-style-style2 .premium-tabs-nav-list.premium-tabs-horizontal {
	border-bottom: none !important;
}

.premium-tabs-style-style2 .premium-tabs-nav-list.premium-tabs-horizontal:hover .premium-tab-link:hover > * {
	transform: scale(0.9);
}

.premium-tabs-style-style2 .premium-tabs-nav-list.premium-tabs-horizontal:hover .premium-tab-link > * {
	transition: transform 200ms ease-in-out;
}

.premium-tabs-style-style2 .premium-tabs-nav-list.premium-tabs-horizontal img {
  filter: brightness(0) invert(1);
}

.premium-tabs-style-style2 .premium-tabs-nav-list.premium-tabs-horizontal .active img {
  filter: none;
}

section.active {
	border-bottom: 10px var(--accent-grn) solid;
}

div.active-line {
	display: none;
}

.premium-content-wrap section.premium-tabs-content-section:last-of-type {
	display: none !important;
}

#premium-tabs__tab0.active a::after {
	content: '';
 	position: absolute;
 	top: -10px;
  	left: -10px;
	width: 50%;
	height: 50%;
	border-top: 10px solid var(--accent-grn);
	border-left: 10px solid var(--accent-grn);
}

#premium-tabs__tab1.active a::after {
	content: '';
 	position: absolute;
 	top: -10px;
	width: 50%;
	border-top: 10px solid var(--accent-grn);
}
#premium-tabs__tab2.active a::after {
	content: '';
 	position: absolute;
 	top: -10px;
  	right: -10px;
	width: 50%;
	height: 50%;
	border-top: 10px solid var(--accent-grn);
	border-right: 10px solid var(--accent-grn);
}

#premium-tabs__tab3,
.premium-tab-premium-tab-item-31e7039b1953 {
	display: none;
}


/**********************************/
/******* BLOG ********************/
/********************************/

.braun-blog .wp-block-column {
	padding: 1.5rem;
	position: relative;
	margin-bottom: 2rem;
	z-index: 1;
}

.braun-blog .wp-block-column figure {
	margin-bottom: 1.5rem;
	padding: 0.25rem;
}

.braun-blog .wp-block-column::after {
 	content: '';
 	position: absolute;
 	bottom: -8px;
  	right: -9px;
	width: 50%;
	height: 80%;
	border-bottom: 10px solid var(--accent-grn);
	border-right: 10px solid var(--accent-grn);
	z-index: -1;
}

#current .wp-block-button__link {
	z-index: 1;
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background: transparent !important;
    color: var(--accent-lght);
    border: none;
    border-radius: 0;

    transition: color 0.4s ease;
}

#current .wp-block-button__link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 7px;
    background: var(--accent-lght);
    z-index: -1;

    transition: height 0.4s ease;
}

#current .wp-block-button__link:hover {
    background: transparent !important;
    color: #fff;
    text-decoration: none;
}

/**********************************/
/******* FOOTER ******************/
/********************************/

footer.site-info {
	border-top: var(--base-3) 1px solid;
}

/**********************************/
/******* KONTAKT *****************/
/********************************/

.wpcf7-form {
	padding: 1rem;
	background-color: var(--accent-lght);
}
.wpcf7-form input.wpcf7-text,
.wpcf7-form textarea {
	width: 100%;
	border-right: 1px var(--accent) solid;
	border-bottom: 1px var(--accent) solid;
}
.wpcf7-form label {
	font-size: 0.75rem;
	font-weight: bold;
	text-transform: uppercase;
}
.wpcf7-list-item {
	margin-left: 0px;
}
.wpcf7-list-item label {
	font-size: 1rem;
	font-weight: 300;
	text-transform: none;
}

/* Contact Form 7 submit button */

.wpcf7 input.wpcf7-submit {
    background-color: transparent !important;
    background-image: linear-gradient(
        var(--accent),
        var(--accent)
    ) !important;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 7px;

    color: var(--accent);
    border: none;
    border-radius: 0;
    cursor: pointer;

    transition: background-size 0.4s ease,
                color 0.4s ease;
}

.wpcf7 input.wpcf7-submit:hover {
    background-color: transparent !important;
    background-size: 100% 100%;
    color: #fff;
    text-decoration: none;
}



@media (max-width: 1024px) {

  /* One grid for headings and content */
  .premium-blocks-tabs-52514e6fa4e9 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }

  /* Flatten the four intermediate wrappers */
  .premium-blocks-tabs-52514e6fa4e9
  :is(
    .premium-tabs-nav,
    .premium-tabs-nav-list,
    .premium-content-wrap,
    .premium-tabs-content
  ) {
    display: contents !important;
  }

  /* Hide the unused accordion placeholders */
  .premium-blocks-tabs-52514e6fa4e9
  .premium-accordion-tab-content {
    display: none !important;
  }

  /* Headings */
  #premium-tabs__tab0 {
    grid-row: 1;
  }

  #premium-tabs__tab1 {
    grid-row: 3;
  }

  #premium-tabs__tab2 {
    grid-row: 5;
  }

  /* Content panels */
  .premium-blocks-tabs-52514e6fa4e9
  .premium-tabs-content > section:nth-child(1) {
    grid-row: 2;
  }

  .premium-blocks-tabs-52514e6fa4e9
  .premium-tabs-content > section:nth-child(2) {
    grid-row: 4;
  }

  .premium-blocks-tabs-52514e6fa4e9
  .premium-tabs-content > section:nth-child(3) {
    grid-row: 6;
  }

  /* Keep the fourth content panel hidden */
  .premium-blocks-tabs-52514e6fa4e9
  .premium-tabs-content > section:nth-child(4) {
    display: none !important;
  }
}



/**********************************/
/******* PROGRESS ****************/
/********************************/

.ajaxpress-progressbar-bar {
    background: var(--accent) !important;
}


/**********************************/
/* POPUPS – RESPONSIVE CORRECTIONS */
/**********************************/

/* A. PHOTO AND CLOSE BUTTON */

/* Normalize the spacing so the X can be
   positioned relative to the photograph. */
.pum:has(.braun-popup) .pum-container {
  --photo-padding: 1.5rem;
  --close-inset: 0.5rem;

  padding: 0 !important;
}

/* Remove additional Popup Maker content spacing */
.pum:has(.braun-popup) .pum-content {
  padding: 0 !important;
}

/* Keep the photograph within the white card */
.pum-content .braun-popup {
  padding: var(--photo-padding, 1.5rem);
  box-sizing: border-box;
}

.pum-content .braun-popup
> .wp-block-group__inner-container {
  width: 100%;
  max-width: none !important;
}

.pum-content .braun-popup
> .wp-block-group__inner-container
> figure.wp-block-image {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 1rem !important;
}

.pum-content .braun-popup
> .wp-block-group__inner-container
> figure.wp-block-image img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Close button: identical top/right inset
   relative to the photograph */
.pum:has(.braun-popup)
.pum-container > .pum-close {
  position: absolute !important;

  top: calc(1.5rem + 0.5rem) !important;
  right: calc(1.5rem + 0.5rem) !important;
  bottom: auto !important;
  left: auto !important;

  width: 72px !important;
  height: 72px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 72px !important;
  line-height: 1 !important;
  font-weight: 400 !important;

  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;

  box-sizing: border-box !important;
  z-index: 10;
}


/* B. LOWER POPUP NAVIGATION – DESKTOP */

/* Target only the direct Gutenberg columns
   beneath the main popup card */
.pum:has(.braun-popup)
.pum-content > .wp-block-columns {
  align-items: flex-end !important;
}

/* Align all three columns to the same bottom edge */
.pum:has(.braun-popup)
.pum-content > .wp-block-columns
> .wp-block-column {
  align-self: flex-end !important;
}

/* Remove default spacing around the connector */
.pum:has(.braun-popup)
.pum-content > .wp-block-columns
> .wp-block-column:nth-child(2) figure {
  margin: 0 !important;
}

.pum:has(.braun-popup)
.pum-content > .wp-block-columns
> .wp-block-column:nth-child(2) img {
  display: block;
  width: 100%;
  height: auto;
}

/* Center the text vertically on the
   dotted line near the image's bottom edge.
   Percentage adapts to different text heights. */
.pum:has(.braun-popup)
.pum-content > .wp-block-columns
> .wp-block-column:first-child p,
.pum:has(.braun-popup)
.pum-content > .wp-block-columns
> .wp-block-column:last-child p {
  margin: 0 !important;
  transform: translateY(50%) !important;
}


/* C. TABLET AND MOBILE */

@media (max-width: 1024px) {

  /* Stack the two navigation links */
  .pum:has(.braun-popup)
  .pum-content > .wp-block-columns {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 1rem !important;

    padding: 0 1.5rem;
    box-sizing: border-box;
  }

  /* Hide the connecting illustration */
  .pum:has(.braun-popup)
  .pum-content > .wp-block-columns
  > .wp-block-column:nth-child(2) {
    display: none !important;
  }

  /* Make both link columns full width */
  .pum:has(.braun-popup)
  .pum-content > .wp-block-columns
  > .wp-block-column {
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    min-width: 0;
  }

  /* Center links and remove desktop offset */
  .pum:has(.braun-popup)
  .pum-content > .wp-block-columns
  > .wp-block-column p {
    text-align: center !important;
    transform: none !important;
    margin: 0 !important;
    overflow-wrap: normal;
  }

}


/**********************************/
/* MOBILE NAVIGATION – ALIGNMENT  */
/**********************************/

@media (max-width: 1204px) {

  /* Shared positioning values */
  body {
    --mobile-nav-size: 64px;
    --mobile-nav-right: 2rem;
    --mobile-nav-top: 2rem;
  }

  /* Keep the logo unchanged */
  #mobile-header .inside-navigation {
    position: relative;
    justify-content: space-between !important;
  }

  /* Hamburger button */
  #mobile-header .menu-toggle {
    position: absolute !important;
    top: var(--mobile-nav-top);
    right: var(--mobile-nav-right);
    left: auto !important;

    width: var(--mobile-nav-size);
    height: var(--mobile-nav-size);
    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Remove existing icon padding */
  #mobile-header
  .menu-toggle .icon-menu-bars {
    padding: 0 !important;
    font-size: 2rem;
  }

  /* Slideout close button */
  #generate-slideout-menu
  button.slideout-exit {
    position: fixed !important;

    top: calc(
      var(--mobile-nav-top) +
      var(--wp-admin--admin-bar--height, 0px)
    ) !important;

    right: var(--mobile-nav-right) !important;
    left: auto !important;
    bottom: auto !important;

    width: var(--mobile-nav-size);
    height: var(--mobile-nav-size);
    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    font-size: 2rem;
    line-height: 1;
    text-align: center !important;
    z-index: 10;
  }

}



/**********************************/
/* SLIDEOUT CLOSE BUTTON – FIX    */
/**********************************/

@media (max-width: 1490px) {

  /* Reserve space above the navigation items */
  #generate-slideout-menu .main-nav {
    padding-top: calc(
      var(--mobile-nav-top, 2rem) +
      var(--mobile-nav-size, 64px) +
      0.5rem
    ) !important;
  }

  /* Keep the close button above the menu */
  #generate-slideout-menu button.slideout-exit {
    z-index: 9999 !important;
    pointer-events: auto !important;
  }

}