@charset 'utf-8';
@use '../global' as *;


/* topbar
---------------------------------------------*/

.topbar {
	background-color: var(--top-bar-bg-color);

	&__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-block: .25rem;
		font-size: var(--font-size--xs);
		@include mq('lg', '>='){
			flex-flow: row wrap;
		}
	}
	&__content {
		color: var(--top-bar-text-color);
		> p {
			margin: 0;
		}
	}
	&__sns {
		font-size: var(--sns-icon-size, var(--font-size--sm));
		@include mq('lg', '>='){
			margin-inline: auto 0;
		}
	}
}

.topbar--reverse {
	.topbar__content {
		@include mq('lg', '>='){
			order: 2;
		}

	}
	.topbar__sns {
		@include mq('lg', '>='){
			margin-inline: 0 auto;
		}
	}
}



// header
.header {
	--header-nav-toggle-icon-size: 24px;
	position: relative;
	border-bottom: 1px solid var(--header-border-color, #f5f5f5);
}

@include mq('lg', '>=') {
	.header--top-logo {
		.header__row {
			grid-template-areas:
			"site-title site-title site-title"
			"header-nav header-nav header-tools";
		}
	}
	.header--bottom-menu {
		.header__row {
			grid-template-areas:
			"site-title site-title site-title"
			"header-nav header-nav header-tools";
		}
	}
}

// Full Width Header
.header.header--full-width {
	--container-width: 100%;
}


.header__row {
	position: relative;
	display: grid;
	grid-template-areas: "site-title header-nav header-tools header-nav-toggle";
	grid-template-columns: auto 1fr auto auto;
	gap: .5rem;
	max-width: var(--container-width);
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--container-spacing--x);
	@include mq('lg', '<'){
		grid-template-columns: 1fr auto auto auto;
	}
}



.header__title {
	grid-area: site-title;
	position: relative;
	display: flex;
	align-items: center;
	column-gap: px-to-rem(10px);
	padding: .5rem 0;
	@include mq('lg', '<'){
		max-width: calc( 100% - var(--header-nav-toggle-icon-size) * 2 );
		margin-inline-end: auto;
	}

	@include mq('lg', '>=') {
		&.header__title--center {
			justify-content: center;
			width: 100%;
			text-align: center;
		}
		&.header__title--top {
			width: 100%;
		}
	}
}

.header__free-content {}

:where(.header--top-logo, .header--bottom-menu) .header__title {
	.header__free-content {
		position: absolute;
		inset-inline-end: 0;
	}
}

.header__nav {
	grid-area: header-nav;
	display: none;
	@include mq('lg', '>=') {
		display: flex;
		width: auto;
		margin-inline: auto 0;

		&.header__nav--center {
			margin-inline: auto;
		}
		&.header__nav--start {
			margin-inline-start: 0;
		}
	}
}

.header__dropdown-nav {
	position: absolute;
	top: calc(100% + 1px);
	inset-inline-start: 0;
	z-index: var(--z-index);
	display: none;
	width: 100%;
	box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.05);
	padding: 0 var(--container-spacing--x) var(--container-spacing--x);
	background: #fff;
}

.header-nav-toggle {
	--hamburger-bar-size: var(--header-nav-toggle-icon-size);
	width: var(--header-nav-toggle-icon-size);
	grid-area: header-nav-toggle;

	// .header-nav-toggle__text
	&__text {

	}
}


.header__tools {
	grid-area: header-tools;
	display: flex;
	gap: px-to-rem(3px);
	@include mq('lg', '>='){
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: var(--z-index);
	}
}

// ヘッダー検索
.header__search {
	position: relative;
	display: flex;
}

.header__search-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: px-to-rem(24px);
}


.dropdown-search {
	position: absolute;
	top: calc(100% + 1px);
	inset-inline-end: 0;
	z-index: var(--z-index);
	opacity: 0;
	visibility: hidden;
	width: 300px;
	box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.05);
	&.is-active {
		opacity: 1;
		visibility: visible;
	}
}


/* サイトタイトル
---------------------------------------------*/
.site-branding {
	&__title {
		margin: 0;
		font-size: var(--site-title-size, var(--font-size--2xl));
		font-weight: 600;
		line-height: 1.4;
	}
	&__description {
		margin: 0;
		color: var(--site-description-color, #999);
		font-size: var(--font-size--xs);
	}
	&__link {
		color: var(--site-title-color, #000);
		&:hover {
			color: var(--site-title-hover-color, #000);
		}
	}
}

/* サイトロゴ
---------------------------------------------*/
.site-logo {

}
.custom-logo {
	max-width: var(--header-logo-width, 120px );
}