/*
 Theme Name:   Karame e.V.
 Theme URI:    https://karame.de
 Description:  Karame e.v. 2025 Webseite
 Author:       Davide Crivelli
 Author URI:   https://web.davidecrivelli.com
 Template:     generatepress
 Version:      0.1
*/


/*BARRIEREFREI FOCUS (tab) */
/* ===== Fokus-Variablen ===== */
:root {
  --focus-color: currentColor;            /* Fokusfarbe – kann bei Bedarf ersetzt werden */
  --focus-bg-fallback: rgba(0,0,0,.12);   /* Fallback-Hintergrund, falls color-mix fehlt */
  --focus-bg: color-mix(in srgb, var(--focus-color) 20%, transparent);
  --focus-ring-radius: 8px;               /* Radius der Fokusumrandung */
  --focus-ring-width: 2px;                /* Dicke der gepunkteten Linie (IG) */
  --focus-ring-offset: 6px;               /* Abstand der Linie vom Element (IG) */
}

/* ===== Textlinks: Hintergrund-Highlight NUR für echte Links, nicht Buttons ===== */
a:focus-visible
  :not(.sbi_photo)
  :not(.wp-block-button__link)
  :not(.wp-element-button)
  :not(.gb-button)
  :not(.button)
  :not(.btn)
  :not([role="button"])
  :not([class*="button"])
  :not([class*="btn"]) {
  background: var(--focus-bg-fallback);   /* Fallback für ältere Browser */
  background: var(--focus-bg);            /* modernes color-mix() */
  text-decoration: none;                  /* Unterstreichung beim Fokus entfernen */
}

/* ===== Instagram-Feed (Smash Balloon) ===== */
#sbi_images a.sbi_photo {
  display: block;
  position: relative;
  border-radius: var(--focus-ring-radius);
  outline: none !important;               /* Plugin überschreibt sonst das Outline */
}

/* Sicherstellen, dass das Foto über Nachbarn liegt, wenn fokussiert */
#sbi_images a.sbi_photo:focus-visible { z-index: 10; }

/* Gepunkteter Fokus-Ring über dem Bild (nicht abgeschnitten, nicht darunter) */
#sbi_images a.sbi_photo:focus-visible::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--focus-ring-offset)); /* Linie leicht außerhalb des Bildes */
  border: var(--focus-ring-width) dotted var(--focus-color);
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;                              /* über dem Bild zeichnen */
}

/* Verhindert abgeschnittene Ringe – NUR während Fokus */
#sbi_images .sbi_item:has(a.sbi_photo:focus-visible),
#sbi_images .sbi_photo_wrap:has(a.sbi_photo:focus-visible) {
  overflow: visible !important;
}

/* ===== Button-Schutz: KEINE Hintergründe beim Fokus auf Button-Links ===== */
/* Lässt die Button-Farben unverändert (grün/hover schwarz), kein Weiß-Effekt */
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
.gb-button:focus-visible,
.button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
a[class*="button"]:focus-visible,
a[class*="btn"]:focus-visible {
  background: inherit !important;   /* verhindert Aufhellen */
  color: inherit !important;        /* Textfarbe unverändert */
  outline: none;                    /* kein UA-Outline-Punktmuster */
  box-shadow: none;                 /* keine zusätzlichen Ringe */
}

/* ===== GeneratePress Such-Icon (Lupe) Fokus ===== */
.menu-bar-item a[role="button"][data-gpmodal-trigger="gp-search"]:focus-visible {
  outline: 2px solid currentColor;    /* klarer Fokus-Ring */
  outline-offset: 3px;                /* etwas Abstand */
  border-radius: 4px;                 /* weiche Ecken wie im Theme */
}

/* ===== Fokus-Boost exklusiv für Firefox (ein Kasten um den ganzen Link) ===== */
@-moz-document url-prefix() {
  /* Nur echte Text-Links, keine Buttons/IG-Fotos */
  a:focus-visible:not(.sbi_photo):not(.wp-block-button__link):not(.gb-button):not(.wp-element-button):not(.button):not(.btn):not([role="button"]) {
    display: inline-block;                 /* verhindert zeilenweise Umrandung */
    position: relative;
    outline: 2px solid color-mix(in srgb, currentColor 60%, transparent);
    outline-offset: 3px;
    border-radius: 6px;
    /* sanftes Leuchten wie in Safari/Chrome */
    box-shadow:
      0 0 0 3px color-mix(in srgb, currentColor 35%, transparent),
      0 0 6px color-mix(in srgb, currentColor 25%, transparent);
  }
}






/*mobiles menu*/

@media (max-width: 1000px) {
  /* Adjust the positioning so it’s not too close to edges on small devices */
  .slideout-navigation.do-overlay .my-slideout-logo {
    left: 10px;
    top: 0px;
    padding-left: 10px!important;
    padding-top: 10px!important;
	padding-bottom:10px!important;
  }

  /* Scale down the actual logo image */
  .slideout-navigation.do-overlay .my-slideout-logo img {
    max-width: 109px; /* or any smaller width you prefer */
    height: auto;     /* keep proportions */
  }
}

/*move the X to the right on mobile*/
@media (max-width: 1000px) {
  /* Pin the close button to the top-right */
  .slideout-navigation.do-overlay .slideout-exit {
    position: absolute !important;
    top: -5px !important;
    right: 0 !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 9999; /* if needed */
	font-size:28px!important;
  }

  /* Push the menu down so it doesn’t overlap the “X” */
  .slideout-navigation .inside-navigation .main-nav{
    margin-top: 100px !important; /* Adjust this value as needed */
  }
}

.slideout-navigation.do-overlay .inside-navigation {
	max-width:1000px!important
}

/*LOGO in slide out menu*/
.slideout-navigation.do-overlay .my-slideout-logo {
	position: fixed;
    left: 0;
    top: 0;
    width: auto;
	padding-left: 20px;  /* optional: adds spacing from the left edge */
    padding-top: 20px;   /* optional: spacing from the top */
}

.slideout-navigation button.slideout-exit {
	z-index:9999;
	color:var(--k-schwarz)!important;
	padding-top:15px!important;
}

.slideout-navigation .my-slideout-logo {
	background-color:var(--k-weiss);
	width:100%!important;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}

.main-navigation .menu-toggle {
	font-size:28px;
}


/*Language switch settings*/
.lang-switch .gt-current-lang { display: none; }

/* Off-canvas (GeneratePress Slideout) — hide the current language so only the "other" shows */
.slideout-navigation .lang-switch .gt-current-lang,
#generate-slideout-menu .lang-switch .gt-current-lang {
  display: none !important;
}




/*HYPHENS settings*/
.zeilenumbruch,
.zeilenumbruch * {
  hyphens: auto;
}

/* NEWS BOXEN FARBE */
.category-events .container__news, .category-events .newspost-template__meta {
	background-color:var(--k-orange);
}

.category-projektnews .container__news, .category-projektnews .newspost-template__meta {
	background-color:var(--k-hellgruen);
}

.category-jugendredaktion .container__news, .category-jugendredaktion .newspost-template__meta {
	background-color:var(--k-blau);
}

/*
.category-jugendredaktion {
	background-color:var(--k-blau)!important;
}
*/

.category-sport-und-folklore .container__news, .category-sport-und-folklore .newspost-template__meta {
	background-color:var(--k-lila);
}

.category-news .container__news, .category-news .newspost-template__meta {
	background-color:var(--k-braun);
}

.container__aktuelle-projekte h3 a, .container__aktuelle-projekte h3 a:hover {
	color:var(--k-weiss);
}

.container__angebote h3 a, .container__angebote h3 a:hover {
	color:var(--k-gruen);
}


/*Aktuelles Filter*/
.search-filter-field__input {
	border-radius:10px;
}

.search-filter-field.search-filter-field--id-32, .search-filter-field__popup.search-filter-field__popup--id-32 {
    --search-filter-input-placeholder-color: color-mix(in srgb, var(--search-filter-input-color) 100%, transparent)!important;
}

.search-filter-field__popup.search-filter-field__popup--id-32 {
	border-radius:10px;
}


/*HOME: Insta Feed*/
#sb_instagram.sbi_palette_custom_1 #sbi_load .sbi_follow_btn a {
	border-radius:10px;
	font-weight: bold;
	padding: 0.75rem 1rem;
	font-size:1em;
}

#sb_instagram.sbi_palette_custom_1 #sbi_load .sbi_follow_btn a:hover {
	background-color:var(--k-schwarz);
}

#sb_instagram .sbi_follow_btn svg {
	font-size:1em!important;
}

#sb_instagram .sbi_photo img {
	border-radius:10px;
}

#sb_instagram #sbi_load {
	text-align:left!important;
}

  #sb_instagram.sbi_col_4 #sbi_images {
    grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr))!important;
}


/*Layout NEWSBEITRAG*/
figcaption {
	font-size:0.8em;
}

.gb-image {
	text-align:center;
}

.gb-image img {
	border-radius:10px;
}

