:root {

  --bg-img: url("../assets/img/nav/header-ari-bg-long2.jpg");


  --bs-body-color: #2f2a27; /* CA dark grey */
  --bs-body-bg: #f2f2ee; /* Creme grey */

	
	/* CA color pallett */
  --bs-gray-dark: #2f2a27; /* CA dark grey */
  --ca-pink: #f7cec9;	/* CA rosa */
  /* --ca-petrol: #659799;	/* CA petrol */
  /* --ca-petrol-light: #d5e2e3;	/* CA petrol light */	
  /* --ca-moss: #5a7d76; /* CA mossgrön */
  /*--ca-gold: #c5a16c; /* CA gold */
  /* --bs-link-color: #5a7d76; /* CA moss */	
  /* --bs-link-hover-color: #2f2a27; /* CA dark grey */
	
	--ca-petrol: #537e7f; /* mörkare petrol */
	--ca-dark-blue: #002333;
	--ca-light-yellow: #fdda8f;
	--ca-dark-yellow: #d9aa00;
	--ca-dark-green: #006c1c;
	--ca-light-green: #bed570;
	--ca-light-red: #fd5200;
	--ca-dark-red: #e20001;
	--ca-beige: #d3be7c;
	--ca-brown: #865033;
	--ca-dark-red: #4d050e;
	
   --bs-link-color: #537e7f; /* dark blue */	
   --bs-link-hover-color: #537e7f; /* dark blue */	

}

#mainNav .navbar-brand img {
    /* height: 3.5rem; */
}

#mainNav .navbar-brand {
    color: #ffffff;
	font-family: "Playfair Display", serif;
    font-weight: 200;
	font-style: italic;
    letter-spacing: 0.0625em;
    text-transform: none;
	font-size: medium;
}

/* Main nav sticky */
.stickyMenu {
	background-color: var(--bs-gray-dark) !important;
	position: sticky;
  }

#mainNav .navbar-nav .nav-item .nav-link {
    color: #fff; /* Ensure the default color is white */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    text-decoration: none; /* Remove any default underline */
	text-transform: uppercase;
}

#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link:focus {
    color: #fff; /* Keep text color white on hover */
    text-decoration: underline; /* Add underline on hover */
}

/* If you want to style the active link differently */
#mainNav .navbar-nav .nav-item .nav-link.active {
    color: #fff; /* Keep text color white for active link */
    text-decoration: underline; /* You can choose to keep or remove this */
}

.navbar-dark .navbar-toggler {
     color: rgba(255,255,255,1); /* Gör hamburgarmenyn vit */
     border-color: rgba(255,255,255,0); 
}



/* CA Images */

.imageborder{

  border: 10px solid #fff;

}


.figure-caption {
  font-size: 0.875em;
  color: var(--bs-gray-dark);
  background-color: #fff;
  padding-left: 10px;
  padding-bottom: 10px;
}


/* Header Image 

header.masthead {

  background-position: 50% 50%;

}

@media (max-width: 1600px) {
	  header.masthead {
    background-position: 50% 50%;
  }
}	

*/

@media (max-width: 576px) {
  .CAmobilemargin {
    width: 95%;
  }
}


/* Carina Ari Colors */

.bg-pink {
  background-color: var(--ca-pink);	
}
.bg-petrol {
  background-color: var(--ca-petrol);	
}
.bg-light-yellow {
  background-color: var(--ca-light-yellow);	
}
.bg-dark-yellow {
  background-color: var(--ca-dark-yellow);	
}
.bg-dark-green {
  background-color: var(--ca-dark-green);	
}
.bg-light-green {
  background-color: var(--ca-light-green);	
}
.bg-brown {
  background-color: var(--ca-brown);	
}
.bg-beige {
  background-color: var(--ca-beige);	
}
.bg-dark-red {
  background-color: var(--ca-dark-red);	
}
.bg-darkgrey{
  background-color: var(--bs-gray-dark);
}



.text-darkgrey{
  color: var(--bs-gray-dark);
}
.text-pink {
  color: var(--ca-pink);
}
.text-petrol {
  color: var(--ca-petrol);
}
.text-light-yellow {
  color: var(--ca-light-yellow);	
}
.text-dark-yellow {
  color: var(--ca-dark-yellow);	
}
.text-dark-green {
  color: var(--ca-dark-green);	
}
.text-light-green {
  color: var(--ca-light-green);	
}
.text-brown {
  color: var(--ca-brown);	
}
.text-beige {
  color: var(--ca-beige);	
}

.bg-petrol a:hover {
    color: var(--ca-light-yellow) !important; /* Using Bootstrap variable for consistency */
    text-decoration: underline !important;
}

/* If you need to override any other styles, you might need to increase specificity */
.bg-petrol a.text-light-yellow:hover {
    color: var(--ca-light-yellow) !important;
    text-decoration: underline !important;
}





/* AI menu */

#mainNav .dropdown-menu {
    background-color: var(--bs-gray-dark);
    border: none;
}

#mainNav .dropdown-item {
    color: #fff;
    font-family: var(--bs-body-font-family);
    font-size: 0.95rem;
    letter-spacing: 0.0625em;
}

#mainNav .dropdown-item:hover,
#mainNav .dropdown-item:focus {
    color: var(--bs-link-color);
    background-color: transparent;
}

@media (max-width: 991.98px) {
  #mainNav {
     position: sticky;
  }
}


