/*
* =============================
* === Variables ===
* =============================
*/

:root {
  --primary: #af35a4;
  --secondary: #ff9000;
  --success: #16a085;
  --danger: #c0392b;
  --warning: #ff6702;
  --info: #2980b9;

  --white: #ffffff;
  --extralight: #f4f4f4;
  --light: #e5e5e5;
  --medium: #596373;
  --neutral: #6b778a;
  --dark: #212529;
  --black: #000000;
  --transparent: #ffffff00;

  --textshadow-light: 0px 4px 12px rgba(255, 255, 255, 0.5);
  --textshadow-dark: 0px 4px 12px rgba(0, 0, 0, 0.5);

  --primarygradient: linear-gradient(91.97deg, #af35a4 0.39%, #ff9000 99.13%);
  --darkgradient: linear-gradient(91.97deg, #af35a4 0.39%, #4a0544 99.13%);

  --gutter-x: 3rem;
  --bs-gutter-x: 3rem;
}

/* Override bootstrap column spacing */
@media screen and (max-width: 576px) {
  .container-fluid > .container {
    padding: 0;
  }
}

@media screen and (min-width: 576px) {
  .row {
    margin-right: calc(-0.5 * var(--gutter-x));
    margin-left: calc(-0.5 * var(--gutter-x));
  }

  .row > * {
    padding-right: calc(var(--gutter-x) * 0.5);
    padding-left: calc(var(--gutter-x) * 0.5);
  }
}

/* Overriding Bootstrap Text Colour Variables */

.text-dark-heading {
  color: var(--bodyDarkHeadingColour);
}

.text-light-heading {
  color: var(--bodyLightHeadingColour);
}

.text-primary {
  color: var(--primary);
}

.text-secondary {
  color: var(--secondary);
}

.text-success {
  color: var(--success);
}

.text-danger {
  color: var(--danger);
}

.text-warning {
  color: var(--warning);
}

.text-info {
  color: var(--info);
}

.text-info {
  color: var(--info);
}

.text-white {
  color: var(--white);
}

.text-light {
  color: var(--light);
}

.text-medium {
  color: var(--medium);
}

.text-dark {
  color: var(--dark) !important;
}

.text-body {
  color: var(--black);
}

/* Overriding Bootstrap Background Colour Variables */
.bg-primary {
  background-color: var(--primary) !important;
}

.bg-secondary {
  background-color: var(--secondary) !important;
}

.bg-success {
  background-color: var(--success) !important;
}

.bg-danger {
  background-color: var(--danger) !important;
}

.bg-warning {
  background-color: var(--warning) !important;
}

.bg-info {
  background-color: var(--info) !important;
}

.bg-transparent {
  background-color: var(--transparent);
}

/* Background Shades */
.bg-white {
  background-color: var(--white) !important;
}

.bg-extralight {
  background-color: var(--extralight);
}

.bg-light {
  background-color: var(--light) !important;
  color: var(--dark) !important;
}

.bg-medium {
  background-color: var(--medium);
  color: var(--white);
}

.bg-dark {
  background-color: var(--dark) !important;
  color: var(--white) !important;
}

.bg-black {
  background-color: var(--black);
}

.bg-primarygradient {
  background-image: var(--primarygradient);
  color: var(--white);
}

.bg-primarydarkgradient {
  background-image: var(--darkgradient);
  color: var(--white);
}

/* Overriding Bootstrap Button Colour Variables */
.btn-default,
.btn-default:focus {
  background-color: var(--bodyDarkTextLinkColour);
  color: var(--white);
  border-color: var(--bodyDarkTextLinkColour);
}

.btn-default:hover {
  color: var(--white);
  background-color: var(--bodyDarkTextLinkHoverColour);
  border-color: var(--bodyDarkTextLinkHoverColour);
}

.btn-primary,
.btn-primary:focus {
  color: var(--white);
  background: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover {
  color: var(--black);
  background: var(--secondary);
  border-color: var(--secondary);
}

.btn-secondary {
  color: var(--black);
  background: var(--secondary);
  border-color: var(--secondary);
}

.btn-secondary:hover {
  color: var(--white);
  background: var(--primary);
  border-color: var(--primary);
}

.bg-secondary .btn-primary:hover {
  background: var(--white);
  border-color: var(--white);
}

.bg-primary .btn-secondary:hover {
  background: var(--dark);
  border-color: var(--dark);
}

.btn-success {
  background: var(--success);
  border-color: var(--success);
}

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
}

.btn-warning {
  background: var(--warning);
  border-color: var(--warning);
}

.btn-info {
  background: var(--info);
  border-color: var(--info);
}

.btn-light {
  background: var(--light);
  border-color: var(--light);
}

.btn-light:hover {
  color: var(--white);
  background: transparent;
  border-color: var(--white);
}

.btn-dark {
  background: var(--dark);
  border-color: var(--dark);
}

.btn-dark:hover {
  color: var(--black);
  background: transparent;
  border-color: var(--black);
}

.btn-black {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.btn-black:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

.btn-white {
  background: var(--white);
  border-color: var(--white);
  color: var(--primary);
}

.btn-white:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.btn-edit {
  background-color: var(--medium);
  color: var(--white) !important;
}

.btn-edit:hover {
  background-color: var(--dark);
  color: var(--white) !important;
}

/* Outlined Buttons */
.btn-outline-default,
.btn-outline-default:focus {
  color: var(--bodyDarkTextLinkColour);
  border-color: var(--bodyDarkTextLinkColour);
}

.btn-outline-default:hover {
  color: var(--white);
  background-color: var(--bodyDarkTextLinkColour);
  border-color: var(--bodyDarkTextLinkColour);
}

.btn-outline-primary,
.btn-outline-primary:focus {
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary:hover {
  color: var(--white);
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-secondary,
.btn-outline-secondary:focus {
  color: var(--secondary);
  border-color: var(--secondary);
}

.btn-outline-secondary:hover {
  color: var(--black);
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.btn-outline-success {
  color: var(--success);
  border-color: var(--success);
}

.btn-outline-danger {
  color: var(--danger);
  border-color: var(--danger);
}

.btn-outline-warning {
  color: var(--warning);
  border-color: var(--warning);
}

.btn-outline-info {
  color: var(--info);
  border-color: var(--info);
}

.btn-outline-white {
  color: var(--white);
  border-color: var(--white);
}

.btn-outline-white:hover {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--primary);
}

.btn-outline-light {
  color: var(--light);
  border-color: var(--light);
}

.btn-outline-dark {
  color: var(--dark);
  border-color: var(--dark);
}

.btn-outline-black {
  color: var(--black);
  border-color: var(--black);
}

.btn-outline-black:hover {
  background-color: var(--black);
  border-color: var(--black);
  color: var(--white);
}

/* Social Media Brand Colours */

.brand-colour .fa-facebook,
.brand-colour .fa-square-facebook {
  color: #3b5998;
}

.brand-colour .fa-x-twitter,
.brand-colour .fa-square-x-twitter {
  color: #000000;
}

.brand-colour .fa-linkedin,
.brand-colour .fa-linkedin-square {
  color: #007bb6;
}

.brand-colour .fa-envelope-square {
  color: var(--primary);
}

.brand-colour .fa-instagram,
.brand-colour .fa-square-instagram {
  color: #d6249f;
}

.brand-colour .instagram-bg {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  background: -webkit-radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
  background-clip: text;
  -webkit-background-clip: text;
}

.brand-colour .fa-pinterest,
.brand-colour .fa-square-pinterest {
  color: #bd081b;
}

.brand-colour .fa-youtube,
.brand-colour .fa-square-youtube {
  color: #dc2825;
}

.brand-colour .fa-vimeo,
.brand-colour .fa-vimeo-v {
  color: #19b1e3;
}

.fa-square {
  color: white;
}

.brand-colour .fa-square-facebook:hover,
.brand-colour .fa-instagram:hover,
.brand-colour .fa-square-pinterest:hover,
.brand-colour .fa-square-x-twitter:hover,
.brand-colour .fa-square-youtube:hover,
.brand-colour .fa-linkedin:hover,
.brand-colour .fa-vimeo:hover {
  color: var(--neutral);
}