/*
 Theme Name:   Valokuva vaikuttaa
 Theme URI:    https://example.com/astra-child
 Description:  A child theme for the Astra theme
 Author:       Ville Kurki
 Author URI:   https://villekurki.fi
 Template:     astra
 Version:      1.0.0
*/

/* Add custom CSS below this line */

#page {
	width: 100vw;
}

#primary {
    overflow: visible !important;
    display: flex;
    flex-direction: column;
}


h1, .entry-content h1 {
    line-height: 1.2em !important;
}
.ast-left-sidebar {
    position: sticky;
    position: -webkit-sticky;
    top: 0; /* Adjust this value for spacing from the top */
    z-index: 9999;
}

.sidebar-main {
	height: 100vh !important;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: sticky;
	position: -webkit-sticky;
	padding-bottom: 30px;
	top: 50px;
	max-height: calc(-50px + 100vh);
}


@media (min-width: 922px) {
.widget-area {
    background-color: #BF7AF8;
    padding-top: 0 !important;
    padding-right: 1.5em !important;
    padding-left: 1.5em !important;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
}

@media (max-width: 922px) {
	.widget-area {
    	padding-right: 1em !important;
    	padding-left: 0 !important;
    	
	}
}

@media (max-width: 922px) {
    .ast-header-break-point #masthead .ast-primary-header-bar.main-header-bar {
        margin-left: 0em !important;
        
    }
    .ast-header-break-point .main-navigation ul .menu-item .menu-link {
    padding: 0 0 0 20px;
    display: inline-block;
    width: 100%;
    border: 0;
    border-bottom-width: 1px;
    border-style: solid;
    border-color: var(--ast-border-color)
}

}

.widget {
    background-color: #BF7AF8;
    padding-bottom: 0;
}

.ast-left-sidebar #secondary {
	margin: 0;
	padding: 0;
	background-color: #BF7AF8;
}

@media (min-width: 922px) {
    #secondary {
		min-height: 100vh;
	}
}

.ast-container {
	padding: 0 !important;
	max-width: 100%;
	margin: 0 auto;
}

@media (min-width: 922px) {
    #primary {
		padding: 0 60px 60px 60px !important;
		margin: 50px 0;
	}
}

@media (min-width: 922px) {
    .etusivuosa {
    padding: 0 2.5em 1em 2.5em;
}
}
@media (max-width: 922px) {
    .etusivuosa {
    padding: 0 1em 1em 1em;
    }
    
}

.etusivuosa p {
	margin-bottom: 0;
}

.etusivuotsikko {
        padding-top: 10px;
	    padding-bottom: 10px;
    }
.etusivualaotsikko {
        padding-bottom: 20px;
        font-weight: normal;
}

@media (min-width: 922px) {
    .etusivukuva {
	max-height: 50vh;
}
}

.etusivukuva {
    width: 100%; /* Full width of the content container */
    height: auto; /* Default height adjustment */
    object-fit: cover; /* Ensures the image fills the container */
}

    
.linkki {
    text-decoration: underline;
    padding-top: 1em;
}

.sivulogo {
	margin-top: 0;
	max-width: 90% !important;
}

.valikkoyla {
	font-size: 1.2rem;
	font-weight: bold;
}

.alavalikko {
	font-size: 1rem;
	font-weight: normal;
}

.alintaso {
	font-size: 0.8rem;
}
.widget_nav_menu ul ul.sub-menu li {
    padding-left: 10px;
}

@media (max-width: 922px) {
    .ast-article-single {
		padding-right: 1em !important;
		padding-left: 1em !important;
	}
	.ast-container {
    	margin-left: auto;
    	margin-right: auto;
    	padding-left: 0 !important;
    	padding-right: 0 !important;
	}
	.sidebar-main {
		display: none;
	}
	.widget_nav_menu ul ul.sub-menu li {
    	padding-left: 0;
	}
/*	.valikkoyla {
		padding-bottom: 1em;
	}
	*/
	
	
}