@media (max-width: 991.98px) {
    #navbarResponsive .dropdown-menu {
        display: block;
        border: none;
        background-color: transparent;
        padding-left: 1rem;
    }

    #navbarResponsive .dropdown-item {
        color: #fff;
        padding: 0.2rem 0;
    }

    #navbarResponsive .dropdown-item:hover,
    #navbarResponsive .dropdown-item:focus {
        color: var(--bs-link-color);
        background-color: transparent;
    }

    #navbarResponsive .dropdown-toggle::after {
        display: none;
    }

    #navbarResponsive .nav-link.dropdown-toggle {
        padding-bottom: 0.5rem;
    }
}

@media (min-width: 992px) {
    #navbarResponsive .dropdown-menu {
        background-color: var(--bs-gray-dark);
        border: none;
    }

    #navbarResponsive .dropdown-item {
        color: #fff;
        font-family: var(--bs-body-font-family);
        font-size: smaller;
        letter-spacing: 0.0625em;
		text-transform: uppercase;
    }

    #navbarResponsive .dropdown-item:hover,
    #navbarResponsive .dropdown-item:focus {
        color: #659799;
        background-color: transparent;
    }
}

@media (max-width: 767.98px) {
  .CAmobilemargin .row > div[class^="col-"] {
    margin-top: 2rem;  /* Adjust this value as needed */
  }
  
  .CAmobilemargin .row > div[class^="col-"]:first-child {
    margin-top: 0;
  }
}

.w-arilogo {
  width: 25% !important;
}

@media (max-width: 767.98px) {
  .w-arilogo {
     width: 50% !important;
  }
}

/* Google Maps*/
.map-responsive {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}


/* Lista medaljörer */
.multi-column-list {
    padding: 0;
    list-style-type: none;
    column-gap: 2rem;
}

.multi-column-list li {
    break-inside: avoid-column;
    page-break-inside: avoid;
    padding-bottom: 0.5rem;
}

/* Mobile view: 1 column */
@media (max-width: 575px) {
    .multi-column-list {
        column-count: 1;
    }
}

/* Tablet view: 2 columns */
@media (min-width: 576px) and (max-width: 991px) {
    .multi-column-list {
        column-count: 2;
    }
}

/* Desktop view: 3 columns */
@media (min-width: 992px) {
    .multi-column-list {
        column-count: 3;
    }
}

/* Optional: style for the links 
.multi-column-list a {
    color: inherit;
    text-decoration: none;
}

.multi-column-list a:hover {
    text-decoration: underline;
}
*/

/* Lista hyllsignum */
.multi-column-list2 {
    padding: 0;
    list-style-type: none;
    column-gap: 2rem;
	font-size: 0.8rem;
}

.multi-column-list2 li {
    break-inside: avoid-column;
    page-break-inside: avoid;
    padding-bottom: 0.5rem;
}

/* Mobile view: 1 column */
@media (max-width: 575px) {
    .multi-column-list2 {
        column-count: 1;
    }
}

/* Tablet view: 2 columns */
@media (min-width: 576px) and (max-width: 991px) {
    .multi-column-list2 {
        column-count: 2;
    }
}

/* Desktop view: 3 columns */
@media (min-width: 992px) {
    .multi-column-list2 {
        column-count: 3;
    }
}

/* Optional: style for the links 
.multi-column-list a {
    color: inherit;
    text-decoration: none;
}

.multi-column-list a:hover {
    text-decoration: underline;
}
*/


/* SEARCH */
.search-container {
    display: flex;
    margin-bottom: 1rem;
    width: 100%;
}

.input-wrapper {
    position: relative;
    flex-grow: 1;
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #495057;
    font-size: 1.25rem;
}

.search-input {
    width: 100%;
    height: 56px;
    padding: 0.5rem 0.5rem 0.5rem 2.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem 0 0 0.25rem;
    font-size: 1rem;
    transition: border-width 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.search-input:focus {
    outline: none;
    border-width: 4px;
    border-color: #659799;
}

.search-button {
    padding: 0 1rem;
    background-color: #659799;
    color: white;
    border: none;
    border-radius: 0 0.25rem 0.25rem 0;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    font-size: 1rem;
    height: 56px;
}

.search-button:hover {
   background-color: #d9aa00;
}
.search-button:active {
   background-color: #659799;
}

.show-more-btn {
    width: 100%;
	background-color: #659799;
	border: 0px;
	color: white;
    border-radius: 0 !important;
    height: 60px;
}
.show-more-btn:hover {
	 background-color: #d9aa00;
}
.show-more-btn:active {
	 background-color: #659799;
	
}

.modallist{
	margin-bottom: 1rem;
	
}
tt, .tt {
  /* inline-block så att hyphen- och wrap-reglerna gäller */
  display: inline-block !important;

  /* Inga radbrytningar eller hyfeneringar */
  white-space: nowrap !important;
  overflow-wrap: normal !important;    /* ersätter gamla word-wrap */
  word-break: normal !important;       /* inga hårda brytpunkter */
  -moz-hyphens: none !important;       /* Firefox-prefix */
  -webkit-hyphens: none !important;    /* WebKit-prefix */
  hyphens: none !important;            /* standard */

  /* Använder din sans-seriffont även i Firefox */
  font-style: normal !important;
  font-family: var(--bs-font-sans-serif), sans-serif !important;
}