/*
 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 */

:where(.wp-site-blocks *:focus) {
    outline-width: 1px;
    outline-style: solid;
    border-radius: 100px;
    
    outline-color: #ccc;
    outline-style:ridge;
}


/* ==========================================================================
   Material Design Inspired Filter Bar
   ========================================================================== */
/* ==========================================================================
   Segmented Buttons - Styling M3 Classes to Match Reference Image
   ========================================================================== */

/* --- Group Styling (Matching Image) --- */
.materi-segmented-button-group-m3 {
  display: inline-flex; /* Buttons in a row */
  width: auto; /* Span content width on desktop */
  max-width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.23); /* Visible outline from image */
  border-radius: 999px; /* Moderate rounding like image */
  overflow: hidden; /* Clip button edges/focus */
  margin-bottom: 1.5rem;
  box-sizing: border-box;
  /* REMOVED M3 padding: 3px; */
}

/* --- Button Styling (Matching Image) --- */
.materi-segmented-button-m3 {
  /* Reset */
  appearance: none;
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 8px 16px; /* Adjust padding as needed */

  /* Layout */
  flex-grow: 1;
  flex-basis: 0;

  /* Text */
  font-family: inherit;
  font-size: 0.7em; /* Adjust font size */
  font-weight: 500; /* Medium weight */
  color: #333; /* Default text color (adjust) */
  text-align: center;
  white-space: nowrap;
  cursor: pointer;

  /* Divider - ADDED based on image */
  border-left: 1px solid rgba(0, 0, 0, 0.23); /* Divider line like image */

  /* Interaction */
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  position: relative; /* Needed for z-index and focus */
  z-index: 1; /* Default stacking */

  /* REMOVED M3 high border-radius: 100px; */
}

/* Remove divider from the first button */
.materi-segmented-button-group-m3 > .materi-segmented-button-m3:first-child {
  border-left: none;
}

/* Hover State (Inactive) - State #2 in image */
.materi-segmented-button-m3:not(.is-active):hover {
  background-color: rgba(0, 0, 0, 0.04); /* Subtle hover */
}

/* Active (Selected) State - State #1 in image */
.materi-segmented-button-m3.is-active {
  /* Set background/color based on image */
  background-color: #e8e0ff; /* Light purple background (ADJUST HEX CODE) */
  color: #673ab7; /* Darker purple text (ADJUST HEX CODE) */
  font-weight: 600; /* Bolder text for active */
  z-index: 2; /* Bring active state above default */
  /* REMOVED M3 specific background/color logic */
}
/* Prevent hover style on active button */
.materi-segmented-button-m3.is-active:hover {
   background-color: #e8e0ff; /* Keep active background (ADJUST HEX CODE) */
}

/* Pressed State (While Clicking) - State #4 in image */
.materi-segmented-button-m3:active {
    background-color: #dcd4f8; /* Slightly darker/different shade for press (ADJUST HEX CODE) */
    z-index: 3; /* Above active state during press */
}

/* Focus State (Keyboard Nav) - State #3 in image */
.materi-segmented-button-m3:focus-visible {
  /* Using box-shadow to mimic the thicker outer ring */
  box-shadow: 0 0 0 2px #ffffff, /* Inner white space */
              0 0 0 4px #673ab7; /* Outer focus color ring (ADJUST HEX CODE) */
  z-index: 4; /* Highest priority for visibility */
  /* REMOVED M3 outline styles */
}
/* Hide focus effects when not using keyboard navigation */
.materi-segmented-button-m3:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}