.alavalikko {
		padding-left: 10px;
	}

.ast-row {
    margin-left: 1em !important;
    margin-right: 1em !important;
    flex: 1;
}

@media (min-width: 922px) {
    .ast-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

.entry-content {
	max-width: 1200px;
}

#block-16 img {
	box-sizing: border-box;
}

.entry-header .post-thumb-img-content {
    text-align: left !important;
}

/* Flexbox for post grid */
.ast-blog-layout-4-grid .ast-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.ast-blog-layout-4-grid .ast-row .ast-article-post {
    width: 48%;
    margin-bottom: 3em;
}

@media (max-width: 768px) {
    .ast-blog-layout-4-grid .ast-row .ast-article-post {
        width: 48%;
    }
}

@media (max-width: 480px) {
    .ast-blog-layout-4-grid .ast-row .ast-article-post {
        width: 100%;
    }
}

.ast-single-post .entry-title, .ast-single-post .entry-title a {
    line-height: 1.4;
}
 
.entry-header .entry-title {
    font-size: 3rem !important;
}

.ast-menu-toggle {
	box-shadow: none;
}

.ast-mobile-popup-content {
	padding-left: 2em;
	padding-right: 2em;
}

@media (min-width: 480px) {
	.single .post-navigation {
    	padding: 2em 2em 1em 2em;
	}
}

.mobiilialapalkkilogo {
	padding-right: 2em;
	padding-bottom: 2em;
	padding-left: 2em;

}

 .menu-toggle.main-header-menu-toggle {
	padding-right: 0 !important;
}


/* Masonry-muotoilu artikkelilistalle - 

Ensure the grid container takes up the full width */
.ast-blog-layout-4-grid .ast-row {
    display: block; /* Remove any grid or flexbox styling */
    margin-left: -20px; /* Negative margin to compensate for gutter */
    width: auto; /* Allow the container to adjust its width */
    
}

/* Article post styling inside the Masonry layout */
.ast-blog-layout-4-grid .ast-row .ast-article-post {
    width: calc(50% - 20px); /* Two posts per row with 20px gap */
    margin-left: 20px;
    margin-bottom: 60px;
    float: left; /* Make sure the items float correctly */
}

/* Ensure images fill their containers */
.ast-blog-layout-4-grid .ast-row .ast-article-post img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.ast-blog-layout-4-grid .ast-article-inner {
    box-shadow: none;
}

