<?php
/**
 * Cabecera del tema
 * @package El_Guero_Auto_Repair
 */
if ( ! defined('ABSPATH') ) exit;
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php function_exists('wp_body_open') && wp_body_open(); ?>

<header class="site-header" role="banner" aria-label="<?php esc_attr_e('Cabecera', 'el-guero-auto-repair'); ?>">
  <div class="container header-inner">

    <!-- Marca (logo + nombre) -->
    <a class="brand" href="<?php echo esc_url( home_url('/') ); ?>">
      <?php
      // 1) Logo personalizado (Apariencia → Personalizar → Identidad del sitio)
      if ( function_exists('the_custom_logo') && has_custom_logo() ) {
        the_custom_logo();
      } else {
        // 2) Fallback: busca en /assets o usa el logo de tu librería
        $candidates = [
          'assets/logo-el-guero.png',
          'assets/logo.png',
          'assets/logo-el-guero.svg',
          'assets/logo.svg',
        ];
        $logo_rel = '';
        foreach ($candidates as $rel) {
          if ( file_exists( get_theme_file_path($rel) ) ) { $logo_rel = $rel; break; }
        }
        if ( $logo_rel ) {
          $logo_uri = get_theme_file_uri($logo_rel);
        } else {
          // Fallback final
          $logo_uri = 'https://elgueroautorepair.com/wp-content/uploads/2025/10/LOGO-PNG-2.png';
        }
        echo '<img class="brand-logo" src="'.esc_url($logo_uri).'" alt="'.esc_attr(get_bloginfo('name')).'" />';
      }
      ?>
      <span class="brand-title"><?php bloginfo('name'); ?></span>
    </a>

    <!-- Navegación principal administrable desde Apariencia → Menús -->
    <nav class="site-nav" role="navigation" aria-label="<?php esc_attr_e('Menú principal', 'el-guero-auto-repair'); ?>">
      <?php
      if ( has_nav_menu('primary') ) {
        wp_nav_menu([
          'theme_location' => 'primary',
          'container'      => false,
          'menu_class'     => 'menu-list',
          'fallback_cb'    => false,
          'depth'          => 2,
        ]);
      } else {
        echo '<ul class="menu-list"><li><a href="'.esc_url( admin_url('nav-menus.php') ).'">'.esc_html__('Configura el Menú Principal', 'el-guero-auto-repair').'</a></li></ul>';
      }
      ?>
    </nav>

  </div>
</header>

<!-- Estilos mínimos -->
<style>
  .site-header { background:#111; color:#fff; }
  .site-header .header-inner { display:flex; align-items:center; justify-content:space-between; padding:12px 40px; }
  .brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; }
  .brand-logo { height:48px; width:auto; display:block; }
  .brand-title { font-weight:700; font-size:1.1rem; color:#FFD100; }
  .site-nav .menu-list { list-style:none; margin:0; padding:0; display:flex; gap:28px; align-items:center; }
  .site-nav .menu-list a { color:#fff; text-decoration:none; font-weight:500; text-transform:uppercase; } /* 🔹 todos los enlaces en mayúsculas */
  
  /* 🔹 Botón amarillo para SIGN IN */
  .site-nav .menu-item-signin > a {
    background:#FFD100; color:#111; padding:8px 16px; border-radius:8px;
    font-weight:700; text-transform:uppercase;
  }

  @media (max-width: 768px){
    .site-header .header-inner { padding:12px 16px; }
    .site-nav .menu-list { gap:16px; flex-wrap:wrap; }
    .brand-title { display:none; } /* opcional: oculta texto del sitio en móvil */
  }
</style>
/* Tipografía global */
html, body, .site-header, .site-main { font-family: 'Poppins', sans-serif; }

/* Contenido */
.site-main { padding: 0; }

/* Hero portada */
.hero { padding: 56px 24px; }
.hero-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 32px; align-items: center;
}
.hero-text h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.1; font-weight: 800; text-transform: uppercase;
}
.hero-text .lead { color:#4b5563; font-size:1.02rem; margin:8px 0 16px; }
.bullets { margin:0 0 18px 1.1rem; }
.bullets li { margin:8px 0; }
.cta { display:flex; gap:14px; align-items:center; }

.btn-primary {
  display:inline-block; padding:12px 18px; border-radius:10px;
  background:#FFD100; color:#111; font-weight:700; text-decoration:none;
  text-transform:uppercase; transition:.2s;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-link { color:#111; text-decoration: underline; font-weight:600; }

/* Tarjeta imagen */
.hero-media .card {
  margin:0; padding:16px; border:1px solid #e5e7eb; border-radius:16px; background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.hero-media img { width:100%; height:auto; display:block; }

/* Sección de contenido */
.page-content { max-width:1100px; margin:32px auto; padding:0 24px; }

/* Responsive */
@media (max-width:900px){
  .hero-inner { grid-template-columns: 1fr; }
}
/* Tipografía global */
html, body { font-family:'Poppins', sans-serif; }

/* Hero portada */
.hero { padding:56px 24px; }
.hero-inner {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.1fr 0.9fr;
  gap:32px; align-items:center;
}
.hero-text h1 {
  margin:0 0 12px;
  font-size:clamp(2rem,5vw,3.2rem);
  line-height:1.1; font-weight:800; text-transform:uppercase;
}
.hero-text .lead { color:#4b5563; font-size:1.02rem; margin:8px 0 16px; }
.bullets { margin:0 0 18px 1.1rem; }
.bullets li { margin:8px 0; }
.cta { display:flex; gap:14px; align-items:center; }
.btn-primary {
  display:inline-block; padding:12px 18px; border-radius:10px;
  background:#FFD100; color:#111; font-weight:700; text-decoration:none;
  text-transform:uppercase; transition:.2s;
}
.btn-primary:hover { transform:translateY(-1px); }
.btn-link { color:#111; text-decoration:underline; font-weight:600; }

/* Tarjeta con la imagen */
.hero-media .card {
  margin:0; padding:16px; border:1px solid #e5e7eb; border-radius:16px; background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.hero-media img { width:100%; height:auto; display:block; }

/* Contenedor de páginas */
.page-content { max-width:1100px; margin:32px auto; padding:0 24px; }

@media (max-width:900px){
  .hero-inner { grid-template-columns:1fr; }
}

