/* =============================================================================
   responsive.css
   -----------------------------------------------------------------------------
   Mobile / tablet adjustments for the public pages: index.php and
   knowledgebase.php.

   Why this file exists:
   dist/css/main.css is a Laravel Mix build output that has since been edited by
   hand (all of the .ct-* nav, hero and help-button rules live only in the
   compiled file, not in src/scss). Re-running `npm run dev|prod` would wipe
   them, and appending to an 11k-line build artefact is hard to maintain, so the
   responsive layer is kept here instead. main.css is left untouched.

   Load order notes (these drive the selector specificity below):
     index.php          main.css -> responsive.css -> styles.css (mid-body, from
                        Supportplan.php) -> pricing.php inline <style> ->
                        Bootstrap 5.3 CDN (mid-body, from footer.php)
     knowledgebase.php  main.css -> responsive.css
   Because three stylesheets land *after* this one on index.php, several rules
   carry an extra class or element selector so they still win on specificity.

   Breakpoints follow Bootstrap 4's: 1200 / 992 / 768 / 576.
   ============================================================================= */


/* =============================================================================
   1. Header / navigation  (both pages)
   -----------------------------------------------------------------------------
   main.css pins .ct-nav-list with `position: absolute; left: 50%;
   transform: translateX(-50%)`. Being out of flow it can neither wrap nor push
   its siblings, so below ~992px it sat on top of the 178px logo and the 7rem
   log-in button. Below 992px it is returned to normal flow and becomes a
   full-width second row, which keeps the two links reachable without needing a
   hamburger + collapse plugin for a two-item menu.
   ============================================================================= */

@media (max-width: 991.98px) {
  .ct-nav {
    margin-bottom: 12px;
  }

  .ct-nav .navbar {
    flex-wrap: wrap;
    row-gap: 10px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .ct-nav .ct-nav-list {
    position: static;
    left: auto;
    transform: none;
    order: 3; /* brand and log-in button stay on row 1, links wrap to row 2 */
    width: 100%;
    height: auto;
    min-height: 2.25rem;
    justify-content: center;
    flex-wrap: wrap;
    padding: 4px 6px;
  }

  .ct-nav .ct-nav-list a {
    padding: 6px 10px;
  }

  /* Logo keeps its 178x45 aspect ratio, just smaller. */
  .ct-nav .navbar .navbar-brand img {
    width: 150px;
    height: 38px;
    max-height: 38px;
  }
}

@media (max-width: 575.98px) {
  .ct-nav .navbar {
    padding-left: 8px;
    padding-right: 8px;
  }

  .ct-nav .navbar .navbar-brand img {
    width: 130px;
    height: 33px;
    max-height: 33px;
  }

  /* main.css hard-codes width: 7rem, which crowds the logo on small phones. */
  .ct-nav .ct-head-btn-01 button {
    width: auto;
    min-width: 5.25rem;
    height: 2.25rem;
    padding: 0 0.9rem;
    font-size: 0.9rem;
  }

  .ct-nav .ct-nav-list a {
    padding: 6px 8px;
    font-size: 0.9rem;
  }
}


/* =============================================================================
   2. Hero / jumbotron + search  (both pages)
   ============================================================================= */

/* .jumbotron-heading only set font-weight, so the heading inherited Bootstrap's
   2.5rem h1 at every viewport width. */
.jumbotron .jumbotron-heading {
  font-size: clamp(1.55rem, 5.5vw, 2.5rem);
  line-height: 1.25;
  padding: 0 0.5rem;
}

/* Replaces the inline `padding-bottom: 9rem` that used to sit on the search
   row. Inline styles beat media queries, so it had to move into CSS before it
   could be scaled down. Desktop value is unchanged. */
.jumbotron .ct-hero-search-row {
  padding-bottom: 9rem;
}

@media (max-width: 991.98px) {
  .jumbotron .ct-hero-search-row {
    padding-bottom: 5rem;
  }
}

@media (max-width: 767.98px) {
  .jumbotron .ct-hero-search-row {
    padding-bottom: 3.5rem;
  }
}

@media (max-width: 575.98px) {
  .jumbotron .ct-hero-search-row {
    padding-bottom: 2.25rem;
  }
}

/* Lets the field shrink inside the input group instead of forcing its
   intrinsic input width. */
.jumbotron .search-form .search .search-field {
  min-width: 0;
}

@media (max-width: 575.98px) {
  /* `padding` shorthand rather than padding-left: styles.css sets a global
     `input { padding: 20px }` on index.php which would otherwise stay. */
  .jumbotron .search-form .search .search-field {
    height: 46px;
    padding: 0 12px;
    font-size: 0.95rem;
  }

  .jumbotron .search-form .search .input-group-addon {
    height: 46px;
    padding: 6px 12px;
    font-size: 1.15rem;
  }

  .jumbotron .search-form .input-group .input-group-addon i {
    font-size: 1rem;
  }
}


/* =============================================================================
   3. Knowledge base page
   ============================================================================= */

/* main.css has Bootstrap's `.col-md-6` width commented out, so the product
   cards jumped straight from 1-up to 3-up and sat full width for the whole
   768-991px range. Restore 2-up on tablets. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .section .row > .col-sm-12.col-md-6.col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 767.98px) {
  .section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  /* .ct-help-button had no flex-wrap, so "Create New Ticket" + "My Tickets"
     overflowed the row. */
  .content .ct-help-button {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }

  .content .ct-help-button a {
    padding: 8px 16px;
    text-align: center;
  }

  /* margin-top: -45px pulled the "Products" heading up into the buttons once
     they stopped sharing a line with it. */
  .content .heading {
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
  }

  .content .heading h1 {
    font-size: 1.85rem;
  }
}

@media (max-width: 575.98px) {
  /* 2.5rem of side padding left very little room for the logo on a phone. */
  a.card-link .card.card-minimal {
    padding: 0.5rem 1rem;
  }

  /* Full-width stacked buttons read better than two cramped ones. */
  .content .ct-help-button a {
    flex: 1 1 100%;
  }
}


/* =============================================================================
   4. Support plans / comparison table  (index.php)
   -----------------------------------------------------------------------------
   pricing.php's inline <style> is the only source of .pricing-table and loads
   after this file, hence the `table.pricing-table` element+class selectors.
   ============================================================================= */

@media (max-width: 991.98px) {
  table.pricing-table {
    margin: 24px auto;
  }
}

@media (max-width: 767.98px) {
  table.pricing-table th,
  table.pricing-table td {
    padding: 10px 8px;
    font-size: 14px;
  }

  table.pricing-table th small {
    font-size: 11px;
    line-height: 1.35;
  }
}

/* The service column text ("Acknowledgement & Initial Response Time") keeps the
   table wider than a phone viewport, so the markup now wraps it in
   .table-responsive. Keep the table flush inside that scroll container. */
#comparison-table .table-responsive {
  -webkit-overflow-scrolling: touch;
}

#comparison-table .table-responsive > table.pricing-table {
  margin-top: 0;
  margin-bottom: 0;
}