/* ==========================================================================
   THK — home page (index.html)
   --------------------------------------------------------------------------
   Load AFTER site.css. Contains only what is unique to the home page; the
   nav, footer and palette live in site.css.

   Rules at 992px and above use `vw` sizing. Rules for smaller screens are
   grouped at the bottom.
   ========================================================================== */


/* Hero banner ============================================================== */

/* Maroon wash in CSS, not baked into the file. The image is now the plain
   photograph — IMG_2921, the reception area. Three flat layers, topmost
   first: --primary at 0.86 normal, flat --primary blended `color` to force
   every pixel onto hue 345, black at 0.60 normal to crush the highlights.
   Full derivation of the numbers is in contact.css. */
#colorBanner {
  background-color: var(--primary);
  background-image:
    linear-gradient(rgba(111, 4, 31, 0.86), rgba(111, 4, 31, 0.86)),
    linear-gradient(#6f041f, #6f041f),
    linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)),
    url("../assets/banner-bg-home.jpg");
  background-blend-mode: normal, color, normal, normal;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--pad);
}

#colorBanner p {
  color: var(--white);
}

#colorBanner #banner-topCol {
  padding: 0 5vw;
}

#colorBanner #bannerPhoto {
  padding-left: 1.5vw;
  padding-right: 1.5vw;
  background-color: var(--bg);
}

#colorBanner #banner-bottomCol {
  padding-left: 0;
  padding-right: 0;
}

#colorBanner #banner-header {
  margin-top: 1.5vw;
  margin-bottom: 1vw;
  transform: translate(2vw, 0);
}

/* Two wrappers sit inside the banner: #bannerInner (outer) and #bannerTextInner
   (in the text column). Only the inner one is zeroed; the outer one takes the
   desktop margins set further down. Scoped explicitly so the two rules can't
   collide. */
#colorBanner #banner-bottomCol #bannerTextInner {
  margin: 0;
}

/* Was id="banner-text" on two different elements in the same page, which is
   invalid HTML. Now a class, so both the desktop and mobile copy can carry
   it legally. */
#colorBanner .banner-text {
  text-align: left;
  margin-left: 2vw;
}


/* Card row ================================================================= */

#cardContainer {
  padding-left: 5vw;
  padding-right: 5vw;
  margin: 0 5% 5%;
  width: 90%;
}

#cardContainer .content-container {
  margin-top: 1em;
}

#cardContainer .card-title {
  color: var(--primary);
}

/* The card title is a link covering the whole card (stretched-link). Keep it
   looking like the heading it is. */
#cardContainer .card-title a {
  color: inherit;
  text-decoration: none;
}

#cardContainer .card-body {
  padding: 5%;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
}

#cardContainer .card-body:hover {
  background-color: #f0f0f0; /* = darken(#f8f8f8, 3%) */
  box-shadow: 0 7px 15px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
}

#cardContainer .card-body p {
  margin-top: 0.7em;
  margin-bottom: 0.7em;
}

#cardContainer #provide p {
  text-align: left;
}

/* Tax / Business / Assurance. Below 992px these sit side by side on one
   centred line — `gap` spaces them and `flex-wrap` (set in the markup) lets
   them drop to a second line rather than overflow when the card is narrow.
   From 992px up they stack one per line; see the desktop block below. */
#cardContainer .icon-row {
  gap: 0.5rem 1.5rem;
  margin-top: 0.75rem;
}

#cardContainer .icon-row p {
  margin: 0;
  white-space: nowrap;
}


/* Desktop (992px and up) — vw sizing ==================== */

@media (min-width: 992px) {
  #colorBanner {
    padding: 0;
  }

  #colorBanner > #bannerInner {
    margin-right: 10%;
    margin-left: 7%;
  }

  #colorBanner #bannerPhoto {
    height: 16vw;
  }

  #colorBanner #banner-header {
    font-size: 2vw;
  }

  #colorBanner .banner-text {
    font-size: 1vw;
  }

  #cardContainer {
    margin-top: 1.5vw;
    margin-bottom: 2vw;
  }

  /* The three cards share identical desktop type scaling. */
  #cardContainer #meetOurTeam,
  #cardContainer #provide,
  #cardContainer #visit {
    font-size: 0.9vw;
  }

  #cardContainer #meetOurTeam h5,
  #cardContainer #provide h5,
  #cardContainer #visit h5 {
    font-size: 1.6vw;
  }

  /* One item per line. `width: fit-content` plus auto side margins centres the
     stack as a block, while `flex-start` keeps the three icons on a common
     left edge. */
  #cardContainer .icon-row {
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    gap: 0.7em;
    font-size: 1.5vw;
    margin-top: 1.5vw;
  }

  #cardContainer .icon-row img {
    height: 2.2vw;
    margin-right: 1vw;
  }

  #cardContainer #visit .row {
    font-size: 1.3vw;
  }
}

