/*
 * HLP Galleria - footer.
 *
 * The base theme's footer was built for a different demo: each column got a
 * different left-padding hack (0 / 40px / 76px / 115px), the type ran at four
 * sizes in five colours, and several of those colours were near-white on what
 * used to be a light background. This file replaces all of that, scoped to
 * .tj-footer-section.footer-1, with one type scale and one palette:
 *
 *   - every line of text and every link is the same family, size and colour;
 *     only the two column headings step up, and only hover/focus changes hue;
 *   - the three columns start on one line (the logo and the headings share a
 *     fixed-height head strip) and finish on one line (the rule above the
 *     bottom bar), so the block reads as three parallel columns;
 *   - text colour is #dcebe9 on #0a2626, about 12:1 contrast - well past the
 *     WCAG AA 4.5:1 floor at every size used here.
 */

.tj-footer-section.footer-1 {
  /* The whole footer palette, in one place. */
  --hlp-footer-bg: #0a2626;
  --hlp-footer-fg: #dcebe9;
  --hlp-footer-heading: #ffffff;
  --hlp-footer-accent: #4fd8ce;
  --hlp-footer-hover: #faa61a;
  --hlp-footer-rule: rgba(255, 255, 255, 0.16);
  /* Height of the logo / heading strip that aligns the tops of the columns. */
  --hlp-footer-head: 48px;

  background-color: var(--hlp-footer-bg);
  padding-top: 90px;
  border-radius: 16px;
}

/* One family, one size, one colour. Everything else in here is an exception
   that has to earn itself: the headings, the icons and the hover state. */
.tj-footer-section.footer-1,
.tj-footer-section.footer-1 p,
.tj-footer-section.footer-1 a,
.tj-footer-section.footer-1 li,
.tj-footer-section.footer-1 strong {
  font-family: var(--tj-ff-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--hlp-footer-fg);
}

.tj-footer-section.footer-1 p {
  margin: 0;
}

.tj-footer-section.footer-1 a {
  font-weight: var(--tj-fw-regular);
  text-decoration: none;
  transition: color 0.25s ease;
}

.tj-footer-section.footer-1 a:hover,
.tj-footer-section.footer-1 a:focus-visible {
  color: var(--hlp-footer-hover);
}

.tj-footer-section.footer-1 a:focus-visible {
  outline: 2px solid var(--hlp-footer-hover);
  outline-offset: 3px;
}

.tj-footer-section.footer-1 strong {
  font-weight: var(--tj-fw-sbold);
  letter-spacing: 0.2px;
}

/* ---- Columns -------------------------------------------------------------
   Each column fills the row's height, so the three sit on a shared baseline
   grid rather than floating at whatever height their own content wants. */

.tj-footer-section.footer-1 .footer-main-area {
  padding: 0 0 52px 0;
}

.tj-footer-section.footer-1 .footer-widget {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Cancel the theme's per-column padding hacks - all three align left. */
  padding-inline-start: 0 !important;
  margin-top: 0 !important;
}

/* The head strip: the logo and the two headings occupy the same box, so the
   text below them starts on the same line in all three columns. */
.tj-footer-section.footer-1 .footer-logo,
.tj-footer-section.footer-1 .footer-widget .title {
  display: flex;
  align-items: center;
  min-height: var(--hlp-footer-head);
  margin: 0 0 24px 0;
}

.tj-footer-section.footer-1 .footer-logo {
  max-width: 165px;
}

.tj-footer-section.footer-1 .footer-logo img {
  width: 100%;
  height: auto;
}

.tj-footer-section.footer-1 .footer-widget .title {
  font-family: var(--tj-ff-heading);
  font-size: 18px;
  font-weight: var(--tj-fw-sbold);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--hlp-footer-heading);
}

.tj-footer-section.footer-1 .footer-widget .footer-text {
  max-width: 340px;
  width: 100%;
}

/* ---- Quick Links ---------------------------------------------------------
   Two columns, filled top-to-bottom, so a seven-item list ends level with the
   contact column instead of hanging 100px below it. */

.tj-footer-section.footer-1 .footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 20px;
}

.tj-footer-section.footer-1 .footer-links li {
  padding: 0;
}

.tj-footer-section.footer-1 .footer-links li a {
  display: inline-flex;
}

/* ---- Get in Touch --------------------------------------------------------
   Icon plus value on one line. The icon carries the meaning that a separate
   "Phone / Email / Address" label used to, at no cost in type sizes. */

.tj-footer-section.footer-1 .footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: none;
  width: 100%;
}

.tj-footer-section.footer-1 .footer-contact-info .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}

.tj-footer-section.footer-1 .footer-contact-info .contact-item i {
  flex: 0 0 20px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--hlp-footer-accent);
}

.tj-footer-section.footer-1 .footer-contact-info .contact-item a {
  display: inline;
  margin: 0;
  font-weight: var(--tj-fw-regular);
}

/* ---- Bottom bar ----------------------------------------------------------
   The developer attribution and the RERA number sit on one rule that runs the
   full width, which is what closes the three columns off at a shared line. */

.tj-footer-section.footer-1 .footer-bottom-bar {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--hlp-footer-rule);
  padding: 24px 0 36px 0;
}

.tj-footer-section.footer-1 .footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 40px;
}

.tj-footer-section.footer-1 .footer-bottom-inner a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tj-footer-section.footer-1 .bg-shape-1,
.tj-footer-section.footer-1 .bg-shape-2 {
  opacity: 0.45;
}

/* ---- Tablet and phone ---------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tj-footer-section.footer-1 {
    /* No stretched columns below the breakpoint, so the shared head strip
       stops earning its keep - the logo goes back to its natural height. */
    --hlp-footer-head: 0px;
    padding-top: 60px;
  }
  .tj-footer-section.footer-1 .footer-main-area {
    padding-bottom: 40px;
  }
  .tj-footer-section.footer-1 .footer-widget .footer-text {
    max-width: 100%;
  }
  .tj-footer-section.footer-1 .footer-bottom-bar {
    padding-bottom: 28px;
  }
  .tj-footer-section.footer-1 .footer-bottom-inner {
    justify-content: flex-start;
  }
}

@media (max-width: 575px) {
  .tj-footer-section.footer-1 .footer-links {
    grid-auto-flow: row;
    grid-template-rows: none;
  }
}