/*********************************************/
/*  theme.css		          			 		         */
/*-------------------------------------------*/
/*           This file is part of:           */
/*                 2ShineBS5                 */
/*            https://2shine.org/            */
/*-------------------------------------------*/
/*  Here you can override Bootstrap          */
/*  specific variables so they fit           */
/*  your needs.                              */
/*********************************************/

/* A list of all accessable variables can be found here */
/* https://getbootstrap.com/docs/5.3/customize/css-variables/#root-variables */

/* If the variables above don't fullfill your needs, use the docs */
/* https://getbootstrap.com/docs/5.3/customize/css-variables/#component-variables */

:root,
[data-bs-theme="default-theme"] {
  /* BS Main Colors */
  --bs-primary: #E23835;
  --bs-secondary: #386BB7;

  /* Background Color for the backmost level */
  --theme-backdrop-bg: $grey;

  /* Default Background-Color and Color */
  --bs-body-bg: #fff;
  --bs-body-color: #161615;
  
  /* Theme Classes */
  --theme-page-main-bg: var(--bs-body-bg);
  --theme-breadcrumb-bg: var(--theme-page-main-bg);
  --theme-footer-bg: var(--bs-primary);
  --theme-nav-bg: #fff;

  /* Override Link-Colors */
  --bs-nav-link-color: var(--bs-primary);
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--bs-body-color);

  /* Font Setting */
  --theme-font: "Manrope", Arial;
  --theme-font-headlines: var(--theme-font);
  --bs-body-font-family: var(--theme-font);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-h1-font-size: 2.5rem;
 
  /* Border Radius  */
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;

  /* Shadows */
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

  .breadcrumb {
    --bs-breadcrumb-font-size: 14px;
  }

  /* Override Main button styling*/
  .btn {
    padding: 0.8125rem 1.8125rem; 
    border-radius: 0;   
    text-transform: uppercase;
    border-color: transparent;
    color:#000; 
  }


  /* Main Button-Colors */
  .btn-primary {
    --bs-btn-color: #000;
    --bs-btn-bg: var($primary);
    --bs-btn-border-color: var(--bs-primary);
    
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 15%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 15%, #000);
    
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 15%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 15%, #000);
    
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);    
  }

 /* Override Bootstrap's .btn-outline-primary */
.btn-outline-primary {
  color: #000;                /* text color */
  border-color: #fed03d;       /* yellow outline */
  background-color: transparent; /* keep transparent */
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  color: #000;                /* keep same color */
  background-color: transparent; /* no background fill */
  border-color: #fed03d;       /* still yellow */
  box-shadow: none;           /* remove Bootstrap hover/focus glow */
}
  .btn-secondary {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--dnn-color-secondary);
    --bs-btn-border-color: var(--bs-secondary);

    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 15%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 15%, #000);
    
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 15%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 15%, #000);
    
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);    
  }

  .btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-secondary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-secondary);
    --bs-gradient: none;
  }

  .footer {
    --bs-link-color: var(--bs-white);
    --bs-link-hover-color: var(--bs-body-color);
  }
    
  .navbar-nav {
    --bs-nav-link-color: var(--bs-body-color); 
    --bs-nav-link-hover-color: var(--bs-primary);
    --bs-navbar-active-color: var(--bs-primary);
  }

  .table {
    --bs-table-bg: var(--bs-white);    
  }  
}