/* ProcessFaq — frontend styles

 * Designed to override Bootstrap 3 panel chrome to match the dattyres.co.uk

 * reference: flat grey question rows with a + / − icon on the right.

 */



.faq-block {

    margin: 40px 0;

    font-family: 'Open Sans', Helvetica, Arial, sans-serif;

    color: #5a5a5a;

    

}

.faq-block .panel-group { 

    border: 1px solid #dddddd;;

}

.faq-block__title {

    color: #fe8100;

    font-size: 25px;

    line-height: 30px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin: 0 0 20px;

    padding-bottom: 10px;

}



/* Flatten BS3 panel chrome */

.faq-accordion.panel-group .panel,

.faq-accordion .panel-default {

    border: 0;

    border-radius: 0;

    box-shadow: none;

    margin: 0 !important;

    background: transparent;

}

.faq-accordion.panel-group .panel .panel-body {

    border-bottom: 1px solid #dddddd;



}

.faq-accordion.panel-group .panel:last-child .panel-body, 

.faq-accordion.panel-group .panel:last-child .panel-heading {

    border-bottom: 0;

}

/* Question row */

.faq-item .panel-heading {

    background: #e5e5e5;

    border: 0;

    border-bottom: 1px solid #dddddd;

    padding: 0;

    border-radius: 0;

    color: #808080;

    font-size: 16px;

}





.faq-item .panel-title { margin: 0; font-size: inherit; padding: 0px; }

.faq-item__toggle {

    display: block;

    padding: clamp(0.75rem, 0.656rem + 0.313vw, 0.938rem);

    padding-right: 50px;

    

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    position: relative;

    outline: 0;

}

.faq-item .panel-heading .faq-item__toggle {

    text-decoration: none !important;

    outline: none !important;

}

.faq-item .panel-heading .faq-item__toggle:not(.collapsed),

.faq-item .panel-heading .faq-item__toggle:hover {

    background: #e5e5e5;

    color: #5a5a5a;

}



.faq-item__toggle::-moz-focus-inner { border: 0; }



/* + / − icon on the right.

 * Bootstrap 3.0.0 (the version shipped in /site/templates/js/bootstrap.js)

 * does not update aria-expanded — it only toggles the .collapsed class on the

 * trigger. So drive the icon from .collapsed, not from aria-expanded. */

.faq-item__toggle::after {

    content: "\2212"; /* − when open (no .collapsed class) */

    position: absolute;

    right: 20px; top: 50%;

    transform: translateY(-50%);

    font-size: 20px;

    color: #fe8100;

    font-weight: 400;

    line-height: 1;

}

.faq-item__toggle.collapsed::after { content: "+"; }



/* Answer body */

.faq-item__body {

    padding: clamp(0.75rem, 0.656rem + 0.313vw, 0.938rem);

   color: #000;

    font-size: 14px;

    line-height: 1.6;

}

.faq-item__body p:last-child { margin-bottom: 0; }