/*
 * Fivany base layer — applies the Opnar design tokens to Storefront's
 * global elements. Loaded after the parent stylesheet so these win.
 */

body,
button,
input,
select,
optgroup,
textarea,
.site-header,
.site-footer {
	font-family: var(--fv-font);
	font-size: var(--fv-fs-base);
	color: var(--fv-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background: var(--fv-bg);
	line-height: 1.6;
}

/*
 * Page rail — matches Opnar's layout container exactly:
 *   `max-w-[1440px] px-[10px] md:px-6`  (app/[locale]/layout.tsx)
 * i.e. 10px gutters on mobile, 24px from 768px up.
 *
 * `margin: auto` is not cosmetic. Storefront switches `.col-full` from
 * padding to a fixed em MARGIN below 66.5em, and again below 568px
 * (`margin: 0 1.41575em` ≈ 18px at our 13px base). That margin stacked on
 * top of this padding, so mobile content sat ~34px in from each edge
 * instead of 10px — losing ~14% of a 390px screen to empty gutters.
 *
 * `box-sizing: border-box` overrides Storefront's `content-box`, so the
 * 1440px cap includes the gutters rather than adding to them.
 */
.col-full {
	max-width: var(--fv-maxw);
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.col-full {
		padding-left: var(--fv-pad-x);
		padding-right: var(--fv-pad-x);
	}
}

/* ── Headings ──────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title {
	font-family: var(--fv-font);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--fv-ink);
}

h1, .entry-title, .page-title { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }

/* ── Links ─────────────────────────────────────────────────────── */

a {
	color: var(--fv-accent);
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover {
	color: var(--fv-accent-hover);
}

/* ── Numerals go mono, everywhere ──────────────────────────────── */

.woocommerce-Price-amount,
.price,
.quantity input,
.order-total,
.woocommerce-Price-currencySymbol {
	font-family: var(--fv-mono);
	font-variant-numeric: tabular-nums;
}

/* ── Buttons ───────────────────────────────────────────────────── */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
button,
input[type="submit"] {
	background: var(--fv-accent);
	color: #fff;
	border: 0;
	border-radius: var(--fv-radius-md);
	font-family: var(--fv-font);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 0.01em;
	padding: 10px 18px;
	line-height: 1.2;
	transition: background 0.15s ease, transform 0.1s ease;
	cursor: pointer;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
button:hover,
input[type="submit"]:hover {
	background: var(--fv-accent-hover);
	color: #fff;
}

.woocommerce a.button:active,
.woocommerce button.button:active,
button:active {
	transform: translateY(1px);
}

/* Secondary / ghost buttons — cream chip on a white surface. */
.woocommerce a.button.fv-ghost,
.woocommerce button.button.fv-ghost {
	background: var(--fv-cream);
	color: var(--fv-ink);
	border: 1px solid var(--fv-line);
}

.woocommerce a.button.fv-ghost:hover,
.woocommerce button.button.fv-ghost:hover {
	background: var(--fv-cream-hover);
	color: var(--fv-accent);
	border-color: var(--fv-accent);
}

/* ── Form fields ───────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea,
.select2-container .select2-selection--single {
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-md);
	background: var(--fv-surface);
	padding: 9px 12px;
	font-size: 13px;
	color: var(--fv-ink);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
	/* Border colour only — no glow. The 3px accent halo these rules used to
	 * carry read as a hover/click "shadow effect"; the border change alone
	 * still shows which field is active. */
	border-color: var(--fv-accent);
	outline: 0;
}

/* ── Focus ─────────────────────────────────────────────────────────
 * Storefront paints
 *   a:focus, input:focus, textarea:focus, button:focus
 *     { outline: 2px solid #7f54b3 }
 * — its own purple brand colour — so clicking any link, field or button
 * flashed a violet ring. It also greys fields on focus
 * (`background-color: #ededed`).
 *
 * Both are replaced with a brand ring shown only for KEYBOARD focus.
 * `outline: none` alone would be an accessibility regression: mouse users
 * get no ring (what you want), keyboard users still get a clear one.
 */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
	outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--fv-accent);
	outline-offset: 2px;
	border-radius: var(--fv-radius-sm);
}

/* Undo Storefront's grey-on-focus fill. */
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
.input-text:focus {
	background-color: var(--fv-surface);
}

/* Header fields sit inside their own pill, so they stay transparent. */
.fv-hdr input:focus,
.fv-hdr .srch input:focus,
.fv-hdr .m-srch .box input:focus {
	background-color: transparent;
	box-shadow: none;
	border-color: transparent;
}

/* ── Notices ───────────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--fv-radius-lg);
	border-top: 0;
	background: var(--fv-cream);
	color: var(--fv-ink);
	font-size: 12.5px;
	box-shadow: var(--fv-shadow-sm);
	border-left: 3px solid var(--fv-accent);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--fv-accent);
}

.woocommerce-error {
	border-left-color: var(--fv-hot);
	background: #fff5f5;
}

.woocommerce-error::before {
	color: var(--fv-hot);
}

/* Storefront's default page-header block is heavier than Opnar's. */
.storefront-breadcrumb {
	background: transparent;
	padding: 12px 0 0;
	margin-bottom: 0;
	font-size: 11.5px;
	color: var(--fv-ink-3);
}

.storefront-breadcrumb a {
	color: var(--fv-ink-3);
}

.storefront-breadcrumb a:hover {
	color: var(--fv-accent);
}

/*
 * Page rhythm, matched to Opnar's `<main>`:
 *   px-[10px] pt-1 pb-3  md:px-6 md:pt-2 md:pb-8
 * i.e. 4px top / 12px bottom on mobile, 8px / 32px from 768px up. The
 * horizontal half of that lives in `.col-full` above.
 *
 * Storefront opens this region with `padding-top: 4.235801032em` (~68px)
 * and a 2.6em bottom margin — an order of magnitude looser than Opnar,
 * which is why the override sets all four rather than just trimming.
 *
 * The bottom padding is also what separates the last block from the
 * footer, so the footer carries no margin of its own.
 */
.site-main {
	padding-top: 4px;
	padding-bottom: 12px;
	margin-bottom: 0;
}

.site-content {
	padding-top: 0;
}

@media (min-width: 768px) {
	.site-main {
		padding-top: 8px;
		padding-bottom: 32px;
	}
}