/* Hillside Accounting Services: components added on top of the Colorlib template (style.css). */

:root {
  --hs-green: #1ba12d;
  --hs-green-dark: #147a22;
  --hs-green-tint: #f2f9f3;
  --hs-navy: #0f1e52;
  --hs-ink: #212529;
  --hs-text: #4a4a4a;
  --hs-border: #dfe7e0;
  --hs-bangla-font: "Noto Sans Bengali", "Kohinoor Bangla", "Bangla Sangam MN", "Nirmala UI", "Vrinda", sans-serif;
}

/* Interior page hero image, so new pages need no inline style attribute. */
.hero-sub {
  background-size: cover;
  background-position: center center;
}

/* Background photos: WebP where the browser supports image-set(), JPEG otherwise.
   The page preloads the WebP of its hero photo. */
.hero-sub,
.bg-sub-header {
  background-image: url("../images/hillside-accounting-services-sub-header.jpg");
  background-image: image-set(url("../images/hillside-accounting-services-sub-header.webp") type("image/webp"), url("../images/hillside-accounting-services-sub-header.jpg") type("image/jpeg"));
}

.bg-thumbsup {
  background-image: url("../images/thumbsup.jpg");
  background-image: image-set(url("../images/thumbsup.webp") type("image/webp"), url("../images/thumbsup.jpg") type("image/jpeg"));
}

.bg-computer {
  background-image: url("../images/computer.jpg");
  background-image: image-set(url("../images/computer.webp") type("image/webp"), url("../images/computer.jpg") type("image/jpeg"));
}

.bg-shafi {
  background-image: url("../images/shafi-image.jpg");
  background-image: image-set(url("../images/shafi-image.webp") type("image/webp"), url("../images/shafi-image.jpg") type("image/jpeg"));
}

/* owl.carousel.min.css hides every carousel until Owl Carousel runs at the end
   of the page, so the 700px homepage slider appeared late and pushed the page
   down (layout shift 0.58 on a throttled phone). Show the first slide from the
   start; Owl Carousel takes over at the same height. */
.owl-carousel.home-slider:not(.owl-loaded) {
  display: block;
}

.owl-carousel.home-slider:not(.owl-loaded) .slider-item + .slider-item {
  display: none;
}

.hero-wrap .slider-text .hero-lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
  max-width: 640px;
}

/* Long-form content: darker text than the template's gray body copy for readability. */
.page-content {
  color: var(--hs-text);
}

.page-content h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--hs-ink);
  margin-bottom: 16px;
}

.page-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--hs-ink);
  margin-top: 24px;
}

.page-content p,
.page-content li {
  font-size: 16px;
  line-height: 1.75;
}

.page-content .updated {
  font-size: 14px;
  color: #6b6b6b;
}

/* Answer box at the top of a page and plain notices. */
.answer-box,
.note-box {
  background: var(--hs-green-tint);
  border-left: 4px solid var(--hs-green);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 24px 0;
}

.answer-box p:last-child,
.note-box p:last-child {
  margin-bottom: 0;
}

.note-box strong {
  color: var(--hs-ink);
}

/* Form tables stay readable on a phone: the wrapper scrolls, the page does not. */
.table-forms {
  background: #fff;
  font-size: 15px;
}

.table-forms th {
  color: var(--hs-ink);
  white-space: nowrap;
}

.table-forms td:first-child {
  white-space: nowrap;
  font-weight: 700;
  color: var(--hs-ink);
}

/* Fact tables on the guide and service pages: both columns wrap, so long
   answers stay readable on a phone without scrolling sideways. */
.table-facts {
  background: #fff;
  font-size: 15px;
}

.table-facts th {
  color: var(--hs-ink);
}

.table-facts td:first-child {
  width: 34%;
  font-weight: 700;
  color: var(--hs-ink);
}

/* Cards that link to a service page. */
.link-card {
  display: block;
  background: #fff;
  border: 1px solid var(--hs-border);
  border-radius: 6px;
  padding: 24px;
  color: var(--hs-text);
}

.link-card:hover,
.link-card:focus {
  border-color: var(--hs-green);
  color: var(--hs-text);
}

