@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Delius&display=swap');

/* || BASE STYLES */
:root {
  --kennel-blue: #003366;
  --kennel-blue-dec: 1, 31, 58;

  --kennel-grey: #f2f2f280;
  --kennel-grey-dec: 242, 242, 242;

  --kennel-background-blue: hsla(210, 100%, 12.9%, 0.5);
  --kennel-background-grey: hsla(150, 0%, 95%, 0.5);
 
  --bs-nav-tabs-link-active-border-color: #003366;
  --bs-nav-tabs-border-width: #003366;

  /* Bootstrap breakpoints*/
  --bs-width-sm:  576px;   /* iPhoneSE: 375 / iPhone14: 430 */
  --bs-width-md:  768px;
  --bs-width-lg:  992px;
  --bs-width-xl:  1200px;
  --bs-width-xxl:  1400px;
}




/* || LAYOUT */
html, body {
  height: 100dvh;
  height: 100vh;
  scroll-padding-top: 3.5rem; /* To make anchor rows show under the top navigation */
}
main {
  min-height: 96%;
  display: grid;
  grid-template-columns: 75% 25%;
  grid-template-rows: minmax(auto, max-content) auto 1fr;
  grid-template-areas:
    "header header"
    "advertise advertise"
    "article aside";
  column-gap: 0.5rem;
  padding-top: 50px;      /* Header */
  padding-bottom: 1rem;   /* Footer */
  box-shadow: 8px 0px 2rem var(--kennel-blue), -8px 0px 2rem var(--kennel-blue);
}

/* TODO: Change max-width value to variable when supported in CSS and Bootstrap  */
/* @media screen and (max-width: 575.99px) { */

main h1 {
  grid-area: header;
}
main section {
  grid-area: article; 
  padding-right: 1.5rem;
}
main aside {
  grid-area: aside;
  position: sticky;
  top: 50px;
  align-self: start;
}
#advertise {
  grid-area: advertise;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: start;
  font-size: clamp(14px, calc(1.75vw + 0.75rem), 2.2rem);
  max-height: 7vh;
  gap: 1rem;
}
#advertise * {
  margin: 0;
  max-height: 100%;
}
#advertise .btn {
  margin-left: auto;
}
footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 1020;
}

/* -> Layout on smaller devices <-*/
@media screen and (max-width: 767px) { /* 819px */
  /* -> No sidebar on small screens <- */
  main {
    grid-template-areas:
      "header header"
      "advertise advertise"
      "article article";
    
  }
  main article, main section {
    padding-right: 0;
  }
  main aside {
    display: none;
  }
  #advertise .btn {
    border-radius: 2px;
    --bs-btn-padding-y:     0.20rem; 
    --bs-btn-padding-x:     0.30rem; 
    --bs-btn-font-size:     0.75rem;
  }
}
@media screen and (max-width: 767px) and (orientation: landscape) {
    #advertise {font-size: clamp(12px, calc(1.25vw + 0.25rem), 20px);}
    #advertise .btn { --bs-btn-font-size: 0.50rem; }
}


@media screen and (max-height: 850px) {
  footer {
    position: static;
  }
}
section {
  display: inline-block;
}




/* || SITEWIDE */
body {
  font-family: Georgia, 'Times New Roman', Times, serif;
}
h1,h2,h3,h4,h5,h6 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--kennel-blue);  
  
  
}
h1 {
  margin-bottom: 1.5rem;
  margin-top: 0.50rem;
  /*
  color: white;  
  text-shadow: 1px 1px 2px black, 0 0 25px var(--kennel-blue), 0 0 5px hsla(150, 0%, 95%, 0.25);
  */
}

/* -> Navigation <- */
.navbar {
  padding: 0;
  line-height: 32px;
}
li.active {
  background-color: white;
  border-radius: 8px 8px 0 0;
}
li.active a {
  font-weight: bold;
  color: var(--kennel-blue);
}
li:hover a {
  color: var(--kennel-blue);
  text-decoration: none;
  background-color: white;
  border-radius: 8px 8px 0 0;  
}
.dropdown-item:active {
  background-color: var(--kennel-blue);

}
.navigationlogo {
  max-height: 30px;
}

footer {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: var(--kennel-blue);
  color: white;
}
#footerrow {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between; 
  font-size: small;
}
.btn-menu {
  padding: 0 !important;
}
.accordion-button {
  background-color: var(--kennel-grey) !important;
}


/* -> Language button in header <- */
.languagebutton {
  color: white;
  font-weight: bold;
  background-size: 90%; 
  background-repeat: no-repeat;
}
.language_EN {
  background-image: url('images/base/languagecode_EN_languagecode_image_file.png'); 
}
.language_SV {
  background-image: url('images/base/languagecode_SV_languagecode_image_file.png'); 
}
/* -> Social media <- */
.social-btn-bar {
  position: fixed;
  top: 35%;
  right: 0;
  transform: translatex(90%);
  z-index: 100;
}
.social-btn-top {
  border-radius: 0.5rem 0 0 0;
}
.social-btn {
  display: grid;
  grid-template-columns: 36px auto;
  align-items: start;
  background-color: rgba(0, 0, 0, 0.5);
  width: 300px;
  padding: 10px;
  transition: all 1.5s;
  color: white;
}
.facebook {
  background: #3B5998;
  color: white;
}
.directions {
  border-radius:  0 0 0 0.5rem;
}
@media (hover: hover) {
  .social-btn:hover {
    transform: translatex(-110px);
  }
}
#activityIndex {
  z-index: 0 ;
}
.modal-footer {
  background-color: var(--kennel-blue);
  justify-content: space-between;
}
.modal-header {
  background-color: var(--kennel-background-grey);
}