.ast-grid-common-col {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.ast-article-post.remove-featured-img-padding .blog-layout-4 .post-content .ast-blog-featured-section .post-thumb-img-content {
                margin-left: 0;
                margin-right: 0;
            }

/* Responsive adjustments for smaller screens */
@media (max-width: 1024px) {
    .ast-blog-layout-4-grid .ast-row .ast-article-post {
        width: 100%; /* Single column layout on medium screens */
			margin-left: 0;
    }
    .ast-article-inner {
        padding: 0;
    }
}

@media (max-width: 768px) {
    .ast-blog-layout-4-grid .ast-row .ast-article-post {
        width: 100%; /* Single column layout on mobile */
    }
}

/* Change button color inside the taxonomy container */
.ast-taxonomy-container .ast-button {
    background-color: #BF7AF8; /* Set the background color of the button */
    border-color: #BF7AF8; /* If the button has a border, change it to the same color */
	margin-right: 8px; /* Adjust the values to control the spacing */
    white-space: normal; /* Allow text to wrap within the button */
    display: inline-block; /* Buttons remain inline by default */
}


.ast-taxonomy-container.tags-links {
	font-weight: normal;
	font-style: italic;
	
}

.ast-taxonomy-container {
	display: flex; /* Set container as a flexbox */
    flex-wrap: wrap; /* Allow buttons to wrap to the next line */
    justify-content: flex-start; /* Align buttons to the left */
	line-height: 2.4em;
}

.image-description {
	font-style: italic;
	font-size: 80%;
	padding: 10px 0 0 0;
}

.wp-element-caption {
	font-style: italic;
	font-size: 80%;
	padding-top: 10px;
}

.ast-terms-link {
    font-style: italic;
}

.mobiilisivulogo {
	max-width: 70%;
}

.ast-menu-toggle:focus {
    outline: none;
}


.menu-toggle-close:focus {
border-style: none !important;
	
}
.ahfb-svg-iconset svg {
    width: 30px;
    height: 30px;
    transition: none;
}


.ast-excerpt-container p {
    font-style: italic;
}


/*Align the buttons section */
.sub-category-filter-container {
    display: flex;
    justify-content: flex-start;
    padding: 0 1em 2em 2.5em;
    
}

@media (max-width: 922px) {
    .sub-category-filter-container {
        padding-left: 1em !important;
    }
}

.cat-links.badge a, .tags-links.badge a {
    padding: 8px 8px !important;
}

.ast-header-break-point .main-header-menu {
    background-color: #BF7AF8 !important;
    border-top-width: 0;
}

/* Hide the mobile menu toggle icon */
.mobile-menu-toggle-icon {
    display: none !important;  /* Hides the toggle icon */
}


/* Add the uploaded SVG for the open button */
.menu-toggle.main-header-menu-toggle.ast-mobile-menu-trigger-minimal::before {
    content: "";
    display: inline-block;
    width: 30px; /* Adjust the size as needed */
    height: 30px; /* Adjust the size as needed */
    background-image: url('https://www.valokuvavaikuttaa.fi/wp-content/uploads/2024/11/1608503_angle_double_down_icon.svg');  /* URL of the uploaded open button SVG */
    background-size: contain; /* Ensure the SVG fits within the button */
    background-repeat: no-repeat; /* Prevent repeating the image */
    background-position: center; /* Center the icon inside the button */
}

/* Remove the border and outline when the mobile menu toggle button is focused */
.ast-button-wrap .ast-mobile-menu-trigger-minimal:focus {
    border: none !important;  /* Removes the border */
    outline: none !important; /* Removes the outline */
}


/* Hide the current mobile menu toggle icon */
.menu-toggle.main-header-menu-toggle.ast-mobile-menu-trigger-minimal.toggled svg {
    display: none !important;  /* Hides the current SVG icon */
}

/* Add the SVG for the chevron-up (up arrow) when the menu is toggled */
.menu-toggle.main-header-menu-toggle.ast-mobile-menu-trigger-minimal.toggled::before {
    content: '';  /* Clear any text content */
    display: inline-block;
    width: 30px; /* Set the desired size */
    height: 30px;
    background-image: url('https://www.valokuvavaikuttaa.fi/wp-content/uploads/2024/11/1608506_angle_double_up_icon.svg'); /* Path to your SVG */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; /* Center the SVG */
}

.ast-main-header-nav-open.ast-header-break-point #ast-desktop-header .ast-desktop-header-content, .ast-main-header-nav-open.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content {
    height: calc(100vh - 100px);
}

.lang-item a {
    font-weight: bold;  /* This makes the text bold */
}

/* Example of targeting language items specifically */
.ast-header-break-point .main-navigation .stack-on-mobile li.lang-item {
    width: 10% !important;  /* Apply only to language items */
}

.footer-widget-area li {
	padding-bottom: 10px;
}

/* Target the parent container for lang items */
.lang-item.menu-item {
    display: inline-block; /* Ensures items align horizontally */
    margin-right: 10px; /* Add spacing between items */
}

/* Additional cleanup */
.lang-item.menu-item {
    padding-left: 0 !important; /* Adjust padding */
    text-align: left;
}



