/* =======================
   Typography & Base Styles
   ======================= */
html,
body {
  font-family: "Open Sans", Verdana, Arial, "Trebuchet MS", Helvetica,
    sans-serif;
  font-weight: 400;
  line-height: 1.375em;
  font-size: 15px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h2 {
  font-size: 1em !important;
  font-weight: 400 !important;
  margin-top: 0 !important;
  margin-bottom: 1.1em !important;
}
h3 {
  font-size: 1em;
  font-weight: 300;
  margin-top: 1em;
  margin-bottom: 0.275em;
}
p,
.main-section p,
.aside-section p {
  margin-top: 0;
  margin-bottom: 1.2em !important;
  padding-top: 0;
  padding-bottom: 0;
}
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
  color: #986665;
  text-decoration: none;
  font-weight: 600;
}

/* =======================
   Navigation Font Styles
   ======================= */
.custom-nav,
.custom-nav ul,
.custom-nav li,
.custom-nav li a,
.custom-nav li span {
  font-family: "Open Sans", Verdana, Arial, "Trebuchet MS", Helvetica,
    sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 2.063em !important;
}
.custom-nav ul ul li a,
.custom-nav ul ul li span {
  font-weight: 300 !important;
}

/* =======================
   Content Area Font Styles
   ======================= */
.main-content-area,
.main-content-left,
.main-content-right {
  font-family: "Open Sans", Verdana, Arial, "Trebuchet MS", Helvetica,
    sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.375em;
  color: #695648;
}
.main-content-left {
  text-align: justify;
}

/* =======================
   Logo/Header Section (matches legacy)
   ======================= */
.logo-section {
  height: 14.3em;
  width: 980px;
  margin: 0 auto;
  background-image: url("img/alster.jpg");
  background-repeat: no-repeat;
  background-position: bottom;
  overflow-y: visible;
  position: relative;
  display: block;
  max-width: 100vw;
  box-sizing: border-box;
}
.header-logo-img {
  width: 580px;
  padding-top: 23px;
  margin-left: 382px;
  text-decoration: none;
  display: block;
  position: relative;
  z-index: 2;
  max-width: 100%;
  height: auto;
}

/* Responsive header for mobile */
@media (max-width: 767px) {
  .logo-section {
    width: 100vw;
    height: auto;
    min-height: 8em;
    margin: 0;
    background-size: cover;
    background-position: center bottom;
  }
  .header-logo-img {
    width: 100%;
    max-width: 100vw;
    margin-left: 0;
    padding-top: 1em;
    height: auto;
  }
}

/* Remove old header-section/image-stack/bg-img */
.header-section,
.header-img-stack,
.header-bg-img {
  display: none !important;
}

/* =======================
   Main Content Area Layout
   ======================= */
.main-content-area {
  width: 960px;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-left: 0.9;
  padding-left: 0em; Aligns left content with HOMEPAGE nav item
  flex: 1 0 auto;
}
@media (min-width: 768px) {
  .main-content-area {
    flex-direction: row;
  }
}
@media (max-width: 767px) {
  .main-content-area {
    flex-direction: column;
    align-items: center;
  }
}

/* =======================
   Main Content Columns
   ======================= */
.main-content-left {
  width: 100%;
  max-width: 670px;
  /* background-color: #eff6ff; */
  /* Remove default Tailwind px-0, use CSS for consistency */
  padding-bottom: 0;
  font-family: "Open Sans", Verdana, Arial, "Trebuchet MS", Helvetica,
    sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.375em;
  color: #695648;
}
@media (min-width: 768px) {
  .main-content-left {
    width: 670px;
  }
}

.main-content-right {
  width: 100%;
  max-width: 290px;
  border-radius: 0.5em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Padding to match legacy: left and top */
  padding-left: 2.375em;
  padding-top: 2.375em;
  padding-bottom: 0;
  padding-right: 2.375em;
  font-family: "Open Sans", Verdana, Arial, "Trebuchet MS", Helvetica,
    sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.375em;
  color: #cccccc;
}
@media (min-width: 768px) {
  .main-content-right {
    width: 290px;
  }
}
@media (max-width: 767px) {
  .main-content-right {
    padding-left: 0 !important;
    align-items: center;
    padding-right: 0;
  }
  .desktop-only{
    display: none
  }
  
}

.main-content-left ul {
  list-style-type: disc;
  padding-left: 1.5em;
  margin-top: 0.5em;
}

.main-content-left li {
  margin-bottom: 0.7em;
}

.main-content-right a {
  color: #cccccc !important;
  text-decoration: none !important;
  font-weight: 400 !important;
}

