/**
 * TechInformed Theme Variables
 * Default CSS custom properties that can be overridden by admin settings
 */

:root {
  /* Default Color Palette */
  --ti-primary-color: #eb4d36;
  --ti-secondary-color: #333333;
  --ti-accent-color: #f8f9fa;
  --ti-text-color: #333333;
  --ti-heading-color: #222222;
  --ti-paragraph-color: #555555;
  --ti-link-color: #A40002;
  --ti-link-hover-color: #d34430;
  --ti-bg-color: #ffffff;
  --ti-header-bg-color: #ffffff;
  --ti-footer-bg-color: #000000;
  --ti-footer-text-color: #ffffff;
  
  /* Typography */
  --ti-body-font-size: 16px;
  --ti-h1-font-size: 36px;
  --ti-h2-font-size: 30px;
  --ti-h3-font-size: 24px;
  --ti-h4-font-size: 20px;
  --ti-h5-font-size: 18px;
  --ti-h6-font-size: 16px;
  --ti-line-height: 1.6;
  --ti-letter-spacing: 0px;
  
  /* Layout */
  --ti-container-width: 1440px;
  --ti-header-height: 70px;
  --ti-border-radius: 4px;
  --ti-sidebar-width: 300px;
  --ti-container-margin: 30px;
  --ti-main-sidebar-gap: 60px;
  --ti-component-gutter: 20px;
  --ti-component-horizontal-gap: 20px;
  --ti-component-max-width: 400px;
  --ti-content-spacing: 30px;
  
  /* Spacing */
  --ti-section-padding: 60px;
  --ti-card-padding: 20px;
  --ti-button-padding: 12px 24px;
  
  /* Shadows */
  --ti-box-shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --ti-box-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --ti-box-shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
  
  /* Transitions */
  --ti-transition-fast: 0.2s ease;
  --ti-transition-normal: 0.3s ease;
  --ti-transition-slow: 0.5s ease;
  
  /* Z-index levels */
  --ti-z-dropdown: 1000;
  --ti-z-sticky: 1020;
  --ti-z-fixed: 1030;
  --ti-z-modal-backdrop: 1040;
  --ti-z-modal: 1050;
  --ti-z-tooltip: 1070;
}

/* Global application of theme variables */
body {
  background-color: var(--ti-bg-color);
  color: var(--ti-text-color);
  font-size: var(--ti-body-font-size);
  line-height: var(--ti-line-height);
  letter-spacing: var(--ti-letter-spacing);
}

/* Heading styles with theme variables */
h1, h2, h3, h4, h5, h6 {
  color: var(--ti-heading-color);
  margin-bottom: 1rem;
  line-height: 1.2;
}

h1 { font-size: var(--ti-h1-font-size); }
h2 { font-size: var(--ti-h2-font-size); }
h3 { font-size: var(--ti-h3-font-size); }
h4 { font-size: var(--ti-h4-font-size); }
h5 { font-size: var(--ti-h5-font-size); }
h6 { font-size: var(--ti-h6-font-size); }

/* Paragraph styles */
p {
  color: var(--ti-paragraph-color);
  margin-bottom: 1rem;
}

/* Link styles */
a {
  color: var(--ti-link-color);
  text-decoration: none;
  transition: color var(--ti-transition-fast);
}

a:hover,
a:focus {
  color: var(--ti-link-hover-color);
}

/* Container styles */
.container,
.container-fluid {
  max-width: var(--ti-container-width);
}

/* Header styles */
.site-header {
  background-color: var(--ti-header-bg-color);
  box-shadow: var(--ti-box-shadow-sm);
  z-index: var(--ti-z-sticky);
}

.site-header .container {
  height: var(--ti-header-height);
}

/* Footer styles */
.site-footer {
  background-color: var(--ti-footer-bg-color);
  color: var(--ti-footer-text-color);
}

/* Primary color applications */
.btn-primary,
.bg-primary {
  background-color: var(--ti-primary-color) !important;
  border-color: var(--ti-primary-color) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ti-link-hover-color) !important;
  border-color: var(--ti-link-hover-color) !important;
}

.text-primary {
  color: var(--ti-primary-color) !important;
}

.border-primary {
  border-color: var(--ti-primary-color) !important;
}

/* Secondary color applications */
.btn-secondary,
.bg-secondary {
  background-color: var(--ti-secondary-color) !important;
  border-color: var(--ti-secondary-color) !important;
}

.text-secondary {
  color: var(--ti-secondary-color) !important;
}

.border-secondary {
  border-color: var(--ti-secondary-color) !important;
}

/* Card and component styles */
.card,
.post-card {
  border-radius: var(--ti-border-radius);
  box-shadow: var(--ti-box-shadow-sm);
  transition: box-shadow var(--ti-transition-normal);
}

.card:hover,
.post-card:hover {
  box-shadow: var(--ti-box-shadow-md);
}

/* Layout & Gutter System - Comprehensive Frontend Application */
.ti-main-content,
main.ti-main-content,
.content-area {
  flex: 1 1 auto;
  min-width: 0;
}

.ti-sidebar,
aside.ti-sidebar,
.sidebar {
  width: var(--ti-sidebar-width);
  flex: 0 0 var(--ti-sidebar-width);
  max-width: var(--ti-sidebar-width);
}

