/**
 * Theme Name:      Gabba
 * Template:   		twentytwentyfive
 * Description:     Child Theme of twentytwentifive
 * Version:         1.0.0
 * Author:          Bruno
 * License:         GNU General Public License v2.0 or later
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 */
 
 
 :root {
	 --wp--style--global--content-size: 900px;
 }
 
 
 :root {
    --backgroundcolor: #d9c8ab; /* Hintergrundfarbe */
}

 body {
	background-color: var(--backgroundcolor);
	/* color: #ffffffcc; */
	
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--large);
	font-size: 1.125rem;  // Übersteuert wordpress-Einstellung der Schriftgrösse
	font-weight: 300;
	letter-spacing: -0.1px;
	line-height: 1.4;
	
	overflow-x: hidden;
}

 /* fetter Text */
 strong {
	 font-weight: 700;
 }

/* Links */
a {
    text-decoration: none;
	transition: opacity .3s ease;
    /* transition: letter-spacing 0.2s ease; */
}

a:hover {
	opacity: 0.5;
	text-decoration: none;
    /* text-decoration: underline; */
    /* letter-spacing: 0.03em; */
}

a img {
    transition: transform 0.3s ease;
}

a:hover img {
    transform: scale(1.02);
}


/* Header */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: inherit;
	background-color: var(--backgroundcolor);
	padding-top:15px;
	padding-bottom: 15px;
	max-height: 60px;
}
header > div div {
    padding-bottom: 0 !important;
}

@media (max-width: 782px) {
	header > div div {
		padding-top: 0 !important;
	}
	/* NAV icon grösser machen */
	.wp-block-navigation__responsive-container-open svg {
	  width: 48px;
	  height: 48px;
	}
	
	#modal-12 {
		width: 200px;
		height: 270px;
	}
	#modal-1-content {
		padding-top: 70px !important;
	}
	.wp-block-navigation__responsive-container-close svg {
		width: 48px;
		height: 48px;
	}
	
	#modal-1 {
    position: fixed;      /* wichtig */
    top: 0;
    right: 0;             /* 👉 rechts */
    left: auto;           /* links aufheben */
    margin: 0;
  }
	
	
}
/* Mobile Menü öffnen schon ab 782px */
@media (max-width: 782px) {
  /* Hamburger-Button anzeigen */
  .wp-block-navigation__responsive-container-openX {
    display: block !important;
  }

  /* Desktop-Menü ausblenden */
  .wp-block-navigation__containerX {
    display: none !important;
  }
}


/* Footer */

footer > div > div:nth-of-type(2) > div {
  display: flex;
  flex-basis:auto;
  justify-content: space-between;
  align-items: flex-end;
}
footer > div > div:nth-of-type(2) {
	margin-block-start: 0rem;
}

footer p.has-medium-font-size {
  margin-right: 50px; 
  flex: auto;
}
footer h1 {
	padding-bottom: 6px;
}

@media (max-width: 782px) {
  /* Footer-Grundcontainer auf Mobile stapeln */
  footer > div > div:nth-of-type(2) > div {
    flex-direction: column; /* übereinander */
    align-items: flex-start; /* optional: linksbündig */
  }

  /* Abstand zwischen den Elementen */
  footer > div > div:nth-of-type(2) > div p,
  footer > div > div:nth-of-type(2) > div h1 {
    margin-right: 0; 
    margin-bottom: 0; 
    flex: none;
  }
  footer > div {
	  padding:15px !important;
  }
}


/* Adapt borders and headings
   ========================== */
   
main {
	margin-top: 0 !important;
}
h1 {
	font-size: 55px;
	padding-bottom: 20px;
}
h2 {
	padding-top: 50px;
	padding-bottom: 20px;
	font-size: 40px;
}
h3 {
	padding-top: 15px;
	padding-bottom: 10px;
	font-size: 28px;
}

.is-style-text-subtitle {
	padding-top: 25px;
	padding-bottom: 25px;
}

/* Name auf Seite Wer ich bin etwas absetzen */
figure.wp-block-table > table tbody tr td strong {
	display: inline-block;
	margin-bottom: 6px;  
}


/* Mobile */
@media (max-width: 768px) {
	
	main {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	
	h1 {
	font-size: 45px;
	padding-bottom: 20px;
	}
	h2 {
		padding-top: 30px;
		padding-bottom: 10px;
		font-size: 30px;
	}
	h3 {
		padding-top: 15px;
		padding-bottom: 6px;
		font-size: 22px;
	}
	
}





/* Shortcodes
============================================================ */

:root {
    --spacer: 20px; /* Default spacing for shortcodes */
}

/* SHOWPOSTS – Base */

.showposts {
    width: 100%;
}

.showposts-item {
    box-sizing: border-box;
}

.showposts-title {
    margin: 0 0 6px 0;
    line-height: 1.2em;
}

.showposts-excerpt {
	margin-bottom: 10px;
}

h3.showposts-title {
    margin: 0;
}

/* "showmore" link under post title */
.showposts-showmore {
    font-weight: 500;
    display: inline-block;
    margin-top: 0;
}
.showposts-showall {
    font-weight: 500;
}


/* Post image general */
.showposts-image {
    display: block;
}

.showposts-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Links with Arrow */
.showposts-arrow {
    font-weight: 500;
    text-decoration: none;
    align-items: center;
}

/* arrow before link */
.showposts-arrow::before {
    content: "→";
    display: inline-block;
    transition: transform 0.3s ease;
	margin-right: 0.5em;
}

/* hover animation */
.showposts-arrow:hover::before {
    transform: translateX(6px);
}

/* ============================================================
   SHOWPOSTS – Columns (Cards side by side)
   ============================================================ */

.showposts-columns {
    display: flex;
    gap: var(--spacer);
    align-items: stretch;
}

.showposts-columns .showposts-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
}

.showposts-columns .showposts-text {
    padding-top: 0px;
}

.showposts-columns .showposts-image {
    flex: 0 0 220px;
}

.showposts-columns .showposts-image img {
    height: 220px;
    width: 100%;
    object-fit: cover;
}

/* ============================================================
   SHOWPOSTS – Rows (List, Image left)
   ============================================================ */

.showposts-rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid;
    border-bottom: 1px solid;
}

.showposts-rows .showposts-item {
    display: flex;
    align-items: flex-start;
    padding: var(--spacer) 0px;
    border-bottom: 1px solid;
}

/* prevent double bottom border for last item */
.showposts-rows .showposts-item:last-child {
    border-bottom: none;
}

/* Image left ~25% */
.showposts-rows .showposts-image {
    flex: 0 0 25%;
    max-width: 25%;
    margin-right: var(--spacer);
}

.showposts-rows .showposts-image img {
    height: auto;
}

/* Text right */
.showposts-rows .showposts-text {
    flex: 1;
    padding-left: 0px;
}

/* ============================================================
   SHOWPOSTS – "Show All" link above posts
   ============================================================ */

.showposts-showall {
    margin-bottom: var(--spacer);
}

.showposts-showall a {
    font-weight: 500;
    text-decoration: none;
}

/* ============================================================
   SHOWPOSTS – Mobile
   ============================================================ */

@media (max-width: 768px) {

    .showposts-columns,
    .showposts-rows {
        flex-direction: column;
    }

    .showposts-rows .showposts-item {
        flex-direction: column;
    }

    .showposts-rows .showposts-image {
        max-width: 100%;
        flex: 0 0 auto;
    }

    .showposts-columns .showposts-image img {
        height: auto;
    }
}