/*
 Theme Name:   LSTchild
 Theme URI:    
 Description:  Länsstyrelsens WordPress-tema för tjänsten Extrawebb. Ett child-tema till temat Twenty Twentyfive.
 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
*/


/*
Custum "nice to have" classes
Can be used to overide theme behaivor
*/
/*
 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; 
}
/* Class used to remove the dott or number in a lists with liks.*/
.custom-clean-list ul {
    list-style-type: none !important; /* Remove the style (dott or number) */
    padding-left: 0 !important;
    margin-left: 0 !important;
}
/*
End - Custum "nice to have" classes
*/


/* Header - Class used for the top and main group, replaces underline with thick box-shadow on hover for links*/
.custom-header-top-group-decoration a,
.custom-header-menu-group-decoration a {
    text-decoration: none;
    transition: box-shadow 0.2s ease-in-out; /* Soft transition */
}
.custom-header-top-group-decoration a:hover {
    box-shadow: 0 2px 0; /* Hover-effects */
}
.custom-header-menu-group-decoration a:hover {
    box-shadow: 0 3px 0; /* Hover-effects */
}
/*
End - Header
*/


/* Footer - Class used to remove the "dott" and the underline in the lists with liks. Underline only on hover.*/
.custom-footer-clean-list ul {
    list-style-type: none !important; /* Remove the style (dott or number) */
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.custom-footer-clean-list ul a {
text-decoration: none; /* Remove underline for links in the list */
}
.custom-footer-clean-list ul a:hover {
    text-decoration: underline; /* Underline for links in the list on hover only */
}
/*
End - Footer
*/