/**
Theme Name: activismo-digital
Author: Agarimo Estudio
Author URI: https://agarimoestudio.com/
Description: Un tema de Astra personalizado al detalle para Activismo Digital.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: activismo-digital
Template: astra
*/

.ast-global-color-0 {
  --ast-bg-color: var(--ast-global-color-0);
}

.ast-global-color-1 {
  --ast-bg-color: var(--ast-global-color-1);
}

.ast-global-color-2 {
  --ast-bg-color: var(--ast-global-color-2);
}

.ast-global-color-3 {
  --ast-bg-color: var(--ast-global-color-3);
}

.ast-global-color-4 {
  --ast-bg-color: var(--ast-global-color-4);
}

.ast-global-color-5 {
  --ast-bg-color: var(--ast-global-color-5);
}

.ast-global-color-6 {
  --ast-bg-color: var(--ast-global-color-6);
}

.ast-global-color-7 {
  --ast-bg-color: var(--ast-global-color-7);
}

.ast-global-color-8 {
  --ast-bg-color: var(--ast-global-color-8);
}

.speech-bubble {
  --speech-padding: 2rem;
  --speech-bg: white; /* Color del fondo simulado */
  --speech-border-color: black; /* Color del borde simulado */
  --th: 40px; /* Altura/largo del pico triangular */
  --tp: 50%; /* Posición horizontal del triángulo (0%=izquierda, 100%=derecha) */
  --tb: 4px; /* Grosor del borde */
  --tc: 20px; /* Tamaño del corner recortado en la esquina superior izquierda */

  --border-image: fill 0//var(--th) 0 conic-gradient(var(--speech-border-color) 0 0);
  --border-image-bg: fill 0/0 var(--tb)/var(--th) 0 conic-gradient(var(--speech-bg) 0 0);
 
  --ta: 50deg; /* Ángulo de apertura del triángulo puntiagudo */
  
  /* NO MODIFICAR (Calculos reusables) */
  --tan: tan(var(--ta)/2); /* Tangente del ángulo de apertura dividido entre 2 */
  filter:url(#round);
}

/* Tablet */
@media (max-width: 976px) {
  body:not(.wp-admin):not(.block-editor-iframe__body) .speech-bubble {
    --speech-padding: var(--speech-padding-tablet, var(--speech-padding-desktop)) !important;
    --th: var(--th-tablet, var(--th-desktop)) !important;
    --tp: var(--tp-tablet, var(--tp-desktop)) !important;
    --tb: var(--tb-tablet, var(--tb-desktop)) !important;
    --tc: var(--tc-tablet, var(--tc-desktop)) !important;
  }
}

/* Mobile */
@media (max-width: 576px) {
  body:not(.wp-admin):not(.block-editor-iframe__body) .speech-bubble {
    --speech-padding: var(--speech-padding-mobile, var(--speech-padding-tablet)) !important;
    --th: var(--th-mobile, var(--th-tablet)) !important;
    --tp: var(--tp-mobile, var(--tp-tablet)) !important;
    --tb: var(--tb-mobile, var(--tb-tablet)) !important;
    --tc: var(--tc-mobile, var(--tc-tablet)) !important;
  }
}

.speech-bubble-wrapper {
  padding: 4rem;
  position: relative;
  font-size: 18px;
}

.speech-bubble-wrapper {
  padding: var(--speech-padding);
  clip-path: var(--polygon-border);
  border-image: var(--border-image);
  position: relative;
}

.speech-bubble-wrapper:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--ti, var(--tb) 0);
  clip-path: var(--polygon);
  border-image: var(--border-image-bg);
}

