/*
Theme Name: NorthSpicesTheme
Theme URI: https://northspices.com/
Author: Resoluzion 360 | Juan M.
Author URI: https://resoluzion360.com/
Description: Theme para el proyecto NorthSpices.
Version: 2.0.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.2
License: GPL version 2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0
Text Domain: NorthSpicesTheme
*/
/* ═══════════════════════════════════════════
   1. VARIABLES (Design Tokens)
   ═══════════════════════════════════════════ */
:root {
  /* ── Tipografía ──────────────────────────── */
  --theme-font: 'Montserrat', sans-serif;
  --theme-font-two: 'Montserrat', sans-serif;
  --theme-font-three: 'Montserrat', sans-serif;
  --theme-font-four: 'Montserrat', sans-serif;
  /* ── Paleta NorthSpices ──────────────────── */
  --verde-norths: #2cad6e;
  --verde-norths-rgb: 44, 173, 110;
  --amarillo-norths: #fcea0d;
  --amarillo-norths-rgb: 252, 234, 13;
  --rosa-norths: #e9a2c7;
  --rosa-norths-rgb: 233, 162, 199;
  --azul-norths: #9ccaee;
  --azul-norths-rgb: 156, 202, 238;
  --morado-norths: #7A4191;
  --verde-claro-norths: #98E9C1;
  --morado-2-norths: #7B4191;
  --verde-claro-2-norths: #E5FFF2;
  --azul-claro-norths: #9BC9ED;
  --crema-norths: #fffcdf;
  --rosa-txt-norths: #E5BAD0;
  --amarillo-claro-norths: #FFF8AE;
  --amarillo-claro-crema: #fffcdf;
  --amarillo-destacado: #FFEC00;
  --verde-norths-light: #98E9C2;
  --amarillo-norths-light: #f9e951;
  --verde-norths-dark: #0C5330;
  /* ── Colores semánticos del theme ────────── */
  --theme-gray: #808080;
  --theme-gray-rgb: 128, 128, 128;
  --theme-gray-light: #b1b1b1;
  --theme-white: #ffffff;
  --theme-white-rgb: 255, 255, 255;
  --theme-base: #2cad6e;
  --theme-base-rgb: 44, 173, 110;
  --theme-black: #1e1e1e;
  --theme-black-rgb: 30, 30, 30;
  --theme-primary: #fcea0d;
  --theme-primary-rgb: 252, 234, 13;
  /* ── Texto: estilos tipográficos del proyecto ── */
  --norths-titulos-font-size: 48px;
  --norths-titulos-font-family: 'Montserrat', sans-serif;
  --norths-titulos-font-weight: normal;
  --norths-titulos-line-height: 1.1;
  --norths-subtitulos-font-size: 26px;
  --norths-subtitulos-font-family: 'Montserrat', sans-serif;
  --norths-subtitulos-font-weight: normal;
  --norths-subtitulos-line-height: 1.1;
  --norths-heading-font-size: 40px;
  --norths-heading-font-family: 'Montserrat', sans-serif;
  --norths-heading-font-weight: normal;
  --norths-heading-line-height: 1.1;
  --norths-subheading-font-size: 20px;
  --norths-subheading-font-family: 'Montserrat', sans-serif;
  --norths-subheading-font-weight: normal;
  --norths-subheading-line-height: 1.2;
  --norths-parrafo-base-font-size: 16px;
  --norths-parrafo-base-font-family: 'Montserrat', sans-serif;
  --norths-parrafo-base-font-weight: normal;
  --norths-parrafo-base-line-height: 1.4;
  --norths-parrafo-strong-font-size: 16px;
  --norths-parrafo-strong-font-family: 'Montserrat', sans-serif;
  --norths-parrafo-strong-font-weight: normal;
  --norths-parrafo-strong-line-height: 1.4;
  --norths-parrafo-medium-font-size: 16px;
  --norths-parrafo-medium-font-family: 'Montserrat', sans-serif;
  --norths-parrafo-medium-font-weight: normal;
  --norths-parrafo-medium-line-height: 1.2;
  --norths-parrafo-small-font-size: 14px;
  --norths-parrafo-small-font-family: 'Montserrat', sans-serif;
  --norths-parrafo-small-font-weight: normal;
  --norths-parrafo-small-line-height: 1.2;
  --norths-parrafo-small-cursiva-font-size: 14px;
  --norths-parrafo-small-cursiva-font-family: 'Montserrat', sans-serif;
  --norths-parrafo-small-cursiva-font-weight: normal;
  --norths-parrafo-small-cursiva-line-height: 1.3;
}
/* ═══════════════════════════════════════════
   2. RESET / BASE
   ═══════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}
body {
  font-family: var(--theme-font);
  color: var(--theme-gray);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.625;
  letter-spacing: -0.176px;
  margin: 0;
  background-color: var(--amarillo-claro-crema);
}
main {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}
body.locked {
  overflow: hidden;
}
a {
  color: var(--theme-base);
  text-decoration: none;
  transition: all 500ms ease;
}
a:hover,
a:focus,
a:visited {
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--theme-font-two);
  color: var(--theme-black);
  margin: 0;
}
p {
  margin: 0;
}
dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 0;
}
img {
  max-width: 100%;
  height: auto;
}
.thm-titulo {
  font-family: var(--theme-font-two);
  font-weight: 700;
  font-size: 48px;
  line-height: 110%;
  letter-spacing: 0%;
  text-align: center;
  color: #FFFFFF;
  paint-order: stroke fill;
  -webkit-text-stroke: 2px #1D1D1B;
  text-shadow: 0 4px 0px var(--theme-black);
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .thm-titulo {
    font-size: 30.6px;
    margin-bottom: 10px;
  }
}
.thm-subtitulo {
  font-family: var(--theme-font-two);
  font-weight: 700;
  font-size: 26px;
  line-height: 110%;
  letter-spacing: 0%;
  text-align: center;
  color: var(--verde-norths);
  paint-order: stroke fill;
  -webkit-text-stroke: 2px var(--theme-black);
}
@media (max-width: 767px) {
  .thm-subtitulo {
    font-size: 24px;
    margin-bottom: 10px;
  }
}
.thm-btn {
  display: inline-block;
  font-family: var(--theme-font-two);
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -5%;
  text-align: center;
  vertical-align: middle;
  transition: all 300ms ease;
  border-radius: 10px;
  border: 2px solid #1D1D1B;
  background-color: var(--verde-norths);
  padding: 12px 40px;
  color: #1D1D1B;
  text-decoration: none;
}
.thm-btn:hover {
  background-color: #1D1D1B;
  color: var(--theme-white);
  text-decoration: none;
  border: 2px solid var(--theme-base);
}
.thm-btn.stroke {
  background-color: var(--theme-white);
  color: #1D1D1B;
}
.thm-btn.stroke:hover {
  background-color: var(--rosa-norths);
}
.thm-btn.blue {
  background-color: var(--azul-norths);
}
.thm-btn.blue:hover {
  background-color: #1D1D1B;
  border: 2px solid var(--azul-norths);
}
.thm-btn.category-btn {
  background-color: var(--verde-claro-norths);
  color: var(--theme-black);
  font-size: 20px;
  font-family: var(--theme-font);
  padding: 14px 28px;
  border: solid 2px var(--theme-black);
  border-radius: 40px;
  font-weight: 500;
  text-transform: lowercase;
  box-shadow: 0px 4px 0px var(--theme-black);
  line-height: 121%;
  letter-spacing: -5%;
}
.thm-btn.category-btn:hover {
  background-color: var(--theme-black);
  color: var(--theme-white);
  border-color: var(--theme-white);
  box-shadow: 0px 4px 0px var(--theme-black);
}
/* ═══════════════════════════════════════════
   3. GRID (Bootstrap 5)
   ═══════════════════════════════════════════ */
.row {
  --bs-gutter-x: 30px;
}
.gutter-y-30 {
  --bs-gutter-y: 30px;
}
/* ═══════════════════════════════════════════
   4. PAGE WRAPPER
   ═══════════════════════════════════════════ */
.page-wrapper {
  position: relative;
  margin: 0 auto;
  width: 100%;
  min-width: 300px;
  overflow: hidden;
}
/* ═══════════════════════════════════════════
   5. BOTÓN EDITAR POST (Dev)
   ═══════════════════════════════════════════ */
.sq_edit_post {
  position: fixed;
  z-index: 9999999;
  border-radius: 100%;
  background: #333;
  border: 3px #e00034 solid;
  box-shadow: 0 1px 16px 0px rgba(0, 0, 0, 0.75);
  transition: 0.5s;
}
.sq_edit_post a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #fff;
}
.sq_edit_post a svg {
  width: 20px;
  height: 20px;
}
.sq_edit_post:hover {
  border-color: #000;
}
.sq_edit_post:hover a {
  color: #ebebeb;
}
.sq_edit_post.sq_wp_link {
  bottom: 90px;
  left: 30px;
}
.sq_edit_post.sq_info_link {
  bottom: 150px;
  left: 30px;
}