/* =======================
   Right Column Image
   ======================= */
#picture {
  max-width: 14.667em; /* 250px */
  max-height: 14.667em;
  float: left;
  display: block;
}

/* =======================
   Footer
   ======================= */
.footer {
  background-color: #cccccc;
  color: #ffffff;
  width: 100%;
  clear: both;
  margin-bottom: 0;
  position: relative;
  /* margin-top: auto; */
  /* Remove fixed height so background fills full area */
  /* height: auto; */
  min-height: 6.875em;
}
.footer-inner {
  /* Remove fixed height so background fills full area */
  /* padding-top: 0.813em;
  padding-bottom: 0.938em; */
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 2em;
  min-height: 5em;
  height: auto;
}

/* Stack footer content into one column on mobile */
@media (max-width: 767px) {
  .footer-inner {
    flex-direction: column;
    gap: 0.5em;
    align-items: stretch;
    min-height: 0;
    height: auto;
  }
  .footer-main,
  .footer-links {
    float: none;
    width: 100%;
    margin-top: 0.5em;
    margin-bottom: 0;
    padding-left: 0.9em !important;
    padding-right: 0.9em !important;
  }
}

.footer-main {
  font-size: 0.875em;
  float: left;
  padding-left: 0;
  height: 100%;
  margin-top: 1.3em;
  margin-bottom: 0;
}
.footer-main span {
  color: #ffffff;
}
.footer-links {
  font-size: 0.875em;
  padding-left: 2.375em;
  height: 100%;
  margin-top: 0.75em;
  margin-bottom: 0;
}
.footer-links span {
  display: block;
  color: #ffffff;
}
.footer-links a {
  color: #ffffff !important;
  display: block;
  margin-bottom: 0.3em;
  text-decoration: none !important;
}
.footer-links a:last-child {
  margin-bottom: 0;
}

/* =======================
   Navigation, Submenus, etc.
   ======================= */
.navbar {
  font-family: "Open Sans", Verdana, Arial, "Trebuchet MS", Helvetica,
    sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 2.063em;
}
.navbar-menu {
  font-family: "Open Sans", Verdana, Arial, "Trebuchet MS", Helvetica,
    sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 2.063em;
}
.navbar-burger {
  font-family: "Open Sans", Verdana, Arial, "Trebuchet MS", Helvetica,
    sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 2.063em;
}

/* Desktop submenu styles */
.desktop-submenu {
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease 0.1s;
  box-shadow: 5px 5px 3px 1px rgba(204, 204, 204, 0.3);
  font-family: "Open Sans", Verdana, Arial, "Trebuchet MS", Helvetica,
    sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 2.063em;
}
.desktop-submenu li {
  height: 0;
  overflow: hidden;
  padding: 0;
  transition: height 0.25s ease 0.1s;
}
.desktop-submenu-link {
  padding: 0.125em 0.938em;
}

/* =======================
   Desktop Submenu Roll-out
   ======================= */
@media (min-width: 768px) {
  .group:hover > .desktop-submenu,
  .group:focus-within > .desktop-submenu {
    opacity: 1 !important;
    visibility: visible !important;
  }
  .group:hover > .desktop-submenu > li,
  .group:focus-within > .desktop-submenu > li {
    height: 2.063em !important;
    overflow: visible !important;
    padding: 0 !important;
  }
}
.desktop-submenu-link {
  padding: 0.125em 0.938em;
}

/* =======================
   Desktop Submenu Roll-out
   ======================= */
@media (min-width: 768px) {
  .group:hover > .desktop-submenu,
  .group:focus-within > .desktop-submenu {
    opacity: 1 !important;
    visibility: visible !important;
  }
  .group:hover > .desktop-submenu > li,
  .group:focus-within > .desktop-submenu > li {
    height: 2.063em !important;
    overflow: visible !important;
    padding: 0 !important;
  }
}

/* =======================
   Navigation Bar Colors (force for Tailwind and legacy)
   ======================= */
.navbar-menu > li > a,
ul#menu > li > a,
nav ul.navbar-menu > li > a,
.navbar-menu .group > a {
  color: #ffffff !important;
  font-weight: 400 !important;
  transition: color 0.2s;
}

.navbar-menu > li > a:hover,
.navbar-menu > li:hover > a,
ul#menu > li > a:hover,
ul#menu > li:hover > a,
nav ul.navbar-menu > li > a:hover,
nav ul.navbar-menu > li:hover > a {
  color: #695648 !important;
}

/* =======================
   Navigation Bar Colors (subitems)
   ======================= */
