/*
 Theme Name:   Momekh Theme One
 Theme URI:    https://momekh.com/design/wp-themes/
 Description:  Child theme for WP TT5.
 Author:       MK
 Author URI:   https://momekh.com/design/
 Template:     twentytwentyfive
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         block-theme, full-site-editing, two-columns, accessibility-ready
 Text Domain:  momekhthemeone
*/

/* Add your custom CSS styles below */


/*
 * TT5 Child Theme - Custom Navigation Focus Styles
 */
/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
  	border-radius: 24px;
}

/*
 * TT5 Child Theme - Custom Navigation Focus Styles (Corrected)
 */

/* Base style for navigation links */
.wp-block-navigation__container .wp-block-navigation-item a.wp-block-navigation-item__content {
    display: inline-block; /* Important for padding and dimensions to apply correctly */
    padding: 0.65em 1.5em;  /* Adjust padding for size */
    border-radius: 999px;   /* Creates the pill shape */
    text-decoration: none;  /* Remove underline if present */
    font-weight: 500;       /* MUI/Google often uses a medium font weight */
    line-height: 1.5;       /* Adjust for vertical centering if needed */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    /* Reset any default outline that might interfere if you're using box-shadow for focus */
    outline: 2px solid transparent;
    outline-offset: 2px;
    color: var(--wp--preset--color--contrast, #000); /* Use theme's contrast color or a fallback */
    background-color: transparent; /* Ensure no default background unless intended */
}

/* Focus state for navigation links */
.wp-block-navigation__container .wp-block-navigation-item a.wp-block-navigation-item__content:focus {
    color: #1a73e8;                             /* Google Blue - for text */
    background-color: #e8f0fe;                  /* Light Google Blue background for focus */
    outline: none;                              /* Remove default outline */
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.4); /* Google-style focus ring */
    text-decoration: none;
}

/* Hover state for navigation links */
.wp-block-navigation__container .wp-block-navigation-item a.wp-block-navigation-item__content:hover {
    color: #1765cc;                             /* Slightly darker Google Blue for text on hover */
    background-color: #f1f3f4;                  /* Light grey for hover, or use #e8f0fe like focus */
    text-decoration: none;
    /* You might or might not want the box-shadow on hover. Often, hover is just a background/color change. */
}

/* Active state (when the link is being clicked) */
.wp-block-navigation__container .wp-block-navigation-item a.wp-block-navigation-item__content:active {
    color: #1a73e8;
    background-color: #d2e3fc;                  /* Slightly darker blue for active state */
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.4); /* Keep focus ring for active state */
    text-decoration: none;
}

/* Styling for the current menu item (aria-current="page") */
/* Base style for current item - make it distinct if needed, but allow focus to override */
.wp-block-navigation__container li.current-menu-item > a.wp-block-navigation-item__content {
    /* Example: Slightly bolder or a different default background/color if you want
       the current item to look different even when not focused/hovered.
       Ensure it doesn't clash with your focus styles.
    */
    /* font-weight: 700; */
    /* background-color: #f0f0f0; */ /* A very light grey for current item background */
    /* color: var(--wp--preset--color--primary, #1a73e8); */ /* Example: Use primary theme color */
}

/* Ensure focus on the current menu item still uses the defined focus style */
.wp-block-navigation__container li.current-menu-item > a.wp-block-navigation-item__content:focus {
    color: #1a73e8;                             /* Google Blue - for text */
    background-color: #e8f0fe;                  /* Light Google Blue background for focus */
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.4); /* Google-style focus ring */
}

/* If you want the current item to *always* have a pill background, even when not hovered/focused: */
/*
.wp-block-navigation__container li.current-menu-item > a.wp-block-navigation-item__content {
    background-color: #e8f0fe;
    color: #1a73e8;
}

.wp-block-navigation__container li.current-menu-item > a.wp-block-navigation-item__content:focus {
    background-color: #d2e3fc; // Darken it slightly on focus
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.4);
}
*/


/*MUI design for boxes and paper, used in my-account page html for the time being */
/* Overall padding for dashboard */
.dashboard-content {
  padding: 2rem;
  background-color: #ffffff;
  font-family: 'Roboto', sans-serif;
}

/* Flex row for boxes */
.boxes-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Material box (Card-like) */
.material-box {
  background-color: #e3f2fd; /* very light MUI blue */
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
  flex: 1 1 300px;
  max-width: 48%;
  box-sizing: border-box;
  transition: box-shadow 0.3s ease;
}

.material-box:hover {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.material-box h2 {
  margin-top: 0;
  color: #1976d2;
}

.box-action {
  display: inline-block;
  margin-top: 1rem;
  color: #1976d2;
  text-decoration: none;
  font-weight: 500;
}

.box-action:hover {
  text-decoration: underline;
}

/* Paper-style component */
.material-paper {
  background-color: #f5f5f5; /* lightest gray */
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
}

/* Normal content area (no shadow, just spacing) */
.normal-content {
  padding: 1rem 0;
  color: #333;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .material-box {
    max-width: 100%;
    flex: 1 1 100%;
  }
}