/*!
Theme Name:  Ironhush
Theme URI:   https://ironhush.co
Author:      Emre Özel
Author URI:  https://ironhush.co
Description: Ironhush — el yapımı galvanizli çelik low-poly heykel markası için özel WordPress teması. Premium, atelier hissi, Elementor uyumlu.
Version:     0.1.0
Requires at least: 6.0
Tested up to:      6.9
Requires PHP:      8.0
License:     Private
Text Domain: ironhush
Tags:        custom-logo, full-width-template, theme-options, dark, one-column
*/


/* =============================================================================
   TASARIM DEĞİŞKENLERİ (Design Tokens)
   Tüm renk, tipografi ve spacing değerleri buradan yönetilir.
   Başka dosyalarda sabit değer kullanma — her zaman var() kullan.
   ============================================================================= */

:root {

    /* --- Renkler --- */
    --color-black:  #0A0908; /* Birincil zemin — sayfanın %85'i */
    --color-gold:   #C9A66B; /* Vurgu — buton, hover, ince çizgi */
    --color-cream:  #EFE6D7; /* Body metin, kart içleri */
    --color-smoke:  #3A3A3A; /* Border, ikincil metin, hover durumları */
    --color-copper: #8B6F47; /* Çok seyrek — özel ürün etiketleri */
    --color-muted:  rgba(239, 230, 215, 0.55); /* Secondary metin — #0A0908 üzerinde ~4.7:1 (WCAG AA) */

    /* --- Tipografi — Font aileleri --- */
    /* Fontlar inc/enqueue.php üzerinden Google Fonts'tan yüklenir */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'Geist', system-ui, -apple-system, sans-serif;
    --font-mono:    'Geist Mono', 'Courier New', monospace;

    /* --- Tipografi — Boyut skalası (rem tabanlı, 16px base) --- */
    --text-xs:   0.6875rem;  /*  11px — edition no, micro UI */
    --text-sm:   0.8125rem;  /*  13px — caption, meta */
    --text-base: 1rem;       /*  16px — normal body */
    --text-lg:   1.125rem;   /*  18px — büyük body, öne çıkan paragraf */
    --text-xl:   1.375rem;   /*  22px — alt başlık */
    --text-2xl:  1.75rem;    /*  28px — H4/H3 küçük */
    --text-3xl:  2.25rem;    /*  36px — H3 */
    --text-4xl:  3rem;       /*  48px — H2 */
    --text-5xl:  4rem;       /*  64px — H2 büyük / section başlık */
    --text-6xl:  5rem;       /*  80px — H1 */
    --text-7xl:  6.5rem;     /* 104px — Hero başlık */
    --text-8xl:  8.5rem;     /* 136px — Ultra büyük hero (geniş ekran) */

    /* --- Font Weight --- */
    --weight-light:   300;
    --weight-regular: 400;
    --weight-medium:  500;
    /* Brief'e göre: Light + Regular + Medium yeter, Bold neredeyse hiç */

    /* --- Spacing skalası --- */
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-32: 8rem;      /* 128px */
    --space-40: 10rem;     /* 160px */

    /* --- Layout --- */
    --max-width-text:   65ch;    /* Okunabilir metin genişliği */
    --max-width-layout: 1280px;  /* Genel sayfa maks genişliği */
    --max-width-wide:   1440px;  /* Hero ve full-bleed bölümler */

    /* --- Geçiş animasyonları --- */
    --ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast:   150ms var(--ease-out-smooth);
    --transition-base:   350ms var(--ease-out-smooth);
    --transition-slow:   600ms var(--ease-out-smooth);
    --transition-slower: 1000ms var(--ease-out-smooth);

    /* --- Z-index skalası --- */
    --z-below:   -1;
    --z-base:     0;
    --z-above:   10;
    --z-overlay: 20;
    --z-modal:   30;
    --z-header:  40;

    /* --- Border radius --- */
    --radius-sm:   2px;
    --radius-base: 4px;
    --radius-lg:   8px;

    /* --- Header yüksekliği (JS ile senkronize edilecek) --- */
    --header-height: 80px;
}


/* =============================================================================
   LIGHT MODE — [data-theme="light"] token overrides
   Anti-FOUC: inline script in header.php sets attribute before first paint.
   ============================================================================= */

