/* Apply globally, attempt to stop wrap breaking in the middle of words--------- */
body, div, p, span, h1, h2, h3, h4, h5, h6, a {
  overflow-wrap: normal !important;  /* don't break in middle of words */
  word-break: keep-all !important;   /* keep words intact */
  hyphens: none !important;          /* disable auto hyphenation */
  white-space: normal !important;    /* allow wrapping at spaces */
}

a, .breakable {
  overflow-wrap: anywhere;  /* let links/long tokens break if needed */
}

/* 949 PX-------------------------------------- */
@media all and (max-width: 949px) {
  #header,
  #menu,
  #slideshow-wrapper,
  #slideshow-inner,
  #slideshow,
  #slideshow-bottom,
  #preface-wrapper,
  #bottom-teaser,
  #bottom-wrapper,
  #wrapper,
  #footer-wrapper {
    width: 768px;
  }
  #mission-wrapper {
    width: 950px!important;
  }

  #search-block-form {
    padding: 5px 10px 5px 0;
  }
}

@media (max-width: 949px) {
  body.one-sidebar-right #main-content {
    display: flex;
    flex-direction: column;
  }

  body.one-sidebar-right #content {
    width: 100% !important;
    float: none !important;
  }

  body.one-sidebar-right #sidebar-right {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-top: 20px;
  }

  body.one-sidebar-right .region-sidebar-second {
    display: block;
    width: 100%;
  }
}

@media all and (max-width: 949px) {
  #header,
  #menu,
  #slideshow-wrapper,          /* ADD THIS */
  .slideshow-inner,
  .slideshow,
  #slideshow-bottom,
  #preface-wrapper,
  #bottom-teaser,
  #bottom-wrapper,
  #wrapper,
  #footer-wrapper {
    width: 768px;
  }
}

/* 1) Stop hard widths; keep wrappers fluid and centered */
@media (max-width: 949px) {
  #header,
  #menu,
  #slideshow-wrapper,
  #preface-wrapper,
  #bottom-teaser,
  #bottom-wrapper,
  #wrapper,
  #footer-wrapper {
    width: 100% !important;
    max-width: 950px;      /* match your desktop width */
    margin: 0 auto;        /* center */
  }
}


/* 767 PX-------------------------------------- */
@media all and (max-width: 767px) {
  #header,
  #menu,
  #slideshow-wrapper,
  #slideshow-inner,
  #slideshow,
  #slideshow-bottom,
  #preface-wrapper,
  #bottom-teaser,
  #bottom-wrapper,
  #wrapper,
  #footer-wrapper {
    width: 767px;
  }
  #mission-wrapper {
    width: 767px!important;
  }

  #search-block-form {
    padding: 5px 10px 5px 0;
  }
}

@media (max-width: 767px) {
  body.one-sidebar-right #main-content {
    display: flex;
    flex-direction: column;
  }

  body.one-sidebar-right #content {
    width: 100% !important;
    float: none !important;
  }

  body.one-sidebar-right #sidebar-right {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-top: 20px;
  }

  body.one-sidebar-right .region-sidebar-second {
    display: block;
    width: 100%;
  }
}

@media all and (max-width: 767px) {
  #header,
  #menu,
  #slideshow-wrapper,          /* ADD THIS */
  .slideshow-inner,
  .slideshow,
  #slideshow-bottom,
  #preface-wrapper,
  #bottom-teaser,
  #bottom-wrapper,
  #wrapper,
  #footer-wrapper {
    width: 768px;
  }
}