.link-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--hs-ink);
}

.link-card .more {
  color: var(--hs-green-dark);
  font-weight: 700;
}

/* Equal-height cards only in the homepage grid. */
#new-immigrants .link-card {
  height: 100%;
}

/* Sidebar boxes on the guide pages: same look as the cards, no stretching or hover. */
.side-card {
  background: #fff;
  border: 1px solid var(--hs-border);
  border-radius: 6px;
  padding: 24px;
  color: var(--hs-text);
}

.side-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--hs-ink);
  margin-top: 0;
}

@media (min-width: 992px) {
  .page-sidebar {
    position: sticky;
    top: 110px;
  }
}

/* Bengali text. */
[lang="bn"] {
  font-family: var(--hs-bangla-font);
  line-height: 1.9;
}

.lang-badge {
  display: inline-block;
  background: #fff;
  color: var(--hs-green-dark);
  border-radius: 999px;
  padding: 4px 16px;
  font-weight: 700;
  margin-bottom: 12px;
}

.portrait {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.contact-strip {
  background: var(--hs-green);
  color: #fff;
  padding: 48px 0;
}

.contact-strip h2,
.contact-strip p {
  color: #fff;
}

.contact-strip .btn.btn-white:hover {
  border-color: #fff;
  color: #fff;
}

.footer .footer-contact {
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 767.98px) {
  .page-content h2 {
    font-size: 24px;
  }

  .answer-box,
  .note-box {
    padding: 16px 18px;
  }
}


/* Homepage slides 2 and 3: same look as the slide heading, but not an h1,
   so the page keeps a single h1 (Owl Carousel clones every slide). */
.owl-carousel.home-slider .slider-item .slider-text .slide-title {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 50px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  text-shadow: 0 3px 25px rgba(0, 0, 0, 0.1);
}

@media (max-width: 991.98px) {
  .owl-carousel.home-slider .slider-item .slider-text .slide-title {
    font-size: 40px;
    letter-spacing: 3px;
  }
}

/* Top bar in the logo's navy instead of the template's purple. */
.wrap .bg-wrap {
  background: var(--hs-navy);
}

.wrap .bg-wrap:after {
  border-color: transparent transparent var(--hs-navy) transparent;
}

.wrap .bg-wrap:before {
  border-color: var(--hs-navy) transparent transparent transparent;
}

/* Bootstrap's .text-primary is blue (with !important); the site's primary color is green. */
.text-primary {
  color: var(--hs-green) !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: var(--hs-green-dark) !important;
}

/* Breadcrumb separator: Font Awesome is loaded, the template's Ionicons font is not. */
.hero-wrap .slider-text .breadcrumbs .fa {
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.6);
}

/* Neighborhood list on the areas page: two columns on phones, three on wider screens. */
.area-list {
  columns: 2;
  column-gap: 32px;
  padding-left: 20px;
}

@media (min-width: 768px) {
  .area-list {
    columns: 3;
  }
}

/* Equal-height link cards in a grid. */
.card-grid .link-card {
  height: 100%;
}

/* Tax prep checklists: empty tick boxes that also show when printed. */
.checklist {
  list-style: none;
  padding-left: 0;
}

.checklist li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 8px;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--hs-green);
  border-radius: 3px;
}

.page-content .sources {
  font-size: 14px;
}

.page-content .sources li {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 6px;
}

/* Printing a checklist: keep the content, drop the site chrome. */
@media print {
  .wrap,
  .ftco_navbar,
  .hero-wrap,
  .page-content aside,
  .footer,
  .no-print {
    display: none;
  }

  .page-content {
    color: #000;
  }

  .page-content a {
    color: #000;
  }

  .answer-box,
  .note-box {
    border: 1px solid #999;
    background: #fff;
  }
}

/* Headings whose level changed for document order keep their original look. */
h3.item-heading { font-size: 20px; font-weight: 700; line-height: 30px; }
h3.h4-size { font-size: 24px; font-weight: 400; line-height: 36px; }
h2.h3-size { font-size: 28px; font-weight: 400; line-height: 42px; }
h2.heading-sidebar { font-size: 22px; font-weight: 700; line-height: 33px; }