/* ==============================
   Accordion Styles
   ============================== */

/* Hide accordion body by default */
.js-accordion-body {
  display: none;
}

/* Change cursor on hover for accordion headers */
.js-accordion-header:hover {
  cursor: pointer;
}

/* Accordion arrow animations */
.accordion__item > .accordion-header:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 16px;
  content: "\f077"; /* Down arrow */
  color: #000;
  float: right;
  position: relative;
  display: block;
  top: 2px;
  transition: 0.3s all;
  transform: rotate(-180deg);
  opacity: 100;
}

/* Rotate arrow when accordion is active */
.accordion__item.active > .accordion-header:after {
  transform: rotate(0deg);
}

/* ==============================
   Form & Dropdown Styling
   ============================== */

/* Remove default styles from select elements */
select {
  -webkit-appearance: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
  cursor: pointer !important;
}

/* ==============================
   Navigation & Active State Styles
   ============================== */

/* Active navigation link styles */
.w-nav-link.w--current,
.dropdown-active {
  color: #790B7E !important;
  background-color: #; /* Missing value - consider adding */
  border-radius: 8px;
}

/* Swap navigation item z-index */
.z-1 {
  z-index: 1;
}
.z-2 {
  z-index: 2;
}

/* Navigation transition effects */
.nav-container {
  transition: height 0.3s ease-in-out;
}

.mini-nav, .main-nav {
  transition: transform 0.3s ease-in-out, height 0.3s ease-in-out;
}

/* Hide mini navigation while keeping clicks unblocked */
.mini-nav.hidden {
  pointer-events: none;
}

/* ==============================
   Card & Link Animations
   ============================== */

/* Feature card animations */
.feature-card.cta .animated-link-text-and-right-icon-container {
  transition: transform 0.3s ease; /* Smooth transition for the child div */
}

.feature-card.cta .animated-link-icon-left,
.feature-card.cta .animated-link-icon-right {
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition */
}

/* Apply hover effects for screens wider than 1280px */
@media (min-width: 1280px) {
  .feature-card.cta:hover .animated-link-icon-left {
    opacity: 1; /* Appear on hover */
    transform: translateX(32px); /* Move into its normal position */
  }

  .feature-card.cta:hover .animated-link-text-and-right-icon-container {
    transform: translateX(32px); /* Slide right */
  }

  .feature-card.cta:hover .animated-link-icon-right {
    opacity: 0; /* Fade out */
  }
}

/* ==============================
   Miscellaneous Styles
   ============================== */

/* Hide embedded elements inside specific wrappers */
.wg-element-wrapper.sw1 > a .w-embed {
  display: none;
}

/* Show embedded elements when selected */
.wg-element-wrapper.sw1 > a.selected .w-embed {
  display: block;
}

/* Improve font rendering */
* {
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;
}

/* Blog card hover effect */
.blog-card:hover {
  background-color: #f2f2f2 !important;
}

/* Center align rich text */
.w-richtext-align-center {
  margin-right: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
}

/* Remove max-width from rich text figures */
.w-richtext figure {
  max-width: none !important;
}

/* Prevent tap highlight effect on mobile */
html {
  -webkit-tap-highlight-color: transparent;
}

/* Grid adjustments for sign-in links */
.signin-links ._1-column-gird {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto auto;
}

/* Interactive element animation */
a:hover, button:hover {
  transition: all 0.15s ease-in-out;
}

/* Nav element colours when on an image */
.shade-50 .link-text,
.shade-50 a:not(.wg-selector):not(.btn-square),
.shade-50 .glyph,
.shade-50 .nav-container .animated-link-container,
.shade-50 .nav-dropdown-toggle {color:white;transition:color 0.15s;}
.shade-50 .brand svg path,
.shade-50 .language-glyph svg path,
.shade-50 .link svg path {fill:white;transition:fill 0.15s;}

#body-lock.lock-scroll {
  overflow: hidden !important;
  height: 100svh !important;
  position: fixed !important;
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
}


/* Navigation Scroll Animation */
 .nav-container {
    transition: transform 0.3s ease;
    height: auto !important;
    overflow: visible;
  }

  .main-nav {
    transition: transform 0.3s ease;
    will-change: transform;
  }
  
  .main-background {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .main-background.visible {
    opacity: 1;
  }

  .main-nav .cakemail-logo {
    transition: width 0.3s ease;
  }

  .main-nav.nav-condensed .cakemail-logo {
    width: 96px !important;
  }

  /* Animate all .btn-square buttons inside .nav-account-buttons */
  .nav-account-buttons .btn-square {
    padding: 0.75em 1em;
    font-size: 1em;
    transition: padding 0.3s ease, font-size 0.3s ease;
  }

  .main-nav.nav-condensed .nav-account-buttons .btn-square {
    padding: 0.6em 0.75em;
    font-size: 0.75em;
  }
    .nav-account-buttons {
    padding: 1em;
    transition: padding 0.3s ease;
    gap: 0.5em;
  }

  .main-nav.nav-condensed .nav-account-buttons {
    padding: 0.5em;
    gap: 0em;
  }

/* ==============================
   Table of contents widget (moved from the three pasted <style> blocks on
   TOC posts, byte-identical across all three script variants - see
   tools/convert/fixtures/TOC-VARIANTS.md; the widget's server-side render is
   now layouts/shortcodes/toc.html + layouts/partials/toc-id.html)
   ============================== */

#toc{
    margin-left: 1em;
    width: 100%;
}

#toc .tocitem{
    padding: 0.25em 0.5em;
    border-radius: 4px;
    margin-left: 1em;
}

#toc ul{
    margin-bottom: 0;
}

#toc .tocitem *{
    font-family: 'Proxima Nova', Arial, sans-serif;
    font-size: 1.25rem;
    line-height: 150%;

}

#toc .tocitem:hover{
    background: rgba(0,0,0,0.10);
    text-decoration: underline;
}

#toc .tocitem.toc-h3{
    margin-left: 2em;
}

#toc .tocitem.toc-h4{
    margin-left: 2em;
}