/*
Theme Name:  Blocksy Child
Theme URI:   https://example.com/blocksy-child
Description: Child theme for Blocksy — inherits all parent functionality and adds custom UI and feature modifications.
Author:      Your Name
Author URI:  https://example.com
Template:    blocksy
Version:     1.0.0
Requires at least: 6.7
Requires PHP: 8.1
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blocksy-child
Tags:        custom-colors, custom-logo, custom-menu, featured-images
*/

/* ==========================================================================
   BLOCKSY CHILD THEME — STYLESHEET
   Loaded after Blocksy parent styles. Override anything you need here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS — CSS Custom Properties
   Override Blocksy's --theme-* variables to restyle the whole site.
   -------------------------------------------------------------------------- */

:root {
	/* --- Brand Design System --- */
	--brand-primary: #E11D2E;
	--brand-primary-hover: #B81424;
	--brand-dark-bg: #0F1115;
	--brand-dark-sec: #1A1D23;
	--brand-cards: #252932;
	--brand-white: #FFFFFF;
	--brand-text: #222222;
	--brand-text-sec: #6B7280;
	--brand-borders: #E5E7EB;
	--brand-muted-bg: #F8F9FA;

	/* --- Blocksy Core Color Palette Overrides --- */
	--theme-palette-color-1: var(--brand-primary);       /* Accent Primary */
	--theme-palette-color-2: var(--brand-primary-hover); /* Accent Hover */
	--theme-palette-color-3: var(--brand-dark-sec);      /* Accent Alt */
	--theme-palette-color-4: var(--brand-text);          /* Body Text */
	--theme-palette-color-5: var(--brand-text-sec);      /* Muted Text / Borders */
	--theme-palette-color-6: var(--brand-muted-bg);      /* Background Alt */
	--theme-palette-color-7: var(--brand-white);         /* Base Light / White */
	--theme-palette-color-8: var(--brand-white);       /* Base Dark */

	/* Typography */
	--theme-font-size:       16px;
	--theme-line-height:     1.65;

	/* Layout */
	--theme-content-spacing: 1.5em;
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY
   -------------------------------------------------------------------------- */

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: var(--brand-white) !important;
	color: var(--brand-text) !important;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Manrope', system-ui, -apple-system, sans-serif;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--brand-text) !important;
}

#main,
#page,
.site-container,
.ct-container {
	background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   3. HEADER
   -------------------------------------------------------------------------- */

/* Glassmorphism Sticky Header */
.ct-header [data-sticky="yes"] {
	background-color: rgba(30, 41, 59, 0.8) !important;
	backdrop-filter: blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: background-color 0.3s ease, border 0.3s ease;
}

/* Search bar premium feel */
/* .ct-search-form input[type="search"] {
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	color: #ffffff;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ct-search-form input[type="search"]:focus {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: var(--theme-palette-color-1, #2563eb);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
} */

/* --------------------------------------------------------------------------
   4. NAVIGATION
   -------------------------------------------------------------------------- */

.ct-menu-link {
	font-weight: 600;
	letter-spacing: -0.01em;
	position: relative;
}

/* Accent underline animations for header items */
.ct-menu-link::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--theme-palette-color-1, #2563eb);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.25s ease;
}

.ct-menu-link:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* --------------------------------------------------------------------------
   5. HERO / PAGE TITLE AREA
   -------------------------------------------------------------------------- */

.hero-section {
	position: relative;
	overflow: hidden;
}

/* Add a glowing radial background behind hero sections */
.hero-section::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0) 70%);
	pointer-events: none;
	z-index: 0;
}

/* --------------------------------------------------------------------------
   6. CONTENT AREA
   -------------------------------------------------------------------------- */

/* Premium Card Blocks */
.wp-block-group.has-background {
	border-radius: 12px;
	padding: 2.5rem;
	border: 1px solid rgba(255, 255, 255, 0.05);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   7. SIDEBAR
   -------------------------------------------------------------------------- */

.ct-sidebar .widget {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.widget-title {
	border-bottom: 2px solid rgba(255, 255, 255, 0.05);
	padding-bottom: 12px;
	margin-bottom: 20px;
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   8. CARDS / ARCHIVE LISTING
   -------------------------------------------------------------------------- */

/* Hover effects for standard post cards */
article.post {
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

article.post:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   9. SINGLE POST / PAGE
   -------------------------------------------------------------------------- */

.entry-content {
	line-height: 1.8;
	font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */

/* Clean up footer boundaries under the new dark scheme */
.ct-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	background-color: var(--theme-palette-color-7, #1e293b) !important;
}

.ct-footer-copy {
	font-size: 0.85rem;
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
   11. WOOCOMMERCE (Enhanced Compatibility & Aesthetics)
   -------------------------------------------------------------------------- */

/* Premium product badges */
span.onsale {
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 4px 12px !important;
	border-radius: 4px !important;
	box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}

/* Product cards adjustments */
.products .product {
	background: rgba(255, 255, 255, 0.02) !important;
	border: 1px solid rgba(255, 255, 255, 0.04) !important;
	border-radius: 12px !important;
	padding: 16px !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.products .product:hover {
	background: rgba(255, 255, 255, 0.04) !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
	transform: translateY(-5px);
	box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.4) !important;
}

/* WooCommerce Button overrides */
.woocommerce a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt, 
.woocommerce #respond input#submit.alt {
	background-image: linear-gradient(135deg, var(--theme-palette-color-1, #2563eb) 0%, var(--theme-palette-color-2, #1d4ed8) 100%) !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.woocommerce a.button.alt:hover, 
.woocommerce button.button.alt:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4) !important;
}

/* WooCommerce Review Star Color */
.star-rating span {
	color: #fbbf24 !important;
}

/* --------------------------------------------------------------------------
   12. GUTENBERG / BLOCK EDITOR OVERRIDES
   -------------------------------------------------------------------------- */

/* Core block alignments support */
.alignwide {
	border-radius: 12px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   13. UTILITIES & HELPERS
   -------------------------------------------------------------------------- */

/* Custom premium scrollbar for modern browsers */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background:#1e293b;
}

::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 5px;
	border: 2px solid #1e293b;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* --------------------------------------------------------------------------
   14. RESPONSIVE — MOBILE / TABLET
   -------------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
	.wp-block-group.has-background {
		padding: 1.5rem;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.woocommerce a.button.alt, 
	.woocommerce button.button.alt {
		width: 100%;
		text-align: center;
	}
}

.page-title {
	color: white !important;
}