/*
Theme Name: Vellure
Theme URI: https://vellure.app
Author: Vellure
Author URI: https://vellure.app
Description: Marketing-site block theme built from the Vellure product design system — Archivo Narrow / Inter / Geist Mono type, the lime-on-ink primary action, square platinum-and-silver chrome, and warm photographic shelf imagery. Colors, type and spacing are defined in theme.json; this file only carries the required theme header plus small rules the block editor's style engine doesn't cover.
Version: 1.0.10
Requires at least: 6.5
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vellure
*/

/* Buttons: sentence case in source, always-uppercase on screen (Vellure never hard-codes caps in copy). */
.wp-block-button__link {
	white-space: nowrap;
}

/* Vellure's "soft" secondary button — forest fill, not part of core's Fill/Outline pair. */
.wp-block-button.is-style-soft .wp-block-button__link {
	background-color: var(--wp--preset--color--forest-soft);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--forest-soft-border);
}
.wp-block-button.is-style-soft .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--forest-dark);
	color: var(--wp--preset--color--forest-dark);
}

/* Rows and panels are square, bordered, unshadowed — the one card-like surface this system allows. */
.vellure-row {
	background: var(--wp--preset--color--silver-panel);
	border: 1px solid var(--wp--preset--color--silver-border);
	border-radius: 0;
}

/* Geist Mono eyebrow label — always uppercase, wide tracking. */
.vellure-eyebrow {
	font-family: var(--wp--preset--font-family--utility);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Dark section (forest-10) — lime stays identical on dark, per the system's one dark-theme rule that never changes. */
.vellure-section-dark,
.vellure-section-dark h1,
.vellure-section-dark h2,
.vellure-section-dark h3 {
	color: var(--wp--preset--color--white);
}
.vellure-section-dark {
	background-color: var(--wp--preset--color--forest-dark);
}
.vellure-section-dark p {
	color: var(--wp--preset--color--forest-soft);
}

/* Paper-texture backing used behind hero/import-style panels — faded and blended, never full-strength wallpaper. */
.vellure-texture-bg {
	position: relative;
	background-color: var(--wp--preset--color--silver-panel);
	background-image: var(--vellure-texture-image, none);
	background-size: cover;
	background-position: center;
}
.vellure-texture-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--platinum);
	opacity: 0.56;
	pointer-events: none;
}
.vellure-texture-bg > .wp-block-group__inner-container,
.vellure-texture-bg > * {
	position: relative;
}

/*
 * wp:post-content renders its own .entry-content wrapper as a normal
 * (non-full-width) child of <main>, so core's "constrain non-aligned
 * children" rule caps IT at contentSize — trapping any alignfull section
 * inside that 1100px box regardless of the section's own alignment.
 * Un-constraining the wrapper lets full-width sections actually reach
 * the viewport edge; individual sections still center their own content
 * via their inner contentSize groups.
 */
main.wp-block-group > .entry-content {
	max-width: none !important;
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 0 !important;
}

/*
 * Global styles apply the 24px blockGap as margin-top between every
 * sibling block, including full-bleed sections that are meant to butt
 * seamlessly against the header, footer, and each other. Zeroing it only
 * for alignfull children (and the <main> wrapper itself) preserves the
 * normal 24px rhythm between paragraphs/headings inside each section.
 */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.entry-content > .alignfull {
	margin-top: 0 !important;
}

/*
 * The Site Logo block's own "width" attribute doesn't reliably apply to SVG
 * logos (no intrinsic pixel dimensions for WP to scale against), so the
 * header logo was rendering at its full native size. Sized to match the
 * header button's height directly instead.
 */
.wp-block-site-logo img {
	height: 22px;
	width: auto;
}

/*
 * Safari has a long-documented bug where a position:fixed element nested
 * inside a position:sticky ancestor gets positioned relative to that
 * ancestor instead of the true viewport — WordPress's mobile nav overlay
 * (fixed) lives inside our sticky header, which is exactly this case, and
 * on iOS Safari it renders the overlay shifted/oversized off the right
 * edge of the screen. Not reproducible in Chromium, since this is a
 * WebKit-specific containing-block quirk.
 * Dropping the header out of sticky positioning only while the overlay is
 * open sidesteps it entirely; the header still scrolls normally with the
 * menu open (acceptable — a full-screen modal is covering it anyway) and
 * reverts to sticky the instant the menu closes.
 */
header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	position: static !important;
}

/*
 * Confirmed via real computed-style measurements (Chrome DevTools console,
 * on the actual device): the mobile nav overlay is NOT overflowing the
 * viewport — WordPress core's own overlay CSS sets padding-top on
 * .wp-block-navigation__responsive-container-content but never sets any
 * horizontal padding at all. Our nav list is right-aligned, so "About Us" /
 * "Sign in" render flush against the literal screen edge (0px away, not
 * negative) — which reads as "cut off" even though nothing is technically
 * clipped. Adding normal horizontal breathing room on both sides fixes the
 * visual bug without touching anything structural.
 */
.wp-block-navigation__responsive-container-content {
	padding-left: var(--wp--preset--spacing--5);
	padding-right: var(--wp--preset--spacing--5);
	box-sizing: border-box;
}

/*
 * Center the links in the mobile overlay instead of right-aligning them.
 * Right-alignment (inherited from the desktop nav's own layout setting)
 * read as visually "broken" sitting off to one side of an otherwise
 * full-screen, symmetric modal — centering reads as intentional regardless
 * of exact spacing. Scoped to the overlay only; the desktop header row
 * keeps its normal right-aligned layout.
 */
.wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	align-items: center !important;
}
.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	text-align: center;
}

/* Front ticketing form (Contact Us) — styled to match the rest of the input/button system. */
.vellure-contact-form div {
	margin-bottom: var(--wp--preset--spacing--4);
}
.vellure-contact-form label {
	display: block;
	font-family: var(--wp--preset--font-family--utility);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: var(--wp--preset--spacing--2);
}
.vellure-contact-form input[type="text"],
.vellure-contact-form input[type="email"],
.vellure-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px;
	border: 1px solid var(--wp--preset--color--silver-border);
	border-radius: 0;
	background: var(--wp--preset--color--silver-panel);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
}
.vellure-contact-form textarea {
	min-height: 160px;
	resize: vertical;
}
.vellure-contact-form input[type="text"]:focus,
.vellure-contact-form input[type="email"]:focus,
.vellure-contact-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--forest);
	outline-offset: -1px;
}
.vellure-contact-form input[type="file"] {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.vellure-contact-form input[type="submit"] {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--wp--preset--color--lime-border);
	border-radius: 4px;
	background-color: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--utility);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.42px;
	text-transform: uppercase;
	padding: 8px 16px;
	cursor: pointer;
}
.vellure-contact-form input[type="submit"]:hover {
	border-color: var(--wp--preset--color--ink);
}

/* Footer social icons — subtle by default, ink on hover. */
.vellure-social-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	margin-bottom: var(--wp--preset--spacing--2);
}
.vellure-social-links a {
	color: var(--wp--preset--color--muted);
	line-height: 0;
}
.vellure-social-links a:hover {
	color: var(--wp--preset--color--ink);
}

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