:root{
    /* Site Colours */
    --color-primary:#000;
    --color-primary-rgb: 0 0 0;
    --color-primary-alt:#262626;
    --color-secondary:#fff;
    --color-secondary-rgb:255 255 255;
    --color-secondary-alt:#f1f1f1;
    --color-accent:#BB1616;
    --color-accent-rgb: 87 22 22;
    --color-accent-alt:#9D111E;
    --color-accent-alt-2:#E51F1F;

    /* Text Colours */
    --color-body-text:var(--color-secondary);
    --color-secondary-text:var(--color-primary);
    --color-accent-text:var(--color-accent);
    --color-heading-text:var(--color-secondary);
    --color-heading-secondary:var(--color-primary);
    --color-heading-accent:var(--color-accent);
    --color-link-text:var(--color-secondary);
    --color-link-text-hover:var(--color-accent);
    --color-heading-shadow:var(--color-accent);

    /* Bacground colours */
    --color-bg: var(--color-primary);
    --color-bg-alt:var(--color-primary-alt);
    --color-bg-secondary:var(--color-secondary);
    --color-bg-secondary-alt:var(--color-secondary-alt);
    --color-bg-accent: var(--color-accent);
    --color-border:var(--color-accent);

    /* Header Colours */
    --color-header-bg: rgb(var(--color-primary-rgb)/0.6);
    --color-header-sticky-bg: var(--color-primary-alt);
    --color-header-link: var(--color-secondary);
    --color-header-link-hover: var(--color-accent);

    /* Footer Colours */
    --color-footer-bg: var(--color-primary-alt);
    --color-footer-text: var(--color-primary);
    --color-footer-heading: var(--color-primary);
    --color-footer-link: var(--color-primary);
    --color-footer-link-hover: var(--color-accent);


    /* Overlays */
    --colour-overlay:var(--color-primary-rgb);
    --color-content-overlay-darker: rgb(var(--colour-overlay)/0.8);
    --color-content-overlay-dark: rgb(var(--colour-overlay)/0.6);
    --color-content-overlay: rgb(var(--colour-overlay)/0.4);
    --color-content-overlay-mid-light: rgb(var(--colour-overlay)/0.25);
    --color-content-overlay-light: rgb(var(--colour-overlay)/0.1);

    /* Gradients */
    --colour-gradient:var(--color-primary-rgb);
    --gradient-01:linear-gradient(180deg, rgb(var(--colour-gradient)/1) 0%, rgb(var(--colour-gradient)/0.7) 20%, rgb(var(--colour-gradient)/0.7) 80%, rgb(var(--colour-gradient)/1) 100%);
    --gradient-02:linear-gradient(125deg, rgb(var(--colour-gradient)/0) 30%, rgb(var(--colour-gradient)/0.9));
    --gradient-03: radial-gradient(circle,rgb(var(--colour-gradient)/ 0.2) 0%, rgb(var(--colour-gradient)/ 1) 85%, rgb(var(--colour-gradient)/ 1) 100%);
    --gradient-04: linear-gradient(180deg,rgb(var(--colour-gradient)/ 0.0) 0%, rgb(var(--colour-gradient)/ 0.25) 65%, rgb(var(--colour-gradient)/ 1) 100%);
    --gradient-05: linear-gradient(45deg,rgb(var(--colour-gradient)/ 1) 0%, rgb(var(--colour-gradient)/ 0.5) 45%, rgb(var(--colour-gradient)/ 0.5) 65%, rgb(var(--colour-gradient)/ 1) 100%);
    --gradient-06:linear-gradient(235deg, rgb(var(--colour-gradient)/0) 30%, rgb(var(--colour-gradient)/0.9));
    --gradient-07:linear-gradient(180deg, rgb(var(--colour-gradient)/1) 0%, rgb(var(--colour-gradient)/0.65) 20%, rgb(var(--colour-gradient)/0.3) 50%, rgb(var(--colour-gradient)/0.65) 80%, rgb(var(--colour-gradient)/1) 100%);
    --gradient-08: radial-gradient(circle,rgb(var(--colour-gradient)/ 0.8) 0%, rgb(var(--colour-gradient)/ 0.5) 85%, rgb(var(--colour-gradient)/ 0) 100%);
    --gradient-09:linear-gradient(0deg, rgb(var(--colour-gradient)/0.8) 0%, rgb(var(--colour-gradient)/0.4) 20%, rgb(var(--colour-gradient)/0) 100%);

    --section:6rem;
}

@media screen and (max-width:1025px){
    :root{
        --section: 4rem;
    }
}

@media screen and (max-width: 769px){
    :root{
        --section:3.25rem;
    }
}

/* ------------- Theme Specific Styles --------------- */

/* Mega Menu */
.megamenu{
    height:100%;
    width:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color: #000000;
    transform: translateX(-110%);
    transition: transform 0.5s ease;
}

