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

   The fixed bar at the foot of the phone view: three equal targets, each an
   icon over its label.

   The reference in mock/idea/mobile.html carried two contact buttons over a
   four item nav. That was drawn as a standalone phone screen with no footer
   under it. This site has one, and it already lists 料金の目安, 施工事例 and
   当店について, so the second row only repeated what was a scroll away. What is
   left is the home link and the two things the visitor is here to do.

   Hidden from 1280px up — the width at which the header's navigation
   appears — so that every width below it has one or the other on screen.
   The breakpoint lives only here; see patterns/dock.php for why the block
   visibility attribute could not be used alongside it.

   Icons are ::before pseudo elements, as everywhere else in the theme, so the
   links stay plain core blocks with no markup inside them to break.
   ========================================================================== */

.dock {
	/* 64px, well over the 44px minimum. The people this shop answers the phone
	   for are mostly elderly, so the target is sized for a rushed thumb and a
	   long arm's reading distance rather than for the guideline's floor. */
	--dock-height: 4rem;
	--icon-home: 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='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");
	--icon-tel: 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-quote: 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='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");

	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	background: var(--surface);
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
	padding: var(--space-2xs);
	padding-bottom: calc(var(--space-2xs) + env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------------------------------
   The row

   Three items of equal width. Core lays the group out as flex from the
   pattern's own attribute; only the gap is restated, because core sets that
   from blockGap and writes it as `:root :where(.is-layout-flex)`.
   -------------------------------------------------------------------------- */
:root :where(.is-layout-flex).dock__nav {
	gap: var(--space-2xs);
}

.dock__item {
	flex: 1;
	min-width: 0;
	margin: 0;
	text-align: center;
}

/* The icon sits above the label, so the link itself is the column. The 4rem
   height is set on .dock above, well clear of the 44px minimum. */
.dock__item a {
	min-height: var(--dock-height);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	padding-block: var(--space-2xs);
	border-radius: var(--rounded);
	font-weight: 700;
	text-decoration: none;
	transition: filter 150ms ease;
}

/* Each target is a filled block rather than loose text on the bar. Text alone
   gave the three nothing to sit inside, and the row read as one soft smear
   instead of three things to press.

   The colours mean the same thing everywhere on the site: the vivid accent is
   the telephone, navy is the quote, and home stays quiet. Filling all three
   equally would say they matter equally, and they do not. The bar used to have
   the two the other way round, which left one screen out of step with the rest
   of the theme. */
.dock__item--home a {
	background: var(--surface-container-high);
	color: var(--on-surface);
}

.dock__item--tel a {
	background: var(--secondary-vivid);
	color: var(--on-secondary-vivid);
}

.dock__item--quote a {
	background: var(--primary-container);
	color: var(--on-primary);
}

/* Navy against the dark bar measures 1.05:1 — the fill vanishes and only the
   label is left. The header's quote button answers this the same way. */
.is-dark .dock__item--quote a {
	background: var(--inverse-primary);
	color: var(--primary-container);
}

.dock__item a:hover {
	filter: brightness(1.08);
}

.dock__item a::before {
	content: "";
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	background-color: currentColor;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.dock__item--home a::before {
	mask-image: var(--icon-home);
}

.dock__item--tel a::before {
	mask-image: var(--icon-tel);
}

.dock__item--quote a::before {
	mask-image: var(--icon-quote);
}


/* --------------------------------------------------------------------------
   Current page

   WordPress marks the matching link with aria-current="page" on its own.
   -------------------------------------------------------------------------- */

/* A ring drawn inside the block. Inset costs no height, so the item the
   visitor is standing on stays level with the other two, and because it takes
   currentColor it reads on all three fills and in dark mode without a second
   rule. It is a shape rather than a shade, so it still says "you are here" to
   someone who cannot separate the three colours. */
.dock__item a[aria-current="page"] {
	box-shadow: inset 0 0 0 2px currentColor;
}

/* --------------------------------------------------------------------------
   Room for the bar

   The bar floats over the page, so the foot of the footer needs clearing or
   its last line sits underneath it.
   -------------------------------------------------------------------------- */
@media (width < 1280px) {

	.wp-site-blocks .site-footer {
		padding-bottom: calc(var(--dock-height, 4rem) + var(--space-md) + env(safe-area-inset-bottom, 0px));
	}
}

/* --------------------------------------------------------------------------
   Above the phone

   `.dock` is a flow group, but core writes `body .is-layout-flex{display:flex}`
   at specificity 0-1-1 and would beat a bare class here the moment the markup
   changed. Two classes keep the rule above anything core writes for layout.
   -------------------------------------------------------------------------- */
/* The bar now runs up to the navigation's own breakpoint rather than stopping
   at 782px. Between the two there was a band — tablets held sideways, small
   laptops — where the header nav was already hidden and the dock had not yet
   appeared, leaving the footer as the only way to move around the site. The
   two numbers are tied together so that band cannot come back. */
@media (width >= 1280px) {

	.wp-site-blocks .dock {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   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 .dock {
	position: relative;
}

.editor-styles-wrapper .site-footer {
	padding-bottom: 0;
}

/* Three items side by side in one row: the editor's block gap would drop the
   second and third below the first. */
.dock__item.dock__item {
	margin-block: 0;
}