/* --- Mobile Horizontal Scrolling (Unchanged Logic, Updated Classes) --- */
@media (max-width: 767px) { /* Adjust breakpoint */

  .materi-segmented-button-group-m3 {
    display: flex;
    width: auto;
    max-width: 100%;
    overflow-x: auto;
    /* Optional: Hide scrollbar */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .materi-segmented-button-group-m3::-webkit-scrollbar {
    display: none; height: 0; width: 0;
  }

  .materi-segmented-button-m3 {
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;
  }
}

/* ==========================================================================
   Material Design Inspired Skeleton Loader
   ========================================================================== */

.materi-skeleton {
  /* This class mainly acts as a marker.
     The grid layout comes from wp-block-post which is also on the <li> */
  vertical-align: top; /* Ensure consistent alignment within grid */
}

.materi-skeleton__card {
  background-color: #fff; /* Match card background or use #f5f5f5 if preferred */
  border-radius: 5px; /* Match your actual card's border-radius */
  padding: 0; /* Reset padding for skeleton internals */
  min-height: 100%; /* Match your actual card's min-height if set */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); /* Match card shadow */
  overflow: hidden; /* Important for animation */
  position: relative; /* Needed for the animation pseudo-element */
}

/* Base style for placeholder shapes */
.materi-skeleton__image,
.materi-skeleton__text {
  background-color: #e0e0e0; /* Material Design gray for placeholders */
  position: relative; /* Relative positioning for potential pseudo-elements */
  overflow: hidden; /* Clip the animation gradient */
}

/* Shimmer Animation */
.materi-skeleton__image::before,
.materi-skeleton__text::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%; /* Start off-screen */
  height: 100%;
  width: 150%;
  background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  animation: materi-skeleton-shimmer 1.5s infinite;
}

@keyframes materi-skeleton-shimmer {
  0% {
    left: -150%;
  }
  100% {
    left: 150%; /* Move across the element */
  }
}


/* Image Placeholder */
.materi-skeleton__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9; /* CRITICAL: Match your featured image aspect ratio */
  margin-bottom: 16px; /* Approximate space below image (adjust based on real card padding) */
  border-radius: 0; /* Or match image border-radius if different */
}

/* Text Placeholder */
.materi-skeleton__text {
  display: block;
  height: 1.2em; /* Approximate height of a line of text */
  border-radius: 4px; /* Rounded ends for text lines */
  margin: 0 16px 12px 16px; /* Side padding like real text, margin below */
}

/* Title Text Placeholder (typically wider) */
.materi-skeleton__text--title {
  width: 75%; /* Make title line shorter than full width */
}

/* Short Text Placeholder (e.g., for excerpt line or meta) */
.materi-skeleton__text--short {
  width: 50%;
  height: 0.9em; /* Make shorter lines slightly less tall */
  margin-bottom: 16px; /* Match bottom padding/margin of real card */
}

/* Hide the last line's bottom margin if needed */
.materi-skeleton__card > .materi-skeleton__text:last-child {
   margin-bottom: 16px; /* Ensure consistent bottom space */
}


/* ==========================================================================
   Material Design Inspired Empty State
   ========================================================================== */

.materi-empty-state {
  display: flex;
  flex-direction: column; /* Stack icon, message, action vertically */
  align-items: center; /* Center items horizontally */
  justify-content: center; /* Center items vertically (if container has height) */
  padding: 32px 16px; /* Generous padding */
  text-align: center;
  min-height: 450px; /* Give it some minimum height to fill space */
  width: 100%; /* Ensure it takes full width within its container */
  box-sizing: border-box;
  color: #757575; /* Use a muted gray for text/icons in empty state */
}

.materi-empty-state__icon {
  /* Assuming Material Icons Font is loaded */
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 64px; /* Large icon */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  margin-bottom: 16px;
  color: #bdbdbd; /* Lighter gray for the icon */
}

.materi-empty-state__message .materi-notice {
  /* Adjust notice styling when used inside empty state */
  box-shadow: none !important; /* Remove shadow */
  background-color: transparent !important; /* Remove background */
  padding: 0; /* Remove notice padding */
  margin-bottom: 24px; /* Space before action button */
  text-align: center;
}

.materi-empty-state__message .materi-notice__message {
   color: #555; /* Slightly darker text for readability */
   font-size: 1.1em; /* Slightly larger message text */
}

/* Basic Material Design Button Styles */
.materi-button {
  display: inline-block;
  font-family: inherit; /* Use theme font */
  font-size: 0.9em;
  font-weight: 600; /* Medium-bold */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  min-width: 64px;
  line-height: 1.75;
  text-align: center;
  vertical-align: middle;
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  box-sizing: border-box;
}

