/* Theme colours */
:root{
    --primary: #0d6efd;
    --kikorangi: #0c79be;
  --kikorangi-10: #e2f2fc;
  --kikorangi-20: #aed2e9;
  --kikorangi-60: #0a659e;
  --puru-pouri: #00465d;
  --puru-pouri-10: #ccdadf;
  --puru-pouri-60: #00344e;
  --puru-pouri-80: #00232f;
  --kakariki: #4a7729;
  --kakariki-10: #dbe4d4;
  --kakariki-60: #3e6322;
}


/* Bootstrap variables */


/* Blockquote */
blockquote {
    padding: 1rem;
    font-style: italic;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
}

/* Definition list */
dt {
    font-weight: bold;
    margin: 1em 0;
}
dd {
    font-style: italic;
    margin: 0 0 .5em 1em;
}

/* Code */
pre{ 
    padding: 0.2rem 0.4rem;
    font-size: 90%;
    color: #bd4147;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
}

/*Images */
img{
    max-width: 100%;
    height: auto;
    width: auto;
}

/* Global layout styles */
.page-wrapper{
    /*overflow: hidden;*/
}

/* Overrides */
body.home .hide-on-home{
    display: none !important;
}

body.page-level-1 .hide-on-home {
    display: none !important;
}

/* Hide the main left col on top level pages that have no sub-nav children
body.has-no-children.page-level-1 .main-left-col{
    display: none !important;
}

/* Containers */

/* Make sure the default container class has a max-width of 1140px; */
.container{
    max-width: 1140px;
}

/* Navbar */
header .logo img{
    max-height: 40px;
}

/* Main menu navigation */

/*.main-navbar{*/
/*    .navbar-nav{*/
/*        margin-bottom: -1px;*/
        
/*        > .nav-item{*/
/*            border-bottom: 3px solid transparent;*/
/*        }*/
/*        > .nav-item:hover{*/
/*            border-bottom-color: #d8d8d8;*/
/*        }*/
/*        > .nav-item.active{*/
/*            border-bottom-color: var(--primary);*/
/*            > a{*/
/*                color: #333;*/
/*            }*/
/*        }*/
/*        .dropdown-menu{*/
/*            padding: 0;*/
/*            border: none;*/
/*            margin-top: 3px;*/
/*            box-shadow: 1px 1px 0.25rem 1px #e6e6e6;*/
            
/*            li{*/
/*                padding: 0;*/
            
/*                a{*/
/*                    padding: 0.6rem 1rem;*/
/*                }*/
/*            }*/
/*            li.active a{*/
/*                color: #fff;*/
/*            }*/
/*        }*/
/*    }*/
/*}*/

/* List group for navigation */
/*.list-group-nav{*/
/*    .list-group-item{*/
/*        padding: 0px;*/
        
/*        a{*/
/*            display: block;*/
/*            padding: .6rem 1rem;*/
/*            text-decoration: none;*/
/*            color: #495057;*/
/*        }*/
/*    }*/
/*    .list-group-item.active > {*/
/*        a{*/
/*            color: #fff;*/
/*        }*/
/*    }*/
/*    .list-group-item.hierarchy{*/
/*        background: transparent;*/
/*        > a{*/
/*            color: var(--primary);*/
/*        }*/
/*    }*/
/*    .list-group-sub{*/
/*        padding-left: 0;*/
/*        list-style: none;*/
/*        border-radius: 0;*/
/*        font-size: 0.9rem;*/
        
/*        .list-group-item {*/
/*            border-width: 0px;*/
/*            border-top-width: 1px;*/
/*            border-style: dotted;*/
/*        }*/
/*        a{*/
/*            padding-left: 1.4rem;*/
/*        }*/
/*    }*/
/*}*/

/* Layout utilities */
.full-width-section{
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}


/* Hover based dropdown menu */
/*@media (min-width: 768px){*/
/*    li:hover > .dropdown-menu.dropdown-menu-hover {*/
/*        display: block;*/
/*    }*/
/*}*/


/*===== STYLING OVERRIDES FOR DIA COMPONENTS these need to be added to the code */

.dia-left-menu__item {
    a {
        display: block;
        padding: 12px 20px 12px 30px;
        text-decoration: none;
        color: var(--color-black);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        transition: color 0.2s ease;

        &:hover {
            color: var(--color-black);
            text-decoration: none;
            font-weight: 700;
        }

        &:focus {
            outline: 2px solid var(--color-black);
            outline-offset: -2px;
        }
    }
}

