/*
 * Section surfaces and vertical rhythm.
 *
 * Every page used to be one flat sheet: the theme leaves each section
 * transparent, so the body colour ran from the header to the footer and
 * neighbouring sections bled into one another. Each section now paints its
 * own band and the bands alternate, so a visitor can see where one block of
 * content ends and the next begins.
 *
 * Loaded last, after hlp-layout.css, so these rules win over main.css.
 */

:root {
  /*
   * Both surfaces sit on the brand's own teal hue (180deg, the hue of
   * --tj-color-theme-primary) at very low chroma, so the banding reads as
   * part of the palette rather than as neutral printer grey. The tint is the
   * theme's existing --tj-color-grey-1, which is also the body colour, so
   * anything left unpainted still lines up.
   */
  --hlp-surface-light: var(--tj-color-common-white);  /* #ffffff */
  --hlp-surface-tint: var(--tj-color-grey-1);         /* #ecf0f0 */
  --hlp-surface-dark: var(--tj-color-theme-dark);     /* #0c1e21 */

  /*
   * A white card on a white band loses its edge, so those cards get a
   * hairline: the theme's --tj-color-border-1 lightened until it separates
   * the card without drawing attention to itself.
   */
  --hlp-card-hairline: #e2e9e9;

  /* One rhythm for every band, identical top and bottom. */
  --hlp-section-space: 120px;
  --hlp-hero-space: 140px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  :root {
    --hlp-section-space: 100px;
    --hlp-hero-space: 95px;
  }
}

@media only screen and (max-width: 991px) {
  :root {
    --hlp-section-space: 70px;
    --hlp-hero-space: 65px;
  }
}

/* ------------------------------------------------------------------ *
 * 1. Equal top and bottom padding on every band.
 *
 * The theme shipped several sections lopsided: .tj-team-section was
 * 120/90, .tj-page-header 133/150, anything on .section-bottom-gap
 * 0/120, and .tj-cta-section had no padding at all and leaned on its
 * neighbours. One declaration replaces all of it.
 * ------------------------------------------------------------------ */
.site-main > section {
  padding-top: var(--hlp-section-space);
  padding-bottom: var(--hlp-section-space);
}

/* The two heroes set their own height: the split banner is full-bleed art,
   and the page header carries a background photograph. */
.site-main > .tj-banner-section {
  padding-top: 0;
  padding-bottom: 0;
}

.site-main > .tj-page-header {
  padding-top: calc(var(--hlp-hero-space) * 1.2 + var(--hlp-breadcrumb-content-extra, 14px));
  padding-bottom: calc(var(--hlp-hero-space) * 1.2 + var(--hlp-breadcrumb-content-extra, 14px));
  background-position: center bottom;
}

/* ------------------------------------------------------------------ *
 * 2. Square edges on full-bleed bands.
 *
 * hlp-layout.css drops the side margins of .section-gap-x sections, so the
 * theme's 12px card radius on these sections would cut four notches out of
 * the band and show the neighbouring colour through them.
 * ------------------------------------------------------------------ */
.site-main > .tj-page-header,
.site-main > .tj-about-section-2,
.site-main > .tj-service-section {
  border-radius: 0;
}

/* ------------------------------------------------------------------ *
 * 3. The bands themselves.
 *
 * Applied per section in the markup so each page's order is explicit and
 * readable there. Light and tint alternate; the dark bands are deliberate
 * accents (the hero, the floor-plan gallery, the pricing table) and the
 * alternation restarts on light after each one, which is the strongest
 * hand-off of the three.
 * ------------------------------------------------------------------ */
.site-main > .hlp-band-light {
  background-color: var(--hlp-surface-light);
}

.site-main > .hlp-band-tint {
  background-color: var(--hlp-surface-tint);
}

.site-main > .hlp-band-dark {
  background-color: var(--hlp-surface-dark);
}

/* ------------------------------------------------------------------ *
 * 4. Keep white cards legible on the light bands.
 *
 * outline rather than border: it sits outside the box model, so not one
 * card moves by a pixel, and it follows the card's border-radius.
 * ------------------------------------------------------------------ */
.hlp-band-light .choose-box,
.hlp-band-light .countup-item,
.hlp-band-light .experience-box,
.hlp-band-light .about-content-area,
.hlp-band-light .project-item,
.hlp-band-light .blog-item,
.hlp-band-light .blog-content,
.hlp-band-light .contact-form,
.hlp-band-light .tj-post__navigation,
.hlp-band-light .comment-content,
.hlp-band-light .tj-comments__container input,
.hlp-band-light .tj-comments__container textarea {
  outline: 1px solid var(--hlp-card-hairline);
  outline-offset: -1px;
}

/* A card nested inside another card only needs the outer ring. */
.hlp-band-light .blog-item .blog-content {
  outline: 0;
}

/* ------------------------------------------------------------------ *
 * 5. No seam between the header and the first band.
 *
 * .space-for-header reserves room for the header, which sits outside the
 * scroll wrapper. The theme reserved 105px for a 90px header (95px for an
 * 80px one), which left a strip of body colour showing between the white
 * header bar and the first section. Reserve exactly the header's height.
 * ------------------------------------------------------------------ */
.site-main > .space-for-header {
  padding-top: 90px;
}

@media only screen and (max-width: 991px) {
  .site-main > .space-for-header {
    padding-top: 80px;
  }
}

/* 404 page - helpful link list so a missing URL still routes visitors
   (and crawlers) to the pages that matter. */
.hlp-404-links {
  list-style: none;
  margin: 40px auto 0;
  padding: 0;
  max-width: 560px;
}

.hlp-404-links li + li {
  margin-top: 12px;
}