.speech-bubble:not(:where(.has-left-arrow, .has-right-arrow)) {
  padding-bottom: var(--th);
  --polygon-border: polygon(
    0 100%,
    0 var(--tc),
    var(--tc) 0,
    100% 0,
    100% 100%,
    min(100%, var(--tp) + var(--th) * var(--tan)) 100%,
    max(0%, var(--tp) + var(--th) * var(--tan)) calc(100% + var(--th)),
    max(0%, var(--tp) - var(--th) * var(--tan)) 100%
  );
  --polygon: polygon(
    0 100%,
    0 calc(var(--tc) + (var(--tb) / 2)),
    calc(var(--tc) + (var(--tb) / 2)) 0,
    100% 0,
    100% 100%,
    min(100% - var(--tb), var(--tp) + var(--th) * var(--tan) - var(--tb)) 100%,
    min(100% - var(--tb), var(--tp) + var(--th) * var(--tan) - var(--tb))
    calc(100% + var(--th) + var(--tb) * (1 - 1/sin(var(--ta)/2))),
    max(var(--tb), var(--tp) - var(--th) * var(--tan) + var(--tb) * tan(45deg - var(--ta)/4)) 100%); 
}

.speech-bubble.has-left-arrow {
  padding-left: var(--th);
  --ti: 0 var(--tb);
  --border-image: fill 0//0 var(--th) conic-gradient(var(--speech-border-color) 0 0);
  --border-image-bg: fill 0/var(--tb) 0/0 var(--th) conic-gradient(var(--speech-bg) 0 0);
  --polygon-border: polygon(
    0 100%,
    0 max(0%  ,var(--tp) - var(--th)*tan(var(--ta)/2)),
    calc(-1*var(--th)) max(0%  ,var(--tp) - var(--th)*tan(var(--ta)/2)),
    0 min(100%,var(--tp) + var(--th) * tan(var(--ta)/2)),
    0 0,
    100% 0,
    100% calc(100% - var(--tc)),
    calc(100% - var(--tc)) 100%
  );

  --polygon: polygon(
    0 100%,
    0 max(var(--tb),(var(--tp) + 2px) - var(--th) * tan(var(--ta)/2) + var(--tb)*tan(45deg - var(--ta)/4)),
    calc(-1*var(--th) - var(--tb)*(1 - 1/sin(var(--ta)/2))) max(var(--tb),(var(--tp) + 2px) - var(--th) * tan(var(--ta)/2) + var(--tb)*tan(45deg - var(--ta)/4)),
    0 min(100% - var(--tb),var(--tp) + var(--th)*tan(var(--ta)/2) - var(--tb)*tan(45deg - var(--ta)/4)),
    0 0,
    100% 0,
    100% calc(100% - var(--tc) - var(--tb)/2),
    calc(100% - var(--tc) - var(--tb)/2) 100%
  );
}

.speech-bubble.has-right-arrow {
  padding-right: var(--th);
  --ti: 0 var(--tb);
  --border-image: fill 0//0 var(--th) conic-gradient(var(--speech-border-color) 0 0);
  --border-image-bg: fill 0/var(--tb) 0/0 var(--th) conic-gradient(var(--speech-bg) 0 0);
  --polygon-border: polygon(
    var(--tc) 100%,
    0 calc(100% - var(--tc)),
    0 0,
    100% 0,
    100% 100%,
    100% max(0%, var(--tp) - var(--th) * tan(var(--ta)/2)),
    calc(100% + var(--th)) max(0%, var(--tp) - var(--th) * tan(var(--ta)/2)),
    100% min(100%, var(--tp) + var(--th) * tan(var(--ta)/2)),
    100% 100%
  );
  --polygon: polygon(
    calc(var(--tc) + var(--tb)/2) 100%,
    0 calc(100% - var(--tc) - var(--tb)/2),
    0 0,
    100% 0,
    100% 100%,
    100% max(var(--tb), (var(--tp) + 2px) - var(--th) * tan(var(--ta) / 2) + var(--tb) * tan(45deg - var(--ta)/4)),
    calc(100% + var(--th) + var(--tb) * (1 - 1/sin(var(--ta) / 2))) max(var(--tb), (var(--tp) + 2px) - var(--th) * tan(var(--ta)/2) + var(--tb) * tan(45deg - var(--ta)/4)),
    100% min(100% - var(--tb), var(--tp) + var(--th) * tan(var(--ta)/2) - var(--tb) * tan(45deg - var(--ta)/4)),
    100% 100%
  );
}