/*
Theme Name:  Vemlo Child Theme
Description: Child theme for the Vemlo theme
Author:      ThemetechMount
Author URI:  https://www.themetechmount.com/
Template:    vemlo
Version:     0.4
Tags:        light, white, two-columns, three-columns, four-columns, right-sidebar, left-sidebar, responsive, retina
*/

/* ==========================================================================
   HEADER
   --------------------------------------------------------------------------
   1. LOGO SIZE

   The parent theme prints the logo through themetechmount_site_logo(), which
   wraps it in <div class="headerlogo"><h1 class="site-title">. Every sizing
   rule the theme ships targets that wrapper:

       .headerlogo img { max-height: <theme option>px }   (css/dynamic-style.php)

   header-main-overlay.php was edited by hand and the wrapper was dropped, so
   the img sits bare inside .site-branding and no max-height rule matches it.
   That is why the PNG rendered at natural size and why the logo option in the
   theme panel appeared to do nothing.

   2. MOBILE HEADER

   Below 1200px the site has no header layout: the .header-links flex rules in
   Customizer > Additional CSS are scoped to @media (min-width: 1200px), and
   the only mobile rule that fires is an absolutely positioned language
   switcher at left:270px. The block below defines the row explicitly:

       [ logo ]                              [ ქარ/ENG ] [ hamburger ]

   Tune the four values; nothing else should need editing.
   ========================================================================== */

:root{
	--pxl-logo-h:          46px;  /* logo height, desktop                     */
	--pxl-logo-h-sticky:   36px;  /* logo height once the header sticks       */
	--pxl-logo-h-mobile:   34px;  /* logo height, 1199px and below            */
	--pxl-header-h-mobile: 64px;  /* header band height, 1199px and below     */
}

/* --- Logo size ----------------------------------------------------------- */

#site-header .site-branding img.themetechmount-logo-img,
#site-header .site-branding .tm-sc-logo img{
	max-height: var(--pxl-logo-h);
	width: auto;
	height: auto;
	display: block;
}

.is_stuck #site-header .site-branding img.themetechmount-logo-img,
#site-header.is_stuck .site-branding img.themetechmount-logo-img,
.is_stuck .site-branding img.themetechmount-logo-img{
	max-height: var(--pxl-logo-h-sticky);
}

/* --- Logo vertical centring ---------------------------------------------- */
/* h1.site-title used to handle this with display:table + vertical-align.
   The edited markup has no .site-title, so centre the logo directly. */

#site-header .site-branding{
	vertical-align: middle;
}
#site-header .site-branding .tm-sc-logo,
#site-header .site-branding .headerlogo{
	display: flex;
	align-items: center;
	height: 100%;
}
#site-header .site-branding .home-link{
	display: inline-flex;
	align-items: center;
}


/* ==========================================================================
   MOBILE / TABLET HEADER  (1199px and below)
   --------------------------------------------------------------------------
   1200px is the site's own desktop breakpoint, the width at which the
   Additional CSS switches .site-header-main to flex and styles .header-links.
   Everything below that is treated as the compact header.

   Selectors here are led with #site-header on purpose. Customizer CSS prints
   after this stylesheet, so it wins any tie on source order. Higher
   specificity is what makes these rules stick without a wall of !important.
   ========================================================================== */

