.header
{
  height: 55px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: white;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(228, 228, 228);
}

.left-section
{
  width: 180px;
  margin-left: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.hamburger-menu-button
{
  height: 30px;
  width: 40px;
  background-color: white;
  border-width: 1px;
  border-style: solid;
  border-color: white;
  cursor: pointer;
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 1001;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hamburger-menu-button:hover
{
opacity: 0.5;
transform: translateY(-4px);
}

.hamburger-menu-button:active
{
opacity: 0.5;
transform: translateY(0);
}

.hamburger-menu-icon
{
height: 18px;
margin-top: 2px;
}

.off-screen-menu 
{
  position: fixed;
  top: 56px;
  left: -200px;          /* hidden off-screen */
  width: 200px;
  height: 77vh;
  transition: left 0.3s ease;
  z-index: 1000;
  padding-top: 10px;
  border: solid rgb(228, 228, 228);
  border-top: none;
  box-sizing: border-box;
  background-color: white;
}

.off-screen-menu.active 
{
  left: 0;               /* slides RIGHT */
}

.off-screen-menu ul 
{
  list-style: none;
  padding: 0;
  margin: 0;
}

.off-screen-menu li 
{
  margin: 20px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.menu-title 
{
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: black;

  padding: 0 20px 12px;
  margin-bottom: 14px;

  border-bottom: 1px solid black;
}

/* Menu links */
.off-screen-menu a 
{
  display: flex;
  align-items: center;
  gap: 10px;

  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  color: black;
  text-decoration: none;

  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 10px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.off-screen-menu a:hover 
{
  opacity: 0.6;
  transform: translateX(4px);
  text-decoration: underline;
}

/* Shared logo styling */
.off-screen-menu img 
{
  width: 20px;
  flex-shrink: 0;
  position: relative;
  top: 1px;
}

/* Slight logo size variations */
.rmu-logo 
{
  width: 24px;
}

.catechism-logo 
{
  width: 14px;
}

.colonial-catholics-image
{
  width: 120px;
  border: 2px solid black;
  border-radius: 40% / 50%;
  margin-left: 60px;
}

.middle-section
{
  flex: 1;
  margin-left: 35px;
  margin-right: 35px;
  max-width: 500px;
  display: flex;
  align-items: center;
  position: relative;
}

.search-bar 
{ 
  flex: 1; 
  height: 36px; 
  padding-left: 10px; 
  font-size: 16px; 
  border-width: 1px; 
  border-style: solid; 
  border-color: rgb(192, 192, 192); 
  border-radius: 2px; 
  box-shadow: inset 1px 2px 3px rgba(0, 0, 0, 0.05); 
  width: 0; 
  transition: border-color 0.2s ease, box-shadow 0.2s ease; /* smooth transition */
} 

.search-bar:focus 
{ 
  border-color: rgb(192, 192, 192); /* outline turns red when clicked */
  border-style: solid;
  border-width: 2px;
  outline: none; /* removes default browser outline */
} 


.search-bar::placeholder 
{ 
  font-family: Roboto, Arial, sans-serif; 
  font-size: 16px; 
} 
.search-button 
{ 
  height: 40px; 
  width: 66px; 
  background-color: rgb(240, 240, 240); 
  border-width: 1px; 
  border-style: solid; 
  border-color: rgb(192, 192, 192); 
  margin-left: -1px; 
  cursor: pointer; 
  border-radius: 2px; 
} 
.search-button:hover 
{ 
  opacity: 0.5; 
} 
.search-button:active 
{ 
  opacity: 0.5; 
} 
.search-icon 
{ 
  height: 25px; 
  margin-top: 4px; 
}

/* SEARCH DROPDOWN CONTAINER */
.search-dropdown 
{
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid rgb(228, 228, 228);
  border-radius: 2px;
  box-shadow: inset 1px 2px 3px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
  z-index: 2000;
  font-family: Roboto, Arial, sans-serif;
}

/* INDIVIDUAL RESULT ITEM */
.search-dropdown div 
{
  padding: 10px 14px;
  font-size: 15px;
  cursor: pointer;
  color: black;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* HOVER EFFECT */
.search-dropdown div:hover 
{
  background-color: rgb(228, 228, 228);;
  color: black;
}


/* SCROLLBAR (CHROME / EDGE) */
.search-dropdown::-webkit-scrollbar 
{
  width: 8px;
}

.search-dropdown::-webkit-scrollbar-thumb 
{
  background-color: #ccc;
  border-radius: 4px;
}

.search-dropdown::-webkit-scrollbar-thumb:hover 
{
  background-color: #aaa;
}


.right-section
{
  width: 180px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.right-section a
{
  color: black;
  text-decoration: none;
}

.home-button 
{ height: 40px; 
  width: 66px; 
  background-color: white; 
  border-width: 1px; 
  border-style: solid; 
  border-color: white; 
  cursor: pointer; 
  transition: transform 0.2s ease, opacity 0.2s ease; 
} 

.home-button:hover 
{ 
  opacity: 0.5; 
  transform: translateY(-4px); 
} 

.home-button:active 
{ 
  opacity: 0.5; 
  transform: translateY(0); 
} 

.home-icon 
{ 
  height: 14px; 
} 

.home 
{ 
  font-family: Roboto, Arial; 
  font-size: 12px; 
} 

.events-button 
{ 
  height: 40px; 
  width: 66px; 
  background-color: white; 
  border-width: 1px; 
  border-style: solid; 
  border-color: white; 
  cursor: pointer; 
  transition: transform 0.2s ease, opacity 0.2s ease; 
} 

.events-button:hover 
{ 
  opacity: 0.5; 
  transform: translateY(-4px); 
} 

.events-button:active 
{ 
  opacity: 0.5; 
  transform: translateY(0); 
} 

.events-icon 
{ 
  height: 18px; 
  margin-top: 2px; 
} 

.events 
{ 
  font-family: Roboto, Arial; 
  font-size: 12px; 
} 

.contact-button 
{ 
  height: 40px; 
  width: 66px; 
  background-color: white; 
  border-width: 1px; 
  border-style: solid; 
  border-color: white; 
  cursor: pointer; 
  transition: transform 0.2s ease, opacity 0.2s ease; 
} 

.contact-button:hover 
{ 
  opacity: 0.5; 
  transform: translateY(-4px);
} 

.contact-button:active 
{ 
  opacity: 0.5; 
  transform: translateY(0); 
} 

.contact-icon 
{ 
  height: 18px; 
  margin-top: 2px; 
} 

.contact 
{ 
  font-family: Roboto, Arial; 
  font-size: 12px; 
}