/* =========================
   ACF Swiper – refined CSS
   ========================= */
.acf-swiper{
  --ui-gap: .5rem;
  --ui-pad-y: .25rem;
  --ui-pad-x: .5rem;
  --ui-radius: 12px;
  --ui-border: 1px;
  --ui-color: #111;
  --ui-bg: #fff;
  --ui-bg-dark: #000;
  --ui-muted: 0.75;
}

/* Swiper wrapper */
.acf-swiper .swiper{ width:100%; }

/* Slides: centrati, no overflow */
.acf-swiper .swiper-slide{
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; /* arrotondamento effettivo su img cover */
  border-radius: var(--ui-radius);
  background: transparent;
}

/* Immagini: comportamento base */
.acf-swiper .swiper-slide img{
  display:block; width:100%;
  object-position:center;
  border-radius: inherit;
  /* Di default: niente height forzata per evitare distorsioni */
  height:auto;
}

/* Fit modes (controllano l'altezza dell'immagine) */
.acf-swiper.is-fit-contain .swiper-slide img{ object-fit:contain; height:100%; }
.acf-swiper.is-fit-cover   .swiper-slide img{ object-fit:cover;   height:100%; }

/* Preset altezze (mobile first) */
.acf-swiper.hset-default .swiper-slide{ height:60vh; max-height: 680px; }
@media (min-width:640px){ .acf-swiper.hset-default .swiper-slide{ height:420px } }
@media (min-width:1024px){ .acf-swiper.hset-default .swiper-slide{ height:560px } }
/* Esempi extra
.acf-swiper.hset-compact .swiper-slide{ height:280px }
.acf-swiper.hset-tall    .swiper-slide{ height:72vh }
*/

