/*
Theme Name: Humitech Bayside
Theme URI: https://humitechbayside.com.au
Author: Tradie Promotions
Author URI: https://tradiepromotions.com.au
Description: Custom WordPress theme for Humitech Bayside, built with Bootstrap 5. Responsive templates for Home, About, Gallery, Testimonials, and Contact.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: humitech-bayside
*/

/* CSS Variables: update these with final brand colors and fonts */
:root {
  --brand-primary: #2e7d32;
  --brand-secondary: #66bb6a;
  --brand-accent: #e8f5e9;
  --brand-dark: #10452d;
  --brand-light: #f5fbf7;
  --heading-font: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto,
    Arial, sans-serif;
  --body-font: "Roboto", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
}

/* Typography */
body {
  font-family: var(--body-font);
  color: #222;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  font-weight: 800;
}

/* Navbar */
/* Header logo sizing */
.navbar-brand img.logo,
.navbar-brand img.custom-logo {
  height: 38px;
  max-height: 38px;
  width: auto;
}

.navbar.sticky-top.scrolled .logo {
  transform: scale(0.9);
}
/* .nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--brand-secondary);
  transition: width .25s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; } */

/* Remove bullets even on any fallback ULs */
header nav ul {
  list-style: none !important;
  margin: 0;
  padding-left: 0 !important;
}
header nav ul li {
  margin: 0;
}

/* Desktop: horizontal layout */
@media (min-width: 992px) {
  #mainNavbar .navbar-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }
  #mobileMenu {
    display: none !important;
  }
}

/* Tell Bootstrap what colours to use for navbar links */
.navbar {
  --bs-navbar-color: var(--brand-dark);
  --bs-navbar-hover-color: var(--brand-primary);
  --bs-navbar-active-color: var(--brand-primary);
  --bs-navbar-brand-color: var(--brand-dark);
  --bs-navbar-brand-hover-color: var(--brand-primary);
}

/* Fallback override for any anchor that slips through */
header .navbar a {
  color: var(--brand-dark) !important;
  text-decoration: none;
  font-weight: 600;
}
header .navbar a:hover {
  color: var(--brand-primary) !important;
}

/* Optional: underline hover effect */
.navbar .nav-link {
  position: relative;
  padding: 0.5rem 0.25rem;
}
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--brand-secondary);
  transition: width 0.25s ease;
}
.navbar .nav-link:hover::after,
.navbar .current-menu-item > a::after {
  width: 100%;
}

