/*
Theme Name: Lux
Theme URI: https://luxwebhosting.com/themes/lux
Author: Lux Digital
Author URI: https://lux.digital
Description: The Lux standard block theme. Core block editor only - no page
  builder, no Cornerstone, no lock-in. Content is portable core blocks so a
  site survives a theme change. Brand per client via style variations.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.3.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lux
Tags: block-theme, full-site-editing, accessibility-ready, blog, portfolio, business
*/

/* Block themes style via theme.json. This file carries only what theme.json
   cannot express. Keep it short on purpose. */

/* Respect reduced-motion preferences everywhere. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visible focus for keyboard users - accessibility baseline. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
  border-radius: var(--wp--custom--radius--sm);
}

/* Skip link - hidden until focused. */
.lux-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: .75rem 1.25rem;
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  text-decoration: none;
  border-radius: 0 0 var(--wp--custom--radius--md) 0;
}
.lux-skip-link:focus { left: 0; }

/* Smooth anchor scrolling that does not fight reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Card utility used by several Lux patterns. */
.lux-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: var(--wp--custom--radius--lg);
  transition: box-shadow var(--wp--custom--transition--base),
              transform var(--wp--custom--transition--base);
}
.lux-card:hover {
  box-shadow: var(--wp--preset--shadow--md);
  transform: translateY(-2px);
}

/* Eyebrow label above headings. */
.lux-eyebrow {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 600;
  color: var(--wp--preset--color--accent);
}

/* Keep images from overflowing on small screens. */
img, svg, video { max-width: 100%; height: auto; }

/* Print: drop chrome. */
@media print {
  .wp-block-navigation, .wp-site-blocks > header, .wp-site-blocks > footer { display: none !important; }
}

/* ---------------------------------------------------------------- brand mark
   The wordmark is inline SVG with fill="currentColor", so it takes the
   palette's contrast colour and flips correctly on the dark style variation
   without shipping a second image. Height is set here; width follows the
   viewBox so the frame never distorts. */
.lux-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: opacity var(--wp--custom--transition--base);
}

.lux-logo:hover {
	opacity: 0.72;
}

.lux-logo:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

.lux-logo__mark {
	display: block;
	height: 26px;
	width: auto;
}

@media (min-width: 782px) {
	.lux-logo__mark {
		height: 30px;
	}
}

.lux-logo__mark--sm {
	height: 22px;
}

/* ---------------------------------------------------------------- spec list
   Feature lists on the plans cards. No bullet - an accent rule in the margin
   reads cleaner at small sizes and does not fight the card's own border. */
.lux-spec {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.lux-spec li {
	position: relative;
	padding-left: 1.15em;
	margin-bottom: 0.55em;
	color: var(--wp--preset--color--contrast-2);
}

.lux-spec li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.5em;
	height: 2px;
	background: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------- rate tables
   Published prices. Core's table block draws a box around every cell, which
   at sixteen rows reads as a grid rather than a list of numbers. Strip it
   back to one hairline rule per row and pin the figures right, so the prices
   form a column the eye can run down. Both tables scroll rather than squash
   on a narrow screen - a rate is unreadable once it wraps mid-number. */
.lux-rates,
.lux-matrix {
	overflow-x: auto;
	margin-top: var(--wp--preset--spacing--30);
}

.lux-rates table,
.lux-matrix table {
	border-collapse: collapse;
	width: 100%;
	min-width: 32rem;
}

.lux-rates th, .lux-rates td,
.lux-matrix th, .lux-matrix td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	padding: 0.7em 1em 0.7em 0;
	text-align: left;
	vertical-align: baseline;
	color: var(--wp--preset--color--contrast-2);
}

.lux-rates thead th,
.lux-matrix thead th {
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--wp--preset--color--contrast-3);
}

.lux-rates tbody td:first-child,
.lux-matrix tbody td:first-child {
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.lux-rates tbody tr:last-child td,
.lux-matrix tbody tr:last-child td {
	border-bottom: 0;
}

/* The rate card: one price column, hard right, tabular figures. */
.lux-rates th:last-child,
.lux-rates td:last-child {
	text-align: right;
	padding-right: 0;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast);
}

/* The package matrix: a label column, then one column per package. */
.lux-matrix tbody td:first-child {
	font-weight: 400;
	color: var(--wp--preset--color--contrast-3);
	white-space: nowrap;
}

.lux-matrix td + td {
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast);
}

/* Tabular figures wherever a price sits outside a table. */
.lux-amount {
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}