/* ==========================================================================
   header.css — Genva Interior

   Ported from the mock.

   The flexbox is left to core: every row in patterns/header.php carries a
   flex layout attribute, so the site editor shows the real arrangement and
   the shop owner can see what they are dragging. Only the gaps are restated
   here, because core sets them from blockGap.

   Core writes its gap as `:root :where(.is-layout-flex)`, specificity 0-1-0.
   An override has to repeat that shape with the class attached to it, not
   nested inside it, or it ties on specificity and loses on source order.

   Icons are ::before pseudo elements rather than markup, so the paragraphs
   and buttons stay plain core blocks with nothing extra inside them to break.
   ========================================================================== */

/* The two icons are declared on the root rather than on the bar, because the
   `.btn` rule below is used outside the header as well — hero.php and the page
   patterns all carry it. Scoped to `.site-header`, the custom property resolved
   to nothing out there, `mask-image` fell back to none, and the 1.125rem box
   painted as a solid block of currentColor next to the label. */
:root {
	--icon-call: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	--icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 50;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}

.is-dark .site-header {
	background: rgba(20, 24, 27, 0.95);
}

/* The admin bar covers a fixed header while the shop owner is logged in.
   WordPress fixes its height at 32px, and 46px below 782px. */
.admin-bar .site-header {
	top: 32px;
}

@media (width < 782px) {

	.admin-bar .site-header {
		top: 46px;
	}
}

/* Every template needs the bar's height cleared, not only the front page, or
   the first block on an archive or a page hides underneath it.

   Core also gives every child of .wp-site-blocks a top margin from blockGap,
   written as :where(.wp-site-blocks) > * — specificity 0-0-0, so a plain
   class selector overrides it. The padding above already positions the
   content, and the extra margin would push it down again. */
.wp-site-blocks > main {
	margin-block-start: 0;
	padding-top: var(--header-height);
}

/* A main that is a section in its own right — every template but the front
   page — needs both: the bar's height, which nothing may show through, and
   the section rhythm on top of it. The rule above is more specific than
   .section, so without this the shorthand won the head of the page and the
   heading of every page sat flush against the bar. */
.wp-site-blocks > main.section {
	padding-top: calc( var(--header-height) + var(--space-3xl) );
}

.site-header__inner {
	height: var(--header-height);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

:root :where(.is-layout-flex).site-header__inner {
	gap: var(--space-md);
}

.site-header__left {
	min-width: 0;
}

:root :where(.is-layout-flex).site-header__left {
	gap: var(--space-lg);
}

:root :where(.is-layout-flex).site-header__right {
	gap: var(--space-md);
}

/* --------------------------------------------------------------------------
   Brand

   The mark is the Site Logo, the two lines are the Site Tagline and the Site
   Title, so the shop owner fills all three in through Settings instead of
   editing a pattern. None of it needs translating for the same reason.
   -------------------------------------------------------------------------- */
.brand {
	min-width: 0;
}

:root :where(.is-layout-flex).brand {
	gap: var(--space-xs);
}

.brand__mark {
	flex: none;
	margin: 0;
	width: 2.5rem;
	height: 2.5rem;
}

.brand__mark img {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--rounded);
	object-fit: cover;
}

.brand__stack {
	min-width: 0;
}

/* The two lines are one block of text, so they sit tight against each other
   rather than taking the global block gap. */
:root :where(.is-layout-flex).brand__stack {
	gap: 0;
}

.brand__eyebrow {
	margin: 0;
	color: var(--secondary);
	letter-spacing: 0.05em;
}

.brand__name {
	margin: 0;
	color: var(--on-surface);
	line-height: 1.25;
}

