/*
 * Theme Name:   GSIdrija theme
 * Theme URI:    https://gsidrija.si
 * Description:  A child theme for Twenty Twenty-Four for GS Idrija
 * Author:       Ozbolt Menegatti
 * Author URI:   https://ozbo.lt
 * Template:     twentytwentyfour
 * Version:      0.0.1
 * License:      GNU General Public License v2 or later
 * License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:  twentytwentyfour-child
 * */

/* ensure that footer sticks to bottom */
html, body {
    height: 100%;
}
.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;
}
footer {
    flex-shrink: 0;
}

nav a:hover {
	text-decoration: none;
  	color: var(--wp--preset--color--temno-siva) !important;
}

/* Custom Dashicons for GSIdrija */
.dashicons.dashicons-copyright::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('fonts/copyright.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.dashicon-url {
	text-decoration: none;
}

/* header tricks to make it sticky to top with nice animations */
.header-bottom {
	background-color: white;
	box-shadow: 0px 8px 4px -4px #ffd7d4;

	transition: opacity 0.2s ease 0.01s;
	max-height: 1000px; /* for transition purposes */
}
header {
	position: sticky;
	top: 0;
	bottom: 0;
	z-index: 100;
}
.header-bottom-hide {
	max-height: 0;
	opacity: 0;
	padding: 0 !important;

	transition: max-height 0.1s linear 0.2s, padding 0.1s linear 0.2s, opacity 0.2s ease; /* max height and padding transition after opacity */
}

.icon-font {
	/* color bela transformed to filter for img */
	filter: invert(89%) sepia(3%) saturate(814%) hue-rotate(314deg) brightness(111%) contrast(99%);
}

@media (max-width: 768px) {
	.center-on-mobile { 
		align-items: center;
		text-align: center;
		justify-content: center;
	}

	.hide-on-mobile {
		display: none !important;
	}
}
@media (min-width: 768px) {
	.margins-on-big-screen {
		margin-left: 2em;
		margin-right: 2em;
	}
}

/* title index tricks with banner and title text */
.index-title {
	align-items: stretch;
}
.index-title figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.index-left-image img {
	object-position: right;
	mask-image: linear-gradient(
		to left,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.5) 5%,
		rgba(0, 0, 0, 1) 10%
	);
}
.index-right-image img {
	object-position: left;
	mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.5) 5%,
		rgba(0, 0, 0, 1) 10%
	);
}
.index-title h1 {
	white-space: collapse;
	word-break: normal;
}
.index-events {
    margin-left: auto;
    margin-right: auto;
    padding-left: 50px;
    padding-right: 50px;
    max-width: 1200px;
}

main {
	padding-bottom: 1em;
}
main:has(.index-title) {
	padding-bottom: 0 !important;
}
footer {
	margin-top: 0;
}


/* Custom styles for single class pages */
.single-class .wp-block-post-title {
	font-size: 2rem;
	margin-bottom: 1rem;
}

.single-class .wp-block-post-featured-image img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.gray-button {
	display: inline-flex;
  	padding: 10px 20px;
  	background: var(--wp--preset--color--siva);
  	color: white;
  	text-decoration: none;
  	border-radius: 4px;
  	font-weight: bold;
  	width: 70%;
  	max-width: 9em;
  	height: 70%;
  	align-items: center;
  	justify-content: center;
}

.gray-button:hover {
	background: var(--wp--preset--color--svetlo-siva);
}

.shortcode-row {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
}

.shortcode-column {
	flex: 1;
	min-width: 10em;
	text-align: center;
}

/* timetable */

.timetable table {
	border-collapse: collapse;
	width: 100%;
	max-width: 800px;
	margin: 20px 0;
	font-family: Arial, sans-serif;
}

.timetable th,
.timetable td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: center;
}

.timetable th {
	background-color: #f2f2f2;
}

.timetable .time-label {
	font-weight: bold;
	background-color: #f9f9f9;
}

.timetable .busy {
	background-color: #ff9999; /* Light red for busy */
	color: #fff;
}

.timetable .free {
	background-color: #99ff99; /* Light green for free */
}

/* Calendar / posts */
.events-list {
        max-width: 100%;
        margin: 0 auto;
}

.events-list h2 {
        margin-bottom: 2ex;
        margin-top: 0;
        text-transform: uppercase;
        padding-left: 20px;
        color: var(--wp--preset--color--rdeca);
}

.month-header {
        background: #f5f5f5;
        padding: 10px;
        margin: 20px 0 10px;
        border-left: 5px solid var(--wp--preset--color--rdeca);
}

.event-item {
        display: flex;
        flex-wrap: wrap;
        padding: 15px 10px;
        position: relative;
        cursor: pointer;
        text-decoration: none;

        border-radius: 10px;
        box-shadow: 5px 5px 5px 5px #e6e6e6;
        padding: 10px 20px 20px;
        margin-bottom: 25px;
}

.event-item:hover, .event-item:focus {
        background: rgba(0,0,0,0.07);
}

.event-date {
        font-weight: bold;
        color: var(--wp--preset--color--crna);
        width: 30%;
        text-align: right;
        margin-bottom: 1ex;
        margin-top: 0;
}

.event-title {
        font-weight: bold;
        color: var(--wp--preset--color--crna);
        width: 70%;
        margin-bottom: 1ex;
        margin-top: 0;
}

.event-description {
        color: var(--wp--preset--color--temno-siva);
        line-height: 1.5;
        width: 70%;
        margin-bottom: 5px;
        margin-top: 0;
}

.event-place {
        width: 30%;
        text-align: right;
        font-style: italic;
        color: var(--wp--preset--color--temno-siva);
}


/* modal stuff for calendar/posts */
main.no-scroll {
        overflow: hidden;
}

.modal__overlay {
        background: rgba(0,0,0,0.8);
        z-index: 110;
}

.modal__container {
        max-width: 700px !important;
        margin-top: 3em;
        margin-left: auto;
        margin-right: auto;
}

.modal__close {


/* Add the background image at the bottom */
#post-main {
	background-image: url('/wp-content/themes/gsidrija/images/footer.jpg');
	background-size: contain;
	background-position: center bottom;
	background-repeat: no-repeat;
}

.wp-block-latest-posts li {
	box-shadow: 5px 5px 5px 5px #e6e6e6;
	padding: 10px 20px 20px;
	margin: 20px 0;
	text-align: center;
	transition: all 0.3s ease;
}

/* navigation is too wide before it reaches :(hardcoded): 600px, so some hacks */
@media (max-width:1050px) {
	.logo-img-container {
		display: none !important;
	}
	.header-bottom {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
	.nav-container {
		margin-left: auto !important;
		margin-right: auto !important;
	}
	nav {
		gap: 0.7em !important;
		font-size: 0.9rem;
	}
}