.hlp-404-links a {
  display: block;
  padding: 16px 22px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  font-weight: 500;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.hlp-404-links a:hover,
.hlp-404-links a:focus-visible {
  border-color: currentColor;
  transform: translateX(4px);
}

/* Blog article figure - replaces the stock theme's video block. */
.blog-details-figure {
  margin: 30px 0;
}

.blog-details-figure img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.blog-details-figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  opacity: 0.75;
}

/* ------------------------------------------------------------------
   Heading hierarchy compensation.

   Several headings were retagged so the document outline is correct
   (no h2 -> h4 jumps) rather than chosen for its font size. These rules
   pin each one back to the size it rendered at before, so the fix is
   purely semantic and nothing moves on screen.
   ------------------------------------------------------------------ */

/* Card titles: were h4, now h3. */
.blog-item .blog-content > .title,
.choose-box .choose-content > .title,
.hlp-plan-card .hlp-plan-content > .title,
.project-content .project-text > .title,
.team-item .team-content > .title,
.about-bottom-area .mission-vision-box > .title,
.service-item .title-area > .title {
  font-size: var(--tj-fs-h4);
  line-height: 1.333;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-item .blog-content > .title,
  .choose-box .choose-content > .title,
  .hlp-plan-card .hlp-plan-content > .title,
  .project-content .project-text > .title,
  .team-item .team-content > .title,
  .about-bottom-area .mission-vision-box > .title,
  .service-item .title-area > .title {
    font-size: 22px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .blog-item .blog-content > .title,
  .choose-box .choose-content > .title,
  .hlp-plan-card .hlp-plan-content > .title,
  .project-content .project-text > .title,
  .team-item .team-content > .title,
  .about-bottom-area .mission-vision-box > .title,
  .service-item .title-area > .title {
    font-size: 20px;
  }
}

/* Sidebar recent-post titles: were h6, now h5. */
.tj-sidebar-widget .post-content > .post-title,
/* Comment headings: were h6, now h4. */
.comments-header .avatar-name > .title {
  font-size: var(--tj-fs-h6);
  line-height: 1.444;
}

/* Captions and labels that were headings only for their size are now
   paragraphs, so give them the heading font treatment back. */
.experience-box > .customers-text,
.category-item .cate-text > .title,
.category-item .cate-text > .text {
  font-family: var(--tj-ff-heading);
  color: var(--tj-color-heading-primary);
  font-weight: var(--tj-fw-medium);
  font-size: var(--tj-fs-h6);
  line-height: 1.444;
  letter-spacing: -0.03em;
  margin: 0;
}

/* Sidebar and modal headings retagged for outline order; sizes unchanged. */
.tj-sidebar-widget > .widget-title {
  font-size: var(--tj-fs-h4);
  line-height: 1.333;
}

.modal-header > .modal-title {
  font-size: var(--tj-fs-h5);
  line-height: 1.4;
}

/* ------------------------------------------------------------------ *
 * Gallery page: uniform square grid, 3 boxes per row.
 *
 * The theme's default gallery mixes wide (col-lg-8) and tall
 * (col-lg-4/col-md-4) boxes into a masonry-style layout. The gallery
 * page instead needs every box the same width and height, so this
 * grid overrides that layout: three equal squares per row, images
 * cropped with object-fit so every box stays flush regardless of the
 * source photo's own aspect ratio.
 * ------------------------------------------------------------------ */
.tj-gallery-wrap.hlp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 0;
}
/* Bootstrap's .col-4 still carries its own width/flex/gutter rules,
   which fight the grid track above and leave each card stranded in a
   third of its cell with a blank gap around it. Reset those so the
   card fills the grid cell exactly. */
.tj-gallery-wrap.hlp-gallery-grid > [class*="col-"] {
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
}

/* Each box is a plain white card: soft shadow, rounded corners, the
   photo inset inside it. No caption, badge or text is added — the
   square is built with the classic padding-bottom trick (not the CSS
   aspect-ratio property) so every card is guaranteed the same height
   as its neighbours in every browser, instead of relying on aspect-
   ratio support/inheritance that can silently fail on one card and
   leave it a different height than the rest of the row. */
.tj-gallery-wrap.hlp-gallery-grid .image-box {
  margin-bottom: 0;
  background-color: var(--hlp-surface-light);
  border-radius: 16px;
  padding: 10px;
  -webkit-box-shadow: 0 10px 30px rgba(12, 30, 33, 0.08);
          box-shadow: 0 10px 30px rgba(12, 30, 33, 0.08);
  -webkit-transition: -webkit-box-shadow 0.3s ease, -webkit-transform 0.3s ease;
  transition: -webkit-box-shadow 0.3s ease, -webkit-transform 0.3s ease;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  transition: box-shadow 0.3s ease, transform 0.3s ease, -webkit-box-shadow 0.3s ease, -webkit-transform 0.3s ease;
}
.tj-gallery-wrap.hlp-gallery-grid .image-box:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  -webkit-box-shadow: 0 18px 40px rgba(12, 30, 33, 0.14);
          box-shadow: 0 18px 40px rgba(12, 30, 33, 0.14);
}
.tj-gallery-wrap.hlp-gallery-grid .image-box .gallery {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.tj-gallery-wrap.hlp-gallery-grid .image-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
.tj-gallery-wrap.hlp-gallery-grid .image-box:hover img {
  -webkit-transform: scale(1.06);
          transform: scale(1.06);
}

@media only screen and (max-width: 767px) {
  .tj-gallery-wrap.hlp-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media only screen and (max-width: 479px) {
  .tj-gallery-wrap.hlp-gallery-grid {
    grid-template-columns: 1fr;
  }
}