.heading.xl, .heading.text-2xl{font-style: italic;font-weight: 900; text-shadow: -4px 4px 0 var(--color-heading-shadow);}

/* buttons and icons */
.btn{background: var(--color-bg-accent); padding: var(--space-xs) var(--space-md); transition: var(--trans-default);}
.btn.small{padding: var(--space-2xs) var(--space-xs);}
.btn:not(.not-rounded){ border-radius: var(--radius-default);}
.btn-title{color: var(--color-body-text); font-family: var(--font-heading); text-transform: uppercase; font-size: var(--heading-sm); font-style: italic; font-weight: 600; letter-spacing: 1px; text-align: center; display: block; transition: var(--trans-default);}
.btn.sm .btn-title{font-size: var(--heading-xs);}
.btn:not(.w-100){display: inline-block; width:fit-content; max-width: 100%;}
.btn.w-100{display: block;}

.btn.secondary{
    background-color:var(--color-bg);
    color:var(--color-body-text);
    border:2px solid var(--color-body-text);
}

/* Activity Voucher*/
.act-vouch{background-color: var(--color-bg); border:solid 2px var(--color-border);}

.act-vouch.white{background-color: var(--color-bg-secondary-alt); color:var(--color-secondary-text); border:unset}
.act-vouch-clear{background-color: transparent;}

/* accordion */
.accordion-item{border-radius: var(--radius-default); overflow: hidden;}
.accordion-item + .accordion-item{margin-top: var(--space-xs);}
.accordion-title{background: var(--color-bg-accent); cursor: pointer;}
.accordion .accordion-title span{color: var(--color-heading-text);}
.accordion-content{background: var(--color-bg-alt); display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows var(--trans-default);}
.accordion-content .content{min-height: 0; visibility: hidden; transition: var(--trans-default);}
.accordion .control{
    width: 20px;
    height: 20px;
    position: relative;
    margin-left: 10px;
    min-width: 20px;
    transition: var(--trans-default);
}
.accordion .control > .line{
    background: var(--color-body-text);
}
.accordion .control > .line:nth-child(1){
    width: 100%;
    height: 4px;
    position: absolute;
    top: calc(50% - 2px);

}
.accordion .control > .line:nth-child(2){
    width: 4px;
    height: 100%;
    position: absolute;
    left: calc(50% - 2px);
}
.accordion .active .accordion-content{grid-template-rows: 1fr;}
.accordion .active .accordion-content .content{visibility: visible;}
.accordion .active .control{
    transform: rotate(45deg);
}
.accordion .active .accordion-title,
.accordion .accordion-title:hover{background: var(--color-bg-secondary);}
.accordion .active .control > .line,
.accordion .accordion-title:hover .control > .line{background: var(--color-link-text-hover);}
.accordion .active .accordion-title span,
.accordion .accordion-title:hover span{color: var(--color-link-text-hover)}
.accordion li a:hover{color: var(--color-link-text-hover)}

.accordion .map-rel.hover .accordion-title{
    background: var(--color-bg-secondary);
}
.accordion .map-rel.hover .control > .line{
    background: var(--color-accent-text);
}
.accordion .map-rel.hover .accordion-title span{
    color: var(--color-accent-text);
}

/* Internal Nav */
.internal-nav-link{
    transition: all 200ms;
    background-color: var(--color-bg-secondary);
    color: var(--color-accent-text);
    border: 2px solid var(--color-border);
    font-size: var(--heading-sm);
    padding: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-xs);
}
.internal-nav-link:hover{
    background-color: var(--color-bg-accent);
    color: var(--color-body-text);
}
.glass-effect{
    background: rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(2.2px);
    -webkit-backdrop-filter: blur(2.2px);
}

/*Search Styling*/
.cnt-sel{background-color: var(--color-bg-secondary-alt); color:var(--color-accent-text);}
.cnt-sel.selected{background-color:var(--color-bg-accent); color:var(--color-text);}


@media (hover: hover) and (pointer: fine) {
    .btn.secondary:hover{
        background-color:white;
    }
    .btn:hover{background: var(--color-bg-secondary);}
    .btn:hover .btn-title{color: var(--color-bg-accent);}
    .link-hover:hover .btn{background: var(--color-bg-secondary);}
    .link-hover:hover .btn-title{color: var(--color-bg-accent);}
    .link-hover:hover{background-color: var(--color-bg-alt)}
    .col-alt .btn:hover{background: var(--color-bg);}
    .col-alt .btn:hover .btn-title{color: var(--color-heading-text);}
    .button:hover{background: var(--color-bg-secondary);}  
    .button.border:hover{border: 2px solid var(--color-border);} 

    a:hover .btn-small{
        background-color: white;
    }

    .shadow:hover{ box-shadow: var(--color-bg-accent) 0px 13px 27px -5px, var(--color-bg-accent) 0px 8px 16px -8px;}
}