/**
 * Root CSS variables for the SimpleBusiness WordPress theme.
 *
 * --lis1-logo-color:        Primary logo color used throughout the theme.
 * --lis1-background-color:  Default background color for main areas.
 * --lis1-selected-menu-color: Color for the selected menu item (logo color).
 * --lis1-hover-menu-color:  Color for menu item hover state (semi-transparent).
 * --lis1-separator-color:   Color for separators (logo color).
 * --lis1-content-color:     Default color for content backgrounds.
 *
 * These variables provide a centralized way to manage the theme's color
 * palette, ensuring consistency and simplifying future updates.
 */
 @import 'common.css';
:root {
  --lis1-logo-color: #44FF00;
  --lis1-background-color: lightgrey;
  --lis1-selected-menu-color: var(--lis1-logo-color);
  --lis1-hover-menu-color: #94f770;
  --lis1-hover-menu-color-solid: #44FF00;
  --lis1-separator-color: var(--lis1-logo-color);
  --lis1-content-color: whitesmoke;

  --sb-sub-menu-height: 40px;

  --sb-menu-font-size: 22px;
  --sb-sub-menu-hover-font-size: 26px;
  --sb-sub-menu-height: 30px;
  --sb-sub-menu-hover-height: 50px;
  --sb-sub-menu-font-size: 14px;
  --sb-menu-background-color: rgb(213, 213, 213);
  --sb-sub-menu-background-color: darkgrey;
}


/**
 * Sets the html and body elements to occupy the full viewport width and height,
 * and removes default margin. This ensures that the layout starts from the very
 * edge of the browser window, providing a clean slate for further styling.
 *
 * @selector html, body
 * @property {width} 100%   - Ensures elements span the full viewport width.
 * @property {height} 100%  - Ensures elements span the full viewport height.
 * @property {margin} 0     - Removes default browser margin for a flush layout.
 */

html, body {

  width: 100%;
  height: 100%;
  margin: 0;
}

body {

  background-color: var(--lis1-background-color);
}


.menu {
  
  display: flex;
}

.menu-item {
    
  user-select: none;    
}


/*
---header.php-------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
*/


/**
 * Container element that serves as the main wrapper for the page content.
 * 
 * Properties:
 * - height: 100%;      Ensures the wrapper takes the full height of its parent.
 * - width: 100%;       Ensures the wrapper takes the full width of its parent.
 * - display: flex;     Enables flexbox layout for its children.
 * - flex-direction:    Arranges child elements in a column, stacking them
 *   column;            vertically from top to bottom.
 */

#wrapper {
  height: 100%; 
  width: 100%;   
  display: flex;
  flex-direction: column;
}


/**
 * Styles for the #header element.
 *
 * - Sets the flex property to prevent the header from growing or shrinking,
 *   maintaining its natural size within a flex container.
 * - Adds a 4px solid border at the bottom of the header, using the color
 *   defined by the CSS variable --lis1-separator-color.
 */

#header {

  flex: 0 0 auto;
  border-bottom: 4px solid var(--lis1-separator-color);
}


/**
 * Styles for the #branding and sub elements.
 *
 * Defines the main branding area layout using CSS Grid.
 */
#branding {
    
  grid-area: left;
  display: grid;
  grid-template-areas:
          "left topright"
          "left middleright"
          "left bottomright";
  grid-template-columns: min-content max-content;
  grid-template-rows: auto auto 1fr;
  padding: 20px;
 
}

#site-icon {
  grid-area: left;
  padding: 10px;
}

#site-icon-img {
  height: 110px;
  width: auto;
}

#site-prefix {
  font-size: 14px;
  font-stretch: condensed;
  grid-area: topright;
  padding: 10px 0px 0px 0px;
}

#site-title {
  font-size: 50px;
  grid-area: middleright;
  padding: 0px 0px 4px 0px;
}

#site-title a{
  text-decoration: none;
  color: black;
}

#site-description {
  font-size: 14px;
  font-stretch: condensed;
  grid-area: bottomright;
  justify-self: end;

}


/**
 * Styles for the #top-menu element.
 *
 * - Assigns the menu to the 'topright' area of a CSS grid layout.
 * - Aligns the menu to the end (right side) of its grid area.
 * - Adds right padding of 15px to separate the menu from the edge.
 * - Removes default padding from the top, bottom, and left sides.
 */
