/**
 * Seven Theme — base + components.
 * Cascade ordered via @layer: reset → tokens → base → components → utilities.
 */

@layer fonts, reset, tokens, base, components, utilities;

/* ========================================================================
   FONTS — Inter Variable (Greek + Latin), self-hosted via WC bundle.
   Path resolves to /wp-content/plugins/woocommerce/assets/fonts/ from
   /wp-content/themes/seven-theme/assets/css/.
   ======================================================================== */

@layer fonts {
	@font-face {
		font-family: "Inter";
		src: url("../../../../plugins/woocommerce/assets/fonts/Inter-VariableFont_slnt,wght.woff2") format("woff2-variations");
		font-weight: 100 900;
		font-style: normal;
		font-display: swap;
	}
}

/* ========================================================================
   RESET
   ======================================================================== */

@layer reset {
	/* Universal box-model + margin reset — non-conflicting with plugins. */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body,
	:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
		margin: 0;
	}

	body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		min-block-size: 100vh;
		min-block-size: 100svh;
	}

	/* Media defaults — fluid, block-level. */
	:where(img, svg, video, picture) {
		display: block;
		max-inline-size: 100%;
		block-size: auto;
	}

	/* Form elements inherit font/color so they don't fall back to Helvetica. */
	:where(button, input, select, textarea) {
		font: inherit;
		color: inherit;
	}

	/* Aggressive resets wrapped in :where() — 0 specificity so WooCommerce,
	   Gutenberg, plugins, and post content can override WITHOUT !important. */
	:where(ul, ol):where(:not([class])) {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	:where(button):where(:not([class])) {
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
	}

	:where(a):where(:not([class])) {
		color: inherit;
		text-decoration: none;
	}

	:where(fieldset) {
		margin: 0;
		padding: 0;
		border: 0;
	}
}

/* ========================================================================
   DESIGN TOKENS
   ======================================================================== */

@layer tokens {
	:root {
		/* --- Geist palette (https://geist-ui.dev/en-us/guide/colors) --- */

		/* Foreground / Background */
		--st-foreground: #000;
		--st-background: #fff;

		/* Accents (neutral grayscale 1–8) */
		--st-accents-1: #fafafa;
		--st-accents-2: #eaeaea;
		--st-accents-3: #999;
		--st-accents-4: #888;
		--st-accents-5: #666;
		--st-accents-6: #444;
		--st-accents-7: #333;
		--st-accents-8: #111;

		/* Status — base / light / dark */
		--st-success:        #0070f3;
		--st-success-light:  #3291ff;
		--st-success-dark:   #0761d1;

		--st-warning:        #f5a623;
		--st-warning-light:  #f7b955;
		--st-warning-dark:   #ab570a;

		--st-error:          #ee0000;
		--st-error-light:    #ff1a1a;
		--st-error-dark:     #c50000;

		--st-secondary:      #666;
		--st-secondary-light: #888;
		--st-secondary-dark:  #444;

		/* Special */
		--st-selection: #79ffe1;
		--st-code:      #ff0080;
		--st-link:      #0070f3;
		--st-purple:    #f81ce5;
		--st-cyan:      #50e3c2;
		--st-violet:    #7928ca;
		--st-alert:     #ff0080;

		/* --- Theme aliases (existing code references these) --- */
		--st-bg:           var(--st-background);
		--st-bg-subtle:    var(--st-accents-1);
		--st-text:         var(--st-foreground);
		--st-text-muted:   var(--st-accents-5);
		--st-border:       var(--st-accents-2);
		--st-accent:       var(--st-success);
		--st-accent-hover: var(--st-success-light);
		--st-focus-ring:   rgb(0 112 243 / 0.35);

		/* --- Typography & layout --- */
		--st-font: "Inter", system-ui, sans-serif;
		--st-font-size: 17px;
		--st-line-height: 1.47;

		--st-container: 1280px;
		--st-gap: 1.5rem;
		--st-radius: 4px;

		--st-header-top-h: 36px;
		--st-header-main-h: 56px;
	}

	::selection {
		background: var(--st-selection);
		color: var(--st-foreground);
	}
}

/* ========================================================================
   BASE
   ======================================================================== */

@layer base {
	body {
		font-family: var(--st-font);
		font-size: var(--st-font-size);
		line-height: var(--st-line-height);
		color: var(--st-text);
		background: var(--st-bg);
	}

	a:where(:not([class])) {
		color: var(--st-accent);
	}

	a:where(:not([class])):hover {
		color: var(--st-accent-hover);
		text-decoration: underline;
	}

	.screen-reader-text {
		position: absolute;
		clip-path: inset(50%);
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		margin: -1px;
		padding: 0;
		border: 0;
		white-space: nowrap;
	}
}

/* ========================================================================
   COMPONENTS
   ======================================================================== */

@layer components {
	/* --- Container --- */

	.st-container {
		inline-size: min(100%, var(--st-container));
		margin-inline: auto;
		padding-inline: var(--st-gap);
	}

	/* --- Skip link --- */

	.st-skip-link {
		position: absolute;
		inset-block-start: -100px;
		inset-inline-start: 0;
		padding: 0.5rem 1rem;
		background: var(--st-text);
		color: var(--st-bg);
		z-index: 1000;
	}

	.st-skip-link:focus-visible {
		inset-block-start: 0;
	}

	/* --- Header --- */

	.st-header {
		position: relative;
		background: var(--st-bg);
	}

	.st-header__top {
		background: var(--st-bg-subtle);
		font-size: 0.8125rem;
		color: var(--st-text-muted);
	}

	.st-header__top-inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: var(--st-gap);
		padding-inline: var(--st-gap);
		min-block-size: var(--st-header-top-h);
	}

	.st-header__top-slot {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	.st-header__top-slot--left   { justify-content: flex-start; }
	.st-header__top-slot--center { justify-content: center; }
	.st-header__top-slot--right  { justify-content: flex-end; }

	.st-slot__menu {
		display: flex;
		gap: 1.5rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.st-slot__menu a {
		transition: color 120ms;
	}

	.st-header__top a {
		transition: color 120ms;
	}

	.st-header__top a:hover {
		color: var(--st-text);
	}

	/* --- Main bar — 3-column grid (left | center | right) --- */

	.st-header__main {
		color: var(--st-text);
	}

	.st-header__main-inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: var(--st-gap);
		padding-inline: var(--st-gap);
		min-block-size: var(--st-header-main-h);
	}

	.st-header__col {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		min-inline-size: 0;
	}

	.st-header__col--center {
		justify-content: center;
	}

	.st-header__col--right {
		justify-content: flex-end;
	}

	/* --- Search (centered in main bar) --- */

	.st-header__search {
		display: flex;
		align-items: center;
		inline-size: 100%;
		max-inline-size: 480px;
	}

	.st-header__search-input {
		flex: 1;
		min-inline-size: 0;
		padding: 0.5rem 0.875rem;
		border: 1px solid transparent;
		border-radius: var(--st-radius);
		background: var(--st-bg);
		font-size: 0.9375rem;
	}

	.st-header__search-input {
		transition: border-color 120ms, box-shadow 120ms;
	}

	.st-header__search-input:focus-visible {
		border-color: transparent;
		box-shadow: 0px 0px 0 3px rgb(191 60 0 / 62%)
	}

	.st-header__search-submit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.5rem;
		color: var(--st-text-muted);
		margin-inline-start: 0.25rem;
	}

	.st-header__search-submit:hover {
		color: var(--st-text);
	}

	.st-header__brand {
		display: inline-flex;
		align-items: center;
		font-weight: 600;
		font-size: 1.125rem;
		color: inherit;
		flex-shrink: 0;
	}

	.st-header__brand-text {
		letter-spacing: -0.01em;
	}

	.st-header__logo-img {
		/* Dimensions come from HTML width/height attributes (admin settings).
		   No CSS overrides — keep aspect ratio user defined. */
		flex-shrink: 0;
		max-inline-size: 100%;
	}

	/* --- Menu button (wide pill: hamburger bars + label, JS-toggled) --- */

	.st-header__menu-button {
		display: inline-flex;
		align-items: center;
		gap: 0.625rem;
		padding: 0.5rem 0.875rem;
		border-radius: var(--st-radius);
		background: var(--st-bg-subtle);
		color: inherit;
		font-weight: 600;
		font-size: 0.9375rem;
		cursor: pointer;
		transition: background 120ms, color 120ms;
	}

	.st-header__menu-button:hover,
	.st-header__menu-button[aria-expanded="true"] {
		background: var(--st-accent);
		color: #fff;
	}

	.st-header__menu-button-bars {
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		inline-size: 18px;
		block-size: 12px;
	}

	.st-header__menu-button-bar {
		display: block;
		inline-size: 100%;
		block-size: 2px;
		background: currentColor;
		transition: transform 200ms, opacity 200ms;
		transform-origin: center;
	}

	.st-header__menu-button[aria-expanded="true"] .st-header__menu-button-bar:nth-child(1) {
		transform: translateY(5px) rotate(45deg);
	}

	.st-header__menu-button[aria-expanded="true"] .st-header__menu-button-bar:nth-child(2) {
		opacity: 0;
	}

	.st-header__menu-button[aria-expanded="true"] .st-header__menu-button-bar:nth-child(3) {
		transform: translateY(-5px) rotate(-45deg);
	}

	/* --- Nav (drawer, mobile + desktop) --- */

	.st-header__nav {
		display: none;
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		background: var(--st-bg);
		border-block-end: 1px solid var(--st-border);
		box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
		padding-block: 1rem;
		z-index: 100;
	}

	.st-header:has(.st-header__menu-button[aria-expanded="true"]) .st-header__nav {
		display: block;
	}

	.st-header__menu {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		inline-size: min(100%, var(--st-container));
		margin-block: 0;
		margin-inline: auto;
		padding-block: 0;
		padding-inline: var(--st-gap);
		list-style: none;
	}

	.st-header__menu a {
		display: block;
		padding: 0.5rem 0;
		font-weight: 500;
		transition: color 120ms;
	}

	.st-header__menu a:hover,
	.st-header__menu .current-menu-item > a {
		color: var(--st-accent);
	}

	/* --- Toolbar (icon-over-text vertical buttons: support · account · wishlist · compare · cart) --- */

	.st-header__toolbar {
		display: inline-flex;
		align-items: stretch;
		gap: 0.25rem;
	}

	.st-header__tool {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.25rem;
		min-inline-size: 56px;
		padding: 0.375rem 0.5rem;
		border-radius: var(--st-radius);
		color: inherit;
		font-size: 0.75rem;
		line-height: 1.2;
		text-align: center;
		transition: background 120ms, color 120ms;
	}

	.st-header__tool:hover {
		color: var(--st-accent);
	}

	.st-header__tool-icon {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.st-header__tool-text {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 0.125rem;
	}

	.st-header__cart-total {
		font-weight: 600;
		font-size: 0.8125rem;
		color: var(--st-accent);
	}

	.st-header__tool--cart .st-header__tool-icon {
		min-inline-size: 22px;
	}

	.st-header__cart-count {
		position: absolute;
		inset-block-start: -6px;
		inset-inline-end: -8px;
		min-inline-size: 18px;
		block-size: 18px;
		padding: 0 5px;
		border-radius: 9px;
		background: var(--st-accent);
		color: #000;
		font-size: 11px;
		line-height: 18px;
		text-align: center;
		font-weight: 600;
	}

	.st-header__cart-count:empty,
	.st-header__cart-count[data-cart-count="0"] {
		display: none;
	}

	.st-icon {
		flex-shrink: 0;
	}

	/* --- Mobile layout (<768px): stack search below main row, icon-only toolbar --- */

	@media (max-width: 767px) {
		.st-header__main-inner {
			grid-template-columns: 1fr auto;
			grid-template-areas:
				"left right"
				"center center";
			row-gap: 0.5rem;
			padding-block: 0.5rem;
		}

		.st-header__col--left   { grid-area: left; }
		.st-header__col--center { grid-area: center; justify-content: stretch; }
		.st-header__col--right  { grid-area: right; }

		.st-header__search {
			max-inline-size: none;
		}

		.st-header__menu-button-text {
			display: none;
		}

		.st-header__menu-button {
			padding: 0.5rem;
		}

		.st-header__tool-text {
			display: none;
		}

		.st-header__tool {
			min-inline-size: 0;
			inline-size: 40px;
			block-size: 40px;
			padding: 0.375rem;
		}
	}

	/* --- Desktop layout (≥768px) --- */

	@media (min-width: 768px) {
		.st-header__main-inner {
			min-block-size: 64px;
		}
	}

	/* --- Main content --- */

	.st-main {
		padding-block: 2rem;
		min-block-size: 60vh;
	}

	/* --- Footer (placeholder; expanded in Phase 2) --- */

	.st-footer {
		margin-block-start: 4rem;
		padding-block: 2rem;
		background: var(--st-bg-subtle);
		border-block-start: 1px solid var(--st-border);
		font-size: 0.875rem;
		color: var(--st-text-muted);
	}

	.st-footer__inner {
		text-align: center;
	}
}