/*--------------------------------------------------------------
1. Import Red Hat Display
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;600;700&display=swap');

/*--------------------------------------------------------------
2. CSS Variables
--------------------------------------------------------------*/
:root {
  /* Font families & weights */
  --font-sans: 'Red Hat Display', sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Base type scale */
  --fs-base: 1rem;
  --lh-base: 1.5;

  /* Colors */
  --fire-engine-red:    #d6251d;
  --red-pantone:        #ed3142;
  --light-red:          #ffdddc;
  --white:              #ffffff;
  --antiflash-white:    #f2f4f5;
  --platinum:           #dfdfdf;
  --silver:             #acacac;
  --eerie-black:        #232323;
  --brand-red: 			#C9221D;

  /* Link color */
  --color-link: var(--red-pantone);
}

// _variables.scss
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1300px,
  xxl: 1400px
);

// then import bootstrap
@import "bootstrap";


/*--------------------------------------------------------------
3. Base Typography
--------------------------------------------------------------*/
html {
  font-size: 100%;
}

body {
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--eerie-black);
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  color: var(--eerie-black);
  margin-top: 0;
  margin-bottom: 0.5em;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/*--------------------------------------------------------------
8. Universal Site Containers
--------------------------------------------------------------*/

/* 1. Base site-container: fluid up to 1160px, with 1rem gutters on mobile */
.site-container {
  width: 100%;
  max-width: 1920px;    
  margin: 0 auto;
  padding: 0 1rem;      
}

.site-container-1500 {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 1rem;      
}

.site-container-1000 {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;      
}

.site-container-1200 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;      
}

/* 3. Increase gutters at larger viewports */
@media (min-width: 576px) {
  .site-container,
  .site-container-1500, .site-container-1000, .site-container-1200 {
    padding: 0 2rem;
  }
}

@media (min-width: 1200px) {
  .site-container {
    padding: 0 33px;     
  }
  .site-container-1500, .site-container-1000, .site-container-1200 {
    padding: 0;          
  }
}

/*--------------------------------------------------------------
4. Typography Scale & Spacing (Desktop)
--------------------------------------------------------------*/
h1 {
  font-size: 60pt;
  line-height: 80pt;
  padding: 120px 0 30px;
  font-weight: var(--fw-bold);
}

h2 {
  font-size: 48pt;
  line-height: 64pt;
  padding: 90px 0 24px;
  font-weight: var(--fw-bold);
}

h3 {
  font-size: 36pt;
  line-height: 48pt;
  padding: 60px 0 21px;
  font-weight: var(--fw-semibold);
}

h4 {
  font-size: 24pt;
  line-height: 36pt;
  padding: 45px 0 18px;
  font-weight: var(--fw-semibold);
}

p {
  font-size: 16px;
  line-height: 30px;
  width: 80%;
  padding: 30px 0 21px;
}

.paragraph-highlight {
  font-size: 16pt;
  line-height: 30pt;
  padding: 30px 0 21px;
  text-transform: uppercase;
  color: var(--red-pantone);
}

/*--------------------------------------------------------------
5. Typography Scale & Spacing (Mobile)
--------------------------------------------------------------*/
@media (max-width: 767.98px) {
  h1 {
    font-size: 36pt;
    line-height: 48pt;
    padding: 60px 0 24px;
  }
  h2 {
    font-size: 30pt;
    line-height: 42pt;
    padding: 48px 0 21px;
  }
  h3 {
    font-size: 24pt;
    line-height: 30pt;
    padding: 36px 0 18px;
  }
  h4 {
    font-size: 18pt;
    line-height: 24pt;
    padding: 30px 0 21px;
  }
  p {
    font-size: 14pt;
    line-height: 21pt;
    padding: 24px 0 18px;
  }
  .paragraph-highlight {
    font-size: 14pt;
    line-height: 21pt;
    padding: 24px 0 18px;
  }
}

/* Extended margin-top utilities */
.mt-6  { margin-top: 4rem !important; }
.mt-7  { margin-top: 5rem !important; }
.mt-8  { margin-top: 6rem !important; }
.mt-9  { margin-top: 7rem !important; }
.mt-10 { margin-top: 8rem !important; }
.mt-11 { margin-top: 9rem !important; }
.mt-12 { margin-top: 10rem !important; }

