/*
 Theme Name:   SiteFly.io
 Theme URI:    https://sitefly.io/
 Description:  SiteFly.io - Website Performance Monitoring. Done right.
 Author:       SiteFly.io
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

:root {
  /* Map Brixies/ACSS vars to Fancy vars */
  --content-width: var(--container-width, 1200px);
  --radius-xs: var(--radius-s, 4px);
  --radius: var(--radius-m, 8px);
  
  /* 🧱 GRID SYSTEM FIXES */
  --grid-1: repeat(1, 1fr);
  --grid-2: repeat(2, 1fr);
  --grid-3: repeat(3, 1fr);
  --grid-gap: var(--space-m);
  --container-gap: var(--space-l);
  --content-gap: var(--space-s);

  /* 📐 WIDTH TOKENS */
  --width-m: min(100%, 55ch);
  --width-l: min(100%, 70ch);
  --width-xl: min(100%, 85ch);

  /* 🧊 BORDER RADII */
  --radius-xs: calc(var(--radius-s) / 2);
  --radius-s: 4px;
  --radius-m: 8px;

  /* Button variables */
  --btn-border-width: 0.1rem;
  --btn-radius: var(--radius-s);
  --btn-padding-block: var(--space-xs);
  --btn-padding-inline: var(--space-m);
  --btn-transition: all 0.2s ease;
}



/* Fancy Framework CSS (modified) */
/* Scroll margin for anchor links */
[id]{
  scroll-margin-top: calc(var(--offset) / 1.6);
}
/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

/* Accessibility */
body.bricks-is-frontend :focus{
  outline: none;
}

body.bricks-is-frontend :focus-visible{
  outline: solid 1px var(--primary);
  outline-offset: 5px;
  transition: all .3s;
}

/* Normalizar */
ul{
  padding: 0;
  margin: 0;
}

/* Container gap - sections without shape divider */
section:where(:not(.bricks-shape-divider)){
  gap: var(--container-gap);
}

/*Only for links without class to avoid conflicts with other styled links*/
body .brxe-post-content a:not([class]), body .brxe-text a:not([class]), body label a{
  text-decoration-line: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
  transition: all .3s;
}
/*Hover effect - only applies to links without class to avoid conflicts with other styled links*/
body .brxe-post-content a:hover:not([class]), body .brxe-text a:hover:not([class]), body label a:hover{
	color: var(--primary);
}





/**
 * Dashboard Styles
 */

/* Response Time Indicator */
.response-time.bad i {
    color: #e74c3c; /* Red */
}
.response-time.average i {
    color: #f1c40f; /* Yellow */
}
.response-time.good i {
    color: #2ecc71; /* Green */
}