/* 1) Stop hard widths; keep wrappers fluid and centered */
@media (max-width: 767px) {
  #header,
  #menu,
  #slideshow-wrapper,
  #preface-wrapper,
  #bottom-teaser,
  #bottom-wrapper,
  #wrapper,
  #footer-wrapper {
    width: 100% !important;
    max-width: 767px;      /* match your desktop width */
    margin: 0 auto;        /* center */
  }
}

  #nav .menu ul {
    min-width: auto;
    width: auto;
  }

  #menu #nav {
    text-align: right;
    width: 95%;
  }

  #nav .main-navigation-menu.menu-parent {
    display: none;
  }

  #nav .main-navigation-menu.active {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .responsive-menu-icon {
    display: inline-block;
  }

  .responsive-menu-icon.close .menu-icon-open {
    display: none;
  }

  .responsive-menu-icon.close .menu-icon-close {
    display: block;
  }

  #nav .main-navigation-menu.menu-parent .menu-item a {
    padding: 15px 30px;
  }
}
/* 640 PX-------------------------------------- */
/* Needed for right side bar drop to the bottom------------------------ */
@media all and (max-width: 640px) {
  #header, {
    width: 100%;
  }
}

@media all and (max-width: 640px) {
  #header,
  #menu,
  #slideshow-wrapper,
  #slideshow-inner,
  #slideshow,
  #slideshow-bottom,
  #preface-wrapper,
  #bottom-teaser,
  #bottom-wrapper,
  #wrapper,
  #footer-wrapper,
  #footer
  #preface-wrapper.in3 .column,
  #preface-wrapper.in2 .column,
  #preface-wrapper.in1 .column,
  #bottom-teaser.in3 .column,
  #bottom-teaser.in2 .column,
  #bottom-teaser.in1 .column,
  #bottom-wrapper.in4 .column,
  #bottom-wrapper.in3 .column,
  #bottom-wrapper.in2 .column,
  #bottom-wrapper.in1 .column {
    width: 100%;
  }
  .one-sidebar #content,
  .two-sidebars #content {
    width: 100%;
    float: left;
    margin: 0;
  }
  #layout-type-1 #sidebar-left,
  #layout-type-1 #sidebar-right,
  #layout-type-2 #sidebar-left,
  #layout-type-2 #sidebar-right {
    width: 100%;
    float: right;
    margin: 0;
    position: relative;
  }
  
/* Right side bar functionality in resizing-------------- */
 
  #nav .menu li a {
    background: #14345c; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#14345c, #285c91); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#14345c, #285c91); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#14345c, #285c91); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#14345c, #285c91); /* Standard syntax */
  }

  #nav .menu li li a {
    background: #3b6999;
  }

  #nav .menu li:first-child a:hover {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  #nav .menu li:first-child a.is-active {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  #nav .menu li:first-child li a.is-active {
    border-radius: 0px;
  }

  #nav .menu li li a.is-active {
    border-radius: 0px;
  }

  #nav .menu li.active-trail:first-child {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  #nav .menu li.active-trail:first-child li {
    border-radius: 0px;
  }

  #nav .menu li.active-trail li {
    border-radius: 0px;
  }

  #nav .menu li.active-trail:first-child a.is-active {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  #nav .menu li.active-trail:first-child li a.is-active {
    border-radius: 0px;
  }

  #nav .menu li.active-trail li a.is-active {
    border-radius: 0px;
  }

  #nav .menu li:hover ul,
  #nav .menu li.sfHover ul {
    top: 33px;
  }
}

/* 480 PX-------------------------------------- */
@media all and (max-width: 480px) {
  .slideshow-inner,
  .slideshow {
    height: 200px;
  }

  #nav .menu-parent {
    margin-bottom: 0;
  }

  #nav .menu li a {
    background: #14345c; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#14345c, #285c91); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#14345c, #285c91); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#14345c, #285c91); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#14345c, #285c91); /* Standard syntax */
  }

  #nav .menu li li a {
    background: #3b6999;
  }

  #nav .menu li:first-child a:hover {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  #nav .menu li:first-child a.is-active {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  #nav .menu li:first-child li a.is-active {
    border-radius: 0px;
  }

  #nav .menu li li a.is-active {
    border-radius: 0px;
  }

  #nav .menu li.active-trail:first-child {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  #nav .menu li.active-trail:first-child li {
    border-radius: 0px;
  }

  #nav .menu li.active-trail li {
    border-radius: 0px;
  }

  #nav .menu li.active-trail:first-child a.is-active {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  #nav .menu li.active-trail:first-child li a.is-active {
    border-radius: 0px;
  }

  #nav .menu li.active-trail li a.is-active {
    border-radius: 0px;
  }

  #nav .menu li:hover ul,
  #nav .menu li.sfHover ul {
    top: 33px;
  }
}

