/*
Theme Name:        Twenty Twenty-Four Child (MHL)
Theme URI:         https://myhausline.com
Description:       myhausline child theme — layout, templates, styling only. No business logic.
Author:            myhausline
Author URI:        https://myhausline.com
Template:          Divi
Version:           2.1.0
License:           GNU General Public License v2 or later
Text Domain:       twentytwentyfour-child-mhl

ARCHITECTURE RULE:
  This theme contains ONLY:
  - Visual layout (CSS)
  - WooCommerce templates (PHP templates, no logic)
  - Styling overrides

  Business logic, image fallback, redirects, finder integration
  belong in the Core Plugin (mhl-core-plugin.php), NOT here.

CHANGELOG:
  v2.1.0 (2026-04-08) — Phase 2.2 Header Consolidation
    - MHL HEADER BRANDING block reviewed and confirmed Divi-only
    - Removed stale TwentyTwentyFour nav selector assumptions
      (.wp-block-navigation-item hide rules moved to mhl-vitrine-css inline — not here)
    - Added explicit Divi top-menu nav item color + spacing rules
    - Added fixed-header (et_fixed_nav) logo size stability rule
    - All selectors verified against live Divi render (shop page, 2026-04-08)
    - No regressions: #logo, #main-header, #et-top-navigation, #top-menu all active
  v2.0.0 (2026-04-07) — Initial consolidated header branding block
*/

/* ============================================================
   LAYER 1: CHILD THEME — VISUAL ONLY
   ============================================================ */

:root {
    --mhl-red:      #c0392b;
    --mhl-red-dark: #96281b;
    --mhl-blue:     #3498db;
    --mhl-dark:     #1a1a2e;
    --mhl-gray:     #f8f9fa;
    --mhl-border:   #e0e0e0;
    --mhl-text:     #333333;
    --mhl-muted:    #666666;
    --mhl-green:    #27ae60;
}

.mhl-product-wrap *,
.mhl-werkstatt-section *,
.mhl-hub-wrap * {
    box-sizing: border-box;
}


/* ============================================================
   MHL WERKSTATT LANDING — 2026-04-06
   ============================================================ */
