/*
Theme Name: JIM
Theme URI: https://example.com/
Author: Abdul Qadeer
Author URI: https://example.com/
Description: Custom WordPress theme for JIM project. Built from scratch with ACF dynamic content, modular per-section architecture, two-tier responsive scaling, and zero page-builder bloat. Playfair Display + Inter typography system, fully editable Shopify-style admin controls.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jim
Tags: one-column, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, full-width-template, accessibility-ready
*/

:root {
	--dcc-navy: #0a1530;
	--dcc-navy-2: #152448;
	--dcc-cream: #f5f1e8;
	--dcc-cream-soft: #fbf7ef;
	--dcc-gold: #C5A059;
	--dcc-gold-hover: #A6864B;
	--dcc-red: #B91C1C;
	--dcc-red-hover: #991818;
	--dcc-white: #ffffff;
	--dcc-text: #2a2a2a;
	--dcc-text-muted: #6b6b6b;
	--dcc-border: #e6e6e6;

	--ff-serif: 'Playfair Display', Georgia, serif;
	--ff-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

	--container: clamp(1200px, 88vw, 1600px);
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;

	--ease: cubic-bezier(.2, .8, .2, 1);
}

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

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

body {
	margin: 0;
	font-family: var(--ff-sans);
	font-size: clamp(1rem, 1.05vw, 1.0625rem);
	line-height: 1.6;
	color: var(--dcc-text);
	background: var(--dcc-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ff-serif);
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
	color: var(--dcc-navy);
}

p { margin: 0 0 1em; }

.container {
	width: var(--container);
	max-width: 100%;
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.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;
}

.skip-link {
	background: var(--dcc-navy);
	color: var(--dcc-white);
	left: 1rem;
	padding: .75rem 1rem;
	position: absolute;
	top: -100px;
	z-index: 9999;
	transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

.dcc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: var(--ff-sans);
	font-weight: 700;
	font-size: clamp(.8125rem, .82vw, .9375rem);
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: clamp(.75rem, .85vw, .95rem) clamp(1.5rem, 2vw, 2.25rem);
	border-radius: var(--radius-sm);
	border: 0;
	cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}

.dcc-btn:focus-visible {
	outline: 2px solid var(--dcc-gold);
	outline-offset: 3px;
}

.dcc-btn--gold {
	background: var(--dcc-gold);
	color: var(--dcc-white);
}
.dcc-btn--gold:hover {
	background: var(--dcc-gold-hover);
	transform: translateY(-1px);
}

.dcc-btn--ghost-dark {
	background: rgba(255, 255, 255, .12);
	color: var(--dcc-white);
	border: 1px solid rgba(255, 255, 255, .65);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.dcc-btn--ghost-dark:hover {
	background: rgba(255, 255, 255, .22);
	border-color: rgba(255, 255, 255, .95);
	transform: translateY(-1px);
}

.dcc-pill {
	display: inline-block;
	background: var(--dcc-white);
	color: var(--dcc-gold);
	font-family: var(--ff-sans);
	font-weight: 600;
	font-size: clamp(.75rem, .78vw, .8125rem);
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: clamp(.5rem, .65vw, .7rem) clamp(1rem, 1.3vw, 1.5rem);
	border-radius: 999px;
	border: 1px solid var(--dcc-gold);
	line-height: 1;
}

@media (min-width: 1441px) {
	.dcc-btn {
		font-size: clamp(.875rem, .9vw, 1rem);
		padding: clamp(.95rem, 1.05vw, 1.15rem) clamp(2rem, 2.4vw, 2.75rem);
	}
	.dcc-pill {
		font-size: clamp(.8125rem, .82vw, .9rem);
		padding: clamp(.6rem, .7vw, .8rem) clamp(1.25rem, 1.4vw, 1.6rem);
	}
}