/*
Theme Name: MRKByDesign (Astra Child)
Theme URI: https://mrkbydesign.com
Description: Child theme for Astra, styled to match the original MRKByDesign Base44 design (dark, editorial, volt-green accent).
Author: MRKByDesign
Template: astra
Version: 1.0.3
Text Domain: mrkbydesign-child
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Ported directly from the Base44 app's src/index.css. If the brand colors
   or fonts ever change, this is the only place that needs editing — every
   rule below references these variables instead of hardcoded values.
   ========================================================================== */

:root {
	/* Brand colors, straight from the Base44 source */
	--mrk-obsidian: #0A0A0B;      /* main background */
	--mrk-charcoal: #141416;      /* card / panel background */
	--mrk-ghost-white: #F4F4F4;   /* main text */
	--mrk-volt: #D1FF00;          /* primary accent */
	--mrk-hyper-green: #00FFA3;   /* secondary accent */

	--mrk-border: rgba(244, 244, 244, 0.12);   /* hairline border color */
	--mrk-border-soft: rgba(244, 244, 244, 0.08);

	/* Fonts (loaded via functions.php from Google Fonts) */
	--mrk-font-heading: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
	--mrk-font-body: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
	--mrk-font-mono: 'JetBrains Mono', ui-monospace, monospace;

	--mrk-radius: 0.25rem; /* sharp, barely-rounded corners throughout */
}

/* ==========================================================================
   2. BASE / GLOBAL
   ========================================================================== */

html, body {
	background-color: var(--mrk-obsidian);
	color: var(--mrk-ghost-white);
	font-family: var(--mrk-font-body);
}

h1, h2, h3, h4, h5, h6,
.entry-title, .page-title {
	font-family: var(--mrk-font-heading);
	letter-spacing: -0.03em;
	color: var(--mrk-ghost-white);
}

a {
	color: var(--mrk-ghost-white);
}

a:hover {
	color: var(--mrk-volt);
}

*:focus-visible {
	outline: 2px solid var(--mrk-volt);
	outline-offset: 4px;
}

code, .mono, .mrk-mono {
	font-family: var(--mrk-font-mono);
}

/* ==========================================================================
   3. UTILITY CLASSES
   Same names/behavior as the Base44 utility classes, so design language
   stays consistent if any markup gets copied over almost as-is.
   ========================================================================== */

.text-volt { color: var(--mrk-volt); }
.text-hyper-green { color: var(--mrk-hyper-green); }
.bg-obsidian { background-color: var(--mrk-obsidian); }
.bg-charcoal { background-color: var(--mrk-charcoal); }
.border-volt { border-color: var(--mrk-volt); }
.bg-volt { background-color: var(--mrk-volt); }

.mrk-hairline {
	border-width: 0.5px;
	border-style: solid;
	border-color: var(--mrk-border);
}

/* Small uppercase mono-font tag, e.g. a "NEW" or provider badge */
.mrk-badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	font-family: var(--mrk-font-mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: var(--mrk-radius);
}

.mrk-badge-volt {
	background: var(--mrk-volt);
	color: var(--mrk-obsidian);
}

/* Provider badges (Printful / Gelato / Tapstitch) — same idea as the
   .pod-badge-* classes in the original app, for anywhere the product
   type/provider is shown to an admin or artist. */
.mrk-badge-printful { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 0.5px solid rgba(59, 130, 246, 0.3); }
.mrk-badge-gelato    { background: rgba(209, 255, 0, 0.1); color: var(--mrk-volt); border: 0.5px solid rgba(209, 255, 0, 0.3); }
.mrk-badge-tapstitch { background: rgba(0, 255, 163, 0.1); color: var(--mrk-hyper-green); border: 0.5px solid rgba(0, 255, 163, 0.3); }

/* ==========================================================================
   4. SITE HEADER / NAV
   Astra wraps its header in .site-header — overriding the background,
   border, and link styling to match the fixed dark nav from the original.
   ========================================================================== */

.site-header,
.ast-header-break-point .site-header {
	background-color: var(--mrk-obsidian);
	border-bottom: 0.5px solid var(--mrk-border-soft);
}

.site-header .main-header-menu a,
.site-header .ast-header-navigation-menu a {
	font-family: var(--mrk-font-body);
	font-size: 0.9rem;
	color: rgba(244, 244, 244, 0.8);
	position: relative;
}

.site-header .main-header-menu a:hover {
	color: var(--mrk-ghost-white);
}

/* Underline-on-hover nav link, matching .nav-link-hover in the original */
.site-header .main-header-menu li > a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 0.5px;
	background: var(--mrk-volt);
	transition: width 0.2s ease;
}

.site-header .main-header-menu li:hover > a::after {
	width: 100%;
}

