/*
 Theme Name:   ADM- AllDietMeals
 Theme URI:    https://recipinit.com
 Description:  Default AllDietMeals theme
 Author:       BILAL CHAJIA
 Author URI:   https://bilalchajia.com
 Template:     generatepress
 Version:      1.0
*/


/* Global Variables with Responsive Sizing */

:root {
  /* Font fallback for typography */
  --font-fallback: BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

  /* ADM Colors (Branding) */
  --adm-color-primary: #000000;
  --adm-color-primary-text: #FFFFFF;
  --adm-color-accents: #ffdb3d;
  --adm-color-accents-text: #000000;
  --adm-color-background: #f5f2e5;
  --adm-color-background-text: #000000;
  --adm-color-links: #dd08a5;

  /* Responsive Spacing Variables using clamp() and calc() */
  --adm-spacing-xxxs: clamp(4px, calc(0.5vw + 4px), 8px);
  --adm-spacing-xxs: clamp(6px, calc(0.7vw + 4px), 12px);
  --adm-spacing-xs: clamp(8px, calc(0.9vw + 4px), 16px);
  --adm-spacing-s: clamp(10px, calc(1.1vw + 4px), 20px);
  --adm-spacing-m: clamp(12px, calc(1.3vw + 4px), 24px);
  --adm-spacing-l: clamp(14px, calc(1.5vw + 4px), 28px);
  --adm-spacing-xl: clamp(16px, calc(1.7vw + 4px), 32px);
  --adm-spacing-xxl: clamp(20px, calc(2vw + 4px), 44px);

  /* Responsive Font Size Scale using clamp() and calc() */
  --adm-font-s: clamp(16px, calc(1vw + 15px), 20px);
  --adm-font-m: clamp(20px, calc(1.2vw + 18px), 24px);
  --adm-font-l: clamp(24px, calc(1.5vw + 20px), 28px);
  --adm-font-xl: clamp(28px, calc(1.8vw + 22px), 32px);

}


/**End of Globale Variables **/

@media (max-width: 768px) {
    .inside-navigation {
        padding-top: 5px; /* Adjust values as needed */
    }

}




.separate-containers .inside-left-sidebar,.separate-containers .inside-right-sidebar {
    margin-top: 1px;
    margin-bottom: 1px
}
/* === General Styles === */
:root {
  --adm-primary-color: #4CAF50;
  --adm-text-color: #333;
  --adm-bg-color: #fff;
}

/* Ensure smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* === Header Container === */
.gb-element-c1e4b0b2 {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: var(--adm-bg-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* === Header Flex Layout === */
.gb-element-3aa142c1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
 
}

/* === Logo Styles === */
.is-style-default.wp-block-site-logo {
  display: flex;
  justify-content: center;
  align-items: center;
 
}
.is-style-default.wp-block-site-logo img {
  max-width: 60px;
  height: auto;
  transition: transform 0.3s ease;
}
.is-style-default.wp-block-site-logo:hover img {
  transform: scale(1.5);
}


/* === Search Button Styles === */
:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
    border: 1px solid #949494;
	border-radius: 8px;
    box-sizing: border-box;
    padding: 4px;
}
.wp-block-search {
  display: flex;
  align-items: center;
  justify-content: center;

}
.wp-block-search__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 2px solid var(--adm-primary-color);
  border-radius: 50%;
  padding: 0;
  transition: all 0.3s ease;
}
.wp-block-search__button svg {
  width: 20px;
  height: 20px;
  fill: var(--adm-primary-color);
}

/* Style the search input field */
.wp-block-search__input {
	line-height: .5;
  background-color: #f0f0f0;  /* Change this to your preferred background color */
  color: #333;  /* Change this to your preferred text color */
  border: 2px solid #ccc;  /* Optional: Adjust border color */
  padding: 0.4rem 2.5rem 0.4rem 0.75rem;
  border-radius: 8px;  /* Rounded edges */
  transition: all 0.3s ease;
}

/* Placeholder text color */
.wp-block-search__input::placeholder {
  color: #999;  /* Adjust placeholder text color */
}

/* When input is focused (clicked) */
.wp-block-search__input:focus {
  background-color: #ffffff;  /* Change to white or any color you want on focus */
  border-color: var(--adm-primary-color);  /* Use your primary color */
  outline: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}



/* === General Navigation Menu Styling === */


.main-nav {
  display: flex;
  justify-content: center; /* Center menu */
  align-items: center;
}

.menu {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  column-gap: 1.15rem; /* Space between menu items */
}

/* === Menu Links === */
.menu-item a {
  position: relative;
  color: #333; /* Default text color */
  text-decoration: none;
  font-weight: 300;
  transition: color 3s ease-in-out;
}

/* Hover Effect - Color Change */
.menu-item a:hover {
  color: #4CAF50; /* Change to primary color */
}

/* === Center-Out Underline Effect === */
.menu-item a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 3px;
  background: rgba(134, 252, 0, .6);;
  transition: width 0.4s ease-in-out, left 0.4s ease-in-out;
}

.menu-item a:hover::after {
  width: 100%;
  left: 0;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
   border-bottom: 2px;
   border-bottom-color: rgba(92, 163, 10, 0.75);
   color: rgba(92, 163, 10, 0.75);
}

.main-navigation .main-nav ul li a {
    padding-left: 10px;
    padding-right: 10px;
    line-height: 40px
}
.menu-bar-items {
	margin-left: 2rem;
}