/*
Theme Name: HomeFix Pro
Theme URI: https://wpfrank.com/homefix-pro
Description: A modern, fully customizable home repair services WordPress theme features dynamic service management, technician profiles, advanced booking system with reCAPTCHA, comprehensive customizer controls, live preview updates, and responsive design. Perfect for home repair businesses, handyman services, and maintenance companies looking for a professional online presence with complete control over content and styling.
Author: WP Frank
Author URI: https://wpfrank.com
Version: 3.0.0
Requires at least: 5.0
Tested up to: 6.9
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, theme-options, block-styles
Text Domain: homefix-pro
Domain Path: /languages

Copyright (c) 2024 wpfrank
This theme is licensed under the GPL v2 or later.
See License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/


/* Custom styles for HomeFix Pro theme */

/* Override for specific sections that need different backgrounds */
.section-override {
  /* Use this class to override the global background for specific sections */
  background: none !important;
}

/* Mobile Menu Styles */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.mobile-menu.open {
  max-height: 500px;
  transition: max-height 0.3s ease-in;
}

/* Dropdown menu styles */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  width: 12rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  z-index: 50;
  padding: 0.5rem 0;
}

/* Show dropdown on hover OR focus */
.group:hover .dropdown-menu,
.group:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

/* Keyboard navigation support */
.dropdown-menu.opacity-100 {
  opacity: 1 !important;
  visibility: visible !important;
}

.dropdown-submenu {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 0.5rem;
  width: 12rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  z-index: 51;
  padding: 0.5rem 0;
}

.dropdown-menu li:hover .dropdown-submenu,
.dropdown-menu li.group:hover .dropdown-submenu {
  opacity: 1;
  visibility: visible;
}

/* Ensure proper positioning for nested menus */
.dropdown-menu li {
  position: relative;
}

.dropdown-submenu li {
  position: relative;
}

/* Focus styles for accessibility */
.nav-link:focus,
.submenu:focus {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 0.25rem;
}

.dropdown-menu .nav-link:focus,
.dropdown-menu .submenu:focus {
  background: rgba(59, 130, 246, 0.1);
  outline: 2px solid #2563EB;
  outline-offset: -2px;
}

/* Remove default button styles for menu buttons */
.submenu {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  text-align: inherit;
}

/* Ensure submenu buttons are properly styled */
.submenu:hover {
  color: #2563EB;
}

/* Mobile submenu styles */
.mobile-submenu {
  padding-left: 1rem;
  border-left: 2px solid #e5e7eb;
  margin-left: 1rem;
  margin-top: 0.5rem;
}

.mobile-submenu.show {
  display: block !important;
}

/* Import Tailwind CSS and custom styles */
@import url('assets/css/tailwind.css');

/* ==========================================================================
   WordPress Default CSS Classes
   Required for theme compatibility and theme check compliance.
   ========================================================================== */

/* Image Captions */
.wp-caption {
  max-width: 100%;
  margin-bottom: 1rem;
}

.wp-caption img {
  display: block;
  max-width: 100%;
  height: auto;
}

.wp-caption-text {
  font-size: 0.875rem;
  color: #6b7280;
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

/* Gallery Captions */
.gallery-caption {
  font-size: 0.875rem;
  color: #6b7280;
  text-align: center;
}

/* Post Author Highlight */
.bypostauthor {
  /* Highlight styling for comment author. */
  display: block;
}

.bypostauthor>.comment-body {
  border-left: 4px solid #2563eb;
  padding-left: 1rem;
}

/* Alignment Classes */
.alignright {
  float: right;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.alignleft {
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}

/* Clear floats */
.alignnone {
  margin: 1rem 0;
}

/* Responsive images */
.alignleft img,
.alignright img,
.aligncenter img {
  max-width: 100%;
  height: auto;
}

/**************************/

.swiper-pagination-bullet {
    position: relative;
}

.swiper-pagination-bullet::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: 36px;   /* invisible tap area */
    height: 36px;
}

/**************************/

@font-face {
  font-family: "Font Awesome 7 Free";
  font-style: normal;
  font-weight: 900;
  src: url("../webfonts/fa-solid-900.woff2") format("woff2");
  font-display: swap; /* <--- ова го додаваме */
}
@font-face {
  font-family: "Font Awesome 7 Brands";
  font-style: normal;
  font-weight: 400;
  src: url("../webfonts/fa-brands-400.woff2") format("woff2");
  font-display: swap; /* <--- ова го додаваме */
}

/* Контролирање на точките на слајдерот */


.swiper-pagination-bullet {
    width: 16px !important;
    height: 16px !important;
    margin: 0 5px !important;
    border-radius: 50%; /* кругови */
    background-color: #fff; /* пример боја, можеш да ја менуваш */
}


/*********************************/
.text-heading {
    font-family: serif !important;
}

.text-lg {
    font-size: 1.425rem !important;
}
	
/*--------------------------------------------------
5. НАВИГАЦИЈА ВО ПОСТ КРУГ СО РАЧИЊА  
--------------------------------------------------*/

.single .post-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0;
    padding-top: 15px;
    font-weight: 600;
    font-size: 17px;
	font-family: sans-serif;
}

.single .post-navigation a {
    color:  #cba747; /* Боја 1 */
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

.single .post-navigation a:hover {
    color: #666464; /* БОЈА 2 на ховер сива*/
}

/* Додавање на анимација за стрелки */
.single .post-navigation .nav-previous a:before,
.single .post-navigation .nav-next a:after {
    font-family: FontAwesome;
    transition: transform 0.3s ease;
    display: inline-block;
}

.single .post-navigation .nav-previous a:before {
    content: "\f053"; /* стрелка лево */
    margin-right: 8px;
    transform: translateX(0);
}

.single .post-navigation .nav-previous a:hover:before {
    transform: translateX(-5px);
}

.single .post-navigation .nav-next a:after {
    content: "\f054"; /* стрелка десно */
    margin-left: 8px;
    transform: translateX(0);
}

.single .post-navigation .nav-next a:hover:after {
    transform: translateX(5px);
}

/* Text alignment */
.single .post-navigation .nav-previous { text-align: left; }
.single .post-navigation .nav-next { text-align: right; }

.single .post-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 25px 0;
    padding-top: 5px;
}

.single .post-navigation a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #cba747; /* /* БОЈА 1 */
    color: #f9f9f9; /* Боја рачиња бела */
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.single .post-navigation a:hover {
    background-color: #2563EB; /* Боја 2*/
    color: #ffffff;
    transform: scale(1.02);
}

.single .post-navigation .nav-previous {
    text-align: left;
}

.single .post-navigation .nav-next {
    text-align: right;
}

.single .post-navigation a {
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
.single .post-navigation a:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}