/* ================================================================
   AXXENTO THEME – elementor.css
   Elementor-specific overrides & layout fixes
   Version: 1.1.0
   ================================================================ */

/* ================================================================
   1. GLOBAL ELEMENTOR OVERRIDES
   ================================================================ */

/* Container: enforce Axxento max-width */
.elementor-section .elementor-container,
.e-container,
.e-con {
  max-width: 1200px !important;
}

/* Remove default Elementor padding resets */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1200px;
}

/* ================================================================
   2. TYPOGRAPHY OVERRIDES
   ================================================================ */

/* Force Gilroy across all Elementor text elements */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-button .elementor-button,
.elementor-widget-nav-menu .elementor-nav-menu a {
  font-family: 'Gilroy', system-ui, sans-serif !important;
}

/* Heading weight */
.elementor-widget-heading .elementor-heading-title { font-weight: 700; }
.elementor-widget-heading h1.elementor-heading-title { font-weight: 900; }

/* Text editor body text */
.elementor-widget-text-editor { font-size: 20px; font-weight: 300; line-height: 1.6; }

/* Body text links: highlight underline style */
.elementor-widget-text-editor a:not(.elementor-button):not(.ax-btn) {
  font-weight: 700;
  color: #000000;
  text-decoration: none;
  background-image: linear-gradient(to right, #37f7e1, #37f7e1);
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: 0 85%;
  transition: background-size 0.2s ease;
}
.elementor-widget-text-editor a:not(.elementor-button):not(.ax-btn):hover {
  background-size: 100% 4px;
}

/* ================================================================
   3. ELEMENTOR BUTTONS
   ================================================================ */

.elementor-widget-button .elementor-button {
  font-family: 'Gilroy', system-ui, sans-serif !important;
  font-weight: 500;
  border-radius: 999px;
  transition: all 0.3s ease;
}

/* Primary button: black → turquoise hover */
.elementor-widget-button .elementor-button.elementor-button-primary,
.elementor-widget-button .elementor-button[class*="ax-btn-primary"] {
  background-color: #000000;
  color: #ffffff;
  border: none;
}
.elementor-widget-button .elementor-button.elementor-button-primary:hover {
  background-color: #37f7e1;
  color: #000000;
  box-shadow: 0 8px 30px -4px rgba(55, 247, 225, 0.6);
}

/* Accent button: turquoise */
.elementor-widget-button .elementor-button.ax-btn-accent {
  background-color: #37f7e1;
  color: #000000;
  border: none;
}
.elementor-widget-button .elementor-button.ax-btn-accent:hover {
  background-color: rgba(55, 247, 225, 0.8);
}

/* Muted / ghost button */
.elementor-widget-button .elementor-button.ax-btn-muted {
  background-color: #f5f5f5;
  color: #000000;
  border: none;
}
.elementor-widget-button .elementor-button.ax-btn-muted:hover {
  background-color: #000000;
  color: #ffffff;
}

/* ================================================================
   4. ELEMENTOR NAVIGATION
   ================================================================ */

.elementor-nav-menu .elementor-item {
  font-family: 'Gilroy', system-ui, sans-serif !important;
  font-size: 20px;
  font-weight: 300;
  color: #000000;
  transition: color 0.2s ease;
}
.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item:focus {
  color: #737373 !important;
}

/* Dropdown */
.elementor-nav-menu--dropdown {
  border-radius: 16px !important;
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.12) !important;
  border: none !important;
  overflow: hidden;
  padding: 8px !important;
}
.elementor-nav-menu--dropdown .elementor-item {
  font-size: 16px !important;
  color: #737373 !important;
  border-radius: 8px;
}
.elementor-nav-menu--dropdown .elementor-item:hover {
  color: #000000 !important;
  background: #f5f5f5 !important;
}

/* Active nav item underline */
.elementor-nav-menu .elementor-item.elementor-item-active {
  color: #000000 !important;
}

/* ================================================================
   5. ELEMENTOR POSTS WIDGET (Blog cards)
   ================================================================ */