/* Very wide screens (4K and up) — paragraph text a touch larger. Everything
   below 2500px is the vw sizing above, unchanged. */
@media (min-width: 2500px) {
  #colorBanner .banner-text {
    font-size: 1.1vw;
  }

  #cardContainer #meetOurTeam,
  #cardContainer #provide,
  #cardContainer #visit {
    font-size: 1vw;
  }
}


/* Small screens (below 992px) =============================================
   Below the breakpoint the `vw` type sizes are not applied, so text falls back
   to the browser's default size, which is readable. What
   does need fixing is spacing: several paddings were expressed in `vw` or
   percentages tuned for a 1024px-wide page.
   ========================================================================== */

@media (max-width: 991.98px) {

  #colorBanner {
    text-align: center;
  }

  /* 5vw side padding plus a 90%-wide container leaves very little room for
     text on a phone. Give the content the full width instead. */
  #cardContainer {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    width: 92%;
  }

  /* Breathing room above the photo so the burgundy background shows between
     it and the navbar. */
  #colorBanner #banner-topCol {
    padding: 1.5rem 15% 0;
  }

  #colorBanner #bannerPhoto {
    padding-left: 0;
    padding-right: 0;
  }

  /* Left-margin and nudge were tuned for the two-column desktop layout; the
     columns are stacked here, so centre the text block instead. */
  #colorBanner #banner-header {
    transform: none;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
  }

  /* A <p> carries a 1rem bottom margin by default. On this paragraph — the
     last thing in the banner — that was 16px of maroon under the text with
     nothing after it, on top of the column's own padding. */
  #colorBanner .banner-text {
    text-align: left;
    margin-left: 0;
    margin-bottom: 0;
    padding: 0 1rem;
  }

  #cardContainer .icon-row {
    font-size: 1rem;
    gap: 0.5rem 1.75rem;
  }

  #cardContainer .icon-row img {
    height: 1.1rem;
    margin-right: 0.4rem;
  }

  /* Cards stack, so let each one breathe. */
  #cardContainer .content-container {
    margin-top: 1.25rem;
  }

  #cardContainer .card-body {
    padding: 1.25rem;
  }

  /* Tap targets rather than hover targets on touch screens. */
  #cardContainer .card-body:hover {
    background-color: transparent;
  }
}


/* Banner, tablets (768px to 991px) ==========================================
   Stacked, the banner is as tall as the photo plus the text. Side by side, as
   on desktop, it is only as tall as the taller of the two. See the same block
   in about.css for the full reasoning.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991.98px) {

  #colorBanner .row {
    align-items: center;
  }

  /* Same maroon band as on phones — the banner's own vertical padding sat
     outside the padding its columns already carry. Sides stay. */
  #colorBanner {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* .col-12 sets width: 100%, so the flex basis and the width both need
     overriding. */
  #colorBanner #banner-topCol,
  #colorBanner #banner-bottomCol {
    flex: 0 0 50%;
    width: 50%;
  }

  /* Unlike the other three pages, home puts the photo on the RIGHT at desktop
     (order-lg-2 in the markup). Those order classes only apply from 992px, so
     they are repeated here to keep tablet matching desktop. */
  #colorBanner #banner-topCol {
    order: 2;
    padding: 0.75rem 1.5rem 0.75rem 0.5rem;
  }

  #colorBanner #banner-bottomCol {
    order: 1;
    padding: 0.75rem 0.5rem 0.75rem 1.5rem;
  }

  #colorBanner #banner-header {
    text-align: left;
    font-size: 1.35rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
  }

  #colorBanner .banner-text {
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0;
  }
}


/* Banner, phones (below 768px) ============================================== */

@media (max-width: 767.98px) {

  /* A maroon band above and below content that already has its own padding.
     The sides stay — see the note in about.css. */
  #colorBanner {
    padding-top: 0;
    padding-bottom: 0;
  }

  #colorBanner #banner-topCol {
    padding: 0.75rem 28% 0;
  }

  #colorBanner #banner-header {
    font-size: 1.25rem;
    margin-top: 0.6rem;
    margin-bottom: 0.25rem;
  }

  #colorBanner .banner-text {
    font-size: 0.875rem;
    line-height: 1.45;
  }

  #colorBanner #banner-bottomCol {
    padding-bottom: 0.75rem;
  }
}