/* ---------------------------------------------------------------------------------------------

	Theme Name: TTL Version: 3.0.0 
    Text Domain: davis-blocks
	Version: 0.2.3
	Description: TTL V3 extended from Davis Blocks is a clean, simple and fast block theme built for Full Site Editing. It can be used out of the box as a lightweight blog theme, or as a foundation for greater things when customized in the Site Editor.
	Tags: blog, one-column, custom-background, custom-colors, custom-menu, editor-style, featured-images, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks, full-site-editing
	Author: Anders Norén
	Author URI: https://andersnoren.se
	Theme URI: https://andersnoren.se/teman/davis-blocks-wordpress-theme/
	License: GNU General Public License version 2.0
	License URI: https://gnu.org/licenses/gpl-2.0.html
	Requires PHP: 5.6
	Tested up to: 6.5

/* --------------------------------------------------------------------------------------------- */

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	padding-top: 50px;
}

a { text-underline-offset: .15em; }

a:where(:not(.wp-element-button)):hover {
	text-decoration: underline!important;
}

a:where(:not(.wp-element-button)){
	text-decoration: none!important;
}


/* Input styles */

input, textarea, select, button {
	background-color: inherit;
	border-radius: 0;
	font-family: inherit;
	font-size: inherit;
}

input, textarea, select {
	background-color: var( --wp--preset--color--background );
	border: .1rem solid var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--foreground );
	padding: .5em;
}

/* Editor Post Title */

.editor-post-title__input { text-align: center; }

/* Block: Navigation */

.wp-block-navigation__responsive-container-close {
	/* right: 50%;
	transform: translateX( 50% ); */
	padding: 50px 50px;
}


.wp-block-navigation__responsive-container-content {
	padding: 50px;
}

.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
	justify-content: flex-start!important;
	align-items: start!important;
	text-align: left!important;
}

.wp-block-navigation__responsive-container {
	background-color: #000;
	border-radius: 0;
	box-shadow: none;
	color: #FFF;
	justify-content: flex-start!important;;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: flex-start!important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	align-items: flex-start!important;
}


