/*
Theme Name: Saidul Islam
Theme URI: https://example.com/
Author: Wallxer
Description: Custom theme for Saidul Islam, a WordPress, WooCommerce and SEO specialist in Mymensingh, Bangladesh, serving businesses in the US, UK and Europe. Provides the header, footer, design tokens and base styles. Page layouts are built in Elementor; custom widgets live in the Saidul Islam Core plugin.
Version: 1.0.0
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saidul-islam
Tags: blog, portfolio, one-column, custom-logo, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. Design tokens (the only place tokens are defined)
   ========================================================================== */

:root {
	/* Colour: text */
	--sdl-ink: #10140f;
	--sdl-ink-2: #3a423b;
	--sdl-text: #4e574f;
	--sdl-muted: #5a635b;
	--sdl-subtle: #8a938b;

	/* Colour: surfaces */
	--sdl-bg: #fafbf9;
	--sdl-white: #fff;
	--sdl-surface: #f4f6f3;
	--sdl-surface-2: #eff2ed;
	--sdl-surface-hover: #f3f7f2;
	--sdl-cta-bg: #f2f2f2;
	--sdl-dark: #071009;

	/* Colour: brand */
	--sdl-green: #41b655;
	--sdl-green-hover: #37a149;
	--sdl-green-bright: #4fcc64;
	--sdl-green-text: #2a7c38;
	--sdl-green-deep: #1f6b2c;
	--sdl-green-tint: #e9f6ec;
	--sdl-green-fill: #bfe6c7;
	--sdl-on-green: #052b10;
	--sdl-blue: #2490f2;
	--sdl-blue-text: #1d6fc4;
	--sdl-blue-tint: #e8f1fd;
	--sdl-red: #c33a3a;
	--sdl-star: #f5a524;
	--sdl-gradient: linear-gradient(100deg, #41b655, #2490f2);

	/* Colour: lines */
	--sdl-line: rgba(16, 20, 15, 0.12);
	--sdl-line-soft: rgba(16, 20, 15, 0.08);
	--sdl-line-strong: rgba(16, 20, 15, 0.22);

	/* Type */
	--sdl-font-display: "Bricolage Grotesque", system-ui, sans-serif;
	--sdl-font-body: "Manrope", system-ui, sans-serif;
	--sdl-font-mono: "JetBrains Mono", ui-monospace, monospace;
	--sdl-fs-h1: clamp(38px, 5.1vw, 64px);
	--sdl-fs-h1-service: clamp(36px, 4.8vw, 60px);
	--sdl-fs-h2: clamp(26px, 3.1vw, 42px);
	--sdl-fs-h2-lg: clamp(28px, 3.4vw, 44px);
	--sdl-fs-h2-xl: clamp(30px, 3.8vw, 50px);
	--sdl-fs-h3: clamp(19px, 2vw, 24px);
	--sdl-fs-lead: clamp(16.5px, 1.4vw, 19px);
	--sdl-fs-body: 17px;
	--sdl-fs-small: 15px;
	--sdl-fs-eyebrow: 12px;

	/* Space and layout */
	--sdl-container: 1300px;
	--sdl-gutter: 24px;
	--sdl-section-y: clamp(56px, 7vw, 96px);
	--sdl-section-y-lg: clamp(64px, 8vw, 110px);
	--sdl-header-h: 76px; /* 86px from 1025px, see below */

	/* Shape and depth */
	--sdl-radius-pill: 99px;
	--sdl-radius-xl: 24px;
	--sdl-radius-lg: 22px;
	--sdl-radius-md: 20px;
	--sdl-radius-sm: 14px;
	--sdl-radius-xs: 12px;
	--sdl-shadow-card: 0 22px 60px rgba(16, 20, 15, 0.1);
	--sdl-shadow-frame: 0 30px 70px rgba(16, 20, 15, 0.1);
	--sdl-shadow-soft: 0 4px 18px rgba(16, 20, 15, 0.06);
	--sdl-shadow-green: 0 8px 20px rgba(65, 182, 85, 0.25);
}

@media (min-width: 1025px) {

	:root {
		--sdl-header-h: 86px;
	}
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--sdl-bg);
	color: var(--sdl-ink);
	font-family: var(--sdl-font-body);
	font-size: var(--sdl-fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--sdl-font-display);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

p {
	margin: 0;
}

a {
	color: var(--sdl-blue);
	text-decoration: none;
}

a:hover {
	color: var(--sdl-green);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
}

:focus-visible {
	outline: 2px solid var(--sdl-green-text);
	outline-offset: 3px;
}

::selection {
	background: var(--sdl-green-fill);
	color: var(--sdl-ink);
}

/* ==========================================================================
   3. Accessibility helpers and WordPress required classes
   ========================================================================== */

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

.screen-reader-text:focus {
	z-index: 100000;
	top: 5px;
	left: 5px;
	display: block;
	width: auto;
	height: auto;
	padding: 14px 22px;
	clip: auto !important;
	clip-path: none;
	border-radius: var(--sdl-radius-pill);
	background: var(--sdl-ink);
	color: var(--sdl-bg);
	font-size: 15px;
	font-weight: 600;
	line-height: normal;
	text-decoration: none;
}

.skip-link:focus {
	position: fixed !important;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 8px);
	left: 8px;
}

.alignleft {
	float: left;
	margin: 0.4em 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0.4em 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.wp-caption {
	max-width: 100%;
	margin-bottom: 1.5em;
}

.wp-caption img {
	display: block;
}

.wp-caption-text,
.gallery-caption {
	margin-top: 0.6em;
	color: var(--sdl-muted);
	font-size: 14px;
}

.sticky,
.bypostauthor {
	display: block;
}

/* ==========================================================================
   4. Layout helpers
   ========================================================================== */

.sdl-container {
	width: 100%;
	max-width: var(--sdl-container);
	margin-right: auto;
	margin-left: auto;
}

/* ==========================================================================
   5. Utility classes (usable in Elementor: Advanced → CSS Classes, or inside heading HTML)
   ========================================================================== */

/* Gradient word inside a heading: <span class="sdl-gradient-text">word</span> */
.sdl-gradient-text {
	background: var(--sdl-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Second heading line in grey: <span class="sdl-muted-line">by the person you hired.</span> */
.sdl-muted-line {
	display: block;
	color: var(--sdl-subtle);
}

/* Italic green word inside a hero heading: <em class="sdl-accent">word</em> */
.sdl-accent {
	color: var(--sdl-green);
	font-style: italic;
}

/* ==========================================================================
   6. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}