.brand__name a {
	color: inherit;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
/* Core writes `body .is-layout-flex{display:flex}`, specificity 0-1-1, so a
   bare class loses to it and the block never hides. Every display rule on a
   laid out container in this file therefore repeats the same shape the gaps
   use, which lands at 0-2-0. */
:root :where(.is-layout-flex).site-nav {
	display: none;
}

@media (width >= 1280px) {

	:root :where(.is-layout-flex).site-nav {
		display: flex;
		align-items: center;
	}
}

:root :where(.is-layout-flex).site-nav {
	gap: var(--space-md);
}

.site-nav .wp-block-navigation-item__content {
	color: var(--on-surface-variant);
	padding-block: 0.25rem;
	text-decoration: none;
	transition: color 150ms ease;
}

.site-nav .wp-block-navigation-item__content:hover {
	color: var(--on-surface);
}

/* WordPress marks the matching link with aria-current and current-menu-item
   on its own, so nothing is authored per page. */
.site-nav .current-menu-item .wp-block-navigation-item__content,
.site-nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--on-surface);
	font-weight: 600;
	box-shadow: inset 0 -2px 0 var(--secondary-container);
}

/* --------------------------------------------------------------------------
   Phone block

   Shown from 1024px up. Below that the compact call button takes its place,
   so the number is never more than one tap away.
   -------------------------------------------------------------------------- */
:root :where(.is-layout-flex).header-tel {
	display: none;
}

@media (width >= 1024px) {

	:root :where(.is-layout-flex).header-tel {
		display: flex;
	}
}

:root :where(.is-layout-flex).header-tel {
	gap: 0.125rem;
}

.header-tel__hours {
	margin: 0;
	color: var(--on-surface-variant);
	line-height: 1.25;
	text-align: right;
}

.header-tel__row {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	justify-content: flex-end;
}

.header-tel__row a {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--on-surface);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
	text-decoration: none;
	transition: color 150ms ease;
}

.header-tel__row a::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--secondary);
	mask-image: var(--icon-call);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.header-tel__row a:hover {
	color: var(--secondary);
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */
:root :where(.is-layout-flex).site-header__cta {
	gap: var(--space-xs);
}

.cta-stack {
	position: relative;
}

/* The flag rides on the corner of the button by sharing its grid cell, not by
   being taken out of flow: the site editor wraps each block and the flag lost
   the ancestor it was measuring from, ending up adrift above the bar. Grid
   here has to be written at the shape core uses for its own layout rule, or
   `body .is-layout-flex{display:flex}` wins on source order. */
:root :where(.is-layout-flex).cta-stack {
	display: grid;
	grid-template-areas: "stack";
	gap: 0;
}

.cta-stack > * {
	grid-area: stack;
}

.cta-stack__flag {
	align-self: start;
	justify-self: end;
	z-index: 10;
	margin: 0;
	transform: translate(-0.5rem, -0.625rem);
	background: var(--secondary-container);
	color: var(--on-secondary-container);
	padding: 0.125rem 0.375rem;
	border-radius: var(--rounded);
	box-shadow: var(--shadow-sm);
	line-height: 1;
	white-space: nowrap;
}

.cta-stack .wp-block-buttons {
	margin: 0;
}

/* Navy rather than the theme's default button accent. The vivid accent is now
   spoken for — it marks the telephone, in the hero and again at the foot of
   the page — so the quote button in the bar takes the other strong colour
   instead of competing with it. */
.cta-stack .wp-block-button__link {
	background: var(--primary-container);
	color: var(--on-primary);
}

/* Navy is the darkest colour in the light palette, which is why it stands out
   on a white bar — and exactly why it disappears on a dark one: the fill and
   the bar behind it measured 1.05:1. The rest of the dark palette answers a
   dark surface by turning its accents light, so this does the same. */
.is-dark .cta-stack .wp-block-button__link {
	background: var(--inverse-primary);
	color: var(--primary-container);
}

.btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--rounded);
	box-shadow: var(--shadow-sm);
	text-align: center;
}

/* The icon hangs off a modifier, not off `.btn` itself. `.btn` is the shape,
   and it is worn by every prominent button in the theme — including the ones
   that dial a number. With the envelope built into the base class, "今すぐ電話
   で相談" carried a letter, which tells the visitor the opposite of what the
   link does. The shape and the meaning are now separate decisions. */
