/*
Theme Name: Sekolah Dropship Theme
Theme URI: https://www.sekolahdropship.co.id
Author: Sekolah Dropship Team
Author URI: https://www.sekolahdropship.co.id
Description: Tema WordPress kustom yang dinamis dan SEO-friendly untuk Sekolah Dropship. Dibangun dengan HTML5 semantik, Theme Customizer terintegrasi, dan optimasi performa tinggi.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sd-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, blog, education, e-commerce
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
# Base
# Components
# Layout
# Custom Styles
# Responsive
--------------------------------------------------------------*/

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

html {
	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	background-color: #FCFAF8;
	color: #1a1a1a;
	font-size: 16px;
	overflow-x: hidden;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 1rem;
	font-weight: 700;
	line-height: 1.2;
	color: #1a1a1a;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

p { margin: 0 0 1.5rem; }

a {
	color: #A52A2A;
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover,
a:focus {
	color: #7a1f1f;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
.btn {
	display: inline-block;
	padding: 1rem 2rem;
	background-color: #A52A2A;
	color: #fff;
	font-weight: 700;
	border-radius: 9999px;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn:hover {
	background-color: #7a1f1f;
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(165, 42, 42, 0.3);
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
.container,
.max-w-7xl {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

.site-main {
	min-height: 60vh;
}

/*--------------------------------------------------------------
# Custom Styles (Matching HTML Design)
--------------------------------------------------------------*/
:root {
	--merah-bata: #A52A2A;
	--soft-cream: #FCFAF8;
}

.bg-merah-bata { background-color: var(--merah-bata); }
.text-merah-bata { color: var(--merah-bata); }
.border-merah-bata { border-color: var(--merah-bata); }

.hero-gradient {
	background: linear-gradient(135deg, var(--merah-bata) 0%, #7a1f1f 100%);
}

.hover-zoom img {
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-zoom:hover img {
	transform: scale(1.1);
}

.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.custom-logo-link img {
	height: auto;
	max-height: 48px;
	width: auto;
}

.footer-logo img {
	filter: brightness(0) invert(1);
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
.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 !important;
	width: 1px;
	word-wrap: normal !important;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (max-width: 768px) {
	h1 { font-size: 2rem; }
	h2 { font-size: 1.5rem; }
	.hero-gradient { padding-top: 10rem; }
}