/* -----------------------------------------------------------------------------
 * Spooky Offerings — component styles
 *
 * theme.json carries the tokens (colour, type, spacing). This file carries the
 * three things theme.json cannot express: the script heading flanked by
 * hairlines, the full-bleed gallery strips, and the contact form controls.
 * -------------------------------------------------------------------------- */

/* Never let a wide image push the page sideways on a phone. */
html,
body {
	overflow-x: clip;
}

/* -----------------------------------------------------------------------------
 * 1. Script heading on hairline rules
 *
 * Block style "Script on rules" for core/heading. The rules grow to fill the
 * row, so the heading stays centred whatever its length — matching the GoDaddy
 * SectionHeading widget.
 * -------------------------------------------------------------------------- */
.wp-block-heading.is-style-so-rules {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 4vw, 2.5rem);
	text-align: center;
	margin-block: 0;
}

.wp-block-heading.is-style-so-rules::before,
.wp-block-heading.is-style-so-rules::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: var(--wp--preset--color--hairline);
}

/* Left-anchored variant: used inside the split "Shops" column, where the rule
   on the left is short and the one on the right runs out to the column edge. */
.wp-block-heading.is-style-so-rules-left::before {
	flex: 0 0 clamp(2rem, 12vw, 9rem);
}

/* A rules heading with no rules at all — the standalone gallery headings on the
   products page sit on bare canvas. */
.wp-block-heading.is-style-so-plain::before,
.wp-block-heading.is-style-so-plain::after {
	display: none;
}

/* -----------------------------------------------------------------------------
 * 2. Eyebrow / label type
 * -------------------------------------------------------------------------- */
.so-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.11em;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	margin-block-end: var(--wp--preset--spacing--20);
}

.so-meta {
	color: var(--wp--preset--color--faint);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.02em;
}

.so-meta a {
	color: var(--wp--preset--color--faint);
	text-decoration: none;
}

.so-meta a:hover,
.so-meta a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* -----------------------------------------------------------------------------
 * 3. Gallery strips
 *
 * The products page alternates two gallery treatments: a contained grid with
 * gutters (Comedy Tshirts) and an edge-to-edge three-across band with no gutter
 * at all (everything below it). Both come from core/gallery, so the client can
 * add and reorder photos in the editor without touching a template.
 * -------------------------------------------------------------------------- */
.wp-block-gallery.is-style-so-strip {
	--wp--style--unstable-gallery-gap: 0px !important;
	gap: 0 !important;
}

.wp-block-gallery.is-style-so-strip .wp-block-image {
	margin: 0;
}

.wp-block-gallery.is-style-so-strip .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 2;
}

/* Contained grid: keeps the natural aspect ratio of each garment photo, so the
   tiles stagger the way they do on the live site. */
.wp-block-gallery.is-style-so-grid .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* -----------------------------------------------------------------------------
 * 4. Split section — text column beside a full-height image
 * -------------------------------------------------------------------------- */
.so-split {
	align-items: stretch;
}

.so-split .so-split__media {
	background-color: var(--wp--preset--color--base);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	min-height: 320px;
}

/* -----------------------------------------------------------------------------
 * 5. Contact form
 *
 * Square-cornered hairline inputs, pill submit button, floating-label feel from
 * a plain placeholder. Ships with the theme so the demo stands up on its own;
 * see inc/contact-form.php for the note on moving it to a companion plugin.
 * -------------------------------------------------------------------------- */
.so-form {
	display: grid;
	gap: 1.15rem;
	max-width: 34rem;
}

.so-form__field {
	display: block;
}

.so-form__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.so-form input[type="text"],
.so-form input[type="email"],
.so-form input[type="tel"],
.so-form textarea {
	width: 100%;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	padding: 0.95rem 1.05rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	line-height: 1.5;
}

.so-form textarea {
	min-height: 8.5rem;
	resize: vertical;
}

.so-form ::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.so-form :is(input, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Honeypot. Hidden from people, reachable by the bots that fill every field. */
.so-form__trap {
	position: absolute !important;
	left: -9999px !important;
}

.so-form__submit {
	justify-self: start;
	min-width: 13rem;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	padding: 0.9em 2.4em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.so-form__submit:hover,
.so-form__submit:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.so-form__notice {
	border: 1px solid var(--wp--preset--color--hairline);
	border-left: 3px solid var(--wp--preset--color--accent);
	padding: 0.9rem 1.1rem;
	font-size: var(--wp--preset--font-size--small);
}

.so-form__notice[data-state="error"] {
	border-left-color: #e5484d;
}

/* -----------------------------------------------------------------------------
 * 6. Header
 * -------------------------------------------------------------------------- */
.so-header__bar {
	background: var(--wp--preset--color--surface);
}

.so-header__bar .wp-block-navigation {
	justify-content: center;
}

.so-header__bar .wp-block-navigation-item__content {
	padding-block: 1.1rem;
}

.so-header__logo img {
	height: clamp(64px, 9vw, 100px);
	width: auto;
}

/* Current page is marked with brand orange rather than an underline, matching
   the live site's treatment of the active nav item. */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current_page_item > a {
	color: var(--wp--preset--color--accent);
}

/* -----------------------------------------------------------------------------
 * 7. Footer
 * -------------------------------------------------------------------------- */
.so-footer__links .wp-block-navigation {
	justify-content: center;
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.13em;
}

/* -----------------------------------------------------------------------------
 * 8. Cookie notice
 * -------------------------------------------------------------------------- */
.so-cookie {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 60;
	max-width: 24rem;
	background: var(--wp--preset--color--surface);
	padding: 1.5rem 1.5rem 1.35rem;
	box-shadow: 0 12px 40px rgb(0 0 0 / 55%);
}

.so-cookie[hidden] {
	display: none;
}

.so-cookie__title {
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: var(--wp--preset--font-size--medium);
	margin: 0 0 0.65rem;
}

.so-cookie__text {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 1.15rem;
}

.so-cookie__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.so-cookie__btn {
	flex: 1 1 8rem;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	padding: 0.7em 1.4em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	cursor: pointer;
}

.so-cookie__btn:hover,
.so-cookie__btn:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* -----------------------------------------------------------------------------
 * 9. Reduced motion & focus
 * -------------------------------------------------------------------------- */
:where(a, button, input, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}