/* ================================
   Custom Typography Overrides
   ================================ */

:root {
  /* Usa Source Sans Pro si ya viene cargada por el theme + fallback system */
  --font-sans:
    "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Arial, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;
}

/* Base */
body,
p,
a,
li,
input,
textarea,
button {
  font-family: var(--font-sans) !important;
}

/* Quitar Playball (cursiva) del theme */
.hero-title h3,
.hero-title h4,
.section-title h3,
.parallax-section h3,
.link,
.big-number a,
.chefname,
.team-details,
.hot-desc,
.to-top span,
.to-top-holder p,
.footer-social h3,
.widget h3,
.post-link,
.testimonials-holder h4 a,
.team-modal h5,
.product-item h2,
.product-item-price,
.cart-totals h4 {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
}

/* (Opcional) también quitar el serif del menú superior (Droid Serif) */
nav li a {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
}

/* Seguridad: nunca pisar los iconos */
.fa,
.fa:before {
  font-family: FontAwesome !important;
}

/* === Footer con patrón de lunares (imagen) girado 45º, sin cortes === */
.footer-inner {
  position: relative;
  background-color: #191919;
  overflow: hidden;
  z-index: 0;
}

.footer-inner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  /* MUY grande para cubrir todo al rotar */
  width: 220vmax;
  height: 220vmax;

  background-image: url("../images/pattern-dots.png");
  background-repeat: repeat;
  background-size: 90px 90px; /* ajusta según tu patrón */

  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: center center;

  opacity: 0.1; /* intensidad */
  pointer-events: none;
  z-index: 0;
}

.footer-inner > .container {
  position: relative;
  z-index: 1;
}

/* Franja inferior lisa */
.to-top-holder {
  background: #303030;
}

/* ===== CARTA: patrón de lunares en TODA la sección (sin cortes laterales) ===== */
.menu-section-dots {
  position: relative;
  background: #fff;
  overflow: hidden; /* recorta solo la sección completa, no el container */
}

/* Capa de patrón (sobredimensionada y girada) */
.menu-section-dots::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  /* MUY grande para cubrir todo al rotar */
  width: 220vmax;
  height: 220vmax;

  background-image: url("../images/pattern-grey-dots.png");
  background-repeat: repeat;
  background-size: 90px 90px; /* ajusta según tu patrón */

  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: center center;

  opacity: 0.1; /* intensidad */
  pointer-events: none;
  z-index: 0;
}

/* Todo el contenido por encima del patrón */
.menu-section-dots > .triangle-decor,
.menu-section-dots > .container {
  position: relative;
  z-index: 2;
}

/* El wrapper interno ya no necesita fondo/patrón */
.menu-section-dots .menu-dots-container {
  background: transparent !important;
  position: relative;
}

/* Opcional: un poco de aire interior */
.menu-section-dots .menu-dots-container {
  padding: 10px 0;
}

/* ===== Triángulos pegados al borde inferior de la parallax #sec3 ===== */
#sec3 {
  position: relative;
  z-index: 3;
}

#sec3 .triangle-decor.triangle-decor-bottom {
  bottom: -2px;
}

/* La sección de carta ya no lleva triángulo propio arriba */
.menu-section-dots {
  position: relative;
  z-index: 1;
}