/* Extended padding-top/bottom utilities */
.py-12 { padding-top: 10rem !important; padding-bottom: 10rem !Important }
.my-12 { margin-top: 10rem !important; margin-bottom: 10rem !Important }

/*--------------------------------------------------------------
6. Color Utility Classes
--------------------------------------------------------------*/
.text-fire-engine-red  { color: var(--fire-engine-red); }
.text-red-pantone      { color: var(--red-pantone); }
.text-light-red        { color: var(--light-red); }
.text-eerie-black      { color: var(--eerie-black); }

.bg-fire-engine-red    { background-color: var(--fire-engine-red); }
.bg-red-pantone        { background-color: var(--red-pantone); }
.bg-light-red          { background-color: var(--light-red); }
.bg-antiflash-white    { background-color: var(--antiflash-white); }
.bg-platinum           { background-color: var(--platinum); }
.bg-silver             { background-color: var(--silver); }
.bg-eerie-black        { background-color: var(--eerie-black); }

/*--------------------------------------------------------------
7. Buttons
--------------------------------------------------------------*/
.btn-sibo {
  --btn-arrow-w: 24px;
  --btn-arrow-h: 16px;
  --btn-text-slide: 1em;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  min-width: 214px;
  height: 60px;
  border: 1px solid var(--silver);
  border-radius: 4px;
  background-color: transparent;
  color: var(--eerie-black);
  text-decoration: none !important;
  cursor: pointer;
  overflow: visible;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 18px;
  line-height: 30px;
  transition: color .15s ease, border-color .15s ease;
}

.btn-sibo__text {
  display: inline-block;
  margin: 0 var(--btn-arrow-w) 0 0;
  transition: transform .15s ease, margin .15s ease .075s;
}

.btn-sibo::after,
.btn-sibo::before {
  content: '';
  position: absolute;
  top: 50%;
  width: var(--btn-arrow-w);
  height: var(--btn-arrow-h);
  background: url("../images/arrow-right.svg") no-repeat center/contain;
  transition: transform .15s ease, opacity .15s ease;
}

.btn-sibo::after {
  right: 24px;
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

.btn-sibo::before {
  left: 24px;
  transform: translateY(-50%) translateX(calc(-1 * var(--btn-arrow-w)));
  opacity: 0;
}

/* Base hover/focus (transparent variant) */
.btn-sibo:hover,
.btn-sibo:focus {
  background-color: transparent;
  border-color:    var(--silver);
  color:           var(--eerie-black);
}

.btn-sibo:hover .btn-sibo__text,
.btn-sibo:focus .btn-sibo__text {
  transform: translateX(var(--btn-text-slide));
  margin:    0 0 0 var(--btn-arrow-w);
}

.btn-sibo:hover::after,
.btn-sibo:focus::after {
  transform: translateY(-50%) translateX(var(--btn-arrow-w));
  opacity: 0;
}

.btn-sibo:hover::before,
.btn-sibo:focus::before {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

.btn-sibo:active {
  transform: translateY(1px);
}

/*--------------------------------------------------------------
7a. Button Variants
--------------------------------------------------------------*/
.btn-sibo--white {
  background-color: var(--white);
  border-color:     var(--silver);
  color:            var(--eerie-black) !important;
}
.btn-sibo--white:hover,
.btn-sibo--white:focus,.btn-sibo--white:active {
  border-color: var(--white);    background-color: var(--white) !important;
}
.btn-sibo--red {
  background-color: var(--brand-red);
  border-color:     var(--brand-red);
  color:            var(--white) !important;
  height: 46px;
}
.btn-sibo--red:hover,
.btn-sibo--red:focus {
  background-color: var(--brand-red);
  border-color:     var(--brand-red);
}


/* Breadcrumbs styling */
.breadcrumbs {
  background: none;
}
.breadcrumb {
  padding: 0;
  margin: 0;
  list-style: none;
}
.breadcrumb .breadcrumb-item {
    display: inline-block;
    font-size: 14px;
    line-height: 30px;
    text-decoration: underline;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  margin: 0 0.5rem;
  color: var(--silver);
}
.breadcrumb .breadcrumb-item a {
  color: var(--eerie-black);
  text-decoration: none;
}
.breadcrumb .breadcrumb-item a:hover {
  text-decoration: underline;
}
.breadcrumb .breadcrumb-item.active {
  color: var(--silver);
  pointer-events: none;
  text-decoration: unset;
}