/* ==========================================================================
   responsive-fix.css
   Load this LAST in <head>, after jwp.css:
   <link href="css/responsive-fix.css" rel="stylesheet" type="text/css" media="all" />
   Fixes the layout between 768px and 991px (tablet / small laptop).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. HEADER (#menu1) — layout, 768px to 991px
   The logo column (col-md-2) + menu column (col-md-12) add up to more than
   12 columns, so the menu wrapped to a second row. Now: one flex row, with
   the empty logo column hidden.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {

  #menu1 > .container > .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
  }

  /* empty logo column */
  #menu1 .row > [class*="col-"]:first-child {
    display: none;
  }

  /* menu + button column */
  #menu1 .row > [class*="col-"]:last-child {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    max-width: 100%;
  }

  #menu1 .bar__module {
    margin: 0;
  }

  #menu1 .menu-horizontal {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
  }

  #menu1 .menu-horizontal > li {
    margin: 0 1.25em 0 0;
  }

  #menu1 .menu-horizontal > li:last-child {
    margin-right: 0;
  }

  #menu1 .bar__module.medium-margin-left {
    margin-left: 1.5em;
  }

  #menu1 .btn {
    white-space: nowrap;
  }
}


/* --------------------------------------------------------------------------
   2. HEADER (#menu1) — transparent at the top, solid white after scroll
   theme.css only defines this behaviour from 991px up. This repeats the same
   rules for 768–991px so the tablet header matches desktop:
     - top of page: transparent bar, white links / button
     - after scrolling (the theme script adds .pos-fixed): white bar + shadow
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {

  /* keep the bar above the hero image (theme only sets this from 991px) */
  #menu1 {
    top: 0;
    z-index: 99;
  }

  /* top of page */
  #menu1.bar--transparent:not(.pos-fixed) {
    background: none;
    box-shadow: none;
  }

  #menu1.bar--transparent:not(.pos-fixed) .menu-horizontal > li > a,
  #menu1.bar--transparent:not(.pos-fixed) .menu-horizontal > li > span {
    color: #fff;
  }

  #menu1.bar--transparent:not(.pos-fixed) .btn:not([class*='primary']) {
    border-color: rgba(255, 255, 255, 0.3);
  }

  #menu1.bar--transparent:not(.pos-fixed) .btn:not([class*='primary']) .btn__text {
    color: #fff;
  }

  /* after scroll */
  #menu1.pos-fixed {
    background: #fff;
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.04);
  }
}


/* --------------------------------------------------------------------------
   3. ABOUT SECTION (image + text) — up to 991px
   Stack the image and the text vertically. !important is used because the
   theme styles for .switchable rows are more specific than a plain override.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

  .about--flex {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  .about--flex > .col-md-6,
  .about--flex > .heading-block {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    position: static !important;
    transform: none !important;
  }

  .about--flex > .col-md-6 {
    margin-bottom: 1.5em !important;
  }

  .about--flex > .heading-block {
    padding: 0 15px !important;
  }

  .about--flex .padding--left {
    padding-left: 0 !important;
  }
}