/*
Theme Name: Heckom Theme 2026
Theme URI: https://heckom.net/heckom-theme-2026
Author: Heckom
Author URI: https://heckom.net
Description: Lightweight, responsive, blog-focused WordPress theme for Heckom. Built with native WordPress PHP, semantic HTML5, custom CSS, Gutenberg support, Customizer support, and Vanilla JavaScript. Inspired by orange-white Adanaspor colors.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
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: heckom
Domain Path: /languages
Tags: block-styles, custom-colors, custom-menu, custom-logo, featured-images, full-width-template, theme-options, translation-ready, blog, portfolio, agency, corporate, minimalist

This theme, like WordPress, is licensed under the GPL.
*/

/* ========================================================================== 
   1. DESIGN TOKENS & SYSTEM VARIABLES
   ========================================================================== */
:root {
    --color-primary: #F57C00;
    --color-primary-hover: #FF8A00;
    --color-white: #FFFFFF;
    --color-dark: #1E1E1E;
    --color-dark-secondary: #2F2F2F;
    --color-light-bg: #F8F8F8;
    --color-border: #ECECEC;
    --color-text-body: #4A4A4A;
    --color-text-muted: #888888;
    --font-heading: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", monospace;
    --font-size-h1: clamp(2.25rem, 5vw, 3.75rem);
    --font-size-h2: clamp(1.75rem, 4vw, 2.5rem);
    --font-size-h3: clamp(1.35rem, 3vw, 1.75rem);
    --font-size-body: clamp(0.95rem, 1.5vw, 1.05rem);
    --font-size-small: clamp(0.75rem, 1vw, 0.85rem);
    --border-radius: 12px;
    --border-radius-large: 16px;
    --border-radius-pill: 9999px;
    --container-max-width: 1320px;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-soft: 0 4px 30px rgba(0, 0, 0, 0.03);
    --shadow-premium: 0 10px 40px rgba(0, 0, 0, 0.06);
}

/* ========================================================================== 
   2. RESET & CORE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: 1.6;
    color: var(--color-dark);
    background-color: var(--color-light-bg);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
body.mobile-menu-open { overflow: hidden; }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}
p { margin-top: 0; }
a { color: var(--color-primary); text-decoration: none; transition: var(--transition-smooth); }
a:hover { color: var(--color-primary-hover); }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; }

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.container-narrow { max-width: 800px; margin-left: auto; margin-right: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.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; width: 1px; white-space: nowrap;
}
a:focus, button:focus, input:focus, textarea:focus, select:focus { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.alignwide, .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }