/*
Theme Name: GR Paden
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Description: GR-Paden child theme from Twenty Twenty-Five
Author: Mark Plessers
Textdomain: mplessers
Author URI: https://mplessers.synology.me/grpaden
Template: twentytwentyfive
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@font-face {
    font-family: 'eras_bold_itcregular';
    src: url('fonts/eras-itc-bold-webfont.woff2') format('woff2'),
         url('fonts/eras-itc-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.is-position-sticky {z-index: 5000;}
/* Header and post-article */
.wp-block-site-title a { font-family: 'eras_bold_itcregular'; }
.grpaden-transparent { padding: 20px; background-color: rgba(0, 0, 0, 0.7); border-radius: 20px; }
.grpaden-post-title { background: #404040; color: #ffffff; }
.grpaden-date { color: #ff0000; font-family: 'eras_bold_itcregular'; }
.grpaden-post-title h2 { color: #ff0000; font-family: 'eras_bold_itcregular'; }
.grpaden-post-title h3 { font-family: 'eras_bold_itcregular'; text-align: 'center'; }

/* Archive overview */
.wp-block-column h2.wp-block-post-title a { color: white; border: 4px solid white; text-decoration: none; background-color: #d00000; color: white; padding: 5px 20px; border-top-right-radius: 20px;  border-bottom-right-radius: 20px;}
.wp-block-column h2.wp-block-post-title a:hover { border: 4px solid rgba(224,0,0,0.6); }

/* CSS for report and event overview */
.gr-filter label {border: solid darkgray 1.5px; padding: 3px; padding-left: 8px; padding-right: 8px; margin: 3px; border-radius: 15px; line-height: 250%; font-family: Arial;}
.gr-filter input[type=checkbox] {display: none;}
.gr-filter input[type=checkbox]:not(:checked) + label {background:  linear-gradient(177deg, #ffffff 40%, #ffd0d0 60%); color: #808080;}
.gr-filter input[type=checkbox]:checked + label {background: linear-gradient(177deg, #ffffff 40%, #ff0000 60%); /* white to red */ color: black; font-weight: 600; -webkit-text-stroke: 0.25px #fff; /* thin white outline */ text-shadow: 0 0 2px #ffffffaa; /* micro-glow */}

.gr-filter input[type=checkbox].sgr:not(:checked) + label {background: linear-gradient(177deg, #ffffd0 40%, #ffd0d0 60%);}
.gr-filter input[type=checkbox].sgr:checked + label {background: linear-gradient(177deg, #ffff00 40%, #ff0000 60%); /* yellow to red */}

.gr-filter input[type=checkbox].none:not(:checked) + label {background: linear-gradient(177deg, #ffffff 40%, #d0d0d0 60%);}
.gr-filter input[type=checkbox].none:checked + label {background: linear-gradient(177deg, #ffffff 40%, #808080 60%); /* black to gray */}

#table_result th { cursor: pointer; transition: background 0.3s ease; color: white; background: linear-gradient(to top, #f00000, #d00000); border: 1px solid black;}
#table_result th.sorted-asc { color: white; background: linear-gradient(to bottom, #f06060, #d04040);  border: 1px solid black;}
#table_result th.sorted-desc { color: white; background: linear-gradient(to top, #f06060, #d04040);  border: 1px solid black;}
/* Optional: add a small arrow indicator */
#table_result th.sorted-asc::after { content: " ▲"; }
#table_result th.sorted-desc::after { content: " ▼"; }

/* Not full width menu */
.wp-block-navigation__responsive-container.has-modal-open.is-menu-open { width: 30%; }

/* Buttons on bottom */
footer .wp-block-navigation-item .wp-block-navigation-item__content {background-color: #D00000; padding: 3px 10px; border: 2px solid white; border-radius: 20px;}
footer .wp-block-navigation-item .wp-block-navigation-item__content:hover {border: 2px solid #D00000;}

/* FAQ */
.grpaden-accordion { background: no-repeat; border-top-left-radius: 20px; border-top-right-radius: 20px; background-color: #d00; color: #fff; cursor: pointer; padding: 14px; width: 100%; border: none; text-align: left; outline: none; font-size: 20px; transition: 0.4s; background-position: right center; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40px' width='40px'><text x='0' y='25' fill='white' font-size='20'>+</text></svg>");}
.active, .grpaden-accordion:hover { background-color: #f00; }
.grpaden-answer { padding: 10px 15px; display: none; background-color: white; overflow: hidden; border: 1px solid #f00; margin-top: 0px;}

/* overlay wiki-images */
.grpaden-wiki-overlay { position: absolute; bottom: 5px; right: 5px; background-color: rgba(255, 255, 255, 0.7); color: black; padding: 4px 8px; font-size: 12px; border-radius: 5px; display: flex; align-items: center; gap: 3px; }
.grpaden-wiki-overlay svg { width: 15px; height: 15px; }

/* Table-List toggle */
.grpaden-view-toggle-btn {
    position:absolute;
    top:-3.2rem;
    right:1rem;
    width:44px;
    height:44px;
    border-radius:50%;
    border:0;
    background: rgba(128,128,128,0.25);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
    transition:all .16s ease;
  }
.grpaden-view-toggle-btn:focus { outline:3px solid rgba(0,115,170,0.18); }
.grpaden-view-toggle-btn:hover { background:#0073aa; color:#fff; }
.grpaden-view-toggle-btn svg { width:22px; height:22px; display:block; }

.grpaden-view { display:none; animation:fadeIn .22s ease; background:#ffffff;}
.grpaden-view.active { display:block; }
@keyframes fadeIn { from {opacity:0; transform:scale(.995)} to {opacity:1; transform:scale(1)} }

/* The black map in REPORTS */
#grpaden-map {display: block; height: 350px;}
.route-label div { font-size:9px; font-weight:bold; color:white; text-shadow:2px 2px 4px #000; white-space: nowrap; display: inline-block; padding: 1px 2px; border-radius: 5px; opacity: 0.7;}
.leaflet-control-layers { max-height:75vh; overflow:auto; }
.leaflet-control-layers-expanded { display:none !important; }
.leaflet-control-layers-list { display:none !important; }

/* Optional for semi-sticky titelbar on table-pages */

.sticky-header {
/*	position: fixed; */
	top:0;	left:0;	right:0;
	transition: transform .4s ease, height .4s ease, background-color .4s ease;
	z-index: 999999;
	background-color: white;
	}

.scroll-up .sticky-header { transform: translateY(0); }
.scroll-down .sticky-header { transform: translateY(-100%); }
.scroll-up .is-position-sticky { pointer-events: auto;}
.scroll-down .is-position-sticky { pointer-events: none;}
.scroll-up header { pointer-events: auto;}
.scroll-down header { pointer-events: none;}

@media screen and (max-width:768px){
	.sticky-header { transition: transform 1s ease; }
}