/*
Theme Name: Able Events
Theme URI: 
Author: Blue Studio
Author URI: 
Description: 
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: able-events
Tags: 
*/

/* =====================
   GLOBAL
   ===================== */
   a:hover{
       color: #3B1CB8 !important;
   }

   .wp-block-buttons a:hover{
       color: #ffffff !important;
       background-color: #15006B;
   }
    /* Oculta el SVG original */
    .wp-block-navigation__responsive-container-open svg {
        display: none;
    }
    
    /* Crea el icono con el propio botón */
    .wp-block-navigation__responsive-container-open {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        cursor: pointer;
        padding: 0;
        background: none;
        border: none;
    }
    
    .wp-block-navigation__responsive-container-open::before,
    .wp-block-navigation__responsive-container-open::after {
        content: '';
        display: block;
        width: 100%;
        height: 2px;
        background-color: currentColor;
    }
    
    /* Tercera barra con box-shadow */
    .wp-block-navigation__responsive-container-open::before {
        box-shadow: 0 8px 0 currentColor;
    }
    
    .wp-block-accordion-item:hover {
      transform: translateX(8px);
    }
    
    .is-open.wp-block-accordion-item:hover {
        transform: none !important;
    }
    
    .wp-block-accordion-item {
      transition-duration: .3s;
      transition-property: transform;
      transition-timing-function: ease-out;
    }
    
    .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
      text-decoration: none;
    }
    
   #stats-section h3 {
       font-size: 3.5rem;
   }

/* =====================
   TABLET (max 1024px)
   ===================== */
@media (max-width: 820px) {
    
}

/* =====================
   MOBILE (max 782px)
   ===================== */