/* -> Activity index in sidebar <- */
#activitylist {
  height: 27.5rem;
  width: 100%;
  padding: 0.25em 0.5em;
  border: 1px solid var(--kennel-background-grey);
  border-radius: 4px;
  overflow: auto;
  font-size: 1.25vw;
}
@media screen and (min-width: 993px) {
  #activitylist {
    font-size: 1rem;
  }
}

#activitylist a {
  text-decoration: none;
  color: var(--kennel-blue);
  display: inline-block;
  width: 100%; 
}

#activitylist a:hover {
  color: white;
  background-color: var(--kennel-blue);
  border-radius: 2px;
}

/*
	Activity images with caption 
*/
.figure-caption {
	color: var(--kennel-blue) ;
	font-size: x-small;
	font-family: 'Delius', cursive;
	height: 1rem;
}

.img-thumbnail {
	box-shadow: +2px -2px 8px dimgrey; 
}

.figure-img {
  margin-bottom: 0.25rem;
}



/* || UTILITIES */
.btn-MC-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--kennel-blue); /* var(--bs-white); */
  --bs-btn-bg: transparent; /* var(--kennel-blue); */
  --bs-btn-border-color: var(--kennel-blue);
  --bs-btn-border-radius: .25rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg:  rgba(var(--kennel-blue-dec), 0.8);
  --bs-btn-hover-border-color: rgba(var(--kennel-blue-dec), 0.8);
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: rgba(var(--kennel-blue-dec), 0.7);
  --bs-btn-active-border-color: rgba(var(--kennel-blue-dec), 0.7);
}
.btn-MC-secondary {
  --bs-btn-color:       black;
  --bs-btn-bg:            var(--kennel-grey); /* #6c757d;*/
  --bs-btn-border-color:  #6c757d; /* #6c757d;*/

  --bs-btn-hover-color:   #fff;
  --bs-btn-hover-bg:      #e2e0df;/* #5c636a;*/
  --bs-btn-hover-border-color:  #dcdbd9; /*#565e64;*/

  --bs-btn-focus-shadow-rgb: 130, 138, 145;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #dcdbd9; /* #565e64;*/
  --bs-btn-active-border-color: #d7d5d3; /* #51585e;*/
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c75
}



/* Hide Google reCaptcha image */
.rc-anchor-normal-footer, .grecaptcha-badge {
  display: none;
}

/* Google maps responsivens */
.google-maps {
  position: relative;
  padding-bottom: 75%; 
  height: 0;
  overflow: hidden;
}
.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
.fontinformal {
  font-family: 'Delius', cursive;
}
.verticaltext {
  writing-mode: vertical-lr;
}
.bg-gray {
  background-color: var(--kennel-background-grey);
}
.textcondensed {
  font-family: Arial, Helvetica, sans-serif;
  font-size: max(0.80vw, 0.80em);    
}

/* Table responsive on small screens */
@media screen and (max-width: 768px) {
  table.table-xs-responsive { border: 0;}
  table.table-xs-responsive caption { font-size: 1.3em; }
  table.table-xs-responsive thead { display: none; }
  table.table-xs-responsive td {
    display: block;
    font-size: .8em;
    text-align: right;
  }
  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}


/* || SIDE SPECIFIC */
article.activity, article.event {
  content-visibility: auto;
  border-top: 1px solid var(--kennel-background-grey);
}

.cardhorizontal {
  writing-mode: vertical-lr;
}
@media screen and (max-width: 1199px) {
  .cardhorizontal {
    writing-mode: horizontal-tb;
  }
}


/* ***************************
*  Code to handle OLD litter pages
*  **************************  */
dl {
  margin-top: 0;
  margin-bottom: 20px;
}
dt,
dd {
  line-height: 1.42857143;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 0;
}

@media (min-width: 768px) {
  .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dl-horizontal dd {
    margin-left: 180px;
  }
}

@media screen and (min-width: 768px) {
  .dl-horizontal dd:before,
  .dl-horizontal dd:after
  {
    content: " ";
    display: table;
  }
  .dl-horizontal dd:after
  {
    clear: both;
  }
}

.btn {
  margin: 0.1rem 0;
}

.btn-default {
  color: #333333;
  background-color: #ffffff;
  border-color: #cccccc;
  margin: 0.5rem;
}
.btn-default:hover {
  color: #333333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

/* Set color on svg element in carousel */
.carousel-control-prev-icon, .carousel-control-next-icon {
  filter: brightness(0) saturate(100%) invert(14%) sepia(25%) saturate(6460%) hue-rotate(196deg) brightness(96%) contrast(101%);
}