.elementor-posts--skin-cards .elementor-post {
  border: none;
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.elementor-posts--skin-cards .elementor-post:hover { transform: translateY(-4px); }

.elementor-posts--skin-cards .elementor-post__thumbnail__link {
  border-radius: 24px;
  overflow: hidden;
}
.elementor-posts--skin-cards .elementor-post__thumbnail {
  filter: grayscale(100%);
  transition: filter 0.4s ease, transform 0.5s ease;
}
.elementor-posts--skin-cards .elementor-post:hover .elementor-post__thumbnail {
  filter: grayscale(0%);
  transform: scale(1.05);
}

.elementor-posts--skin-cards .elementor-post__title a {
  font-family: 'Gilroy', system-ui, sans-serif !important;
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  transition: color 0.2s;
}
.elementor-posts--skin-cards .elementor-post__title a:hover { color: #737373; }

.elementor-posts--skin-cards .elementor-post__excerpt p {
  font-size: 16px;
  font-weight: 300;
  color: #737373;
}

/* ================================================================
   6. ELEMENTOR IMAGE WIDGET
   ================================================================ */

.elementor-widget-image img {
  border-radius: 16px;
}

/* ================================================================
   7. ELEMENTOR ICON BOX
   ================================================================ */

.elementor-widget-icon-box .elementor-icon-box-title {
  font-family: 'Gilroy', system-ui, sans-serif !important;
  font-weight: 700;
}
.elementor-widget-icon-box .elementor-icon-box-description {
  font-family: 'Gilroy', system-ui, sans-serif !important;
  font-size: 16px;
  font-weight: 300;
  color: #737373;
}

/* ================================================================
   8. ELEMENTOR TOGGLE / ACCORDION
   ================================================================ */

.elementor-widget-toggle .elementor-tab-title,
.elementor-widget-accordion .elementor-tab-title {
  font-family: 'Gilroy', system-ui, sans-serif !important;
  font-weight: 500;
}
.elementor-widget-toggle .elementor-tab-content,
.elementor-widget-accordion .elementor-tab-content {
  font-family: 'Gilroy', system-ui, sans-serif !important;
  font-size: 18px;
  font-weight: 300;
  color: #737373;
}

/* ================================================================
   9. ELEMENTOR FORM WIDGET
   ================================================================ */

.elementor-widget-form .elementor-field-label {
  font-family: 'Gilroy', system-ui, sans-serif !important;
  font-size: 14px;
  font-weight: 500;
}
.elementor-widget-form .elementor-field {
  font-family: 'Gilroy', system-ui, sans-serif !important;
  font-size: 16px;
  font-weight: 300;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  padding: 12px 16px;
}
.elementor-widget-form .elementor-field:focus {
  border-color: #000000;
  outline: none;
}
.elementor-widget-form .elementor-button {
  border-radius: 999px !important;
}

/* ================================================================
   10. ELEMENTOR SECTION BACKGROUNDS
   ================================================================ */

/* Turquoise accent section */
.elementor-section.ax-section-accent,
.e-con.ax-section-accent {
  background-color: #37f7e1 !important;
}

/* Dark section */
.elementor-section.ax-section-dark,
.e-con.ax-section-dark {
  background-color: #000000 !important;
}
.elementor-section.ax-section-dark *,
.e-con.ax-section-dark * {
  color: #ffffff !important;
}

/* Muted/gray section */
.elementor-section.ax-section-muted,
.e-con.ax-section-muted {
  background-color: #f5f5f5 !important;
}

/* ================================================================
   11. TOOL DETAIL – SINGLE TOOL PAGE
   Elementor-specific layout classes for single-tool-template.json
   ================================================================ */

/* Breadcrumb HTML widget */
.ax-tool-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 300;
  color: #737373;
  margin-bottom: 32px;
}
.ax-tool-breadcrumb a { transition: color 0.2s; }
.ax-tool-breadcrumb a:hover { color: #000000; }
.ax-tool-breadcrumb__sep { color: #e5e5e5; }
.ax-tool-breadcrumb__current { color: #000000; }

/* ================================================================
   12. ELEMENTOR TOC WIDGET (Table of Contents)
   ================================================================ */

.elementor-toc__list-item a {
  font-family: 'Gilroy', system-ui, sans-serif !important;
  font-size: 15px;
  font-weight: 300;
  color: #737373;
  transition: color 0.2s;
}
.elementor-toc__list-item.elementor-toc__list-item--active a,
.elementor-toc__list-item a:hover { color: #000000; }

/* ================================================================
   13. ELEMENTOR THEME BUILDER HEADER
   ================================================================ */

/* When Elementor controls the header */
.elementor-location-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}