/*
Theme Name: Beyond 'Biz' Experience Child
Theme URI: https://susanrobichaud.ca/
Description: The Beyond 'Biz' Experience Child Theme, created in collaboration with the Ephemeris Starter WordPress Theme, is designed exclusively for the Beyond 'Biz' Experience IMPACT Level Participants.
Author: Susan Robichaud
Author URI: https://susanrobichaud.ca/beyond-biz-experience-child-theme/
Template: ephemeris
Version: 1.0.0
Text Domain: beyondbizexperience-child
*/

    
/* ==========================================================================
   Notification Bar Styles
   ========================================================================== */

/* Wrapper for the notification bar (full width, no spacing) */
.beyondbiz-notification-wrapper {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible;
}

/* Main notification bar (flex layout, edge-to-edge) */
.announcement-bar {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Hide bar when toggled off */
.announcement-bar.is-hidden,
.beyondbiz-notification-wrapper.is-hidden {
    display: none;
}

/* Content container (flex, full width) */
.beyondbiz-announcement-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    width: 100%;
}

/* Notification text (vertically centered) */
.beyondbiz-notification-text {
    margin: 0;
    display: flex;
    align-items: center;
    line-height: 1.5;
}

/* Notification button (flex, inherits font size, smooth transition) */
.beyondbiz-notification-button {
    display: flex;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.3s ease;
    line-height: 1.5;
    font-size: inherit; /* Matches bar text size */
    /* margin-left: 12px;  Uncomment if you want space between text and button */
}

/* Close button (absolutely positioned, accessible) */
.announcement-bar .beyondbiz-close-button {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    color: #ffffff;
    border-color: inherit;
    border-radius: inherit;
    padding: 4px 8px;
    z-index: 10001;
    pointer-events: auto;
    /* Ensure aria-label="Close notification" is present in HTML for accessibility */
}

/* Hide old grid container/header if present */
.announcement-bar.grid-container,
.top-header {
    display: none;
    border: none;
    background: none;
    box-shadow: none;
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
}

.announcement-bar .beyondbiz-close-button {
        top: 8px;
        right: 8px;
        transform: none;
    }


/* Notification bar styles */
.notification-bar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.beyondbiz-notification-button {
    margin-left: 24px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: inherit;
}

/* Adding space betweet line of text and button and align vertically */

.notification-bar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.beyondbiz-notification-button {
    margin-left: 24px;
    margin-top: 10px;
    margin-bottom:10px;
    font-size: inherit !important;
}

/* Default: white X, no background, no border */

.announcement-bar .beyondbiz-close-button {
    background: none !important;
    border: none;
    color: #fff !important;
    font-size: 1.5em;
    padding: 0.25em 0.5em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border 0.2s;
}

/* On hover/focus: match the notification button style */

.beyondbiz-close-button:hover,
.beyondbiz-close-button:focus {
    background-color: #0a7996 !important;
    color: #fff !important;
    border-radius: 1px;
    border-width: 1px;
    border-style: solid !important;
    border-color: #fff !important;
}

/* ==========================================================================
  HEADER & NAVIGATION
   ========================================================================== */
   
.site-header {
    width: 100%;
    position: relative;
    z-index: 1000;
}

.site-main {
    margin-top: 0;
    padding-top: 24px;
}

.main-navigation .nav-menu {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}

/* ==========================================================================
   RESPONSIVE STYLES
   ========================================================================== */

#mobile-site-navigation.mobile-navigation.mobile-nav-trigger {
    display: none !important;
    }
    
    /* Hide menu on desktop */
    
@media (min-width: 769px) {
  #custom-mobile-nav,
  #custom-mobile-menu {
    display: none !important;
  }
}

/* Hamburger styles */
#custom-mobile-nav {
  position: fixed;
  top: 32px;
  right: 32px;
  z-index: 9999;
  cursor: pointer;
}

.custom-hamburger {
  width: 32px;
  height: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.custom-hamburger .bar {
  width: 100%;
  height: 4px;
  background: #555555;
  border-radius: 2px;
  transition: background 0.3s;
}

/* Mobile menu styles */
.custom-mobile-menu {
  display: none;
  position: fixed;
  top: 72px;
  right: 32px;
  background: #fff;
  border: 1px solid #ddd;
  padding: 16px;
  z-index: 9998;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.custom-mobile-menu.open {
  display: block;
}


/* Style the mobile menu list and links */
#custom-mobile-menu ul#menu-primary-menu.nav-menu {
    background: #fff;
    color: #555555;
    font-size: 18px;
    padding: 0;
    margin: 0;
    list-style: none;
}

#custom-mobile-menu ul#menu-primary-menu.nav-menu li a {
    color: #555555 !important;
    padding: 10px 0;
    display: block;
    text-decoration: none;
}

body.menu-open {
  overflow: hidden;
}

/* ==========================================================================
   Accessibility & Usability Suggestions
   ========================================================================== */
/*
- Ensure sufficient color contrast for text and button backgrounds.
- Add :focus styles for .beyondbiz-notification-button and .beyondbiz-close-button for keyboard navigation.
- Example:
.beyondbiz-notification-button:focus,
.announcement-bar .beyondbiz-close-button:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
*/