/*
Theme Name:     Kosrat Factory
Theme URI:      https://kosratfactory.com
Description:    Custom child theme for Kosrat Factory — dark/gold industrial design built on Hestia. Adds branded header, machinery showcase, and redesigned page sections while preserving all existing content.
Author:         Bircode
Template:       hestia
Version:        1.0.0
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    hestia-kosrat
Tags:           custom-colors, custom-logo, custom-menu, rtl-language-support, translation-ready
*/

/* =========================================================================
   1. DESIGN TOKENS
   Palette sampled from the approved mockups: near-black grounds with a
   single amber accent. Kept as custom properties so a future brand tweak
   is a one-line change rather than a find-and-replace.
   ========================================================================= */

:root {
	/* Brand */
	--kf-gold: #f0a500;
	--kf-gold-soft: #ffc247;
	--kf-gold-deep: #c98600;

	/* Dark grounds, lightest to darkest */
	--kf-black: #0d0d0d;
	--kf-surface: #161616;
	--kf-surface-2: #1e1e1e;
	--kf-border: #2a2a2a;

	/* Light section grounds (About / Team use these in the mockups) */
	--kf-light: #ffffff;
	--kf-light-2: #f5f5f5;

	/* Text */
	--kf-text-on-dark: #ffffff;
	--kf-text-muted-dark: #b0b0b0;
	--kf-text-on-light: #1a1a1a;
	--kf-text-muted-light: #5c5c5c;

	/* Rhythm */
	--kf-radius: 4px;
	--kf-gap: 24px;
	--kf-section-y: 80px;
	--kf-maxw: 1200px;

	--kf-transition: 0.25s ease;
}

/* =========================================================================
   2. PRIMITIVES
   ========================================================================= */

.kf-container {
	max-width: var(--kf-maxw);
	margin-inline: auto;
	padding-inline: 20px;
}

/* Section heading: small amber eyebrow above a heavy condensed title,
   matching the "OUR PRODUCTS / QUALITY MATERIALS..." pattern. */
.kf-eyebrow {
	color: var(--kf-gold);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 8px;
}

.kf-title {
	font-size: clamp(26px, 3.4vw, 40px);
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	line-height: 1.15;
	margin: 0 0 28px;
}

.kf-section { padding-block: var(--kf-section-y); }
.kf-section--dark { background: var(--kf-black); color: var(--kf-text-on-dark); }
.kf-section--light { background: var(--kf-light); color: var(--kf-text-on-light); }

/* Buttons */
.kf-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 26px;
	border-radius: var(--kf-radius);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background var(--kf-transition), color var(--kf-transition),
		border-color var(--kf-transition), transform var(--kf-transition);
}

.kf-btn--primary { background: var(--kf-gold); color: #101010; }
.kf-btn--primary:hover,
.kf-btn--primary:focus-visible { background: var(--kf-gold-soft); color: #101010; transform: translateY(-2px); }

.kf-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.kf-btn--ghost:hover,
.kf-btn--ghost:focus-visible { border-color: var(--kf-gold); color: var(--kf-gold); transform: translateY(-2px); }

.kf-btn--dark { background: #101010; color: #fff; }
.kf-btn--dark:hover,
.kf-btn--dark:focus-visible { background: #000; transform: translateY(-2px); }

/* The arrow glyph nudges on hover for a bit of life. */
.kf-btn__arrow { transition: transform var(--kf-transition); }
.kf-btn:hover .kf-btn__arrow { transform: translateX(4px); }

/* =========================================================================
   3. ACCESSIBILITY
   ========================================================================= */

/* Amber on near-black clears WCAG AA; never remove the outline outright. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--kf-gold);
	outline-offset: 2px;
}

.kf-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.kf-btn,
	.kf-btn__arrow {
		transition: none;
	}
	.kf-btn:hover,
	.kf-btn:focus-visible { transform: none; }
}

/* =========================================================================
   4. RTL
   The site runs English / Arabic / Kurdish via TranslatePress, so anything
   directional is written with logical properties above. Overrides that
   genuinely need mirroring go here.
   ========================================================================= */

[dir="rtl"] .kf-btn__arrow { transform: scaleX(-1); }
[dir="rtl"] .kf-btn:hover .kf-btn__arrow { transform: scaleX(-1) translateX(4px); }