/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/



/* Global link color */
a {
    color: var(--lt-blue); /* light blue */
}

/* On hover */
a:hover,
a:focus {
    color: var(--med-blue); /* slightly darker blue */
}

/* Wrapper */
.msi-faq-accordion-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

/* Each accordion item */
.msi-faq-item {
    margin-bottom: 14px;
    border-radius: 12px;
    overflow: hidden;
}

/* Toggle button (your clickable header) */
.msi-faq-toggle {
    width: 100%;
    padding: 18px 20px;
    border: none;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column; /* IMPORTANT for underline */
    align-items: flex-start;
    position: relative;
}

/* TOP ROW (Question X + Title) */
.msi-faq-top {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
}

/* Underline */
.msi-faq-top::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    border-radius: 2px;
}

/* Alternate colors: EVEN = dark / ODD = light */
.msi-faq-item:nth-child(even) .msi-faq-toggle {
    background: var(--lt-blue);
    color: #000;
    
}
.msi-faq-item:nth-child(odd) .msi-faq-toggle {
    background: var(--dark-blue);
    color: #fff;
}

/* EVEN = light background → dark arrow */
.msi-faq-item:nth-child(even) .msi-faq-arrow svg {
    fill: #1f1f1f;
}

/* ODD = dark background → white arrow */
.msi-faq-item:nth-child(odd) .msi-faq-arrow svg {
    fill: #ffffff;
}

/* Question numbering + title style */
.msi-faq-q {
    font-weight: 700;
    font-size: 1.56rem;
}

.msi-faq-title {
    font-size: 1.25rem;
    font-weight: 700;
}

/* Arrow container */
.msi-faq-arrow {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease;
}

/* SVG basics */
.msi-faq-arrow svg {
    width: 46px;
    height: 46px;
    transition: transform .25s ease, fill .25s ease;
}

/* Rotated when open */
.msi-faq-item.open .msi-faq-arrow svg {
    transform: rotate(180deg);
}

/* Content section */
.msi-faq-content {
    max-height: 0;
    overflow: hidden;
    background: var(--lt-grey);
    transition: max-height .7s ease;
}

.msi-faq-item.open .msi-faq-content {
    max-height: 500px;
}

.msi-faq-inner {
    padding: 20px;
}

/* TOP ROW (Question X + Title stacked vertically) */
.msi-faq-top {
    width: 100%;
    display: flex;
    flex-direction: column; /* STACK */
    align-items: flex-start;
    position: relative;
    padding-bottom: 10px;
    padding-right: 80px;
}

/* Underline */
.msi-faq-top::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
}

/* Wrapper around Question X */
.msi-faq-question-wrap {
    width: 100%;
    position: relative;
    padding-bottom: 10px;
}

/* UNDERLINE under Question X only */
.msi-faq-question-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
}

/* Color logic */
.msi-faq-item:nth-child(even) .msi-faq-question-wrap::after {
    background: var(--yellow);
}

.msi-faq-item:nth-child(odd) .msi-faq-question-wrap::after {
    background: var(--green);
}

/* Focus on dark background → light glow */
.msi-faq-item:nth-child(odd) .msi-faq-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--dark-blue);
}

/* Focus on light background → dark glow */
.msi-faq-item:nth-child(even) .msi-faq-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #000000, 0 0 0 6px var(--med-blue);
}



.msi-gallery .rl-gallery-item {
  border-radius: 16px;
  overflow: hidden;
}

.msi-gallery .rl-gallery-item a{
  display:block;
  overflow:hidden;
  border-radius:16px;
}

.msi-gallery .rl-gallery-item img{
  display:block;
  border-radius:16px;
  transition: transform .35s ease, filter .35s ease;
}

.msi-gallery .rl-gallery-item a:hover img{
  transform: scale(1.05);
  filter: brightness(.9);
}