@media (max-width: 782px) {
    
    .header-container .wp-block-site-logo .custom-logo {
        width: 170px;
    }
    .header-container {
        margin: 0 5vw !important;
    }
    .header-container .wp-block-site-logo {
        order: 1;
    }

    .header-cta {
        order: 2;
    }
    
    .header-cta .wp-block-button a {
        padding: 7px 20px;
    }

    .header-nav {
        order: 3;
    }
    
   h1.wp-block-heading{
       font-size: 3.5rem;
   }
   .wp-block-columns h1 {
       text-align: center;
   }

   .wp-block-columns h2 {
       text-align: center;
   }
   .wp-block-columns h6 {
       text-align: center;
   }
   .wp-block-columns p {
       text-align: center;
   }
   .wp-block-columns .wp-block-buttons {
       justify-content: center;
   }
   
   .wp-block-spacer {
       margin-block-start: 0px !important;
   }
   .wp-block-accordion p{
       text-align: left;
   }
   .wp-block-accordion p > *:last-child{
       margin-bottom: 3vh !important;
   }
   
   /* GS Logo Slider */
   .gs_logo_single--wrapper {
       padding: 0px !important;
   }
    .gs_logo_single {
      padding: 0px !important;
    }
    
   #hero-section.other-pages h1{
       font-size:4.5rem !important;
   }
   #hero-section.other-pages > *:nth-child(2) {
       padding: 0px !important;
   }
   #hero-section.other-pages > :first-child {
       padding: 0px !important;
   }
   #hero-section > *:first-child{
       order: 2;
       padding-top: 2vh !important;
       padding-right: 4vw !important;
       padding-left: 4vw !important;
   }
    .media-quotes .wp-block-group h2 {
       font-size: 1.7rem !important;
       text-align: left !important;
   }
   .media-quotes .wp-block-group {
       padding-right: 2.375em !important;
       padding-left: 2.375em !important;
   }
   #hero-section > *:last-child{
       order: 1;
   }
   #hero-section h3{
       font-size: 2.8rem;
   }

   #about-us-section > *:last-child{
    padding-top: 3vh !important;
    padding-right: 4vw !important;
    padding-left: 4vw !important;
   }
   #about-us-section{
    padding-bottom: 1.5rem !important;
   }
   #about-us-section h2, #about-us-section h6, #about-us-section p{
    text-align: left;
   }
   #support-section {
    padding-bottom: 0 !important;
   }
   #our-events p, #our-events h2, #our-events h6{
       text-align: left;
   }
  #our-events.wp-block-columns .wp-block-buttons {
    display: none;
  }
  #our-events.wp-block-columns .wp-block-column> *:last-child .wp-block-column {
    padding-bottom: 1.25em;  
  }
  #our-events .wp-block-column h4, #our-events .wp-block-column p {
      margin-block-start: 10px;
  }
   #our-story {
       padding-bottom: 1.5rem !important;
   }
   #our-story > *:last-child{
       padding-top: 3vh !important;
       padding-right: 4vw !important;
       padding-left: 4vw !important;
   }
   #our-story p, #our-story h2, #our-story h6{
       text-align: left;
   }
   #faqs {
       margin-block-start: 1.5rem !important;
   }
   #aspiration-section .wp-block-group {
       padding-top: 15%;
   }
   #aspiration-section .wp-block-columns h6 {
       width: 100%;
   }
  #aspiration-section .wp-block-columns .wp-block-buttons {
    width: 100%;
  }
  #promise {
    margin-block-start: 0px;
    padding-left: 4vw;
    padding-right: 4vw;
  }
  #ablefest-hero-image img{
        aspect-ratio: unset !important;
  }
  #ablefest-second-section {
      margin-block-start: 0 !important;
  }
  #ablefest-image-gallery{
      margin-block-start: 0px;
      padding-top: 2.5rem !important;
  }
  #ablefest-image-gallery img{
      aspect-ratio: 5 / 3 !important;
  }
  #ablefest-our-events{
      margin-block-start: 0px;
  }
  #ablefest-our-events > .wp-block-column{
      padding-bottom: 0px !important;
  }
  #ablefest-our-events div div:nth-child(2){
      padding-top: 1.5rem !important;
  }
  #ablefest-our-events h4{
    font-size: 2rem !important;
  }
  #ablefest-our-story{
      margin-block-start: 0px !important;
    margin-block-start: 0px;
    padding-left: 4vw;
    padding-right: 4vw;
  }
  #ablefest-our-story-gallery{
      padding-top: 0px !important;
  }
  #ablefest-our-story-gallery img{
      aspect-ratio: 5 / 3 !important;
  }
  #ablefest-our-people{
      padding-top: 0px !important;
  }
  #ablefest-our-people h4{
      font-size: 1.5rem !important;
  }
  #ablefest-our-people > .wp-block-column{
      padding-bottom: 0px !important;
  }
  #about-us-our-story, #about-us-our-story-images, #about-us-our-events, #about-us-quote, #about-us-mission, #about-us-vision{
    margin-block-start:-0px;
  }
  #about-us-our-story-images img {
      aspect-ratio: 1 / 1 !important;
      object-position: top center !important;
  }
  #ablefest-our-community{
    margin-block-start: 2em;
  }
  #all-events-hero-image img{
        aspect-ratio: unset !important;
  }
  #all-events-upcoming strong {
      font-size: 1.7rem !important;
  }
  #all-events-events {
      margin-block-start: 2rem !important;
  }
  #about-hero-image img{
      aspect-ratio: unset !important;
  }
  #contact-form {
      gap: 1vh !important;
  }
  #contact-quote-panel {
      margin-block-start: 1vh !important;
  }
  #contact-quote-panel h2{
      font-size: var(--wp--preset--font-size--x-large) !important;
  }
  #contact-quote-panel .Quote.panel {
      padding-top: 9% !important;
      padding-bottom: 9% !important;
  }
  .before-quote-p {
      margin-block-start: 1vh !important;
  }
  #contact-hero-image {
    margin-inline-end: 0em;  
  }
  #contact-how-to-support {
      margin-block-start: 0px;
  }
  #contact-how-to-support img {
      aspect-ratio: 1 / 1 !important;
  }
  #contact-how-to-support h4 {
      font-size: 1.7rem !important;
  }
  #contact-how-to-support #three-columns .wp-block-column {
      margin-bottom: 1.5rem;
  }
  .fill-the-form {
      padding-top: 1rem !important;
  }
    #fluentform_1 {
        width: 95% !important;
        margin: 2vh auto !important;
        
    }
    #fluentform_1 .ff-el-input--label {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    #fluentform_1 .ff-el-input--label label {
        display: block !important;
        text-align: center !important;
    }

    #fluentform_1 .ff-el-form-control {
        text-align: center;
    }

    #fluentform_1 .ff_submit_btn_wrapper {
        text-align: center !important;
        display: flex;
        justify-content: center;
    }
  

}

/* =====================
   FOOTER
   ===================== */
   
   footer a:hover{
       color: #fed2df !important;
   }