/*
Theme Name: GeneratePress Custom
Theme URI: http://accessible.org/
Description: GeneratePress Custo  Theme
Author: Your Name
Author URI: http://example.com/
Template: generatepress
Version: 1.0.0
*/



.related-posts {
    margin: 20px 0;
}

.related-posts h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.related-posts ul {
    list-style: none;
    padding: 0;
}

.related-posts ul li {
    margin-bottom: 10px;
}

.related-posts ul li a {
    text-decoration: none;
    color: #333;
}

.related-posts ul li a:hover {
    text-decoration: underline;
}

#gp-search .gp-modal__overlay,
#gp-search .gp-modal__container {
    display: none;
}



/* Producst Alignment Fixes on the Shop Page for Accessible.org site */

.products {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .products .product {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 22% !important;
    box-sizing: border-box !important;
    margin-bottom: 20px !important;
  }
  
  .woocommerce-LoopProduct-link {
    flex-grow: 1 !important;
  }
  
  .add_to_cart_button {
    margin-top: auto !important;
    text-align: center !important;
  }



  
  /* Style for fixing the overlapping of the issues include coupon feild all input field on the Checkout field and all */

  .wc-block-components-text-input label {
    position: absolute !important;
    top: 0rem !important; /* Center the label vertically */
    left: 0rem !important; /* Adjust this value to move the label horizontally */
    padding: 0 0px !important;
    color: #000 !important;
    font-size: .7em !important;
    font-weight: 100 !important;
    pointer-events: none !important;
    transform: translateY(-50%) !important;
    transition: all 0.3s ease-in-out !important;
    background: transparent !important;
  }
/* Style the input field */
.wc-block-components-text-input input {
  border: 1px solid hsla(0, 0%, 7%, .8) !important;
  width: 100% !important;
  font-size: 1rem !important;
  padding: 0.5em 0.5rem !important; /* Adjust padding for 2em height */
  outline: none !important;
  color: #000 !important;
  background: transparent !important;
  box-sizing: border-box !important; /* Ensure padding and border are included in width */
  margin-top: 1rem !important; /* Move input field down */
  height: 3em !important; /* Set a fixed height */
}

/* Adjust the button styling */
body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link) {
  min-height: 2em !important; /* Match the height of the input field */
  line-height: 2em !important; /* Align text vertically within the button */
  padding: 0 1em !important; /* Adjust padding to match the input field's width */
  display: flex !important; /* Use flex to center content */
  align-items: center !important; /* Center text vertically */
  justify-content: center !important; /* Center text horizontally */
  box-sizing: border-box !important; /* Ensure padding and border are included in width */
}

/* Ensure the button has the same margin as the input field */
.wc-block-components-button:not(.is-link) {
  margin-top: 1rem !important;
  border-radius: 5px !important;
}

.wc-block-components-panel__button:focus {
  outline: none; /* Remove default outline */
  box-shadow: 0 0 0 2px #000; /* Create a focus effect using box-shadow */
  margin-bottom: 1em; /* Add extra space below the button when focused */
}
.components-base-control__label {
  position: absolute !important;
  top: 0rem !important; /* Center the label vertically */
  left: 0rem !important;/* Adjust this value to move the label horizontally */
  padding: 0 4px !important;
  color: #000 !important;
  font-size: .7em !important;
  font-weight: 100 !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
  transition: all 0.3s ease-in-out !important;
  background: transparent !important;
}

/* Style the input field */
.components-combobox-control__input {
  border: 1px solid hsla(0, 0%, 7%, .8) !important;
  width: 100% !important;
  font-size: 1rem !important;
  padding: 0.5em 0.5rem !important; /* Adjust padding for height */
  outline: none !important;
  color: 1px solid hsla(0, 0%, 7%, .8) !important;
  background: transparent !important;
  box-sizing: border-box !important; /* Ensure padding and border are included in width */
  margin-top: 1rem !important; /* Space above the input */
  height: 3em !important; /* Fixed height */
}

/* Adjust the button styling */

/* Ensure the Stripe button has the same margin as the input field */
.wc-block-components-text-input .stripe-gateway-stripelink-modal-trigger {
  display: inline-block !important; /* Align button horizontally */
  height: 40px !important; /* Match button height to input field */
  width: 64px !important; /* Set button width */
  background-color: transparent !important; /* Transparent background */
  border: none !important; /* Remove border */
  vertical-align: middle !important; /* Align button vertically with the input */
  cursor: pointer !important; /* Pointer cursor on hover */
  position: relative !important; /* Relative positioning for any fine-tuning */
  margin-left: -4rem !important;
}

