/* Simply Hat Hire — interaction polish */

/* A small branded touch — selecting text picks up the studio's palette
   instead of the browser's default blue */
::selection {
	background-color: #7a2331;
	color: #faf6ef;
}

/* Recast the opening drop cap in the display typeface, at a more
   considered size — an illuminated-initial feel rather than a shout.
   The selector repeats ".has-drop-cap" deliberately: it nudges this
   rule's specificity above core's "p.has-drop-cap:not(:focus)::first-letter"
   so ours always wins, no matter which stylesheet loads last, and the
   "!important" flags on the two properties core sets inline give a
   second guarantee they can't be re-inherited from the 8.4em default. */
p.has-drop-cap.has-drop-cap:not(:focus):first-letter,
p.has-drop-cap.has-drop-cap:not(:focus)::first-letter {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 5em !important;
	font-weight: 400;
	color: var(--wp--preset--color--accent);
}

/* Smooth in-page scrolling (e.g. footer quick links, anchored sections) —
   only for visitors who haven't asked for reduced motion */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Give the circular logo emblem a touch of presence in the header,
   without clipping the hat-pin detail that overlaps its edge */
.wp-block-site-logo img {
	filter: drop-shadow(0 3px 8px rgba(43, 36, 32, 0.18));
	transition: transform 0.5s ease;
}
.wp-block-site-logo:hover img {
	transform: rotate(-4deg);
}

/* On narrow screens the navigation collapses to a single menu
   button. Left to its own devices it wraps onto a new line below
   the brand mark, leaving everything stacked flush to the left —
   so instead, pin that button neatly into the header's top-right
   corner, and let the logo and title settle into the full width
   left behind, centred, like a proper masthead */
@media (max-width: 600px) {
	.shh-site-header {
		position: relative;
	}

	.shh-site-header .shh-header-brand {
		width: 100%;
		justify-content: center;
	}

	.shh-site-header .shh-header-nav {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
}

/* Smooth, refined hover lift on buttons */
.wp-block-button__link {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(43, 36, 32, 0.16);
}

/* Gentle image zoom on hover, clipped to the rounded corners */
.wp-block-image.has-custom-border {
	border-radius: 4px;
	overflow: hidden;
}
.wp-block-image.has-custom-border img {
	transition: transform 0.6s ease;
}
.wp-block-image.has-custom-border:hover img {
	transform: scale(1.04);
}

/* Soft lift on the coloured info cards used across Hire, Made to Order, FAQs etc. */
.wp-block-column.has-background {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wp-block-column.has-background:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(43, 36, 32, 0.12);
}

/* Animated underline on inline text links within paragraphs */
p a:not(.wp-element-button) {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	transition: background-size 0.3s ease;
}
p a:not(.wp-element-button):hover,
p a:not(.wp-element-button):focus {
	background-size: 100% 1px;
}

/* Respect visitors who have asked their device for reduced motion —
   keep the colour/shadow feedback but drop the movement */
@media (prefers-reduced-motion: reduce) {
	.wp-block-site-logo img,
	.wp-block-button__link,
	.wp-block-image.has-custom-border img,
	.wp-block-column.has-background {
		transition: none;
	}
	.wp-block-site-logo:hover img,
	.wp-block-button__link:hover,
	.wp-block-button__link:focus,
	.wp-block-image.has-custom-border:hover img,
	.wp-block-column.has-background:hover {
		transform: none;
	}
}