/*
 Theme Name:   Bricks Child Theme By Bricks Coach
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks Coach
 Author URI:   https://brickscoach.com/
 Template:     bricks
 Version:      1.0.3
 Text Domain:  bricks
*/


/* =====================================================
   CSS Variables
   ===================================================== */

:root {
	
/*Colors*/
	

	--color-primary: #ff0036;;
	--color-secondary: #8d99ae;
	--color-accent: #00ffc9;
	--color-dark: #080038;
	--color-font: #0a0a0a;
	--color-border: #eaedf0;
	--color-background: #edf2f4;
	--color-white: #fff;
	--color-black: #000;

	
	/* Layout variables */
	--container-width: 1440px;	

	/* Fluid Font Sizes */
	--font-base: clamp(1.7rem, 0.2vw + 1.61rem, 1.9rem);
	--font-h6: clamp(1.87rem, 0.39vw + 1.69rem, 2.26rem);
	--font-h5: clamp(2.06rem, 0.64vw + 1.77rem, 2.69rem);
	--font-h4: clamp(2.26rem, 0.95vw + 1.84rem, 3.2rem);
	--font-h3: clamp(2.49rem, 1.33vw + 1.89rem, 3.81rem);
	--font-h2: clamp(3.35rem, 1.81vw + 1.92rem, 4.53rem);
	--font-h1: clamp(4.0rem, 2.41vw + 1.93rem, 6.75rem);

	/* Fluid Spacing */
	--space-xs: clamp(0.875rem, 0.8571rem + 0.0893vw, 0.9375rem);
	--space-s: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);
	--space-m: clamp(1.6875rem, 1.6339rem + 0.2679vw, 1.875rem);
	--space-l: clamp(2.25rem, 2.1786rem + 0.3571vw, 2.5rem);
	--space-xl: clamp(3.375rem, 3.2679rem + 0.5357vw, 3.75rem);
	--space-2xl: clamp(4.5rem, 4.3571rem + 0.7143vw, 5rem);
	--space-3xl: clamp(5.625rem, 5.4464rem + 0.8929vw, 6.25rem);
	--space-4xl: clamp(6.75rem, 6.5357rem + 1.0714vw, 7.5rem);
	--space-section: clamp(9rem, 8.714rem + 1.429vw, 10rem);

	/* Fluid Radius */
	--radius-xs: clamp(0.875rem, 0.8571rem + 0.0893vw, 0.9375rem);
	--radius-s: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);
	--radius-m: clamp(1.6875rem, 1.6339rem + 0.2679vw, 1.875rem);
	--radius-l: clamp(2.25rem, 2.1786rem + 0.3571vw, 2.5rem);
	--radius-xl: clamp(3.375rem, 3.2679rem + 0.5357vw, 3.75rem);
	--radius-2xl: clamp(4.5rem, 4.3571rem + 0.7143vw, 5rem);
	--radius-3xl: clamp(5.625rem, 5.4464rem + 0.8929vw, 6.25rem);
	--radius-round: 50%;

	/* Grid variables */
	--grid-1: repeat(1, minmax(0, 1fr));
	--grid-2: repeat(2, minmax(0, 1fr));
	--grid-3: repeat(3, minmax(0, 1fr));
	--grid-4: repeat(4, minmax(0, 1fr));
	--grid-5: repeat(5, minmax(0, 1fr));
	--grid-6: repeat(6, minmax(0, 1fr));
	--grid-7: repeat(7, minmax(0, 1fr));
	--grid-8: repeat(8, minmax(0, 1fr));
	--grid-9: repeat(9, minmax(0, 1fr));
	--grid-10: repeat(10, minmax(0, 1fr));
	--grid-11: repeat(11, minmax(0, 1fr));
	--grid-12: repeat(12, minmax(0, 1fr));
	--grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
	--grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
	--grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
	--grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
	--grid-1-4: minmax(0, 1fr) minmax(0, 4fr);
	--grid-4-1: minmax(0, 4fr) minmax(0, 1fr);
	--grid-5-3: minmax(0, 5fr) minmax(0, 3fr);
	--grid-3-5: minmax(0, 3fr) minmax(0, 5fr);
	--grid-1-3-1: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
	--grid-2-3-2: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2fr);	
}

/* =====================================================
   Fallback Variables for Unsupported Browsers
   ===================================================== */

@supports not (font-size: clamp(1rem, 1vw, 1rem)) {
  :root {
    /* Fallback Font Sizes */
    --font-base: 1.7rem;
    --font-h6: 1.87rem;
    --font-h5: 2.06rem;
    --font-h4: 2.26rem;
    --font-h3: 2.49rem;
    --font-h2: 2.74rem;
    --font-h1: 3.01rem;
  }

  @media screen and (min-width: 1440px) {
    :root {
      /* Enhanced Font Sizes for Larger Screens */
      --font-base: 1.9rem;
      --font-h6: 2.26rem;
      --font-h5: 2.69rem;
      --font-h4: 3.2rem;
      --font-h3: 3.81rem;
      --font-h2: 4.53rem;
      --font-h1: 5.4rem;
    }
  }
}

/* =====================================================
   Typography Styles
   ===================================================== */

body {
  font-size: var(--font-base);
  color: var(--color-text-dark);
  background-color: var(--color-background);
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-m);	
}

h1 {
  font-size: var(--font-h1);
}

h2 {
  font-size: var(--font-h2);	
}

h3 {
  font-size: var(--font-h3);
}

h4 {
  font-size: var(--font-h4);
}

h5 {
  font-size: var(--font-h5);
}

