.navbar-mod2 {
    background-color: var(--main-colour);
}

#menuButton,
#searchButton {
    border-radius: 0px;
    font-size: 1.1875rem;
    line-height: 1.2;
    align-items: center;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-weight: 600;
    height: 105px;
    justify-content: center;
    margin: 0;
    min-width: 100px;
    padding: 8px 10px;
    text-align: center;
}

#menuButton:hover,
#menuButton:focus {
    background-color: var(--secondary-colour);
    color: var(--main-colour);
}

#menuButton:hover svg,
#menuButton:focus svg {
    fill: var(--main-colour);
}

#searchButton {
    background-color: var(--highlight-colour);
    color: #fff;
}

#searchButton:hover,
#searchButton:focus {
    background-color: var(--highlight-bg-colour);
    color: var(--main-colour) !important;
}

#menuArrow {
    fill: #fff;
}

/* Dropdowns */
.dropdown-content {
    display: none;
    z-index: 1;
}

.show {
    display: block;
}

/* Logo 
.home-link-modern {
    display: block;
    position: relative;
    height: 105px;
}
*/
.logo-modern {
    height: 105px;
    width: auto;
    max-width: none;
}


/* Search field */
.search-field {
    border: 2px solid var(--highlight-colour) !important;
    background-color: #fff;
    max-width: 100%;
}

.search-overlay input[type=search]::-webkit-input-placeholder,
input[type=search].search-field::-webkit-input-placeholder {
    color: #000;
    font-weight: 400;
}

.searchbutsmall {
    align-items: center;
    background-color: var(--highlight-colour);
    color: #fff;
    border: 0;
    display: flex;
    font-size: inherit;
    height: 50px;
    justify-content: center;
    line-height: inherit;
    margin: 0;
    outline: none;
    padding: 0;
    text-align: center;
    width: 50px;
    border-radius: 0px;
    cursor: pointer;
}

/* Menu styles */
.menu-modern a {
    color: var(--primary-hyperlink-colour-hover);
    transition: color 0.3s;
    text-decoration: underline;
    text-decoration-thickness: max(1px, .0625rem);
    text-underline-offset: .1578em;
    font-weight: 700;
    font-size: 0.9em;
}

.menu-modern a:hover {
    color: var(--primary-hyperlink-colour-hover);
    text-decoration-thickness: max(2px, .0925rem);
}

.menu-modern ul {
    list-style-type: none;
    padding: 0;
    margin-left: 0px;
}

.menu-modern li {
    margin: 5px 0;
    padding-top: 7px;
}

.SearchPadding {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

#menuItems h3,
.menu-modern p {
    color: black;
    font-size: 1.3em;
    margin: 0.1rem 0;
    line-height: 1.2;
}

.menu-modern p {
    font-size: 0.9em;
}

/* Ensure menu buttons are above logo */
.menu-mod,
.menu-search,
#menuButton,
#searchButton {
    position: relative;
    z-index: 20; /* higher than logo */
}

/* Keep logo underneath */
.logo-col img {
    position: relative;
    z-index: 1;
}

/*
 * Modern menu
 **************************************************/
 
 .menu-content {
	 padding:0px 1rem 0px 1rem;
 }
 


#menuItems .columns {
 padding-right:1.5rem;
 }
 
#menuItems {
  background-color: var(--secondary-colour);
  padding:30px 0px 0px 30px;
  color: var(--text-on-secondary-colour);

}


#menuItems h1, #menuItems h2, #menuItems h3, #menuItems h4, #menuItems h5, #menuItems h6,
#menuItems p, #menuItems li {
color: var(--text-on-secondary-colour);
}


#menuItems ul {
    list-style-type: none;
    padding: 0;
    margin-left: 0px;
	
}

#menuItems li {
    margin-bottom: 8px;
}

#menuItems h2 {
	font-size:1.3em;
	margin-bottom: 20px;
	font-weight:650;
}

#menuItems h3 {
	font-size:1.2em;
	margin-bottom: 20px;
	font-weight:650;
}

#menuItems p {
	padding-right: 0px !important;
	margin-bottom: 0.1rem;
	margin-top: 0.1rem;
  line-height: 1.2;
	
}

#menuItems a {
	    transition: color 0.3s;
    text-decoration: underline;
    text-decoration-thickness: max(1px, .0625rem);
    text-underline-offset: .1578em;
	
	font-weight:600;
	font-size:1em;
}





/* ---------- Responsive tweaks ---------- */
@media screen and (max-width: 1023px) {
    #menuButton,
    #searchButton {
        font-size: 1.1em;
        height: 75px;
		min-width:90px;
    
    }

.logo-modern {
    height: 75px;
}

    #menuItems {
  background-color: var(--secondary-colour);
  padding:20px 0px 0px 10px;
  color: var(--text-on-secondary-colour);

}

    #menuItems h2 {
	margin-top: 20px;
}

#menuItems h3 {
		margin-top: 20px;
}
}

/* ---------- Header layout + positioning ---------- */
#navbar > .row.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-col {
    flex: 0 0 auto;
}

/* Right-side buttons container */
.menu-mod {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Menu + Search aligned right */
.menu-search {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    max-width: 900px;
}

/* Order control */
#menuButton {
    order: 0;
}

#searchButton {
    order: 1;
}

/* ----- SEARCH DROPDOWN CONTAINER ----- */
#menuSearch {
    background-color: var(--highlight-bg-colour);
    padding: 10px 0px 20px 15px;
    font-size: 0.9em;
    color: #ffffff;
}

/* Search field inside the dropdown */
.search-field {
    border: 2px solid var(--highlight-colour) !important;
    background-color: #fff;
    max-width: 700px !important;
}

/* Placeholder styling */
.search-overlay input[type=search]::-webkit-input-placeholder,
input[type=search].search-field::-webkit-input-placeholder {
    color: #000;
    font-weight: 400;
}

/* Optional: make input stretch across container if needed */
.site-header .search-form input[type=search] {
    float: left;
    width: 80%;
}