/* Default button style: White background */
.sub-category-filter-container .wp-block-buttons .wp-block-button .wp-block-button__link.is-style-outline:not(.has-background) {
    background-color: #ffffff; /* White background for inactive buttons */
    border-radius: 3px; /* Optional: Rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition for hover and active */
}

/* Hover state: Background changes to var(--ast-global-color-2) */
.sub-category-filter-container .wp-block-buttons .wp-block-button .wp-block-button__link.is-style-outline:not(.has-background):hover {
    background-color: var(--ast-global-color-2); /* Active background color on hover */
}

/* Active state: Background is var(--ast-global-color-2) */
.sub-category-filter-container .wp-block-buttons .wp-block-button .wp-block-button__link.is-style-outline:not(.has-background).current-cat,
.sub-category-filter-container .wp-block-buttons .wp-block-button .wp-block-button__link.is-style-outline:not(.has-background):active {
    background-color: var(--ast-global-color-2); /* Background color for active buttons */
}

.sub-category-filter-container .wp-block-buttons .wp-block-button .wp-block-button__link.current-cat {
    background-color: var(--ast-global-color-2); /* Active background color */
    border-radius: 3px; /* Rounded corners */
}

@media (max-width: 922px) {
	.sub-category-filter-container .wp-block-button .wp-block-button__link {
		font-size: 0.6rem !important;
		padding-left: 10px;
		padding-right: 10px;
	}
}


.sub-category-filter-container .category-icon {
    width: 1.1rem; /* Adjust size as needed */
    height: 1.1rem;
    margin-right: 5px; /* Space between icon and text */
    vertical-align: middle; /* Aligns icon with text */
}



/* LAZY BLOCK CHECKLIST */
ul.lazy-block-checklist {
	margin-bottom: 1em !important;
	padding-left: 0;
	margin-left: 0px;
}
ul.lazy-block-checklist li {
	list-style: none;
	font-size: large;
	margin-bottom: 1em;
}
ul.lazy-block-checklist li label {
	cursor: pointer;
	user-select:none;
	font-weight: bold;
}
ul.lazy-block-checklist li input {
	width: 22px;
	height: 22px;
	vertical-align: top;
	margin-right: 10px;
	cursor: pointer;
}
ul.lazy-block-checklist li label .label {
	display: inline-block;
	width: calc(100% - 50px);
}
ul.lazy-block-checklist li .label div {
	font-weight: normal;
}

.entry-content ul {
    padding: 0 !important;
}

label {
    color: var(--ast-global-color-0);
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit !important;
    line-height: var(--ast-body-line-height, 1.65) !important;
} 

.lazy-block-checklist input[type="checkbox"] {
    accent-color: #bf7af8; /* Change the background and tick color */
}

.lazy-block-checklist input[type="checkbox"]:checked::before {
    color: #fff !important; /* Modern browsers will render the tick in white */
}


input[type="checkbox"] {
    position: relative;
    line-height: 1 !important;
}
/* Base Checkbox Styling */
input[type="checkbox"] {
    appearance: none; /* Remove default browser styling */
    -webkit-appearance: none; /* For Safari */
    position: relative; /* Enable positioning for custom tick */
    width: 20px;
    height: 20px;
    border: 2px solid black; /* Border color */
    border-radius: 4px; /* Optional: Rounded corners */
    background-color: #fff; /* Background color when unchecked */
    cursor: pointer;
    accent-color: #bf7af8;
}

/* Custom Tickmark for Checked State */
input[type="checkbox"]:checked {
    background-color: #bf7af8 !important; /* Background color when checked */
    border-color: #bf7af8 !important; /* Optional: Same as background */
}

input[type="checkbox"]:checked::after {
    content: '✔'; /* Unicode or custom tickmark */
    color: #fff; /* Tickmark color */
    font-size: 20px; /* Adjust size of the tick */
    position: absolute;
    top: 0 !important; /* Centering adjustments */
    left: 2px; /* Centering adjustments */
}