/*
Theme Name: Bonocol (Storefront Child)
Template: storefront
Version: 1.0.1
Text Domain: bonocol-storefront
*/

:root{
  --bonocol-primary: #65331A;
  --bonocol-primary-contrast: #ffffff;
  --bonocol-radius-lg: 16px;
  --bonocol-radius-md: 14px;
  --bonocol-card-bg: #ffffff;
  --bonocol-card-shadow: 0 18px 55px rgba(0,0,0,.18);
}

html, body{ height: 100%; }
body{
  margin: 0;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background-color: #f3eee8;
  background-image: url('https://bonocol.mx/fondo.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.site,
#page,
.site-content{ background: transparent; }

.site-content{ padding: 24px; }

.col-full{ max-width: 1100px; }

.site-main{
  background: var(--bonocol-card-bg);
  border-radius: var(--bonocol-radius-lg);
  padding: 28px 24px;
  box-shadow: var(--bonocol-card-shadow);
}

.site-header{
  background: transparent;
  padding: 18px 0 0;
  border-bottom: 0;
}

.storefront-breadcrumb,
.woocommerce-breadcrumb{ background: transparent; }

a,
a:visited{ color: var(--bonocol-primary); }
a:hover,
a:focus{ color: var(--bonocol-primary); }

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  background-color: var(--bonocol-primary);
  border-color: var(--bonocol-primary);
  color: var(--bonocol-primary-contrast);
  border-radius: var(--bonocol-radius-md);
  font-weight: 800;
  letter-spacing: .2px;
}

.button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{
  background-color: var(--bonocol-primary);
  border-color: var(--bonocol-primary);
  color: var(--bonocol-primary-contrast);
  text-decoration: underline;
}

.button:focus-visible,
button:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="submit"]:focus-visible,
a:focus-visible,
.woocommerce a.button:focus-visible{
  outline: 3px solid rgba(101,51,26,.35);
  outline-offset: 3px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea,
select{ border-radius: 12px; }

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error{ border-radius: var(--bonocol-radius-lg); }

@media (max-width: 480px){
  body{ background-attachment: scroll; }
  .site-content{ padding: 12px; }
  .site-main{ padding: 18px 14px; }
}

/* --- Bonocol: contraste sobre fondo con imagen (header/nav/sidebar) --- */

/* Texto blanco solo en zonas que quedan sobre la imagen */
.site-header,
.site-header .site-branding,
.site-header .site-branding a,
.site-header .site-branding .site-title,
.site-header .site-branding .site-title a,
.site-header .site-branding .site-description,
.main-navigation ul li a,
.site-header-cart a,
.site-header-cart .count,
.storefront-breadcrumb,
.storefront-breadcrumb a,
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
#secondary,
#secondary a,
.widget-area,
.widget-area a,
.widget-area .widget-title{
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

/* Menú activo/hover */
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li.current-menu-ancestor > a{
  color: #ffffff;
  text-decoration: underline;
}

/* Separadores/bordes en sidebar sobre imagen */
#secondary .widget,
.widget-area .widget{
  background: transparent;
  border: 0;
}

/* --- Bonocol: fondo fijo también en móvil (más compatible que background-attachment: fixed) --- */
body{
  /* Evita duplicar el fondo (lo pintamos con ::before) */
  background-image: none;
  background-attachment: scroll;
  position: relative;
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-color: #f3eee8;
  background-image: url('https://bonocol.mx/fondo.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#page{
  position: relative;
  z-index: 0;
}

/* --- Bonocol: fondo fijo robusto (evita franja gris en overscroll móvil) --- */

/* Quita cualquier fondo del documento; el fondo lo pinta html::before */
html,
body{
  background: transparent !important;
  min-height: 100%;
}

html{ position: relative; }

html::before{
  content: "";
  position: fixed;
  /* Extiende más allá del viewport para cubrir overscroll/rubber-band */
  top: -25vh;
  right: 0;
  bottom: -25vh;
  left: 0;
  z-index: -1;
  pointer-events: none;

  background-color: #f3eee8;
  background-image: url('https://bonocol.mx/fondo.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateZ(0);
  will-change: transform;
}