.ti-homepage-content {
  gap: var(--ti-main-sidebar-gap);
}

.row.gx-4,
.builder-row-body {
  --bs-gutter-x: var(--ti-component-horizontal-gap);
}

.row.gy-4 {
  --bs-gutter-y: var(--ti-component-gutter);
}

.row.gy-4 {
  --bs-gutter-y: var(--ti-component-gutter);
}

/* Component spacing */
.entry-content > * + *,
.wp-block-group > * + *,
.wp-block-column > * + * {
  margin-top: var(--ti-component-gutter);
}

.ti-widget + .ti-widget,
.widget + .widget {
  margin-top: var(--ti-component-gutter);
}

/* Responsive layout adjustments */
@media (max-width: 991.98px) {
  .ti-sidebar,
  aside.ti-sidebar {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-top: var(--ti-content-spacing);
  }
  
  .ti-homepage-content {
    flex-direction: column;
    gap: calc(var(--ti-main-sidebar-gap) * 0.67);
  }
}

/* Button styles */
.btn {
  border-radius: var(--ti-border-radius);
  padding: var(--ti-button-padding);
  transition: all var(--ti-transition-fast);
}

/* Form control styles */
.form-control {
  border-radius: var(--ti-border-radius);
  border-color: var(--ti-secondary-color);
  transition: border-color var(--ti-transition-fast);
}

.form-control:focus {
  border-color: var(--ti-primary-color);
  box-shadow: 0 0 0 0.2rem rgba(235, 77, 54, 0.25);
}

/* Subscribe button specific styles */
.btn-subscribe {
  background-color: var(--ti-primary-color);
  border-color: var(--ti-primary-color);
  color: white;
}

.btn-subscribe:hover {
  background-color: var(--ti-link-hover-color);
  border-color: var(--ti-link-hover-color);
}

/* Navigation menu styles */
.site-header .menu-item a {
  color: var(--ti-text-color);
  transition: color var(--ti-transition-fast);
}

.site-header .menu-item a:hover,
.site-header .menu-item a:focus,
.site-header .current-menu-item a {
  color: var(--ti-primary-color);
}

.site-header .menu-item a::after {
  background-color: var(--ti-primary-color);
  transition: width var(--ti-transition-normal);
}

/* Article content styles */
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  color: var(--ti-heading-color);
}

.article-content p {
  color: var(--ti-paragraph-color);
}

.article-content a {
  color: var(--ti-link-color);
}

.article-content a:hover {
  color: var(--ti-link-hover-color);
}

/* Tag and meta styles */
.tag-link {
  background-color: var(--ti-accent-color);
  color: var(--ti-text-color);
  border-radius: var(--ti-border-radius);
  transition: all var(--ti-transition-fast);
}

.tag-link:hover {
  background-color: var(--ti-primary-color);
  color: white;
}

/* Share button styles */
.share-btn {
  border-radius: var(--ti-border-radius);
  transition: all var(--ti-transition-fast);
}

.share-btn:hover {
  background-color: var(--ti-primary-color);
  color: white;
}

/* Author bio and profile styles */
.author-posts .post-title a {
  color: var(--ti-heading-color);
}

.author-posts .post-title a:hover {
  color: var(--ti-primary-color);
}

.author-posts .post-meta a {
  color: var(--ti-primary-color);
}

/* Footer link styles */
.site-footer .list-unstyled a {
  color: var(--ti-footer-text-color);
  transition: color var(--ti-transition-fast);
}

.site-footer .list-unstyled a:hover {
  color: var(--ti-primary-color);
}

.site-footer .list-unstyled a::after {
  background-color: var(--ti-primary-color);
  transition: width var(--ti-transition-normal);
}

/* Social icons */
.site-footer .social-icons a {
  color: var(--ti-footer-text-color);
  transition: color var(--ti-transition-fast);
}

.site-footer .social-icons a:hover {
  color: var(--ti-primary-color);
}

/* Audio player styles */
.play-pause-btn {
  background-color: var(--ti-primary-color);
  border-radius: var(--ti-border-radius);
  transition: background-color var(--ti-transition-fast);
}

.play-pause-btn:hover {
  background-color: var(--ti-link-hover-color);
}

.waveform-bars .bar {
  background-color: var(--ti-primary-color);
  transition: height var(--ti-transition-fast);
}

/* Search and navigation styles */
.search-icon:hover i,
.btn-link:hover .bi-list {
  color: var(--ti-primary-color);
}

/* Responsive design considerations */
@media (max-width: 768px) {
  :root {
    --ti-h1-font-size: 28px;
    --ti-h2-font-size: 24px;
    --ti-h3-font-size: 20px;
    --ti-section-padding: 40px;
  }
}

@media (max-width: 480px) {
  :root {
    --ti-h1-font-size: 24px;
    --ti-h2-font-size: 20px;
    --ti-h3-font-size: 18px;
    --ti-body-font-size: 14px;
    --ti-section-padding: 30px;
  }
}

/* Print styles */
@media print {
  :root {
    --ti-bg-color: white;
    --ti-text-color: black;
    --ti-heading-color: black;
    --ti-paragraph-color: black;
  }
}