/* ==========================================================================
   SawaTech Woo — Main Stylesheet
   Author: Abdalhalim Alsayasenah (https://sayasenah.com/)
   
   TABLE OF CONTENTS
   1.  CSS Custom Properties (Design Tokens)
   2.  Reset & Base
   3.  Typography
   4.  Layout Utilities
   5.  Header & Navigation
   6.  Mobile Navigation
   7.  Content Area & Sidebar
   8.  Buttons
   9.  Forms
   10. Cards & Post Items
   11. Post Meta
   12. Widgets
   13. Footer
   14. Pagination
   15. Comments
   16. WordPress Alignment & Embed Classes
   17. Accessibility
   18. Responsive
   ========================================================================== */

/* ==========================================================================
   1. CSS Custom Properties (Design Tokens)
   Default values — overridden at runtime by the Customizer inline <style>.
   ========================================================================== */

:root {
	/* Colors */
	--color-primary:        #2563eb;
	--color-primary-hover:  #1d4ed8;
	--color-secondary:      #7c3aed;
	--color-accent:         #f59e0b;
	--color-text:           #1f2937;
	--color-text-muted:     #6b7280;
	--color-heading:        #111827;
	--color-bg:             #ffffff;
	--color-bg-secondary:   #f9fafb;
	--color-border:         #e5e7eb;
	--color-header-bg:      #ffffff;
	--color-header-text:    #111827;
	--color-header-transparent-text:  #ffffff;
	--color-header-transparent-hover: var(--color-primary);
	--color-footer-bg:      #111827;
	--color-footer-text:    #d1d5db;
	--color-btn-bg:         #2563eb;
	--color-btn-text:       #ffffff;
	--color-btn-hover-bg:   #1d4ed8;
	--color-btn-hover-text: #ffffff;
	--color-white:          #ffffff;
	--color-black:          #000000;

	/* Typography */
	--font-heading:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body:      'Inter',   -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono:      'Fira Code', 'Courier New', monospace;
	--font-size-base: 16px;
	--font-line-height-heading: 1.25;
	--font-line-height-body: 1.6;

	/* Border Radius */
	--radius-corner: 8px;
	--radius-base:   var(--radius-corner);
	--radius-button: var(--radius-corner);
	--radius-card:   var(--radius-corner);
	--radius-input:  var(--radius-corner);
	--radius-full:   9999px;

	/* Layout */
	--container-max-width: 1200px;
	--container-padding-x: clamp(16px, 4vw, 32px);
	--container-full-padding-x: var(--container-padding-x);
	--content-padding-y: 48px;
	--footer-padding-y: 56px;
	--header-height-base: 70px;
	--header-height:       70px;
	--header-height-shrink: 54px;
	--header-logo-height-base: 48px;
	--header-logo-height:  48px;
	--header-logo-height-shrink: 38px;
	--header-logo-height-mobile: 38px;
	--sidebar-width:       300px;
	--gap:                 24px;

	/* Shadows */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10), 0 4px 6px rgba(0, 0, 0, 0.05);
	--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.10), 0 10px 10px rgba(0, 0, 0, 0.04);

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 300ms ease;
	--transition-slow: 500ms ease;

	/* Z-index layers */
	--z-header:   200;
	--z-dropdown: 300;
	--z-mobile:   400;
	--z-overlay:  1000;
}

/* ==========================================================================
   2. Reset & Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: var(--font-size-base);
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: var(--font-line-height-body);
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
video,
svg {
	display: block;
	max-width: 100%; /* intentionally physical */
	height: auto; /* intentionally physical */
}

a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--transition-fast);
}

.st-lucide,
.st-lucide * {
	pointer-events: none;
}

.st-lucide.dashicons:not(svg) {
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	overflow: hidden;
}

a:hover,
a:focus {
	color: var(--color-primary-hover);
}

ul,
ol {
	padding-inline-start: 1.5em;
}

li {
	margin-block-end: 0.25em;
}

table {
	inline-size: 100%;
	border-collapse: collapse;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-heading);
	font-weight: 700;
	line-height: var(--font-line-height-heading);
	margin-block-end: 0.75em;
}

h1 { font-size: clamp(1.875rem, 5vw, 3rem);   }
h2 { font-size: clamp(1.5rem,   4vw, 2.25rem); }
h3 { font-size: clamp(1.25rem,  3vw, 1.75rem); }
h4 { font-size: 1.375rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem;     }

p {
	margin-block-end: 1.25em;
}

p:last-child {
	margin-block-end: 0;
}

blockquote {
	margin: 1.5em 0;
	padding: 1rem 1.25rem;
	border-inline-start: 4px solid var(--color-primary);
	background-color: var(--color-bg-secondary);
	border-radius: 0 var(--radius-base) var(--radius-base) 0;
	font-style: italic;
	color: var(--color-text-muted);
}

code,
kbd,
samp {
	font-family: var(--font-mono);
	font-size: 0.875em;
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-corner);
	padding: 0.1em 0.35em;
}

pre {
	font-family: var(--font-mono);
	font-size: 0.875rem;
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-base);
	padding: 1.25rem;
	overflow-inline: auto;
	line-height: 1.7;
}

pre code {
	background: none;
	border: none;
	padding: 0;
	font-size: inherit;
}

hr {
	border: none;
	border-block-start: 1px solid var(--color-border);
	margin: 2rem 0;
}

abbr[title] {
	text-decoration: underline dotted;
	cursor: help;
}

mark {
	background: #fef08a;
	padding: 0 0.2em;
}

/* ==========================================================================
   17. Accessibility
   ========================================================================== */

.screen-reader-text,
.sr-only {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	max-inline-size: 1px;
}

.skip-link {
	position: absolute;
	inset-block-start: -100%;
	inset-inline-start: 1rem;
	padding: 0.75rem 1.25rem;
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: var(--radius-button);
	text-decoration: none;
	font-weight: 700;
	z-index: calc(var(--z-header) + 10);
	transition: inset-block-start var(--transition-fast);
}

.skip-link:focus {
	inset-block-start: 1rem;
}

:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
}