/*
Theme Name: SJ Infotech
Theme URI: https://sjinfotech.com.my/
Author: SJ Infotech Sdn. Bhd.
Author URI: https://sjinfotech.com.my/
Description: A fast, hand-built WordPress theme for SJ Infotech Sdn. Bhd. — software and web development in Johor Bahru. Purple brand system, scroll animations, illustrated service cards, fully responsive, zero page-builder bloat.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
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: sjinfotech
Tags: business, technology, custom-menu, featured-images, responsive-layout, translation-ready
*/

/* All presentational styles live in assets/css/theme.css, enqueued from functions.php.
   This file carries the theme header and a minimal safety net only. */

body {
	margin: 0;
}

/* ==========================================================================
   Brand lockup — the full SJ Infotech artwork, used in the header, the footer
   and every inner page. Sized by height so the aspect ratio never distorts.
   ========================================================================== */

.brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	max-width: 60%;
	line-height: 0;
}

.brand__full {
	display: block;
	width: auto;
	height: clamp(30px, 4.4vw, 44px);
	max-width: 100%;
	object-fit: contain;
	transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}

.brand:hover .brand__full { transform: translateY(-1px) scale(1.015); }
.brand:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 6px; border-radius: 6px; }

.footer-brand { max-width: 100%; margin-bottom: 18px; }
.footer-brand .brand__full { height: clamp(28px, 4vw, 40px); }

/* A custom logo set in the Customizer is no longer used for the lockup, but
   guard against it leaking in at natural size from anywhere else. */
.brand .custom-logo,
.wp-block-site-logo img {
	height: clamp(30px, 4.4vw, 44px);
	width: auto;
	max-width: 100%;
}

@media (max-width: 560px) {
	.brand { max-width: 68%; }
}

@media (prefers-reduced-motion: reduce) {
	.brand__full { transition: none; }
	.brand:hover .brand__full { transform: none; }
}