h6 {
  font-size: var(--font-h6);
}

/* =====================================================
   Global Styles
   ===================================================== */

/* Link Styles 
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:focus {
  color: var(--color-accent);
  text-decoration: underline;
}
*/

/* Button Reset */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* =====================================================
   Accessibility Enhancements
   ===================================================== */

/* Focus States for Interactive Elements */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Visually Hidden Class for Screen Readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Utility Classes */

/* =====================================================
   Grid Utility Classes
   ===================================================== */

/* Grid Columns */
.grid-1 { grid-template-columns: var(--grid-1); }
.grid-2 { grid-template-columns: var(--grid-2); }
.grid-3 { grid-template-columns: var(--grid-3); }
.grid-4 { grid-template-columns: var(--grid-4); }
.grid-5 { grid-template-columns: var(--grid-5); }
.grid-6 { grid-template-columns: var(--grid-6); }
.grid-7 { grid-template-columns: var(--grid-7); }
.grid-8 { grid-template-columns: var(--grid-8); }
.grid-9 { grid-template-columns: var(--grid-9); }
.grid-10 { grid-template-columns: var(--grid-10); }
.grid-11 { grid-template-columns: var(--grid-11); }
.grid-12 { grid-template-columns: var(--grid-12); }

/* Custom Grid Structures */
.grid-1-3 { grid-template-columns: var(--grid-1-3); }
.grid-3-1 { grid-template-columns: var(--grid-3-1); }
.grid-3-2 { grid-template-columns: var(--grid-3-2); }
.grid-2-3 { grid-template-columns: var(--grid-2-3); }
.grid-1-4 { grid-template-columns: var(--grid-1-4); }
.grid-4-1 { grid-template-columns: var(--grid-4-1); }
.grid-5-3 { grid-template-columns: var(--grid-5-3); }
.grid-3-5 { grid-template-columns: var(--grid-3-5); }
.grid-1-3-1 { grid-template-columns: var(--grid-1-3-1); }
.grid-2-3-2 { grid-template-columns: var(--grid-2-3-2); }

/* Grid Layout Properties */
.grid { display: grid; }
.grid-gap-xs { gap: var(--space-xs); }
.grid-gap-s { gap: var(--space-s); }
.grid-gap-m { gap: var(--space-m); }
.grid-gap-l { gap: var(--space-l); }
.grid-gap-xl { gap: var(--space-xl); }
.grid-gap-2xl { gap: var(--space-2xl); }
.grid-gap-3xl { gap: var(--space-3xl); }
.grid-gap-4xl { gap: var(--space-4xl); }


/* Align items to the start */
.items-start {
  align-items: flex-start !important;
}

/* Align items to the center */
.items-center {
  align-items: center !important;
}

/* Align items to the end */
.items-end {
  align-items: flex-end !important;
}

/* Align items to the baseline */
.items-baseline {
  align-items: baseline !important;
}

/* Stretch items to fill the container height */
.items-stretch {
  align-items: stretch !important;
}

/* Align Content Utilities */

/* Align content to the start */
.content-start {
  align-content: flex-start !important;
}

/* Align content to the center */
.content-center {
  align-content: center !important;
}

/* Align content to the end */
.content-end {
  align-content: flex-end !important;
}

/* Distribute content evenly with equal space between rows */
.content-between {
  align-content: space-between !important;
}

/* Distribute content with equal space around rows */
.content-around {
  align-content: space-around !important;
}

/* Distribute content with equal space between rows and half-space at the edges */
.content-evenly {
  align-content: space-evenly !important;
}

/* Stretch content to fill the container */
.content-stretch {
  align-content: stretch !important;
}

/* Justify Content Utilities */

/* Align items to the start */
.justify-start {
  justify-content: flex-start !important;
}

/* Align items to the center */
.justify-center {
  justify-content: center !important;
}

/* Align items to the end */
.justify-end {
  justify-content: flex-end !important;
}

/* Distribute items evenly with equal space between them */
.justify-between {
  justify-content: space-between !important;
}

/* Distribute items with equal space around them */
.justify-around {
  justify-content: space-around !important;
}

/* Distribute items with equal space between and half-space at the edges */
.justify-evenly {
  justify-content: space-evenly !important;
}

/* Align items in stretch mode (default behavior) */
.justify-stretch {
  justify-content: stretch !important;
}

/* Enhanced Code Block Styling for WordPress */

/* Inline code */
code {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
    color: black;
}

/* Code blocks */
pre {
    background-color: #f8f8f8;
    border: 1px solid #e1e1e8;
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
    margin: 1em 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

pre code {
    background: none;
    border: none;
    padding: 0;
    color: black;
    font-size: 14px;
    line-height: 1.5;
}

/* Syntax highlighting for common languages */
.language-php .token.php {
    color: #8892bf;
}

.language-php .token.variable {
    color: #f92672;
}

.language-php .token.string {
    color: #a6e22e;
}

.language-php .token.keyword {
    color: #66d9ef;
}

.language-php .token.function {
    color: #fd971f;
}

.language-php .token.comment {
    color: #75715e;
    font-style: italic;
}

/* Dark theme code blocks */
.dark-theme pre,
.wp-dark-mode pre {
    background-color: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}

.dark-theme code,
.wp-dark-mode code {
    background-color: #4a5568;
    border-color: #718096;
    color: #f7fafc;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    pre {
        padding: 12px;
        font-size: 13px;
        border-radius: 4px;
        margin: 0.5em 0;
    }
    
    pre code {
        font-size: 13px;
    }
}