#top-menu {
  
  grid-area: topright;
  justify-self: end;
  padding: 0px 15px 0px 0px;
}

#top-menu .top-menu-class {
  display: flex;
  justify-content: flex-end;
}

#top-menu .menu-item {
  padding: 10px 5px 5px 5px;
}

#top-menu li {
  display: flex;
  align-items: center;
}

#top-menu a {
  font-size: 14px;
  text-decoration: none;
  color: black;

}


/**
 * Styles for the #menu element.
 *
 * - Assigns the menu to the 'bottomright' area in a CSS grid layout.
 * - Uses flexbox to lay out child elements in a row.
 * - Horizontally aligns items to the start of the flex container.
 * - Vertically aligns items to the bottom of the flex container.
 */

#menu {
  grid-area: bottomright;
  display: flex;
  position:relative;
  /*
  justify-content: flex-start;
  align-items: flex-start;*/
}


#menu:has(.narrow-menu) ul {
    border: 1px solid #000;
    box-shadow: none;
    min-height: fit-content; 
    min-width: fit-content; 
}

#menu .menu-item {
  font-size: var(--sb-menu-font-size);
  font-weight: bolder;
  font-stretch: condensed;
  text-decoration: none;
  color: black;
  white-space: nowrap;
  padding: 14px;
  position:relative;
}

#menu:has(.narrow-menu) .menu-item {

  padding: 8px;
}

#menu .sub-menu .menu-item {
  font-size: var(--sb-sub-menu-font-size);

  padding: 9px;
}



#menu .menu a {

  text-decoration: none;
  color: black;

}

/*to verify... position and bottom might go in js*/
#menu:not(:has(.narrow-menu)) .menu {

  position:absolute;
  bottom:0px;
}

#menu .narrow-menu {

  background-color: var(--lis1-background-color);
  position:absolute;
  top:90%;
  z-index: 9999; 
}


#menu:not(:has(.narrow-menu)) .menu:has(.sub-menu):has(.current-menu-ancestor){

     bottom: calc(100% - var(--menu-height, 0px));
    --menu-height: calc(100% - var(--sb-sub-menu-height, 40px));
}


#menu .menu-item:not(.current-menu-item):not(.current-menu-ancestor):hover {
  background-color: var(--lis1-hover-menu-color);

}



#menu .current-menu-item,
#menu .current-menu-ancestor {

  background-color: var(--lis1-selected-menu-color);
  /*background: linear-gradient(to right, blue, lightblue);*/

}


#menu:not(:has(.narrow-menu)) .sub-menu 
{
  display: none; /* Hides sub-menus by default */
  position:absolute;
  border: none;
  padding: 0;

  background-color: color-mix(in srgb, var(--lis1-background-color) 75%, black);
}


#menu:has(.narrow-menu) .sub-menu 
{
  display: none; /* Hides sub-menus by default */
  position:unset;
  border: black 1px solid;
  padding: 0;
  background-color: color-mix(in srgb, var(--lis1-background-color) 75%, black);
}


#menu:not(:has(.narrow-menu)) .menu-item:not(.current-menu-ancestor):hover .sub-menu,
#menu:not(:has(.narrow-menu)) .menu-item:not(.current-menu-ancestor) .sub-menu:hover {
  display: block; 
  position:absolute;
  top:90%;
  left: -10px;
  
  background-color: var(--lis1-background-color);
  opacity: 100%;
  z-index: 9999; 
  border: #777 1px solid;
}

#menu .menu-item:not(.current-menu-ancestor) .sub-menu .menu-item {
  font-size: var(--sb-sub-menu-hover-font-size);
    
  z-index: 9999; 
}



#menu:has(.narrow-menu) .menu-item:not(.current-menu-ancestor):hover .sub-menu,
#menu:has(.narrow-menu) .menu-item:not(.current-menu-ancestor) .sub-menu:hover {
  display: block; 
  position: absolute; 
  top:90%;
  right: 0px;
  background-color: var(--lis1-background-color);
  opacity: 100%;
  z-index: 9999; 
}