.wc-block-components-address-form {
  padding-top: 1em !important; /* Add top padding */
}
  
/* Style for the address 2 toggle button */
.wc-block-components-address-form__address_2-toggle {
  background-color: #4f4f4f !important; /* Light grey background */
}

/* Hover effect to enhance button visibility */
.wc-block-components-address-form__address_2-toggle:hover {
  background-color: #005a87 !important; /* Darken background on hover */
}

.wc-block-components-address-form-wrapper .wc-block-components-text-input label {
  margin-top: 3px !important; /* Adjust as needed to ensure proper spacing */
}

.wc-block-components-address-form-wrapper .components-base-control__label
{
  margin-top: 3px !important;
}

ul.products li.product .price {
  color: #098700 !important;
}

.blog-table-container
{
  -webkit-overflow-scrolling: touch; /* Smooth scrolling for touch devices */
  overflow: auto; /* Allows scrolling when content overflows */
}

.blog-table-container:focus {
  outline: 3px solid #003f78;
}

.blog-table-container:focus:not(:focus-visible) {
  outline: none;
}

.blog-table-container:focus-visible {
  outline: 3px solid #003f78;
}

#wpcf7-f1011689-o1 {
  display: none; /* Hide the entire form container */
}

.site-content .content-area {
    width: 100% !important;
}


/* Pagination CSS */

.paging-navigation .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Add padding to prev and next links */
.paging-navigation .nav-links .prev,
.paging-navigation .nav-links .next {
  padding: 0 15px;
}

/* Style nav links */
.paging-navigation .nav-links a.page-numbers,
.paging-navigation .nav-links .current {
  line-height: 36px;
  min-width: 36px;
  margin: 0 4px;
  text-align: center;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
  border: 1px solid #ccc;
}

/* Style Current link */
.paging-navigation .nav-links .current {
  background-color: #002d78;
  color: #fff;
}

/* Style Nav link hover */
.paging-navigation .nav-links a.page-numbers:hover {
  border-color: #002d78;
}

/* Focus styles for interactive elements */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: 3px solid #002d78 !important;
    outline-offset: 4px;
    border-radius: 2px;
    transition: outline 0.1s ease-in-out;
}

/* Navigation styles */
.main-navigation a, 
.main-navigation .menu-toggle, 
.main-navigation .menu-bar-items {
    font-family: 'Space Mono', monospace;
    font-weight: lighter;
    font-size: 18px;
    letter-spacing: 0.5px;
}

/* Menu hover styles */
.menu-item a {
    font-size: 18px !important;
    color: #222229 !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
}

#menu-main-menu-1 li a:hover, 
#menu-main-menu li a:hover {
    background-color: #e0f4ff;
    border-radius: 4px;
    color: #004078;
    transform: scale(1.1) !important;
}

/* Current page item styles */
#menu-main-menu .current_page_item a, 
#menu-main-menu-1 .current_page_item a {
	padding-left : 55px;
    font-weight: regular;
    color: #002d78;
    text-decoration: underline;
    text-underline-offset: 8px;
    transform: scale(1.2) !important;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Mobile header styles */
#mobile-header .mobile-header-logo {
    padding: 10px 0 0 10px;
}

#mobile-header .menu-toggle {
    padding-top: 0px;
}

#mobile-header .main-nav {
    padding-top: 15px;
}

/* Focus styles for mobile menu */
#mobile-menu a:focus, 
#mobile-menu button:focus {
    outline: 2px solid #002d78;
    outline-offset: 2px;
}

/* Remove focus from parent elements */
#mobile-menu li:focus {
    outline: none;
}

/* Remove the default bullet point */

.simpletoc-list{
	margin-left : 10px;
}
.simpletoc-list li {
    list-style: none;
    padding-left: 30px; /* Add space for the SVG */
    position: relative;
}

/* Inject the SVG directly into the list */
.simpletoc-list li::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* SVG injected via data URL with color #2641b1 */
.simpletoc-list li::before {
    content: url('data:image/svg+xml;utf8,<svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="%232641b1" fill="%232641b1" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><line y2="12" x2="20" y1="12" x1="4"></line><polyline points="14 6 20 12 14 18"></polyline></svg>');
}

.simpletoc-list li a {
	text-decoration : none;
    color: #2641b1; 
}

.simpletoc-list li a:hover {
	text-decoration : underline;
    color: black; 
}