/* Text Button Style (Subtle) */
.materi-button--text {
  background-color: transparent;
  color: var(--wp--preset--color--primary, dodgerblue); /* Use theme primary color, fallback blue */
}
.materi-button--text:hover {
  background-color: rgba(0, 0, 0, 0.04); /* Subtle background on hover */
}
.materi-button--text:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary, dodgerblue);
    outline-offset: 2px;
    background-color: rgba(0, 0, 0, 0.04);
}
.materi-button--text:focus:not(:focus-visible) {
    outline: none;
}

/*
 * Style filter buttons for logged-out users to appear disabled.
 */
.user-is-logged-out .materi-segmented-button-group-m3 button.materi-segmented-button-m3[data-filter="enrolled"],
.user-is-logged-out .materi-segmented-button-group-m3 button.materi-segmented-button-m3[data-filter="not-enrolled"] {
    opacity: 0.5; /* Make them look faded */
    cursor: not-allowed; /* Indicate they are not clickable */
    pointer-events: none; /* Attempt to prevent mouse clicks from registering */
    /* You can add other styles to make them look more "grayed out" if needed */
    /* Example:
    background-color: #f0f0f0 !important;
    color: #a0a0a0 !important;
    border-color: #d0d0d0 !important;
    */
}

/* Optional: If your theme has specific hover styles for these buttons,
   you might want to explicitly disable or reset them for the "disabled" state. */
.user-is-logged-out .materi-segmented-button-group-m3 button.materi-segmented-button-m3[data-filter="enrolled"]:hover,
.user-is-logged-out .materi-segmented-button-group-m3 button.materi-segmented-button-m3[data-filter="not-enrolled"]:hover {
    /* Reset hover styles or ensure they still look disabled */
    /* Example: if hover usually changes background: */
    /* background-color: #f0f0f0 !important;  */
    /* opacity: 0.5; /* Maintain opacity on hover */
}

/* Optional: Contained Button Style (More Prominent) */
/*
.materi-button--contained {
  background-color: var(--wp--preset--color--primary, dodgerblue);
  color: var(--wp--preset--color--background, white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.materi-button--contained:hover {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  filter: brightness(95%);
}
.materi-button--contained:focus-visible {
    outline: 2px solid rgba(0,0,0,0.2);
    outline-offset: 1px;
}
.materi-button--contained:focus:not(:focus-visible) {
    outline: none;
}
*/

/* In style.css */

/* Hide the main Buttons Block initially */
.wp-block-buttons:has(#course-load-more-button) { /* More specific selector */
  /*display: none; */
   margin: 1.5rem auto; /* Add space above */
    text-align: center;
}

/* JS will remove display:none or add display:flex when needed via .show()/.hide() */

/* Keep loading state styles on the button itself */
#course-load-more-button.is-loading {
    opacity: 0.7;
    cursor: wait;
}
/* The .is-visible class on the button itself isn't strictly needed now */
/* if we are showing/hiding the parent .wp-block-buttons block */


/* Style for Load More button when finished/disabled */
#course-load-more-button.is-finished {
  background-color: #f5f5f5; /* Light gray background */
  color: #9e9e9e; /* Muted gray text */
  cursor: not-allowed;
  opacity: 0.8;
  /* Ensure hover/active states don't override */
  pointer-events: none; /* Prevent clicks */
}

/* Remove focus outline from finished button */
#course-load-more-button.is-finished:focus,
#course-load-more-button.is-finished:focus-visible {
    outline: none;
    box-shadow: none;
}


/* Pattern designs MK Edit */

/* backgrounds all containers */

