/*
Theme Name: ClearSkyPress
Theme URI: https://example.com/themes/clearskypress
Author: ZCode
Author URI: https://example.com
Description: ClearSkyPress is a clean, modern Material Design 3 (Material You) WordPress classic theme. Features a sky-blue and snow-white color palette, card-based layouts, smooth ripple animations, full Customizer support, responsive mobile-first design, and infinite scroll article loading.
Version: 1.0.0
Requires at least: 5.4
Tested up to: 6.5
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clearskypress
Tags: blog, two-columns, three-columns, custom-logo, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready, rtl-language-support, responsive-layout
*/

/* -------------------------------------------------------------------------
 * ClearSkyPress - Main Theme Stylesheet
 * Base reset & helpers live here. Material Design components are loaded
 * via assets/css/material.css. Customizer output is injected inline.
 * ------------------------------------------------------------------------- */

/* CSS Variables: Default "Sky Blue + Snow White" palette.
   These are overridden at wp_head by Customizer output via
   csp_inline_customizer_css() in functions.php. */
:root {
	--csp-primary:        #4A90E2;
	--csp-primary-light:  #7CB3F2;
	--csp-primary-dark:   #2C6BBF;
	--csp-on-primary:     #FFFFFF;

	--csp-primary-container:    #D6E9FF;
	--csp-on-primary-container: #001D36;
	--csp-secondary:            #526070;
	--csp-on-secondary:         #FFFFFF;
	--csp-secondary-container:  #D6E4F7;
	--csp-on-secondary-container: #0E1D2A;
	--csp-tertiary:             #6A5778;
	--csp-on-tertiary:          #FFFFFF;
	--csp-tertiary-container:   #F1DAFF;
	--csp-on-tertiary-container: #241431;

	--csp-bg:             #F8FAFC;
	--csp-surface:        #FFFFFF;
	--csp-surface-dim:    #D8DAE0;
	--csp-surface-bright: #F8FAFC;
	--csp-surface-container-lowest: #FFFFFF;
	--csp-surface-container-low:    #F2F6FB;
	--csp-surface-container:        #ECF2F8;
	--csp-surface-container-high:   #E6ECF3;
	--csp-surface-container-highest:#E0E7EF;
	--csp-text:           #1E293B;
	--csp-text-muted:     #64748B;
	--csp-border:         #E2E8F0;
	--csp-outline:        #74777F;
	--csp-outline-variant:#C4C7CF;

	--csp-state-hover:    0.08;
	--csp-state-focus:    0.12;
	--csp-state-pressed:  0.12;
	--csp-state-dragged:  0.16;

	--csp-radius-xs:      4px;
	--csp-radius-sm:      8px;
	--csp-radius:         16px;
	--csp-radius-lg:      24px;
	--csp-radius-xl:      28px;
	--csp-radius-full:    999px;

	--csp-shadow-1:       0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.10);
	--csp-shadow-2:       0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.08);
	--csp-shadow-3:       0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.10);
	--csp-elevation-1:    0 1px 2px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.08);
	--csp-elevation-2:    0 2px 6px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.08);
	--csp-elevation-3:    0 6px 16px rgba(15, 23, 42, 0.12), 0 12px 24px rgba(15, 23, 42, 0.08);
	--csp-elevation-4:    0 8px 20px rgba(15, 23, 42, 0.14), 0 16px 32px rgba(15, 23, 42, 0.10);
	--csp-elevation-5:    0 12px 28px rgba(15, 23, 42, 0.16), 0 24px 48px rgba(15, 23, 42, 0.12);

	--csp-max-width:      1200px;
	--csp-transition:     0.25s cubic-bezier(0.2, 0, 0, 1);

	--mdui-color-primary: var(--csp-primary);
	--mdui-color-on-primary: var(--csp-on-primary);
	--mdui-color-primary-container: var(--csp-primary-container);
	--mdui-color-on-primary-container: var(--csp-on-primary-container);
	--mdui-color-secondary: var(--csp-secondary);
	--mdui-color-secondary-container: var(--csp-secondary-container);
	--mdui-color-surface: var(--csp-surface);
	--mdui-color-background: var(--csp-bg);
	--mdui-color-outline: var(--csp-outline);
	--mdui-shape-corner-small: var(--csp-radius-sm);
	--mdui-shape-corner-medium: var(--csp-radius);
	--mdui-shape-corner-large: var(--csp-radius-lg);
}

/* Modern reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: "Roboto", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--csp-text);
	background:
		radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--csp-primary) 12%, transparent) 0 28rem, transparent 36rem),
		radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--csp-tertiary) 10%, transparent) 0 24rem, transparent 34rem),
		linear-gradient(180deg, var(--csp-surface-bright), var(--csp-bg) 38%, var(--csp-surface-container-low));
	background-color: var(--csp-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--csp-primary-dark); text-decoration: none; transition: color var(--csp-transition); }
a:hover { color: var(--csp-primary); }
h1, h2, h3, h4, h5, h6 { line-height: 1.3; margin: 0 0 0.6em; font-weight: 600; }
h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }

/* Screen-reader text utility */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute !important; word-wrap: normal !important;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 9999;
	background: var(--csp-primary); color: #fff;
	padding: 12px 20px; border-radius: 0 0 var(--csp-radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* Accessibility: visible focus ring */
:focus-visible { outline: 3px solid var(--csp-primary-light); outline-offset: 2px; }

/* Admin bar offset when header is sticky */
body.admin-bar.sticky-nav-active .site-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar.sticky-nav-active .site-header { top: 46px; }
}