/*!
 * GLOBAL STYLES
 * - Variables (e.g., --brandBlue)
 * - Global typography and resets
 * - Shared component tweaks (e.g., testimonial arrows, spacing helpers)
 * - Global element selectors (e.g., img, body, a:hover)
 */


/* ================================================
    GLOBAL STYLE DEFINITIONS (applies site-wide)
    ================================================ */
 
 /* ========== CSS Variables ==========
    Custom brand colors available across styles
    Note: these have to be added to wordpress' internal
    CSS in the admin panel, or they won't work. 
 */
:root {
  --brandBlue: #1a75d1;
  --brandBlue02: #2F91ED;
  --brandBlue03: #10579e;
  --brandYellow: #e0ac00;
  --brandYellow02: #f2bb05;

}

/* Prevent logo distortion */
.site-logo img {
  max-width: 100%;
  height: auto;      /* preserve aspect ratio */
  object-fit: contain;
}


/* Desktop/tablet "Contact" button style */
#main-header .main-navigation > .primary-menu-container > ul > .menu-item:last-child > a {
  background: var(--brandBlue);
  color: #fff;
  font-weight: 500;
  padding: 7px 15px;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}

#main-header .main-navigation > .primary-menu-container > ul > .menu-item:last-child {
  margin-left: .75rem;
  margin-right: 15px;   /* separates from "Shop" */
}

/* Hover/focus */
#main-header .main-navigation > .primary-menu-container > ul > .menu-item:last-child > a:hover {
  background: var(--brandYellow);
  color: #fff;
}


/* Desktop dropdown menu base style */
#main-header .main-navigation ul {
  line-height: 2;
}

/* Desktop dropdown menu base style */
#main-header .main-navigation ul ul.sub-menu li a {
  background: var(--brandBlue03);   /* light background by default */
  color: #fff;
  font-size: 0.85rem;
  font-weight: 400;
  transition: background-color .25s ease, color .25s ease;
  text-transform: Capitalize;
}

/* Hover/focus state */
#main-header .main-navigation ul ul.sub-menu li a:hover {
  background: var(--brandBlue);
  color: #fff;
}














 /* ========== SEARCH RESULTS PAGE ==========
    Center-aligns pagination for cleaner layout
    when user performs a site search
 */
 body.search .pagination,
 body.search .nav-links {
   display: flex;
   justify-content: center;
   margin-top: 2rem;
 }
 
 
 /* ========== HEADER BUTTON TWEAKS ==========
    Adjusts padding on call-to-action button in header
    for better clickability and compact design
 */
 a.button.header-button.button-size-small.button-style-filled {
   padding: 5px 15px;
 }
 
 
  /* ========== TESTIMONIAL BLOCK ARROW ==========
    Changes the default arrow color to match brand blue
    on testimonial bubbles (Kadence block)
 */
 .kt-testimonial-style-bubble .kt-testimonial-text-wrap:after {
   border-top: 14px solid var(--brandBlue) !important;
 }
 


  /* ========== TESTIMONIAL BLOCKS ==========
     Fixes de-centering that was occurring (at least on mobile, possibly beyond that even if less noticeable)
     Testimonial blocks have 'testimonials' class added within block editor
  */
.testimonials ul {
  padding-left: 0 !important;
  list-style: none; /* if unwanted bullets are showing */
}





 
 
 /* ========== ACCORDION TOGGLE ICONS ==========
    Reduces line thickness and width on "+" and "–"
    icons for a cleaner look in accordions
 */
 .kt-accodion-icon-style-basic .kt-blocks-accordion-icon-trigger:before,
 .kt-accodion-icon-style-basic .kt-blocks-accordion-icon-trigger:after {
   height: 2px !important;
   width: 12px !important;
 }
 
 
 /* ========== BUTTON INTERACTIONS ==========
    On hover: 
    - change button text color to brand blue
    - animate right-facing arrow
 */
 a.kb-button.kt-button:hover .kt-btn-inner-text {
   color: var(--brandBlue);
 }
 a.kb-button.kt-button .kb-svg-icon-wrap {
   transition: transform 0.2s ease;
 }
 a.kb-button.kt-button:hover .kb-svg-icon-wrap {
   transform: translateX(8px); /* slide arrow to the right */
 }
 a.kb-button.kt-button {
   overflow: visible; /* ensures arrow isn't cut off */
 }
 
 
 /* ========== GALLERY IMAGE ASPECT RATIO ==========
    Forces all images in Kadence gallery blocks to
    maintain a 3:2 landscape aspect ratio
 */
 .kadence-blocks-gallery .kb-gallery-image img {
   aspect-ratio: 3 / 2;
   width: 100%;
   height: auto;
 }
 
 
/* ========== UTILITY CLASSES ==========
    Common helper styles for spacing & typography
*/
.hSpaceSmall  { padding: 0 5px; }       /* For tight inline spacing */
.hSpaceMedium { padding: 0 12px; }      /* For moderate inline spacing */
.pipe         { opacity: 0.5; padding: 0 10px; } /* Divider between links (e.g. Privacy | Terms) */
.sub          { font-size: 0.8em; }     /* Used for de-emphasized text/subtitles */
img.fullHeightGallery { height: 80vh; } /* For fullscreen visual impact on hero galleries */

.lightText h1,
.lightText h2,
.lightText h3 {
  color: #fff;
}
.darkText h2,
.darkText h3 {
  color: #2e2e2e;
}