.ast-site-identity .site-title a,
.ast-site-identity .site-title a:hover {
	font-family: var(--mrk-font-heading);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--mrk-ghost-white);
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.ast-button,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
input[type="submit"] {
	background-color: var(--mrk-volt) !important;
	color: var(--mrk-obsidian) !important;
	font-family: var(--mrk-font-heading);
	font-weight: 600;
	border-radius: var(--mrk-radius) !important;
	border: none !important;
	text-transform: none;
	transition: opacity 0.2s ease;
}

.ast-button:hover,
button.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	opacity: 0.85;
	color: var(--mrk-obsidian) !important;
}

/* Secondary / outline button style */
.ast-button.mrk-btn-outline {
	background: transparent !important;
	color: var(--mrk-ghost-white) !important;
	border: 0.5px solid var(--mrk-border) !important;
}

/* ==========================================================================
   6. CARDS (Album / Category / Design cards)
   Matches .design-card / .album-card hover behavior from the original.
   ========================================================================== */

.mrk-card {
	background: var(--mrk-charcoal);
	border-radius: var(--mrk-radius);
	overflow: hidden;
	transition: transform 0.2s ease;
}

.mrk-card:hover {
	transform: translateY(-2px);
}

/* Product/design image "stage" — the square area a design mockup sits in */
.mrk-design-stage {
	position: relative;
	background: var(--mrk-charcoal);
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.mrk-design-stage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   7. WOOCOMMERCE PRODUCT GRID
   ========================================================================== */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--mrk-charcoal);
	border-radius: var(--mrk-radius);
	padding: 1rem;
}

.woocommerce ul.products li.product .price {
	color: var(--mrk-volt);
	font-family: var(--mrk-font-mono);
}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
	font-family: var(--mrk-font-heading);
	color: var(--mrk-ghost-white);
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */

.site-footer,
.ast-small-footer {
	background-color: var(--mrk-charcoal);
	border-top: 0.5px solid var(--mrk-border-soft);
	color: rgba(244, 244, 244, 0.7);
}

.site-footer a {
	color: rgba(244, 244, 244, 0.7);
}

.site-footer a:hover {
	color: var(--mrk-volt);
}

/* ==========================================================
   MOBILE FIX: below Astra's 921px breakpoint, body's own
   background reverts to Astra's default white while html and
   all other dark-theme elements stay on the --mrk-obsidian
   palette, making cream/white text unreadable, and Astra's
   default .ast-container side padding eats into the small
   viewport. Re-assert the dark bg and drop the side padding
   specifically at mobile/tablet widths (desktop untouched).
   ========================================================== */
@media (max-width: 921px) {
  html, body { background-color: var(--mrk-obsidian) !important; }
  .ast-container { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Sitewide "MrkByDesign Presents" banner -- shown at the top of every
   public page (see functions.php: astra_header_after hook). Added
   2026-08-28 per Scott, replacing the old logo everywhere. */
.mrk-site-banner { text-align: center; padding: 1.5rem 1rem 0; }
.mrk-site-banner-img { max-width: 100%; height: auto; display: inline-block; }

/* Banner blend fix -- the banner PNG's own background (~#131313) is a
   hair off the page's true black (--mrk-obsidian, #0A0A0B), which made
   it look like a pasted image with a visible edge. A same-width strip
   matching the image's own background sits directly behind it so the
   seam disappears; centered via the parent's text-align. Added
   2026-08-28 per Scott. Applies to both the sitewide banner and the
   homepage's own copy (same markup, both wrapped in this span).
*/
.mrk-site-banner { text-align: center; padding: 1.5rem 1rem 0; }
.mrk-site-banner-inner { display: inline-block; background-color: #131313; padding: 14px 18px; border-radius: 6px; }
.mrk-site-banner-img,
.mrk-hero-topline-logo { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* Account bar (Log In / My Account / Log Out corner link) -- was
   styled #666 for a light page background; unreadable/mismatched on
   this dark theme. Also force a dark background on Astra's mobile
   header chrome, which was showing through as a plain white box on
   mobile once the old logo (that used to visually cover it) was
   removed. Added 2026-08-28 per Scott. */
.mrk-account-link { color: #f5f5f5 !important; }
.mrk-account-link:hover { color: var(--mrk-volt) !important; }
.mrk-account-logout { color: #ff8080 !important; }

@media (max-width: 921px) {
	#ast-mobile-header,
	.ast-mobile-header-wrap,
	.ast-mobile-header-wrap .main-header-bar-wrap,
	.ast-mobile-header-wrap .ast-primary-header-bar,
	.ast-mobile-header-wrap .ast-below-header-bar,
	.ast-mobile-header-wrap .ast-above-header-bar,
	.mrk-account-bar {
		background-color: var(--mrk-obsidian) !important;
	}
}