.desktop-submenu a,
ul#menu ul li a {
  color: #ffffff !important;
  font-weight: 300 !important;
  background: none;
  transition: color 0.2s;
}

.desktop-submenu a:hover,
ul#menu ul li a:hover,
ul#menu ul li:hover > a {
  color: #695648 !important;
  background: none;
}

/* =======================
   Hamburger/mobile menu colors
   ======================= */
#mobile-menu a {
  color: #ffffff !important;
  font-weight: 400 !important;
  transition: color 0.2s;
}

#mobile-menu a:hover,
#mobile-menu li:hover > a {
  color: #695648 !important;
}

/* Submenu items in mobile */
#mobile-menu .submenu a {
  color: #ffffff !important;
  font-weight: 300 !important;
}

#mobile-menu .submenu a:hover,
#mobile-menu .submenu li:hover > a {
  color: #695648 !important;
}

/* Remove font-weight: 600 from submenu triggers in mobile menu */
#mobile-menu .submenu-toggle,
#mobile-menu li > a,
#mobile-menu li > span {
  font-weight: 400 !important;
}

/* =======================
   Submenu popout: ensure navbar is always above submenu
   ======================= */
.navbar,
#navigation,
ul#menu,
.navbar-menu {
  position: relative;
  z-index: 2000 !important;
}

.desktop-submenu,
ul#menu ul {
  position: absolute;
  left: -0.938em !important; /* Move submenu box left for same left padding as right */
  top: 2.375em !important;
  margin-top: 0 !important;
  z-index: 100 !important;
  background-color: #c8e3e4;
  box-shadow: 0.313em 0.313em 0.188em 0.063em rgba(204, 204, 204, 0.3);
  padding-top: 0.1em !important;
  padding-bottom: 0.1em !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =======================
   Center main nav item text vertically in navbar
   ======================= */
ul#menu > li > a,
.navbar-menu > li > a {
  color: #ffffff !important;
  font-weight: 400 !important;
  transition: color 0.2s;
  line-height: 2.375em !important; /* Match navbar height for perfect vertical centering */
  height: 2.375em !important;
  display: flex;
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Submenu item text: align with main nav item text */
.desktop-submenu a,
ul#menu ul li a {
  padding-left: 0.938em !important;
  padding-right: 0.938em !important;
  padding-top: 0.1em !important;
  padding-bottom: 0.24em !important;
  /* font-weight, color, etc. already set above */
}

/* =======================
   Navigation: add left padding to first nav item for header alignment
   ======================= */
ul#menu > li:first-child,
.navbar-menu > li:first-child {
  margin-left: 0.9em !important; /* Add space so HOMEPAGE is not flush with header image */
}

/* =======================
   Prevent main content and footer from overflowing left on small screens
   ======================= */
.main-content-area,
.footer-inner {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  /* Remove any left margin or padding that would push content out of view */
}

@media (max-width: 1023px) {
  .main-content-area,
  .footer-inner {
    max-width: 100vw;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =======================
   Add left padding to main content and footer for alignment with HOMEPAGE
   ======================= */
.main-content-left,
.footer-main {
  padding-left: 0.9em !important;
}

/* Make page use flex column layout so footer stays at bottom */
html,
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Main content area should grow to fill space above footer */
.main-content-area {
  flex: 1 0 auto;
}

/* Footer stays at bottom in all views */
.footer {
  margin-top: auto;
  /* Remove position: absolute from mobile view */
}

/* Remove position: absolute from mobile view */
@media (max-width: 767px) {
  .footer {
    position: static;
    left: unset;
    right: unset;
    bottom: unset;
  }
  body {
    position: static;
    padding-bottom: 0;
  }
  .main-content-left,
  .footer-main {
    padding-right: 0.9em !important;
  }
  .text-footfont {
    width: 100%;
    text-align: center;
  }
  .footer-links a:last-child {
    margin-bottom: 0.9em !important;
  }
}

/* =======================
   Active nav item style (ensure this is last for specificity)
   ======================= */
.navbar-menu > li > a.active-nav,
ul#menu > li > a.active-nav,
nav ul.navbar-menu > li > a.active-nav,
.desktop-submenu a.active-nav {
  color: #695648 !important;
}

/* Mobile submenu background and text color for better readability */
#mobile-menu .submenu {
  /* background-color: #7bbfc2 !important; */
  background-color: #99cccc !important;
  min-width: 80vw;
  max-width: 85vw;
  margin-left: 0.2rem;
}

#mobile-menu .submenu a {
  /* color: #222222 !important;
  font-weight: 500 !important; */
}