.glow:after {
    background: linear-gradient(-45deg, #7b35ff, #a2284c 34%, #352792 67%, #ff8b79);
    background-size: 200% 200%;
    content: "";
    filter: blur(100px);
    height: 100%;
    left: 0;
    margin: 0 auto;
    opacity: .7;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1;
    transform: translate3d(0, 0, 0);
}

.glow {
	position: relative;
}

.glow img {
	position: relative;
	z-index: 5;
}

.glow .wp-block-columns {
    position: relative;
    z-index: 5;
}



/* --- Custom User Menu / Login Button (MUI-esque) --- */

/* General container for logged-in state */
.custom-user-menu {
    position: relative; /* For dropdown positioning */
    display: inline-block;
    vertical-align: middle; /* Aligns well with other inline header items */
}

/* Toggle button (containing avatar) */
.custom-user-menu-toggle {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    line-height: 1;
    transition: box-shadow 0.2s ease-in-out;
}

.custom-user-menu-toggle:focus,
.custom-user-menu-toggle:focus-visible {
    outline: 2px solid #0073aa; /* WordPress blue, or your theme's primary color */
    outline-offset: 2px;
    /* Optional: add a subtle shadow on focus too if it fits your MUI theme */
    /* box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.3); */
}

/* Avatar image */
.custom-avatar {
    width: 40px;  /* Match PHP size */
    height: 40px !important; /* Match PHP size */
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1px solid #e0e0e0; /* Softer border, MUI-like */
}

/* Dropdown menu */
.custom-user-menu-dropdown {
    display: none; /* Hidden by default, shown by JS */
    position: absolute;
    top: calc(100% + 8px); /* Below the toggle + small gap */
    right: 0;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px; /* MUI standard border-radius */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Softer, more modern MUI shadow */
    min-width: 180px;
    z-index: 1000;
    list-style: none;
    padding: 8px 0; /* Vertical padding for the dropdown box */
    margin: 0;
}

.custom-user-menu-dropdown li {
    margin: 0;
}

.custom-user-menu-dropdown li a {
    display: block;
    padding: 10px 16px; /* MUI menu item padding (slightly more vertical for touch) */
    text-decoration: none;
    color: #333333; /* Or your theme's text color for menus */
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.custom-user-menu-dropdown li a:hover,
.custom-user-menu-dropdown li a:focus {
    background-color: rgba(0, 0, 0, 0.04); /* MUI hover state (subtle grey) */
    color: #111; /* Darker text on hover */
    text-decoration: none;
}
.custom-user-menu-dropdown li a:focus {
    outline: none; /* Focus handled by background typically in MUI menus */
}


/* Login Button (when logged out) */
.custom-login-button {
    display: inline-block;
    padding: 10px 26px;
    background-color: #1976d2; /* MUI primary blue */
    color: #ffffff;
    text-decoration: none;
    border-radius: 24px;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02857em; /* MUI button letter spacing */
    /* box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); /* MUI button shadow */
    transition: background-color 0.2s ease-in-out, box-shadow 0.1s ease-in-out;
    vertical-align: middle; /* Aligns well with other inline header items */
}

.custom-login-button:hover,
.custom-login-button:focus {
    background-color: #1565c0; /* Darker blue on hover */
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2); /* MUI button hover shadow */
    color: #ffffff;
    text-decoration: none;
}
.custom-login-button:focus {
    outline: none; /* Focus state handled by shadow and bg color */
}


/* --- Responsive Adjustments for User Menu --- */
@media (max-width: 767.98px) {
    .custom-user-menu-dropdown {
        right: 10px;  /* Anchor to the right edge of the VIEWPORT (with a small gap) */
        left: auto;   /* Ensure left isn't also trying to position it */
        min-width: 200px; /* Give it a reasonable minimum width for touch */
        max-width: calc(100vw - 20px); /* Don't let it exceed viewport width (minus padding) */
    }
}

@media (max-width: 479.98px) {
    .custom-user-menu-dropdown {
       right: 5px;  /* Even smaller gap from screen edge */
        left: auto;   /* Anchor to both left and right edges of viewport (with small gap) */
        width: auto; /* This will make it stretch to fill the space between left and right */
        min-width: 200px; /* Allow it to be flexible */
        max-width: none; /* No longer needed if width is auto and anchored left/right */
        transform: none; /* Ensure no transform is interfering */
    }

    .custom-user-menu-dropdown li a {
        padding: 12px 16px; /* Even better tap targets */
    }
}



/*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%;
  }
}