/*
 Theme Name:   LSTchild
 Theme URI:    
 Description:  Twenty Fourteen Child Theme
 Author:       Länsstyrelsen västra Götalands län
 Author URI:   
 Template:     twentytwentyfive
 Version:      1.0.0
 Tags:         responsive-layout, accessibility-ready
 Text Domain:  lstchild
*/


/* =Theme customization starts here
-------------------------------------------------------------- */


/* 
Focus styles 
Ensures that the child theme is in control of the focus marking.
*/
/* Set base values for outline. */
:where(.wp-site-blocks *:focus) {
    outline-style: none; /*  */
}
:where(.wp-site-blocks *:focus-visible) {
	outline: 2px solid var(--wp--preset--color--base) !important; /*  */
    box-shadow: 0 0 0 4px var(--wp--preset--color--contrast) !important; /*  */
    outline-offset: 2px; /*  */
	-webkit-box-decoration-break: clone; /*  */
    box-decoration-break: clone; /*  */
}
/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 2px;  /* Override twenty twentyfive */
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}


/*
 Media adjustments
*/

@media (min-width: 1025px) {

	/* Ensure the expanded menu shows and the toggle icon (burgermenu) hides above 1025px */
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
    }
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }

	
	/* Hides the element on large desktop screens */
	.mobile-only {
		display: none !important;
	}
	
}


/* 1024px: This breakpoint is often used to handle the landscape orientation of tablets and to accommodate smaller desktop screens and laptops. */
@media (max-width: 1024px) {
    
	/* Forces burgermenu to show */
	.wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }
    .wp-block-navigation__responsive-container-open {
        display: block !important;		
    }
		
		
	/* Header grid layout, navigation span over one grid */
	.custom-header-grid nav {
  		grid-column: span 1;
		justify-self: end;
	}
	
	
	/* Hide elements on smaller screens */
	.desktop-only {
        display: none !important;;
    }
    .mobile-only {
        display: block !important; /* or display: flex !important; depending on your layout */
    }
	
	
	/* Forces grid layouts to two columns */
	.custom-use-grid-breakpoint.is-layout-grid {
        grid-template-columns: 1fr 1fr;
	}
	
	
	/* Forces one column for column blocks on small screens. */
	.custom-use-column-breakpoint.wp-block-columns-is-layout-flex {
		flex-direction: column;
    }
	/* Revers order for column blocks on small screens. */
	.custom-reverse-column.wp-block-columns-is-layout-flex {		
        flex-direction: column-reverse;
    }
	
}

/* 768px: This is a very common breakpoint, originating from the original iPad's portrait width, that switches the layout from a mobile to a larger screen format. */	
@media (max-width: 768px) {
	
	/* Forces grid layouts to one column */
	.custom-use-grid-breakpoint.is-layout-grid {
        grid-template-columns: 1fr;
	}
}
/*
End - Media adjustments
*/





/*
Style changes on the modal for the burger menu.
*/
/* Extra padding for the modal */
.is-menu-open.wp-block-navigation__responsive-container {
	padding: 16px;	
}
/*
End - Style changes
*/


/*
Global WordPress Layout
Ensures that the footer is always at the bottom of
the page even if the page doesn't have enough content.
*/
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

.wp-site-blocks footer {
	margin-top: auto;
}

.admin-bar .wp-site-blocks {
	min-height: calc(100svh - var(--wp-admin--admin-bar--height));
}
/*
End - Global WordPress Layout
*/


/*
 Class used for forcing light outline on dark backgrond for buttons
*/
.custom-light-outline {
	outline-color: var(--wp--preset--color--base) !important; 
}
/*
 Class used for forcing dark outline on dark backgrond for buttons
*/
.custom-dark-outline {
	outline-color: var(--wp--preset--color--contrast) !important; 
}




/* CSS för att ta bort punkter från en specifik lista */
.custom-no-punkter-lista {
    list-style-type: none; /* Tar bort punkterna eller numreringen */
    padding-left: 0; /* Tar bort eventuell vänsterindragning */
    margin-left: 0; /* Tar bort eventuell vänstermarginal */
}
/* CSS för att ta bort understäcket för en länk */
.custom-no-underline-list a {
    text-decoration: none;
}

/* CSS för att lägga till ett understäck vid hovring för en länk */
.custom-underline-on-hover a:hover {
    text-decoration: underline;
}

/* CSS för att skapa understruket vid hover (hovring) tjockare  i navigeringsmenyn*/
.wp-block-navigation-item__content:hover {
    text-decoration: none;
    box-shadow: 0 3px 0; 
}