/*
* FooGallery Custom CSS
* This file is created by adding custom CSS on FooGallery Settings page in wp-admin
* Created : 13 Apr 2026, 8:47 am
*/

/* ---------- THUMBNAILS ---------- */

/* ----- Tausta ----- */
.foogallery .fg-caption {
     display: grid;
     height: 100%;
     align-items: center;
     background-color: rgba( 0, 0, 0, 0.4 );
}

/* ----- Otsikko ----- */
.foogallery .fg-caption-title {
     font-family: Montserrat, Geneva, Verdana, sans-serif;
     font-size: 1.5rem;
     font-weight: 600;
     line-height: 1.2;
     text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4),
          0px 2px 4px rgba(0, 0, 0, 0.1),
          0px 3px 6px rgba(0, 0, 0, 0.1);
}

/* ----- Kuvaus ----- */
.foogallery .fg-caption-desc {
     font-family: Montserrat, Geneva, Verdana, sans-serif;
     font-size: 1.2rem;
     font-weight: 400;
     color: #fafafa;
}

/* ---------- LIGHTBOX ---------- */

/* ----- Tausta ----- */
.fg-panel {
     background-color: rgba(37, 36, 34, 0.3);
     backdrop-filter: blur(40px);
}
/* ----- Fullscreen-tausta ----- */
.fg-panel-fullscreen {
     background-color: rgb(37, 36, 34);
}

/* ----- Kuvaus ----- */
.fg-panel.fg-panel-info-bottom:is(.fg-medium) .fg-panel-info-inner {
     border-top-width: 0px;
     background-color: rgba(37, 36, 34, 0.3);
     font-family: Montserrat, Geneva, Verdana, sans-serif;
     color: #fafafa;
}

.fg-media-caption-title {
     font-weight: 600;
     font-size: 1.2rem;
}

.fg-media-caption-description {
     font-weight: 400;
     font-size: 1rem;
}

/* ----- Thumbnails ----- */
.fg-panel.fg-button-light .fg-panel-thumb, 
.fg-panel.fg-button-light .fg-panel-thumb-spacer {
     border-width: 0px;
}

.fg-panel.fg-button-light .fg-panel-thumb {
     background-color: #252422;
}

.fg-panel-thumbs {
     background-color: rgba(20, 20, 20, 0.5);
     padding: 7px ;
}

/* ----- Painikkeet ----- */
.fg-panel.fg-button-light .fg-panel-button:not([aria-pressed=true], 
[aria-pressed=true]:focus), 
.fg-panel.fg-button-light .fg-panel-button:is([aria-pressed=true]) {
     border-width: 1px;
     border-color: rgba(251, 251, 251, 0.6);
     border-radius: 30px;
     padding: 20px;
     width: auto;
     height: auto;
}

/* --- Normaali --- */
.fg-panel.fg-button-light .fg-panel-button:not([aria-pressed=true], 
[aria-pressed=true]:focus) {
     background-color: rgba(20, 20, 20, 0.5);
     color: rgba(251, 251, 251, 0.6);
}

/* --- Aktiivinen --- */
.fg-panel.fg-button-light .fg-panel-button:is([aria-pressed=true]) {
     background-color: rgba(251, 251, 251, 0.4);
     color: rgba(20, 20, 20, 0.8);
}

/* --- Hover --- */
.fg-panel.fg-button-light .fg-panel-button:not([aria-pressed=true]):hover, .fg-panel.fg-button-light .fg-panel-button:is([aria-pressed=true]):hover {
     background-color: #FFBD19;
     color: rgba(20, 20, 20, 0.8);
     border-color: rgba(251, 251, 251, 0.9);
}