[data-theme="light"] {
    --color-black:  #F0EAE0; /* Warm ivory — background */
    --color-cream:  #1C1510; /* Warm espresso — body text */
    --color-smoke:  #BFB3A6; /* Warm light grey — borders */
    --color-muted:  rgba(28, 21, 16, 0.48);
    --color-gold:   #A8782C; /* Amber — contrast on cream ≈5:1, not too dark for buttons */
    --color-copper: #7A5530;
}


/* =============================================================================
   CSS RESET — Modern, minimal
   Josh Comeau'nun reset'inden uyarlanmıştır.
   ============================================================================= */

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

* {
    margin:  0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    hanging-punctuation: first last;
}

body {
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

ul,
ol {
    list-style: none;
}


/* =============================================================================
   REDUCED MOTION — Animasyon kapatma isteği
   Tüm animasyonlar bu media query'e saygı göstermeli.
   JS tarafı da bu değeri kontrol eder (assets/js/main.js).
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto   !important;
    }
}


/* =============================================================================
   BASE — Body ve temel tipografi
   ============================================================================= */

body {
    background-color: var(--color-black);
    color:            var(--color-cream);
    font-family:      var(--font-body);
    font-size:        var(--text-base);
    font-weight:      var(--weight-regular);
}

/* Başlık hiyerarşisi — serif, light weight, sıkı satır aralığı */
h1, h2, h3, h4, h5, h6 {
    font-family:    var(--font-display);
    font-weight:    var(--weight-light);
    line-height:    1.05;
    letter-spacing: -0.025em;
    color:          var(--color-cream);
}

h1 { font-size: var(--text-7xl); }
h2 { font-size: var(--text-5xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl);  }
h6 { font-size: var(--text-lg);  }

/* Paragraf — rahat okunabilir, maks genişlikle sınırlanmış */
p {
    font-size:   var(--text-base);
    line-height: 1.7;
    color:       var(--color-cream);
    max-width:   var(--max-width-text);
}

/* Linkler */
a {
    color:           var(--color-gold);
    text-decoration: none;
    transition:      color var(--transition-fast);
}

a:hover {
    color: var(--color-cream);
}

/* Klavye odak göstergesi — erişilebilirlik için zorunlu */
a:focus-visible,
button:focus-visible {
    outline:        2px solid var(--color-gold);
    outline-offset: 3px;
    border-radius:  var(--radius-sm);
}

/* Metin seçimi */
::selection {
    background-color: var(--color-gold);
    color:            var(--color-black);
}

/* Mono font kullanım alanları — edition no, teknik specs */
.font-mono,
.edition-no,
.spec-label {
    font-family:    var(--font-mono);
    font-size:      var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--color-muted); /* #3A3A3A (smoke) WCAG AA başarısız — muted ile değiştirildi */
}


/* =============================================================================
   YARDIMCI SINIFLAR (Utilities)
   ============================================================================= */

/* Ekran okuyucu için görünür tut, gözden gizle */
.sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}

/* Container */
.container {
    width:     100%;
    max-width: var(--max-width-layout);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

@media (min-width: 768px) {
    .container {
        padding-inline: var(--space-12);
    }
}

@media (min-width: 1280px) {
    .container {
        padding-inline: var(--space-16);
    }
}

/* Altın vurgu rengi metin */
.text-gold   { color: var(--color-gold);  }
.text-cream  { color: var(--color-cream); }
.text-smoke  { color: var(--color-smoke); }

/* Görünmez fakat grid/flex'te yer tutan spacer */
.visually-hidden { visibility: hidden; }


/* =============================================================================
   WORDPRESS ADMIN BAR DÜZELTMESİ
   Admin bar açıkken sticky header'ı aşağı kaydır.
   ============================================================================= */

.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}


/* =============================================================================
   WORDPRESS CORE — Gerekli WordPress sınıf stilleri
   ============================================================================= */

.alignleft  { float: left;  margin-right: var(--space-6); }
.alignright { float: right; margin-left:  var(--space-6); }
.aligncenter {
    display:    block;
    margin-inline: auto;
}

.wp-caption {
    max-width: 100%;
    color:     var(--color-smoke);
    font-size: var(--text-sm);
}

.sticky { /* WordPress sticky post — şimdilik unused */ }

.screen-reader-text {
    /* WordPress'in kendi sr-only sınıfı */
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}