/* ==========================================================================
   MATA Shop — Global skin
   Base reset, typography, buttons, announcement bar, header, navigation,
   cart, mobile menu and footer. WooCommerce page styling lives in
   woocommerce.css. All values reference tokens from variables.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base / reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body.mata-site {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

.mata-page { overflow-x: clip; }
.mata-main { width: 100%; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-text); text-decoration: none; }
a:hover { color: var(--color-text); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 16px;
	line-height: 1.1;
}

p { margin: 0 0 16px; color: var(--color-text-secondary); }

button { font-family: inherit; cursor: pointer; }

/* Shared label / overline */
.mata-overline {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--color-text-muted);
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   2. Buttons — pill shape + hard-offset shadow (brand signature, no animation)
   -------------------------------------------------------------------------- */
.mata-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 18px 32px;
	border: none;
	border-radius: var(--radius-pill);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);
}
.mata-btn svg { display: block; }

.mata-btn--yellow { background: var(--color-primary); color: var(--color-text); box-shadow: var(--shadow-btn-yellow); }
.mata-btn--yellow:hover { background: var(--color-primary-dark); color: var(--color-text); }

.mata-btn--dark { background: var(--color-text); color: var(--color-primary); box-shadow: var(--shadow-btn-dark); }
.mata-btn--dark:hover { background: #000; color: var(--color-primary); }

.mata-btn--outline { background: var(--color-bg); color: var(--color-text); border: 2.5px solid var(--color-text); }
.mata-btn--outline:hover { background: var(--color-text); color: var(--color-primary); }

.mata-btn--lg { font-size: 20px; padding: 22px 40px; box-shadow: var(--shadow-btn-yellow-lg); }
.mata-btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   3. Announcement bar
   -------------------------------------------------------------------------- */
.mata-announce {
	background: var(--color-text);
	color: var(--color-primary);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: center;
	padding: 10px 16px;
}
.mata-announce__short { display: none; }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.mata-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px var(--gutter);
	background: var(--color-primary);
	border-bottom: 2px solid var(--color-primary-dark);
	position: relative;
}

.mata-header__logo { display: inline-flex; align-items: center; flex: none; }
.mata-header__logo img { height: 48px; width: auto; }

.mata-header__burger {
	display: none;
	width: 36px; height: 36px;
	align-items: center; justify-content: center;
	background: transparent; border: none; color: var(--color-text);
	padding: 0;
}

/* Nav */
.mata-nav__menu {
	display: flex;
	align-items: center;
	gap: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mata-nav__menu a {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	text-underline-offset: 4px;
}
.mata-nav__menu a:hover { text-decoration: underline; }
.mata-nav__menu .is-active > a,
.mata-nav__menu .current-menu-item > a { text-decoration: underline; }

/* Cart button */
.mata-cart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 10px 18px;
	border: 2px solid var(--color-text);
	border-radius: var(--radius-pill);
	background: var(--color-text);
	color: var(--color-primary);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
}
.mata-cart:hover { color: var(--color-primary); }
.mata-cart__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: var(--color-text);
	border: 1.5px solid var(--color-text);
	font-size: 12px;
	font-weight: 800;
}

/* --------------------------------------------------------------------------
   5. Mobile nav drawer
   -------------------------------------------------------------------------- */
.mata-mobile-nav {
	display: none;
	background: var(--color-primary);
	border-bottom: 2px solid var(--color-primary-dark);
	padding: 8px var(--gutter-mobile) 16px;
}
.mata-mobile-nav.is-open { display: block; }
.mata-mobile-nav .mata-nav__menu {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
.mata-mobile-nav .mata-nav__menu li { border-top: 1.5px solid rgba(26,23,20,0.12); }
.mata-mobile-nav .mata-nav__menu li:first-child { border-top: none; }
.mata-mobile-nav .mata-nav__menu a {
	display: block;
	padding: 14px 4px;
	font-size: 16px;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */
.mata-footer {
	position: relative;
	overflow: hidden;
	background: var(--color-primary);
	padding: 56px var(--gutter) 40px;
}
.mata-footer__dots {
	position: absolute; inset: 0;
	background-image: radial-gradient(var(--color-text) 1.5px, transparent 1.5px);
	background-size: 32px 32px;
	opacity: 0.06;
	pointer-events: none;
}
.mata-footer__inner { position: relative; max-width: var(--content-max); margin: 0 auto; }

.mata-footer__cols {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr;
	gap: 48px;
	align-items: start;
	margin-bottom: 40px;
}
.mata-footer__logo { height: 64px; width: auto; margin-bottom: 16px; }
.mata-footer__brand p {
	font-size: 14px;
	color: var(--color-text);
	opacity: 0.8;
	line-height: 1.5;
	max-width: 280px;
	margin: 0;
}
.mata-footer__heading {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--color-text);
	margin-bottom: 16px;
}
.mata-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mata-footer__col a { font-size: 14px; color: var(--color-text); }
.mata-footer__col a:hover { text-decoration: underline; }

.mata-footer__social { display: flex; gap: 10px; margin-bottom: 20px; }
.mata-footer__social a {
	width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--color-text); color: var(--color-primary);
	border-radius: var(--radius-pill);
}
.mata-footer__contact { font-size: 13px; color: var(--color-text); opacity: 0.8; line-height: 1.5; }

.mata-footer__bottom {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding-top: 24px;
	border-top: 1.5px solid rgba(26,23,20,0.18);
	font-size: 13px;
	color: var(--color-text);
	opacity: 0.75;
}
.mata-footer__merchpack { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   7. Responsive — switch to mobile header + stacked footer
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
	.mata-header { padding: 14px var(--gutter-mobile); gap: 12px; }
	.mata-header__burger { display: inline-flex; }
	.mata-header__logo { order: 0; margin: 0 auto; }      /* logo centered */
	.mata-header__burger { order: -1; }                    /* burger first */
	.mata-header__nav { display: none; }                   /* inline nav hidden */
	.mata-header__logo img { height: 32px; }

	/* Cart becomes a compact icon button */
	.mata-cart {
		position: relative;
		padding: 0;
		width: 36px; height: 36px;
		border: none;
		background: transparent;
		color: var(--color-text);
		justify-content: center;
	}
	.mata-cart__label { display: none; }
	.mata-cart__count {
		position: absolute; top: -2px; right: -2px;
		min-width: 18px; height: 18px;
		padding: 0 4px;
		background: var(--color-text);
		color: var(--color-primary);
		border: none;
		font-size: 10px;
	}

	.mata-announce { padding: 8px 16px; font-size: 11px; }
	.mata-announce__full { display: none; }
	.mata-announce__short { display: inline; }

	/* Footer → 2 columns, brand + social span full width */
	.mata-footer { padding: 28px var(--gutter-mobile) 20px; }
	.mata-footer__cols { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
	.mata-footer__brand { grid-column: 1 / -1; }
	.mata-footer__logo { height: 40px; margin-bottom: 10px; }
	.mata-footer__heading { font-size: 12px; }
	.mata-footer__col ul { gap: 6px; }
	.mata-footer__col a { font-size: 12px; }
	.mata-footer__bottom {
		flex-direction: column;
		gap: 4px;
		text-align: center;
		font-size: 11px;
	}
}