/* Varianti background (solo se vuoi una cornice neutra attorno all'immagine) */
.acf-swiper.bg-light .swiper-slide{ background:#f5f5f5 }
.acf-swiper.bg-dark  .swiper-slide{ background:#000 }

/* ===== UI (frecce + contatore) ===== */
.acf-swiper .slider-ui{
  display:flex; justify-content:space-between; align-items:center;
  gap:.5rem; margin-top:var(--ui-gap);
}

.acf-swiper .ui-left{ display:flex; gap:.375rem; align-items:center }
.acf-swiper .ui-right{ display:flex; align-items:center; gap:.5rem }

.acf-swiper .ui-right .counter{
  font-size:.75em;
  padding: var(--ui-pad-y) var(--ui-pad-x);
  line-height:1;
}

.acf-swiper .nav-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.25rem; height:2.25rem; line-height:1;
  padding:0 .25rem;
  font-size:1rem; font-weight:600;
  /*border:var(--ui-border) solid currentColor;
  border-radius:8px;*/
  background:transparent; 
  /*color:var(--ui-color);*/
  cursor:pointer; user-select:none;
  transition: transform .12s ease, opacity .12s ease;
}

.acf-swiper .nav-btn{
  transform: scale(1.4);        /* 1.0 = 100% */
  transform-origin: center;
}


/*.acf-swiper .nav-btn:hover{ transform: translateY(-0.2px) }*/
.acf-swiper .nav-btn:active{ transform: translateY(0) scale(1.3) }
/*.acf-swiper .nav-btn:focus{ outline:2px solid currentcolor outline-offset:2px }*/

/* Paginazione (se usi bullets) */
.acf-swiper .swiper-pagination-bullets{ position:static; margin-top:.25rem }
.acf-swiper .swiper-pagination-bullet{
  width:8px; height:8px; opacity:.35; margin:0 4px !important;
}
.acf-swiper .swiper-pagination-bullet-active{ opacity:1 }

/* Didascalia testo sotto lo slider */
.acf-swiper .slide-caption{ margin-top:.5rem; font-size:.92rem; line-height:1.4 }

/* ===== Video responsive ===== */
.gb-video .embed-wrap{
  position:relative; width:100%; background:#000;
  border-radius:12px; overflow:hidden;
}
.gb-video .embed-wrap iframe,
.gb-video .embed-wrap embed,
.gb-video .embed-wrap object,
.gb-video .embed-wrap video{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
.gb-video .embed-wrap.ratio-16x9{ aspect-ratio:16/9 }
.gb-video .embed-wrap.ratio-4x3 { aspect-ratio:4/3 }
.gb-video .embed-wrap.ratio-1x1 { aspect-ratio:1/1 }

/* ===== Download row ===== */
.gb-download{ margin:.25rem 0 0 }
.gb-download .gb-download-link{
  display:flex; justify-content:space-between; align-items:center;
  border-top:2px solid var(--k-schwarz); padding:.35rem 0;
  text-decoration:none; color:inherit;  gap: .75rem;
}

.gb-download .gb-download-icon{ display:inline-flex; margin-left:.75rem }
.gb-download .gb-download-icon svg{ width:1.1em; height:1.1em }

/* ===== Preferenze utente ===== */
@media (prefers-reduced-motion: reduce){
  .acf-swiper .nav-btn{ transition:none }
}
@supports (selector(:focus-visible)){
  .acf-swiper .nav-btn:focus{ outline:none }
  .acf-swiper .nav-btn:focus-visible{ outline:2px solid currentColor; outline-offset:2px }
}


/*new*/

/* L’anchor della lightbox deve riempire la slide, così l’img (height:100%) può fare cover */
.acf-swiper .swiper-slide > a.glightbox{
  display:block; width:100%; height:100%;
}

/* Modalità uniforme: crop consentito */
.acf-swiper.is-fit-cover .swiper-slide img{
  object-fit: cover;
  /*object-fit: contain;*/
  height: 100%;
  width: 100%;
}

/* (già presente) altezza coerente della slide via preset */
.acf-swiper.hset-default .swiper-slide{ height:60vh; max-height:680px }
@media (min-width:640px){ .acf-swiper.hset-default .swiper-slide{ height:420px } }
@media (min-width:1024px){ .acf-swiper.hset-default .swiper-slide{ height:560px } }




/* ++++++++++++++++++++++++++
 * ANGEBOTE LAYOUT CSS
 * ++++++++++++++++++++++++ */

/* VOLLBREITE: von GeneratePress gesteuert */
.ag-section {}

/* DESKTOP/ALLGEMEIN */
.ag-row{
  display: grid;
  /* verhindert Overflow bei langen Überschriften/Text */
  grid-template-columns: minmax(0,1fr) minmax(0,1fr); /* minmax(0,...) = bessere Overflow-Kontrolle */
  gap: clamp(20px, 4vw, 48px); /* responsiver Abstand */
  align-items: stretch; /* gleiche Höhe für Medien- und Textspalte */
  margin-bottom: clamp(28px, 6vw, 128px);
}

/* Reihenfolge der Spalten (Bild links/rechts) */
.ag-row--image-left  { grid-template-areas: "media content"; }
.ag-row--image-right { grid-template-areas: "content media"; }

/* Grid-Bereiche zuweisen */
.ag-media   { grid-area: media; }
.ag-content { grid-area: content; }

/* WICHTIG: verhindert, dass lange Inhalte die Spalte verbreitern */
.ag-media, .ag-content { min-width: 0; }

/* Basis-Höhe für das Bild (Desktop) – verhindert „Riesen“-Hochformate */
.ag-media {
  height: 500px;            /* Basis-Mindesthöhe für ein ruhiges Layout */
  overflow: hidden;         /* sauberer Zuschnitt */
  border-radius: 10px;      /* wie im Mockup */
}

/* Bild füllt den Container, wird bei Bedarf zugeschnitten */
.ag-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* sauberer Zuschnitt */
  object-position: center;  /* Fokus in der Mitte; bei Bedarf je Reihe anpassen */
  display: block;
}

/* Liste: nur die Marker-Stilistik, Typo kommt vom Theme */
.ag-list { list-style: none; padding: 0; margin: 1.5em 0; }
.ag-list li {
  position: relative;
  padding-left: 1.25rem;
  margin: .35rem 0;
}
.ag-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--k-gruen); /* grüner Punkt */
}

/* MOBILE */
@media (max-width: 900px){
  .ag-row{
    grid-template-columns: 1fr;              /* eine Spalte */
    grid-template-areas: "media" "content";  /* Bild oben, Text unten – für beide Varianten gleich */
    gap: clamp(14px, 4vw, 24px);             /* etwas kleinerer Abstand */
    align-items: start;                       /* keine Equal-Height auf Mobile */
    margin-bottom: clamp(20px, 8vw, 128px);
  }

  /* Bild-Container passt sich mobil natürlich an; mit fester Ratio für sauberen Look */
  .ag-media{
    height: auto;             /* Equal-Height aus */
    aspect-ratio: 4 / 3;      /* konsistentes Fenster auf Mobile */
    border-radius: 10px;      /* etwas kleinere Rundung auf kleinen Screens */
  }

  .ag-media__img{
    height: 100%;
    object-fit: cover;
  }

  /* Liste: leicht enger auf Mobile */
  .ag-list{ margin: 1.5em 0;  }
  .ag-list li{ padding-left: 1rem; margin: .3rem 0; }
  .ag-list li::before{ width: .5rem; height: .5rem; top: .55em; }
}


/* DE: Grundstil der Buttons */
.ag-button{
    align-items: center;
    background-color: var(--k-gruen);
    color: var(--k-weiss);
    display: inline-flex;
    font-weight: bold;
    text-decoration: none;
    border-radius: 10px;
    padding: 0.75rem 1rem;
}

.ag-button:hover {
	background-color: var(--k-schwarz);
	color: var(--k-weiss);
	text-decoration:none;
}


/* DE: Download-Zeile – volle Breite der Textspalte, obere Rahmenlinie */
.ag-download{
  border-top: 2px solid var(--k-schwarz);   /* geforderte schwarze Linie oben */
  margin:1.5em 0;
}

/* DE: Link als flexibler Container: Text links, Icon rechts */
.ag-download__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  text-decoration: none;        /* Unterstreichung entfernen (Theme-Farbe bleibt) */
  padding: .5rem 0;
}

/* DE: Text übernimmt Typografie vom Theme, optional etwas stärker */
.ag-download__text{ font-weight: 800; }

/* DE: Icon rechts – erbt die Textfarbe */
.ag-download__icon{ display: inline-flex; flex: 0 0 auto; line-height: 0; }


.gb-download{ margin:.25rem 0 0 }
.gb-download .gb-download-link{
  display:flex; justify-content:space-between; align-items:center;
  border-top:2px solid var(--k-schwarz); padding:.35rem 0;
  text-decoration:none; color:inherit;
}

.gb-download .gb-download-icon{ display:inline-flex; margin-left:.75rem }
.gb-download .gb-download-icon svg{ width:1.1em; height:1.1em }

/*infobox text*/
.infobox__text a {
	color:var(--k-gruen)!important;
}


/*über karame sticky menu*/
/* ===== STICKY BEHAVIOR ===== */
.sticky-menu {
  position: relative;          /* in flow sotto l'hero */
  background: #f7f6f3;
  border-bottom: 2px solid var(--k-schwarz);
  z-index: 9999;
  transition: transform .25s ease;
  margin-bottom:2em;
}

/* diventa sticky oltre l’hero */
.sticky-menu.is-sticky {
  position: sticky;
  top: 0;
}

/* quando scrolli in giù ed è sticky → nascondi */
.sticky-menu.is-sticky:not(.revealed) {
  transform: translateY(-100%);
}

/* quando scrolli in su → riappare */
.sticky-menu.is-sticky.revealed {
  transform: translateY(0);
  /*box-shadow: 0 6px 14px rgba(0,0,0,.06); */
}

/* ===== LISTA VERTICALE ===== */
.sticky-menu .sm-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* separatore: border-top su ogni voce */
.sticky-menu .sm-item {
  margin: 0;
  border-top: 2px solid var(--k-schwarz);   /* regola colore */
}

/* link: label a sinistra, freccia a destra */
.sticky-menu .sm-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  text-decoration: none;
  color: inherit;
  font-size:0.8em;
  font-weight:bold;
}

/* testo */
.sticky-menu .sm-label {
  font-weight: 600;
  line-height: 1.2;
}

/* icona freccia */
.sticky-menu .sm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
}

.sticky-menu .sm-icon svg {
  width: 16px;
  height: 16px;
  display: block;
  transition: transform .2s ease;
}

/* feedback hover/focus */
.sticky-menu .sm-link:hover .sm-icon,
.sticky-menu .sm-link:focus .sm-icon {
  transform: translateY(1px);
}

/* ===== MOBILE TWEAKS ===== */
@media (max-width: 768px) {
  .sticky-menu .sm-link {
    padding: .6rem 0;
  }
}

/* ===== ACCESSIBILITÀ ===== */
@media (prefers-reduced-motion: reduce) {
  .sticky-menu { transition: none; }
  .sticky-menu .sm-icon svg { transition: none; }
}

/* ===== ADMIN BAR OFFSET ===== */
body.admin-bar .sticky-menu.is-sticky { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .sticky-menu.is-sticky { top: 46px; }
}


/*modal search custom*/
/* Force native clear X to appear */
.search-modal-form input[type="search"] {
  -webkit-appearance: searchfield;
}

/* Approximate a darker green via filter */
.search-modal-form input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
  display: block;
  filter: invert(26%) sepia(71%) saturate(381%) hue-rotate(93deg) brightness(40%) contrast(92%);
}