/*
Theme Name: Mart Sander Custom
Theme URI: https://martsander.dignicy.com
Author: Mart Sander
Author URI: https://martsander.dignicy.com
Description: A modern, artistic WordPress theme with WooCommerce support. Features a sophisticated beige color palette and elegant typography perfect for creative professionals.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mart-sander-custom
Tags: woocommerce, e-commerce, custom-colors, custom-logo, custom-menu, featured-images, full-site-editing, block-styles, wide-blocks, portfolio

Mart Sander Custom Theme - An artistic portfolio and e-commerce theme with Tailwind CSS.
*/

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
	--msc-cream-50: #fffefb;
	--msc-cream-100: #fdfbf7;
	--msc-stone-200: #e7e5e4;
	--msc-stone-400: #a8a29e;
	--msc-stone-500: #78716c;
	--msc-stone-600: #57534e;
	--msc-stone-700: #44403c;
	--msc-stone-800: #292524;
	--msc-stone-900: #1c1917;
	--msc-amber-500: #f59e0b;
	--msc-amber-600: #d97706;
	--msc-amber-700: #b45309;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.font-serif {
	font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ==========================================================================
   Header Styles
   ========================================================================== */

#masthead {
	width: 100vw;
	left: 0;
	right: 0;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Ensure no horizontal scroll from 100vw */
html, body {
	overflow-x: hidden;
}

/* Transparent header (over hero) */
#masthead.header-transparent {
	background-color: transparent;
	color: #fffefb;
}

#masthead.header-transparent .header-logo {
	color: #fffefb;
}

#masthead.header-transparent .main-navigation a {
	color: #fffefb;
}

#masthead.header-transparent .mini-cart,
#masthead.header-transparent .mobile-menu-toggle {
	color: #fffefb;
}

/* Solid header (scrolled) */
#masthead.header-solid {
	background-color: #fffefb;
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
	color: #1c1917;
}

#masthead.header-solid .header-logo {
	color: #1c1917;
}

#masthead.header-solid .main-navigation a {
	color: #1c1917;
}

#masthead.header-solid .mini-cart,
#masthead.header-solid .mobile-menu-toggle {
	color: #1c1917;
}

/* Navigation links */
.main-navigation a {
	position: relative;
	font-size: 0.875rem;
	letter-spacing: 0.025em;
	transition: opacity 0.2s ease;
}

.main-navigation a:hover {
	opacity: 0.7;
}

.main-navigation a::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 1px;
	background-color: currentColor;
	transition: width 0.3s ease;
}

.main-navigation a:hover::after {
	width: 100%;
}

/* Mobile menu */
.mobile-navigation {
	width: 100vw;
}

.mobile-navigation a {
	display: block;
	padding: 0.75rem 0;
	font-size: 1.125rem;
	color: #1c1917;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-navigation a:hover {
	color: #b45309;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.animate-fade-in-up {
	animation: fadeInUp 0.8s ease-out forwards;
}

.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-600 { animation-delay: 0.6s; }

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-20px); }
}

.animate-float {
	animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
	animation: float 6s ease-in-out 3s infinite;
}

/* ==========================================================================
   Work Items Animation
   ========================================================================== */

.work-item {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.work-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   Links & Buttons
   ========================================================================== */

a {
	color: var(--msc-amber-700);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--msc-amber-600);
}

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

/* ==========================================================================
   Screen Reader Text
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ==========================================================================
   Prose Typography
   ========================================================================== */

.prose p { margin-bottom: 1.5em; }
.prose h2 { margin-top: 2em; margin-bottom: 1em; font-size: 1.5em; }
.prose h3 { margin-top: 1.5em; margin-bottom: 0.75em; font-size: 1.25em; }
.prose ul, .prose ol { margin: 1.5em 0; padding-left: 1.5em; }
.prose li { margin: 0.5em 0; }

.prose blockquote {
	border-left: 3px solid var(--msc-amber-600);
	padding-left: 1.5em;
	margin: 2em 0;
	font-style: italic;
	color: var(--msc-stone-600);
}

/* ==========================================================================
   Forms
   ========================================================================== */

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--msc-amber-600);
}

/* ==========================================================================
   WordPress Alignments
   ========================================================================== */

.alignleft { float: left; margin-right: 1.5em; margin-bottom: 1em; }
.alignright { float: right; margin-left: 1.5em; margin-bottom: 1em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   WooCommerce
   ========================================================================== */

.woocommerce .price { color: var(--msc-stone-900); font-weight: 500; }
.woocommerce .price del { color: var(--msc-stone-400); }
.woocommerce .price ins { text-decoration: none; color: var(--msc-amber-700); }
.woocommerce .onsale { background-color: var(--msc-amber-600); color: white; }

/* ==========================================================================
   Utilities
   ========================================================================== */

::selection {
	background: #fde68a;
	color: var(--msc-stone-900);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--msc-cream-100); }
::-webkit-scrollbar-thumb { background: var(--msc-stone-400); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--msc-stone-500); }

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
	.site-header, .site-footer, #back-to-top, #side-cart, #cart-overlay { display: none !important; }
	body { background: white; color: black; }
}