/**
 * Finchase public site — header/logo fixes for admin-uploaded branding.
 */

/**
 * Wexbourne colour system.
 *
 * The vendor template (site/css/style.css) exposes its whole palette as
 * --theme-color1/2/3 custom properties, which almost every button, link,
 * hover state and dark section is built on via var(). Redeclaring those
 * same custom property names at :root here — after style.css in the
 * cascade — remaps the entire vendor palette onto Wexbourne's without
 * editing the vendor file at all.
 *
 * A handful of components hardcode the old greens directly instead of
 * using the variables (#0C2F25 dark green, #10551F mid green, plus the
 * #86942E/#C7DC49 pair already neutralised in the hero fix below); those
 * are remapped individually further down, scoped to only the selectors
 * that actually render on this site's live pages.
 */
:root {
  /* Wexbourne brand tokens */
  --wex-primary: #0B1E3D;        /* deep navy — dark sections, footer, headings */
  --wex-primary-light: #163564;  /* lighter navy — hover on dark surfaces */
  --wex-accent: #10A683;         /* teal — buttons, links, active states */
  --wex-accent-light: #16C79A;   /* lighter teal — hover on accent */
  --wex-bg: #FFFFFF;
  --wex-surface: #F7F8FA;
  --wex-text: #10182B;
  --wex-muted: #5B6478;
  --wex-border: #E7EAF0;
  --wex-success: #1B8A5A;
  --wex-warning: #F2A93B;
  --wex-danger: #E5484D;

  /* Remap the vendor template's own tokens onto the palette above */
  --theme-color1: var(--wex-accent);
  --theme-color2: var(--wex-primary);
  --theme-color3: var(--wex-primary);
  --theme-color1-rgb: 16, 166, 131;
  --theme-color2-rgb: 11, 30, 61;
  --theme-color3-rgb: 11, 30, 61;
  --theme-color1-text-color: #FFFFFF;
  --theme-color2-text-color: #FFFFFF;
  --theme-color3-text-color: var(--wex-accent-light);
  --headings-color: var(--wex-primary);
}

.main-header .logo-box {
  flex-shrink: 0;
  max-width: 220px;
}

.main-header .logo img {
  display: block;
  max-height: 56px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Safety net so the Wexbourne SVG logo never renders at its raw intrinsic
   size in a spot the vendor template didn't already constrain (e.g. the
   footer). More specific existing rules (header, sticky header, mobile
   menu, drawers) still win over this. */
.brand-mark-link img {
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.footer-style-one .lower-bottom .logo img {
  max-height: 40px;
}

.main-header .header-lower .main-box {
  flex: 1 1 auto;
  min-width: 0;
}

.main-header .header-lower .main-box .nav-outer {
  flex: 1 1 auto;
  justify-content: flex-start;
}

.main-header .main-menu .navigation > li {
  padding: 22px 0;
}

.main-header .main-menu .navigation > li > a {
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
}

.sticky-header .inner-container {
  min-height: 76px;
}

.sticky-header .logo {
  padding: 14px 0;
}

.sticky-header .logo img {
  max-height: 52px;
  max-width: 200px;
  width: auto;
  object-fit: contain;
}

.sticky-header .main-menu .navigation > li {
  margin-left: 36px;
  padding: 26px 0;
}

.sticky-header .main-menu .navigation > li > a {
  font-size: 17px;
  font-weight: 500;
}

.mobile-menu .nav-logo img {
  max-height: 48px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 1199.98px) {
  .main-header .logo img {
    max-height: 48px;
    max-width: 170px;
  }

  .main-header .main-menu .navigation > li {
    margin-right: 14px;
  }

  .main-header .main-menu .navigation > li > a {
    font-size: 16px;
    padding: 5px 8px;
  }
}

/**
 * Header nav wraps onto a second line at common desktop widths (~1440-
 * 1550px): the vendor only hides the address/phone block in .outer-box
 * below 1399.98px, but the header (logo + 6 nav items + contact info +
 * CTA) doesn't actually have room for that block until ~1550px+. Extend
 * the same hide-breakpoint the vendor already uses, just further out,
 * rather than compressing nav spacing to fight for a few more pixels.
 */
@media (max-width: 1599.98px) {
  .header-style-one .outer-box .list-style-one {
    display: none;
  }
}

/**
 * Homepage hero — replace the template's frosted-glass "line" slats and
 * olive/dark-green accent blob with a single clean scrim so the photo
 * stays readable behind the headline without decorative clutter.
 */
.banner-section .inner-container .line-box {
  display: none;
}

.banner-section .bg-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 12, 24, 0.78) 0%, rgba(6, 12, 24, 0.32) 45%, rgba(6, 12, 24, 0.62) 100%);
  pointer-events: none;
}

/**
 * Hardcoded template greens (#0C2F25 / #10551F) that bypass the
 * --theme-color variables above, remapped only on the components that
 * actually render on this site's live pages (home, about, contact,
 * our-services). #0C2F25 acted as the template's de-facto dark
 * text/heading tone (it's literally --headings-color) so it maps to
 * Wexbourne's navy; #10551F was used for hover/badge/highlight
 * accents so it maps to Wexbourne's teal.
 */
.main-menu .navigation > li > a:hover,
.header-style-one .outer-box .list-style-one li a,
.header-style-two .outer-box .list-style-one li a,
.accordion-box .block .acc-btn .icon,
.feature-block-four .content-box .icon,
.about-section .about-list-box .about-list li,
.about-section-two .about-list-box .about-list li {
  color: var(--wex-primary) !important;
}

.btn-style-two,
.header-style-one .outer-box .list-style-one li i,
.header-style-two .outer-box .list-style-one li i,
.about-content2 .sub-title .icon {
  background-color: var(--wex-accent) !important;
  color: #FFFFFF !important;
}

.about-content .array-button .array-prev:hover,
.about-content .array-button .array-next:hover {
  background-color: var(--wex-primary) !important;
  color: #FFFFFF !important;
}

.about-section .pagination-content-swiper2 .swiper-pagination-bullet {
  background: var(--wex-border) !important;
}

.experience-one .count-box,
.service-block-two .services-list li i {
  color: var(--wex-accent) !important;
}

.feature-block-three .inner-block .text {
  border-top-color: var(--wex-accent) !important;
}

.service-section-h1 .bg-image:before,
.about-section .experience-three:before {
  background: var(--wex-primary) !important;
}

.contact-section .image-column .image:before {
  background: linear-gradient(182.62deg, rgba(11, 30, 61, 0) 8.48%, var(--wex-primary) 120.51%) !important;
}
@media (max-width: 575.98px) {
  .contact-section .image-column .image:before {
    background: linear-gradient(182.62deg, rgba(11, 30, 61, 0.75) 8.48%, var(--wex-primary) 120.51%) !important;
  }
}

/**
 * Preloader splash icon — vendor template shipped the Finora checkmark
 * icon (site/images/icons/preloader.png) here; swap in the Wexbourne mark.
 */
.preloader:after {
  background-image: url(../images/wexbourne-mark.svg) !important;
  background-size: contain !important;
}

/**
 * Text/mark logo fallback for the public site (header, mobile nav,
 * footer) — shown only when no logo has been uploaded in Settings, so
 * the vendor template's own "Finora" logo files are never referenced.
 */
.brand-mark-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--wex-accent), var(--wex-primary));
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  font-family: inherit;
}
.brand-mark-text {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--wex-primary);
}
.footer-style-one .brand-mark-text,
.mobile-menu .brand-mark-text {
  color: #FFFFFF;
}