/* ===========================================================================
   Intra Consulting — additions to the Tasty template.

   style.css is the template's, kept exactly as it shipped. Everything the
   accounting site needs on top of it lives here, using the same palette:
     red   #ea272d   accent, links, rules
     amber #fee856   figures
     text  rgba(255,255,255,.3) body, #fff headings
   =========================================================================== */

/* --- Tax calendar table ------------------------------------------------- */
.fh5co-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-top: 2px solid rgba(234, 39, 45, 0.4);
}

.fh5co-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
}

.fh5co-table th {
  padding: 20px 20px 20px 0;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.fh5co-table td {
  padding: 18px 20px 18px 0;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
}

.fh5co-table tr td:first-child {
  color: #fff;
}

.fh5co-table tr td:last-child {
  color: #fee856;
  white-space: nowrap;
}

.fh5co-table tbody tr {
  transition: 0.3s;
}

.fh5co-table tbody tr:hover td {
  background: rgba(234, 39, 45, 0.06);
}

.fh5co-table-note {
  margin-top: 30px;
  padding-left: 20px;
  border-left: 2px solid #ea272d;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* On phones the table becomes stacked rows, so nothing needs sideways
   scrolling to be read. */
@media screen and (max-width: 600px) {
  .fh5co-table-wrap {
    overflow-x: visible;
  }
  .fh5co-table,
  .fh5co-table tbody,
  .fh5co-table tr,
  .fh5co-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .fh5co-table thead {
    display: none;
  }
  .fh5co-table tr {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .fh5co-table td {
    padding: 2px 0;
    border: none;
  }
  .fh5co-table td:first-child {
    font-size: 22px;
    margin-bottom: 6px;
  }
  .fh5co-table td:last-child::before {
    content: "Due: ";
    color: rgba(255, 255, 255, 0.3);
  }
}

/* --- Slider ------------------------------------------------------------- */
/* Flexslider normally sets these inline from JS. The React version cross-fades
   with opacity instead, so the slides stack and the list keeps its height. */
#fh5co-slider-wrwap .flexslider .slides {
  position: relative;
  height: 600px;
  list-style: none;
  padding: 0;
  margin: 0;
}

#fh5co-slider-wrwap .flexslider .slides li {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  display: block !important;
  transition: opacity 0.6s ease-in-out;
}

#fh5co-slider-wrwap .flexslider .slides li[aria-hidden="true"] {
  pointer-events: none;
}

/* The stylesheet holds .slider-text at opacity 0 for the jQuery reveal; the
   active slide's text is shown here instead. */
#fh5co-slider-wrwap .flexslider .flex-active-slide .slider-text,
#fh5co-slider-wrwap .flexslider .flex-active-slide .slider-text-bg {
  opacity: 1;
}

#fh5co-slider-wrwap .flexslider .flex-control-nav {
  position: absolute;
  bottom: -40px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  list-style: none;
}

#fh5co-slider-wrwap .flexslider .flex-control-nav li a {
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  border-radius: 50%;
}

/* --- Navbar burger ------------------------------------------------------ */
/* The template styles .fh5co-nav-toggle but never placed one in the markup. */
.js-fh5co-nav-toggle {
  position: absolute;
  right: 20px;
  top: 18px !important;
  z-index: 21;
  padding: 0;
  border: none;
  background: transparent;
  display: none;
}

@media screen and (max-width: 768px) {
  .js-fh5co-nav-toggle {
    display: block;
  }
}

body.overflow {
  overflow: hidden;
}

#fh5co-offcanvas ul li a {
  display: block;
  padding: 8px 0;
  font-size: 20px;
}

/* --- Odds and ends ------------------------------------------------------ */
.fh5co-cta-details {
  font-size: 20px;
  margin-bottom: 25px;
}

.fh5co-cta-details a {
  color: #fff;
  border-bottom: 1px solid #ea272d;
}

.fh5co-cta-details a:hover {
  color: #ea272d;
}

/* The template's .blog-text meta was dark-on-dark and unreadable. */
.fh5co-blog .blog-text span.posted_on {
  color: #ea272d !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.fh5co-blog .blog-text .stuff {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fh5co-blog .blog-text .stuff li:last-child {
  float: none;
}

.fh5co-blog .blog-text .stuff li a {
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
}

.fh5co-blog .blog-text .stuff li a:hover {
  color: #ea272d;
}

/* Keep anchored sections clear of the fixed navbar. */
[id^="fh5co-"] {
  scroll-margin-top: 90px;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .animated-fast,
  #fh5co-slider-wrwap .flexslider .slides li {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Legibility --------------------------------------------------------- */
/* The template sets body copy to rgba(255,255,255,.3) on black, which is
   roughly a 2.3:1 contrast ratio — below the 4.5:1 minimum and genuinely hard
   to read on a laptop in daylight. The palette is unchanged; only the opacity
   is raised. To go back to the template's exact value, delete this block. */
body,
.fh5co-section p {
  color: rgba(255, 255, 255, 0.62);
}

#fh5co-footer .fh5co-footer-links li,
#fh5co-footer .fh5co-footer-links li a {
  color: rgba(255, 255, 255, 0.62);
}

#fh5co-featured-testimony blockquote .author {
  color: rgba(255, 255, 255, 0.75);
}

/* The template zeroes borders on any .btn inside the cover header, which also
   erased .btn-primary.btn-outline. The original had no hero button, so this
   just lets the site's usual square red outline button work there too. */
#fh5co-header .display-tc .btn.btn-outline,
.fh5co-cover .display-tc .btn.btn-outline {
  border: 2px solid #ea272d !important;
  border-radius: 0;
}

#fh5co-header .display-tc .btn.btn-outline:hover,
.fh5co-cover .display-tc .btn.btn-outline:hover {
  background: #ea272d !important;
}