.mhl-werkstatt-landing{font-family:Arial,Helvetica,sans-serif;color:#1a1a2e;max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.mhl-wl-hero{padding:64px 0 56px;text-align:center;border-bottom:1px solid #e8e8f0}
.mhl-wl-badge{display:inline-block;background:#1a1a2e;color:#fff;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:6px 16px;border-radius:2px;margin-bottom:24px}
.mhl-wl-hero h2{font-size:36px;font-weight:800;line-height:1.15;color:#1a1a2e;margin:0 0 18px;max-width:760px;margin-left:auto;margin-right:auto}
.mhl-wl-hero p{font-size:17px;color:#555;line-height:1.65;max-width:600px;margin:0 auto 32px}
.mhl-wl-hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.mhl-wl-btn-primary{display:inline-block;background:#1a1a2e;color:#fff;font-size:15px;font-weight:600;padding:13px 28px;border-radius:4px;text-decoration:none}
.mhl-wl-btn-secondary{display:inline-block;background:transparent;color:#1a1a2e;font-size:15px;font-weight:600;padding:13px 28px;border-radius:4px;border:2px solid #1a1a2e;text-decoration:none}
.mhl-wl-categories{padding:56px 0 48px;border-bottom:1px solid #e8e8f0}
.mhl-wl-section-label{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#999;margin-bottom:6px}
.mhl-wl-section-title{font-size:24px;font-weight:800;color:#1a1a2e;margin:0 0 36px}
.mhl-wl-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mhl-wl-card{background:#fff;border:1px solid #e0e0ec;border-radius:6px;padding:24px 20px 20px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:#1a1a2e}
.mhl-wl-card-icon{font-size:26px;line-height:1;margin-bottom:2px}
.mhl-wl-card-title{font-size:16px;font-weight:700;color:#1a1a2e;margin:0}
.mhl-wl-card-desc{font-size:13px;color:#666;line-height:1.5;flex:1;margin:0}
.mhl-wl-card-cta{font-size:12px;font-weight:600;color:#1a1a2e;margin-top:6px}
.mhl-wl-trust{padding:40px 0;border-bottom:1px solid #e8e8f0}
.mhl-wl-trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mhl-wl-trust-item{display:flex;align-items:flex-start;gap:14px;padding:18px;background:#f8f8fc;border-radius:6px}
.mhl-wl-trust-icon{font-size:22px;flex-shrink:0}
.mhl-wl-trust-title{font-size:14px;font-weight:700;color:#1a1a2e;margin:0 0 3px}
.mhl-wl-trust-text{font-size:12px;color:#666;line-height:1.5;margin:0}
.mhl-wl-bottom-cta{padding:56px 0 64px;text-align:center}
.mhl-wl-bottom-cta h3{font-size:28px;font-weight:800;color:#1a1a2e;margin:0 0 14px}
.mhl-wl-bottom-cta p{font-size:15px;color:#555;line-height:1.65;max-width:520px;margin:0 auto 28px}
.mhl-wl-bottom-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.mhl-wl-archive-sep{text-align:center;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#ccc;padding:24px 0 8px;border-top:1px solid #e8e8f0;margin-top:8px}

/* ============================================================
   MHL HEADER BRANDING — v2.1 (2026-04-08)
   Divi-only selectors. Verified against live render.
   Render source: Divi parent theme HTML
   Control point: child theme style.css (this file)
   ============================================================

   ACTIVE ELEMENTS (verified in live HTML):
     - <header id="main-header">          → Divi parent
     - <img id="logo" src=".../Divi/..."> → Divi Theme Options
     - <div id="et-top-navigation">       → Divi parent
     - <ul id="top-menu">                 → WordPress Menus (Divi nav)

   NOT ACTIVE (TwentyTwentyFour blocks — not rendered by Divi):
     - .custom-logo / .custom-logo-link   → not in body HTML
     - .wp-block-navigation-item          → not used by Divi nav
     These are handled by mhl-logo-css inline (functions.php) — scope: Phase 2.3
   ============================================================ */

/* === LOGO SIZE — Divi #logo override ===
   Divi sets inline: width:auto; height:auto; on #logo
   We use higher specificity + !important to enforce our size.
   Logo file: /wp-content/themes/Divi/images/logo.png (1024x1024 square)
   Control: Divi Theme Options (logo source — not changed here)
*/
body #main-header .logo_container img#logo,
body.et_header_style_left #main-header .logo_container img#logo,
body #main-header #logo {
    width: auto !important;
    height: auto !important;
    max-height: 70px !important;
    max-width: 70px !important;
    min-width: unset !important;
    min-height: unset !important;
    object-fit: contain !important;
    display: inline-block !important;
}

/* Fixed header scroll state — keep logo size stable */
body.et_fixed_nav .et-fixed-header #main-header .logo_container img#logo,
body.et_fixed_nav .et-fixed-header #main-header #logo {
    max-height: 50px !important;
    max-width: 50px !important;
}

/* Logo container vertical centering */
#main-header .logo_container {
    display: flex !important;
    align-items: center !important;
    min-height: 80px !important;
    padding: 8px 0 !important;
}

/* Header background — clean white */
#main-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* Header container layout — logo left, nav right */
#main-header .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Navigation alignment — Divi #et-top-navigation */
#main-header #et-top-navigation {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Top menu item spacing and color — Divi #top-menu */
#top-menu > li > a {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a1a2e !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    letter-spacing: 0.01em !important;
}

#top-menu > li > a:hover {
    color: #c0392b !important;
}

/* Mobile: logo proportional */
@media (max-width: 980px) {
    #main-header .logo_container img#logo,
    #main-header #logo {
        width: auto !important;
        height: auto !important;
        max-height: 50px !important;
        max-width: 50px !important;
    }
}

/* Mobile nav — ensure menu bar visible */
@media (max-width: 980px) {
    #et_mobile_nav_menu {
        display: block !important;
    }
    #main-header .mobile_nav .mobile_menu_bar {
        color: #1a1a2e !important;
    }
}

/* ============================================================
   END MHL HEADER BRANDING v2.1
   ============================================================ */

/* ============================================================
   MHL HOMEPAGE — Hide page title (h1.entry-title)
   The page title "myhausline" is shown below header by Divi.
   On homepage, this should be hidden — logo serves as brand.
   ============================================================ */
.home h1.entry-title.main_title,
.home .page-title,
.home .et_pb_title_container h1 {
    display: none !important;
}
/* ============================================================
   END MHL HOMEPAGE TITLE HIDE
   ============================================================ */

/* ====================================
   MHL STOCK BLOCK — Product Page
   Added: 2026-04-12
   ==================================== */

.mhl-stock-block {
    margin: 15px 0;
    padding: 12px 16px;
    border: 1px solid #ddd;
    background: #fafafa;
    font-size: 14px;
    border-radius: 4px;
}

.mhl-stock-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mhl-stock-row {
    margin-bottom: 4px;
    color: #333;
}

.mhl-stock-row strong {
    color: #1e3a5f;
    margin-right: 4px;
}

.mhl-stock-loading {
    opacity: 0.6;
    font-style: italic;
    font-size: 13px;
}

.mhl-stock-error {
    color: #999;
    font-size: 13px;
    font-style: italic;
}

/* ====================================
   MHL STOCK BEHAVIOR — Product Page
   Added: 2026-04-12
   ==================================== */

.mhl-stock-warning {
    color: #b57f00;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
}

.mhl-stock-info {
    color: #666;
    margin-top: 6px;
    font-size: 13px;
}

.mhl-anfrage-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 18px;
    background: #333;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    border-radius: 4px;
    transition: background 0.2s;
}

.mhl-anfrage-btn:hover {
    background: #1e3a5f;
    color: #fff;
}

.single_add_to_cart_button[disabled],
.single_add_to_cart_button.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}