/*
Theme Name: Blockskit Online Education
Theme URI: https://blockskit.com/blockskit-online-education/
Author: BlockskitDev
Author URI: https://blockskit.com
Description: Blockskit Online Education is a modern, versatile FSE WordPress theme designed for education, academy, course, e-learning, online learning, lesson, study, school, teacher, tutor, university, classes, college, and other education websites—no coding required. With full-site editing, you can easily customize every aspect of your site, including headers and footers. Featuring multiple templates, patterns, and style variations, it adapts seamlessly to various aesthetics and business needs.
Template: blockskit-base
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 5.6
License: GPLv3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: blockskit-online-education
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, threaded-comments, translation-ready, wide-blocks, block-styles, blog, portfolio, education

Blockskit Online Education WordPress Theme, Copyright 2025 BlockskitDev
Blockskit Online Education is distributed under the terms of the GNU General Public License v3
*/

/* Skills Section - Nuclear Option with Maximum Specificity */
body .skills-section,
body div.skills-section,
.wp-site-blocks .skills-section {
  padding: 3rem 2rem !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

body .skills-section > h3,
body div.skills-section > h3 {
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin-bottom: 2.5rem !important;
  text-align: center !important;
  color: #1a1a1a !important;
}

body .skills-category,
body div.skills-category {
  margin-bottom: 3rem !important;
}

body .skills-category h4,
body div.skills-category h4 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  margin-bottom: 1.5rem !important;
  color: #2c3e50 !important;
  border-bottom: 2px solid #e0e0e0 !important;
  padding-bottom: 0.5rem !important;
}

body .skills-grid,
body div.skills-grid,
.wp-block-group.skills-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  justify-content: flex-start !important;
}

/* Nuclear option for skill items - override ALL WordPress styles */
body .skill-item,
body div.skill-item,
.wp-block-group.skill-item,
body .wp-block-group.skill-item,
html body .skills-grid .skill-item {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1.25rem !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
  font-family: var(--wp--preset--font-family--body) !important;
}

body .skill-item:hover,
body div.skill-item:hover,
.wp-block-group.skill-item:hover,
body .wp-block-group.skill-item:hover,
html body .skills-grid .skill-item:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

body .skill-icon,
body div.skill-icon,
.skill-item .skill-icon {
  font-size: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: white !important;
}

/* Make sure spans inside skill items are styled correctly */
body .skill-item span,
body div.skill-item span,
.wp-block-group.skill-item span {
  color: white !important;
  line-height: normal !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  body .skills-section,
  body div.skills-section {
    padding: 2rem 1rem !important;
  }

  body .skills-section > h3,
  body div.skills-section > h3 {
    font-size: 1.75rem !important;
  }

  body .skills-category h4,
  body div.skills-category h4 {
    font-size: 1.25rem !important;
  }

  body .skill-item,
  body div.skill-item {
    font-size: 0.875rem !important;
    padding: 0.625rem 1rem !important;
  }

  body .skill-item:hover,
  body div.skill-item:hover {
    transform: translateY(-5px) !important;
  }

  body .skills-grid,
  body div.skills-grid {
    gap: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  body .skills-section > h3,
  body div.skills-section > h3 {
    font-size: 1.5rem !important;
  }

  body .skill-item,
  body div.skill-item {
    font-size: 0.8rem !important;
    padding: 0.5rem 0.875rem !important;
  }

  body .skill-icon,
  body div.skill-icon {
    font-size: 1rem !important;
  }
}