.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul li{
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul li {
	border-bottom: 2px solid #FFF;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul li:last-of-type {
	border-bottom: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container a:where(:not(.wp-element-button)) {
	font-size: 18vh!important;
	line-height: 18vh;
	text-decoration: none;
}


.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container a:hover {
	text-decoration: underline #fff 1px!important;
}

/* Block: Search Form */

.wp-block-search__input,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	border-color: var(--wp--preset--color--secondary) !important;
}

/* Block: Separator */

hr.is-style-davis-separator {
	border: none;
	border-bottom: .5px solid;
	border-top: .5px solid;
	overflow: visible !important;
	position: relative;
}

hr.is-style-davis-separator:before,
hr.is-style-davis-separator:after {
	background-color: var( --wp--preset--color--background );
	border: 1px solid;
	box-sizing: border-box;
	content: "";
	height: 12px;
	position: absolute;
		top: calc( 50% - 6px );
	transform: rotate( 45deg );
	width: 12px;
}

hr.is-style-davis-separator:before { left: calc( 50% - 14px ); }
hr.is-style-davis-separator:after { left: calc( 50% + 2px ); }

footer {
	background-color: var( --wp--preset--color--secondary );
}

ul {
   list-style-position: inside;
}

.hide-for-desktop {
	display: none !important;
}

.gutentor-equal-column-height > .grid-container > .grid-row > .gutentor-dynamic-single-column > .gutentor-single-col {
	height: 100%;
}

.text-gradient {
  background: linear-gradient(180deg, #0D0D0D 0%, #0D0D0D 45%, #B1B1B1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.footer-quote {
	font-size: 4vw!important;
	line-height: 4vw!important;
}

.hero-header-text {
	font-size: 5vw!important;
	line-height: 5vw!important;

}

.hero-header-text u {
	text-decoration-thickness: 0.25vw;
}

.accordion-header {
	color: #0D0D0D!important;
}

/* ==== Sticky reveal header (replaces the old rules) ==== */
.site-header {                    /* or .site-header / #masthead */
    position: fixed;
    top: 25px; left: 0; right: 0;
    z-index: 9999;
	transition: top .6s cubic-bezier(.4, 0, .2, 1);   /* animate `top`, not transform */
    will-change: top;                  /* keeps the animation smooth */
}

/* Hidden state while scrolling down */
.site-header.is-hidden {
    top: -100%;                        /* move header straight up */
}

.site-header.is-bottom {

	img {
		filter: invert(1);
	}

	color: #FFF;

}

.ttl-header {
	padding-top: 20px;
}

.site-header img {
	width: 250px!important;
}

.home-video-hero-container {
	position: relative;
	height: 365.88px;
	overflow: hidden;
}

.footer-logo-gallery {
	height: 100px;
}

.footer-logo-gallery img {
	height: 150px!important;
	width: auto;
	object-fit: contain;
	align-self: center;
}

/* 1 — the button becomes a positioning context
----------------------------------------------*/
.wp-block-navigation__responsive-container-open{
	position:relative;
	display:inline-flex;
	align-items:center;
	padding-right:48px;          /* 30 px icon + 8 px gap + a little slack */
	line-height:1;
}

/* 2 — horizontal bar
----------------------*/
.wp-block-navigation__responsive-container-open::before{
	content:'';
	position:absolute;
	top:50%;
	right:8px;                  /* 8 px gap from the text */
	width:30px;                 /* whole icon width */
	height:2px;                 /* stroke thickness */
	background:currentColor;
	transform:translateY(-50%); /* vertical-centre it */
	transition:transform .25s ease;
}

/* 3 — vertical bar (centre is 8 px + 15 px = 23 px from the edge)
------------------------------------------------------------------*/
.wp-block-navigation__responsive-container-open::after{
	content:'';
	position:absolute;
	top:50%;
	right:22px;                 /* 8 px gap + (30 px/2 - 1 px half-stroke) */
	width:2px;
	height:30px;
	background:currentColor;
	transform:translateY(-50%);
	transition:transform .25s ease;
}

/* 4 — collapse the vertical bar → “minus” when the menu is open
----------------------------------------------------------------*/
nav.is-menu-open .wp-block-navigation__responsive-container-open::after,
.wp-block-navigation__responsive-container-open[aria-expanded="true"]::after{
	transform:translateY(-50%) scaleY(0);
}

.single-case_study .wp-block-gallery {
	gap: 15px;
}

:root :where(.single-case_study .is-layout-constrained) > * {
    margin-block-start: 15px!important;
}


/* mobile only */
@media ( max-width: 768px ) {
	.hide-for-mobile {
		display: none !important;
	}

	.wp-block-navigation__responsive-container {
		padding-left: 20px!important;
		padding-right: 20px!important;
	}

	.hide-for-desktop {
		display: block !important;
	}

	.hide-for-desktop.flex {
		display: flex !important;
	}
	

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container a:where(:not(.wp-element-button)) {
		font-size: 10vh!important;
		line-height: 10vh;
		text-decoration: none;
	}

	.wp-block-navigation__responsive-container-content {
		padding: 0px;
	}

	.contact-link {
		font-size: 30px!important;
	}

	.footer-quote {
		font-size: 40px!important;
		line-height: 40px!important;
	}

	.hero-header-text {
		font-size: 40px!important;
		line-height: 40px!important;
	}


	:root {                        /* or body, html – wherever the var lives */
		--wp--preset--spacing--50: 15px;   /* ← your mobile size */
	}

	.home-video-mobile {
		height: 465px;
	}

	.home-video-mobile video {
		height: 100%;
		width: 100%;
		object-fit: cover;
	}

	main {
		padding-top: 20px;
	}

	.wp-block-navigation__responsive-container-close {
		/* right: 50%;
		transform: translateX( 50% ); */
		padding: 20px 0px 0px 0px
	}

	.wp-block-navigation__responsive-container-open{
		font-size:0!important;              /* text invisible but still in the DOM for a11y */
		padding-right:0;          /* remove the 8 px gap */
		width:30px;               /* tap target = width of the icon */
	}

	/* re-centre the two strokes now that the button ends flush with the icon */
	.wp-block-navigation__responsive-container-open::before{ right:0; }
	.wp-block-navigation__responsive-container-open::after{ right:14px; } /* 15 px centre – 1 px half-stroke */




}