/*
 * Mobil başlık düzeni — tüm temalar için ortak kural (C147).
 *
 * SORUN: mobilde arama ve gece/gündüz düğmeleri logonun hemen dibine yapışıyor,
 * hamburger ise sağ uçta tek başına duruyordu. Bazı temalarda (health) hamburger
 * DOM'da diğerlerinden ÖNCE geldiği için sıra da yanlıştı.
 *
 * KURAL: mobilde başlık tek satır — solda logo, sağda eylemler; eylemlerin
 * içinde sıra ARAMA → TEMA → HAMBURGER. Hamburger her zaman en sağda.
 *
 * NEDEN BU KADAR ÇOK SEÇİCİ: 14 temanın başlık sözlüğü ortak değil. Satır kabı
 * kimi temada .header-inner, kiminde .header__inner / .site-header__inner /
 * .header-main / .container. Düğmelerin bir kısmı sınıfla (.search-toggle),
 * bir kısmı YALNIZ id ile (#searchToggle, tech ve crypto) işaretli. Tek bir
 * sözlük varsaymak kuralın o temalarda sessizce hiç uygulanmaması demekti —
 * ilk turda tam bu oldu: kural yazıldı, üç tema hiç etkilenmedi.
 * tools/audit/mobile-header-test.php her temanın GERÇEK işaretlerini markup'tan
 * çıkarıp bu listelerle karşılaştırır; yeni bir tema farklı isim kullanırsa kapı
 * düşer.
 *
 * DOKUNULMAYANLAR: navigasyonun görünürlüğü. Temalar mobil menüyü aynı <nav>
 * öğesini açıp kapatarak yönetiyor; buradan display:none vermek mobil menüyü
 * TÜMDEN çalışmaz hale getirirdi.
 *
 * Bu dosya temaların kendi stillerinden SONRA yüklenir; `!important` gerekmez.
 * Yalnız mobil genişlikte etkilidir, masaüstü tasarımına dokunmaz.
 */

@media (max-width: 1024px) {

    /* --- 1) Başlık satırı: logo solda, eylemler sağda --------------------- */
    .site-header .header-inner,
    .site-header .header__inner,
    .site-header .site-header__inner,
    .site-header .header-main,
    .site-header > .container,
    .site-header > .container-wide,
    header.header .header-inner,
    header.header > .container,
    header.header > .container-wide {
        /* grup: satir */
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* Logo büyüyüp eylemleri sıkıştırmasın. */
    .site-header .site-logo,
    .site-header .site-logo-link,
    .site-header .site-branding,
    .site-header .site-brand-link,
    .site-header .brand,
    header.header .logo {
        flex: 0 1 auto;
        min-width: 0;
    }

    /* --- 2) Eylem grubu sağa ---------------------------------------------- */
    /* margin-left:auto boştaki alanı yutar: kabın justify değeri ne olursa
       olsun grup sağ uca gider. order:2 sayesinde satırda ayrı duran bir
       hamburger (trends) grubun ARDINDA kalır. */
    .site-header .header-actions,
    .site-header .header__actions,
    .site-header .site-header__tools,
    .site-header .header-tools,
    .site-header .nav-actions,
    header.header .header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        /* grup: eylem-kabi */
        margin-left: auto;
        flex: 0 0 auto;
        order: 2;
    }

    /* --- 3) Grup içi sıra: arama → tema → hamburger ------------------------ */
    /* Markup sırası temadan temaya değişiyor (health'te hamburger ilk sırada);
       görsel sıra tek yerden sabitlenir. */

    /* ARAMA */
    .site-header [class*="search-toggle"],
    .site-header [class*="search-btn"],
    .site-header [class*="mobile-search"],
    .site-header [class*="__btn--search"],
    .site-header [data-action="search"],
    .site-header #searchToggle,
    .site-header #search-toggle,
    header.header [class*="search-toggle"],
    header.header #searchToggle            { /* grup: arama */ order: 1; }

    /* TEMA (gece/gündüz) */
    .site-header [class*="theme-toggle"],
    .site-header [class*="theme-btn"],
    .site-header [class*="dark-mode-toggle"],
    .site-header [data-action="theme"],
    .site-header [data-theme-toggle],
    .site-header #themeToggle,
    .site-header #theme-toggle,
    header.header [class*="theme-toggle"],
    header.header #themeToggle             { /* grup: tema */ order: 2; }

    /* HAMBURGER — her zaman en sağda */
    .site-header [class*="menu-toggle"],
    .site-header [class*="menu-btn"],
    .site-header [class*="nav-toggle"],
    .site-header [class*="btn-menu"],
    .site-header [class*="hamburger"],
    .site-header [data-action="menu"],
    .site-header [data-nav-toggle],
    .site-header #menuToggle,
    .site-header #mobileMenuToggle,
    .site-header #mobile-menu-toggle,
    header.header [class*="menu-toggle"],
    header.header #menuToggle              { /* grup: hamburger */ order: 3; margin-left: 4px; }

    /* --- 4) Eylem kabı OLMAYAN temalar (pets, personal) -------------------- */
    /* Düğme doğrudan satırın çocuğuysa onu da sağa iter. :has() ile yalnız
       gerçekten kapsız satırlarda çalışır — aksi halde trends gibi hem grup hem
       ayrı düğme taşıyan satırlarda boşluk ikiye bölünürdü. */
    .site-header .header-inner:not(:has(.header-actions, .header__actions, .site-header__tools)) > [class*="menu-toggle"],
    .site-header .header-inner:not(:has(.header-actions, .header__actions, .site-header__tools)) > [class*="nav-toggle"] {
        margin-left: auto;
    }

    /* --- 5) Dokunma hedefi ------------------------------------------------- */
    /* 40px altı parmakla isabet ettirilemiyor (WCAG 2.5.8 hedef boyutu). */
    .site-header .header-btn,
    .site-header .btn-icon,
    .site-header .site-header__btn,
    .site-header [class*="-toggle"],
    header.header .btn-icon,
    header.header [class*="-toggle"] {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}