/*
Theme Name: PONCK Theme
Template: Impreza
Version: 1.0
Author:	PONCK | The Web Company
Theme URI: https://ponck.nl/
Author URI: https://ponck.nl/
*/
/* underline die meeloopt met elke afgebroken regel */
h1.w-text .w-text-value {
  background-image: linear-gradient(#F49137, #F49137);
  background-repeat: no-repeat;
  background-position: 0 100%;   /* onderaan tekst */
  background-size: 0% 5px;       /* start: geen breedte */
  padding-bottom: 0px;          /* ruimte voor de "underline" */

  animation: underlineGrow 2s cubic-bezier(.25,.1,.25,1) forwards;
}

@keyframes underlineGrow {
  from { background-size: 0% 5px; }
  to   { background-size: 100% 5px; }
}

/*====*/
.w-nav-close:before {
    color: #fff;
}
.us-nav-style_3 > *, 
.navstyle_3 > .owl-nav button, 
.us-btn-style_3 {
    font-size: clamp(13px, 1.2vw, 17px);
}
.us-nav-style_2 > *, 
.navstyle_2 > .owl-nav button, 
.us-btn-style_2 {
    font-size: clamp(13px, 1.2vw, 17px);
}
.us-nav-style_1 > *, 
.navstyle_1 > .owl-nav button, 
.us-btn-style_1 {
    font-size: clamp(13px, 1.2vw, 17px);
}
.center {
	margin-bottom: auto;
	margin-top: auto;
}
.col-bottom {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}
[class*="us_custom_"] {
    animation-duration: 0.5s !important;     
    animation-timing-function: ease-in !important; 
}
.w-tabs.accordion>div>.w-tabs-section {
    border-width: 0px 0 0 0;
}
.w-tabs.accordion>div>.w-tabs-section:last-of-type {
    border-bottom-width: 0px;
}
.w-tabs-section-header::before,
.w-tabs-section-header::after {
    background: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
}
/* Gallery item wrapper */
.w-gallery-item,
.w-gallery-item-img,
.w-gallery-item-img img {
    border-radius: 15px;
    overflow: hidden; /* belangrijk om de afbeelding mee te laten afronden */
}
/* Als er een achtergrondkleur zit op het button-element zelf */
.w-tabs-section-header {
    background: transparent !important;
}

.grayscale img {
    filter: grayscale(100%);
    opacity: 0.4;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.grayscale img:hover {
    filter: grayscale(0%);
    opacity: 1;
}
@media (max-width: 600px) {
    nav.us_menu_1 {
        --main-gap: 0.5rem !important;
    }
}

/* ==================
 * buddyboss styling 
 * ================== */

.ponck-avatar img {
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    animation: fade 0.5s ease-in-out;
}

/* fade-in animatie */
@keyframes fade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* == feed styling == */
/* Buitenste blok, zelfde look als andere contentblokken */
.ponck-activity-section {
    max-width: 1200px;        /* zelfde breedte als je content */
    margin: 0 auto 40px auto; /* centreren + onderruimte */
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    padding: 30px 30px 10px;
}

/* titel erboven */
.ponck-activity-section .ponck-activity-title {
    font-size: 26px;
    margin-bottom: 20px;
}

/* Binnenkant iets luchtiger maken (BuddyBoss feed zelf) */
.ponck-activity-section #activity-stream,
.ponck-activity-section .activity {
    margin-top: 20px;
}

/* Activiteit-items laten aansluiten bij jouw UI */
.ponck-activity-section .activity-item {
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 15px 0;
}

/* Buttons van BuddyBoss iets meer jouw stijl geven */
.ponck-activity-section .button,
.ponck-activity-section .bb-button,
.ponck-activity-section .bp-primary-action {
    border-radius: 999px;       /* pill-style, pas aan naar jouw look */
    padding: 7px 18px;
}

/* registratie submit knop iets meer top-margin geven */
div.submit #signup_submit {
    margin-top: 20px;
}

/* activatie pagina header weg */
.bb-rl-login-header {
  display: none;
}

/* Profielformulier styling */
.klik-profile-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.klik-profile-form__field--full {
    grid-column: 1 / -1;
}

.klik-profile-form__submit {
    margin-top: 20px;
}

/* Volledige avatar-container forceren naar links */
.wpmake-advance-user-avatar-container,
.wpmake-advance-user-avatar-upload,
.klik-profile-form__avatar-upload {
    text-align: left !important;
    display: block !important;
}

/* De afbeelding zelf links laten beginnen */
.wpmake-advance-user-avatar-container img.profile-preview {
    display: block !important;
    margin: 0 !important; /* geen auto-centering */
    padding: 0 !important;
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;
    border-radius: 20px !important;
    object-fit: cover !important;
}

/* De button-row netjes onder elkaar houden */
.wpmake-advance-user-avatar-container .button-group,
.wpmake-advance-user-avatar-container header,
.wpmake-advance-user-avatar-container p {
    text-align: left !important;
}

/* ==============================
 * KLIK kaarten (maatje + leden)
 * ==============================  */

/* Algemene card-styling */
.klik-card {
    background: #793c89;
    color: #fff;
    border-radius: 20px;
    padding: 2rem; /* meer padding */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Leden-kaarten in het grid: links uitgelijnd, iets breder */
.klik-leden-grid .klik-card {
    align-items: flex-start;
    max-width: 380px;
}

/* Wrapper om de maatje-kaart te centreren */
.klik-centrered-wrapper {
    display: flex;
    justify-content: center;
}

/* Single maatje-kaart: nog breder + centreren */
.klik-card--maatje {
    align-items: center;
    text-align: center;
    padding: 2.4rem;
    max-width: 650px; /* flink breder */
    width: 100%;
}

/* Avatar in de kaarten: vierkant, afgeronde hoeken, slagschaduw */
.klik-card__avatar {
    margin-bottom: 0.5rem;
}

.klik-card__avatar-img {
    display: block;
    width: 120px;
    height: 120px;
    max-width: 120px;
    max-height: 120px;
    border-radius: 20px; /* zelfde look als .ponck-avatar img */
    object-fit: cover;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}

/* Tekst */
.klik-card__name {
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
}

.klik-card__line {
    margin: 0.1rem 0;
}

/* Acties / knoppen */
.klik-card__actions {
    margin-top: 0.75rem;
}

/* Basis knopstijl */
.klik-btn {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

/* Licht thema-knop op paarse achtergrond */
.klik-btn--light {
    background: #fff;
    color: #793c89;
}

/* Twee knoppen naast elkaar (leden + maatje) */
.klik-card__actions--row {
    display: flex;
    gap: 0.8rem;
}

/* Leden-kaarten: knoppen links uitgelijnd en even breed */
.klik-leden-grid .klik-card__actions--row {
    justify-content: flex-start;
}

.klik-leden-grid .klik-btn {
    flex: 1;
}

/* Maatje-kaart: knoppen centreren en even breed */
.klik-card--maatje .klik-card__actions--row {
    justify-content: center;
}

.klik-card--maatje .klik-btn {
    flex: 1;
}

/* Grid voor maatje met leden: 3 kolommen, 4e eronder */
.klik-leden-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

/* Responsief iets vriendelijker */
@media (max-width: 1024px) {
    .klik-leden-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .klik-leden-grid {
        grid-template-columns: 1fr;
    }
}

/* Activiteiten kaart bubble styling */
.location-highlight,
.location-highlight * {
  margin: 0;
  padding: 0;
}

.location-highlight {
  text-align: center;
  position: relative;
  top: -12px;
  z-index: 9999;
}

.location-title {
  color: #793c89;
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.location-name {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
}

.location-tagline {
  font-size: 0.9rem;
  opacity: 0.85;
}

/* Google Maps InfoWindow: laat content niet afknippen */
.gm-style .gm-style-iw-d {
  overflow: visible !important;
  max-height: none !important;
}

/* Soms wordt er ook op de container zelf geknipt */
.gm-style .gm-style-iw,
.gm-style .gm-style-iw-c {
  overflow: visible !important;
}

/* Extra ruimte links/rechts in jouw InfoWindow content */
.gm-style .gm-style-iw-d > div {
  padding: 0 14px !important;
  box-sizing: border-box;
}

/* ANBI info styling */
.anbi-info h3 {
    margin-bottom: 2px;
}

.anbi-info p {
    margin-top: 0;
    margin-bottom: 0;
}

/* ======================= 
 * WHYDONATE knop styling
 * ======================= */
.whydonate-wrap {
    text-align: left;
}

.whydonate-wrap #widget-here-c0Plx {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.whydonate-wrap #widget-here-c0Plx a,
.whydonate-wrap #widget-here-c0Plx button,
.whydonate-wrap #widget-here-c0Plx input[type="submit"],
.whydonate-wrap #widget-here-c0Plx .btn,
.whydonate-wrap #widget-here-c0Plx [class*="button"] {
    background: #f4a025 !important;
    border: 0 !important;
    color: #000 !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    text-transform: uppercase !important;
    border-radius: 1em !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16) !important;
    padding: 1em 2em !important;
    display: inline-block !important;
    margin: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.whydonate-wrap #widget-here-c0Plx a:hover,
.whydonate-wrap #widget-here-c0Plx button:hover,
.whydonate-wrap #widget-here-c0Plx input[type="submit"]:hover,
.whydonate-wrap #widget-here-c0Plx .btn:hover,
.whydonate-wrap #widget-here-c0Plx [class*="button"]:hover {
    background: #7cc265 !important;
    color: #000 !important;
    box-shadow: 0 0 0 rgba(0,0,0,0) !important;
    filter: blur(0px);
}

input[id^="other-amount-number-c0Plx"] {
    height: 100% !important;
    min-height: 0 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    appearance: textfield !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    vertical-align: middle !important;
}

/* ==================================
 * Alle Gravity Forms submit buttons
 * ================================== */
body .gform_wrapper .gform_footer input[type=submit],
body .gform_wrapper .gform_footer button,
body .gform_wrapper .gform_page_footer input[type=button],
body .gform_wrapper .gform_page_footer input[type=submit],
body .gform_wrapper .gform_page_footer button,
body .gform_wrapper .gform_button,
body .gform_wrapper button.gform_button {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 1em;
    background: #f4a02a; /* oranje */
    color: #000000; /* zwarte tekst */
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    padding: 1em 2em;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover / focus */
body .gform_wrapper .gform_footer input[type=submit]:hover,
body .gform_wrapper .gform_footer button:hover,
body .gform_wrapper .gform_page_footer input[type=button]:hover,
body .gform_wrapper .gform_page_footer input[type=submit]:hover,
body .gform_wrapper .gform_page_footer button:hover,
body .gform_wrapper .gform_button:hover,
body .gform_wrapper button.gform_button:hover,
body .gform_wrapper .gform_footer input[type=submit]:focus,
body .gform_wrapper .gform_footer button:focus,
body .gform_wrapper .gform_page_footer input[type=button]:focus,
body .gform_wrapper .gform_page_footer input[type=submit]:focus,
body .gform_wrapper .gform_page_footer button:focus,
body .gform_wrapper .gform_button:focus,
body .gform_wrapper button.gform_button:focus {
    background: #7cc267; /* groen bij hover */
    color: #000000;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    outline: none;
}

/* Eventueel disabled states netjes houden */
body .gform_wrapper .gform_footer input[type=submit][disabled],
body .gform_wrapper .gform_footer button[disabled],
body .gform_wrapper .gform_button[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}