/* Hero */
.hp-hero {
  background: var(--brand-dark);
  color: #fff;
  padding: clamp(48px, 8vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.hp-hero .badge {
  background: var(--brand-secondary);
}

/* Sections */
.section-muted {
  background: var(--brand-accent);
}
.section-divider {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.icon-bullet {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--brand-secondary);
  color: #003243;
  font-weight: 700;
}

/* Cards */
.card.hover {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card.hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Gallery */
.gallery-grid {
  column-count: 1;
  column-gap: 1rem;
}
@media (min-width: 576px) {
  .gallery-grid {
    column-count: 2;
  }
}
@media (min-width: 992px) {
  .gallery-grid {
    column-count: 3;
  }
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Testimonials */
.testimonial {
  background: #fff;
  border-left: 4px solid var(--brand-secondary);
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
}
.testimonial .name {
  font-weight: 700;
}

.page-hero img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}
.page-hero h1 {
  font-weight: 800;
}
.section-muted {
  background: var(--brand-accent);
}

/* Inputs */
.fluentform .ff-el-input,
.fluentform .ff-el-textarea,
.fluentform select {
  border-radius: 0.6rem;
  border-color: #d6e6db;
}
.fluentform .ff-el-input:focus,
.fluentform .ff-el-textarea:focus,
.fluentform select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(46, 125, 50, 0.15);
}

/* Submit button (inherits your global btn colours) */
/* Fluent Forms submit button: normal + hover */
.fluentform .ff-btn,
.fluentform .ff-btn-submit,
.fluentform .ff_submit_btn_wrapper .ff-btn-submit {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 0.6rem;
}
.fluentform .ff-btn:hover,
.fluentform .ff-btn:focus,
.fluentform .ff-btn:active {
  background: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  color: #fff !important;
}

/* Block widths inside the trial template */
.trial-template .alignwide,
.trial-template .wp-block-group.alignwide {
  max-width: 1140px; /* tweak to your container width */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bs-gutter-x, 0.75rem);
  padding-right: var(--bs-gutter-x, 0.75rem);
}
.trial-template .alignfull {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Optional: soft card look for "section-muted" utility you’ve been using */
.section-muted {
  background: #f5fbf7;
}

/* Footer */
.site-footer {
  background: var(--brand-dark);
  color: #d9eef6;
  padding: 48px 0;
}
.site-footer a {
  color: #d9eef6;
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
}

/* Utilities */
.btn-brand {
  background: var(--brand-secondary);
  color: #052733;
  border: none;
}
.btn-brand:hover {
  background: var(--brand-light);
  color: #052733;
}

/* Spacing helpers */
.py-6 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-7 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Footer logo sizing */
.site-footer .footer-brand img.logo,
.site-footer .footer-brand img.custom-logo {
  height: 28px;
  max-height: 28px;
  width: auto;
}

/* Footer list reset & link style */
.site-footer ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.site-footer li {
  display: inline-block;
  margin: 0 0.5rem;
}
.site-footer a {
  color: #daf2e4;
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
}

/* Unify header & footer logo size */
.navbar-brand img.logo,
.navbar-brand img.custom-logo,
.site-footer .footer-brand img.logo,
.site-footer .footer-brand img.custom-logo,
.navbar-brand svg,
.site-footer .footer-brand svg {
  height: 64px !important;
  max-height: 64px !important;
  width: auto !important;
  vertical-align: middle;
}

/* Footer: make raster/SVG logo appear white */
.site-footer .footer-brand img.logo,
.site-footer .footer-brand img.custom-logo {
  height: 96px !important;
  max-height: 96px !important;
  filter: brightness(0) invert(1); /* dark -> white */
  opacity: 0.95; /* optional soften */
}

/* ========== Brand variables (safe to add even if not previously used) ========== */
:root {
  --hb-green: #2e7d32;
  --hb-green-dark: #1b5e20;
  --hb-surface: #f7fbf8; /* page background */
  --hb-muted: #f1f8f4; /* light sections */
}

/* ========== Global brightness ========== */
body {
  background: var(--hb-surface);
  color: #13301d;
}
.section-muted {
  background: var(--hb-muted);
}
.card {
  background: #fff;
  border: 1px solid #e6efe7;
}

/* Navbar a touch lighter */
.navbar {
  background: #fff;
}
.navbar .nav-link {
  color: #163d25;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: var(--hb-green-dark);
}

/* ========== Headings: switch to Oswald ========== */
:root {
  --hb-heading-font: "Oswald", "Helvetica Neue", Arial, system-ui, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4 {
  font-family: var(--hb-heading-font);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.2px;
}

/* ========== Logo sizing (header + footer) ========== */
.site-branding .custom-logo,
.footer-brand .custom-logo {
  max-height: 100px;
  width: auto;
  height: auto;
}
@media (min-width: 992px) {
  .site-branding .custom-logo,
  .footer-brand .custom-logo {
    max-height: 120px;
  }
}

/* If your fallback header logo used .logo, keep them consistent */
.site-branding .logo {
  max-height: 100px;
  width: auto;
  height: auto;
}

/* ========== Buttons (brand green with proper hover/focus) ========== */
.btn-brand {
  background: var(--hb-green);
  border-color: var(--hb-green);
  color: #fff;
}
.btn-brand:hover,
.btn-brand:focus,
.btn-brand:active {
  background: var(--hb-green-dark);
  border-color: var(--hb-green-dark);
  color: #fff;
}

/* Outline variant if you use it */
.btn-outline-brand {
  color: var(--hb-green);
  border-color: var(--hb-green);
  background: transparent;
}
.btn-outline-brand:hover,
.btn-outline-brand:focus {
  color: #fff;
  background: var(--hb-green);
  border-color: var(--hb-green);
}

/* ========== Hero/Cover: reduce the darkness overlay ========== */
/* Gutenberg Cover block overlay */
.wp-block-cover .wp-block-cover__background {
  opacity: 0.35 !important;
}
/* If you have a custom overlay element, normalize it */
.hero-overlay {
  opacity: 0.35 !important;
}

/* ========== Benefits: highlight key phrases ========== */
.benefits li strong {
  background: #e8f5e9;
  padding: 0.15rem 0.35rem;
  border-radius: 0.4rem;
}

/* ========== Tabs (Who We Help) polish ========== */
.nav-pills .nav-link {
  color: #163d25;
}
.nav-pills .nav-link.active {
  background: var(--hb-green);
}
.nav-pills .nav-link:hover {
  color: var(--hb-green-dark);
}

/* ========== Footer polish ========== */
.site-footer {
  background: var(--hb-green);
}
.site-footer .menu {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}
.site-footer .menu a {
  color: #173b24;
}
.site-footer .menu a:hover {
  color: var(--hb-green-dark);
}

/* Optional: make footer logo the same as header */
.site-footer .custom-logo {
  max-height: 100px;
  width: auto;
}

/* Hero uses background image on the section */
.hp-hero {
  position: relative;
  background: #21401f; /* fallback if no image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 460px;
  overflow: hidden;
}
.hp-hero .container {
  position: relative;
  z-index: 2;
  padding: 3.5rem 0;
}
@media (min-width: 768px) {
  .hp-hero {
    min-height: 560px;
  }
  .hp-hero .container {
    padding: 4.5rem 0;
  }
}

/* Soft, adjustable overlay to keep text readable (brighten/darken by changing alpha) */
.hp-hero__overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3); /* lower = brighter, higher = darker */
  z-index: 1;
}

/* If you still have any old green bg on the parent, kill it */
.hp-hero {
  background-color: transparent;
}

.who-help .nav-pills .nav-link {
  color: #163d25;
}
.who-help .nav-pills .nav-link.active {
  background: var(--hb-green);
}

.benefits li {
  margin-bottom: 0.25rem;
}
.benefits li strong {
  background: #e8f5e9;
  padding: 0.15rem 0.35rem;
  border-radius: 0.4rem;
}

.who-help .nav-pills .nav-link {
  color: #163d25;
}
.who-help .nav-pills .nav-link.active {
  background: var(--hb-green);
}
.benefits li {
  margin-bottom: 0.25rem;
}
.benefits li strong {
  background: #e8f5e9;
  padding: 0.15rem 0.35rem;
  border-radius: 0.4rem;
}

/* ===== Who We Help – visual polish ===== */
.who-help {
  /* background: var(--hb-muted, #f1f8f4); */
  border-radius: 1rem;
}
.who-help .row.text-center h2 {
  margin-bottom: 0.25rem;
}
.who-help .row.text-center p {
  color: #476254;
}

.who-help .nav {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.who-help .nav-pills .nav-link {
  background: #fff;
  border: 1px solid #e1ece4;
  color: #163d25;
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
}
.who-help .nav-pills .nav-link:hover {
  border-color: #cfe3d6;
}
.who-help .nav-pills .nav-link.active {
  background: var(--hb-green, #2e7d32);
  border-color: var(--hb-green, #2e7d32);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Left column: benefits card look */
.who-help__benefits {
  display: flex;
}
.who-help__benefits .benefits {
  background: #fff;
  border: 1px solid #e6efe7;
  border-radius: 0.9rem;
  padding: 1rem 1.25rem;
  width: 100%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.who-help__benefits .benefits li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 0.4rem;
}
.who-help__benefits .benefits li::before {
  content: "✓";
  flex: 0 0 auto;
  color: var(--hb-green, #2e7d32);
  font-weight: 700;
  margin-top: 0.1rem;
}
.who-help__benefits .benefits li strong {
  background: #e8f5e9;
  padding: 0.15rem 0.35rem;
  border-radius: 0.35rem;
}

/* Right column: image tiles */
.who-help__images .row > [class*="col-"] {
  /* tighter gutters feel */
  padding-right: 0.4rem;
  padding-left: 0.4rem;
}
.who-help__images img {
  width: 100%;
  border-radius: 0.8rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  aspect-ratio: 1/1;
  object-fit: cover; /* square, tidy grid */
}

/* Spacing */
@media (min-width: 768px) {
  .who-help .tab-content {
    margin-top: 0.5rem;
  }
}

/* WHO WE HELP — clean, minimal */

.who-help {
  background: #fff; /* no pale-green wash */
  border: 0;
  border-radius: 0;
  padding: 0 0 2rem;
}

.who-help .row.text-center h2 {
  margin-bottom: 0.25rem;
}
.who-help .row.text-center p {
  color: #5c6f62;
}

/* Tabs: simple underline style (not big pills) */
.who-help .nav {
  justify-content: center;
  gap: 0.25rem 0.75rem;
  border-bottom: 1px solid #e6efe7;
  margin-bottom: 1rem;
  padding-bottom: 0.25rem;
}
.who-help .nav-pills .nav-link {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #173b24;
  padding: 0.5rem 0.25rem;
  position: relative;
  font-weight: 500;
}
.who-help .nav-pills .nav-link:hover {
  color: #2e7d32;
}
.who-help .nav-pills .nav-link.active {
  color: #2e7d32;
}
.who-help .nav-pills .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  background: var(--hb-green, #2e7d32);
  border-radius: 1px;
}

/* Two columns: give benefits more room on desktop */
@media (min-width: 992px) {
  .who-help__benefits {
    flex: 0 0 auto;
    width: 58.3333%;
  } /* ~col-lg-7 */
  .who-help__images {
    flex: 0 0 auto;
    width: 41.6667%;
  } /* ~col-lg-5 */
}

/* Benefits list — remove green badges & rounded bullets */
.who-help__benefits .benefits {
  background: #fff;
  border: 1px solid #e6efe7;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  box-shadow: none;
}

.who-help__benefits .benefits li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 0.6rem;
}

/* Replace round dot with a slim ✓, left-aligned */
.who-help__benefits .benefits li::before {
  content: "✓";
  color: var(--hb-green, #2e7d32);
  font-weight: 600;
  line-height: 1.4;
  margin-top: 0.1rem;
}

/* Head phrase in brand colour, NO background box */
.who-help__benefits .benefits li strong {
  background: none;
  color: #1f472b;
  font-weight: 700;
  padding: 0;
  border-radius: 0;
}

/* Tone down the long em-dash spacing */
.who-help__benefits .benefits li {
  --dash-space: 0.35rem;
}
.who-help__benefits .benefits li br {
  display: none;
} /* helps where WP inserts breaks */

/* Image tiles — simple, crisp */
.who-help__images .row {
  --bs-gutter-x: 0.6rem;
  --bs-gutter-y: 0.6rem;
}
.who-help__images img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.5rem;
  box-shadow: none;
  border: 1px solid #eef4ef;
}

/* Section spacing on small screens */
@media (max-width: 767.98px) {
  .who-help {
    padding-bottom: 1.25rem;
  }
}

/* Home — Industries grid */
.home-industries .industry-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.industry-card strong {
  color: #143b24 !important;
}

/* Case hero */
.case-hero {
  min-height: 320px;
  background: #21401f;
}
.case-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.8);
}
.case-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.case-hero .container {
  position: relative;
  z-index: 2;
}

/* Base heading with icon */
.hb-icon-heading {
  display: inline-flex; /* <-- aligns icon + text */
  align-items: center; /* <-- vertical centering */
  gap: 0.5rem; /* space between icon and text */
  line-height: 1.2;
  color: var(--hb-green, #2e7d32); /* heading & icon colour */
}

/* The icon box as a flex item */
.hb-icon-heading::before {
  content: "";
  width: 1.2rem; /* size of the icon */
  height: 1.2rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Variants per benefit */
.hb-icon-heading.icon-natural::before {
  background-image: url("assets/icon-natural-mineral.svg");
}
.hb-icon-heading.icon-energy::before {
  background-image: url("assets/icon-energy-saving.svg");
}
.hb-icon-heading.icon-env::before {
  background-image: url("assets/icon-environmentally-friendly.svg");
}
.hb-icon-heading.icon-safety::before {
  background-image: url("assets/icon-safer-workplace.svg");
}

/* Make the case-study hero taller and adjust the focal point */
body.single-hb_case_study .case-hero {
  min-height: clamp(460px, 70vh, 720px); /* taller = less crop */
}
body.single-hb_case_study .case-hero__bg {
  background-position: center 35%; /* nudge focus up; try 25–45% */
}

/* Taller hero + centered content */
.case-hero {
  min-height: clamp(460px, 60vh, 720px);
  display: flex; /* enables vertical centering */
  align-items: center; /* center content vertically */
  position: relative;
}
.case-hero > .container {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: inherit; /* let inner content match hero height */
  padding-top: 10rem; /* adjust if you want more breathing room */
  padding-bottom: 2.5rem;
}
.case-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center; /* center within the available height */
  min-height: inherit;
}

/* Background image + overlay */
.case-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%; /* nudge focus; tweak 25–45% if needed */
  filter: brightness(0.85);
}
.case-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
}

/* Responsive fine-tuning */
@media (max-width: 576px) {
  .case-hero {
    min-height: 420px;
  }
  .case-hero > .container {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

/* About hero — match case-study hero layout */
.page-hero {
  min-height: clamp(460px, 60vh, 720px);
  display: flex; /* vertical centering */
  align-items: center;
  position: relative;
}
.page-hero > .container {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: inherit;
  padding-top: 10rem;
  padding-bottom: 2.5rem;
}
.page-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center; /* center text vertically */
  min-height: inherit;
}

/* Background + overlay (same feel as case hero) */
.page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%; /* tweak 25–45% to move focal point up/down */
  filter: brightness(0.85);
}
/* .page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
} */

/* Optional: per-page focal control (same trick as case hero) */
.page-hero__bg {
  background-position: center var(--hero-focus-y, 35%);
}

/* Contact cards: force identical circular photos */
.contact-card img.contact-photo,
.contact-card .contact-photo.placeholder {
  width: 128px !important;
  height: 128px !important;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
  max-width: none; /* ignore any img-fluid rules */
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}