/* ======================================================
   HERO TITLE – MOBILE FIX
====================================================== */
@media (max-width: 768px) {

  /* HERO TEXT CONTAINER PADDING */
  #jumbotron-fullwidth .carousel-content,
  #jumbotron-fullwidth .carousel-heading,
  #jumbotron-fullwidth .carousel-caption {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* H1 MOBILE SIZE */
  #jumbotron-fullwidth h1 {
    font-size: 28px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    margin: 0 auto 12px !important;
    max-width: 22ch;
  }

  /* H2 MOBILE SIZE */
  #jumbotron-fullwidth h2 {
    font-size: 16px !important;
    line-height: 1.35 !important;
    text-align: center !important;
    margin: 0 auto 18px !important;
    max-width: 36ch;
  }
}


/* ======================================================
   DESKTOP HEADER HEIGHT
====================================================== */
@media (min-width: 769px) {
  .navbar-header {
    min-height: 90px;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
  }
}


/* ======================================================
   MOBILE NAV: LOGO LEFT / MENU RIGHT
====================================================== */
@media (max-width: 768px) {

  nav.navigation > .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .navbar-header {
    display: flex !important;
    justify-content: space-between !important;
    min-height: 70px !important;
    align-items: center !important;
  }

  /* Remove bootstrap floats */
  .navbar-header > a.navbar-brand,
  .navbar-header > button.navbar-toggle {
    float: none !important;
  }

  /* Force correct order */
  .navbar-header > a.navbar-brand { order: 1 !important; }
  .navbar-header > button.navbar-toggle { order: 2 !important; }

  /* Logo container */
  .navbar-header > a.navbar-brand {
    margin: 0 !important;
    padding: 6px 0 !important;
    display: flex !important;
    align-items: center !important;
    width: 69% !important;
  }

  /* Menu button */
  .navbar-header > button.navbar-toggle {
    margin: 0 !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Logo image sizing */
  .navbar-header > a.navbar-brand img {
    display: block !important;
    max-height: 46px !important;
    width: auto !important;
  }
}


/* ======================================================
   HERO CTA HIERARCHY (BASE)
====================================================== */

#jumbotron-fullwidth .carousel-content a,
#jumbotron-fullwidth .carousel-content .btn,
#jumbotron-fullwidth .carousel-content a.button {
  display: inline-block;
}

/* Primary button */
#jumbotron-fullwidth .carousel-content a:nth-of-type(1) {
  background: #4f8f73 !important;
  color: #fff !important;
  border: 2px solid #4f8f73 !important;
  font-weight: 700 !important;
  padding: 12px 18px !important;
}

/* Secondary button */
#jumbotron-fullwidth .carousel-content a:nth-of-type(2) {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.85) !important;
  font-weight: 600 !important;
  padding: 12px 18px !important;
  margin-left: 10px !important;
}

/* Hover effects */
#jumbotron-fullwidth .carousel-content a:nth-of-type(1):hover {
  filter: brightness(0.95);
}

#jumbotron-fullwidth .carousel-content a:nth-of-type(2):hover {
  background: rgba(255,255,255,0.12) !important;
}


/* ======================================================
   HERO TEXT + BUTTON SPACING (DESKTOP + TABLET)
   Fixes: buttons too close to the line of text after removing rogue 
====================================================== */

/* Add breathing room between the subheadline line and the buttons */
@media (min-width: 769px) {

  /* the "Over 40 Years..." line is commonly in a  inside carousel-content */
  #jumbotron-fullwidth .carousel-content p {
    margin-bottom: 32px !important;
  }

  /* in case it's not a , still ensure space before buttons */
  #jumbotron-fullwidth .carousel-content a,
  #jumbotron-fullwidth .carousel-content .btn,
  #jumbotron-fullwidth .carousel-content a.button {
    margin-top: 8px !important;
  }

  /* Make buttons a bit bigger / more prominent on desktop */
  #jumbotron-fullwidth .carousel-content a:nth-of-type(1),
  #jumbotron-fullwidth .carousel-content a:nth-of-type(2) {
    padding: 14px 26px !important;
    min-height: 48px !important;
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
			margin-top: 32px !important;
  }

  /* Slightly increase gap between the two buttons on desktop */
  #jumbotron-fullwidth .carousel-content a:nth-of-type(2) {
    margin-left: 14px !important;
  }
}


/* ======================================================
   HERO BUTTONS – MOBILE STACK (TALLER + BETTER SPACING)
   Includes: spacing between text -> buttons + between buttons
====================================================== */
@media (max-width: 768px) {

  /* Stack hero content */
  #jumbotron-fullwidth .carousel-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Ensure the text line has spacing before buttons (works with or without ) */
  #jumbotron-fullwidth .carousel-content p {
    margin-bottom: 18px !important;
  }

  /* Style buttons */
  #jumbotron-fullwidth .carousel-content a,
  #jumbotron-fullwidth .carousel-content .btn,
  #jumbotron-fullwidth .carousel-content a.button {

    width: 92% !important;
    max-width: 340px !important;

    /* Taller buttons */
    padding: 18px 20px !important;
    min-height: 56px !important;

    text-align: center !important;
    margin: 0 auto !important;

    line-height: 1.1 !important;
    border-radius: 4px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Space between stacked buttons */
  #jumbotron-fullwidth .carousel-content a + a {
    margin-top: 16px !important;
  }

  /* Remove desktop horizontal spacing */
  #jumbotron-fullwidth .carousel-content a:nth-of-type(2) {
    margin-left: 0 !important;
  }
}


/* =========================================
   HIDE TOPBAR ON MOBILE ONLY
========================================= */
@media (max-width: 768px) {
  .topbar {
    display: none !important;
  }
}

.lw-vertical-center {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical centering */
  height: 100%;
}