@media (max-width: 1199px){

	#tm-stickable-header-w{
		height: auto !important;
		min-height: var(--pxl-header-h-mobile);
	}

	/* One row, logo left, controls right. Overrides .tm-wrap's display:table,
	   which cannot wrap and was clipping whatever did not fit. */
	#site-header .site-header-main{
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		gap: 10px;
		min-height: var(--pxl-header-h-mobile);
	}
	#site-header .site-header-main > .tm-wrap-cell{
		display: block;
		width: auto;
		float: none;
		min-width: 0;
	}

	#site-header .site-branding{
		order: 1;
		flex: 0 1 auto;
		margin-right: auto;   /* pushes everything else to the right edge */
	}
	#site-header .header-links{
		order: 2;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
	}
	#site-header .header-links .header-links{   /* the duplicated inner wrapper */
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		padding: 0;
	}
	#site-header #site-header-menu{
		order: 3;
		flex: 0 0 auto;
	}

	#site-header .site-branding img.themetechmount-logo-img,
	#site-header .site-branding .tm-sc-logo img{
		max-height: var(--pxl-logo-h-mobile);
	}

	/* --- What does not belong in a phone header --------------------------
	   Social icons repeat in the footer, the contact link is in the menu.
	   To put the phone back as a tappable icon, delete a.call-button from
	   this list and it returns at 32px next to the language switcher. */
	#site-header .header-links .themetechmount-social-links-wrapper,
	#site-header .header-links .social-icons,
	#site-header .header-links .tm-links,
	#site-header .site-header-main > a.call-button,
	#site-header .header-links a.call-button{
		display: none !important;
	}

	/* --- Language switcher ------------------------------------------------
	   Undoes the absolute positioning in Additional CSS
	   (@media max-width:767px { .polylang-language-switcher { left:270px } })
	   which is what threw "EN" into the top right corner. */
	#site-header .header-links .polylang-language-switcher{
		position: static;
		top: auto;
		left: auto;
		right: auto;
		transform: none;
		display: inline-flex;
		align-items: center;
		margin: 0;
		z-index: auto;
	}
	#site-header .header-links .polylang-language-switcher a,
	#site-header .header-links .polylang-language-switcher a.lang-select{
		margin: 0 !important;
		padding: 6px 8px;
		color: #fff;
		font-weight: 700;
		font-size: 13px;
		line-height: 1;
		white-space: nowrap;
		text-decoration: none;
	}
	#site-header .header-links .polylang-language-switcher a:not(:last-child):after{
		content: none;
	}

	/* --- Hamburger --------------------------------------------------------
	   The theme generates its responsive menu CSS in css/dynamic-menu-style.php,
	   not in any .css file, which is why it is easy to miss. Inside its
	   @media (max-width: <menu_breakpoint>px) block it does:

	       #site-header-menu #site-navigation .menu-toggle{
	           position: absolute; right: 0; top: <header_height/2 - 20>px;
	       }

	   So the toggle was never in the row at all. It was pinned to the right
	   edge at an offset derived from the DESKTOP header height option, which is
	   why it landed under the language switcher. Put it back in the flow. */
	#site-header #site-header-menu #menu-toggle,
	#site-header #site-header-menu #site-navigation .menu-toggle{
		position: static;
		top: auto;
		right: auto;
		left: auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
	}

	/* The three bars are one <i> plus its :before and :after. The theme
	   hardcodes them to #182333 and #033b4a, near-invisible on the purple
	   header, which is why only one faint line was showing. currentColor picks
	   up the menu font colour the theme already sets on .menu-toggle i. */
	#site-header #site-header-menu #site-navigation .menu-toggle .tm-vemlo-icon-bars,
	#site-header #site-header-menu #site-navigation .menu-toggle .tm-vemlo-icon-bars:before,
	#site-header #site-header-menu #site-navigation .menu-toggle .tm-vemlo-icon-bars:after{
		background: currentColor;
	}

	/* --- The panel the hamburger opens ------------------------------------
	   The panel is the > ul, not div.nav-menu, and the theme positions it
	   absolutely at top:<desktop header height>px. With the header now shorter
	   on mobile that left a gap, so pin it to the bottom of the header row
	   instead of a fixed pixel value.

	   Both ancestors are forced static so the panel's containing block stays
	   .site-header-main. If either were positioned, the panel would inherit the
	   42px width of the toggle. */
	#site-header #site-header-menu,
	#site-header #site-navigation{
		position: static;
	}
	#site-header #site-header-menu #site-navigation div.nav-menu > ul{
		top: 100%;
	}

	/* Defensive: dynamic-menu-style.php sets .headerlogo to the full desktop
	   header height with !important. Harmless today because the edited markup
	   has no .headerlogo, but it would blow the mobile row open the moment the
	   template override in this child theme is activated. */
	#site-header .site-branding .headerlogo{
		height: auto !important;
		line-height: normal !important;
	}

	/* Nothing in the row may cause a horizontal scrollbar */
	#site-header .site-header-main{
		max-width: 100%;
	}
}

@media (max-width: 480px){
	:root{
		--pxl-logo-h-mobile:   30px;
		--pxl-header-h-mobile: 58px;
	}
}

/* --------------------------------------------------------------------------
   If the transparent overlay header sits too far from the slider after the
   mobile height change, the titlebar offset comes from the theme option in
   css/dynamic-style.php. Uncomment and match it to the value above.

   @media (max-width: 1199px){
       .tm-header-overlay .themetechmount-titlebar-wrapper .tm-titlebar-inner-wrapper{
           padding-top: calc(var(--pxl-header-h-mobile) + 30px);
       }
   }
   -------------------------------------------------------------------------- */