.btn--mail .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	background-color: currentColor;
	mask-image: var(--icon-mail);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

/* The compact call button, shown where the full phone block is hidden. The
   44px floor is the minimum touch target the accessibility rules require. */
:root :where(.is-layout-flex).headcall {
	display: none;
}

@media (width < 1024px) {

	:root :where(.is-layout-flex).headcall {
		display: flex;
	}
}

.headcall .wp-block-button__link {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	min-height: 44px;
	min-width: 44px;
	justify-content: center;
	padding-inline: var(--space-xs);
	border-radius: var(--rounded);
	background: var(--surface-container-high);
	color: var(--on-surface);
	box-shadow: none;
}

.headcall .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--secondary);
	mask-image: var(--icon-call);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

/* Under 640px the button is the icon alone; the label would push the shop
   name off the bar. */
@media (width < 640px) {

	.headcall .wp-block-button__link {
		font-size: 0;
		gap: 0;
	}
}

/* --------------------------------------------------------------------------
   Dark mode toggle

   Written as raw HTML because aria-pressed and the two data-label attributes
   have no block comment equivalent. It replaces the reference's profile
   avatar, which had no function on a shop site.
   -------------------------------------------------------------------------- */
.themetoggle {
	width: 44px;
	height: 44px;
	flex: none;
	margin-left: var(--space-xs);
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid var(--outline-variant);
	border-radius: var(--rounded);
	color: var(--on-surface-variant);
	cursor: pointer;
	transition: color 150ms ease, border-color 150ms ease;
}

.themetoggle:hover {
	color: var(--secondary);
	border-color: var(--secondary);
}

.themetoggle svg {
	width: 1.25rem;
	height: 1.25rem;
}

.themetoggle .icon-moon { display: none; }
.is-dark .themetoggle .icon-sun { display: none; }
.is-dark .themetoggle .icon-moon { display: block; }

/* --------------------------------------------------------------------------
   Below the navigation breakpoint

   The quote button and its flag come out, leaving the mark, the shop name and
   two 44px targets. The shop name is set by whoever buys the theme, so it
   shortens rather than wrapping the bar onto three lines.
   -------------------------------------------------------------------------- */
@media (width < 1280px) {

	:root :where(.is-layout-flex).cta-stack {
		display: none;
	}

	.brand__eyebrow,
	.brand__name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* --------------------------------------------------------------------------
   On the phone

   The bar was fixed so the call button stayed within reach. The dock now
   carries the telephone at the foot of every screen, so that reason is gone
   and the bar is released, which hands the page back 64px — 7.6% of an 844px
   screen, on top of the 3.5rem the dock itself takes.

   The breakpoint matches the dock's, so the two always swap together.
   -------------------------------------------------------------------------- */
@media (width < 782px) {

	.site-header {
		position: static;
	}

	.wp-site-blocks > main {
		padding-top: 0;
	}

	/* The bar takes no space of its own down here, so a section main is back
	   to the section rhythm alone — the narrow one, matching what .section
	   itself drops to at this width. Restated because the rule that adds the
	   bar's height is more specific than the one above and would otherwise
	   keep it. */
	.wp-site-blocks > main.section {
		padding-top: var(--space-lg);
	}

	/* Nothing floats above an anchor once the bar scrolls with the page. */
	:target {
		scroll-margin-top: var(--space-md);
	}
}

/* --------------------------------------------------------------------------
   Site editor

   A fixed bar in the editor canvas floats over the rest of the template and
   cannot be selected, so it is released there.
   -------------------------------------------------------------------------- */
.editor-styles-wrapper .site-header {
	position: relative;
	top: 0;
}

.editor-styles-wrapper .wp-site-blocks > main {
	padding-top: 0;
}

/* The flag rides on the button's corner, so the editor's block gap has nothing
   to space it from and only pushed it out of place. */
.cta-stack__flag.cta-stack__flag {
	margin-block: 0;
}