/*

  zoom: 0.8;
  position:unset;

#menu .current-menu-ancestor > .sub-menu {
  display: flex;
  z-index: auto; 
}



  background-color: color-mix(in srgb, var(--lis1-hover-menu-color) 100%, transparent 0%);
#menu .menu-item:hover .sub-menu,
#menu .menu-item .sub-menu:hover {
  display: flex; 
  top: 100%; 
  right:  auto;
  left: 20px;
  top: 100%;
  background-color: var(--lis1-content-color);
  border: 1px solid var(--lis1-separator-color);
  padding: 10px;
  z-index: 9999; 
  opacity: 1;
  transform: none;  display: inline-block;
}*/
/* Add arrow to menu items with submenu */
#menu .menu-item-has-children > a::after {
  font-family: 'Material Symbols Outlined';
  content: "stat_minus_1";  
  display: inline-block;
  vertical-align: middle;   /* aligns with text baseline */
  line-height: 1; 
  margin-left: 6px;
  opacity: 0.6;
}



#menu .menu-item-has-children:hover > a::after {
  font-family: 'Material Symbols Outlined';
  content: "stat_minus_1";  
  opacity: 1;
}
#menu .current-menu-ancestor.menu-item-has-children > a::after {
  font-family: 'Material Symbols Outlined';
  content: "stat_minus_2";  
  opacity: 1;
}
/* Show submenu when parent is current ancestor */
#menu:not(:has(.narrow-menu)) .current-menu-ancestor > .sub-menu {
  
  display: flex;
  border: none;
  padding: 0;
  background-color: var(--sb-sub-menu-background-color);
  opacity: 100%;
  top: 100%;    
  font-size: var(--sb-sub-menu-font-size);
  z-index: auto; 
}
#menu:has(.narrow-menu) .current-menu-ancestor > .sub-menu {
  
  display: block;
  border: none;
  padding: 0;
  opacity: 100%;
  top: 100%;  
  z-index: auto; 
}


/* Show submenu when parent is current ancestor */
#menu .current-menu-ancestor > .sub-menu .current-menu-item{
  
  background-color: color-mix(in srgb, var(--lis1-selected-menu-color) 90%, black);
}


/* Hide all submenu items by default background-color: blue;
#menu .sub-menu .menu-item {
    display: none;
}
*/
/* 
#menu .sub-menu .current-menu-item {
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: var(--lis1-selected-menu-color);
    border-radius: 4px;
}
*/
/* Show all submenu items on hover */
#menu:not(:has(.narrow-menu)) .menu-item:hover .sub-menu .menu-item {
    display: block;
}
/**
 * Container element styling.
 *
 * This rule targets the main container of the layout, typically used to wrap
 * the primary content of the page. Adjust properties within this selector to
 * control the overall width, alignment, and spacing of the site's content area.
 */

#container {
  
  border-bottom: 4px solid var(--lis1-separator-color);
  background-color: var(--lis1-content-color);
  padding-top:40px;

  position: relative;
  flex: 1 1 auto; /* Allows the container to grow and shrink */
  overflow: auto;
}
/*padding: 0px 20px 20px 20px;*/
/*

#content {
  width:100%;
  height:100%;
}
*/
#content header h1 {
  position:absolute;
  background-color: var(--lis1-selected-menu-color);
  padding: 5px;
  font-size: 18px;
  font-weight: bolder;
  font-stretch: condensed;
  text-decoration: none;
  color: black;
  white-space: nowrap;
  top: 0px
}
/*

  left: -9999px;
  
#content header h1 {
  position: block; 
  display: inline-block;
  font-size: 18px;
  background-color: var(--lis1-selected-menu-color);
  font-weight: bolder;
  font-stretch: condensed;
  text-decoration: none;
  color: black;
  white-space: nowrap;
  left: -9999px;
  padding: 10px;
}



 background-color: var(--lis1-selected-menu-color);ute;
  left: -9999px;*/

/*
  display: flex;
---page.php---------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
*/




.entry-content {
  justify-content: center;
  /*font-size: 20px;*/
  padding: 20px;
}

.entry-content .wp-block-image {
  padding: 5px;
}

.entry-content .wp-block-group {
  padding: 20px;
}
/*
.entry-content ul {
  list-style-type: disc; 
}

.entry-content ul ul {
  padding-left: 20px !important;
  list-style-type: disc; 
}*/

/*
.entry-content ul, .entry-content li {
  font: initial !important;
}

.entry-content li {
  margin-bottom: 10px; 
}

.page .entry-content p {
  width: 100%;  
  max-width: 600px;

}*/