/* Base width */
#slideshow-wrapper {
  width: 950px;
  margin: 0 auto;
  padding: 0;
}


@media all and (max-width: 480px) {
  
  /* Remove the margin that creates the gap */
  #nav {
    margin-top: 0;
  }
  #nav .main-navigation-menu > li > a {
    padding: 8px 6px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
}

@media all and (max-width: 480px) {
  /* Override your existing 480px rules */
  #nav {
    margin-top: 0 !important;  /* Remove gap */
    padding: 0 !important;     /* Remove side padding */
  }
  
@media all and (max-width: 480px) {
  /* Override your existing 480px rules */
  #nav {
    margin-top: 0 !important;  /* Remove gap */
    padding: 0 10px !important; /* Keep some side padding for the nav container */
  }
  
  /* Force menu items to flex and justify across full width */
  #nav ul.main-navigation-menu {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important; /* Distribute items evenly */
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #nav ul.main-navigation-menu li {
    flex: 1 !important; /* Each item takes equal width */
    text-align: center !important; /* Center text within each item */
  }
  
  #nav .main-navigation-menu > li > a {
    padding: 8px 6px !important;
    font-size: 12px !important;
    white-space: nowrap;
    display: block !important;
    width: 100% !important;
  }
}

/* Stop page shrinking below 360px */
body {
  min-width: 360px;
}

/* Only adjust nav styles at 360px and below */
@media (max-width: 360px) {
  body #nav {
    margin-top: 0 !important;
    padding: 0 10px !important;
  }

  body #nav .menu,
  body #nav .menu * {
    margin: 0 !important;
    padding: 0 !important;
  }

  body #nav ul.main-navigation-menu {
    display: table !important; /* Use table layout instead of flex */
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
  }

  body #nav ul.main-navigation-menu li {
    display: table-cell !important;
    width: auto !important;
    text-align: center !important;
    vertical-align: middle !important;
    flex: none !important;
    float: none !important;
  }

  body #nav .main-navigation-menu > li > a {
    padding: 6px 4px !important;
    font-size: 11px !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

}
  
  /* Force menu items to flex */
  #nav ul.main-navigation-menu {
    display: flex !important;
    width: 100% !important;
  }
  
  #nav ul.main-navigation-menu li {
    flex: 1 !important;
  }
}

/* ---------------------------
   MOBILE FIXES (drop-in)
   --------------------------- */

/* 2) Kill the gap: hide empty slideshow area and let it size to content */
#slideshow-wrapper .custom-slideshow:empty { display: none; }

/* 1) Hide horizontal scroll on the nav row */
@media (max-width: 640px) {
  #nav .main-navigation-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: hidden !important; /* hides the scrollbar */
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
  }
  #nav .main-navigation-menu::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
}

/* 2) Add margin under the banner/slideshow area */
#slideshow-wrapper {
  margin-bottom: 15px; /* adjust to taste */
}

/* Mobile gutters for main content only (keep menus/sidebars as-is) */
@media (max-width: 640px) {
  /* Give the content column a left/right gutter */
  #content-middle .region.region-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }}

  /* Stop inner wrappers from pushing back to the edge */
  .content-middle .region.region-content .views-element-container,
  .content-middle .region.region-content .block,
  .content-middle .region.region-content .views-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Allow dynamic resizing, but never go below 360px */
body {
  min-width: 360px;
}