/*
Theme Name: SHN Base Child
Template: shn-base
Author: SmarterBettor
Author URI: https://smarterbettor.com/
Description: Child theme de SHN-Base
Version: 1.0
Text Domain: shn-base-child
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --color-black: #111111;
    --color-white: #ffffff;
    --color-primary: #3a96e0;
    --color-p: hsl(216 10% 70%);
    --accent: #1e73be;
    --contrast: #222222;
    --gradient-primary: linear-gradient(135deg, hsl(75 100% 62%), hsl(90 100% 55%));
    --gradient-background: linear-gradient(180deg, hsl(210 45% 11.2%), hsl(210 35% 8%));
    --background: 210 45% 11.2%;
    
    --space-s: 0.5rem;  /* 8px */
    --space-m: 1rem;    /* 16px */
    --space-l: 2rem;    /* 32px */
    --space-xl: 4rem;   /* 64px */
    --space-2xl: 5rem;   /* 80px */
    --space-3xl: 7rem;   /* 112px */
    
    --fs-s: 14px;
    --fs-m: 16px;
    --fs-l: 18px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 32px;
    --fs-4xl: 40px;
    --fs-5xl: 48px;
    --fs-6xl: 56px;
    --fs-7xl: 64px;
    --fs-8xl: 72px;

    --lh-s: 110%;  
    --lh-m: 140%;    

    --container-width: 1300px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Inter, system-ui, -apple-system, sans-serif;
}

p {
    margin: 0 !important;
    padding: 0;
}

a {
    text-decoration: none;
}

h1, 
h2,
h3,
h4,
h5,
h6 {
    margin: 0 !important;
    padding: 0 !important;
}

.full-width {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
    width: auto;
}

.container-width {
	max-width: var(--container-width);
	width: 100%;
	margin: 0 auto;
}

.site-main {
    padding: 0 !important;
}

@media (max-width: 720px) {
	.site-main {
    padding: 0 20px!important;
	}
}

.hero-padding {
    padding: calc(var(--space-2xl) + 120px) var(--space-2xl);
}

.p-gradient {
    background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* Para navegadores modernos */
  color: transparent;
}

.bg-gradient-background {
    background-image: var(--gradient-background);
}

/* Margin top */
.mt-s  { margin-top: var(--space-s); }
.mt-m  { margin-top: var(--space-m); }
.mt-l  { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }

/* Margin bottom */
.mb-s  { margin-bottom: var(--space-s); }
.mb-m  { margin-bottom: var(--space-m); }
.mb-l  { margin-bottom: var(--space-l); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Padding utilities */
.pc-s  { padding: var(--space-s) 0; }
.pc-m  { padding: var(--space-m) 0; }
.pc-l  { padding: var(--space-l) 0; }
.pc-xl { padding: var(--space-xl) 0; }
.pc-2xl { padding: var(--space-2xl) 0; }
.pc-3xl { padding: var(--space-3xl) 0; }

.p-s  { padding: var(--space-s); }
.p-m  { padding: var(--space-m); }
.p-l  { padding: var(--space-l); }

/* Fonts utilities */
.lh-s { line-height: var(--lh-s); }
.lh-m { line-height: var(--lh-m); }

.fs-s { font-size: var(--fs-s); }
.fs-m { font-size: var(--fs-m); }
.fs-l { font-size: var(--fs-l); }
.fs-xl { font-size: var(--fs-xl); }
.fs-2xl { font-size: var(--fs-2xl); }
.fs-3xl { font-size: var(--fs-3xl); }
.fs-4xl { font-size: var(--fs-4xl); }
.fs-5xl { font-size: var(--fs-5xl); }
.fs-6xl { font-size: var(--fs-6xl); }
.fs-7xl { font-size: var(--fs-7xl); }
.fs-8xl { font-size: var(--fs-8xl); }

.fw-s { font-weight: 400; }
.fw-m { font-weight: 500; }
.fw-l { font-weight: 600; }
.fw-xl { font-weight: 700; }
.fw-2xl { font-weight: 800; }

.text-center { text-align: center; }


/* === FLEX === */
.flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }

/* === GRID === */
.grid { display: grid; }
.grid-1 { grid-template-columns: repeat(1, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(3, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }

.gap-m  { gap: var(--space-m); }


/* Custom styles */


.rdg-blocks .rdg-membership-info .mi_section .mi_wrapper .mi_container .mi_body, .rdg-blocks .rdg-membership-info .mi_section .mi_wrapper .mi_container .mi_header .title {
    color: black;
}
	
.rdg-membership-info .mi_section .mi_wrapper .mi_container .mi_header .title {
    font-weight: bold;
    font-size: 1.5rem;
}

#rank-math-faq .rank-math-list-item {
  max-width: 100%;
}

.rank-math-faq-item {
  margin-bottom: 0.7rem;
}

.rank-math-question {
  cursor: pointer;
  background-color: #f1f1f1;
  border-bottom: 3px solid #0160ac;
  padding: 15px;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rank-math-question:after {
  right: 5px;
  top: 0;
  content: "\2715";
  transform: rotate(45deg);
  transition: all 150ms ease-in-out;
  color: #0160ac;
  filter: drop-shadow(0 2px 1px rgba(49, 0, 0, 0.45));
}

.rank-math-question.collapse:after {
  transform: rotate(0);
}

.rank-math-answer {
  overflow: hidden;
  padding: 15px;
  margin: 10px 0;
  border: 1px solid #f1f1f1;
  transition: max-height 0.3s ease-out;
}

.rdg-blocks .rdg-picks-list .container.content .picks {
    justify-content: center !important;
}

.rdg-blocks .rdg-image-column .container.content .content {
    max-width: 1300px;
    margin: 0 auto;
}

.hottest-streaks .wp-block-group__inner-container {
	  display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 20px;
    margin-bottom: 20px;
}

.rank-math-list p {
	color: black;
}


.wp-block-group__inner-container {
    gap: inherit;
    display: inherit;
    flex-direction: inherit;
    flex-wrap: inherit;
    justify-content: inherit;
    width: 100%;
    align-items: inherit;
}

.custom-flex { flex: 1 1 300px; /* <-- clave */
    max-width: 300px; /* evita que crezcan demasiado */
    min-width: 150px; /* asegura que bajen al ser más pequeño el contenedor */
    text-align: center;
}

.icon-percentage {
    border-radius: 12px;
    max-width: fit-content;
    display: grid;
    place-content: center;
    padding: 8px;
    margin-bottom: 16px;
}