/* Custom styles for POCULA site */

/* Make title wrap to two lines on smaller screens and fix layout issues */
@media (max-width: 767px) {
  /* Adjust navbar brand/title positioning and wrapping */
  .navbar-brand {
    max-width: 75%;
    white-space: normal !important;
    line-height: 1.2;
    padding-top: 8px;
    padding-bottom: 8px;
    height: auto;
    margin-left: 60px;  /* Space for the avatar */
  }

  /* Ensure avatar is properly positioned */
  .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
    margin-left: 15px;
    padding-left: 55px;
  }

  /* Ensure the navbar-collapse aligns to the top */
  .navbar-collapse {
    margin-top: 0;
    padding-top: 0;
  }

  /* Fix menu positioning - align to top */
  .navbar-nav {
    margin-top: 0;
  }
}

/* Mobile and smaller viewports where avatar image shrinks */
@media (max-width: 650px) {
  /* Increase navbar height to accommodate multi-line title */
  .navbar {
    min-height: 80px;
    padding-top: 0;
  }

  /* Fix for page content being covered by larger header */
  body {
    padding-top: 80px;  /* Match this to the navbar min-height */
  }

  /* Adjust avatar position to prevent overlap */
  .navbar-brand img {
    margin-top: 15px;
    position: absolute;
    left: 15px;
    max-height: 45px;  /* Smaller avatar on mobile */
    max-width: 45px;
  }

  /* Align navbar-toggle to top */
  .navbar-toggle {
    margin-top: 8px;  /* Reduced to align with top of header */
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* For very small screens, make font size smaller and further adjustments */
@media (max-width: 480px) {
  .navbar-brand {
    font-size: 16px;
  }

  .navbar {
    min-height: 85px;
  }

  /* Adjust the body padding to match navbar height */
  body {
    padding-top: 85px;
  }

  /* Ensure menu icon stays at top even in smallest viewport */
  .navbar-toggle {
    margin-top: 8px;  /* Align to top */
    position: absolute;
    right: 15px;
    top: 0;
  }
}