.post {
  padding: 20px;
  margin :10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.wp-element-caption {

  justify-content: flex-start;
  font-size: 10px;
}

.wp-element-caption a {

  color: black;
}

.wp-element-caption a:visited {

  color: gray;
}


/*
---footer.php-------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
*/

#footer {

  flex: 0 0 auto;
  padding: 10px;
  
  font-size: 10px;
}


/*
---simplebusiness_ui.js---------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
*/

.std-header {
  display: grid;        
  grid-template-areas:
          "left topright"
          "left bottomright";
  grid-template-columns: min-content auto;
  grid-template-rows: min-content 1fr;
}

.narrow-header { 
  grid-template-areas:
          "left topright"
          "bottomright bottomright";
  grid-template-columns: min-content auto;
  grid-template-rows: min-content auto;
    
}

.narrow-branding {
  transform: scale(0.5);
  transform-origin: top left;
  width: 180px;
  height: 90px;
}

.narrow-menu {
  
  display: none;
  position: absolute;
  right: 5px;
  background: white;
  list-style: none;
  padding: 10px;
  border: 1px solid #ccc;
}


/*.narrow-current-menu-item {
    
    
  display:block;
  top: 0px;
  left: 0px;
}
  position: fixed;
.narrow-menu .sub-menu{
  
   top: 0px;
  left: 0px;
}

/*
---simplebusiness_function.php--------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
*/

/**
 * Styles for the narrow screen menu button.
 *
 * - Removes all default styling from the element using `all: unset`.
 * - Hides the button by default with `display: none`.
 * - Sets the cursor to pointer to indicate interactivity.
 * - Applies automatic left margin to align the button to the right.
 *
 * Intended for use in responsive navigation menus, typically shown only on
 * smaller screens or when a menu toggle is needed.
 *
 *  Added by sbt_wp_nav_menu_fhook
 */
#menu-narrowscreen-button {
  all: unset; 
  display: none;
  cursor: pointer;
  margin-left: auto;
}

/**
 * Added by sbt_wp_nav_menu_fhook
 */
#menu-narrowscreen-span {
    
  font-size: 20px !important;
  display: none;
    
  margin-right: auto;
}

/**
* Added by stb_variation_checkout_link_shortcode
*/
.buynow-button {
    
  text-decoration: none;
  
  color: black;
  background-color: var(--lis1-background-color);
  
  border-radius: 5px;
  border: 1px solid #000;
  box-shadow: 3px 3px 5px 2px #777;
  padding: 8px;
  
  font-size: 10px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  
  text-align: center;
}

/**
* Added by stb_variation_checkout_link_shortcode
*/
.buynow-button-buynow {
    
  margin: 5px 0px 0px 0px;   
  font-size: 14px;
}


.widget-gap {
    
    gap: 10px;
}

.discret-visited a:visited {
    
    color:darkgray;
}

/*
---wordpress admin dashboard custom css classes---------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
*/

.account-menu-item a {
  display: block;
  width: 24px; 
  height: 24px;
  background-image: url('image/account-menu-item_64x64.png'); 
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
    
}

.logout-menu-item a {
  display: block;
  width: 24px; 
  height: 24px;
  background-image: url('image/logout-menu-item_64x64.png'); 
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
    
}

.cart-menu-item a {
  display: block;
  width: 24px;
  height: 24px;
  background: url('image/cart_64x64.png');
  background-size: contain;
  overflow: hidden;
}

.cart-menu-item span{
  display: none;
}

.shop-menu-item a {
  display: block;
  width: 24px;
  height: 24px;
  background: url('image/shop_64x64.png');
  background-size: contain;
  overflow: hidden;
}

.shop-menu-item span{
  display: none;
}

/*
---woocommerce------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------


.woocommerce div.product div.images {
    display: none !important;
}

.woocommerce ul.products li.product img {
    display: none !important;
}
*/

/*
---polylang---------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
*/

.pll-parent-menu-item {
  position: relative;
  font-size: 18px;
  font-weight: normal;
}

.pll-parent-menu-item ul {
  display: none;
  position: absolute;
  top: 100%; 
  left: 10px;
  background: white;
  list-style: none;
  padding: 10px;
  border: 1px solid #ccc;
  z-index: 9999;
}

/*
.url-preview-box {
  width: 100%;      
  height: 100%;     
  border: 1px solid #ccc;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.url-preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
 
}*/