/* Minimal adjustment to ensure the container is clean for the desktop layout  for the content page with left menu*/
.row.main-row {
    /* Existing essential Flexbox properties */
    display: flex;
    flex-wrap: wrap;
    gap: 16px; 
    
    /* CRITICAL: Remove margin calculations that cause overlap issues */
    margin-right: 0;
    margin-left: 0;
}

@media (min-width: 768px) {
    /* 1. APPLY PADDING TO THE CONTAINER */
    .row.main-row {
        /* Adds 10px spacing from the left edge of the viewport */
        padding-left: 10px;
        /* It's good practice to balance the right side too */
        padding-right: 10px; 
    }
    
    /* Left Column (Navigation): Fixed 320px Width */
    .col-md-3 {
        flex: 0 0 320px;
        width: 320px;
        display: block; 
    }

    /* Right Column (Content): Fill Remaining Space */
    .col {
        flex: 1 1 0%;
        min-width: 0;
    }
    
    /* Ensure child columns don't add unwanted internal padding */
    .row > * {
        padding-right: 0;
        padding-left: 0;
    }
}

/* 2. Optional: Remove the padding above 1999px if needed */
/* If you want the 10px padding to stop at 1999px, you can explicitly remove it here.
   If you didn't specify a max-width, the padding would just continue. */
@media (min-width: 2000px) {
    .row.main-row {
        padding-left: 0;
        padding-right: 0;
    }
}


/* Search page */
/* Mobile-first base styles */
.dia-search__wrapper {
  background-color: var(--puru-pouri);
  color: var(--white);
  display: flex;
  flex-direction: column;
}


.dia__search-layout {
      display: flex;
      flex-direction: column-reverse;
  }

.dia-search__container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.dia-search__content {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  align-self: stretch;
  height: 327px;
}

.dia-search__breadcrumbs {
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  color: var(--white);
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dia-search__breadcrumbs a {
  color: var(--white);
  font-weight: 600;
  line-height: 150%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: 25%;
  text-underline-position: from-font;
  text-decoration-color: var(--white);
}

.dia-search__breadcrumbs a:hover {
  opacity: 0.8;
}

.dia-search__breadcrumbs span {
  color: var(--white);
  font-weight: 400;
  line-height: 120%;
}

.dia-search__breadcrumbs svg {
  width: 24px;
  height: 25px;
  color: var(--kikorangi);
  vertical-align: middle;
}

.dia-search__title {
  font-size: 36px;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}

.dia-search__form {
  width: 100%;
}

.dia-search__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.dia-search__input {
  width: 100%;
  height: 64px;
  border: 2px solid var(--kikorangi);
  border-radius: 32px;
  font-size: 18px;
  padding: 0 80px 0 24px;
  background-color: var(--white);
  color: var(--black);
  outline: none;
}

.dia-search__input::placeholder {
  color: var(--color-dark-grey);
  font-size: 18px;
}

.dia-search__input:focus {
  border-color: var(--kakariki);
  box-shadow: 0 0 0 3px rgba(74, 119, 41, 0.1);
}

.dia-search__submit {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  border: none;
  background-color: var(--kikorangi);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dia-search__submit:hover {
  background-color: var(--kikorangi-60);
}

.dia-search__submit:focus {
  outline: 2px solid var(--kakariki);
  outline-offset: 2px;
}

.dia-search__submit svg {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1); /* Make icon white */
}

.dia-search__image {
  align-self: stretch;
}

.dia-search__image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* Desktop styles (min-width: 62rem / 992px) */
@media screen and (min-width: 62rem) {
  .dia-search__wrapper {
    height: 400px;
    flex-direction: row;
  }

  .dia-search__container {
    max-width: 1440px;
    margin: 0 auto;
    flex-direction: row;
    height: 400px;
  }

  .dia-search__content {
    padding: 0 64px;
    align-items: flex-start;
    justify-content: center;
    height: 400px;
    flex: 1;
  }

  .dia-search__image {
    width: 490px;
    height: 400px;
    flex-shrink: 0;
  }

  .dia-search__image img {
    width: 100%;
    height: 100%;
  }
  
  .dia__search-layout {
      display: flex;
      flex-direction: column-reverse;
  }
}




#search-results li {
    list-style-type: none; 
}