/*
Theme Name:   MaJo Colombia Child
Theme URI:    https://majocolombia.com
Description:  Child theme de Astra para MaJo Colombia — marca de moda femenina colombiana
Author:       MaJo Colombia
Author URI:   https://majocolombia.com
Template:     astra
Version:      1.0.0
Text Domain:  majocolombia-child
*/

/* ============================================================
   MAJO COLOMBIA — IDENTIDAD VISUAL
   Paleta: Blanco / Negro / Dorado
   Tipografía: Cormorant Garamond (headings) + Jost (body)
   ============================================================ */

/* --- Variables de marca --- */
:root {
  --majo-blanco:     #FFFFFF;
  --majo-crema:      #FAF8F5;
  --majo-negro:      #0D0D0D;
  --majo-negro-soft: #1A1A1A;
  --majo-gris:       #6B6B6B;
  --majo-gris-light: #E8E5E0;
  --majo-dorado:     #C9A96E;
  --majo-dorado-dark:#A8813F;
  --majo-dorado-light:#E8D5A3;

  --font-heading: Cormorant Garamond, Georgia, serif;
  --font-body:    Jost, Helvetica Neue, Arial, sans-serif;

  --radius:    2px;
  --transition: 0.3s ease;
  --max-width: 1280px;
}

/* --- Reset tipográfico --- */
body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  color: var(--majo-negro);
  background-color: var(--majo-blanco);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.site-title {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--majo-negro);
  line-height: 1.2;
}

h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); }

p {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--majo-negro-soft);
}

a {
  color: var(--majo-negro);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: var(--majo-dorado);
}

/* --- Header --- */
.site-header,
#masthead {
  background-color: var(--majo-blanco) !important;
  border-bottom: 1px solid var(--majo-gris-light);
}

.site-title a,
.ast-site-name-wrap a {
  font-family: var(--font-heading) !important;
  font-size: 1.6rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  color: var(--majo-negro) !important;
  text-transform: uppercase;
}

/* --- Navegación --- */
.main-header-menu a,
.ast-header-navigation a {
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--majo-negro) !important;
  transition: color var(--transition);
}
.main-header-menu a:hover,
.ast-header-navigation a:hover {
  color: var(--majo-dorado) !important;
}

/* --- Botones globales --- */
.ast-btn,
.button,
button,
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius) !important;
  background-color: var(--majo-negro) !important;
  color: var(--majo-blanco) !important;
  border: 1px solid var(--majo-negro) !important;
  padding: 14px 32px !important;
  transition: all var(--transition) !important;
  cursor: pointer;
}
.ast-btn:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background-color: var(--majo-dorado) !important;
  border-color: var(--majo-dorado) !important;
  color: var(--majo-blanco) !important;
}

/* Botón outline / secundario */
.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: transparent !important;
  color: var(--majo-negro) !important;
  border: 1px solid var(--majo-negro) !important;
}
.button.alt:hover,
.woocommerce a.button.alt:hover {
  background-color: var(--majo-negro) !important;
  color: var(--majo-blanco) !important;
}

/* --- WooCommerce: productos --- */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--majo-negro) !important;
}

.woocommerce ul.products li.product .price,
.woocommerce .price {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 300 !important;
  color: var(--majo-gris) !important;
}

.woocommerce ul.products li.product .price ins {
  color: var(--majo-dorado) !important;
  font-weight: 400 !important;
}

.woocommerce ul.products li.product img {
  border-radius: 0 !important;
  transition: transform 0.5s ease;
}
.woocommerce ul.products li.product:hover img {
  transform: scale(1.03);
}

/* --- WooCommerce: sale badge --- */
.woocommerce span.onsale {
  background-color: var(--majo-dorado) !important;
  color: var(--majo-blanco) !important;
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0 !important;
  min-height: auto;
  min-width: auto;
  padding: 5px 10px;
  line-height: 1;
}

/* --- Footer --- */
.site-footer,
#colophon {
  background-color: var(--majo-negro) !important;
  color: var(--majo-gris-light) !important;
  border-top: 2px solid var(--majo-dorado);
}
.site-footer a,
#colophon a {
  color: var(--majo-gris-light) !important;
}
.site-footer a:hover,
#colophon a:hover {
  color: var(--majo-dorado) !important;
}

/* --- Separador dorado decorativo --- */
.majo-divider {
  width: 48px;
  height: 1px;
  background-color: var(--majo-dorado);
  margin: 20px auto;
}

/* --- Inputs / Forms --- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
  border: 1px solid var(--majo-gris-light) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: var(--majo-negro) !important;
  transition: border-color var(--transition);
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--majo-dorado) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(201, 169, 110, 0.15) !important;
}